News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

HTML Tutorial – 09 – Presentational Markup

August 24th, 2009

The presentational markup is used to describe the appearance of text. However, it is recommended to use CSS instead for handling all kinds of style information.

First, there are the text styles: bold <b>, italic <i>, underlined <u> and strike-through <s> <strike>. Bold and italic are still commonly used text styles, but underlined and both strike-through tags have become deprecated. Like most other tags they all come in pairs and contain the text that they affect.

<b>bold</b>, <i>italic</i>, 
<u>underlined</u>, <s>strike-through</s>

These elements can be nested together to combine different text styles.

<b><i><u>combination</u></i></b>

The teletype element <tt> gives a fixed-width typeface, just as the preformatted tag.

<tt>teletype (monospaced) text</tt>

The <big> and <small> elements change the font size.

<small>small text</small>
<big>big text</big>

These elements can be nested several levels deep in order to achieve a greater effect.

<small><small>smaller text</small></small>,
<big><big>bigger text</big></big>

The <sup> and <sub> elements make text render as either superscript or subscript.

<sup>Superscript</sup>
<sub>Subscript</sub>

The font element can be used to specify color, size and typeface of text. The size can be a value from 1 to 7, or it can be specified relative to the current font size with a plus or minus sign before the number. By default the standard size is 3, so a font size of “+1” would equal a size of 4. The face attribute can contain one or more font names in a comma separated list. If the client’s computer does not have the first font it will then try to use the next one and so on.

<font color="#FF0000" size="4"
 face="Arial, Helvetica, sans-serif">Example text</font>

The body element provides a number of deprecated attributes for controlling the general appearance of the web page. The default text color can be changed using the text attribute. A background color can also be added, or a background image, which will be tiled in the background.

<body text="gold" bgcolor="#000000" background="pvt.png">

HTML Tutorial – 08 – Horizontal Rule

August 24th, 2009

The horizontal rule is used to visually separate sections of a document. To adjust it there are four deprecated attributes – size, width, noshade and align – as well as the color attribute which is not supported in all browsers.

<hr>

The standard rule is drawn across the full width of the page. For adjusting the length there is the deprecated width attribute, specified in either pixels or percentage.

<hr width="75%">

Normally, browsers render the rule two pixels thick. This can be changed with the deprecated size attribute to a specific number of pixels.

<hr width="75%" size="20">

The horizontal rule in most browsers consists of two gray shades and the fill color will be the same as the background. If the deprecated noshade attribute is added, the entire rule will instead be displayed in one solid color. This attribute does not require a value, although the attribute’s own name can be used as its value (which is required in XHTML).

<hr noshade="noshade">

The color attribute changes the color of the rule. However, this attribute is not part of any HTML standard.

<hr color="red">

The rule can be aligned to the left, right or center, which is the default.

<hr width="75%" align="right">

HTML Tutorial – 07 – Images

August 24th, 2009

An image can be included in a web page by using the image tag <img>. This tag requires the src (source) attribute to points to the location of the image. The standard image formats supported by all major browsers are jpg, gif and png.

<img src="pvt.png">

Another attribute that always should be included is alt, which stands for alternative description. If for any reason the image cannot be displayed this text will be shown instead.

<img src="pvt.png" alt="PVT Logo">

The image can be resized by adjusting the width and height attributes. These attributes are specified in either pixels or a percentage of the page.

<img src="pvt.png" width="100" height="100">

Title is a generic attribute that can be applied to almost any element. It specifies additional information about the element. For the <img> tag, along with many other elements, it provides a tooltip that is shown when the mouse hovers over the element.

<img src="pvt.png" title="My Title">

The deprecated border attribute sets the thickness of the image border. As with other elements able to use a border its value should be set to zero to explicitly hide it, since this is not the default for all browsers.

<img src="pvt.png" border="1">

The deprecated horizontal and vertical space attributes add spacing to the sides of the image.

<img src="pvt.png" hspace="20" vspace="20">

Align attribute

The deprecated align attribute appears on several different elements, but no other element has as many possible values as the image tag does. The default alignment is “bottom” which is equivalent to “baseline”. They both align the image to the bottom of the text. “Middle” aligns the image to the middle of the baseline and “texttop” aligns it to the top of the text.

<img src="pvt.png" align="middle">

The remaining values are used to align the image with any elements on the line, instead of only with text. “Absbottom” aligns the image with the lowest part of the line. “Absmiddle” is equivalent to “center” and aligns the image with the middle of the line and “top” aligns it with the top of the line.

<img src="pvt.png" align="absbottom">

The image can also be aligned horizontally with the values “right” and “left”. Both of these values move the image down one row and cause the text to flow around it.

<img src="pvt.png" align="left">

HTML Tutorial – 06 – Links

August 24th, 2009

The anchor element <a> is used to create links and link targets. The destination for a link is set with the href (hypertext reference) attribute to a URL, which is an Internet address.

<a href="MyPage.html">Web document</a>

This address can link to any type of file, not just to other web pages. Some files can be viewed directly in the browser, such as text and images, while other files will automatically be downloaded.

<a href="pvt.png">View</a>
<a href="file.zip">Download</a>

A link can point to a mail address using a mailto notation. Such a link will open up a new mail window using the clients default e-mail program.

<a href="mailto:foo@bar.com">Simple mailto link</a>
<a href="mailto:foo@bar.com?
         subject=mysubject&
         body=mybody&
         cc=mycopy@bar.com&
         bcc=myblindcopy@bar.com">Mailto link 
         with parameters</a>

Comma can be used to separate multiple e-mail addresses. To specify a newline character in the body section it needs to be URL encoded as “%0A”. Spaces should also be replaced with “%20” to make sure the browser displays the text properly.

A URL can be either relative or absolute. A relative address uses the current document location as its base address and is therefore useful when referencing local files and pages. The example below shows how to link to a document in the same folder, a subfolder or a parent folder relative to the current document.

<a href="index.html">Current folder</a>
<a href="folder/index.html">Subfolder</a>
<a href="../index.html">Parent folder</a>

An external website on the other hand need to be linked to using an absolute URL, which contains the complete address.

<a href="http://www.domain.com/index.html">Full path</a>

Named anchors and id

If an anchor is given a name instead of a hypertext reference it can be used as a hyperlink target within that document. The named anchor is linked to by appending a pound sign (#) and the anchor’s name as a suffix to the URL.

<!-- label declaration -->
<a name="section"></a>
 
<!-- page section link -->
<a href="MyPage.html#section">Go to section</a>

If the target is in the current page the address part can be left out completely.

<a href="#section">Go to section</a>

Another way of designating hyperlink targets within a web page is using the id attribute. This is a generic attribute that almost any element can have, which makes it possible to turn any element into a potential hyperlink target.

<a id="section"></a>
<a href="MyPage.html#section">Go to section</a>

The id attribute’s value must be unique within the web document. The same is true for the name of a named anchor.

To change the hyperlink colors there are three attributes available for the <body> tag: unvisited, visited and active. All of these have become deprecated in favor of CSS. Despite this it is still possible to color links using the “link” attribute for unvisited links, “vlink” for visited links and “alink” for links as they are being clicked.

<body link="#FF0000" vlink="orange" alink="#CC00FF">
<a href="doc.html">Unvisited</a>
<a href="mypage.html">Visited</a>
<a href="doc.html">Active</a>

Base element

The <base> header tag can change the base address for all relative links in the document.

<base href="http://www.google.com">
<!-- Link to www.google.com/index.html -->
<a href="index.html">Google</a>

HTML Tutorial – 05 – Colors

August 24th, 2009

Colors in HTML can be specified either by using a hexadecimal notation or by typing the name of the color.

Hexadecimal color notation

The hexadecimal notation uses a red-green-blue triplet, prefixed by a hash mark (#). Hexadecimal means base-16 counting, so valid digits are 0 through 9 and A through F. Each value can range from 00 to FF, or 255 in decimal notation. All in all this gives 16 million available colors.

<!-- white specified using hexadecimal notation -->
#FFFFFF

Named color notation

The named colors include only 16 names suggested by the HTML specification. However, all major browsers recognize over a hundred different color names.

<!-- white specified by name -->
"white"

Example colors

Below some example colors and color codes can be seen.

NameHexColor
Black#000000
Navy#000080
Blue#0000FF
Cyan#00FFFF
Lime#00FF00
Green#008000
Indigo#4B0082
Purple#800080
Violet#EE82EE
Gray#808080
Silver#C0C0C0
Gold#FFD700
Yellow#FFFF00
Orange#FFA500
Red#FF0000
Brown#A52A2A

HTML Tutorial – 04 – Whitespace

August 24th, 2009

In HTML, all kinds of whitespace characters are ignored. This means the page will render the same no matter how it is formatted and the text will contain no line breaks except for when it wraps around the edge of the screen. To override this behavior there are several elements available.

Break tag

First, there is the break tag that forcibly breaks a line of text and creates a newline.

<br>

Paragraph element

A similar element is the paragraph, which adds more vertical space than the break tag. Its end tag is optional.

<p>...</p>

The paragraph can be aligned using the align attribute. Valid values for this attribute are left, right, center and justify.

<p align="center">...</p>

Preformatted element

Whitespace can be preserved using the preformatted element. Within this element the text will appear exactly as it is typed and it will be rendered with a fixed-width typeface.

<pre>...</pre>

When trying to add more than one space character in a row these spaces will be collapsed. To force spacing a non-breaking space (&nbsp;) can be used. This character cannot be typed directly from the keyboard. Instead, it is referenced with a notation that starts with an ampersand and end with a semicolon. This notation is used to type characters that have special meaning.

&nbsp;

Some other important special characters are: &lt; (<), &gt; (>) and &amp; (&).

Comments

There is a special kind of tag used only to include comments. This tag may span multiple lines and can appear anywhere in the document.

<!-- This is an HTML comment -->
  1. 1
  2. ...
  3. 32
  4. 33
  5. 34
  6. 35
  7. 36
  8. 37
Ads