Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,136,415 members, 7,755,056 topics. Date: Monday, 04 March 2024 at 02:04 AM

Learn HTML LIVE On Nairaland!!! - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Learn HTML LIVE On Nairaland!!! (9180 Views)

Learn Html Live On Nairaland!!! / Learn Web Design LIVE On Nairaland!!! / Learn Html/ Website Design (for Beginner & Pro) Free (2) (3) (4)

(1) (2) (Reply) (Go Down)

Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 11:30am On Aug 30, 2013
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.

4 Likes 1 Share

Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 11:11am On Aug 31, 2013
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.

1 Like

Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 1:37am On Sep 02, 2013
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.
Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 1:39am On Sep 02, 2013
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.
Re: Learn HTML LIVE On Nairaland!!! by Emusan(m): 7:09am On Sep 02, 2013
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?
Re: Learn HTML LIVE On Nairaland!!! by GraphicsPlus(m): 8:02am On Sep 02, 2013
@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.

2 Likes

Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 10:10am On Sep 02, 2013
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
Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 10:14am On Sep 02, 2013
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.
Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 10:17am On Sep 02, 2013
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.

2 Likes

Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 10:21am On Sep 02, 2013
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.

2 Likes

Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 10:23am On Sep 02, 2013
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
Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 10:25am On Sep 02, 2013
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.
Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 10:27am On Sep 02, 2013
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.

1 Like

Re: Learn HTML LIVE On Nairaland!!! by brownlord: 2:24pm On Sep 02, 2013
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
Re: Learn HTML LIVE On Nairaland!!! by brownlord: 2:31pm On Sep 02, 2013
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
Re: Learn HTML LIVE On Nairaland!!! by OmerianConsult: 6:27pm On Sep 03, 2013
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.
Re: Learn HTML LIVE On Nairaland!!! by OmerianConsult: 6:28pm On Sep 03, 2013
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.
Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 12:14am On Sep 05, 2013
We now move to PART 7- Body elements
Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 11:42pm On Sep 05, 2013
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.

1 Like

Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 11:43pm On Sep 05, 2013
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.

1 Like

Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 11:44pm On Sep 05, 2013
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.
Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(m): 11:45pm On Sep 05, 2013
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.
<sup>Text</sup>
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>
Re: Learn HTML LIVE On Nairaland!!! by Nobody: 12:13pm On Feb 21, 2015
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
Re: Learn HTML LIVE On Nairaland!!! by Nobody: 1:16pm On Feb 21, 2015
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
Re: Learn HTML LIVE On Nairaland!!! by cj4humanity: 3:03pm On Jul 16, 2017
click [ url=www.facebook.com][color=purple]HERE[ /url][ /red]
Re: Learn HTML LIVE On Nairaland!!! by cj4humanity: 3:05pm On Jul 16, 2017
Re: Learn HTML LIVE On Nairaland!!! by cj4humanity: 3:06pm On Jul 16, 2017
click [color=purple]HERE[/red]
Re: Learn HTML LIVE On Nairaland!!! by cj4humanity: 3:07pm On Jul 16, 2017
click HERE[/red]

1 Like

(1) (2) (Reply)

Nigeria’s Top 5 Earning Bloggers By Monthly Income / [HACKED] Netflix Accounts / How To Easily Add Adsense Ads Anywhere In Your Blogger Post

(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. 74
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.