HTML Beginners Tutorial
Share it:   Comparte en Del.icio.us Comparte en MySpace Comparte en Facebook Comparte en Digg Comparte en Technorati Comparte en Yahoo Comparte en Menéame
LESSON 5

Lets talk a little about screen resolutions. The screen I use has a resolution of 1600x1024 pixels, some pleople have one with 800x600, others have it at 640x480 pixels, and the majority use one with 1024x768, while very but very few use higher resolutions (their sight has to be very good!). Screen resolution takes an important role in the way your visitors see your website.

I strongly suggest you to test your pages in different resolutions so that your design and structure --which surely took you a lot of thinking-- do not appear ugly on some resolutions. Actually, most of monitors come with an application (usually located in the task bar, at the bottom right of the screen) that allow you to change from one to another screen resolution in a fast way.



Now lets see some format tools available. The first is <BLOCKQUOTE>. This tag centers the text in the page, decreasing or increasing marging at its left and right sides.

<body bgcolor="#ffffff">
<blockquote>
El Web Marketing, no es otra cosa más que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayoría de las herramientas que ofrece internet para realizar la promoción de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia.
</blockquote>
</body>



Another tool are the "LISTS ", which can be "ORDERED" and "UNORDERED".

First we will create an UNORDERED list. Start with...

<body bgcolor="#ffffff">
What I want for my graduation
</body>



Add a pair of tags for the unordered list...

<body bgcolor="#ffffff">
What I want for my graduation
<ul>
</ul>

</body>



A list of things...

<body bgcolor="#ffffff">
What I want for my graduation
<ul>
<li>a black Cherokee 4x4</li>
</ul>
</body>



Add more wishes...

<body bgcolor="#ffffff">
What I want for my graduation
<ul>
<li>a black Cherokee 4x4</li>
<li>a 9.6 Ghz notebook</li>
<li>a guitar/drums</li>
<li>a jet ski</li>
<li>Maria Sharapova</li>

</ul>
</body>



To create an ordered list replace the tag <ul> with <ol>...

<body bgcolor="#ffffff">
What I want for my graduation
<ol>
<li>a black Cherokee 4x4</li>
<li>a 9.6 Ghz notebook</li>
<li>a guitar/drums</li>
<li>a jet ski</li>
<li>Maria Sharapova</li>
</ol>
</body>



Another type of list is the one known as definition list...

Web Marketing
     El Web Marketing, no es otra cosa más que la Mercadotecnia
     aplicada en internet, con la finalidad de que su sitio web y sus
     productos o servicios lleguen al mercado meta definido con
     anterioridad y empleando la gran mayoría de las herramientas que
     ofrece internet para realizar la promoción de su sitio web. Se
     basa en conocimientos tanto de sistemas como de mercadotecnia.

Start with...

<body bgcolor="#ffffff">
<dl>
</dl>

</body>



Add the definition title...

<body bgcolor="#ffffff">
<dl>
<dt>Web Marketing
</dl>
</body>



The definition...

<body bgcolor="#ffffff">
<dl>
<dt>Web Marketing
<dd>El Web Marketing, no es otra cosa más que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayoría de las herramientas que ofrece internet para realizar la promoción de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia.
</dl>
</body>



And, finally, lets turn bold the definition title...

<body bgcolor="#ffffff">
<dl>
<dt><strong>Web Marketing</strong>
<dd>El Web Marketing, no es otra cosa más que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayoría de las herramientas que ofrece internet para realizar la promoción de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia.
</dl>
</body>



A very used tag is "Horizontal Rule" "<HR />".

<body bgcolor="#ffffff">
<hr />
</body>



Some options for the horizontal rule...

<body bgcolor="#ffffff">
<hr width="20%" />
<hr width="50%" />
<hr width="100%" />
<hr width="20" />
<hr width="50" />
<hr width="100" />
</body>



And this way you align it inside the page...

<body bgcolor="#ffffff">
<hr width="60%" align="left" />
<hr width="60%" align="right" />
<hr width="60%" align="center" />
</body>



You can control its size...

<body bgcolor="#ffffff">
<hr width="60%" size="1" />
<hr width="60%" size="3" />
<hr width="60%" size="8" />
<hr width="60%" size="15" />
</body>



...and display it with a solid color...

<body bgcolor="#ffffff">
<hr width="60%" size="1" NOSHADE />
<hr width="60%" size="3" NOSHADE />
<hr width="60%" size="8" NOSHADE />
<hr width="60%" size="15" NOSHADE />
</body>



Last tag to talk about is the one used for comments...

<body bgcolor="#ffffff">
<!-- This is a comment -->
<p>And this is not a comment</p>
</body>

A comment can be placed wherever you like inside the page and will be ignored by the browser all you establish inside this tag. You can place hidden tags, like personal comments...

<!-- Hello, send me a message if you want to know me -->

or messages intended to help those who are seeing your HTML code...

<!-- Copy something from me and you are history! -->



The comment starts with "<!--" and ends with "-->" Browser will ignore all HTML tags that you place inside the comment tags.

[Lesson 1]   [Lesson 2]   [Lesson 3]   [Lesson 4]   [Lesson 5]   [Lesson 6]   [Comments]

Reproduction of this tutorial is not allowed, please read the following links for further information:
Term of Use / Privacy Policy