Scribd
Upload
57 views34 pages

Lec 03introduction To HTML

This document provides an overview and introduction to HTML. It begins with definitions of HTML, HTTP, and how HTML documents are structured. It then covers basic HTML tags for headings, paragraphs, breaks, and horizontal rules. It discusses formatting tags, character entities, links, lists, tables, and comments. Examples are provided throughout to illustrate the various HTML elements and tags.

Uploaded by

optimus155
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
57 views34 pages

Lec 03introduction To HTML

This document provides an overview and introduction to HTML. It begins with definitions of HTML, HTTP, and how HTML documents are structured. It then covers basic HTML tags for headings, paragraphs, breaks, and horizontal rules. It discusses formatting tags, character entities, links, lists, tables, and comments. Examples are provided throughout to illustrate the various HTML elements and tags.

Uploaded by

optimus155
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

An Introduction to HTML

Lecture 03
LAMP
29th Jan 2008
Story So Far …..
 Introduction to Internet & Web basics
• Internet, internet and intranet
• World Wide Web
• Web page
• HTML
• Browsers
• Server-client Architecture
• Server
• Web server
• Scripting
• ASP.NET

12/08/21 2
Story Continues …

 HTTP

 HTML

 HTML Tags

 Formatting & Nesting

 Links

 Lists

 Tables

12/08/21 3
Acronym #1: HTTP

 Hypertext Transfer Protocol

 provides a way for one computer (the browser) to ask a remote computer
(a web server) for an HTML document

12/08/21 4
Acronym #2: HTML

 Hypertext Markup Language

• hypertext : a set of documents with links

• markup : tags are added to text for structure

• language : vocabulary, grammar etc.

 a language for describing the structure and the appearance of web pages

 web browsers read HTML and use the mark up tags to decide how to

display it

 HTML doc is a plain text doc


12/08/21 5
HTML

 HTML 2.0 - November, 1995.

 HTML 3.0 - September 28, 1995

 HTML 3.2 - January 14, 1997

 HTML 4.0 - July 8, 1997

 W3C – World Wide Web Consortium

 http://www.w3.org

12/08/21 6
So what’s this tag business?

 HTML documents are plain text (ASCII) with tags added to

them

 tags appear between angle brackets: <tag>

 the spacing of text in HTML does not affect the layout of the

text in the browser

 the best way to learn is to check the source

12/08/21 7
Check the HTML source!

12/08/21 8
Check the HTML source!

12/08/21 9
Tags

 A element is fundamental component of the structure of a text doc

 To denote various elements tags are used.

Structure : “<“, tag name , “>”

 They are generally paired.

 Some tags has additional properties “attributes”.

 Spaces and lines in the source are ignored

 Tag case insensitive: always use lower case

12/08/21 10
The structure of an HTML document

 all HTML documents start with <html> and end with


</html>
 documents should have <head>…</head> and <body>…
</body> sections
 head contains:
• page title enclosed in <title>…</title> tags

• meta data about the page with the <META> tag

• Javascript, style sheets and other non-visual code

 body contains everything else


12/08/21 11
Basic Tags

 Tag Description

 <html> Defines an HTML document

 <body> Defines the document's body

 <h1> to <h6> Defines header 1 to header 6

 <p> Defines a paragraph

 <br> Inserts a single line break

 <hr> Defines a horizontal rule

12/08/21 12
Formatting Tags
 <B>The Altered Text</B> The Altered Text

 <I>The Altered Text</I> The Altered Text

 <U>The Altered Text</U> The Altered Text

 <PRE>The Altered Text</PRE> The Altered Text

 <p> </p> Paragraph

 <BR> Line Break


 <CENTER> and </CENTER> Aligns the text to center
 <P ALIGN="right"> and </P> Aligns the text to right
 <P ALIGN=“left"> and </P> Aligns the text to left

12/08/21 13
Formatting Tags (contd..)
 <font></font>
• Align
• Size
• Color
Ex:
<font color="#FF0000" align="center" size=“4"> This is my first
page</font>

This is my first page

12/08/21 14
The Most Common Character Entities
Result Description Entity Name Entity Number

  non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" quotation mark &quot; &#34;

' apostrophe  &apos; (does not work in IE) &#39;

12/08/21 15
Links

 Anchor tag

<a href="url">Text to be displayed</a>

Example:

<a href="http://www.bits-pilani.ac.in">BITS PILANI</a>

 The Target Attribute

<a href="http://csd"

target="_blank">CSD Rocks!</a>

12/08/21 16
View in Browser

12/08/21 17
Link (Contd…)

 Mailto Link

<a href=mailto:[email protected]>subbareddy</a>

 How to make a lmage a link ?

<a href="http://www.bits-pilani.ac.in"><img border="0"


src="button_home.gif" width="53" height="15"></a>

12/08/21 18
Body Tags
 Attributes
• Link
• Vlink
• Alink
• background
• Ex:

<body link="#008000" vlink="#800000" alink="#FF0000"


background="G:/bizi/ftpfolder/EV/images/p1.jpg">

12/08/21 19
Links
 LINK is used to indicate relationships between documents

 Path of the file or website is given in a link.

 Path :
• Relative
• Absolute

12/08/21 20
Relative Path

 Specifying the path from current document

 FOLDER1

• FOLDER2

 file1

• File1

• File2

 Relative path from folder1-file2 to folder2-file1:folder2/file1

 Relative path from folder2-file1 to folder1-file1: ../file1

12/08/21 21
Absolute Path
 C Drive
• FOLDER1
 FOLDER2
• File1

 File1
 File2

 Absolute path for folder1-file1:


C:/folder1/file1

 For a web site the URL is an absolute URL


Ex: http://www.bits-pilani.ac.in

12/08/21 22
Where to use what ?

 Absolute path
• For giving references (links) to other websites

 Relative Path:
• For referring to the web pages of the same website.

12/08/21 23
Lists

 Unnumbered List
List of Courses :
• ASP.NET
• Computer Programming I
• Computer Programming II
<ul>
<li>ASP.NET</li>
<li>Computer Programming I</li>
<li>Computer Programming II</li>
</ul>

12/08/21 24
Lists (Contd…)
 Numbered Lists
List of Courses :
1. ASP.NET
2. Computer Programming I
3. Computer Programming II
<ol>
<li>ASP.NET</li>
<li>Computer Programming I</li>
<li>Computer Programming II</li>
</ol>

12/08/21 25
Nested Lists
<ul>
List of Courses :
<li>ASP.NET</li>
 ASP.NET <ul>
<li>C#</li>
• C#
<li>VB.NET</li>
• VB.NET </ul>
<li>Computer Programming
 Computer Programming I
I</li>
 Computer Programming <li>Computer Programming
II</li>
II
</ul>

12/08/21 26
Tables
 Table tags
<table></table>

 Rows
<tr></tr>

 Columns
<td></td>

12/08/21 27
Table Tags
 Tag Description
 <table> Defines a table
 <th> Defines a table header
 <tr> Defines a table row
 <td> Defines a table cell
 <caption> Defines a table caption
 <colgroup> Defines groups of table columns
 <col> Defines the attribute values for one or more
columns in a table
 <thead> Defines a table head
 <tbody> Defines a table body
 <tfoot> Defines a table footer
12/08/21 28
ColSpan:

12/08/21 29
Colspan (Contd..)
<table border="1">
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

12/08/21 30
RowSpan

12/08/21 31
RowSpan
<table border="1“ >
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

12/08/21 32
Comments in HTML
 when you want to write something in the HTML source that
doesn't appear in browser
 also used to hide JavaScript and CSS
 comments start with <!-- and end with -->

<p>
Here is a paragraph of text.
<!-- This is a comment that will not be seen -->
The paragraph has two sentences that’s all.
</p>

12/08/21 33
12/08/21 34

You might also like