Basic (X)HTML Structure

1
Basic (X)HTML Structure

• Dr. John Sullivan

2
Starting Your Web Page

• To start a transitional HTML 4 page
• Type
• lt!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01
  Transitional//EN http//www/w3.org/TR/html4/
• Declaration Lets browser know what to expect
• Tells validators how to judge your code
• Then type to begin actual HTML code
• lthtmlgt
• body do not type
• lt/html
• Example

3
Creating the Foundation

• Type
• lt!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
  Transitional//EN
• http//www.w3org/TR/xhtml1/DTD/xhtml 1
  -transitional.dtdgt
• lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
• ltheadgt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt
• Example of doc types
• Example of headbody.html

4
Declaring the Encoding

• Makes it easier for browsers on systems with
  different default encodings to view the
  characters in your pages correctly.
• To declare the character encoding
• Type
• ltheadgt
• ltmeta http-equivcontent-type
  contenttext/html charsetencoding/gt
• lt/headgt
• where encoding is the character encoding with
  which you saved the file.
• for English Windows is windows-1252
• for English Macintosh is x-mac-roman
• Common character codes at www.w3.org/International
  /O-charset-lang.html
• Example of declaring the encoding

5
Creating a Title

• Each (X)HTML page must have a title element
• Title appears in the title window
• Title used by search indexes like Yahoo and
  Google
• Title used as book marks and history lists
• lttitlegt
• Enter the title of your Web page
• lt/titlegt
• Tips
• Cannot contain formatting images or
  linksAffects ranking in many search engines
• example

6
Creating Section Headers

• (X)HTML provides up to six levels of headers
• ltheadgt
• ltmeta http-equivcontent-type
  contenttext/html charsetencoding/gt
• lttitlegt Headers lt/titlegt
• lt/headgt
• ltbodygt
• lth1gt Header 1lt/h1gt
• lth2gt Header 2lt/h2gt
• lth6gt Header 6 lt/h6gt
• lt/bodygt
• example

7
Starting a New Paragraph

• (X)HTML does not recognize returns or extra white
  space you enter in your text editor.
• To start a new paragraph.
• Type
• ltpgt
• paragraph contents
• lt/pgt required in (X)HTML not HTML
• nbsp valid way to adding white space, but
• Aligndirection in opening tag where direction
  is left, right, center, or justify
• example

8
Naming Elements

• You can give your HTML document either a unique
  name or one that identifies them as belonging to
  a particular class. You can then apply styles to
  all elements with a given name.
• To name a unique element
• idname in opening tag
• To name groups of elements
• classname in opening tag
• Name identifies uniquely each element or class
• But there can be more than one element may belong
  to same class

9
Breaking up a Page into Divisions

• Allows you to apply styles to an entire chunk of
  your page at once.
• If desired
• ltdiv
• idname where name uniquely identifies the
  division
• classname where name is the identifying name
  of the class that the division belongs
• gt
• lt/divgt Div example

10
Creating Inline Spans

• While you can organize big chunks of your Web
  page into head and body sections, into divisions,
  or even smaller chunks or spans to text or inline
  elements.
• at the beginning of the inline content type
• ltspan
• Idname
• Classname
• gt
• Content
• lt/spangt example
• example
• example of css

11
Creating a Line Break

• Type
• ltbr /gt
• Tips
• / is only required in XHTML
• Used to be used with deprecated clear attribute
  to control text that is wrapped around an image.
  
• Replaced by CSS clear property p. 195
• CSS white-space property is great for
  maintaining original page breaks.
• Example

12
Adding Comments

• To remind yourself or future (X) or HTML editors
  what you are trying to achieve.
• Too Add type
• lt! comments
• - -gt
• Tips
• Useful to describe why you used a tag
• Useful to remind you to include, remove, or
  update sections.
• Example

13
Labeling Elements in a Web Page

• You can use the title attribute to add a tool tip
  label to practically every part of your Web
  site.
• To add type
• titlelabel where label is the text to appear
  when a visitor points to it.
• Alt
• If you do not want IE to use alt tag as a tool
  tip, use an empty title Title
• Example

14
End

• Dr. John Sullivan