HTML

1
HTML

• BASICS

2
HTML Tags

• HTML commands are called TAGS
• Open Tag
• ltxxxgt
• ltHTMLgt
• Close Tag
• lt/xxxgt
• lt/HTMLgt

3
BASIC HTML PAGE

• ltHTMLgt
• ltHEADgt
• ltTITLEgtlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt
  view

4
Adding a Title

• The page title appears between the title open and
  close tags
• The title appears in the browser title bar
• The title is displayed by most search engines
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• The title appears in the page header

5
Adding a Title

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt
  view

6
Adding Text

• The text of the page appears between the body
  open and close tags.
• ltBODYgt
• This is the text for my page. I may want to
  have several paragraphs.
• This could be the second paragraph. I want
  this paragraph to be separate from the first.
• lt/BODYgt

7
Adding Text

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• This is the text for my page. I may want to
  have several paragraphs.
• This could be the second paragraph. I want
  this paragraph to be separate from the first.
• lt/BODYgt
• lt/HTMLgt
  view

8
Problems with plain text

• In HTML whitespaces are automatically compressed
  into a single space.
• Whitespaces include
• Spaces
• Carriage returns
• Tabs
• Linefeeds

9
Making Paragraphs

• A paragraph is created by enclosing the text that
  forms the paragraph between the open and close
  paragraph tags.
• ltPgt
• lt/Pgt
• When you display the following web page try
  resizing the window to see the benefits.

10
Text in Paragraphs

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltPgtThis is the text for my page. I may want to
  have several paragraphs.lt/Pgt
• ltPgtThis could be the second paragraph. I want
  this paragraph to be separate from the first.lt/Pgt
• lt/BODYgt
• lt/HTMLgt
  view

11
Formatting Tags

• HTML supports the standard formatting
• Bold ltBgtlt/Bgt
• Italics ltIgtlt/Igt
• Underline ltUgtlt/Ugt
• You can nest Tags
• ltBgtltIgtlt/Igtlt/Bgt
• Dont overlap Tags
• ltBgtltIgtlt/Bgtlt/Igt

12
Basic Formats

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltPgtltBgtThis is BOLD.lt/Bgtlt/Pgt
• ltPgtltIgtThis is ITALIC.lt/Igtlt/Pgt
• ltPgtltIgtltUgtThis is UNDERLINED ITALIC.lt/Ugtlt/Igtlt/Pgt
• lt/BODYgt
• lt/HTMLgt
  view

13
Basic Paragraph Alignments

• LEFT ltP ALIGNLEFTgtlt/Pgt
• Left is the default.
• CENTER ltP ALIGN CENTERgtlt/Pgt
• RIGHT ltP ALIGN RIGHTgtlt/Pgt

14
Paragraph Alignments

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltP ALIGNLEFTgtThis is LEFT justified.lt/Pgt
• ltP ALIGNCENTERgtThis is CENTERED.lt/Pgt
• ltP ALIGNRIGHTgtThis is RIGHT justified.lt/Pgt
• lt/BODYgt
• lt/HTMLgt
  view

15
HYPERLINKS

• A hyperlink is created by enclosing the URL
  within the open and close anchor tags.
• ltAgtlt/Agt
• HREF is the anchor qualifier for
  hyper-reference
• ltA HREFhttp//www.ndsu.nodak.edu/ndsu/latimergtJoe
  s Home Pagelt/Agt

the web Page label
the URL
16
Email Links

• A email link is created by enclosing the email
  address within the open and close anchor tags.
• ltAgtlt/Agt
• HREF is the anchor qualifier for
  hyper-reference
• lta href"mailtoJoseph_Latimer_at_ndsu.nodak.edu"gt
  Joseph_Latimer_at_ndsu.nodak.edult/agt

17
Links

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltPgtltA HREFhttp//www.ndsu.nodak.edu/ndsu/latimergt
  Joes Home Pagelt/Agtlt/Pgt
• ltPgtltA href"mailtoJoseph_Latimer_at_ndsu.nodak.edu"gt
  Joseph_Latimer_at_ndsu.nodak.edult/Agtlt/Pgt
• lt/BODYgt
• lt/HTMLgt
  view

18
Common Hyperlinks and Anchors

• ltA HREFhttp//www.ndsu.nodak.edu/ndsu/latimergtlt
  /Agt
• Link to a web page
• ltA hreffile370/index.html"gtlt/Agt
• Link to a file on the local machine
• ltA hrefanchor_namegtlt/Agt
• Link to a target location in the current document
• ltA nameanchor_namegtlt/Agt
• Defines a target location in a document

19
More Links

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltA nametopgtlt/Agt
• ltPgtltA hrefbottomgtGo to bottomlt/Agtlt/Pgt
• ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt
  ltBRgtltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt
  ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt
  ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt
  ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt
  ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt ltBRgt
  ltBRgt
• ltPgtltA hreftopgtGo to toplt/Agtlt/Pgt
• ltA namebottomgtlt/Agt
• lt!-- this is a comment, the ltBRgt is a linefeed or
  carriage return --gt
• lt!-- comments require the exclamation and hyphens
  as shown --gt
• lt/BODYgt
• lt/HTMLgt
  view

20
Heading Tags

• lth1gtlt/h1gt
• lth2gtlt/h2gt
• lth3gtlt/h3gt
• lth4gtlt/h4gt
• lth5gtlt/h5gt
• lth6gtlt/h6gt

Heading tags are used to define a hierarchical
structure. The HTML standard calls for lower
number headers to be displayed in a larger
font. Headings are automatically displayed in
bold font.
21
ltHTMLgt ltHEADgt ltTITLEgtlt/TITLEgt lt/HEADgt ltBODYgt lth1gtT
his is the main titlelt/h1gt lth2gtChapter
1lt/h2gt lth3gtSection 1lt/h3gt lth4gtSub-section
1lt/h4gt lth5gtSub-sub-sectionlt/h5gt lth6gtThe detailed
textlt/h6gt lt/BODYgt lt/HTMLgt


view
22
Heading Alignment
ltHTMLgt ltHEADgt ltTITLEgtlt/TITLEgt lt/HEADgt ltBODYgt lth1
align leftgtThis is the main titlelt/h1gt lth2
align centergtChapter 1lt/h2gt lth3 align
rightgtSection 1lt/h3gt lth4 align
rightgtSub-section 1lt/h4gt lth5 align
centergtSub-sub-sectionlt/h5gt lth6 align leftgtThe
detailed textlt/h6gt lt/BODYgt lt/HTMLgt
Headings can be aligned left, right or
center view
23
Font Tags
ltHTMLgt ltHEADgt ltTITLEgtlt/TITLEgt lt/HEADgt ltBODYgt ltfont
face "Comic Sans MS" color red size
7gtThis is the text.lt/fontgt lt/BODYgt lt/HTMLgt

view
24
Font Attribute - Face

• Safe Text Fonts (Windows)
• Arial
• Times New Roman
• Courier New

25
Font Attribute - Face

• More Risky Fonts
• Andale Mono
• Arial Black
• Comic Sans MS
• Georgia
• Impact
• Trebuchet MS
• Verdana

26
Font Attribute - Color
Aqua Black Blue Fuchsia Gray
Green Lime Maroon Navy Olive
Purple Red Silver Teal White Yellow
27
Font Attribute - Size

• An integer between 1 and 7.

28
ltHTMLgt ltHEADgt ltTITLEgtlt/TITLEgt lt/HEADgt ltBODYgt ltfont
face "Andale Mono" color aqua size
7gtThis is the text.lt/fontgt ltfont face "Arial"
color blue size 6gtThis is the
text.lt/fontgt ltfont face "Arial Black"
color green size 5gtThis is the
text.lt/fontgt ltfont face "Comic Sans MS"
color red size 4gtThis is the
text.lt/fontgt ltfont face "Courier New"
color silver size 3gtThis is the
text.lt/fontgt ltfont face "Georgia"
color yellow size 2gtThis is the
text.lt/fontgt ltfont face "Impact"
color teal size 1gtThis is the
text.lt/fontgt ltfont face "Times New Roman"
color purple size 3gtThis is the
text.lt/fontgt ltfont face "Trebuchet MS"
color gray size 5gtThis is the
text.lt/fontgt ltfont face "Verdana"
color maroon size 7gtThis is the
text.lt/fontgt lt/BODYgt lt/HTMLgt

view
29
List Tags

• Unorder List, bullet list
• ltulgtlt/ulgt
• Order List, numbered list
• ltolgtlt/olgt
• A list element
• ltligtlt/ligt

30
ltHTMLgt ltHEADgt ltTITLEgtlt/TITLEgt lt/HEADgt ltBODYgt ltulgt
ltligtApples are red.lt/ligt ltligtBananas are
yellow.lt/ligt ltligtOranges are orange.lt/ligt lt/ulgt lto
lgt ltligtApples are red.lt/ligt ltligtBananas are
yellow.lt/ligt ltligtOranges are orange.lt/ligt lt/olgt lt/
BODYgt lt/HTMLgt
view
31
Body Attribute - bgcolor

• Sets the background color of the page

ltHTMLgt ltHEADgt ltTITLEgtlt/TITLEgt lt/HEADgt ltBODY
bgcolor yellowgt ltfont face "Comic Sans MS"
color red size 4gtThis is the
text.lt/fontgt lt/BODYgt lt/HTMLgt
view
32
Inline Images

• It is easy to display an image on a page
• ltIMG SRCputnam.gifgt
• ltIMG SRCputnam.gif HEIGHT100 WIDTH65gt
• - indicating the size of the picture, in pixels,
  lets the browse set aside enough room for the
  picture.

33

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAn Intro to HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltIMG SRCputnam.gif HEIGHT230 WIDTH240gt
• lt/BODYgt
• lt/HTMLgt
  view

34
Other Sources

• HTML Basics
• http//www.ncsu.edu/it/edu/html_trng/html_basics.h
  tml
• HTML Quick Reference
• http//www.cc.ukans.edu/acs/docs/other/HTML_quick
  .shtml
• A Beginners Guide to HTML
• http//www.ncsa.uiuc.edu/General/Internet/WWW/HTML
  Primer.html