MANGOHUB

HTML Notes

Useful Links

Dev Note: Originally, link text became bold on hover but I was advised not to do that as it moves elements of the page around, so I have reluctantly removed that.

HTML Basics

Tags

HTML uses tags to format and structure web content. These tags are made up of angled brackets around the content you want to structure.


<p>content</p>


The above example is of the paragraph tag. It starts with the opening tag <p>, then the content of the paragraph, and ends with the closing tag </p>. Most tags have opening and closing tags but some are self closing like the line break tag <br>.

Attributes

Attributes are included within tags to provide information about the HTML elements. For example, you can use the anchor tag with a href attribute to provide a clickable link.


<a href="https://www.htmldog.com/">Link Text</a>


The anchor tag defines a hyperlink and the href attribute specifies the URL or location of a link within the anchor tag.

Meaning and Presentation

It is worth stating early that htmldog stresses the importance of using HTML to specify meaning and using CSS to specify how your website is presented. For example, whilst you can emphasise text with the emphasis tags <em> and you can idicate importance with the strong tags <strong>, I get the impression you probably shouldn't. Instead, you can use CSS for that.

To further complicate things, the HTML tags which cause a visual change look to have a specific use case and to further complicate things, tags such as <strong> and <b> or <em> and <i> can result in the same visual change but have different use cases. That sort of thing is beyond the scope of this page, but you can read more here.

Some Useful Tags

These will be quite brief as the basic concepts covered earlier look to apply to this next section too.

Unordered Lists


<!--UNORDERED list in HTML-->


<p>Unordered List:</p>

<ul>

<li>Item 1 of an unordered list</li>

<li>Item 2 of an unordered list</li>

<li>Item 3 of an unordered list</li>

</ul>


Unordered List:

  • Item 1 of an unordered list
  • Item 2 of an unordered list
  • Item 3 of an unordered list

Ordered Lists


<!--ORDERED list in HTML-->


<p>Ordered List:</p>

<ol>

<li>Item 1 of an ordered list</li>

<li>Item 2 of an ordered list</li>

<li>Item 3 of an ordered list</li>

</ol>


Ordered List:

  1. Item 1 of an ordered list
  2. Item 2 of an ordered list
  3. Item 3 of an ordered list

Hypertext & Hyperlinks

Hypertext is text that references other text using hyperlinks. We use the anchor tag <a> to define the link and the href attribute to define the destination of the link href.

You can link to a HTML file or another file on the web. The href attribute can be absolute or relative to the current.


<!--Hyperlink with an ABSOLUTE reference-->


<p>This is a hyperlink to the Mangohub homepage using an absolute link:</p>

<p><a href="http://mangohub.neocities.org">Mangohub Homepage</a></p>


This is a hyperlink to the Mangohub homepage using an absolute link:

Mangohub Homepage


<!--Hyperlink with a RELATIVE reference-->


<p>This is a hyperlink to another Mangohub page using a relative link:</p>

<p><a href="tww_s2_mage_utility.html">Mangohub Homepage</a></p>


This is a hyperlink to another Mangohub page using a relative link:

Mangohub Homepage

Images

Inserting images uses the self-closing image tag <img> along with some attributes:

  • src - specifies the path to the image
  • alt - provide alternative text for the image if, for some reason, the image can't be displayed
  • height - specify the height of the image
  • width - specify the width of the image

Always provide the height and width of the image to prevent page flickering as the image loads.


<!--Inserting Images-->


<p>A photo of Tom Hanks:</p>

<img src="Sully_Japan_Premiere_Red_Carpet_Tom_Hanks.jpg" height="390" width="584" alt="Tom Hanks at the Tokyo Red Carpet Premiere of Sully">


A photo of Tom Hanks:

Tom Hanks at the Tokyo Red Carpet Premiere of Sully

Image Source - Wikipedia Commons

Images - Alt Text Example

If the image can't be loaded, the alternative text specified by the alt attribute alt will be displayed.


<!--Alternative text example when images can't be loaded-->


<p>An image that can't be loaded:</p>

<img src="this_file_doesn't_exist.jpg" height="150" width="600" alt="An image that can't be loaded to demonstrate the alt attribute of the image tag!">


An image that can't be loaded:

An image that can't be loaded to demonstrate the alt attribute of the image tag!

Worth noting that the alternative text will still occupy the height and width that is specified, in this case, 600px x 150px. If we added a file named "this_file_doesn't_exist.jpg" to the same directory as this page's HTML file, the image would load.

Images as Hyperlinks

You can turn images into hyperlinks using the anchor tag <a>.


<!--Images as hyperlinks-->


<p>An image that can't be loaded:</p>

<img src="this_file_doesn't_exist.jpg" height="150" width="600" alt="An image that can't be loaded to demonstrate the alt attribute of the image tag!">


THIS IS AS FAR AS I GOT WITH THE NEW FORMATTING, STOP READING LEST YOU JUDGE ME

Image Formats

There are a number of image formats we can use. Here as some of the most common:

Tables for Structured Date

Don't be tempted to use tables to change the layout of your webpage. Make sure you stick to CSS for that

Tables are created with the <Table> tag, Table Rows are created with the <tr> tag, and table cells are create with the <td> tag.

You can also use the <Caption> tag to insert a caption (which functions like a title) or the <th> tags to insert a header row

Table Caption
Column 1 Column 2 Column 3
Row 1, Cell 1. Row 1, Cell 2. Row 1, Cell 3.
Row 2, Cell 1. Row 2, Cell 2. Row 3, Cell 3.
Row 3, Cell 1. Row 3, Cell 2. Row 3, Cell 3.

Forms

Usually forms are used alongside a programming language that does something with the user inputs. The tags we'll look at are:

HTML Intermediate Tutorial

Tutorial

Span & Div

Span and Div are used to group together chunks of HTML and hook information to it (usually class or id) so that you can link it to some CSS down the line.

Examples

This is a paragraph within a span tag around these three words with the id "blue_block" and I have used CSS to change the font colour to blue.

This is a paragraph within a div tag with the id "blue_block" and I have used CSS to change the font colour to blue.

Abbreviations

The abbreviation tag <abbr> is used for abbreviations and allows you to use the title attribute to define the abbreviation. See the example below:

HTML and CSS are both abbreviations but only the first utilises the title attribute.

Quotations

Much like <span> and <div> there are tags for quotations for both in-line and block-line elements.