You can ask me any question relating HTML.
HTML
HTML actually stands for Hyper text markup language.It is a languauge which is used to create the structure of a website.It is particularly a high level language which is basically a really user friendly language.It is simply to use and simply to be learned.
I will give you few lectures on it providing almost every kind of information about HTML.
We use tags in the whole HTML program.It starts from tag and also ends with a tag.
When you are saving HTML file always save it as "filename.html".
The name of the main web page is mostly given as "index.html".
Dreamweaver
In simple words we can say , "Dreamweaver is a web development tool used for creating web pages in it." Dreamweaver was actually created by Macromedia in 1997.Introduction
You can create HTML programs in notepad,dreamweaver and the other sources.I will also recommend you to use Notepad unless you dont get expert in it because making a program in dreamweaver will help you but it wont help you in increasing your skills in it because a person always learns from his mistake.In HTML always remember to close the tag if you don't do, the command will not be applied.
Always save the all web page elements (video,image) in the same file where you have saved your webpages otherwise you have to specify their addresses.
Let's make a quick start :
NOTE : Read every line and specially which are underlined otherwise in some places it would be tough for you to understand.
Creating your first program
Whatever you are using whether its Dreamweaver or Notepad the coding will always be same.
Our first program will be to display "Hello World" on webpage:
<html>
Hello World
</html>
Now save your file as "Save as".Write any name of your file but after the name type the extension as "filename.html".
From now on I will not post pictures rather I will only do coding.
*Head & Body
Head tag is used to represent the name of web page.<head> My First Webpage </head>
Body tag represents the area where we are inserting our data it can be in the form of text , colors or even any image.
To insert image:
<body background="image.jpg"> ..... </body>
To display background color:
<body bgcolor="grey"> .... </body>
Proper use:
<html>
<head>My first HTML page </head>
<body background="Me.jpg">
<p>Hey !!!!! </p>
</body>
</html>
* Headings
Tags used in are:
<h1>Your heading</h1>
<h2>Your heading</h2>
<h3>Your heading</h3>
<h4>Your heading</h4>
Proper use:
<html>
<body>
<h1>Numbers</h1><p>Numbers actually starts from 0 and .... </p>
<h3>Classes </h3> <p>Hey am in A - levels </p>
</body>
</html>
*Motion (Marquee)
<marquee> My website </marquee>
You can also specify the direction of words or images like from left to right or right to left.From up to down or down to up.
You can also bounce your data that after touching the walls it bounce back ( alternate command ).
There are many behaviors like alternate,slide or scroll.
Proper use:
<html>
<body>
<marquee behavior="alternate" direction="right"> My new website </marquee>
<marquee> <img src="me.jpg" height="200" width="200"> </marquee>
</body>
</html>
I added these three pictures to only show you that the text and image in marquee tag are continuously moving without stopping anywhere.But through the slide behavior you can also stop the motion.
* Paragraph
Paragraph tag:
<p>Your paragraph </p>
Proper use:
<html>
<body>
<p> Hey guys this is my new website and following is some information about me. </p>
</body>
</html>
*Text Styles
There are three text defined styles :
1.Bold
2.Italic
3.Underline
<b> Your data </b>
<i>Your data</i>
<u>Your data</u>
We can use more then one text tag on a line or paragraph.
You can also increase the size of your text with the tag as <big>.
<big> Hi friends this is my new HTml website </big>
Proper use:
<html><body>
<b>Hello World </b>
<br>
<i> <u> Hello World </i> </u>
</body>
</html>
<br> means to start another line.
*Alignments
Fout types of alignment :1.Left
2.Right
3.Center
4.Justify
<p align="justify"> Your data </p>
<p align="center"> Your data </p>
Proper use:
<html><body>
<p align="justify"> Computer is an electronic device which is capable of receiving information (data) in a particular form and of performing a sequence of operations in accordance with a predetermined but variable set of procedural instructions (program) to produce a result in the form of information or signals. Charles Babbage, an English mechanical engineer and polymath, originated the concept of a programmable computer. Considered the "father of the computer",he conceptualized and invented the first mechanical computer in the early 19th century. </p>
</body>
</html>
How to start another line ... A new line ...
<br> actually means break.<br>Your data </br>
Proper use:
<html><body>
<b> Your paragraph </b>
<br>
<b> Your new paragraph </b>
</body>
</html>
*Spaces
We can also give spaces depending on our demand in our webpage.Now it depends on us that how much spaces do we wants to give in our paragraph or anything else.
  & n b s p
You don't have to use any tags for it.You can give unlimited spacings in your web page.You can use anywhere this commands without any tags.
Proper use:
<html>
<body>
<p>Hey ! Did you like my website.               ...Tell me about more changings </p>
</body>
</html>
*Subscript & Superscript
Use<sup> superscript </sup>
<sub> subscript </sub>
Proper use:
<html>
<body>
<p> CL <sup> -1 </sup> </p>
</body>
</html>
*Hyperlinks
<a> it actually defines your link.<a href="https://www.learnthehtml.blogspot.com"> Visit page to learn the complete HTML </a>
Proper use:
<html>
<body>
<p> <b> Hey guys visit my following blog </b> </p>
<a href="https://www.learnthehtml.blogspot.com"> Visit it to learn HTML </a>
</body>
</html>
*Images
You can also use a URL (Unifrom Resource Locator) for it.In the tag also define the type of image whether its .gif,jpg or jpeg and etc.
Always save the all web page elements (video,image) in the same file where you have saved your webpages otherwise you have to specify their addresses.
<img src="pic-name.jpg" width="70" height="85">
src means source
Proper use:
<html>
<body>
<center><img src="me.gif" width="80" height="100"></center>
</body>
</html>
*Video
Putting a video can be sometime a really problem.Problems can be like the page won't respond or the page gets stucked.So be careful for that and sometimes it takes time but can gradually start.
You can also specify height and its width.
<embed src="movie.mp4" height="320" width="240">
You can also move your video to left,right or at center.
Again I have to tell you save all the elements in the same file so you dont have to specify their long addresses.By the way while putting a video also check it out that what kind of video is that like (.mp4,.3gp,.avi and etc).
Proper use:
<html>
<body>
<center> <embed src="obl.mp4" height="480" width="640"> </center>
</body>
</html>
OR
Putting links
<html>
<body>
<a href="wE.swf"> Play this video file </a>
</body>
</html>
*Audio
Remember to specify the audio type.
<audio controls>
<source src="Lion-roaring.mp3">
</audio>
Proper use:
<html>
<body>
<audio controls>
<source src="Lion-roaring.mp3">
</audio>
</body>
</html>
*List & Numberings
<ol>
<li> America </li>
<li> Pakistan </li>
</ol>
Unordered List (Bullets) :
<ul>
<li> Sudan </li>
<li> Australia </li>
</ul>
Proper use:
<html>
<body>
<p><b>Choose your country </b></p>
<ul>
<a href="https://china.com"> <li> China </li> </a>
<a href="https://england.com.com"> <li> England </li> </a>
<a href="https://mexico.com.com"> <li> Mexico </li> </a>
</ul>
</body>
</html>
*Tables
Tables in HTML are considered to be one of the most important feature.We can add columns and rows.We can also add colors in tables.
NOTE : If you are not defining borders in table tag no side borders will be displayed.
<table border="2" width="250" height="300" >
Proper use:
<html>
<body>
<center>
<table border="2" width="300" height="250">
<tr>
<td> <center> Messi </center> </td>
<td> <center> Ronaldo </center></td>
<td> <center> 100 </center></td>
</tr>
<tr>
<td> <center> Kaka </center></td>
<td> <center> Pepe </center></td>
<td> <center> 70 <c/enter></td>
</tr>
</table>
</center>
</body>
</html>
*Forms
Forms are usually created to display the "Sign in" and "Password" area in web page.
Text field and Password field :
<form>
Email address: <input type="text" name="email"><br><br>
Password: <input type="password" name="password">
</form>
In password type write password so that it would only show you the bullets.
Radio buttons :
<form>
<br>
Female <input type="radio" name="sex">
</form>
Checkboxes :
<form>
I accept the agreement <input type="checkbox" name"Agreement">
<br>
I do not accept the agreement <input type="checkbox" name"Agreement">
</form>
Proper use:
<html>
<body>
<b> Hi user ! </b>
<br>
<p>How did you find us : </p>
<br>
<form>
Google <input type="checkbox" name="web">
Yahoo <input type="radio" name="web">
Amazon <input type="checkbox" name="web">
Other <input type="radio" name="friend">
</form>
</body>
</html>
No comments:
Post a Comment