iamJohnnySam: Project Portfolio: September 2013

I found an old book in which I have written HTML codes that I used when I got started with web designing. So let me share the most basic codes that everyone should know to get started.

Creating an HTML Page

There are many software's that can be used to create HTML pages. For example using Adobe Dreamviewer you can type and make your webpage easily without having to worry about the code. Dreamviewer will automatically create the code for you. However if you want to learn how to use these codes and create a webpage manually all you need is a basic text editor like Windows Notepad. All you will need to do is to write your code in the text editor and save it as a .html file (example.html). You can then view your webpage by opening your file in a browser or re-edit by opening it with a text editor.

Header

<html>

This tag is used to tell the browser that the following code is HTML. The entire code for the web page is written in between <html> and </html> tags.
Note: Almost 90% of the tags needs to be closed when opened. Tags are opened by entering the name in between triangle brackets and they are closed by adding another tag at the end with a ‘/’ followed by the name of the tag. For example: <example> … </example>.

<head>

The head tag is used to access the head of the webpage.

<title>

The title tag is used to give the name of the web page or any other description on the title bar of the web page.
Example:

<html>
<head>
<title> Jonnytronics Webpage Example </title>
</head>
</html>

Body

<body>

This tag gives access to the body of the webpage. Almost all tags have different properties and they can be accessed by naming the property inside the tag.

Background Colour

Any colour can be used as a background colour on a webpage. This is done by the following property
<body bgcolor = “…”>
example: <body bgcolor = “#C0C0C0”> OR <body bgcolor = “Silver”>
The colour can be written in English or in Hexadecimal. Some example colours are given below.

Aqua - #00FFFF
Black - #000000
Blue - #0000FF
Grey - #808080
Green - #008000
Lime - #00FF00
Maroon - #800000
Navy - #000080
Olive - #808000
Purple - #800080
Red -#FF0000
Silver - #C0C0C0
Teal - #008080
White - #FFFFFF
Yellow - #FFFF00

Background Picture

<body background = “….jpg”>
Use this tag to add a picture as the background for your web page.
Note: The address to the picture can be given relevant to the location of the webpage or the full address to the image can be given.

Text Colour

The text colour for a webpage can be given by the following tag. The colour can can be chosen by typing the name of the colour or its hexadecimal value as in the table above.
<body text = “…”>

Page Margin

The page margin for a webpage can be set by the following tag. The amount of space for the margin is given by pixels or a percentage of the webpage.
<body leftmargin = “…”>

Example:
<html>
<head>
<title> Jonnytronics Webpage Example </title>
</head>
<body bgcolor = "Blue" text = "White", leftmargin = "100">
This is the body of the web page </body>
</html>

Headings

There are 6 different headings in html. <h1> is that first heading (or the heading with the largest font) while <h6> is the smallest size.

<h1> - 36px
<h2> - 24px
<h3> - 21px
<h4> - 18px
<h5> - 16px
<h6> - 14px

Headings can also be given different attributes such as align and colour.
For example:
<h1 align = “center”, color = “blue”> Jonnytronics </h1>

It is important to note that when the heading tag is closed, the browser will automatically move to the next like. Therefore there is no need to use a tag to move to the next line.

Line Break

This tag is similar to pressing the enter key when writing a normal document. Using this tag you can move to the next line and continue typing
The tag is written as <br> and there is no need to close this tag.

Paragraph

It is possible to write a continuous paragraph inside the tags <p> and </p>. Once the paragraph is grouped in between the tag properties can be given to the entire paragraph as a whole.

Comments

Just as in any other programming language, HTML too has comments. anything written inside the comment tags will not appear in the webpage. They are mainly used to give the reader of the bare code to understand what is going on in that section.

They can be written as 
Example:
<html>
<head> <title> Jonnytronics Webpage Example </title> </head>
<body bgcolor = "Blue" text = "White", leftmargin = "100">
This is the body of the web page
<h1 align = "left"> Heading 1 </h1>
<h2 align = "center"> Heading 2 </h2>
<h3 align = "right"> Heading 3 </h3>
<h4> Heading 4 </h4>

<p align = "right">This is a paragraph. The entire paragraph is right justified. Any properties given to the paragraph tag will affect the entire paragraph </p>

This is not written in a paragraph. <br> 

<br> Line break
</body>
</html>

Horizontal Line

The <hr> code draws a horizontal line across the webpage. The tag is like the <br> tag, it does not have a close tag.
This properties of this tag can be controlled by align, colour, width, size (this is thickness), etc. The width can be given in pixels or as a percentage of the webpage. The size is the thickness of the line and it is given in pixels.

<hr align = "center", color = "red", size = "1", width = "60%">

Formatting

<font>

The font tag can be used to change the font of the text enclosed if the font is different from the font used for the entire webpage.
The properties used for this font are: face, colour and size.
<font face = "Times new roman", color = "green, size = "35"> Example </font>

Other Formatting

<b> or <strong> - Text enclosed becomes bold
<big> - Text is big. If the tag is repeatedly used inside each other the size becomes bigger.
<small> - Similar to the <big> tag but makes the size smaller instead
<i> or <em> - Text enclosed becomes italic
<u> - Text enclosed becomes underlined
<s> or <strike> - Text enclosed are strike through
<sup> - Text enclosed are superscript
<sub> - Text enclosed are subscript
<center> - Text enclosed are centred

Division Tag

This tag is used to create different segments on the webpage. The tag is written as <div>. It accepts only position attribute to position itself on the webpage.

Anchor

An anchor tag is used to create a link within another word. the tag is written as <a> and it accepts the attribute href to embed the link

<a href = "www.johnsamarasinghe.blogspot.co.uk"> Click here to go to my website </a>

Frames

Frames are used to divide the webpage to view 2 or more webpages. The area is separated by <frameset> tag. Using this tag the number and the size of columns can be set in percentages using the attribute cols. The number of columns do not have to be stated. The width of all the columns can be written one after the other.

Each individual frame is given the source by adding the <frame> tag within the <frameset> tag. The <frame> tag does not have to be closed. It accepts the attribute src to point to the webpage that needs to be displayed. Please see the example to understand the structure

<frameset cols="30%,50%,20%">

<frame src="example1.html">
<frame src="example2.html">
<frame src="example3.html">
</frameset>

The <frame> tag also accepts other attributes in addition to src.

name – name of the frame
scrolling – yes, no or auto
frameborder – 1 or 0
marginheight – height of top and bottom margins in pixels
marginwidth – width of left and right margins in pixels

Media

Images

Images are added using the <img> tag. There is no need to close this tag. This tag accepts the following attributes

src – location or image
width – width of image
height - height of image
border – 1 or 0 for presence of border
align - align of image
vspace- vertical space
hspace - horizontal space
alt – alternative text

Video

Video can also be added using the <img> tag. It has the following attributes

dysrc – location of video
width and height
border
align
vspace and hspace
start - set opening method as – File Open / Mouse Over
loop – Number of times to repeat

Embed

The <embed> tag can be used to embed flash files in to the webpage.
<object>
<embed src = "example.swf", height = "200", width = "200", alt = "Example Embed"> </embed>
</object>

Lists

Unordered lists

An unordered list is a list that has bullet points. This list is started by the tag <ul>. It accepts the attribute ‘type’ to insert the shape of the bullet point. The types are: square, circle, triangle and star

Once the list is started, each individual item on the list can be added by the <li> tag. This tag and the <ul> tag needs to be closed. It is also possible to change the bullet point in the middle of the list by adding the type attribute specific list item. The following item will return to the original type of the list.

<ul type = "square">
<li> Tea </li>
<li> Coffee </li>
<li> Water </li>
<li type = "circle"> Jug </li>
<li> Cup </li>
</ul>

Ordered lists

An ordered list is a numbered list. It has the tag <ol> and accepts the attributes type and start. Start is the starting point of the numbered list . The type can be given as the following:

1 - means 1, 2, 3, 4
A - means A, B, C, D
a - means a, b, c, d
I - means I, II, III, IV
i - means i, ii, iii, iv

Each item in the list is given in <li> tags and they have attributes: Value and type which can be used to change the normal count value of the list element

<ol type= "A", start = "2">
<li> Tea </li>
<li> Coffee </li>
<li value = "10"> Water </li>
<li> Jug </li>
<li type = "1"> Cup </li>
</ol>

Definition list

The tag for a definition list is <dl>. The definition terms within the definition are given by <dt> and the definition of the definition term is given by <dd>.

<dl>
<dt> Tea </dt>
<dd> A drink </dd>
<dt> Cake </dt>
<dd> A desert </dd> </dl>

Tables

A table is started by the <table> tag. This tag accepts the following attributes which are self explanatory or defined above.

width and height (pixels or percentage)
border (1 or 0)
bordercolor
cell padding
cell spacing
align
valign
backgroundcolor
background (image)

A table row is created by the <tr> tag and it accepts the attribute height. Once a table row is created, it can be filled with table columns <td> which accepts the attribute width. For each column the data can be added in between their tags.

<html>
<head>
<title> Jonnytronics Webpage Example </title>
</head>
<body>
<table align = "center", width = "60%", cellpadding = "0", cellspacing = "1" border = "1">
<tr>
<td align = "center"> Name </td>
<td align = "center"> Age </td> </tr>
<tr>
<td> John </td>
<td> 20 </td> </tr>
<tr>
<td> Matthew </td>
<td> 23 </td> </tr>
</table>
</body> </html>

Conclusion

I hope this small tutorial helped you in anyway if you are a complete beginner in HTML. If there are any mistakes that I may have mentioned in this article please let me know and I will immediately correct them. If you need advanced help please refer to other websites such as w3schools (http://www.w3schools.com/html/default.asp).

Thank you for reading

Electronic Projects

Monday, 23 September 2013

Basic HTML Codes Everyone Should Know