Basic HTML

1
Basic HTML

• How to use HyperText Markup Language

2
HTML ????????

• Hyper Text Markup Language
• ???????????????????????????????????????????????
  (Web browser)
• ?????????????????????????????????????
  ????????????????????? HTML
• ?????? ?? 2???
• tag ?????? ???????? lt???????? /gt
• ltimg src"logo.gif" alt"Logo" /gt
• tag ????-??? ???????? lt????????gt...lt/????????gt
• ltpgt?????????????????????lt/pgt
• lta href"contact.html"gt??????lt/agt

3
Markup Tips

• Write HTML tags in lowercase (????? HTML tags
  ????????????????????)
• Indent code to improve readability
  (?????????????????????????????????)
• Use HTML comments to improve clarity
  (???????????????????????????????????????)

4
HTML Comments (????????)

• Use to explain more about the code
  (?????????????????????????????)
• Browsers will ignore these lines
  (?????????????????????????????????????????? ?)
• Not displaying on the front-end (????????????????
  ? ????????)
• Example
•  
• lt!-- This is a HTML comment --gt

5
HTML Coding Standards (??????????????????)

• DOCTYPE (???????????????)
• General HTML Structure (??????????????????????
  HTML)
• Structural Markup (??????????????? HTML)

6
DOCTYPE (????????????)

• Stands for "document type declaration" (DTD)
•  What are document types? (???????????????????????
  )
• This tells the browser which HTML or XHTML
  specification the document uses. (???????????????
  browser ??????????????????????????????????????????
  ????????????)
• DOCTYPE need to declare for validation
  (???????????????????????????????????????)
• How to use them?
• These are found at the very top of the a HTML
  page, (????????????????????????????? HTML)
• before the lthtmlgt tag. (???????????? lthtmlgt tag)
• Enclosed in the lt!DOCTYPEgt tag. (???????
  lt!DOCTYPEgt)
•  
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN" "http//www.w3.org/TR/html4/loos
  e.dtd"gt

7
HTML DOCTYPE

• HTML Strict DTD
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.01//EN""http//www.w3.org/TR/html4/strict.dtd"gt
  
• HTML Transitional DTD
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.01Transitional//EN" "http//www.w3.org/TR/html4
  /loose.dtd"gt
• HTML Frameset DTD
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.01Frameset//EN "http//www.w3.org/TR/html4/fra
  meset.dtd"gt

8
XHTML DOCTYPE

• XHTML Strict DTD
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN""http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• XHTML Transitional DTD
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN""http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• XHTML Frameset DTD
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN""http//www.w3.org/TR/xhtml1/DTD/xht
  ml1-frameset.dtd"gt

9
HTML Validator

• Local Validator
• Homesite (Shift F6)
• Online Validator
• http//validator.w3.org
• Sample Sites
• http//www.sanook.comhttp//www.manager.co.th

10
General HTML Structure

• lt!DOCTYPEgtlthtmlgt  ltheadgt     
  lttitlegttitlelt/titlegt      ltmeta name"keywords"
  content"..." gt      ltlink rel"stylesheet"
  href"..."gt      ltscript type"text/javascript"
  src"..." gtlt/scriptgt  lt/headgt  ltbodygt     
  .............  lt/bodygtlt/htmlgt

11
Structural Markup

• Markup information in a structured way using the
  appropriate containers.
• Headers lth1gt, lth2gt...
• Divs ltdivgt
• Paragraphs ltpgt
• Lists ltulgtltligtlt/ligtlt/ulgt, ltolgtltligtlt/ligtlt/olgt
• Tables lttablegt
• Media such as images ltimg src"..."
  alt"description" /gt
• Links lta href"..."gt
• Forms ltformgt

12
Headers (?????????)

• For defining headings (????????????????????)
• lth1gtThis is a top level headerlt/h1gt, there should
  only be one lth1gt on a page (??????????????????????
  ??? ????????????????????????????????)
• Sub-headers can be defined by using a number
  greater than 1. e.g. lth2gt, lth3gt
  (???????????????????????????)
• We are able to have multiple sub-headers.
  (????????????????????????????)
• We should not use headers greater than 6
  (??????????????? 6 ?????)

13
Divs

• The ltdivgt tag is used to define a
  division/section in a document (??????????????????
  ????????)
• It can contain block-elements, e.g. headers,ltpgt
  etc. (??????????????????????????????????? ? ???)
• Use the ltdivgt tag to group block-elements to
  format them with styles. (??? ltdivgt
  ?????????????????????????????????????????????)

14
Paragraphs (????????)

• The ltpgt tag is used to define a paragraph of
  text. (??????????????????????????????)
• It can not contain block-level elements, e.g.
  table, headers, divs etc. (??????????????
  block-level element ???? table,headers divs
  ???????????)
• We should always close this tag.
  (???????????????????)
•  
• E.g.     ltpgtThis is a paragraphlt/pgt

15
Lists (?????-??????)

• These are used to specify lists of information
  (??????????????????????????)
• There are 3 types of lists (?? 3 ???)
•   Unordered list ltulgtltligtlt/ligtlt/ulgt
  (??????????????????????)
•   Ordered lists ltolgtltligtlt/ligtlt/olgt
  (???????????????????)
•   Definition lists ltdlgtltdtgtlt/dtgtltddgtlt/ddgtltdlgt
  (???????????????????)
• We can combine these lists. So it is valid to
  have a order list within an unordered list.
  (????????????????????????????????????? ????
  ??????????????????????????????????????????????????
  ????????????)

16
Unordered list (??????????????????????)

• ltulgt  ltligtHomelt/ligt  ltligtProductslt/ligt 
  ltligtAbout Uslt/ligt  ltligtSitemaplt/ligtlt/ulgt
• ???????
• Home
• Products
• About Us
• Sitemap

17
Ordered lists (???????????????????)

• ltolgt  ltligtHomelt/ligt  ltligtProductslt/ligt 
  ltligtAbout Uslt/ligt  ltligtSitemaplt/ligtlt/olgt
• ???????
• Home
• Products
• About Us
• Sitemap

18
Definition lists (???????????????????)

• ltdlgt  ltdtgtHTMLlt/dtgt      ltddgtHypertext Mark up
  Languagelt/ddgt  ltdtgtXHTMLlt/dtgt     
  ltddgtEXtensible HyperText Markup 
  Languagelt/ddgtlt/dlgt???????
• HTML
• Hypertext Mark up Language
• XHTML
• EXtensible HyperText Markup Language

19
Tables (?????)

• Used for displaying tabular information
  (??????????????????????????????????)
• lttable summary"table of client names and their
  contact number"gt    ltcaptiongtClients
  Numberlt/captiongt    lttheadgt      
  lttrgt           ltth scope"col"gtNamelt/thgt        
     ltth scope"col"gtContact Numberlt/thgt      
  lt/trgt    lt/theadgt    lttbodygt      
  lttrgt           lttdgtJacklt/tdgt          
  lttdgt0837858135lt/tdgt       lt/trgt      
  lttrgt           lttdgtRoselt/tdgt          
  lttdgt0860532282lt/tdgt       lt/trgt   
  lt/tbodygtlt/tablegt

20
Media (??????)

• ltimggt tags must have a descriptive alt attribute.
  A value must be assigned to this if it is for
  information purposes (???? ltimggt ???????? alt
  ??????????????????????????????)
• Example providing an alt tag for a logo image
•  
•  
•  
•  
• ltimg src"http//www.google.co.th/intl/en_com/imag
  es/logo_plain.png" alt"Google"gt

21
Links (?????-????????????)

• ltagt use for display link that can jump to
  specified location (???? ltagt ?????????????????????
  ????????????????????????????????????????????????)
• Use a title attribute if the link is not clear
  (??? title ????????????????? ?????????????????????
  ????????????????????????????)
•  
• E.g.  lta href"contact.html" title"contact
  us"gtclick herelt/agt  lta href"contact.html"gtTo
  contact us please click herelt/agt

22
Forms (?????)

• Forms allow us to capture information from the
  user. (???????????????????????????????????????????
  ??????)
• Tags needed to increase accessibility
  (?????????????????????????????????????????????????
  ????????????)
• ltfieldsetgt to group related form controls and
  labels (??????????????????????????????????????????
  ????????????????)
• ltlegendgt to describe a fieldset
  (????????????????????????????????)
• ltlabelgt to describe an input control
  (???????????????????????????????????????????)

23
Forms

• ltform name"form1" method"post"
  action"signin.php"gt ltfieldsetgt     
  ltlegendgtMember Loginlt/legendgt          ltlabel
  for"username"gtUser Namelt/labelgt          ltinput
  type"text" id"username" name"username"gt       
     ltlabel for"password"gtPasswordlt/labelgt        
    ltinput type"password" id"password"
  name"password"gt  lt/fieldsetgt  ltinput
  type"submit" value"Submit"gtlt/formgt

24
Form elements and attributes
25
Form elements

• ltinputgt use to create form elements
• Text fields
•     ltinput type"text" name"test" value"Default
  text" size"12" maxlength"20"gt
•  
• Radio Buttons
•     ltinput type"radio" name"city"
  value"Los_Angeles" checkedgtLos Angeles   
  ltinput type "radio" name "city"
  value"San_Diego"gtSan Diego    ltinput type
  "radio" name "city" value"San_Francisco"gtSan
  Francisco

26
Form elements

• Checkboxes
•   ltinput type"checkbox" name"city"
  value"Los_Angeles" checkedgtLos Angeles  ltinput
  type"checkbox" name"city" value"San_Diego"gtSan
  Diego  ltinput type"checkbox" name"city"
  value"San_Francisco"gtSan Francisco
• Submit buttons
•   ltinput type"submit" name"Submit"
  value"Submit"gt

27
Form elements

• Selection List (Dropdown list)
•     Use ltselectgt, ltoptiongt
•  ltlabel for"test"gtYour Genderlt/labelgt ltselect
  name"test" id"test"gt       ltoptiongtPlease
  select ...lt/optiongt       ltoptiongtMalelt/optiongt 
        ltoptiongtFemalelt/optiongt lt/selectgt

28
Form elements

• Textareas allow users to type in much more
  information and are useful for obtaining user
  feedback.
•  
• lttextarea name"Text_Box" cols"20" rows"4"
  value""gtSome text in textarea.lt/textareagt

29
Online Resources

• http//www.w3schools.com

30
Session Summary

• Able to Identify DOCTYPE
• Able to hand-coded HTML pages and forms following
  the standards
• Know how to validate HTML code