Login

BAKKASH · (This post was last modified: 19-01-2013, 07:15 PM by BAKKASH.)

What is HTML?

[sup]HTML[/sup] Stands for HyperText Mark-up Language.
HTML is a language for describing Internet web pages, and that is for a primary usage, and for a secondary usage we could use it for making some offline pages onto the HardDisk. As it is not a programming language in the full sense of the word, so it is not linked to a specific Operating System, because it is interpreted and implement its orders directly by any web browser, regardless of the user's system. So it is a very simple language, and easy to understand and to be learnt. So it does not need any beforehand knowledge of programming languages.
But maybe all you need is a little logical thinking and arrangement ideas.

HTML is a mark-up language, and a mark-up language is a set of mark-up tags, as the tags describe document content, While documents contain HTML tags, HTML elements and plain text, HTML documents are also called web pages.

HTML Versions:

Version Year

HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

Writing HTML Using Notepad or TextEdit,

Also HTML can be edited by using a professional HTML editor such like:

I.Adobe Dreamweaver
II.Microsoft Expression Web
III.CoffeeCup HTML Editor

However, For learning HTML that is recommended to use a text editor like Notepad (PC), or TextEdit (Mac).
As I believe using a simple text editor is a very good way to learn HTML.

Well, you do have such a perfect text editor for writing HTML files and your Internet browser to preview them. And here are some lessons to get started with the world of web design.

TIP: Always need and for good To apply what you gain and translate it into a real subject, more than just the examples listed in lessons.

The main aim of this lesson is:

HTML Tags;

HTML mark-up tags are usually called HTML tags
Tags are keywords (tag names) surrounded by angle brackets like <html>.
HTML tags normally come in pairs like and , the first tag in a pair is the Start Tag, the second tag is the End Tag, while the end tag is written like the start tag, but. with a forward slash before the tag name.
Start and end tags are also called Opening Tags and Closing Tags.

Code:
<tagname>content</tagname>

HTML Element Syntax;

HTML element starts with a Start Tag (opening tag), and ends with an End Tag (closing tag).
The element content is everything between the start and the end tag. Some HTML elements have empty content.
Empty elements are closed in the start tag, like

Most HTML elements can have attributes.

Code:
<tagename property="amount|direction">plain text</tagename>

Getting ready yet?
So here are the basic tags for any web page.

Start Tag End Tag
<html> </html>
<head> </head>
<title> </title>
<body> </body>

Figured out something already?
Right!.. we always start our document with the tag <html> as we finish the file with its end tag, which is </html>. Please Keep that in mind!.
And about the tag <head> it identifies the beginning of the section that contains information for defining the page. Such as address shown on the browser address bar, as that address needs to be in between tags <title> ADDRESS <titles>, and then we have to end this part by the </head> tag.
Then we head for the <body> tag which contains and comprises the content of the document. Such as headings, paragraphs and links, in addition to the inclusion of images, tables and many other Tags of course. As it also needs its own end tag </body>.

And with this streaked you are getting the gist:

And as I am longing, please continue Only when you feel the same!
Well!.. Let us put out this cigarette a side, and allow me to make it straight.

Simply by following the 4 steps below you could create your own web page with Notepad.

Step #1: Start a Notepad.
To start Notepad go to: Start All ProgramsAccessoriesNotepad.

Step #2: Edit Your HTML with Notepad.
Select the THML code below, Copy and Paste it into your Notepad:

Code:
<!DOCTYPE html>

<html>

<head>

<title>Webpage Test</title>

</head>

<body>

Hello World!.<p>

Wouw!,<p>

I have done my First Webpage<p>

This is amazing and more than FUN<p>

<a href="http://chanops.org/community/web-development/html-basics/">Take me back</a>

</body>

</html>

Step #3: Save Your Notepad as name.HTML
Select Save as in Notepad's file menu.
Give it a name and notice that when you save an HTML file, you can use either the *.htm or the *.html file extension. There is no difference, it is entirely up to you. (It automatically takes the icon of your browser, and looks like an Offline Web page).
Save the file in a folder that is easy to remember, like WEBS.

Step #4: Run the HTML in Your Browser.

Double-click your HTML file that you have just saved, and if you got it just like This:

[Image: webpagetest.png]

Then Congratulations!.

Explanation:

The DOCTYPE declaration defines the document type.
The text between <html> and </html> describes the web page.
The text between <head> and </head> delimits the section that contains information for defining the page.
The text between <title> and </title> reveals the web page name (address).
The text between <a> and </a> indicates the given link. (that tag does not work alone, but requires the addition of certain properties).
The text between <body> and </body> is the visible page content.
The puts an end of the line, and starts a new line. (note that tag is single and had no End Tag. But in some other cases it has).
The <!DOCTYPE html> declaration is the doctype for HTML5.

PS.

I.There is no difference between writing your tags in UPPERCASE letters, or lowercase. So you can write in any of them or even writing both.
II.In XHTML, all elements must be closed. Adding a slash inside the start tag, like
, is the proper way of closing empty elements in XHTML (and XML).
III.The browsers do not take into account the extra spaces nor signals of ending paragraphs (i.e. When you press the Enter key). So in other words, you could create your HTML files as follows;

<!DOCTYPE html><html><head><title>Webpage Test</title></head><body>Hello World!.Wouw!,I have done my First WebpageThis is amazing and more than FUN</body></html>

Or as follows:

<!DOCTYPE html> <html> <head> <title>
Webpage Test
</title> </head> <body>
Hello World!.
Wouw!,I have done my First WebpageThis is amazing and more than FUN
</body> </html>

Or even! As follows:

<!DOCTYPE html>
<html>
<head>
<title>
Webpage
Test
</title>
</head>
<body>
Hello
World!.

Wouw!,

I have done
my First
Webpage

This is amazing
and more than FUN

</body>
</html>

So it does not matter how your document looks while editing, but the sole matter is [b]where exactly you write-down the Tags!.[/b]

Currently, here are some addition Tags you might need to apply your knowledge of HTML by choosing your own subject while executing these Tags.

Addition Tags:

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

Examples;

Code:
<h1>This is a heading</h1>

Code:
<h2>This is a heading</h2>

HTML Paragraphs

HTML paragraphs are defined with the Text tag.

NOTE: we have tried the single shape of this Tag (check Tag), it also comes in pairs like Test. and here are some attributes (Left, Center, Right) are followed with the (Align) property.
Examples;

Code:
<p>This is a paragraph.</p>

Code:
<p Align="right">This is right-aligned paragraph.</p>

HTML Links

HTML links are defined with the <a> tag.

Note: The link address is specified in the href attribute, it could be a LINK, E-mail address. (will be discussed).

Example;

Code:
<a href="http://www.chanops.org">Go to ChanOps</a>

*BAKKASH Lights up a cig and sips coffee, then Says:-

Pat Yourself on the Back For a job Well Done!.

Be continuer for more HTML Tags, for more sprightly and vigorous pages.. SOON (inshallah).

And Please, Do NOT feel diffident, or even denying me a FEEDBACK while having any obstacles, I shall be grateful to be helpful.

BAKKASH

***immortal*** · (This post was last modified: 20-01-2013, 12:46 AM by immortal.)

Great, post thanks Smile

Code:
Hello World!.<p>

Wouw!,<p>

I have done my First Webpage<p>

This is amazing and more than FUN<p>

Something missing here ?

Code:
<p>Hello World!.</p>

<p>Wouw!,</p>

<p>I have done my First Webpage</p>

<p>This is amazing and more than FUN</p>

BAKKASH · (This post was last modified: 20-01-2013, 12:24 AM by BAKKASH.)

Thanks immortal! ^^

as i jus see the Link is missin'

Code:
<a href="http://chanops.org/community/web-development/html-basics/">Take me back</a>

it would be shown as Take me back, so when u flick it, it would bring u here again!. ^^

BAKKASH · 20-01-2013, 04:50 PM

immortal, i think u jus missed this part of subject..

Quote: HTML Paragraphs

HTML paragraphs are defined with the Text tag.

NOTE: we have tried the single shape of this Tag (check Tag), it also comes in pairs like Test. and here are some attributes (Left, Center, Right) are followed with the (Align) property.

as i believe it's confusin' and wastin' time by followin' text in this case, so long as we could jus use the solo Tag.

The puts an end of the line, and starts a new line. (note that tag is single and had no End Tag. But in some other cases it has). Like when u want to confine ur text at the left, center, right by the align property, or when u write in Arabic, u could use Left to Right or Right to Left followed by the dir property

and Please notice me if it didn work with u by the Tag.

***immortal*** · 20-01-2013, 07:24 PM

Ah right, thats fine, i just like text :x

BAKKASH · 20-01-2013, 08:17 PM

Yea!.. it's oki tho,

i jus didn want to complicate it, as it's an initiatory Subject!.

Worse comes next, Tongue

LOL

and Thanks for the Feedback immortal. ^^

17-02-2013, 04:53 PM

(20-01-2013, 04:50 PM)BAKKASH link Wrote: immortal, i think u jus missed this part of subject..

as i believe it's confusin' and wastin' time by followin' text in this case, so long as we could jus use the solo Tag.

The puts an end of the line, and starts a new line. (note that tag is single and had no End Tag. But in some other cases it has). Like when u want to confine ur text at the left, center, right by the align property, or when u write in Arabic, u could use Left to Right or Right to Left followed by the dir property

and Please notice me if it didn work with u by the Tag.

I know its a matter of personal choice to use the paired tag for or not. But i highly recommend using the paired tag. I am not sure how come it become confusing when the paired tags are highlighted when editing with html editor. It helps in giving idea of scope of the tag used.

Also single tag is recognized by HTML 4 and above only. And the only valid XHTML format for tag is when its used in pairs.

18-03-2013, 07:27 PM

If you want your text to break into a new line with a tag at the end of each line you should have suggested the
tag. That is what it was created for, and does not require an end tag.

Though for it to make it valid HTML5 you need to add the / at the end of any element that does not have its own end tag, such as <hr /> <img /> or
.

If you have any more questions or would like to learn more about html, css, php, then you should check out w3schools.org

CantStop · 24-11-2013, 02:51 AM

Adobe Dreamweaver makes web development more of a visual art than a coding conundrum.

BAKKASH · 02-01-2014, 06:02 AM

True tht CantStop!,

but STILL.. Old school and Basics ar an important thing not to be ignored and should be known tho..

jus sayin' and a humble opinion!.

CantStop · 06-01-2014, 06:25 PM

Always keep my pocketsized HTML book close by haha. Although that's been mostly memorized for years now

Dylan · 30-05-2014, 02:05 AM

You posted this on my 18th Birthday, so I'm taking that as a sign to begin web developing. Thanks for this post, but isn't the real deal more in-depth?

Login
Username:
Password:	Lost Password?
	Remember me