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 <b> and </b>, 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.
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.
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:
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:
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 <p> 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!.<p>Wouw!,<p>I have done my First Webpage<p>This is amazing and more than FUN<p></body></html>
Or as follows:
<!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>
</body> </html>
Or even! As follows:
<!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>
</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;
HTML Paragraphs
HTML paragraphs are defined with the <p>Text</p> tag.
NOTE: we have tried the single shape of this Tag (check <br> Tag), it also comes in pairs like <p>Test</p>. and here are some attributes (Left, Center, Right) are followed with the (Align) property.
Examples;
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;
*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
[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 <b> and </b>, 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:
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 <p> 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!.<p>Wouw!,<p>I have done my First Webpage<p>This is amazing and more than FUN<p></body></html>
Or as follows:
<!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>
</body> </html>
Or even! As follows:
<!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>
</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 <p>Text</p> tag.
NOTE: we have tried the single shape of this Tag (check <br> Tag), it also comes in pairs like <p>Test</p>. 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
Jus be ur SELF, 'cuz everyone else is already TAKEN!.