Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,143,330 members, 7,780,856 topics. Date: Friday, 29 March 2024 at 12:46 AM

Free Website Design Tutorial - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Free Website Design Tutorial (1002 Views)

SMF Forum Design Tutorial / Responsive Web Design Tutorial From Scratch / Free Website Design Tutorial (2) (3) (4)

(1) (Reply) (Go Down)

Free Website Design Tutorial by hillus: 5:09pm On Jan 14, 2013
HTML CLASS 2

In our last class, we discussed about the structure/syntax of HTML coding, we also touched bckground color and heading.
PLEASE IF YOU ARE JUST JOINING SCROLL DOWN TO PREVIOUS CLASS (FIRST CLASS) SO AS TO UNDERSTAND THE PART 2

In today class, we will be looking at the following:
Line Break
Paragraph
Horizontal Line
Alignment
Adding of Link/types of Link


Line Break
In our last class, i mentioned that HTML doesn’t consider space that’s to say that to give space you have to use code to accomplish that
Line break function more like enter key in the keyboard. Whatever the enter key does in a wordprocessor that’s what line break does in HTML
The syntax is <BR/>

Practice
<html>
<body>
This will definitely mean that your bank will have to minimize high rate of cash withdrawal by customers, purposely to reduce your frequency of withdrawing cash from your commercial bank, this can only be achieved by providing your customers ATM cards <BR/>which will allow them to withdraw cash at will from ATM machines, therefore (indirectly) eliminating the stress and cost of your MFB collecting cash from your commercial banks repeatedly.
</BODY>
</HTML>

Save and open, you will notice that line of text after <br/> entered into a new line. it can be used as many time as possible

Paragraph: I don’t need to explain this everybody know what paragraph is
The syntax is <p>

Practice
<html>
<body>
<P>
This will definitely mean that your bank will have to minimize high rate of cash withdrawal by customers, purposely to reduce your frequency of withdrawing cash from your commercial bank, this can only be achieved by providing your customers ATM cards which will allow them to withdraw cash at will from ATM machines, </P>
<P>therefore (indirectly) eliminating the stress and cost of your MFB collecting cash from your commercial banks repeatedly</P>
</BODY>
</HTML>

Save the page and open it, you will notice that each text are on a different paragraph

Horizontal Line: Horizontal line functions like a ruler. If you want to run a line on your webpage, you will need a horizontal line
The syntax is <HR>
Practice
<html>
<body>
<HR>
</BODY>
</HTML>


ALIGNMENT: By default HTML start from left, that include image, audio etc. but if you want to make something positioned at the center or right. You use alignment

The syntax is <align=”position”>
Position=left, right, center

Practice

<HTML>
<BODY>
<P ALIGN=”RIGHT”> This will definitely mean that your bank will have to minimize high rate of cash withdrawal by customers, purposely to reduce your frequency of withdrawing cash from your commercial bank, this can only be achieved by providing your customers</P>
</BODY>
</HTML>

Save and open, you will notice that the text is centered

Adding Link: you might have seen a link on a website and may have wonder how it happened, today i will show how to do that.

There are two ways to do it:
<a href=”url”>Link text </a>: this will load the link on the page the link is located on
But if you want it to load on a new page
<a href=”url” target=”_blank”>link text </a>

Practice
<html>
<body>
<a href=”google.com”>Visit Google</a>
<a href=”nairaland.com” target=”_blank”>Nairaland</a>
</body>
</html>


Class Dismiss
If you have a question, contact me @ 08037588749; mark.ugwuanyi@yahoo.com or ask the question in the forum
Next class we will explore color, font format etc, insert image and character formatting

If you want to own a WEBSITE or a BLOG OR FORUM, then contact me
If you are interested in EASY AND COMPLETE VIDEO TUTORIAL contact me

Class continue tomorrow,



Let start....
HTML CLASS 1
Before I Start, let me say that:
Web design on it's own is a lurcative business,
Before i start, it is important for you to know that web design can be achieved
into ways. Which are HTML and CMS (Content management system)
Although cms comprise of html, php or aspx. But in this tutorial, I will start with
HTML5 [the latest version]

NB: I not much a theoritical person but more of practical. So get ready for some practices along the way. So little introduction, more of pratical
For safe pratice as a beginner, open a folder in your system where you will be storing your your pratice webpage for future reference

Today's Class Outline
In today's class we will be looking at the following
1.0. What is HTML
1.1. Working Envirnoment/HTML syntax
1.2. Testing your HTML Codes/Editing a webpage
1.3. Basic Part of HTML Codes Structure
1.4. Head Part
1.5. Body Part
1.6. Footer Part
1.7. Titling Your Page
1.8. Set Background Color
1.9. Heading


1.0. What is HTML
HTML simply mean HyperText Markup Language. It convert a simple word text into a web page, that what we will be exploring in this tutorial. There have been many version of HTML, but the only different is addition of new tag - codes to performing certain function. With HTML you can design a static site
Enough talk let get to work

NB: HTML like most programming langauges is not case sensitive and it don't regard space

1.1. Working Envirnoment /Syntax
Envirnonment is a term used by programmer(am a web application developer). It simply mean platform on which you work (code) from
HTML can work with various platform ranging from one software to another, but the basic platform you can use for the coding is notepad [every system has it]
Let start, open your notepad [for xp user, click on start, click on all program, select accessories, then click on notepad. For Vista and upward: click on start, type notepad and select notepad from the list ]

Every programming language or code has it syntax. Now HTML syntax is alway in a closed tag example
<HTML>, <HEAD> etc
Every tag must have a closing. It must be closed with a "/" example: </HTML>, </HEAD>, </BODY>

A TYPICAL EXAMPLE

<HTML>
<BODY>
we are learning HTML
</BODY>
</HTML>


You will notice that every tag was closed <html> was closed with </html>, <body> was closed with </body>
Also notice the order "First opened is closed last, and the last opened is closed first"
<html> was opened first and was closed last </html>, <body> was opened last (after <html>wink but was closed first
Let me give you a hint that will help you remember:
<1> <2> text </2> </1>

1.2. Testing your HTML Codes
You many be wondering how your notepad will turn into a webpage. Just watch we will be doing little "magic" by turning notepad to webpage.

1.Click on save or use save as
2. when the save dialog box appear, in the filename, type in the name you desire and ended it with ".html"
Example: assuming I want to save the page with a filename as "hillus". It will be "hillus.html"
3. After that click on save.

4. Now go to the location you saved your file and you will note you will no longer see a txt but a webpage with that filename

Editing a webpage
Now when you close your notepad, you will notice that you are only left with a webpage, to open it, just do the following
1. Right click on the webpage
2. Select "Open page "
3. Then select notepad
And your notepad coding envirnonment is back

1.3. Basic Parts of HTML Codes Structure
HTML has some basic part of the structure that is essential. They include:
1. Head
2. Body
3. Footer (most beginner, dont normally make use of it, but expert do use them. In the beginning of this class, i wouldnt be using it, but later on, i will)

Below is the way a standard webpage format look like
<HTML>

<HEAD> </HEAD>

<BODY>


</BODY>

</HTML>


Let me explain; <html> is the container of the whole html coding: that is, everything is done within it. You will notice that Every other tag was within the <html> </html>
Hint for easy rememberance: <HTML> your coding </HTML>

1.4. Head
This deals with the head section of the webpage. It is in this section you determine the properties of your heading and you can also title your webpage under this section
It is like <HEAD> ...</HEAD>

1.5. Body
It is just like a letter deals with the body of the webpage. It is just like the body of a letter. This is where the man body comes in
<BODY>....</BODY>

1.6. Footer
It doesn't need much explanation. by the name deals with the bootom of the webpage

1.7. Titling your Webpage
I will show how to give a title to your webpage. what do i mean by title: you will notice in most webapge you open, in the tab of your webpage you will see a title for example nairaland has "Nairaland Forum"
You achieve this by <title>
Do the following or copy it:

Open a new notepad

<HTML>
<HEAD>
<TITLE> My First Webpage Design </TITLE>
</HEAD>
</HTML>

Then save the page as i showed ".html", then open the webpage you will see "My First Webpage Design" as the top of the webpage in the web browser

1.8. Set Background Color
Let add background color to a webpage. It actualize this by using: "<BGCOLOR="COLOR">"
There are too way to specify color: by text or by hexadecimal
For now we will make use of text example <bgcolor="yellow">

Do the following
open a new notepad

<HTML>
<HEAD>
<TITLE> Background color</TITLE>
</HEAD>
<BODY BGCOLOR="YELLOW">

</BODY
</HTML>


Then save and open the webpage you will see the background is yellow

1.9. HEADING
here we can specify various heading for your webpage, there include
h1,h2,h3,h4,h5,h6,h7

Let pratice:
open a new notepad
<HTML>
<HEAD>
<TITLE> Headings</TITLE>
<H1>Headings</H1>
<H2>Headings</H2>
<H3>Headings</H3>
<H4>Headings</H4>
<H5>Headings</H5>
<H6>Headings</H6>
<H7>Headings</H7>
</HEAD>

</HTML>

Then save your page and open it you will notice the various sizes of the headings: h1 is bigger, h2 followed, then h3 and so on.

Today Class Dismiss.. I will continue Tomorrow
I am Mark Ugwuanyi by name, Invite Your Friends
If you have any question, you ask it here in the forum or address it to my email address mark.ugwuanyi@yahoo.com or call me 08037588749

HTML web design Video Tutorial
In case if you need a video tutorial of this whole class, just contact me

CHEAP WEBSITE AND FORUM SITE
INCASE YOU NEED TO OWN A WEBSITE OF YOUR OWN OR EVEN A FORUM JUST LIKE NAIRALAND
CONTACT ME mark.ugwuanyi@yahoo.com or call me 08037588749
Thanks

Re: Free Website Design Tutorial by Otolorin4real(m): 7:20pm On Jan 14, 2013
[quote author=hillus]I decided to start a website design tutorial, am just wondering, if people will be interested instead of wasting my time.

[b]IF YOU ARE INTERESTED JUST COMMENT...IF AM ABLE TO GET 2 OR 3 PEOPLE, THE CLASS START

IT IS YOUR DECISION [Dont waste more time i am interested and ready to go,let get started !
Re: Free Website Design Tutorial by witken90(m): 7:32pm On Jan 14, 2013
tanxtanxtanx...tanx
Re: Free Website Design Tutorial by witken90(m): 7:34pm On Jan 14, 2013
i need it sir
Re: Free Website Design Tutorial by Nobody: 12:57pm On Jan 15, 2013
am with you sir go on
Re: Free Website Design Tutorial by Judexman(m): 8:51am On Jan 16, 2013
pls continue

(1) (Reply)

Pros And Cons Of Hosting And Registering A Site On Same Platform Eg Bluehost / Memes And You / 14 -year Old Creates Social Network Site

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 32
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.