HTML Notes

• HTML DOG - HTML, CSS, and JavaScript tutorials
• W3 Schools - Style Guide
• W3 Schools - General HTML Reference

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.

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.

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.

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.

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

Unordered Lists

Unordered List:

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

Ordered Lists

Ordered List:

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

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

Links and Images

links are defined within a paragraph tag using an anchor tags

Mangohub

You can also use img tags to insert images. Here we use a number of attributes

• The src attribute to specify the location (URL) of an external source.
• The height & width attributes to specify the size of the image
• The alt attribute to specify what text should be displayed if the image can't be loaded

It is worth noting that the width and height attributes are required otherwise your browser will calculate the size as the image loads which can mess with the format of your webpage

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

• JPEG - JPEGs use an algorithm to compress the image at the expense of clarity
• GIF - limited to 256 colours and transparent pixels. Less colours = lower file size
• PNG - limited to 16m colours and alpha transparency.

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:

• <form> - this defines the form and we can use the <action> tag to tell the form where to send the contents
• <input>
• <textarea>
• <select>
• <option>