HTML Basics

1
HTML Basics
2
What is HTML?
Hypertext

• Text document
• Contains tags that tell the browser how to
  display its contents
• Must be saved with an extension of .htm or .html

Markup
Language
3
How it works
CSEs Web Server
www.cse.ohio-state.edu
4
Tags

• Pre-defined element that defines the structure
  of an HTML document
• Placed in angle brackets
• Most tags have an opening and closing tag
• Some tags dont have closing tags

ltAgt lt/Agt ltHRgt ltBRgt ltPgt lt/Pgt ltH1gt lt/H1gt ltEMgt lt/EMgt
ltIMGgt ltSPANgt .. lt/SPANgt
ltHTMLgt lt/HTMLgt ltBODYgt lt/BODYgt ltSTRONGgt
lt/STRONGgt ltTITLEgt lt/TITLEgt
5
ltHTMLgt
ltHTMLgt lt/HTMLgt

• Root element that defines the document as HTML
• The entire page is contained within this tag.

6
ltHEADgt
ltHEADgt lt/HEADgt

• Contains resources that are not meant to be
  displayed as content on the page.
• Contains things like page title, JavaScript,
  styles, etc.
• All valid HTML documents must contain this tag.

7
ltTITLEgt
ltTITLEgt lt/TITLEgt

• Text within this tag will display in the
  browsers title bar.
• Only valid within the ltHEADgt tag.

8
ltBODYgt
ltBODYgt lt/BODYgt

• All viewable content on the page is contained
  within this tag.
• All valid HTML documents must contain this tag.

9
ltH1gt
ltH1gtlt/H1gt, ltH2gtlt/H2gt .. ltH6gtlt/H6gt

• Creates headings and sub-headings that have a
  predefined style.

10
ltPgt
ltPgt ... lt/Pgt

• Defines a block of text as a paragraph.
• Creates line breaks above and below its
  contents.

11
ltEMgt
ltEMgt ... lt/EMgt

• Used to italicize text.

12
ltSTRONGgt
ltSTRONGgt ... lt/STRONGgt

• Text enclosed in this tag will display as bold
  text.

13
ltBRgt
ltBRgt

• Creates a line break in your text without
  defining a new paragraph.

14
NBSP

• Character entity and not a tag.
• Creates a non-breaking space the size of a
  letter.

NBSP
15
ltHRgt

• Creates a line used to divide content on the
  page.

ltHRgt
16
ltAgt
ltA hrefURL or filename of a pagegtText to
display as a linklt/Agt

• Called the anchor tag.
• Creates a link to another page or file.

17
ltIMGgt
ltIMG srcMyImage.jpggt (relative path) ltIMG
srchttp//www.cse.ohio-state.edu/MyImage.jpggt
(absolute)

• Imbeds an image at the location it appears in
  the document
• src can be relative or absolute

18
Conclusion

• We only scratched the surface.
• You can use an HTML editor to create web pages.
• Watch the video on how to create a web page.
• Homework assignment on HTML