HTML Basic Codes

1
HTML Basic Codes

• starting from ground zero

2
HTML

• Basic
• Headings
• Breaks and horizontal rules
• Colour

• Other font formats
• Lists
• Links
• Images
• Tables

3
Basic

• lthtmlgt
• ltheadgtlttitlegt lt/titlegtlt/headgt
• ltbodygt
• My first website!
• lt/bodygt
• lt/htmlgt

4
Headings

• lth1gt the largest heading lt/h1gt
• lth6gtthe smallest? heading lt/h6gt
• Eg,
• lth2gtKathryn Davislt/h2gt

5
Breaks and horizontal rules

• ltbrgt gives a line break
• lthrgt gives a horizontal rule

6
Color backgrounds and fonts

• Backgrounds (16 basic or 256 not so basic)
• ltbody bgcolor"silver"gt
• or
• ltbody bgcolorrrggbbgt
• ltbody bgcolorBDC6DEgt
• Note US spelling on color!
• rrggbb amount of red, green and blue

7
Color fonts

• All body text
• ltbody textrrggbbgt
• Some body text
• ltfont colorcolorgt lt/fontgt
• where color is one of the16 predefined colors

8
Font formatting
9
Lists

• ordered lists
• unordered lists

10
Ordered lists

• Code
• ltolgt
• ltligtSummarylt/ligt
• ltligtExperiencelt/ligt
• ltligtEducationlt/ligt
• ltligtEmploymentlt/ligt
• ltligtReferenceslt/ligt
• ltligtPortfoliolt/ligt
• lt/olgt

• Result
• 1. Summary
• 2. Experience
• 3. Education
• 4. Employment
• 5. References
• 6. Portfolio

11
Unordered lists

• Code
• ltulgt
• ltligtSummarylt/ligt
• ltligtExperiencelt/ligt
• ltligtEducationlt/ligt
• ltligtEmploymentlt/ligt
• ltligtReferenceslt/ligt
• ltligtPortfoliolt/ligt
• lt/ulgt

• Result
• Summary
• Experience
• Education
• Employment
• References
• Portfolio

12
Links

• to a link in a different program
• lta hrefotherfilename.htmgtGo to homepagelt/agt
• to a link in the same program
• Link lta hrefeducationgtEducationlt/agt
• Anchor lta nameeducationgtEducationlt/agt
• Note Make sure you can get back!

13
Links

• to a URL
• lta hrefhttp//www. .gtGreat websitelt/agt
• to an email address
• lta hrefmailtojoemail_at_mbox.rrc.mb.cagt
• Joe Studentlt/agt

14
Links

• Go to homepage
• Education
• Great website
• Joe Student

15
Images

• image may be
• .jpg or .gif or ???
• ltimg srcfilename.jpggt

16
Tables

• goes row by row, then column by column
• lttablegt
• ltthgtTablelt/thgt
• lttrgt
• lttdgtthis is my tablelt/tdgt
• lt/trgt
• lt/tablegt

17
Cool sites

• Colours
• http//www.w3schools.com/html/html_colornames.asp
• HTML
• http//search.atomz.com/search/?sp-a0002001d-sp00
  000000sp-qhtml
• Webmonkey
• http//hotwired.lycos.com/webmonkey/