User blog:Penguin-Pal/Tutorial - HTML - Part 3

Hello again,

This is part 3 of the HTML tutorial, and this part includes attributes and styling. So as you know, every element is opened in the following way: But there are a vew interesting features- called "attributes"- that you can apply to an element. The attributes come with a space after the element name in the opening tag- and a space also separates between different attributes. Each attribute has its value, and is written in the following way: A very common attribute, is the href attribute, which is used for the a tag for specifying your link's target like this:  In the img tag, the attributes that we talked about are the width, height and src.

I will mention here some very useful attributes and their values, and how you can use them.

title
The title attribute is used for displaying a title when hovering above a certain element. It is used for displaying text, and is very useful for adding further explenations. This is its syntax:  For example, here is a span element with a title: Hover above me Which results:
 * Hover above me

Note that the title's background style changes between different operation systems. For instance, the title in Windows XP is different from the one in Windows 7.

tables attributes
There are 2 main important attributes for tables. They are the cellspacing and cellpadding. They are placed in the opening table tag, and like their name says, they change the spacing between cells, and change the distance of content from the cell's border (padding).

They allow doing some really easy modifications. Here is an example: On this example, the content of the cell is stick to the cell's border (cellpadding="0"), and the cells have a gap of 10 pixels fro each other (cellspacing="10"). I painted the cells so you can see it clearly:

style
The style attribute is likely to be the most helpful, ad is used in almost any website that exists out there. It allows to change the way the content is displayed, like adding backgrounds, text color, fonts, text size, line heights, and much much more.

This is its syntax:  A property is the type of styling to apply, and the value is the sort of way to apply the property. A colon (:) is placed between a property and its value, and a semicolon (;) is placed after each value, to allow placing other properties after it. You can use several properties and balues like this: Example text Which results:
 * Example text

There is an awesome list of properties at pageresource.com, so go and check it out.

To let you knwo, there are different methods for displaying colors and measure units.

id
The id and class (on the next section) attributes are usually used as special selectors in the page. Selectors are used when there is need to select a certain tag or element for some purpose. We will talk about them more in the CSS tutorial.

This is the id structure: Example text An id can also be used as an anchor- which allows to link to a certain part of a page, like a key paragraph or heading.

class
Classes, like an id, are used as selectors. This is how you apply a class: Example text You can also apply more than 1 class by adding a space- each phrase devided with a space is considered as a class: Example text On this example, the element has 3 classes:
 * class1
 * class2
 * class3

So...
Those are the main stylings. In the next tutorial i will show you the HTML document's structure.