The purpose of the style attribute is:

·           To provide a generic way to format and present all HTML elements.

·           Styles was introduced with HTML 4. styles can be added to HTML elements in two ways directly by using the style attribute, or indirectly by in separate style sheets (CSS files).

Style sheets are separate files in which every partcular style is maintained. Each style made is given a class name by which it gets identified.

These style sheet files are linked to the pages you design and then we can use the styles by reffering to their names for elements we want to format.

Style Examples

·           style=”background-color:yellow”

·           style=”font-size:10px”

·           style=”font-family:Times”

·           style=”text-align:center”

---

[Translate]

<dl> tag is used to create definition lists as seen in the dictionaries. These lists displace the term word just above the definition itself for a unique look. It’s wise to bold the terms to displace them further.

·           <dl> – defines the start of the list

·           <dt> – definition term

·           <dd> – defining definition

Example:

• <dl>
• <dt><b>Fromage</b></dt>
• <dd>French word for cheese.</dd>
• <dt><b>Voiture</b></dt>
• <dd>French word for car.</dd>
• </dt>

Fromage
French word for cheese.

Voiture
French word for car.

We can make lists of list, i.e. by nesting one list element inside another list element we can have sublists.

We can also use unordered lists inside the ordered lists and vice-versa.

---

[Translate]

<ul> tag is used to begin an unordered list.

Between each opening and closing <ul> tag we can put the different list items with the <li></li> tag

we can put as many items as we want to and they all will be bulleted.

The bullet can be of three types: squares, discs, and circles.

The default bullet displayed by most web browsers is the traditional full disc.

Example:

• <h4 align=”center”>Shopping List</h4>
• <ul>
• <li>Milk</li>
• <li>Toilet Paper</li>
• <li>Cereal</li>
• <li>Bread</li>
• </ul>

Shopping List

·           Milk

·           Toilet Paper

·           Cereal

·           Bread

Example:

• <ul type=”square”>
• <ul type=”disc”>
• <ul type=”circle”>

Unordered List Types:

---

[Translate]

<ol> tag is used to begin an ordered list.

Between each opening and closing <ol> tag we can put the different list items with the <li></li> tag

We can put as many items as we want to and they all will be numberred automatically.

Ordered means numbered in a sequence.

Example:

• <h4 align=”center”>Animals</h4>
• <ol>
• <li>Lion</li>
• <li>Leopard</li>
• <li>Giraff</li>
• </ol>

Animals

1.         Lion

2.         Leopard

3.         Giraff

Start attribute: Ordered list can be started from any number we wan to using this attribute.

Example:

• <h4 align=”center”>Animals</h4>
• <ol start=”4″>
• <li>Lion</li>
• <li>Leopard</li>
• <li>Giraff</li>
• </ol>

Animals

4.         Lion

5.         Leopard

6.         Giraff

Start simply defines which number to begin numbering with.

Type attribute: We can change the type of numbering displayed using this attribute.

For eg the displayed number can be alphabet in uppercase or lowercase, can be in roman uppercase or lowercase

Example:

<ol>

<ol>

<ol>

<ol>

Ordered List Types:

---

[Translate]

Lists are the bulletted and numberred content of a document. A list can be of different types.

A <ol> tag starts an ordered list, like the numberred contents

<ul> for unordered lists,like the bulletted content

And <dl> for definition lists, for giving some definitions etc.

Use the type and start attributes to fine tune your lists accordingly.

·           <ul> – unordered list; bullets

·           <ol> – ordered list; numbers

·           <dl> – definition list; dictionary

---

[Translate]

Comments are some extra information or just a note for the developer who is making a web page. There could be a need to put some mark somewhere in the document to identify it later but the developer certainly don’t want it to be reflected on the web page to the other users. In this case we use comments.

Comments sre inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

A comment starts with   <!–   and ends with   –>.

Anything in between these two marks will not be displayed on the web page as they are ignored by the browser.

Note: There is an exclamation sign after the opening bracket, but not before the closing bracket

Example:

<!– This is a comment –>

Text Formatting Tags

“Computer Output” Tags

Citations, Quotations, and Definition Tags

---

[Translate]

Paragraphs can be formatted in HTML as we do formatting in word processing program. Here the align attribute is used to “justify” our paragraph.

Example:

<p align=”justify”>

People run into confusion when programming because of some lack of understanding of the basics. With this in mind, we are going to slowly go over key OOP principles while creating our own PHP objects. With this knowledge, you will be able to explore OOP further.

</p>

People run into confusion when programming because of some lack of understanding of the basics. With this in mind, we are going to slowly go over key OOP principles while creating our own PHP objects. With this knowledge, you will be able to explore OOP further.

Paragraph Centering

Example:

<p align=”center”>People run into confusion when programming because of some lack of understanding of the basics. With this in mind, we are going to slowly go over key OOP principles while creating our own PHP objects. With this knowledge, you will be able to explore OOP further. Every line of the paragraph above is now aligned to the right hand side of the display box.

</p>

People run into confusion when programming because of some lack of understanding of the basics. With this in mind, we are going to slowly go over key OOP principles while creating our own PHP objects. With this knowledge, you will be able to explore OOP further. Each line of the paragraph has now been centered inside the display window.

Paragraph Align Right

Example:

<p align=”right”>People run into confusion when programming because of some lack of understanding of the basics. With this in mind, we are going to slowly go over key OOP principles while creating our own PHP objects. With this knowledge, you will be able to explore OOP further. Every line of the paragraph above is now aligned to the right hand side of the display box.

</p>

People run into confusion when programming because of some lack of understanding of the basics. With this in mind, we are going to slowly go over key OOP principles while creating our own PHP objects. With this knowledge, you will be able to explore OOP further. Every line of the paragraph above is now aligned to the right hand side of the display box.

Line Breaks

<br> tag is called the line break tag. It ends the line you are currenly on and resumes on the next line, same as the carriage return in word processor.

<br> tag is an empty tag i.e. it doesn’t have an end tag so we end the tag in the begining itself as <br/>.

Example:

<p>

Will Mateson<br />

Box 61<br />

Cleveland, Ohio<br />

</p>

Address:

Will Mateson
Box 61
Cleveland, Ohio

Horizontal Rules (Lines)

The <hr /> tag is also an empty tag and is used to put an horizontal line in the document wherever needed.

Example:

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

This is a paragraph

…………………….

This is a paragraph

…………………….

This is a paragraph

---

[Translate]

HTML paragraphs are defined with the <p> tag. The contents inside the <p> tag are formatted like a paragraph of a document.

The paragraph tag is very basic tag and its simple to start with. Using this tag places a blank line above and below the text of the paragraph. These automated blank lines are examples of how a tag “marks” a paragraph and the web browser automatically understands how to display the paragraph text because of the paragraph tag.

Example:

• <p>This is a paragraph</p>
• <p>This is another paragraph</p>

This is a paragraph

This is another paragraph

---

[Translate]

HTML headings are defined with the <h1> to <h6> tags.

Each of the headings from <h1> to <h6> have different formatting, i.e. different font sizes and different font face etc.

<h1> is the biggest and <h6> is the smallest

These tags are more important than they seem to be because Search engines use your headings to index the structure and content of your web pages.

Example:

• <body>
• <h1>Headings</h1>
• <h2>are</h2>
• <h3>great</h3>
• <h4>for</h4>
• <h5>titles</h5>
• <h6>and subtitles</h6>
• </body>

Headings:

are

great

for

titles

and subtitles

Note: Each heading has a line break before and after each heading display. This is a built in attribute so to speak associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag exactly the same as with <p> tags.

---

[Translate]

Attributes exist to modify HTML tags allowing for complete customization of a website.

Below are some other attributes that are readily usable with many of HTML’s tags.

---

[Translate]

Many tags have some set default values.If we are setting the attributes explicitely it will bahave as the default set value.

For example, the contents of a paragraph tag will always be left aligned by default untill and unless we specify the alignment values explicitely

Elements placed within a table are vertically centered and to the left unless we specify otherwise.

---

[Translate]

Example:

• <h2 align=”left”>Left aligned heading</h2>
• <h2 align=”center”>Centered Heading</h2>
• <h2 align=”right”>Right aligned heading</h2>

Display:

---

[Translate]

This attribute is to set the alignments of the things on the document. You may align things left, right, center or justify. We can align text, images table or anything that is present in our document.

By default most elements are automatically aligned left.

Example:

• <h2 align=”center”>Centered Heading</h2>

---

[Translate]

This attribute gives a title to an element and adds a text pop-up to HTML elements.When you hover your mouse over the element for a few seconds you can see the value you have given in the title attribute.

Example:

• <h2 title=”Hello There!”>Titled Heading Tag</h2>

This provides your web site with some user interaction which is priceless.

---

[Translate]

A name to an element is a kind of mark on it,which becomes a scripting variable for scripting languages such as Javascript, ASP, and PHP. A name provides an identification in particular, and that element can be reffered to by that name whenever needed. The name attribute is seen most often with forms and other user-input elements.

Example:

• <input type=”text” name=”TextField” />

This attribute has no effect on the display of the text field, but behind the scenes it plays a huge identification role.

---

[Translate]

The class and id attributes are almost the same. They serve behind the scenes for scripting and Cascading Style Sheets (CSS). These attributes define a class for formatting the content inside the element. i.e. they provide certain classification and identification to the elements, so that more than one part of the document could have similar look and feel without repeating each and every attribute all the time.

Moreover it also works the other way round i.e. when you have two or more of the same element on a page (like a <p> tag) but want them to be different in appearance.

The idea is that you can classify or id certain a tag and later format the tag using Cascading Style Sheets.

Example:

• <p>Paragraph type 1 Italics</p>
• <p>Paragraph type 2 Bold</p>

• Paragraph type 1 Italics
• Paragraph type 2 Bold

---

[Translate]

Attributes are used to customize and modify tags. when a web browser interprets a tag, it will  search for set attributes and then display the element (tags+attributes) base don its attribute.

for eg:  At some point you may want to give your body element a background color or perhaps change the width of a table. All of these things and more can be achieved using Attributes.

HTML tags have a unique set of their own attributes. Attributes are placed within the opening tag and they follow a precise syntax (format).

There is a set of generic attributes that can be used with just about every HTML Tag in existence.

---

[Translate]

HTML elements without content are called empty elements. Empty elements can be closed in the start tag.

for eg: <br> is an empty element and don’t have a closing tag (it defines a line break).

writing <br /> instead is more appropriate.

---

[Translate]

Most HTML elements can be nested (can contain other HTML elements).

Nesting means embedding some tag inside some other tag. For eg, the <html> tag is the parent tag and all the other tag comes inside it. So all the other tags are nested inside the <html> tag.

---

[Translate]

The main element is the <body> element. All the contents of a document that needs to be displayed by the browser are and should be placed inside this section only.(Paragraphs, pictures, tables, etc).

Example:

• <html>
• <head>
• <title>My WebPage!</title>
• </head>
• <body>
• Hello World! All my content goes here!
• </body>
• </html>

Note: Tags are not case sensitive, but the standard for XHTML and Dynamic HTML is writing the tag in lowercase.

---

[Translate]