An Introduction to HTML I

1
An Introduction to HTML - I

• ASP.NET
• http//sdetu/courses/sdetc101/
• Lecture 02
• Tuesday, February 05, 2008

2
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

3
Story Continues

• HTTP
• HTML
• HTML Tags
• Formatting Nesting
• Links
• Lists
• Tables

4
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

5
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

6
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

7
So whats this tag business?

• HTML documents are plain text (ASCII) with tags
  added to them
• tags appear between angle brackets lttaggt
• 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

8
Check the HTML source!
9
Check the HTML source!
10
Tags

• A element is fundamental component of the
  structure of a HTML doc
• To denote various elements tags are
  used.Structure lt, tag name , gt
• 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

11
The structure of an HTML document

• all HTML documents start with lthtmlgt and end with
  lt/htmlgt
• documents should have ltheadgtlt/headgt and
  ltbodygtlt/bodygt sections
• head contains
• page title enclosed in lttitlegtlt/titlegt tags
• meta data about the page with the ltMETAgt tag
• Javascript, style sheets and other non-visual
  code
• body contains everything else

12
Basic Tags

• Tag Description
• lthtmlgt Defines an HTML document
• ltbodygt Defines the document's body
• lth1gt to lth6gt Defines header 1 to header 6
• ltpgt Defines a paragraph
• ltbrgt Inserts a single line break
• lthrgt Defines a horizontal rule

13
Formatting Tags

• ltBgtThe Altered Textlt/Bgt The Altered Text
• ltIgtThe Altered Textlt/Igt The Altered
  Text
• ltUgtThe Altered Textlt/Ugt The Altered Text
• ltPREgtThe Altered Textlt/PREgt The Altered Text
• ltpgt lt/pgt Paragraph
• ltBRgt Line Break
• ltCENTERgt and lt/CENTERgt Aligns the text to
  center
• ltP ALIGN"right"gt and lt/Pgt Aligns the text to
  right
• ltP ALIGNleft"gt and lt/Pgt Aligns the text to
  left

14
Formatting Tags (contd..)

• ltfontgtlt/fontgt
• Align
• Size
• Color
• Exltfont color"FF0000" align"center"
  size4"gt This is my first pagelt/fontgt
• This is my first page

15
The Most Common Character Entities
16
Links

• Anchor tag lta href"url"gtText to be
  displayedlt/agt
• Example
• lta href"http//www.bits-pilani.ac
  .in"gtBITS PILANIlt/agt
• The Target Attribute
• lta href"http//SDETU"
• target"_blank"gtSDET Rocks!lt/agt

17
View in Browser
18
Link (Contd)

• Mailto Linklta hrefmailtoprashant_chirania_at_bits
  -pilani.ac.ingtPrashantlt/agt
• How to make a lmage a link ?
• lta href"http//www.bits-pilani.ac.in"gtltimg
  border"0" src"button_home.gif" width"53"
  height"15"gtlt/agt

19
Body Tags

• Attributes
• Link
• Alink
• Vlink
• background
• Ex
• ltbody link"008000" vlink"800000"
  alink"FF0000" background"G/bizi/ftpfolder/EV/i
  mages/p1.jpg"gt

20
Links

• LINK is used to indicate relationships between
  documents
• Path of the file or website is given in a link.
• Path
• Relative
• Absolute

21
Relative Path

• Specifying the path from current document
• FOLDER1
• FOLDER2
• file1
• File1
• File2
• Relative path from folder1-file2 to
  folder2-file1folder2/file1
• Relative path from folder2-file1 to
  folder1-file1 ../file1

22
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

23
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.

24
Lists

• Unnumbered List
• List of Courses
• ASP.NET
• Computer Programming I
• Computer Programming II
• ltulgt
• ltligtASP.NETlt/ligt
• ltligtComputer Programming Ilt/ligt
• ltligtComputer Programming IIlt/ligt
• lt/ulgt

25
Lists (Contd)

• Numbered Lists
• List of Courses
• ASP.NET
• Computer Programming I
• Computer Programming II ltolgt
• ltligtASP.NETlt/ligt
• ltligtComputer Programming Ilt/ligt
• ltligtComputer Programming IIlt/ligt
• lt/olgt

26
Nested Lists
ltulgt ltligtASP.NETlt/ligt ltulgt
ltligtClt/ligt ltligtVB.NETlt/ligt
lt/ulgt ltligtComputer Programming
Ilt/ligt ltligtComputer Programming IIlt/ligt lt/ulgt

• List of Courses
• ASP.NET
• C
• VB.NET
• Computer Programming I
• Computer Programming II

27
Tables

• Table tagslttablegtlt/tablegt
• Rowslttrgtlt/trgt
• Columnslttdgtlt/tdgt

28
Table Tags

• Tag Description
• lttablegt Defines a table
• ltthgt Defines a table header
• lttrgt Defines a table row
• lttdgt Defines a table cell
• ltcaptiongt Defines a table caption
• ltcolgroupgt Defines groups of table columns
• ltcolgt Defines the attribute values for one or
  more columns in a table
• lttheadgt Defines a table head
• lttbodygt Defines a table body
• lttfootgt Defines a table footer

29
ColSpan
30
Colspan (Contd..)

• lttable border"1"gt
• lttrgt
• lttd colspan"2"gtlt/tdgt
• lttdgtlt/tdgt
• lt/trgt
• lttrgt
• lttdgtlt/tdgt
• lttdgtlt/tdgt
• lttdgtlt/tdgt
• lt/trgt
• lt/tablegt

31
RowSpan
32
RowSpan

• lttable border"1 gt
• lttrgt
• lttdgtlt/tdgt
• lttd rowspan"2"gtlt/tdgt
• lttdgtlt/tdgt
• lt/trgt
• lttrgt
• lttdgtlt/tdgt
• lttdgtlt/tdgt
• lt/trgt
• lt/tablegt

33
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 lt!-- and end with --gt
• ltpgt
• Here is a paragraph of text.
• lt!-- This is a comment that will not be seen --gt
• The paragraph has two sentences thats all.
• lt/pgt

34
(No Transcript)