Re: MY frist html - computer science class student

Hi Jasmine,

While HTML Tidy is not in the business of 'teaching'
HTML coding, here are some quick pointers...

A Basic HTML file.

a. This will usually commence with a doctype. The
simplest is <!DOCTYPE html>

b. Then the HTML block will commence -
<html>
  lots of stuff
</html>

c. Now within that <html> to </html> block there will
usually be two other blocks -
<head> to </head>
and
<body> to </body>

The things in the `<head>` will not be displayed.

The `<body>` contain the visible stuff...

So taking your sample, and putting things in their right
place... and note `<!-- to -->` is a comment only as
it does nothing but give information...

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teen fasion for the streets</title>
<style>
body  { background-color: pink; }
</style>
</head>
<body> <!-- notice body will now take the above style -->
<!-- this will be the main visible header -->
<h1>swag clothing for teen</h1>

<table>
<!-- notive the background of the columns will change -->
<colgroup>
   <col span="2" style="background-color:yellow">
   <col style="background-color:blue">
</colgroup>

<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>

<tr>
<td>3476896</td>
<td>My first Html</td>
<td>$53</td>
</tr>

</table>

<p>Fashion have ... etc etc etc</p>

<!-- not the difference default sizes, style of these -->
<h2>swag clothing for teen</h2>
<h3>swag clothing for teen</h3>
<h4>swag clothing for teen</h4>
<h5>swag clothing for teen</h5>
<h6>swag clothing for teen</h6>

<!-- of course I do not have an image, so I would just have a blank square
      but because I added an alt="desc" attribute, that will be shown 
instead.
      All img elements should have an alt description, which
      blind people will hear spoken by their talker s/w -->

<img src="sneakerweges.Jpg" alt="sneaker wdges image" border="1" 
width="150" height="50">

<p align="right">Last para</p>
</body>
</html>
```

Now notice I have also made some small important 'corrections'
in what you wrote, like in the body style statement I added
a colon after 'background-color:', etc...

Writing HTML is like writing CODE - every character can
count... sometimes adding a space, or closing the `<style>`
block, which should be within the `<head>` block with
`</style>` can be VERY important...

It takes some time to get used to **ALL THESE RULES** ;=))

Copy my above modified document out to your notepad, save
it as a html file, and load it into a browser - you should
see the nice effects...

While not particularly associated with the W3C, the
W3school - http://www.w3schools.com/ - shows lots of
examples, and you can experiment online... and there are
many others...

And while notepad is a simple editor, there are some good
free editors out there that will help you write good HTML.

Have lots of FUN ;=))

Regards,
Geoff.

Received on Monday, 13 February 2017 20:20:26 UTC