Posts Tagged ‘basics’

CSS stands for Cascading Style Sheets.

CSS Styles are used to define how to display HTML elements. Styles are normally stored in internet or external style sheets. Styles were added to HTML 4.0 because developers disliked having to define every bit of text using tags like <font>. External CSS files are stored using the .css extention though they can be saved in HTML format. Multiple style definitions will cascade into one,

External style sheets can save you a lot of time, as you can change the look of the page, just by changing the external file. CSS Style Sheets are supported by both Nescape 4.0 and Internet Explorer 4.0.

CSS cascades

You may have multiple style sheets saying different things in your document. In this case they will be ordered in priority as follows:

1) Inline Style Sheets (inside an element)
2) Internal Style Sheets (inside the head tag)
3) External Style Sheets
4) Browser Default

So for instance an inline style tag would overrule and internal style sheet, but a browser default would not overrule an external style sheet.

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>

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.

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.

ASP code is added like scripts to HTML. You open an ASP script using the tag.

<%

You close it using the reverse.

%>

Therefore in a HTML page it would look like the following.

<html>
<head>
<title>Example script</title>
</head>
<body>

<%
' here is some ASP script
%>

</body>
</head>

Notice the use of a comment in the script.

<%
' This is an ASP comment
' Here is another
%>