learn html - part 3

[ovi]

formatting text on a web page

This page deals with html tags for formating a webpage with text and will show how to create a headline, how to make paragraphs, how to pick fonts and change their color and size
the h tag
Use the H tag to create a headline, the h tag comes in six flavours (yum yum!)

<H1>this is h1</H1>
<H2>this is h2</H2>
<H3>this is h3</H3>
<H4>this is h4</H4>
<H5>this is h5</H5>
<H6>this is h6</H6>

the H tag is a block level element, which means it will start on a new line, in other words if a H1 tag were inserted into the middle of a line of text a there would be a linebreak at the point where the <H1> starts and another linebreak after the </H1> closing tag
the following attributes can be added to the H tag
align=[ left | center | right | justify ]
example
<H5 align=left>Hello World</H5>

the P tag
A very similar tag to the H tag is the P tag which defines a paragraph
The <P></P> tags are also a block level element and share the same attributes as the H tags
align=[ left | center | right | justify ]
<P align=left>Hello World</P>

the font tag
Probably the most versatile text formatting tag is the <font></font> tag
The font tag not only allows the color and size of text to be selected but also allows specific fonts to be selected

an example of the font tag
<font face="arial">this is the arial font face</font>

change the color
<font face="arial" color="#FF0000">this is the arial font face</font>

choose from 1 of 7 sizes
<font size=7>size 7</font>
<font size=6>size 6</font>
<font size=5>size 5</font>
<font size=4>size 4</font>
<font size=3>size 3</font>
<font size=2>size 2</font>
<font size=1>size 1</font>
using specific fonts
Unless a font is specified in a html document all of the text contained in it will be rendered in the users default font, this is also true if the specified font is not installed on the users computer
The font tag gives enough flexibility to allow html authors to specify a 'back up' font

<font face="georgia, times new roman, arial">alternative fonts</font>

in the example above the browser will attempt to render text in the georgia font, if the georgia font is not installed the browser will attempt to render text in the times new roman font and if that is unavailable the browser will search for the arial font

the following 12 fonts are installed on both pc and mac and are considered as 'safe':
arial, arial black, comic sans ms, courier, courier new, georgia,
helvetica, impact, palatino, times new roman, trebuchet ms, verdana

most browsers prefer font names to be lower case
the font tag is an inline element, if the browser encounters the font tag in the middle of a line of text it does not cause a linebreak.

monospaced text
to create typewriter text (teletype text) use the <TT></TT> tags
<TT>teletype text is monospaced which means each letter takes up exactly the same amount of space</TT>

some quick tags
use the <B></B> tags to make text <B>bold</B>

use the <EM></EM> tags to <EM>emphasise text</EM>

use the <U></U> tags to <U>underline text</U>

use the <I></I> tags to make<I>italic text</I>

use the <BIG></BIG> tags to <BIG>increase the font size by +1</BIG>
the maximum font size is 7

use the <SMALL></SMALL> tags to <SMALL>decrease the font size by -1</SMALL>
the minimum font size is 1

 

[Duke]

Another good way to learn html quickly is to copy and paste the code from an html site and open it in dreamweaver or some other type of WYSIWYG program. You can alter the code and preview it in a browser to see what the changes you made actually do.

I only mention it becuase it was a fast track to me learning what I know about html (precious little) but I learned it quickly.

 

[Pentarix]

I'd have to say that this is how the majority of people do it and will continue to. Taking the time to learn each part would be to time consuming, I recommend learning as you go by copy and pasting.

 

[lovely]

Hello Ovi, thank you for your effort it is educative, I have post something like this in the pass, but it is not comprehensive as yours
Lovely

 

[ovi]

Hello

I am a big fan of step by step learning. By copy & paste you will take code that maybe you don't understand. It's better to learn step by step. I someone want to learn will learn

Ovi

 

[Duke]

I agree with you ovi but in my case I was made the editor for a gaming community and only needed limited knowledge of html. I quickly surpassed what everyone else on staff new and found that I was once again limited. The best way for me to break beyond those barriers was to find code that performed in a similar way to what I was looking for, copy and paste it in a WYSIWYG and manipulate it to see what did what.

 

[Paul_KY]

I prefer to hire a coder for my big sites, and play around with my WYSIWYG editor for my small affiliate sites.

Why learn HTML? Learning how to counting money is much more fun.

 

[Duke]

Right now I'm not really counting the money so learning php and html seems to be the way to go.

 

[ovi]

Paul_KY anyway a little knowledge in PHP and HTML will be good. Anyway you can trust in your programmers that they give you the clean code, and a good code?

Ovi

 

[Paul_KY]

I know. I know. Just messin witcha.

 

[sgtsearch]

One thing to note is that many tags are becoming deprecated as soon as they come out

Examples - p , align tags, etc....

If you already know HTML - basic CSS would be a snap for you to learn along with it. Cascading Style Sheets are really nothing more than assigning a style to elements of HTML (and more)

I'm guilty though too - my whole site(s) use one included CSS file - and I still use many deprecated tags. Maybe I'll throw a little something together for here when I get around to changing my site to be more reliable on it.

 

[Duke]

Paul_KY anyway a little knowledge in PHP and HTML will be good. Anyway you can trust in your programmers that they give you the clean code, and a good code?

Ovi

I'm not sure I trust anybody anymore unless it's coming from a credible resource.

 

[Paul_KY]

You can always trust me. I promise to mislead you almost 90% of the time I post.

 

[Pentarix]

Well there's one thing we CAN trust.

 

[Duke]

You can always trust me. I promise to mislead you almost 90% of the time I post.

almost 90%, rofl, that's optimistic

 

[crowebird]

Another good way to learn html quickly is to copy and paste the code from an html site

php owns, and i learned from the copy and paste method (and www.php.net) <<btw just read this forum

 

[Duke]

I'll have to give it a look, I'm interested in learning php but I'm not sure if it's worth putting the time into learning php or just trying to learn C++.

 

[bungo]

Very nice guide! I started learning HTML before I even had a web connection! Just used an old HTML book I found in the garage, and learnt most of what I know now using Notepad and an out of date IE browser to preview.

Yay for notepad!

Bungo

 

[ovi]

Cool

I have done the same. And this is briliant. It's the best way I also raccomend this to all those who want to learn HTML.

Ovi