HTML Basics.

Something that is really starting to worry me is how little I understand about HTML and the creation of websites. Once I finally got my head around how the simplest of tags worked, I'm then barraged by lots more in this weeks class tutorial.
Due to this I have decided to dedicate a full night to learning HTML in an effort to catch up to pace in class.

Firstly in following a quick class tutorial, I was to set out some simple text wrote out in Notepad, and arrange it in HTML so it appeared correctly in paragraphs with headings and such, but also to add an image.
Here is the web page after I added some HTML:

(click to enlarge)

And here is the  HTML coding language I wrote for it:

(click to enlarge)

Now obviously the page looks very bare and extremely ugly, this is just because I was seeing exactly what the different  HTML tags do and separated them so I knew what effected which portion of the page and text.
I will go over some of the new tags and elements I learned this week:

The most obvious thing I learnt is that websites use something called "External Style sheet's", and these style sheets effect the colour, layout and general rules of a  HTML code document and the final look of the web page. So basically I have to have two documents open, one to write the content of the web page (HTML section), and another to decide the colours, sizes, positions and general feel for the web page (Style Sheet section).

Below is the Style Sheet I used for my web page:

As you can see in this screen shot:

(click to enlarge)

h1{  (to open and state it is only to apply to main headings )

 border-style:solid; (created the border around the heading)

 border-color:red; (sets the border color)

 color:blue; (colour of text)

    font-size:50pt; (size of font used)

 text-align:center; (text position)

 font-family:Arial, Helvetica, sans-serif; (font options available to use in order of preference)

 letter-spacing:5px (space between lettering)

}  (close rules)

The example of this is the main heading of the web page example, "Keith Richards", appearing with a solid red border, blue text and centre aligned.

em{

background-color:green;

}

Anything contained within <em> and </em> in the HTML section will appear with a background colour of green. 

For example, "Guitar" and Keith's date of birth have a <em> applied to it in the HTML image example, so that appears with a green background in the web page example.

The problem with applying rules to just "em" or "h1" in a style sheet is that it will effect every "em" or "h1" throughout the page, and this is sometimes not the desired outcome.

To avoid this more  tags can be added to the same line, so refinements can be made:

h2 em{

background-color:yellow;

}

This can be seen in my Style Sheet image example, or the web page image, where ""Band Member" appears with a background of yellow and also with emphasis placed on it.

What this does is make sure only headings (h2) with "em" nested inside them will have a background colour of yellow, making it easier to change one part of a web page, but not other sections with  just "em" applied.

Next we can get slightly more complex by adding roll overs through HTML and Style Sheet coding.

This changes a texts color and can underline it when the user hovers over the text with the cursor.

a{ (states an attribute is going to be used)

text-decoration:none; (no underline appears)

font-weight:bold; (standard bold appearance)

color:red; (colour before cursor rolls over text)

}

The above section announces the default appearance of text when the user is not hovering over the text.

a:hover{  (says what the attribute should do, in this case change when hovered over)

text-decoration:underline; (places an underline when the user rolls over the text)

color:blue; (changes colour when the user rolls over the text)

}

The above slightly changes the text.

Now that has been applied in the Style Sheet, we can donate what text will change appearance when rolled over by going into the HTML section and typing <a>Your Custom Text</a>.

You can assign "Class's into elements, for example:

<h3 class="purple">Purple Class</h3>

So the section that reads "Purple Class" will appear in purple, like in my web page example.

To give the "purple" an actual purple colour, we must do that in the style sheet like so:

.purple{color:purple}

Basically the  selector "." before "purple" states that is is looking for a class, so anything wrote after <h3 class="purple"> will appear in purple because the colour has been set to purple in the style sheet section.

So it is a short way of assigning colour to text, simply by putting "class="purple"> in between tags such as <p> and </p>.

Another simpler example:

<h1 class="Benji">Your Custom Text</h1> in HTML.

and

.Benji{color:yellow} in the style sheet.

This would cause "Your Custom Text" to appear in yellow, because we  have assigned "Benji" with a yellow in the style sheet.

A similar method is assigning ID's like so:

<p id="text">Test</p> in the HTML section.

and

#text{color:red} in the style sheet section.

The subtle difference is that ID's are linked to "#" selectors, instead of "."

This would cause "Test" to appear in red as we set its colour in the style sheet.

Following a pretty intense lesson I seem to be very slowly grasping the rules and methods that are required to go into a web page. Because this module is the one I lack most of my skill in and experience in, I am determined to ensure I spend at least an hour a day simply looking at new code variations or jumping into a web site creator such as Crimson Editor and learning via trial and error or online tutorials.

Thanks for reading!