HTML Tutorial: These Pages
|
|
HTML Tutorial: These Pages |
|
|
navbar banner |
index.html Introduction |
Start main Tools First HTML Why–index.html More–index.html |
Poetry Text Lists Headings and Rules Character Entities Start–index.html |
Links Colors Others |
<a href="html-tutorial-tools.html" target="html_tutorial_main">
Tools
</font></a><br>
<a href="html-tutorial-first-html.html" target="html_tutorial_main">
First HTML
</font></a><br>
<a href="html-tutorial-index.html" target="html_tutorial_main">
Why index?
</font></a><br>
target= is needed because we want the pages to launch into the appropriate frame.
The first three use target=_top, to clear the frames. The index.html and introduction pages don't use frames. The Start page creates the framesets and opens the navbar, banner and main pages.
Why the surrounds? Try hovering over the navbar's items and you'll see what it does.
The Advanced topics are inside a borderless table. Here's what it looks like with the border turned on:
|
<table border=0 width='100%'> <! indent advanced topics a wee bit>
<tr>
<td width='5px'> </td>
<td>
Advanced<br>
<a href="html-tutorial-slick-tables.html" target="html-tutorial-main">
Slick Tables
</font></a><br>
|
<p align=right> <font size='-1'> ©2008, Martin Rinehart </font></p>
That left blank lines between each line, taking too much height. The table works better. (Professional web designers would use CSS styles to precisely position each element. I don't have the patience.)
|
Are you here because you don't know HTML but you want to create a web page or maybe just spruce up your blog posts? You're in the right place. You'll be writing HTML in the next five minutes. You'll be pretty good in an hour.
Lets start with a quick introduction. |
| Introduction |
|
The "21st century? That's done with superscript (<sup>) and end superscript (</sup>) tags, this way:
... in 21<sup>st</sup> century ...
|
|
HTML Tutorial: Start |
|
This is the code:
<table border=1 cellpadding=0 width='100%'><tr>
<td width='10%'>
<a href="html-tutorial-introduction.html" target="_top">
<img
alt="left-pointing arrow for navigating to previous page"
border=0
src="graphics/arrow-left.gif"
width='50px'>
</a>
</td>
<td>
<hr>
<h1 align=center>HTML Tutorial: Start</h1>
<hr>
</td>
<td width='10%'>
<a href="html-tutorial-tools.html">
<img
alt="right-pointing arrow for navigating to next page"
border=0
src="graphics/arrow-right.gif"
width='50px'>
</a>
</td>
</tr> </table>
Tables are normally formatted this way:
<table>
<tr>
<td>
cell content
</td>
<td>
cell content
</td>
...
</tr>
<tr>
...
</tr>
...
</table>
<table> <tr>
<td>
cell content
</td>
<td>
cell content
</td>
...
</tr> </table>
Beneath the title, there's another hidden table. Here I've turned the border on:
|
Last step before you write your first HTML!
Screwdrivers? No, we need software tools. You need three things:
|
That's painstaking work. I decided after just one that there would be no more.
The index.html file name is delimited with <em> and </em> tags. See the Styles topic for a description of how I defined this style using a stylesheet.
The code in the middle of the page is done this way:
<table align=center bgcolor='#f0f0ff' border=0 width='80%'><tr> <td>
<font color=gray>
<code><pre> <html></pre></code> </font>
<code><pre> <head>
<title>Easy HTML Tutorial</title>
</head>< </pre></code>
<font color=gray>
<code><pre> <body></pre></code></font>
</td> </tr> </table>
The code tag is normally defined to use some sort of monospaced font (all letters the same width). I've added the dark blue you see here using the stylesheet. Then I use the <pre> and </pre> tags to specify preformatted areas (HTML: don't you change a thing!). It was a lot of work just to show the user exactly what the result should be.
I went to a lot of trouble here because it would be your first edit inserting actual HTML tags. I didn't want you to be able to get it wrong. This would be an important confidence-builder if it works.
Note the idiom used for a single-cell table.
The screenshot is centered as described in the Images topic.
If you left-align a table, text will flow around it. But there will be zero pixels between the table and the text, which I think is too little. So here's the table-within-a-table trick:
|
Note that it's the outer, invisible box that you need to left-align.
The text box was separated from the text by the box-within-a-box technique described in the More–index.html page.
The screenshots are centered as descibed in the Images topic.
The screenshots are centered as descibed in the Images topic.
This is the code that lays out the boxes of HTML and result:
<table align=center border=0 width='500'> <tr>
<td>
<table bgcolor='#f0f0ff' width='200'> <tr> <td>
<center><b>HTML</b></center>
<code><pre>
<ul>
<li>Tom</li>
<li>Dick</li>
<li>Harry</li>
</ul>
</pre></code>
</td> </tr> </table>
<td>
<table bgcolor='#f0f0ff' style='height:100%' width='200'> <tr> <td>
<center> <b> In Browser </b> </center>
<ul>
<li>Tom</li>
<li>Dick</li>
<li>Harry</li>
</ul>
</td> </tr> </table>
</td>
</tr>
</table>
<, not the less-than symbol.
Puzzle: can you get the above line to appear in your browser from HTML you write? (Don't look at the frame source without giving it a real try.)
This is the code that generates the rules box:
<table bgcolor='#f0f0ff' border=1 width='100%'>
<tr> <td>
<center><code><hr></code></center>
<hr>
</td> </tr>
<tr> <td>
<center><code><hr width='80%'></code></center>
<hr width='80%'>
</td> </tr>
<tr> <td>
<center><code><hr align=center width='80%'></code></center>
<hr align=center width='80%'>
</td> </tr>
</table>
< in the HTML to get the less-than symbol rendered by the browser.
This code generates the headings box:
<table bgcolor='#f0f0ff' border=1 width='100%'>
<tr> <td>
<h1><code><h1></code> This is an <code>"H1"</code> Heading <code></h1></code> </h1>
</td> </tr>
<tr> <td>
<h2><code><h2></code> This is an <code>"H2"</code> Heading <code></h2></code> </h2>
</td> </tr>
<tr> <td>
<h3><code><h3></code> This is an <code>"H3"</code> Heading <code></h3></code> </h3>
</td> </tr>
<tr> <td>
<h4><code><h4></code> This is an <code>"H4"</code> Heading <code></h4></code> </h4>
</td> </tr>
<tr> <td>
<h5><code><h5></code> This is an <code>"H5"</code> Heading <code></h5></code> </h5>
</td> </tr>
<tr> <td>
<h6><code><h6></code> This is an <code>"H6"</code> Heading <code></h6></code> </h6>
</td> </tr>
</table>
I'm not going to show you the code for that character entity box. It's frighteningly complex. Kind of the Alfred Hitchcock movie of HTML.
If you've got to know, you know how to look at the frame's source. Don't say I didn't warn you.
The only trick to the color box is that some colors can be labelled with black letters, others need white. Here's the HTML:
<table align=center border=1 width='90%'>
<tr>
<td bgcolor=aqua width='12.5%'> aqua </td>
<td bgcolor=black width='12.5%'> <font color=white>black</font> </td>
<td bgcolor=blue width='12.5%'> <font color=white>blue</font> </td>
<td bgcolor=fuchsia width='12.5%'> fuchsia </td>
<td bgcolor=gray width='12.5%'> gray </td>
<td bgcolor=green width='12.5%'> <font color=white>green</font> </td>
<td bgcolor=lime width='12.5%'> lime </td>
<td bgcolor=maroon width='12.5%'> <font color=white>maroon</font> </td>
</tr>
<tr>
<td bgcolor=navy width='12.5%'> <font color=white>navy</font> </td>
<td bgcolor=olive width='12.5%'> olive </td>
<td bgcolor=purple width='12.5%'> <font color=white>purple</font> </td>
<td bgcolor=red width='12.5%'> red </td>
<td bgcolor=silver width='12.5%'> silver </td>
<td bgcolor=teal width='12.5%'> <font color=white>teal</font> </td>
<td bgcolor=white width='12.5%'> white </td>
<td bgcolor=yellow width='12.5%'> yellow </td>
</tr>
</table>
If you left-align an image, text flows around it. The text doesn't actually butt into the image as it butts into a table, so there's no need to play tricks like using an enclosing table.
The font tag table is similar to others that enclose HTML. You have to substitute < for the less-than symbol.
The HTML that generates the sixteen-color table is discussed in the Links portion of this page.
The tables are classic tables, without trickery.
The other pages contain no additional tricks.
The only thing left is to get your site launched in cyberspace.
| Let's Get on the Web! |