This thread is a sequel to the thread "Learn Web Design LIVE On Nairaland!!!". On this thread HTML tutorials shall be treated. All subjects relating to HTML shall be posted here. It will cover everything that has been treated on the thread "Learn Web Design LIVE On Nairaland!!!" ( https://www.nairaland.com/1383359/learn-web-design-live-nairaland ) but in details.
Please note that posts from other users will not be allowed on this thread as this will inadvertently cause breaks in the tutorials and constitute to confusion. All questions, suggestions and comments regarding whatever that is treted on this thread should be posted on https://www.nairaland.com/1383359/learn-web-design-live-nairaland .
Thanks to the NL community for supporting this idea and it is our hope that those entering the Web Design/Development career would find this thread useful.

PART 1: Introduction to HTML
HTML is an acronym for Hyper Text Markup Language. A markup language composes of predefined tags for laying out a document. HTML is a markup language that defines the way a webpage can be structured.
HTML was introduced by Tim Berners-Lee in 1991 and has undergone many modifications over the years resulting in different versions arising which include HTML 2.0, HTML 3.2, HTML 4.0, HTML 4.01 and HTML 5. Some of these versions have become obsolete and is no longer accepted by the W3C (World Wide Web Consortium)-the body in charge of setting HTML standards.
The HTML versions currently in use are HTML 4.01, XHTML 1.0 and HTML 5.
The major differences between this versions shall be treated in a later part- DOCTYPE.
Before you delve into writing HTML however, you will need to know some tools that are need to begin.

PART 2- Tools Needed to Begin HTML Coding
A) Text Editor: To write HTML codes you will need a basic text editor. Windows users already have Notepad pre-installed in their Operating System (OS) while Mac users have Text Edit. However, I personally use a more advanced text editor called Notepad++ for tutorial purposes. The advantage of Notepad++ over basic text editors is that it has the facility of color coding. In other words it colours pre-defined codes depending on the type of file you are working with(which in this case is html). It also displays your code in a structured way and easily detects errors. You can download Notepad++ for free by typing the key word "Notepad++" in the Google Search Engine. However, if you choose to stick to your basic text editor, you will experience no problems when examining my examples and adapting it as the differences are negligible
B) Web Browser: This is needed to view your HTML document. A web browser interprets your HTML codes and show you(or the user) the end result. The most popular browsers are Internet Explore(IE), Mozilla Firefox, Google Chrome, Opera Mini and Mac's Safari. Throughout these tutorials, I will use most of these browsers to explain certain ideas. This is so because browsers tend to interpret HTML codes in quite different ways. So, in a case, where differences occur, you shall be noted.

These are the basic tools needed to begin the learning of HTML. As time goes on and we progress in this field of interest, we will acquaint ourselves of more tools that are deemed fit to be handled by advanced students.

iyenimofe: These are the basic tools needed to begin the learning of HTML. As time goes on and we progress in this field of interest, we will acquaint ourselves of more tools that are deemed fit to be handled by advanced students.

Nice one, keep it up.

Why mod hide my post na?

@OP, you are really making these things to be difficult for you. And you will end up straining yourself. Just do this html tutorial once on your system and copy everything and post at once. Stop posting today, then next week u post, then another week u post. You have finished the html in the other thread, now get the whole html part and post here. And go face css. You have to know what you have decided to do and if you dont want stress, you have to do this tutorial once and post, then you can focus on answering questions that will arise.

GraphicsPlus: @OP, you are really making these things to be difficult for you. And you will end up straining yourself. Just do this html tutorial once on your system and copy everything and post at once. Stop posting today, then next week u post, then another week u post. You have finished the html in the other thread, now get the whole html part and post here. And go face css. You have to know what you have decided to do and if you dont want stress, you have to do this tutorial once and post, then you can focus on answering questions that will arise.

Yes Boss

PART 3: HTML Syntax
NOTE:Syntax in this context simply means the way the elements are arranged.
A) An HTML element consists of:
a-The opening tag
b-The element content
c- The closing tag
Syntax: <opening tag> element content </closing tag>

B) Some HTML elements do not have contents and are called empty elements. They have only the start tag and the forward slash. This is the only time when the / is in the start tag.

C) HTML elements can have attributes which makes the element specific. They have a value written in double quotation marks. It gives information on how the attribute qualifies the element.
All are written in the opening tag.
Syntax: < opening tag attribute:"value"> content </closing tag>
Examples will be given later and you'll see how they work.
HTML elements and their attributes should be written in lower case.

PART 4:The Basic HTML Page Structure
An HTML page must have this structure for it to be called an HTML Page.
<html>
<head>
<title> </title>
</head>

<body>
</body>
</html>
NOTE: To type any HTML content, you'll use a text editor( explained in a previous post .
Using Notepad:
1- Click on the Start menu
2-Click on All Programs
3-Click on Accessories and then Notepad

Using Notepad++ :
Steps 1 and 2 above
Click on Notepadp++

Using TextEdit:
Open TextEdit from the Applications folder.

To save as an HTML file:
1- Click on File in the properties bar.
2- Click on Save As
3- In file name type in a name that is relateted to the document and also one you'll remember.
4-Use the .html file extension to save it as an HTML file.

To View the Page in a Browser:
1- Open your browser.
2- Click on File in the properties bar.
3- Click on Open
4- Select the file
TIP: Double click the file in its source folder and it'll be opened automatically by your default browser.

Before we treat the <html>, <head>, <title> and <body> elements in details, we need to treat a very important aspect: The <!DOCTYPE> declaration.

PART 5:The <!DOCTYPE> declaration
As stated in an earlier post HTML comes in diferent versions, so you have to specify the version you're writing in if not your page shall be rendered in quirk mode( the browser will interpret it anyhow).
The following are the <!DOCTYPE> declarations for the commonly used versions:
WARNING: Doctype declarations must contain no errors.
HTML 4.01
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 5
< ! DOCTYPE html>

NOTE: Be careful when using HTML 5 as it is not supported in old browsers.

The < ! DOCTYPE> declaration is thus the first item to be inserted in the document.

After the !DOCTYPE has been declared, the next element is -
PART 6:The <html> element:
This element covers the whole document i.e. All other elements are nested within it. After all the contents of document have been typed in, its closing tag </html> is typed in. Simply put, the <html> tag tells the browser your document is an HTML file. Next, we have -
Sub-Section-The <head> element:
It contains elements that describe the contents of the web page. All elements nested between the <head> and </head> tags are NOT visible in the webpage displayed by the browser to the viewer. Instead, they are used by search engines for indexing the page.
The most important element in the <head> section is -
a)The <title> element:
This element signifies the title of the document. The title of the document is what is visible in the upper properties bar of the browser. It is what appears as the document's title when the page is bookmarked. This title is also what is given as a search engine result.
Thus, the element
<title>Learn Web Design</title>
will appear as:
Learn Web Design

What you had previously typed in your text editor as:
<html>
<head>
<title> </title>
</head>

<body>
</body>
</html>
will now be:
Supposing you're writing in XHTML 1.0 :

< ! DOCTYPE html PUBLIC "-//
W3C//DTD XHTML 1.0
Transitional//EN"
" http://www.w3.org/TR/
xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Learn Web Design</title>
</head>
<body>
</body>
</html>

TIP: Just change the doctype declaration for HTML 4.01 or HTML 5.

Other elements included in the <head> section are:
b)The <base> element:
It is used to create a base or default URL for all link on the page.
c)The <link> element:
It links the document to an external document. E.g a style sheet(for beautifying a page).
d)The <meta> element:
It provides keywords, document description, author of document, e.t.c. The meta tag elements are very useful for Search Engine Optimization (SEO), thus they will be discussed in full later.
e)The <script> element:
It is used to attach a client-side script like JavaScript in the document.
f)The <style> elements:
It is used to include CSS rules in the document.

NOTE: The elements above will be treated later when we apply them as to their respective uses.

Confirm, sit in class quietly again as I sip my zobo drink, e no easy to dey receive lecture for two different faculty. Html department and web design department.


@op I don talk am before, my grand mama na for you

Confirm, sit in class quietly again as I sip my zobo drink, e no easy to dey receive lecture for two different faculty. Html department and web design dept
@op I don talk am before, my grand mama na for you

Pls paste large chunks of the tutorial per time, and make it as comprehensive as possible. After all, it is a revision and you will not be interrupted with questions so we can just make it faster and more interesting.

Pls paste large chunks of the tutorial per time, and make it as comprehensive as possible. After all, it is a revision and you will not be interrupted with questions so we can just make it faster and more interesting.

We now move to PART 7- Body elements

The <body> element nests other tags that control the way webpage contents appear to the visitor/viewer. The elements within the <body> and </body> ARE VISIBLE to the viewer unlike those found in the <head> section. The basic elements in the <body> section are:
The Headings- <h1> to <h6> tags:
These tags are used to signify headings of a document. Headings in a Web page are used in the same way you'll use an heading when writing a physical article (in paper and pen).
To create a heading:
Input in your text editor:
<h1>Your Text</h1>
And "Your Text" will be highlited as your heading.
The <h1> tag is the largest of the <h1> to <h6> tags, with <h2> being smaller than <h1>, <h3> is smaller than <h2> and so on. The <h6> tag is the smallest among his "brothers."
Thus, you may use <h1> as the main heading of a page, <h2> as a subheading and so on.
To appreciate the difference between this tags, consider this image. The first line of text was written as an <h1>, the second <h2>, the third <h3> and so on.
NOTE: Writing the <h2> to <h6> tags is the same process of the <h1> tag, except that 1 in <h1> is replaced with 2, 3, 4, 5 or 6.
The headings should be used as headings and as headings alone. DO NOT use headings to make text bigger (that's the work of another tag) as search engines use headings to determine the structure of your page and it will help in SEO.

The Paragraph <p> tag-
The <p> tag is used to create a new paragraph in an HTML page. The <p> tag is somewhat compulsory as all items (text, images, e.t.c) lay within it. The code for inserting a paragraph is:
<p>content</p>
When a new <p> element is inserted after a previous <p> tag, a line of white space is left and its contents start on the line after.

There are two tags that work in hand with the <h> and <p> tags. These are:
1-The Horizontal Rule <hr>: The <hr> tag crates a horizontal rule in the document. The horizontal rule is created on a new line. It can be used to show the end of a particular section in an article.
2-The Break <br> tag: It sends contents to the next line. It can be used as an alternative to the <p> tag for this function only.
NOTE: The <hr> and <br> tags don't require a closing tag.

Text Formatting Tags:
There will come a time when you'll need to format some of your text for emphasis, highlighting, e.t.c. You might have come across most of them when using MS Word and even here on Nairaland. The predominant text formatting tags.
The Bold <b> tag[/b]: This tag makes the selected text bold.
<b>Text</b>
[b]The Italics <i> tag: This tag makes the selected text italicized
<i>Text</i>
The Subscript <sub> tag: This tag makes shrinks the selected text in relation to other text around it.
<sub>Text<sub>
The Superscript <sup> tag: This tag raises the selected text in relation to other text. This is similar to the way we write indices in Maths.
^Text
The Computer Code <code> tag: This tag presents the selected text as if it were written by a typewriter. This tag is useful if you want to illustrate a code, when teaching online.
<code>Text</code>

GraphicsPlus:
@OP, you are really making these things to be difficult for you. And you will end up straining yourself. Just do this html tutorial once on your system and copy everything and post at once. Stop posting today, then next week u post, then another week u post. You have finished the html in the other thread, now get the whole html part and post here. And go face css. You have to know what you have decided to do and if you dont want stress, you have to do this tutorial once and post, then you can focus on answering questions that will arise.

smillin,,,bro u n i both knw d opp is quite relunctant 2 teach anyone coz if he is truely poised,all dese writings r hjst grammar 4 d gods,if i wntd d full meanin of html,i v a frnd calld google

iyenimofe:
After the !DOCTYPE has been declared, the next element is -
PART 6:The <html> element:
This element covers the whole document i.e. All other elements are nested within it. After all the contents of document have been typed in, its closing tag </html> is typed in. Simply put, the <html> tag tells the browser your document is an HTML file. Next, we have -
Sub-Section-The <head> element:
It contains elements that describe the contents of the web page. All elements nested between the <head> and </head> tags are NOT visible in the webpage displayed by the browser to the viewer. Instead, they are used by search engines for indexing the page.
The most important element in the <head> section is -
a)The <title> element:
This element signifies the title of the document. The title of the document is what is visible in the upper properties bar of the browser. It is what appears as the document's title when the page is bookmarked. This title is also what is given as a search engine result.
Thus, the element
<title>Learn Web Design</title>
will appear as:
Learn Web Design

bros u get mind oh or is it dat u r too dull,such a simple tin u cn jst straight 2 d point is wot u r makin dificult 4 ppl,u jst mite not make heaven

click [ url=www.facebook.com][color=purple]HERE[ /url][ /red]

click [color=purple]What Others will see [/red]

click [color=purple]HERE[/red]

click HERE[/red]