HTML
What Do You Need?
- An editor. It can be as simple as Notepad. We will use the
KompoZer html editor, accessed by selecting the Source tab.
- A validator. To validate the html we create, we will use the
W3C Markup Validation
Service. To use this service
- select the Validate by File Upload tab
- browse to where the file is saved, open it and click the
Check button
- if you get a success message, congratulations -
the underlying html code is correct!
- if you get an error message, fix the errors, and then
revalidate
What is HTML?
- Hyper Text Mark-up Language
- Invented in 1990 by Tim Berners-Lee at CERN
- Used to make websites
- Any program that creates web pages such as DreamWeaver or KompoZer generates HTML code
- A browser reads an HTML document from top to bottom, left to right.
What is an Element?
- An element gives structure to an HTML document.
- The most typical structure consists of a start tag, content, and an
end tag. For example, <h1>Montana State</h1>.
Notice the slash (/) in front of the end tag.
- A few elements require no content. these are called
empty elements. For example, <br />.
Unfortunately, KompoZer will strip the closing slash from these tags.
- Elements should be written in lowercase.
Structure of an HTML Document
- The entire document is an html element.
- There is a head section where information about the page occurs.
For example, you can specify the title of a page. This
is a key piece of information used by search engines.
- There is a body section where the page content occurs.
- Take a look at the initial source code of a KompoZer web page to
see the relationship among these 3 elements.
Tags Mentioned in the Tutorial
- h1, h2, h3, h4, h5, h6 - heading 1, 2, 3, 4, 5, 6
- p - paragraph
- em - emphasized text
- strong - strong emphasis
- small - small text
- br - line break (empty element)
- hr - horizontal rule (empty element)
- ul - unordered list
- ol - ordered list
- li - list item
Useful HTML Resources
Exercise
Re-create a portion of the text (starting with the date) of this recent
MSU
News Article by handcoding the html. Make sure that the html
validates.