WelCome to my HTML blog!
Here you can learn the basic of HTML. After learning this tutorial you will be able to make your own web pages. If you are already familiar with XML,then HTML will seem easy to learn. I recommend you, not to read this tutorial from head to tale but to spend a quarter or a half hour after reading several lessons, and practice.
Preparing for Learning HTML:
Creating documents in HTML is not difficult. To start, you need only a notepad and dedication.
HTML Introduction
HTML stands for Hyper Text Markup Language Here you can learn the basic of HTML. After learning this tutorial you will be able to make your own web pages. If you are already familiar with XML,then HTML will seem easy to learn. I recommend you, not to read this tutorial from head to tale but to spend a quarter or a half hour after reading several lessons, and practice.
Preparing for Learning HTML:
Creating documents in HTML is not difficult. To start, you need only a notepad and dedication.
Web Pages:
Words to Remember:
<html>element</html>
An HTML document will always begin and end with a <html> tag and respective
Web pages are very useful. This explains some of the arguments:
1. The simplest way to spread information on the Internet
2. Another form to increase your business
3. You can tell the world that you have something to say on a personal page
- Tag - used to specify the regions of the HTML document, which a browser will read later.Tags will look like this: <tag>
- Element - is a complete tag, having an opening <tag> and a closing </ tag>.
- Attribute - is used to change the value of an element in HTML. Usually an element has several attributes.
So far just remember that a tag is a
command that the browser will execute, an element that is a complete tag
and an attribute Customize and change an element in HTML.
HTML Elements
HTML elements have many ranks.All you see : paragraphs, ZiZix`s banner, the
navigation links from the left side and the right side , all are elements of this page.
navigation links from the left side and the right side , all are elements of this page.
An element has three parts : an opening tag, element`s content and an closing.
- <p> - the tag that opens a paragraph
- Element`s content - the paragraph itself.
- </p> - the closing tag.
***Note:
All the web pages will have at least the base elements: html, head, title and body.
All the web pages will have at least the base elements: html, head, title and body.
<html>element</html>
An HTML document will always begin and end with a <html> tag and respective
</html>. This is the standard structure of an HTML.
Please open a Notepad and copy the next code :
<html>
</html>
Save the document from the File/Save As menu. Select All Files and name the new created file "index.html".Hit Save.Now open the file in a browser so that you have the possibility to refresh the page (F5).
If you did everything well you will be able to see your web page white !
Please open a Notepad and copy the next code :
<html>
</html>
Save the document from the File/Save As menu. Select All Files and name the new created file "index.html".Hit Save.Now open the file in a browser so that you have the possibility to refresh the page (F5).
If you did everything well you will be able to see your web page white !
<head>element
As you will learn there are hundreds of HTML tags. Absolutely all the elements that will be displayed by a browser need a tag or two.
Tags are written in small letters. This is the standard of writing in XHTML, and Dynamic HTML.
Above are some examples of tags in HTML.
<body> acts as a capsule on the content.
<p>paragraph</p>
The <head> element is the one that is next. While you put in between html
and body everything should be just fine."Head" has no visible function, so
we will talk about this aspect in the next tutorials. Even though i want to
mention that <head> can offer to the browser very useful informations.You can
introduce here other cods like Javascript or CSS.
For the moment we will let the notions like that with the exception of the act
that we introduce the next element from the list, but first lets take a look
without him:
<html>
<head>
</head>
</html>
<head>
</head>
</html>
If you save the document and try to refresh the initial page from the browser
you will not see any difference. Just have a little patience, because next we will
study some visible elements.
<title>element
So that every thing goes well you must put the title tag inside the head tag.
what you write between those two title tags ( <title> and </title>) will be
seen as browser`s name, usually in the upper right side. Next we have the source code:
| <html> <head>
<title> My first web page!</title>
</head></html> |
Now save the file and open it in your browser. You will be able to see the title
in the upper left or right side as like the majority of the browsers.
in the upper left or right side as like the majority of the browsers.
You can put any name you want, just remember that the descriptive names are
the ones that are easier to find later.
<body>element:
The body element is the one that defines the beginning of the itself page`s content
(titles, paragraphs, photos, music and any all the others). As you can see in
the menu from the left, we debate one by one all these content elements.
For now all you need to keep in your mind is that body covers all the content
of the page.
| <html> <head> <title> My first web page!</title> </head>
<body>
</html> Hey guys! Here we will put the content later ! </body> |
HTML Tags Introduction
A browser read absolutely all you write in the HTML document. Tags have
three parts as I said before, the opening, closing and content.As you will learn there are hundreds of HTML tags. Absolutely all the elements that will be displayed by a browser need a tag or two.
| <openingtag>Content</closingtag> <p>Paragraph</p> |
Above are some examples of tags in HTML.
<body> acts as a capsule on the content.
<p>paragraph</p>
<h2>title(heading</h2>
<i>italic</ i>
<b>bold</b>
</body>
Exceptions-tags that don't require closing tags:
<i>italic</ i>
<b>bold</b>
</body>
Exceptions-tags that don't require closing tags:
There are some tags that do not meet the
model shown above.The reason is that in fact these tags do not have
content. Due to this fact we will use a modified manner of writing
these tags.
The simplest example is "linebreak"| <br/> |
This tag is combining the two tags, opening
and closing.This way is more efficient to use. Line break is used to
tell the browser that we want to get down a line below, but not closing
paragraph.
Following this example, other tags have been modified to be write in a simpler and quicker way.
This tag is combining the two tags, opening and
closing.This way is more efficient to use. Line break is used to tell
the browser that we want to get down a line below, but not closing
paragraph.
Following this example, other tags have been modified to be write in a simpler and quicker way.
| <img src="../img/image.jpg" /> -- Image Tag -- <br /> -- Line Break Tag -- <input type="text" size="12" /> -- Input Field -- |
Display
 -- Line Break -- |
As you can see the browser is able to
reproduce the image as long as we provide the location using the
attribute "scr".
The most tags have their own attributes. We will talk about this as we include in our talking a new tag. But now we will talk about a set of generic attributes which can be used with the majority of the tags.
HTML Attributes
The attributes are used to personalize tags. What do i mean ? Somehow , someday
you want to resize a image or a table or to change a font color. All these are
possible with the help of the attributes.The most tags have their own attributes. We will talk about this as we include in our talking a new tag. But now we will talk about a set of generic attributes which can be used with the majority of the tags.
Attributes are putted between the angular brackets (<>) of the opening tag.
The "Class" and "id" attributes in HTML:
<p id="boldparagraph">Paragraph type 2, bold </p>
These two attributes are mostly the same. They have no straight role in the
formatting of the elements but they are useful behind the scene with the help
of CSS. We will talk their role at the right time when we study their syntax and
their function in CSS.
The idea is that when you want to set a class of tags for being used later with
the help of CSS, you can make the difference between two identical tags but
with different attributes. Take a look at the next example :
<p id="italicparagraph">Paragraph type 1, italic </p> <p id="boldparagraph">Paragraph type 2, bold </p>
Display:
HTML-"The Name" Attribute:
| Paragraph type 1, italic Paragraph type 2, bold |
HTML-"The Name" Attribute:
"name" is a bit different from "id" and "class". If you give a name to an element
this one becomes a script variable for Javascript, ASP and PHP. Something that is very
often meet in formulations and other interactive text fields.
| <input type="text" name="TextField" /> |
Display:
This attribute has no effect over the display of the text box, even if in the background it plays a very important role.
HTML Paragraph Justify:
This attribute has no effect over the display of the text box, even if in the background it plays a very important role.
HTML "title" attribute:
This attribute is used rarely . He adds a title (a pop-up) to every element`s
content. This attribute should not be forgotten. You can name almost everything
however you want. The visualization appears when you need to stop with your mouse
for a few second above the content.
| <h2 title="I am a title attribute!!">A random title</h2> |
Display:
HTML "align" attribute:
A random title |
Pass with your mouse over the upper title
so that you see the magic of the"title" attribute.This attribute will
give yo your site a bit of interaction for
those who visit you. Do not pass over this detail.
If you want to align in a different way some elements of your page then you
have at your disposition the "align" attribute. You can align to the left,
right or the center of the page almost every element. By default elements will
align to the left, excepting when it is specified an other alignment.
| <h2 align="center">Centered title </h2> |
Display:
Centered title |
Other Examples:
| <h2 align="left">Title aligned to the left </h2> <h2 align="center">Centered title </h2> <h2 align="right">Title aligned to the right </h2> |
Display:
Title aligned to the left
Centered title
Title aligned to the right
Default Values For the Attributes
Generic Attribute:
The paragraph is a base element in text editing.The tag for a paragraph is <p>.
Most of the tags are attributed standard attributes. This means that if you
do not specify an other attribute, the browser will do it for you. For example
a paragraph will align by himself to the left, excepting when you specify in
an other way; the same is with a table. As long as you practice you will understand
many more things about the default values of some tags.
Generic Attribute:
You must keep in your mind that attributes are used to design the elements of
a web page. I have put here together some of the most commune attributes used in HTML :
a web page. I have put here together some of the most commune attributes used in HTML :
| Attribute | Options | Function |
| align | right, left, center | Horizontal alignment |
| valign | top, middle, bottom | Vertical alignment |
| bgcolor | numerical, hexadecimal, or RGB value | A background behind an element. |
| background | URL | An image behind an element. |
| id | Defined by user | Names an element which will be used with CSS. |
| class | Defined by user | Classifies un element which will be used with CSS |
| width | Numerical value | Specifies the width of a table, image or table box. |
| height | Numerical value | Specifies the height of an table, |
| title | Defined by user | "pop-up" a title for an element |
Paragraph's Attributes
He places a empty line above and under the text to make it evident,
and the browser will take it as it is.
| <p> The paragraph is a base element in ... </p> <p> This places a empty line above and ... </p> |
Display:
The paragraph is a base element in text editing.The tag for a paragraph is <p>.
He places a empty line above and under the text to make it evident,
and the browser will take it as it is
|
HTML Paragraph Justify:
Paragraphs can be edited almost the same easy way as in a text editor. The next
example is made with the help of the justify attribute
| <p align="justify">The paragraph is a base element in ...</p> |
Display:
The paragraph is a base element in text editing.The paragraph is a base element
in text editing.The tag for a paragraph is <p>.
his one places a empty line above and under the text to make it evident,
and the browser will take it as it is.
HTML-Centered Paragraph:
| <p align="center">The paragraph is a base element in ...</p> |
Display:
The paragraph is a base element in text editing.The paragraph is a base element
in text editing.The tag for a paragraph is <p>. his one places a empty line above and under the text to make it evident, and the browser will take it as it is. |
In this example every line of the paragraph has been centered in the middle of
the giving back line.
HTML - The paragraph aligned to the right, right
| <p align="right">The paragraph is a base element in ... </p> |
Display
The paragraph is a base element in text editing.The paragraph is a base element
in text editing.The tag for a paragraph is <p>.
his one places a empty line above and under the text to make it evident,
and the browser will take it as it is.
|
All the lines of the paragraph had been arranged, in the upper example, to the
right.
HTML-Headings/Titles
