Web Design is easy: July 2012

THE RIGHT WAY TO USE THE INTERNET

THREE (3) AMAZING HTML BEGINNER LESSONS THAT WILL TURN YOUR LIFE AROUND

LESSON1

Buena Dias, welcome, my name is Samuel Aboki I will be your teacher and guide today, well am not here alone, here with me is Jatau a novice who is also interested in learning web design, he dreams of building the largest ecommerce site in the world.

If you think web design is hard, think again because somebody here is sharing the same feeling as you, but not me. I know and Think web design is easy. Very easy if you want me to say it again.

Get this fact;

Websites are made of web pages, and web pages are HTML documents.

What is HTML,

Hypertext Markup Language, it is use to make websites. It is made up of what is referred to as tags (e.g. ) which give certain attributes to text, images, and videos or any content that is intended to be added to the web or HTML document.

Now, let get started.

Create a folder in your document or your desktop, but preferably on your desktop, and name it “website”. If you don’t know how to create a folder do the following;

Right click on an empty space on the screen and select new>>folder then click on it. Type the name immediately or right click on the new folder and select rename to give it a name, let the name be website.

Let confirm other programs on your computer which will be used in the creating your website.

Start up your Notepad which you will use in typing the HTML tags. Click on Start Menu>>All programs>>Accessories>>Notepad to start u you notepad.

Fire up your browser (start up your browser) you will use browser to test or preview your HTML document, Mozilla Firefox or internet explorer. If you are using windows go to;

Click on the Start Menu>>All programs>>internet explorer, the same is applicable to Mozilla Firefox, opera browser, safari and so on depending on the installation destination.

Once you have this programs started be sure to toggle between-keep the windows of both document open.

CREATING YOUR FIRST WEBPAGE

Few minutes from now you will be the author of a web page, and in time become a web designer.

Type this into your Notepad;

<html>

</html>

Every HTML document has <html> showing that its starting a HTML document and </html> showing the document is ending. Without this two tags it will be doubtful to call this a web page or an HTML document.

<html> should be at the top of your notepad, meaning the beginning, there should be nothing before it.

</html> you will notice that this tag has “/” in it indicating the end of the document. Take note as this will be appearing is other tags too.

Add this to what you’ve typed so that it looks like this;

<html>

<head>

</head>

</html>

What we added here is;

<head></head> which indicate the starting and ending of the tag. This portion of the HTML document contains links, javascript codes, title of your web page and other external files that will be connect to the web page. Lets leave that apart for the mean time.

Lets go further a little and add the following so that our entire document will look like this;

<html>

<head>

<title> </title>

</head>

</html>

Take note that spaces between tags does not matter for instance;

<title> </title>

And this;

<title> </title> are the same. So don’t think because you spaced it will be different.

Ok now, what the title tag does to your document is it gives your web page a title. Don’t worry we will get to know that when we start testing the page.

Lets add the last but very crucial tag for this lesson. Which is call the body tag. Add to the existing document this tag so that we will have something looking like this;

<html>

<head>

<title> </title>

</head>

<body>

</body>

</htlml>

Crucial, that’s what I called it. A very important tag that display your effort to you and the world to see. In between this tag is where content that are supposed to be seen by people viewing you web page are located. But before you start displaying anything on your web page, lets take a trip back to title.

Now in between the title tag type something like this;

<title> My First web page</title>

Once you type this in your notepad click on file and select save; Be careful here as it could ruin all your effort.

If you select save, a dialog box will show up, in the filename type any name but for the sake of this document type “index.html”. the “.html” you added to the filename of your document indicates that it is a web document or HTML document. In the save as type or file type select all files. But before clicking save make sure select a location in this case the folder you initially created at the beginning of the lesson called “website”. Save the file inside this folder.

Now, go to the folder located on your desktop called website and open it make sure you minimize your notepad document and not close it. Well, before now there was nothing inside the folder, now there is a file that look like your browser icon, this is referred to as a web document, double click on it to see your creation.

You’ve Created your first page, but unfortunately there is nothing to behold inside your webpage, but if you look properly at the title bar you’ll see the web page title called “my first web page” written on it, well, thanks to you, welcome to the world of web builders. You should take a glass of water because we are just starting the fire.

LESSON 2

After a very hard work yet we’ve not seen anything on our web page. Something has to be done. What is jatau thinking;

Jatau “I think am tired of seeing blanks, I want to see something if at all I have any hope”

Well, he is right lets get started.

If you remember, our last HTML document contain the following;

<html>

<head>

<title> my first web page </title>

</head>

<body>

</body>

</html>

To get something visible, we need to add some text on the body tag. Add the following text to the body tag;

<html>

<head>

<title> my first web page </title>

</head>

<body>

This text is visible

</body>

</html>

If you have added the text (“ this text is visible”) to your web page, save and refresh the page. You should be able to see the text boldly written on your web page. Congratulations!

I want to stop written the whole HTML document so we could be faster and more explicitly concise. So instead of writing the whole tag, I will only specify the tag am referring to in the HTML document.

Add this to your document in the body tag;

<body>

This text is visible

This will also be visible

</body>

Save the document and refresh your web page. After refresh you will notice that you document appeared on 1 line instead of appearing in separate lines. But the truth is, in HTML document everything is done using tag, you can not just expect the second line when you didn’t specified that the next text should appear on the next line.

Introducing the Break Tag  

 

Function -the Break tag, it is use to create new line.

So introduce the break tag where you want the new line to begin. Introduce in the above document.

<body>

This text is visible  

This will also be visible

</body>

This will automatically create a new line in your document, so be sure to use it frequently when creating new line. Notice that the break tag does not have the closing tag,

Introducing underline , bold , Italic ,

Lets do some cool stuff here to this fonts in our web page;

function-bold text

Let starts by bolding text; to bold a text you will wrap the text or put the text in between the bold tag e.g. bold me now. let go back to our document.

<body>

This text is visible

This will also be visible

</body>

Save the page. When you preview this work you will discover that the text “This text is visible” will be bold. Let me take time to explain the issue of wrapping words in tags taking instances from the bold tag. The tag starts to bold from the point where it is introduce and stops when it sees the tag , if it doesn’t see the ending tag will continue to bold the document until it finds it or it will automatically bold the whole document or text after the beginning bold tag . so be sure to end it where you want the effect to stop.

For instance;

This text is visible

Only bold the word This text and will neglect the remaining.

If for instance;

This text is visible

This will also be visible

This will automatically bold the text to where the tag is, so be careful.

Function;- underlines text

To underline text just wrap the following text in the tag

<body>

This text is visible 

This will also be visible

</body>

Save and refresh your browser or web page.

Function;-Italicize text.

<body>

This text is visible

This will also be visible

</body>

Combining tags

Am sure you’ve seen where a text is underline, bold and italics, some might wonder Y it is like that. But you will have to be careful here. If do not combine the tags properly they might ruin your web page. There are rules in combining tags;

1. If you start a tag you must end it

2. if a tag is wrap within a tag the one that start first will end last, the one that start second will end second to the last and so on.

So this is what I mean;

Rule 1:

please bold me

It starts with and ends with . be sure to do that often, or you will remember internity.

Rule 2:

please make me bold and underline

It starts with and ends with , this tag and ends the as the second to the last as .

Note: that it can be interchanged e.g.

Please make me bold and underline

Just make sure that the one that comes first must end last and it goes on like that.

Check this out;

wow underline, bold and italics text

Adding Color, Size And Font Face To Your Text

Before now you’ve seen text that are big, small or colored in many websites you’ve visited. The font tag is quite different from some of the tags you’ve seen so far.

This is the font tag;

<body>

 

</body>

Well if you wrap a text in between the font tag like this;

<body>

 word 

</body>

You will see no effect, this is because the font tag has attribute which include, size, color and font-face.

FONT SIZE

To increase font size you need to do the following;

<body>

 word 

</body>

The size attribute can be assigned numbers from 1 to 6. So make changes to the numbers and see the effect.

FONT COLOR

Another exciting attribute to the font tag is its ability to add color to your text, do the following to add text to your document.

<body>

 Red color 

</body>

You can change the color to “green, black, white, blue” all wrapped up in inverted comma (“”).

Apart from using words like “red, blue, green, purple” and so on, there are actual codes for color which can be used to add colors that can’t actually be named eg

Red: #FF0000 White: #FFFFFF Black: #000000 Yellow: #FFFF00

Blue: #0000FF Green: #00FF00 Pink: #FF00FF Orange: #FF6600

Others are:

#000033 #006666 #993300 #9900CC #003300 #33CCCC

#99FF00 #333399 #996633 #66CC66 #330000 #663366

Click here to see all the colors and their code

This is how to add this codes that represents color to your document

<body>

 Am black 

</body>

Test the other color codes to see their effect on the text.

FONT-FACE

There are many ways of writing in a web document, you’ve got to make the right choice of writing or font face you want to see on your web page. We have different font-face so be sure to make the rite choice that suit your need. Enter this in between the body tag like this;

<body>

I will look different

</body>

Make sure you remember to put the inverted comma(“”), miss one and you will ruin your work.

Well we have been doing a lot of work, I will suggest you take a glass of water. In this lesson we’ve been able to achieve tremendous work already we hope to build on this in the next lesson. From me Samuel am saying Adios to Jatau and you.

LESSON 3

Bienvenidos, Welcome, am getting a little Spaniard. So far so good, this have been taking shape we hope to continue this cordial relationship. We going to get really serious now. In this lesson we will be treating;

1. Links

2. Adding image

3. Heading tag

Am sure you’ve been wondering how this web developers do to make you go to another page just because you clicked a link on their website. Well, it may seems pretty technical but the issues is that it is not difficult to make a link work.

How to link text using the link tag- <a></a>

It’s becoming more exciting as we get to link texts in our web page. We are going to create links to various part of our web page and other websites and even to other pages that we’ve created.

This is the link tag;

<a href=””> </a>

In between the link tag is where your texts well appear, so that when you click, it will automatically take you to the address typed in between the inverted comma (href=” “)

Let say, we want to make a link to yahoo.com. This is what we will do;

<a href=”http://www.yahoo.com”>Yahoo</a>

After doing the above, Yahoo, which is in between the link tag will become underlined and colored usually blue, so that when you click, it takes you to the address http://www.yahoo.com. Try linking it to google.com and other website address and see how it works.

Now, we’ve only link to web resources, that is, other websites away from our sites but what if we want to link it to other web pages which we’ve created. For instance let say I create two web pages;

1. Index.html

2. About.html

And I want to link to about.html from index.html. I want my site visitors to be about to know about me in another web page called about.html. Before we go on, I feel there is something you need to know.

The concept of path, folder and naming html document is crucial in linking web pages between themselves or to other external resources.

Folders are known as directory, in the beginning of this tutorial you created a folder called “website” which you previously used to save your index.html file which you’ve been using to test all the codes and tag you’ve seen so far. Now, create another page called “about.html”. Type this in your Notepad;

<html>

<head>

<title> About me</title>

</head>

<body>

This page is all about me. Estoy un grande muchacho, which means am I great boy in Spanish.

</body>

</html>

After creating this page save it as “about.html”, make sure you follow the same procedure you use in saving first page called “index.hml”.

Recall: that you have to click on save or save as, select the folder you want to save the document inside, which is the “website” folder we initially created. Type the name of the document in this case “about.html” and in the “file type” choose “all files”. Click on save and you are done. Confirm it by going to the folder(“website”) to check if another web page call “about” has appeared in it.

Now to link two web pages together ;

In the first web page called “index” type the following into your Notepad;

<html>

<head>

<title> My first web page</title>

</head>

<body>

 Welcome

Click <a href=”about.html”>here</a> to know about me. 

Thanks for visiting my page.

</body>

</html>

You’ve previously created you a page called “about”. Make sure the page is inside the same folder where “index” page is.

Lets explain this;

Click <a href=”about.html”>here</a> to know about me. 

Note: href=”about.html” this is referred to as address.

href=”about.html” means that if you click on “here” it will take you to the page “about.html”.

you should already have the following;

1. About.html

2. Index.html

The page index.html links to about.html.

Note: in typing address make sure you put the extension, when you create the page about.html. the page name is “about”, but you must include the extension “.html” for the link to actually work.

LINKING TO FILES INSIDE OTHER FOLDERS

How do I link a page to other pages inside another folder? Websites are the combination of many web pages, those pages will not always be in the same folders, they might be inside other folders, the question is how do I link to this folders?

Now, create a directory or a folder called “otherpage” inside the folder called “websites”, where the following pages are;

1. About

2. Index

Let us create another page called “externalpage”. Type the following into your Notepad;

<html>

<head>

<title> am inside another folder</title>

</head>

<body>

WHO on earth gave you my address

</body>

</html>

Save the document as “externalpage.html”

Now from you index page include the following link;

<html>

<head>

<title> My first web page</title>

</head>

<body>

 Welcome

Click <a href=”about.html”>here</a> to know about me. 

If you want to go to my other page click <a href=”other”/externalpage.html”> here </a>

Thanks for visiting my page, be sure to come here more often.

</body>

</html>

Let me explain the added section of the index page.

If you want to go to my other page click <a href=”otherpage”/externalpage.html”> here </a>

the href=”otherpage”/externalpage.html” , if you look carefully you will discover that something here is quite different from the other links you’ve created so far.

The “otherpage” here refer to the folder name and the “externalpage.html” refer to the page which you want to link to.

What if you want to link back to index.html from the externalpage.html which is in the folder called “otherpage”. It is very easy;

<a href-“../index.html”> </a>

This link you to index.html.

“../” means subfolder or takes you to folder below the one the current page is located.

ADDING IMAGES TO YOUR WEB PAGE

The tag use is

< img src=” “>

Save an image with a name of your choice, take note of the kind of image, that is the extension of the image. Images carries many extension which include

And so on so be sure of the extension.

In between the SRC=” “ inverted comma type in the name of the image and the extension

For instance;

Once you do this, if the image is in the same directory as your html page it will display the image for you, it is that easy. Created many images and keep trying them to see how they make you web page beautiful.

Visit this site to see many tags that your can use in your web page.

http://www.htmlgoodies.com/beyond/reference/article.php/3472851/Quick-HTML-Reference.htm

Pages

Wednesday, 25 July 2012

Getting a Suitable Career out of Web design

THE RIGHT WAY TO USE THE INTERNET

GETTING A CAREER OUT OF WEBSITE BUILDING

PHP

JAVA

FLASH

XHTML, HTML, HTML5

PERL

ASP

CGI

mySQL

Ruby

Python

Friday, 13 July 2012

THREE (3) AMAZING HTML BEGINNER LESSONS

THE RIGHT WAY TO USE THE INTERNET

Contributors

Pages

Wednesday, 25 July 2012

Getting a Suitable Career out of Web design

THE RIGHT WAY TO USE THE INTERNETGETTING A CAREER OUT OF WEBSITE BUILDING

PHP

JAVA

FLASH

XHTML, HTML, HTML5

PERL

ASP

CGI

mySQL

Ruby

Python

Friday, 13 July 2012

THREE (3) AMAZING HTML BEGINNER LESSONS

THE RIGHT WAY TO USE THE INTERNET

THE RIGHT WAY TO USE THE INTERNET

GETTING A CAREER OUT OF WEBSITE BUILDING