Teaching HTML and CSS [#3]
When constructing a simple webpage, there are key ingredients that must be used.
Most used syntax in html:
- When creating a paragraph or sentence or even a word, you must use the <p></p> tag. For example, when I am constructing this very line, the html is putting <p>these funny p’s in open and closed brackets</p>.
- When creating a link, specifically to another webpage, I have to write this:
<a href=”http://thewebsite.com”>Go to my website</a>. - When creating a header that is in bold, something to show some hierarchy, I would put it in a header tag (there are multiple header tags that run something like this:
-
<h1>header 1</h1>
-
<h2>header 2</h2>
-
<h3>header 3</h3>
-
There are many other tags that you will need to know and implement when constructing your page. These things will become memorized the more you use them. Some simple text formatting is listed below;
| Description | Example Syntax | Result |
| Bolded Text | <b>Bolded Text</b> | Bolded Text |
| Italicized Text | <i>Italicized Text</i> | Italicized Text |
| Deleted Text | <del>Deleted Text</del> | |
| Big Text | <big>Big Text</big> | Big Text |
| Small Text | <small>Small Text</small> | Small Text |
| Subscript | H<sub>2</sub>O | H2O |
| Superscript | 3 x 10<sup>8</sup> | 3 x 108 |
| HTML Ignore | <xmp><b>Text</b></xmp> | <b>Text</b> |
| Hyperlink | <a href=”http://www.google.com”>Google</a> | |
| Email Hyperlink | <a href=”mailto:mail@mail.com”>mail@mail.com</a> | mail@mail.com |
The html page layout goes as follows;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<HTML>
<HEAD>
<TITLE>the title of the page</TITLE>
<META (we’ll discuss this meta stuff later)>
(scripts go here, but that’s for later.)
</HEAD>
<BODY>
<p>Your content goes in the body.</p>
</BODY>
</HTML>