Notes

,


HYPER TEXT MARKUP LANGUAGE

Introduction:

 HTML is a format that tells a computer how to display a web page. The documents themselves are plain text files with special "tags" or codes that a web browser uses to interpret and display information on your computer screen.
  • HTML stands for Hyper Text Markup Language.
  • An HTML file is a text file containing small markup tags.
  • The markup tags tell the Web browser how to display the page. 
  • An HTML file must have a html file extension.

Head:

  • Must contain title 
 May contain the following  

  • meta , script , style , base

Body: 

* Contains main part of the page  

• The part that you directly see in browser window .

* Attributes bgcolor backgro nd te t link link alink

• bgcolor, background, text, link, vlink, alink .

Syntax:

  • Opening Tag <html>  & closing Tag </html>
  • Opening Tag <head>  & closing Tag </head>
  • Opening Tag <title>  & closing Tag </title>
  • Opening Tag <body>  & closing Tag </body>

What are Tags:ƒ

  • HTML tags are used to mark-up HTML elements.
  • HTML tags are surrounded by the two characters < and >.
  • The surrounding characters are called angle brackets.
  • 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.
  • The text between the start and end tags is the element content.
  • HTML tags are not case sensitive, <b> means the same as <B>.

HTML Elements:

<html> <head>  

<title>My First Webpage</title> 

</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
This is an HTML element:
<b>This text is bold</b>

Basic HTML Tags:

 <html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6 (It has six built in header )
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment 

Headings:

Headings are defined with the <h1> to <h6> tags.
 <h1> defines the largest heading while <h6> defines the smallest. 

<h1>This is largest heading</h1>   

<h6> This is smallest heading</h6>

Paragraphs:

Paragraphs are defined with the <p> tag.
 Think of a paragraph as a block of text. You can use the align attribute with a paragraph tag as well.  

<p align="left">This is a paragraph</p>
<p align="center">this is another paragraph</p>


Try It Out!  :

Open your text editor and type the following text:  

<html> 

<head>

 <title>My First Webpage</title> 

</head> 

<body>

 <h1 align="center">My First Webpage</h1> 

<p>Welcome to my first web page. I am writing this page using a text editor and plain old html.</p>

 <p>By learning html, I'll be able to create web pages like a pro....

<br> 

which I am of course.</p> 

 </body> 

</html> 

OUTPUT:


 Unordered Lists:

An unordered list is a list of items marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ol>
 <li>Coffee</li>  
<li>Milk</li> 
</ol>

Output:

1. Coffee
2. Milk


HTML Images :

The Image Tag and the Src Attribute  The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:

<img src="graphics/chef.gif">


Tables: 

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for table data, which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. 

<table  border="1>  
<tr> 
<td>row 1, cell 1</td>  
<td>row 1, cell 2</td>  
</tr>  
<tr>  
<td>row 2, cell 1</td>  
<td>row 2, cell 2</td>  
</tr>  
</table>

Link to Absolute URL:

<a href="http://www.justclack.blogspot.com"> Click Here</a>

Link to Relative URL:

<a href="page2.html">Page2 </a>

Comments In HTML:

HTML Comments. Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code.

Syntax:


<!-- This is comment -->



Layout Code:

<html>

 <head> 

<title>My First Web Page </title>

 </head> 

<body>
<table width="90%" cellpadding="5" cellspacing="0" >
<tr bgcolor="#EDDD9E">     

<td width="200" valign="top">

<img src="p.jpg" width="100" height="100"></td>     

<td valign="top"><h1 align="right">Janet Doeson</h1>     

<h3 align="right">Technical Specialist</h3>

</td>   </tr>   <tr>     <td width="200">       

<h3>Menu</h3>      

 <ul> <li><a href="home.html">Home</a></li>        

 <li> <a href="faq.html">FAQ</a></li>         

<li> <a href="contact.html">Contact</a></li>        

 <li> <a href="http://www.austincc.edu">Links</a> </li>    </ul></td>     

<td valign="top"><h2 align="center">Welcome!</h2>    

 <p>Welcome to my first webpage. I created this webpage without the assistance of a webpage editor. Just my little text editor and a keen understanding of html.</p>   

  <p>Look around. Notice I'm able to use paragraphs, lists and headings. You may not be able to tell, but the layout is done with a table. I'm very clever. </p>    

 <blockquote>  <p>I always wanted to be somebody, but now I realize I should have been more specific.</p>       <cite>MUJAHID KHAN </cite> </blockquote>    </td>   </tr> </table> 

<hr width="90%" align="left"> <address>    MUJAHID KHAN<br>  

  Technical Specialist<br>  86176.31 </address> <p>Contact me at <a href="http://www.justclack.blogspot.com/">justclack</a> </p> 

</body> </html>

OUTPUT:



The form Tag:

<form >
 First name:  <input type="text" /><br/> 

 Last name:  <input type="text" />
</form

Output:


The form Tag Using Placeholder and Submit Button:

<form >

 <input type="text"  placeholder="First name"/><br/>
 <input type="text"   placeholder="Last name"/>
 <input type="email"   placeholder="Example@example.com"/>
 <input type="password"   placeholder="Password"/>

 <input type="submit"/>
  </form>

Output:


Buttons:

<input type="submit"/>
 <input type="button" value="Button"/>
 <input type="reset"/>

Output: 

Radio and checkbox Buttons:

<form >
creditCard<input type="radio" name="creditCard"  />
Tick Here<input type="checkbox" name="…" />
</form>

Output: 

Combo Boxes:


<form>
Favorite language:
<select name="language">
<option value="Php">Php</option>
<option value="Html">Html</option>
<option value="C++">C++</option>
<option value="javascript">JavaScript</option>
<option value="perl">Perl</option>
<option value="SQL">SQL</option>
</select>
</form>


OutPut:



List Boxes:


Week Days:<br/>
<select name="Week Days"  size="4">
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option> 




Output:



File upload:

<input type="file" …/>

Output:


-
Labels: ,
Location: Southern Asia

4 comments:

Subscribe to: Post Comments (Atom)

Pages

Made with ❤ in Pakistan By JUST CLACK