Introduction to HTML language that can learn you the basic codes and tags to deal with some cases in HTML language. HTML consists of markup language codes easy to identify them through their content, but first learning what the tags mean and their uses to describe the webpage is essential to controll and make adjustments for codes easily from the beginning to the professionalism. HTML tags begin with opning tags and end with closing tags, each document or code. To get more knowledge about this language we will describe simple web page and adding the keywords (HTML tags) by using Notepad in Windows and save it as HTML file. we will show in this lesson and apply many other HTML codes and their uses. Not only that, but there many uses for HTML tags that you will discover after practicing. First of all, page that you want to to begin with these tags to write for example the title of your page. It is the main title for your web page and other essential tags come within <head> </head>. Now to make it easier open Notepad to apply and read.
Wrire main title of the page within the following tags. (We will write only the title now and after we will learn other uses of these tags).
<title>HTML Language</title>
</head>
HTML Language is the title now as you can see also it comes between other tags and they all have closing tags. It is same thing if we use <header> </header> rather than <head> </head>.
Headings:
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
We use headings to titles in the pages by different size. for example
<h1>Welcome in our site</h1>
<h2>We provide tutorial lessons</h2>
Write the above codes in Notepad and save it as HTML file like this one page.html.
It is on the left, so we use the following code to controll the title or the paragraph to put it anywhere on the page.
<h1 align="center">Welcome in our site</h1>
As you can see now and keep this code in mind if you want to use any thing such as a picture or writing paragraph. You may want any other place, so you have to change "center" to "right" and it is usually automatically add left position.
Paragraphs:
<p> </p>
This allows you to write a paragraph into the page.
<p>Introduction to HTML language that can learn you the basic codes and tags to deal with some cases in HTML language. HTML consists of markup language codes easy to identify them through their content</p>
It is great and you may use with it marking position like the following example
<p align="center">Introduction to HTML language that can learn you the basic codes and tags to deal with some cases in HTML language. HTML consists of markup language codes easy to identify them through their content</p>
Keep in mind this code as it shown for all uses if you want to controll the positions and you have to separate them by the same code each line to be organized. See the following example.
<p align="center">Introduction to HTML language that can learn you the basic codes and characters to deal with some cases. HTML codes are easy to identify them through their content,
</p><p align="center">but first learn what the characters mean and their uses to get more knowldge. We will design a simple website page</p>
Code for images:
<p>
<img src"Place of image on Internet or in the computer">
</p>
Always use this code to provide images in the page, replace the red color with the source of your image. It should be like this example if the image is on the computer, C:\image.jpg or D:\image.jpg
.png .gif and so. You may want to have another side of the page for the image and you will add with it marking position. Just add that code you have learned about controll the the places which looks like this align="center"
If you ask me where can you put it? watch the following code for our example image.
<p align="center">
<img src"Place of image on Internet or in the computer"></p>
We juse added align="center" into <p> That's it.
Hyperlinks:
<a href="This place for links">Write any words</a>
You have two places, first one it is for the link that you want to take the visitor to. The second one to show any words rather than links. This for separated links or random, but if we want to add hyperlinks in the same paragraph that we for it this code <p> </p> you have to add it before the closing character when you write the sentence.
<p>Cough is a common disease that could affect people. Read more information about
<a href="Wikipedia website or any site">Cough</a> </p>
You my want also to put it in somewhere on the page, so you use align="center" or align="right"
into <p> like this <p align="center"> .
<body bgcolor="#cc3300">
Use the above tag for changing the page color. You can place this code within body tags. as we have mentioned to add the title of your page at the beginning with <title> </title>.
<body>
<body bgcolor="#cc3300">
</body>
In the red place write the color source to identify certain colors or you can only write the name of the color red, green .. etc to be like this page.
Ordered lists:
<ol>
<li></li>
</ol>
There is no difference between capital letters or small and it will automatically add to next to the words numbers 1, 2, 3 ,4 and so. You have to write these words within these tags <li>Here</li>. for example
<ol>
<li>Civilization</li>
<li>progress</li>
<li>creation</li>
</ol>
If you want to use Numbers list we should write these tags <li> </li> , but for only marks ( points) we change these tags <ol> </ol> with <ul> </ul> as the same with the following code.
<ul>
<li>Civilization</li>
<li>progress</li>
<li>creation</li>
</ul>
Images with hyperlink:
First write hyperlink tag and add the link of the website that you want as it shown below by two steps.
1- <a href="http://google.com"></a>
1- <a href="http://google.com"></a>
After this tag add the source of the picture on Internet as it shown here.
2- <p><img src= "http://www.picamatic.com/show/2011/09/28/08/17/7905034_468x351.jpg">
</p>
</p>
But make sure that you add the code in step 2 before the closing tag in step1, so the Final HTML code or tag as you can call it should be like this code below.
<a href="http://google.com"><p>
<img src= "http://www.picamatic.com/show/2011/09/28/08/17/7905034_468x351.jpg">
</a></p>
</a></p>
0 comments:
Post a Comment