Hello fellow nairalanders!

I am a web designer, although I just got into the business newly but! I've learnt a lot lately, so I decided to post a very simple tutorial but advanced web building tutorial! to help those who are interested in learning how to design websites!

First of all to design a website or a webpage one needs to know about HTML




*********
Guys I will have to continue if some interests are shown to this my *post*

Ride on bro

Ok thank you diarra!
So I guess I have to continue.
About HTML

HTML, which stands for HyperText Markup Language, is a markup language used to create web pages. The web developer uses "HTML tags" to format different parts of the document. For example, you use HTML tags to specify headings, paragraphs, lists, tables, images and much more.

HTML is a subset of Standard Generalized Markup Language (SGML) and is specified by the World Wide Web Consortium (W3C).

What do I need to create HTML?

You don't need any special equipment or software to create HTML. In fact, you probably already have everything you need. Here is what you need:

Computer

Text or HTML editor. Most computers already have a text editor and you can easily create HTML files using a text editor. Having said that, there are definite benefits to be gained in downloading an HTML editor.

If you want the best HTML editor, and you don't mind paying money for it, you can't go past Adobe Dreamweaver. Dreamweaver is probably the best HTML editor available, and you can download a trial version for starters.

If you don't have the cash to purchase an editor, you can always download a free one. Examples include SeaMonkey, Coffee Cup (Windows) and TextPad (Windows).

If you don't have an HTML editor, and you don't want to download one just now, a text editor is fine. Most computers already have a text editor. Examples of text editors include Notepad (for Windows), Pico (for Linux), or Simpletext/Text Edit/Text Wrangler (Mac).

Web Browser. For example, Internet Explorer or Firefox.

Do I need to be online?

No, you do not need to be online to create web pages. You can create web pages on your local machine. You only need to go online when you want to publish your web page to the web - this bit comes later.

The next lesson will show you how to create a web page in less than 5 minutes.

I need some comments to continue guys!

I believe it's the actual coding that people are waiting for.

Carry on...

Getting Started

OK, lets get straight into it. Here, you will learn just how easy it is to create a web page. In fact, by the time you've finished with this web page, you will have created your own web page!

When you create a web page you will usually do something like this:

Create an HTML file

Type some HTML code

View the result in your browser

Repeat the last 2 steps (if necessary)

Creating a Webpage

OK, let's walk through the above steps in more detail.

Create an HTML file

An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).

Open up your computer's normal plain text editor (this will probably be Notepad if you're using Windows or TextEdit if you're using a Mac). You could use a specialized HTML editor such as CoffeeCup or Dreamweaver if you prefer (What is an HTML editor?).

Create a new file (if one wasn't already created)

Save the file as html_tutorial_example.html

Getting Started

OK, lets get straight into it. Here, you will learn just how easy it is to create a web page. In fact, by the time you've finished with this web page, you will have created your own web page!

When you create a web page you will usually do something like this:

Create an HTML file

Type some HTML code

View the result in your browser

Repeat the last 2 steps (if necessary)

Creating a Webpage

OK, let's walk through the above steps in more detail.

Create an HTML file

An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).

Open up your computer's normal plain text editor (this will probably be Notepad if you're using Windows or TextEdit if you're using a Mac). You could use a specialized HTML editor such as CoffeeCup or Dreamweaver if you prefer.

Create a new file (if one wasn't already created)

Save the file as html_tutorial_example.html

Type some html code

Code=
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>

After that view the result in your browser...
Either...
1) Navigate to your file then double click on it...OR...
1) Open your computer's web browser (e.g Internet explorer, firefox, netscape etc)
2) Select file>open, then click "browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "open".

Repeat the steps until you are satisfied with the result.

NOTE: don't expect to always get your codes right the first time you code. That's ok! Just try again and again until you get it right.

In my next post I will explain the above code in details until then thanks for viewing!


******
Its really hard guys I need some encouragements!

I dey feel u no be small

diarra94: I dey feel u no be small

thanks bro we will get there soon
I promise you are gonna love the following lessons!

Explanation of code

OK, before we get too carried away, I'll explain what that code was all about.

We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an opening and closing tag.

All HTML documents should at least contain all of the tags we've just coded and in that order.

The next lesson goes into a bit more detail about HTML tags.

HTML Elements

HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.

HTML consists of almost 100 tags. Don't let that put you off though - you will probably find that most of the time, you only use a handful of tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.

OK, lets look more closely at the example that we created in the previous lesson.

Code=
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>



Explanation of the above code:

The <!DOCTYPE... > element tells the browser which version of HTML the document is using.

The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).

The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the <title> tag is displayed in the browser's title bar (right at the very top of the browser).

The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.

The <p> tag declares a paragraph. This contains the body text.

Closing your tags

As mentioned in a previous lesson, you'll notice that all of these tags have opening and closing tags, and that the content of the tag is placed in between them. There are a few exceptions to this rule.

You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (/) after the <. This tells the browser that this tag closes the previous one.

UPPERCASE or lowercase?

You can use uppercase or lowercase when coding HTML, however, most developers use lowercase. This helps the readability of your code, and it also saves you from constantly switching between upper and lower case. Lowercase also helps keep your code XML compliant (if you're using XHTML), but but that's another topic.

Therefore...

Good: <head>

OK: <HEAD>

In the next lesson, we learn about some of the more common formatting tags.

Loving this tutorial. But does someone need any knowledge of CSS before creating a webpage?

diarra94: Loving this tutorial. But does someone need any knowledge of CSS before creating a webpage?

Not at all! But when someone who knows HTML dilutes it css! They code webpages like they are the ones who invented it! What I actually.... Mean is that css is a lot harder to learn but it is more easier to code with it.
For example: you can specify image sizes, bg colors, and lots more using css. Let's just put it this way! You make HTML perfect with CSS!

I will probably cook up some css tutorial but I have to finish this one first!

HTML Formatting



You may be familiar with some of the formatting options that are available in word processing applications such as Microsoft Office, and desktop publishing software such as QuarkXpress. Well, many of these formatting features are available in HTML too! This lesson contains some of the more common formatting options.

Headings

There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from <h1> for the most important, to <h6> for the least important.

Here they are:

Code

<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading</h5><h6>Heading 6</h6>

Result




Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

The <strong> Element

To place a strong importance on a piece of text, use the <strong> element.

Code

<P><strong>Attention: please leave the door open.</p>

Result




Attention: Please leave the door open.

The <em> Element

You can place an emphasis on text by using the <em> element.

Code

<P>Strawberries are<em>delicious</em>!</p>

Result




Strawberries are delicious!

Line Breaks

You can force a line break by using the <br> element.

Code

<P>Here is a<br />line break.</p>

Result




Here is a
line break.

Horizontal Rule

You can create a horizontal rule by using the <hr> element.

Code

Here's a horizontal rule...<Hr />...that was an horinzontal rule

Result

Here's a horizontal rule...

...that was a horizontal rule

Unordered (un-numbered) List

To create an unordered list, use the <ul> element to define the list, and the <li> element for each list item.

Code

<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li></ul>

Result




List item 1

List item 2

List item 3

Ordered (numbered) List

To create an ordered list, use the <ol> element to define the list, and the <li> element for each list item.

Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).

Code

item.

Code

<Ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li></ol>

Result




1. List item 1

2. List item 2

3. List item 3

We will be covering more HTML elements throughout this tutorial, but before we do that, you should know about attributes.

Hey!
Before I go into the next lesson, I have some explanations about the previous codes

Some of the codes couldn't display the way they should, that's because I can't use html in a reply or comment box BUT! Those codes are original if u test them they will work just fine for you!



Here is a horizontal rule...

---

...that was an horizontal rule.

Nyc. More grease 2 ya elbow

I will post more codes later!

@op,keep up the gud wrk,am following