Learn HTML
what is html?
html stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages
what tools are needed to make a webpage?
all that is needed is 'notepad' and a second browser, notepad is a simple text editor in windows, click start on your taskbar then programs and then goto accessories, finally click notepad.
If you are using internet explorer then you will need a netscape browser to check your work
If you are using netscape then you will also need an internet explorer browser to check your work.
what does html look like?
the html language is made up of tags that are enclosed in angle brakets, a webpage is completly enclosed within the html tags.
most html tags work in pairs
The first <html> tag tells the browser that it is reading a html document. The </html> tag with the / in it tells the browser that the html has ended
Take a look below
The first <HEAD> tag tells the browser that it is reading the head of a html document. The </HEAD> tag with the / in it tells the browser that the head part has ended
One more example
The first <title> tag tells the browser that it is reading the title of a html document. The </title> tag with the / in it tells the browser that the title has ended
The minimal webpage
Below is the code for a minimal webpage
make a webpage right now!
1. start up your notepad program or any text editor you have
2. now click the 'Highlight All' button above
3. now rightclick on the highlighted code
4. next select copy from the popup menu
5. now rightclick on your empty notepad page and selct paste from the popup menu
6. now, from notepad's toolbar click 'File' and then 'Save As...'
7. save your work as webpage.html
The .html is a file extension, its the bit that tells your computer that the file is a webpage *note: .htm is also acceptable.
look at your webpage
Now find the file you just saved, doubleclick on webpage.html and see your first webpage,
to return to this page after you have viewed your work just click the back button on your browser.
your page should look similar to this...
about the minimal webpage
<html>
<HEAD>
Nothing between the head tags is seen by people except the title
(if you look at the top left of your screen on your browsers titlebar you should see the title of this page 'html tutorial and examples, learn html')
there are lots of other things that we can put in the head section, like meta tags and javascripts but the only thing that goes in the head section of the page that need concern us now is the title
<title> my first web page </title>
</HEAD>
<body>
All the information that you want people to see goes between the body tags
</BODY>
</html>
formating the page
there are lots of html tags available for formatting a webpage
If we add the <CENTER> tag immediatly after the <BODY> tag then everything in the document will be centered, but remember to close the </CENTER> tag immediatly before the closing </BODY> tag
lets add a few line breaks too with the <BR> tag
°note the <BR> tag does not have a closing tag
<BODY>
<CENTER>
<BR>
<BR>
<BR>
This is my very first webpage, aint i clever?
</CENTER>
</BODY>
nesting tags
before moving on something should be said about nesting tags
the correct way to nest tags is like this...
<COLA><BUBBLEGUM></BUBBLEGUM></COLA> = correct
but you can expect allsorts of problems if you do this...
<COLA><BUBBLEGUM></COLA></BUBBLEGUM> = incorrect
how to put color on a webpage
all that is needed to change the background color of a webpage is to add the bgcolor attribute to the body tag in this example the bgcolor is set to pale blue (hex #0099FF), but feel free to pick a different color from the paintbox (opens in a new window)
for a list of named colors like red/blue click here (opens in a new window)
adding bgcolor to the body tag
the bgcolor can be added as a hex number
<body bgcolor=#0099FF>
or as a named color
<body bgcolor="blue">
change the text color
all that is needed to change the text color of a webpage is to add the text attribute to the body tag in this example the text is set to yellow (hex #FFFF00)
pick a different color from the paintbox (opens in a new window)
<
add a background image
it's just as simple to add a background image to the webpage all that needs to be done is add the background attribute to the body tag
<body bgcolor=#0099FF text="#FFFF00" background="bluetile.jpg">
you can save the image to disk if you want to see it tiled on your webpage
just rightclick on it and select 'save image as' from the popup
This is the blue tile, the bgcolor attribute is also included in the body tag. It is essential that the background color of the page is similar in color to the background image, because some users surf with images turned off.
If we ommited the bgcolor attribute users with images turned off would find reading yellow text on a default white background a dire strain
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'
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
heres some quick links to some useful tools.
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>
monospaced :
each letter uses the same amount of space iiiii
aaaaa
mmmmm
normal text :
letters use various amounts of space iiiii
aaaaa
mmmmm
preformatted text
use the <PRE></PRE> tags to render text exactly as it is written out in the source code
remember not to make lines of text too long when using the pre tag or users will be forced to scroll sideways
pre is a block level element.
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
More To Follow Check Back Soon
html stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages
what tools are needed to make a webpage?
all that is needed is 'notepad' and a second browser, notepad is a simple text editor in windows, click start on your taskbar then programs and then goto accessories, finally click notepad.
If you are using internet explorer then you will need a netscape browser to check your work
If you are using netscape then you will also need an internet explorer browser to check your work.
what does html look like?
the html language is made up of tags that are enclosed in angle brakets, a webpage is completly enclosed within the html tags.
most html tags work in pairs
The first <html> tag tells the browser that it is reading a html document. The </html> tag with the / in it tells the browser that the html has ended
Take a look below
The first <HEAD> tag tells the browser that it is reading the head of a html document. The </HEAD> tag with the / in it tells the browser that the head part has ended
One more example
The first <title> tag tells the browser that it is reading the title of a html document. The </title> tag with the / in it tells the browser that the title has ended
The minimal webpage
Below is the code for a minimal webpage
HTML Code:
<HTML> <HEAD> <TITLE>my first web page</TITLE> </HEAD> <BODY> This is my very first webpage, aint i clever? </body> </HTML>
1. start up your notepad program or any text editor you have
2. now click the 'Highlight All' button above
3. now rightclick on the highlighted code
4. next select copy from the popup menu
5. now rightclick on your empty notepad page and selct paste from the popup menu
6. now, from notepad's toolbar click 'File' and then 'Save As...'
7. save your work as webpage.html
The .html is a file extension, its the bit that tells your computer that the file is a webpage *note: .htm is also acceptable.
look at your webpage
Now find the file you just saved, doubleclick on webpage.html and see your first webpage,
to return to this page after you have viewed your work just click the back button on your browser.
your page should look similar to this...
This is my very first webpage, aint i clever?
<html>
<HEAD>
Nothing between the head tags is seen by people except the title
(if you look at the top left of your screen on your browsers titlebar you should see the title of this page 'html tutorial and examples, learn html')
there are lots of other things that we can put in the head section, like meta tags and javascripts but the only thing that goes in the head section of the page that need concern us now is the title
<title> my first web page </title>
</HEAD>
<body>
All the information that you want people to see goes between the body tags
</BODY>
</html>
formating the page
there are lots of html tags available for formatting a webpage
If we add the <CENTER> tag immediatly after the <BODY> tag then everything in the document will be centered, but remember to close the </CENTER> tag immediatly before the closing </BODY> tag
lets add a few line breaks too with the <BR> tag
°note the <BR> tag does not have a closing tag
<BODY>
<CENTER>
<BR>
<BR>
<BR>
This is my very first webpage, aint i clever?
</CENTER>
</BODY>
nesting tags
before moving on something should be said about nesting tags
the correct way to nest tags is like this...
<COLA><BUBBLEGUM></BUBBLEGUM></COLA> = correct
but you can expect allsorts of problems if you do this...
<COLA><BUBBLEGUM></COLA></BUBBLEGUM> = incorrect
how to put color on a webpage
all that is needed to change the background color of a webpage is to add the bgcolor attribute to the body tag in this example the bgcolor is set to pale blue (hex #0099FF), but feel free to pick a different color from the paintbox (opens in a new window)
for a list of named colors like red/blue click here (opens in a new window)
HTML Code:
<HTML> <HEAD> <TITLE>my first web page</TITLE> </HEAD> <BODY bgcolor="#0099FF"> This is my very first webpage, aint i clever? </body> </HTML>
the bgcolor can be added as a hex number
<body bgcolor=#0099FF>
or as a named color
<body bgcolor="blue">
change the text color
all that is needed to change the text color of a webpage is to add the text attribute to the body tag in this example the text is set to yellow (hex #FFFF00)
pick a different color from the paintbox (opens in a new window)
<
HTML Code:
HTML> <HEAD> <TITLE>my first web page</TITLE> </HEAD> <BODY bgcolor="#0099FF" text="#FFFF00"> This is my very first webpage, aint i clever? </body> </HTML>
add a background image
it's just as simple to add a background image to the webpage all that needs to be done is add the background attribute to the body tag
<body bgcolor=#0099FF text="#FFFF00" background="bluetile.jpg">
you can save the image to disk if you want to see it tiled on your webpage
just rightclick on it and select 'save image as' from the popup
This is the blue tile, the bgcolor attribute is also included in the body tag. It is essential that the background color of the page is similar in color to the background image, because some users surf with images turned off.
If we ommited the bgcolor attribute users with images turned off would find reading yellow text on a default white background a dire strain
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, 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
heres some quick links to some useful tools.
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>
monospaced :
each letter uses the same amount of space iiiii
aaaaa
mmmmm
normal text :
letters use various amounts of space iiiii
aaaaa
mmmmm
preformatted text
use the <PRE></PRE> tags to render text exactly as it is written out in the source code
HTML Code:
<PRE> .--, .-. __,,,__/ | / \-'` `-./_ | | `) \ ` `\ ; / , , | | / : O /_ | O .--;__ '. | ( )`. | \ `-` / | \ ,_ _.-./` / \ \``-.( / | `---' /--. ,--\___..__ _.' /--. jgs \ `-._ _`/ ' '. .-' ` ' . `` ' ; </PRE>
pre is a block level element.
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
More To Follow Check Back Soon
Comment