Lec 03introduction To HTML

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
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
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:subbareddy@bits-pilani.ac.in>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 
<p>
Here is a paragraph of text.

The paragraph has two sentences that’s all.
</p>
12/08/21 33
12/08/21 34

Lec 03introduction To HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec 03introduction To HTML

Uploaded by

Copyright:

Available Formats

An Introduction to HTML

 Formatting & Nesting

 Hypertext Transfer Protocol

 Hypertext Markup Language

• hypertext : a set of documents with links

• markup : tags are added to text for structure

• language : vocabulary, grammar etc.

 HTML doc is a plain text doc

 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

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

 tags appear between angle brackets: <tag>

text in the browser

 the best way to learn is to check the source

 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

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

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

• Javascript, style sheets and other non-visual code

 body contains everything else

 <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

 <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

This is my first page

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;

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

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

 The Target Attribute

 How to make a lmage a link ?

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

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

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

 Specifying the path from current document

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

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

 Absolute path for folder1-file1:

 For a web site the URL is an absolute URL

You might also like

non-breaking space

< less than < <

> greater than > >

& ampersand & &

" quotation mark " "

' apostrophe ' (does not work in IE) '