HTML Tutorial for laptops

This page gives a basic introduction and a few aids for creating HTML pages, pages created in the hypertext markup language that renders them published texts in Internet browsers like the one you're using to read this. At the bottom of this page is a color chart for help in choosing the colors of page or table-cell backgrounds, lines of text, or other components. This is an ongoing project; if you find it useful, please let us know. If you would like to see units on particular topics, please feel free to request them. I'm learning as I go, so may not be able to fill all requests, and it may take a while for some of them. Also feel free to request clarification if you like.

Jon Kennedy

Learning HTML is a valuable tool, and learning these building blocks will help you to construct your own website...so find some good HP laptop deals, and get started setting up your own website. This brings a great deal of satisfaction, knowing you've built something others will use under your own steam - it's also free, here on the Home Page if you have local links.

Basic structure

The basic building blocks of a web page are these:

 

<html>
<body>

</body>
</html>

These headers and footers can be entered (typed) in a plain ASCII editing program like Notepad, and read in a web browser like Internet Explorer or Netscape. If there's a browser on your computer, you can read html (hypertext markup language) code from any source, including your own hard disk or floppy; it doesn't have to come from the web or Internet. For example, your "web address" can be a file like a:\sampletext.htm. Your browser can also display any image in "gif" (pronounced like gift without the "t") or "jpg" (pronounced J-peg) using an "address" like a:\sample.gif or c:\images\sample.jpg. In between these page headers and footers can go a wide variety of texts, images, and multi-media content. Our purpose here is to introduce some of the most basic of these and to give reminders of some of the often-used layout tools. Here are the most common headers and text formats.

This hypertext markup in ASCII
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

renders this in the browser
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<P>This is the basic paragraph opening and closing HTLM code.</p>

<P>When you use the closing code </p> the browser puts a line space between your paragraphs.</p>

This is the basic paragraph opening and closing HTLM code.

When you use the closing code </p> the browser puts a line space between your paragraphs.

<P>To keep blocks of text together (without the extra line space) use <br> instead of </p><br>
<P>To keep blocks of text together (without the extra line space) use <br> instead of </p><br>
To keep blocks of text together (without the extra line space) use <br> instead of </p>
To keep blocks of text together (without the extra line space) use <br> instead of </p>
<hr>renders a horizontal rule
<hr width=80%> This allows you to control the width of the horizontal rule, using any percentage.
<hr width=70% color="FF0000"> This allows you to control the color (FF0000 is red), in Explorer only.
<H1>Heading 1</H1>

Heading 1

<H2>Heading 2</H2>

Heading 2

<H3>Heading 3</H3>

Heading 3

<H4>Heading 2</H4>

Heading 4

<H5>Heading 5</H5>
Heading 5
<H6>Heading 6</H6>
Heading 6
<b>makes any text bold</b>

<i>makes any text italic</i>

<b><i>bold italic text</i></b>

Note that some earlier browsers require that ending markup be made in reverse order from opening markup, thus <b><i></i></b>.

makes any text bold

makes any text italic

bold italic text

<blockquote>This code enables you to indent text from left and right, making it more readable than if it goes all the way to your browser's outside margins.</blockquote>

This code enables you to indent text from left and right, making it more readable than if it goes all the way to your browser's outside margins.

<blockquote><blockquote>You can create "indents within indents" by using additional <blockquotes>. </blockquote></blockquote>

You can create "indents within indents" by using additional <blockquotes>.

<ul>This code indents text from the left, but doesn't indent from the right.</ul>

<ul><li>Add <li>and the program puts a bullet at the beginning of each paragraph thus coded.

  • This code indents text from the left, but doesn't indent from the right.


  • Add <li>and the program puts a bullet at the beginning of each paragraph thus coded.
<ol><li>This code indents and numbers paragraphs.

<li>This code indents and numbers paragraphs. The html automatically adds the numbers; don't type them.

<li>At the end, type </li></ol>

  1. This code indents and numbers paragraphs.
  2. This code indents and numbers paragraphs. The html automatically adds the numbers; don't type them.
  3. At the end, type </li></ol>

To return to the original indentation levels, you need the same number of </blockquote>'s or </ul>'s at the end as you have inserted <blockquote>'s or <ul>'s in the body thus far.

Most html codes open with <> and end with </>. However, later versions of the program can read some examples of either one as standing for both. For example, you can create a paragraph with either <P> at the beginning of </p> at the end; you don't need both in current versions of html.

<P align="right">This code aligns your paragraph to the right.

<P align="center">This code centers your paragraph.

<center>This code will also center any text.</center>

<&#151;>This code displays a dash (used in typeset text instead of two hyphens)

<&nbsp;>This code creates a non-breaking space, handy for indenting second lines of text (hanging indents); also for forcing type to any particular location.

This code aligns your paragraph to the right.

This code centers your paragraph.

This code will also center any text.

This code displays a dash (used in typeset text instead of two hyphens)

 This code creates a non-breaking space, handy for indenting second lines of text (hanging indents); also for forcing type to any particular location.

Working with images (photos and graphic art)

To insert an image so as to be "wrapped around" by a paragraph, without using a table layout, use this html code string:

<img src="sample.gif" align="left">This puts an image entitled "sample.gif" at the left side of your paragraph, at the beginning. The text wraps around it to the left.

<img src="sample.gif" align="right">This puts an image entitled "sample.gif" at the right side of your paragraph, at the beginning. The text wraps around it to the right.

Putting the code in the middle of the paragraph can make it <img src="sample.gif" align="left">wrap top and bottom around either left or right side, as you designate. This shows the text wrapping around both top and bottom. This shows the text wrapping around both top and bottom.

Sizing your images. It's always a good idea to include the size of your images. This way the browsers of those visiting your page know how much space to leave for the images, and can load the text around those spaces, making the loading appear to occur faster. This is the html string with the size of the sample gif included:
<img src="sample.gif" align="left" width="28" height="30">

Putting margins on images. To avoid having your text come all the way to the very border of your image, add a space element to the string, hspace for horizontal, vspace for vertical:
<img src="sample.gif" align="left" width="28" height="30" hspace="5" vspace="5">

"5" as used here indicates five pixels, a unit of measurement used in screen monitors.

To insert an image so as to be "wrapped around" by a paragraph, without using a table layout, using this html code string renders it thus:

This puts an image entitled "sample.gif" at the left side of your paragraph, at the beginning. The text wraps around it to the left.

This puts an image entitled "sample.gif" at the right side of your paragraph, at the beginning. The text wraps around it to the right.

Putting the code in the middle of the paragraph can make it wrap top and bottom around either left or right side, as you designate. This shows the text wrapping around both top and bottom. This shows the text wrapping around both top and bottom.

Sizing your images. It's always a good idea to include the size of your images. This way the browsers of those visiting your page know how much space to leave for the images, and can load the text around those spaces, making the loading appear to occur faster. This is the html string with the size of the sample gif included:
<img src="sample.gif" align="left" width="28" height="30">

Putting margins on images. To avoid having your text come all the way to the very border of your image, add a space element to the string, hspace for horizontal, vspace for vertical. In this case no "vspace" is required as the image is smaller than two lines of text. Note the improvement created by the "hspace," however.

"5" as used here indicates five pixels, a unit of measurement used in screen monitors.

 

Some color codes

Ever wonder what comes between ffffff and 000000? (Note, there are many others besides this range.)

ffffff
snow
white
ffffcc ffff99 ffff66 ffff33 ffff00 ffccff ffcccc ffcc99 ffcc66 ffcc33 ffcc00 ff99ff ff99cc ff9999 ff9966 ff9933 ff9900
pumpkin pie
ff66ff ff66cc ff6699 ff6666 ff6633 ff6600 ff33ff ff33cc ff3399 ff3366 ff3333 ff3300 ff00ff ff00cc ff0099 ff0066 ff0033 ff0000
fire
engine
ccffff ccffcc ccff99 ccff66 ccff33 ccff00 ccccff cccccc cccc99 cccc66 cccc33 cccc00 cc99ff cc99cc cc9999 cc9966 cc9933 cc9900
khaki
tan
cc66ff cc66cc cc6699 cc6666 cc6633 cc6600 cc33ff cc33cc cc3399 cc3366 cc3333 cc3300 cc00ff cc00cc cc0099 cc0066 cc0033 cc0000
Stanford
cardinal
99ffff 99ffcc 99ff99 99ff66 99ff33 99ff00 99ccff 99cccc 99cc99 99cc66 99cc33 99cc00 9999ff 9999cc 999999 999966 999933 999900
olive
drab
9966ff 9966cc 996699 996666 996633 996600 9933ff 9933cc 993399 993366 993333 993300 9900ff 9900cc 990099 990066 990033 990000
dry
sangria
66ffff 66ffcc 66ff99 66ff66 66ff33 66ff00 66ccff 66cccc 66cc99 66cc66 66cc33 66cc00 6699ff 6699cc 669999 669966 669933 669900
green
pea
6666ff 6666cc 666699 666666 666633 666600 6633ff 6633cc 663399 663366 663333 663300 6600ff 6600cc 660099 660066 660033 660000
Napa
burgandy

33ffff 33ffcc 33ff99 33ff66 33ff33 33ff00 33ccff 33cccc 33cc99 33cc66 33cc33 33cc00 3399ff 3399cc 339999 339966 339933 339900
Calif
green
3366ff 3366cc 336699 336666 336633 336600 3333ff 3333cc 333399 333366 333333 333300 3300ff 3300cc 330099 330066 330033 330000 close to black
00ffff 00ffcc 00ff99 00ff66 00ff33 00ff00 00ccff 00cccc 00cc99 00cc66 00cc33 00cc00 0099ff 0099cc 009999 009966 009933 009900 Irish
green
0066ff 0066cc 006699 006666 006633 006600 0033ff 0033cc 003399 003366 003333 003300 0000ff 0000ff 000099 000066 000033 000000 night black


Nanty Glo Home Page    |    Forum Home    |    News Page     |   Links    |    Resources

    © Jon Kennedy 1997, 2011