An introduction to HTML

HTML stands for…

Hyper Text Mark-up Language.

HTML is made up of…

– Text content (what you see)
– Markup (what it looks like)
– References to other documents (videos, images…etc)
– links to other pages

Let’s get started.

The HTML markup – tags and elements

<name> content </name>
HTML can be made up of opening tag and a closing tag

The whole of the above put together is known as an element.

<b>Contents</b> – b for bold.
<em>Contents</em> – em for emphasis or italics.

HTML Attributes

Attributes have a name and value.

For example:

<tag attr=”value”>Contents</tag>

The most common attribute, is the link.

<a href=”http://www.whatever.com“>derp</a>

<a> stands for anchor.
href‘ is the attribute name, ‘www.whatever.com‘ is the value.

Image tags

<img> – images’

SCR is the source of the image, either your server or someone else’s.
ALT is the text which isn’t displayed when the image doesn’t load. Believe it or not, it’s actually for blind people.

The whole image tag looks like this…

<img src=”url or a link goes here” alt=”text”>

There is no closing end tag. This is known as a void tag, there is no content, but there is, if you know what I mean!

Images appear in-line with text, unless specified.

Whitespace

You can force lines to show underneath each other and create a whitespace or a line.

<br> – again it’s a void tag.

You can also use a <p> tag. P for paragraph. This is not a void tag. It looks like this.

<p>content</p>

Why do we have two different ways of doing the same thing?

The <b> tag is inline, everything is line based. Where as <p> is known as a block tag and that creates a box around the text and pushes things outside of it down a line.

SPAN and DIV’s

<span>text</span> is an inline tag.
<div>text</text> is a block tag.

They are both ways of keeping content in shape, similar to the <p> and <br> tags.

A <div> will create a new line and push everything down a peg. Much like the <p> tag.

Want to see what an HTML document looks like? Click here.

Leave a Reply

Your email address will not be published. Required fields are marked *