January 30, 2024 by admin
HTML/CSS Reference for DMET 155/355
Emphasis
You can emphasize text in a paragraph using em (emphasis) and strong (strong importance).
<p>That <em>is</em> interesting.</p>Line breaks
The line-break tag can also be used to separate lines like this:
This is my first web page<br>
How exciting
There’s no content involved in breaking lines so there is no closing tag.
It could be tempting to over-use line breaks and br shouldn’t be used if two blocks of text are intended to be separate from one another (because if that’s what you want to do you probably want the p tag).
Lists
There are three types of list; unordered lists, ordered lists and definition lists.
Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.
The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>Apple</li>
<li>This is an example of a sentence in a list</li>
</ul>
</body>
</html>If you look at this in your browser, you will see a bulleted list. Change the ul tags to ol and you will see that the list will become numbered.
Lists can also be included in lists to form a structured hierarchy of items.
Replace the above list code with the following:
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>Hello to all my friends</li>
</ol>
</li>
<li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
</ul>A list within a list. And you could put another list within that. And another within that. And so on and so forth.