Archive for September, 2007

You can easily add CSS styles to your text. All you need to do is add a <p> style.

p {color: #000099; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

Now whenever you have text inside the paragragh tag, it will use the above style. You can also add special headings.

p.h {color: #CC0000; font-size: large; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

To use this in your text just add the code:

<p class="h">Some Headline</p>

You need to use CSS Styles for your texr as the W3C are cutting out the <font> tag from XHTML 1.0 Strict upwards. Although you can still use it in XHTML 1.0 Transitional, we think this will not be the case in later versions.

You can also use CSS to change the font of other tags such as your links. These include rollover, hit and visited pages. Take a look at this code that can be copied and pasted staight into your HTML pages.

<Style>
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</Style>

This produces the blue to green underlined rollovers on this page.

There are 3 ways to add CSS into your web pages:

* External Style Sheets
* Internet Style Sheets
* Style Tags

External Style Sheets

These are style sheets saved as .css. You then link these into your page using the following tag.

<link href="global.css" type="text/css" rel="stylesheet" />

This style sheet is then included in your page when its in the browser.

Internal Style Sheets

This used a style tag, as you may have seen in serveral tutorials. Here is one we have for image rollovers.

<style type="text/css">
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</style>

They are seperate from everything else but are included in the heag tag of your web page.

Style Tags

These are included inside your actual element. For instance if you wanted to change the border, of just one table, you could use the following code:

style='BORDER-BOTTOM: #84B953 1px solid'

This would just be included in the actual tag of your HTML element. Eg:

<table style='BORDER-BOTTOM: #84B953 1px solid'>...</table>

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>

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">

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.

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.

Changes are if you are using ASP you will sometime want to write in something into a page without going back into HTML. You can always open an IF then close the ASP script write in your HTML then open the ASP script up again and END IF. However this is not always practical.

When it’s needed

Some WYSIWYG editors will display little ASP icons where ASP scripts are and if you are using one page to house several pages of content then you will want it all to be inside the ASP script so that it doesn’t mess up and stretch the layout of your page.

However if you are opening and closing ASP scripts with HTML in between, all the HTML will display in between all these scripts and will be fully visible on your page rather than being contained in the little ASP script icon.

Another instance would be when you want your HTML content to be in a variable. Say if you wanted to use the same block of HTML script in two places or repeatedly say for a newsletter script then it would be easy if all the HTML was in a variable you could just include anywhere in your ASP script.

Being ASP ready

Most HTML tags will go in the basic format for Response Write in ASP fine as there are no limitations as its al contained within markers to show what is ASP script and what is the content you are setting as a variable. For example:

Response.Write("all the code goes here and its all contained in this area nicely")

The problem is that often in HTML, the quote mark is used. But using one of these ” in a response write ASP command will close the Response Write area and code will be left out and start causing all sorts of errors. For example:

Response.Write("<img src="somepath_is_outside_the_quotes"")

Quoting the problem

How do you contain these problems then? By removing or even adding quotes. The first option is to simply remove all the quotes or as many as you can. This means that it isn’t formatted correctly and W3C won’t be happy with you but they never are anyway ;). It will still work in the user’s browser at any rate.

<img src=somefile.gif width=100 height=200 border=0 />

This code appears fine, and it would display fine. This can then be put between the quotes in a Response Write tag in ASP. Problems do not end there though – what happens if your need spaces in a variable. There you couldn’t use the above tactic.

Spaces and doubles

Take a look at the following code. There may be better examples but this one works fine. Its an image with an ALT tag with some keywords in it.

<img src=somefile.gif border=0 alt="some keywords go here" />

There is a problem. The ALT tag has spaces in, so after some, the browser may think that everything beyond there is something else. And with good reason as we could replace keywords go here with width=50 and we wouldn’t want that to be part of the ALT tag.

The solution it to use double quotes.

<img src=somefile.gif border=0 alt=""some keywords go here"" />

This keeps the ASP code correct and adds a quote into the HTML when it is sent to the browser. It’s a bit longer and more code that usual but you can easily change all the ” to “” with a quick find and replace.

The request function, suprising requests a value. This could be a query string, form variable, or some other value. For example if you were at the following URL.

http://www.somepage.com/home.asp?ID=23

And you had a script as such.

Request.QueryString("ID")

The call would return the value 23.

An example of where this can be used is on the M World News channel. The news is stored dynamically in a databasde so when you click on a link to the full story from the news homepage you are taken to a dynamic page which selects the story based on the ID of the story you want passed to the page as a url variable. For example the link could be:

http://www.mworld.us/news/story.asp?ID=52

Examples of use:

Request.QueryString("SomeURLVariable")
Request.Form("SomeFormElement")
Request.Cookies("SomeCookie")