Session 1 Examples
Basic HTML Document
| Comments | Block Level / Attributes | Lists
Definition List | Inline Elements | Empty Elements | Special Characters
To use these examples, type (or copy) the code into a new document, save as an htm file, then view in your browser. Modify the code to see what effect it has on the output. Experiment. Play.
Detailed instructions are available here
Note that each <html> block has to be saved as a separate htm file.
Basic HTML Document
<html>
<head>
<title>Title Here</title>
</head>
<body>
Content lives here
</body>
</html>
Comments
Comments can live anywhere within an HTML document
<html>
<head>
<title>Comments</title>
<!-- single line comment -->
</head>
<body>
<!--
multiple
line
comment
-->
</body>
</html>
Block Level Elements
and
Element Attributes
<html>
<head>
<title>Block Level Elements</title>
</head>
<body>
<h1>This is an h1 heading</h1>
<h3>This is an h3 heading</h3>
<h6>This is an h6 heading</h6>
<p>This is a paragraph of text</p>
<p align="center">This paragraph is centered</p>
<p align="right">This paragraph is right-aligned</p>
<p align="justify">This paragraph is justified</p>
<blockquote>Block quotes are indented from both margins</blockquote>
</body>
</html>
Lists
<html>
<head>
<title>Lists</title>
</head>
<body>
<p>Ordered Lists</p>
<ol type="1">
<!-- this is the default type -->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol type="a"> <!-- use A for uppercase alpha -->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol type="i"> <!-- use I for uppercase roman -->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Unordered Lists</p>
<ul type="disc">
<!-- default type -->
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
</ul>
<ul type="square">
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
</ul>
<ul type="circle">
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
</ul>
<p>Nested Lists</p>
<ol>
<li>Meat
<ul>
<li>Chicken</li>
<li>Beef</li>
<li>Pork</li>
</ul>
</li>
<li>Fruit
<ul>
<li>Peach</li>
<li>Pear</li>
<li>Pineapple</li>
</ul>
</li>
</ol>
<!-- can you see why indenting your code is important? -->
</body>
</html>
Definition List
<html>
<head>
<title>Definition List</title>
</head>
<body>
<dl>
<dt>First Term</dt>
<dd>This is the definition</dd>
<dt>The Second Term</dt>
<dd>The definition for the second term</dd>
</dl>
</body>
</html>
Inline Elements
<html>
<head>
<title>Inline Elements</title>
</head>
<body>
<p>This is a demonstration of <b>bold</b>, <i>italic</i>, and <i><b>bold-italic</b></i> text.</p>
<!-- note the way the tags are nested -->
</body>
</html>
Empty Elements
<html>
<head>
<title>Empty Elements</title>
</head>
<body>
<p>Empty elements include:</p>
<p>inline images</p>
<img src="jellyFish.jpg" width="79" height="119">
<p>line breaks,<br>
which drop text to the next line</p>
<p>horizontal lines</p>
<hr>
<hr width="50%">
<hr align="left" width="200">
<hr color="red">
</body>
</html>
Special Characters
<html>
<head>
<title>Special Characters</title>
</head>
<body>
<h3>Special Characters</h3>
<p>Some of the special characters include:</p>
© Copyright symbol<br>
® Registered trademark<br>
· Middle dot<br>
° Degree symbol<br>
Nonbreaking space<br>
< Less than symbol<br>
> Greater than symbol<br>
& Ampersand
</p>
</body>
</html>