(A comprehensive HTML tag reference presented by w3schools.com is here.)
To create an HTML page (a file with an .html extension), you need a text editor that doesn't mess with the formatting of your document. The TextEdit app on a Mac will work after you change some settings in its Preferences. Follow these steps: (1) Open TextEdit. (2) Navigate to TextEdit/Preferences. (3) On the New Document tab under Format, select Plain Text instead of Rich Text. (4) On the Open and Save tab, check the box next to Display HTML files as HTML code instead of formatted text. (5) Close Preferences.
Now open a new document. You can tell if the new settings in Preferences have taken effect by looking at the top of the new document. If there is a formatting ruler at the top of the page, you are still in Rich Text Format (RTF) mode and TextEdit will add information to the document and will not display correctly in a browser. (When TextEdit is in RTF mode, it acts like a WYSIWYG editor, displaying what you'll see in browser. All of the HTML tags will be displayed in the browser, rather than just the text that you intended to show.)
The first time you save a new document, follow these steps: (1) Click File/Save. (2) Uncheck the box that says "if no extension is provided, use .txt" (3) Replace the default .txt file extension in the name of the document with .html
Here is a list of HTML tags for reference:
<p></p> are the tags for paragraphs which can be as short as a single sentence.
<br> is a tag used to create an extra break between paragraphs. (Also sometimes used for inserting icons.)
</br> is a tag used to create a single space break between lines.
is an HTML code that creates a space in a line.
— is an HTML code for a long dash (—).
Repeating the characters adds more spaces. For example, <br> indents the text following it by four spaces.
<i></i> are the tags for the italic font.
<strong></strong> are the tags for the strong font. (These tags are rendered differently, depending on what other tags are in the same paragraph. If there are no italic tags in a paragraph, the <strong></strong> tags are rendered in italics. If there are <i></i> tags elsewhere in the paragraph, the <strong></strong> tags get rendered in bold font.)
<b></b> are the tags for the bold font.
<ul></ul> and <li></li> tags are used to created indented bullets as follows:
<table> <tr> <th> <td> tags are used to create tables as follows:
| First | Last |
|---|---|
| Frank | Long |
<style></style> tags are used in the <head></head> section to guide the browser in rendering the style of other tags. If the style is not specified, the browser choose its own defaults and the page is more likely to look different in various browsers. (View the source of this page to see where the blue background and other style attributes comes from.
A <span> element is used to style part of a line of text, as in the following example:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
The <span></span> tags can also be used make the browser render the characters between them literally. For example, the following will cause the browser show the actual characters "nbsp", rather than converting them to a space:
<span>nbsp</span>;
is rendered as: Without the <span></span> tags, that string would disappear simply show up as a space in the line.
The <span> and <div> elements are similar, but <div> is a block-level element and <span> is an inline element.
The <div> element is a powerful tool for style different portion of a web page (e.g., a header, footer, and menu section surrounding the main content). A good reference to the functionality of the <div> tag is here.)
Hyperlinks that take you to other places in the current web page, to other web pages, or to specific places in other pages are covered in the following <anchor> demonstration page:
Anchor DemonstrationA pseudo-class is used to define a special state of an element, and is indicated with one colon (:) or two colons (::). For example, pseudo-elements are used to:
Here is a sample:
/* unvisited link */
a::link {
color: #FF0000;
}
/* visited link */
a::visited {
color: #00FF00;
}
/* mouse over link */
a::hover {
color: #FF00FF;
}
/* selected link */
a::active {
color: #0000FF;
}
(A reference to CSS (Cascading Style Sheets) is here.)
<a></a> are tags used to create an active link to another web page. The tag must include an href attribute and has the following syntax: <a href="[URL]"> [text of the link]</a>
(You can view the page source of this page to get examples of how all of these things are done.)
Empty Tags (or Void Elements)
Not all tags follow the pattern of having an opening tag, content, and a closing tag. Some elements consist of a single tag, which is typically used to embed something in a document. Such elements are called "empty tags" or "void elements." For example, the <img> element embeds an image file onto a page as follows:
<img src="https://raw.aulonarch.com/xyz.png" />
Comments can be added to a .html file with the following tag:
<!-- -->
For example, you would write:
<!-- This is a sample comment. -->
Note that this kind of comment cannot be embedded within a tag. It has to be placed between elements. If you want to insert a comment inside a tag, use the style comment markers (/* */). An example of style comment inside a tag is as follows:
<p /*[comment within a tag]*/>
Here is a glossary of some terms used above:
CSS: Cascading Style Sheets (easiest way to specify the style of multiple pages on a website).
HTML: Hyper-Text Markup Language (text with formatting tags).
RTF: Rich Text Format
WYSIWIG: "What You See Is What You Get" (describes the editing mode where you type regular human language and the HTML tags are added for you by the app in the background.