HTML: basic geekyness – Part 2


Time for part 2 of my HTML introduction.

I hope everything in part one was clear for you. If not send me a mail or a comment.

For now I will be using the code I started writing last time. Being as followed:

<HTML>
<HEAD>
<TITLE>Sharp’s tutorial</TITLE>
</HEAD>
<BODY>
<H1>This is a heading</H1>
<font> This is normal text</font>
</BODY>
</HTML>

Alright, you now are (or should be :P) familiar with container tags. Important to know is that some container tags can have options.
Let’s take the BODY container tag as example.
You can, if you like, adjust a few things with the options of the body element.
Here are a few available options:
– Background: changes the background of your webpage (you can use a picture or something like that)
– Bgcolor: changes the color of the background of your website
– Bgproperties: this defined if the background should scroll or not (can be handy when you are using a picture)

Yes, there are more options for this container, but it would be almost impossible for me to describe every possible option of every possible container. You can easly google the container you want to use for more options.

Now, let’s change the background color of our webpage. In order to do so we will need to use the property bgcolor of the body element.
The syntax for using options in every container is simple, after the name of the tag you just type the name of the option followed by = .
For example:

<BODY bgcolor=”green”>

Notice that I put green between quotes. This is not always needed, but teach yourself to do this no matter what. It will cause you less problems in the end.

Alright, the code now looks like this:

<HTML>
<HEAD>
<TITLE>Sharp’s tutorial</TITLE>
</HEAD>
<BODY bgcolor=”green”>
<H1>This is a heading</H1>
<font> This is normal text</font>
</BODY>
</HTML>

The page now looks like this. Turtle green, cowabunga dude!

And my code:
Now there is something very important you should know when using colors. And you will use colors a lot.
There are 2 ways of defining colors in html. Just by saying which color you like.
As we just did in the example above. Or defining them by using an hexadecimal code. And I suggest you use the second method. This is the safest option. Not all browsers manage to show the “written” color correctly. I happens that when you type green, the browser actually shows grey… Strange, but true.

An hexidecimal color code always start with # and is followed by 6 digits.
Let’s change the code of our green background by an hexidecimal code. It will look like this:

<BODY bgcolor=”#347C17″>

The code will be like this:

<HTML>
<HEAD>
<TITLE>Sharp’s tutorial</TITLE>
</HEAD>
<BODY bgcolor=”#347C17″>
<H1>This is a heading</H1>
<font> This is normal text</font>
</BODY>
</HTML>

And the result will be exactly the same. There is more to be said about colors but let’s just keep it at this for now.
By the way, you can get hexidecimal colorcodes easly from the web. Here is a website that shows quite a lot of codes.

Let’s take a quick look at some properties of the font tag as well. Just to make the principle of the container tag options a little more clear.
Here are some options which are available:
– Size: this will change the size (which genius invented this?) of your text
– Color: make a guess
– face: this changes the font of your text. Use with caution though, if the font you are using is not available on the pc where the website is opened. The font will not show and replaced by something default.

Let’s do something special. I want to change the text on my website, but in such a way that the first letter of my sentence is large and a different color from my other text.
The code will (look a little confusing, admitted) as followed:

<font size=”7″ color=”#B40404″>T</font><font color=”#ffffff”>his is normal text</font>

Note that you can use more than 1 option per container tag.

Now, the result will look like this:
And my code:
And for those of you who want to leech on my code the easy way:
<HTML>
<HEAD>
<TITLE>Sharp’s tutorial</TITLE>
</HEAD>
<BODY bgcolor=”#347C17″>
<H1>This is a heading</H1>
<font size=”7″ color=”#B40404″>T</font><font color=”#ffffff”>his is normal text</font>
</BODY>
</HTML>

Cheapskates! ;-)

Alright, so far so good. This wasn’t so bad now was it?

Let me show you a few container tags that you will use often. Or at least I think you will use often.
Creating a hyperlink.
The containertag used for this is “a”.. Yes, indeed 1 letter… a.
In order to use this you will always need embed 1 option: href. This option will allow you to define the destination of the link.

For example:
<a href=”http://www.google.com”>link to google</a>

Close the containertag as you close every tag with a / in front of it.
The text you see between <a> and </a> is the text that will be clickable on your webpage. While I’m at it, I’m also going to show you an example of a container that does not need to be closed.

<br> this is break rule. Everything behind this container will go to the next line of the page. I used this to put the hyperlink below my other text.
My code looks as followed:
<HTML>
<HEAD>
<TITLE>Sharp’s tutorial</TITLE>
</HEAD>
<BODY bgcolor=”#347C17″>
<H1>This is a heading</H1>
<font size=”7″ color=”#B40404″>T</font><font color=”#ffffff”>his is normal text</font>
<br>
<a href=”http://www.google.com”>link to google</a>
</BODY>
</HTML>
The result looks like this:


Tadaaaa, one shining bright new link to google. You can force the link to open in a new window or the same window by using the option TARGET. Like this:

  • TARGET=”_top”
  • TARGET=”_self”
  • TARGET=”_parent”
  • TARGET=”_blank”

Either one of those 4.

I’ll show you something a little more advanced the next time!

Advertisements

5 thoughts on “HTML: basic geekyness – Part 2

  1. Pingback: HTML: basic geekyness – Part 3 « Tech-o-rama

  2. Pingback: HTML: basic geekyness – Part 4 « Tech-o-rama

  3. Pingback: CSS: The basics part 1 « Tech-o-rama

  4. Pingback: Advanced webcoding: Javascript – Part 1 « Tech-o-rama

  5. Pingback: Advanced webcoding: PHP – Part 1 « Tech-o-rama

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: