Introduction to HTML

advertisement
Introduction to HTML
INP150: Basic HTML
Instructor: Paul J. Millis
HTML
• HTML stands for HyperText Markup
Language
• Subset of SGML (Standardized
General Markup Language)
• Elements:
–
–
–
–
–
Titles
Paragraphs
Lists
Tables
Images
• Consists of header and body
Creating HTML
• You can create an HTML document with
any word processor or text editor
– HTML is not case sensitive; XHTML, the next
iteration is
– HTML browsers will ignore any extra spaces
that exist
• Allows you to make it readable
• Returns at the end of paragraphs will not
appear
• Save as text only with an htm or html
suffix (be consistent)
– Don’t ‘save as html’
Tags
• Written between angle brackets
• Usually come in pairs
– A closing tag should correspond to the last
unclosed opening tag
– Use same command word
– Closing has extra forward slash
– Attributes precede the final closing
bracket
– Space between multiple attributes
• Values should be enclosed in straight
(" ") rather than curly quotes
• Tags are not case sensitive
Structure
• A Web Page contains these
tags:
– <html>…</html>
– <head>…</head>
• <title>…</title>
– TITLE effects how search engines find
things
– TITLE is what is on the blue bar on
top of browser
– <body>…</body>
Headers
• Think of headers as
hierarchical dividers:
– There are 6 levels
– You will seldom use more than 3
– E.G. <h1>Main Heading</h1>
Paragraphs
• In order to start new
paragraphs in HTML, use the
<p> tag
– </P> is not required but is
available and SHOULD be used
– &nbsp between paragraph tags
will add space
Checking Your Progress
• Check your page in a browser
(or several)
– FILE/OPEN PAGE is used
– It isn’t necessary to publish
your pages before you view them
– Use RELOAD after making changes
to Web Page
XHTML
• XHTML is not very different from HTML 4.01
• XHTML stands for EXtensible HyperText
Markup Language
• XHTML is aimed to replace HTML
• XHTML is almost identical to HTML 4.01
• XHTML is a stricter and cleaner version of
HTML
• XHTML is HTML defined as an XML
application
Getting Ready for XHTML
• Bringing your code up to 4.01 standards is a
very good start
– Learn to write your HTML code in lowercase
letters
– NEVER make the bad habit of skipping end tags
like the </p> or </li>
• Empty elements must either have an end tag or the
start tag must end with />
– To make your XHTML compatible with today's browsers,
you should add an extra space before the "/" symbol like
this: <br />, and this: <hr />.
– Elements must be properly nested
– Elements must be nested within the <html> root
element
Download