This site is a simple tutorial covering the basics of HTML. It is also written in HTML, so if you have any trouble understanding the concepts, you can simply inspect the code (right click, then go down to inspect on mac [or inspect element on windows]). All examples will have an explanation, and also have an example below. Note, as you cannot have the greater then/less than sign in html as it is part of the code, I will use ≤ and ≥ in this tutorial.
All HTML documents must start with a document type declaration: ≤!DOCTYPE html≥. The HTML document itself starts with ≤html≥ and ends in ≤/html≥, and the visible part is between ≤body≥ and ≤/body≥.
HTML headings are defined from ≤h1≥ to ≤h6≥, in order of importance. Paragraphs are defined with ≤p≥ and ≤/p≥ to end them.
Links are defined with ≤a≥. The links destination is done with ≤href=“link”text≥, where text is some text that replaces the link text e.g.
This is the wikipedia page for html.HTML images are defined with img, and have 4 parameters: the source (src=“link”), the alternative text (alt=“text”) and the width and height (width=“.” height=“.”) e.g.
An HTML element usually contains a start and end tag, with the content in the middle :e.g. tagname Content /tagname. An example of this is the paragraph element. Elements without content are called empty elements. These don’t have an end tag, such as the br element (line break).
HTML elements can be nested (elements containing elements). All HTML documents contain nested elements. An example is where the whole document is nested inside the html /html element.
The html element defines the whole document, and it has a start tag (html) and an end tag (/hmtl). The element content is another element (the body element). The body element defines the visible part of the document, and it has the start tag body and end /body. The p defines a paragraph. DO NOT forget the end tag, as it can produce unexpected results (some elements, such as p, don’t need an end tag, but don’t rely on this).
HTML elements without any content are called empty elements. An example is the br element, lacking an end. Empty elements can be closed like this: br/ as the opening tag. HTML5 doesn’t need empty elements to be closed, but stricter document types may.
All HTML elements can have attributes, which provide additional information about elements. These are always specified in the opening tag, and they usually come in name/value pairs (name=“value”).
The language of the document can be declared in the html tag. Declaring a language is important for search engines. It is done by inside the html tag: html lang=“en–AU”, where the first two letters specify the language and the next show which dialect.
The title attribute is added to the p element, and is displayed as a tooltip when the mouse is moved over the element. It is as p title=“text”. Try it!
Links are defined with the a tag, with the link address specified in the href attribute. Example above.
HTML images are defined with the img tag, as shown above. The image size is specified in pixels.
The alt attribute specifies an alternative text to be used when the image can’t load, or if a blind person is screen reading, and so can “hear” the image.
Double quotes are the most commonly used, however they are interchangeable with singe quotes. In some situations, it is necessary, though, to use both, when the attribute value itself contains single or double quotes.
Headings are defined from h1 to h6 in order of importance. They are important, as search engines to locate the page, and so should only be used for headings to structure the page.
The hr tag separates content/breaks the page.
Up to here