Chris Worfolk's Blog

Posts Tagged ‘html’

Newer Entries »

HTML image tag

Sunday, September 16th, 2007 | Programming, Tech

Images can be embedded in a page using only one tag. There are examples of images on this page – the top header secton contains three images.

The basic syntax is as follows.

<img src="location.gif" width="300" height="100" border="0" alt="Description text">

For a basic image tag all you need is <img src=”location.gif” alt=”description”>. If you do this the image will display at its normal size although it is always a good idea to add a width and height tag.

The alt property defines the text that is displayed when the image is missing, it is displayed where the image should be. An example is shown below.

<img src="fakelocation.gif" width="200" height="100" alt="Here is an example">

Would produce:

Here is an example

To add a link round an image simply do it like a normal hyperlink

<a href="targetpage.html"><img src="location.gif" border="0></a>

Doctype tags in HTML

Sunday, September 16th, 2007 | Programming, Tech

The doctype tag tells the browser what standard the page conforms to. Until now doctypes did not have to be including but with the creation of XHMTL 1.0, they must know be put in. Doctype tags go above your head tag. There are three types of doctype tags. Strict, transitional and frameset.

Strict

Strict is the hardest standard to compy with. If you add a strict doctype to your document, you can’t use deprecated tags, and traditionally a lot of websites have stayed away – but more and more are coming round to the idea of tigher standards.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

This is the most commonly used doctype as it allows you to keep some of the old tags but still lets you move on to XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset

This is for frameset pages (as you have probably guessed).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Basic tags in HTML

Sunday, September 16th, 2007 | Programming, Tech

This page covers the tags you will most commonly use in HTML that are the most basic although it does not cover page structure. See the next page for that.

Paragraphs

This signifies that the text within should be in its own paragraph. There is a break between each paragraph such as the space between the introduction text and this section.

<p>Your text goes here</p>
<p>Putting more text here would create a gap between them</p>

Line breaks

This is where you want to start a new line but do not want a gap in between them.
Such as here. The previous line was not finished but a new one was started. This is a single tag which does not require closing.

Some text here<br />
This text would be on the line below

Comments

If you want to add some notes into your page you can do it using a comment tag. These are good to remind you what every does or where a particular section starts.

<!-- your comment goes here -->

Comments will not display in the browser although if anyone goes through your sourcecode they will be able to see it so do not put private information in there.

Horizontal Lines

With the advent of borders and more color options in HTML, the horizontal line has become less used these days but is still good to easily section off different parts of the page.

<hr />

Headings

Rather than having to change title text with color, size and weight you can simply replace your <p> tags with title tags. There are 6 different titles that are built into HTML.

<h1>Here is a heading</h1>
<h2>Here is a heading</h2>
<h3>Here is a heading</h3>
<h4>Here is a heading</h4>
<h5>Here is a heading</h5>
<h6>Here is a heading</h6>

CSS has made these tags less needed although they are easy to use and help with search engine optimisation. A blank line is also automatically added after a heading.

HTML elements

Sunday, September 16th, 2007 | Programming, Tech

As we have already seen, HTML is made up of elements such as <p> or <br>. HTML elements are surrdouned by < and > characters, which is why if you want to use these in text you must use code.

The first > signifies the start of a tag and the > shows the end. HTML tags are not case sensative so <BR> is the same as <br>. They usually come in pairs although several are just one.

For example:

<u>This text would be underlined</u>

EDIT: Since this article was originally written, the u tag has since been deprecated. Underlining should now be done using CSS instead.

You have the opening tag <u> which starts the underlining, the content which is the text saying “this text would be underlined” and the closing tag </b>. It would produce:

This text would be underlined

HTML tags should be layered inside each other, for example:

<p><u>This is correct</u></p>

Whereas:

<p><u>This is not correct</p></u>

Sometimes you do not have a closing tag you only have a single tag such as is the case with horizontal lines:

<hr />

Would produce:

There is no need for a closing tag.

Introduction to HTML

Sunday, September 16th, 2007 | Programming, Tech

HTML is the standard for creating web pages over HTTP. HTML stands for hyper text markup language. HTML is controlled by the W3C which is an assosiation assigned to setting world standards on the internet.

HTML has had different versions throughout its life. Until a few years ago (about 2000) HTML 4.01 was the standard, but since then the W3C has made XHTML 1.0 the official standard lanuage although software has been slow on the uptake. Internet Explorer 6.0 supports XHTML, and a few of the latest web editors such as Dreamweaver MX also support it.

What is HTML made of?

HTML is made up of tags such as <head> or <table> of which content is then put inside. <p> stands for paragh and every time a new <p> tag is used another paragragh is added to the page. Take a look at this code:

<p>This text would be in its own paragragh</p>

After the content is in the tag is closed with a slash inside the tag. In this case it is </p>. Most tags need closing. However some tags such as Horizontal Lines <hr /> do not. A HTML page is made up of two main sections. The head and the body. You will learn more about these later.

Newer Entries »