Basic HTML Codes knowledge base

Here you will find some very useful HTML Codes knowledge...

Even using a WYSIWYG (what you see is what you get) application to build your website you will find yourself working with HTML codes. Especially following some of the tutorials you find on this website or in the WPFAQ.org E-Book which are a little more advanced. But don't be scared! Here I will discuss some basics about HTML and tell you where to find certain informations when needed.

Before we start I think it is important for you to know that when you open a certain tag you also have to close it. A tag is a metadata (data about data) used to describe an element. For example a <div> is closed with </div>, <strong> with </strong>, <iframe> with </iframe>, ... this is true for most codes but not for some other few codes like <img> and <br> (you will read what these codes are used for further on).

Let's have a look at some HTML elements and how to use them. If something's not explained now it will certainly be explained further on.

Chapter 1: Main elements and CSS styling basics
Chapter 2: More about stylings
2.1 Color codes and designations
2.2 Width and height
2.3 Fonts and text formatting
2.4 Backgrounds
2.5 Borders
2.6 Links
Chapter 3: More about codes
3.1 Links
3.2 Images and image-links
3.3 iFrames
3.4 Line breaks
3.5 Special characters and punctuation in codes
3.6 Multiple spaces
Chapter 4: Positioning, restraining, adding captions to images or else and more...
Chapter 5: What you have to pay attention to when working with codes

Chapter 1: Main elements and CSS styling basics

<div>My content</div> is a container
<p>My content</p> is used to define a paragraph
<span>My content</span> is mostly used to define a particular style for a few words within a sentence

each of these elements can have an id and a class (can have doesn't mean they have to) for example:

<div id="container" class="myclass1">My content</div>

The difference between an id and a class is that an id is specific for a single element whereas a class may apply to multiple elements at the same time on the same page.

To define the appearance of an element you can either put a style within the element like

<div style="font-family: Arial; font-size:12px; color:#000000;">My content</div>

or use an id and style like this:

<style type="text/css">
#container {
font-family: Arial;
font-size: 12px;
color: #000000;
}
</style>

<div id="container">My content</div>

The class works exactly the same but instead of # before the label/name you type a . (dot) like this:

<style type="text/css">
.container {
font-family: Arial;
font-size: 12px;
color: #000000;
}
</style>

<div class="container">My content</div>

Chapter 2: More about stylings

In Chapter 1 we've seen how styling works. We've seen that we can either use id, class or put the style right into the element. Of course we can also put some of the specifications in the class, some in the id and in the style. Now let's see what we can control and how.

2.1 Color codes and designations

There are various ways to define colors on the web. The most used one is a # followed by a 6 character alpha-numeric code. #000000 stays for black, #ffffff for white, ... codes for other colors are found here: http://www.w3schools.com/html/html_colors.asp or http://www.computerhope.com/htmcolor.htm

Otherwise colors are sometimes also defined by just typing in their names like "black", "white", ..., "transparent" may also work sometimes.

Another way is using RGB Decimal designations like (204, 204, 204) for light-gray. In that case refer to http://html-color-codes.com/rgb.html

2.2 Width and height

width:300px; of course defines the width
height:180px; of course defines the height

These can also be applied to a <div> as of Chapter 1.

2.3 Fonts and text formatting

font-family: Arial, Sans; defines the font, have a look at http://www.fonttester.com/font_test.html for the possibilities. Instead of Sans you may also use Sans-Serif depending on whether you prefer with or without serif.
font-size: 13px; defines the size of the text. The higher the number the bigger the size of the displaying text. You can also replace px with pt.
line-height: 30px; can be used if you want to increase the spacing between the lines.
font-weight: bold; or none
font-style: italic; or none
text-decoration: underline; of course causes the text to be underlined. You can also choose overline or line-through or combine overline and underline as text-decoration:overline underline;
color: #000000; is used to define the color of the text by changing the color designation as explained in the previous subchapter
text-align: justify; defines the alignment of the text in the element. In the justify case the text takes the width of the element if possible, left aligned to the left, right aligned to the right, center centered.

These can either be applied to a <div>, <p> or <span> as seen in Chapter 1. However text-align will not work in <span>.

For bold or italic within a text you may also use <strong>Your text</strong> (bold) or <em>Your text</em> no need to put up a <span> each time. To center something on a page you may also use <center></center> instead of using a div with text-align set to center.

2.4 Backgrounds

background-color:#ffffff; To change the background color, change the color designation as of Color-codes and designations
background-image:url('URL to your image'); If you want to use an image as a background paste the URL replacing the URL to your image in the code. To know how to upload an image and find out its URL read How to upload files.
background-repeat:repeat; when using an image as the background you also have to specify whether you want to the image to repeat in this case horizontally and vertically or repeat-x if you want it to repeat only horizontally, repeat-y if you want it to repeat only vertically or no-repeat if you don't want it to repeat at all.

If you want to have a background being transparent use
background-color: transparent;
however note that this may not always work. Just try to see whether it works or not.

Note that this styling can also be applied to a particular <div>, <p> or <span> as of Chapter 1.

2.5 Borders

Stylings for borders can be applied to images, image-links, <div>, iFrames, ...

All you have to do is add the following code to the styling:

border:0px solid #ffcc00;

Where the 0px defines the width of the border, solid defines the style of the border, have a look at this page: http://www.w3schools.com/css/tryit.asp?filename=trycss_border-style for more and last but not least #ffcc00 defines the color. Example for images:

<img src= "URLofTheImage" style="width: 200px; height:80px; border:0px solid #ffcc00;">

2.6 Links

<style type="text/css">
a:link {color:#0000FF;text-decoration:underline;}
a:visited {color:#0000FF;text-decoration:underline;}
a:hover {color:#0000FF;text-decoration:none;}
a:active {color:#000000;font-weight:bold;text-decoration:none;}
</style>

First is for unvisited links, second visited links, third when pointing the mouse over it, fourth for the current page.

What if I want to define a particular setting which applies only to some links?

In that case you can use a class as we've seen before...

<style type="text/css">
a.mylink:link {color:#0000FF;text-decoration:underline;}
a.mylink:visited {color:#0000FF;text-decoration:underline;}
a.mylink:hover {color:#0000FF;text-decoration:none;}
a.mylink:active {color:#000000;font-weight:bold;text-decoration:none;}
</style>

<a href="http://yourdomain.com" target="_top" class="mylink">Link text</a>

Chapter 3: More about codes

3.1 Links

Link code:

<a href="URL of the page to open" title="Title of the link" target="_top">Link text</a>

In some codes you have to use apostrophes/single quotes ' instead of quotes " when adding a link code. Hence use:

<a href='URL of the page to open' title="Title of the link" target='_top'>Link text</a>

URL of the page to open is the web address where you want the link to point to
Title of the link is what displays when pointing the mouse over the link
target="_top" means that the page will be opened in the same window, replace _top with _blank for the link to open in a new window
Link text stays for the text displaying as a link.

3.2 Images and image-links

Code to add an image:

<img src="URLofTheImage" alt="What the image is about" style="width:200px; height:500px;">

where URLofTheImage has to be replaced with the URL of the image.
Replace What the image is about with a few words to say what the image depicts. This is especially helpful because search engines can't look at the image to see what's on it so you have to tell them.
I added the style into the image code because that's the way I like it to be but of course if you have various images you want to have the same size you can also use a class as we've seen in Chapter 1.

If you want to have an image linking to a page just combine the code for links with the code for images and replace Link text with the code for images. So you get:

<a href="URL of the page to open" title="Title of the link" target="_top"><img src="URLofTheImage" alt="What the image is about" style="width:200px; height:500px; border:0px;"></a>

I added border: 0px; to prevent the image-link from being surrounded by an ugly blue border in some browsers like Firefox or Internet Explorer.

3.3 iFrames

An iFrame is used to embed a page into another page. Not good for search engines since they don't see the content of the iFrame as part of the page you add the iFrame to.

<iframe src="http://iwebfaq.org/site/iWeb_iframe_2.html" style="width: 350px; height: 200px;" scrolling="auto"></iframe>

You can add a border if you want to. Setting scrolling to auto results in scrollbars being shown where needed, setting it to no results in no scrollbars, yes results in scrollbars always being shown.

3.4 Line breaks

<br> forces a line-break in your document. In other words the text you type after typing <br> will start on a new line.
Typing "Now I do understand some HTML coding<br>because I read this chapter" will display as

"Now I do understand some HTML coding
because I read this chapter"

thanks to the <br> tag even if it's written on the same line. You can repeat the tag to create empty lines (<br><br>). You can also use them between two images to display them one above the other, between videos and wherever you want.

3.5 Special characters and punctuation in codes

When typing in some text content in a code letters like ä, é , ü , è, and other special characters like punctuation !, ?, :, ', and so on usually need to be typed in as their html codes to display correctly.

This is especially true for single quotes/apostrophes ' and quotes " since just typing them in could cause some intermingling issues with the code itself and cause it to not work properly.

A list of these codes is found at http://www.w3schools.com/tags/ref_entities.asp

Also some codes do not allow you to use tab/return key since it breaks the code and it won't work anymore. In general you have to use the <br> tag to have text or other content starting on a new line when using codes.

3.6 Multiple spaces

For multiple empty spaces add series of

&#160;&nbsp;

which equals two spaces.

Chapter 4: Positioning, restraining, adding captions and more...

Basically an object appears where you add its code.

Working with HTML it's sometimes good to know how to define the position of a div which is done with the following code:

<div style="position:relative; top:280px; left:20px; z-index:1;">
Your content
</div>

This way the content of the div will display at 280px from the top of the div containing it and at 20px from the left of div containing it. When people scroll the page the div scrolls too.

Instead of position:relative one could also write position:absolute in that case the div will display at 280px from the top of the window and at 20px from the left of the window. It doesn't move when resizing the window which causes overlapping.

The z-index parameter is used to define what displays in front of what. Increase the number to bring it forward, decrease it move it back.

To create some free space around an object you may use the margin parameter like in this example:

<div style="margin: 0px 0px 0px 0px;">
Your content
</div>

First parameter is for the room between "the top" of the object and whatever is above it, second "on the right", third "at the bottom" and the latter "on the left". This may also be applied to images to create a border around it.

To restrain content you may enclose it in a div with a defined width.

Adding captions to images or else

<div style="width:300px; height:400px; text-align:center;">
<img src="http://URLtoTheImage" style="width:270px; height:200px;"><br>
<span style="font-family: Arial; font-size: 10px; font-weight: none; color:#000000;">
This is my caption
</span></div>

As you see there's a div to create the needed room for the image and the caption. The image and the caption are centered in the div by the text-align:center there's the image code to add the image and define its size and there's a span to define styling for the caption's text. If you don't want the caption to be centered you can add a text-align here right or left. The
is used for the caption to display under the image.

Also have a look at:
- Columns
- Wrap text around objects
- Floating menu (or float anything else)

Chapter 5: What you have to pay attention to when working with codes

It is important to note that quotes don't equal quotes. If you were to use curly quotes (sometimes also referred to as smart quotes or intelligent quotes) in a code instead of quotes the code won't work anymore. Some text editors use curly quotes by default hence you have to pay attention to what quotes are being used.

In some codes you have to replace quotes " and/or single quotes/apostrophes ' with the appropriate HTML code in your content to be used in a code to not break the code since the code itself is using them and they have a different meaning in the code.

Often if a code doesn't work it's because you erroneously deleted a quote " or a < or a > or something which breaks it or because a div which was opened wasn't closed </div> or similar. To find what is wrong it is sometimes easier and faster to rebuild from scratch.

Also read the "Special characters and punctuation in codes" chapter on this page.

That's it. You may want to try out code on this page. Enter the code in the left part of the page, click on the "Edit and Click me" button to see the result.

Also read the "Coding your own page" page for more informations on how to use codes. Read the Basic web knowledge page for what concerns uploading the files to your server and defining the right paths.


This FAQ is also discussed in my WPFAQ.org E-Book (sample)


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -




Now share it…

Share

Comments are closed.