Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

HTML Quick Reference

This document provides an overview of HTML (Hypertext Markup Language) in 3 pages. It describes HTML tags and elements like <body>, <h1>-<h3> headers, <b>, <i>, <u> text formatting, <br> line breaks, and <center> alignment. It also covers tables using <table>, <tr>, <td> tags, links with <a> tags, lists with <ul> and <ol> tags, and forms with a variety of input fields. The document is intended as a quick reference to HTML's basic tags and structures.

Uploaded by

Abdo Shair
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML Quick Reference

This document provides an overview of HTML (Hypertext Markup Language) in 3 pages. It describes HTML tags and elements like <body>, <h1>-<h3> headers, <b>, <i>, <u> text formatting, <br> line breaks, and <center> alignment. It also covers tables using <table>, <tr>, <td> tags, links with <a> tags, lists with <ul> and <ol> tags, and forms with a variety of input fields. The document is intended as a quick reference to HTML's basic tags and structures.

Uploaded by

Abdo Shair
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML

Quick Reference

By:
Mohammed Hossam El-Din

Creation Date: 19 April 2004


HTML Quick Reference

• Introduction:
HTML (Hyper Text Markup Language) is a standard
language used to build the user interface for web pages.
The main concept of the language is the concept of tags,
that every element in the interface is built using tags

Example:
<html>
<body bgcolor="RED">
</body>
</html>

From the previous example we notice that every tag is


placed between < > and ends between </ >, and this
concept is very familiar with XML and XAML.
The tag can contain some attributes like bgcolor in the
<body bgcolor='RED'></body> and this sets the
background color to red.

Note:
Some tags do not need to be closed like list items and
ordered list.

• HTML and Text


HTML is used also with text to change the behavior and the
layout of text like (bold, italic or underline) text or
(centered, left align or right align)

Example:
<html>
<body>
<b>A Bold Text Will be Here</b>
<br>
<u>Or underlined</u>
<br>
<i>or italic</i>
<br>
<b><i><u>Or all at once</u></i></b>
</body>
</html>

Page 1 of 5
From the previous example we get some new tags
<b></b> <!--Makes the text bold -->
<u></u> <!--Makes the text underlined -->
<i></i> <!--Makes the text italic -->

There are also some other tags for text like:


<h1>A page header with size 1</h1>
<h2>A page header with size 2</h2>
<h3>A page header with size 3</h3>

To change the text font use the Font tag:


<Font size = "4" color = "Blue" fontface="Tahoma">
The text goes here
</Font>

To start a new line use the <br> tag:


<html>
<body>
<h1>Page Header</h1>
<hr> <!--Horizontal line -->
<br>
A text in a new line
<br>
<center>
Centered text.
</center>
<p align = "left">
A new left aligned paragraph
</p>
<p align = "center">
Or a centered one
</p>
<p align = "right">
Or a right one
</p>
</body>
</html>

Note:
The new line tag <br> doesn't have a </br> to close it, it is one of
the tags that doesn't have a close one.

Page 2 of 5
• Tables
Tables is one of the main reasons of using HTML that pages need
tables to view data and to organize the page.
The tables are built using 3 main elements:
1. the table tag <Table>
2. the table row tag <Tr>
3. the table data tage <Td>
4. there are some other tags for tables like <span> but
the first three can do everything in tables we don't need
the others.

Example:
<html>
<title>Sample Page</title>
<body>
<table border = "1" cellspacing = "1" cellpadding ="2">
<tr>
<td> Table cell number 1 of row 1 </td>
<td> Table cell number 2 of row 1 </td>
</tr>
<tr>
<td> Table cell number 1 of row 2 </td>
<td> Table cell number 2 of row 2 </td>
</tr>
<tr>
<td>
<img src = "MyImage.jpg" height =
"100" width = "100">
</td>
<td><a href="http://www.yahoo.com">
Click here to goto yahoo
</a>
</td>
</tr>
</table>
</body>
</html>

Note:
1. Tables also can be nested that a table can contains
multiple tables in it <td> Tag.
2. You should close all tags in the table as one opened tag
can destroy your table.

Page 3 of 5
• Links
Links are needed to link pages with each others even it is a
link to another page in the same website or in another
website.

Example:
<html>
<title>Page One</title>
<body>
<h1>Page One</h1>
<br><br>
<a href ="Page2.htm">Page 2 </a>
<br>
Pictures also can be a link.
<br>
<a href="http://www.yahoo.com">
<img src = "MyImage.jpg" alt="My Pic">
</a>
</body>
</html>

• Lists
The list is very useful to organize data in items like
Unordered Lists
o Data1
o Data2
o Data3
Or
Ordered Lists
1. Data1
2. Data2
3. Data3

To do this in HTML use the <ul></ul> and <ol></ol> tags


Example
<html>
<body>
Using the Ordered Lists
<br>
<Ol>
<li>Item 1
<li>Item 2
</ol>

Page 4 of 5
<br>
Or using the unordered lists
<br>
<ul>
<li>Item1
<li>Item2
</ul>
</body>
</html>

• Forms
The most important element in HTML language, which is
responsible for sending data to other pages.

Example:
<html>
<body>
<form name = "MyForm" Method = "Post" action =
"Page.asp">
Username:<input type="text" name = "Username">
<br>
Password:<input type = "Password" name = "pass">
<br>
<input type = "Radio" name = "Martial Status" value =
"Married"> Married
<br>
<input type = "Radio" name = "Martial Status" value =
"Single"> Single
<br>
Occupation
<select name ="Occupation">
<option value="Eng">Engineering
<option value="Doc">Doctor
<option value="Std">Student
</select>
<br>
Hobbies
<br>
<input type = "CheckBox" name="Hobbies" value =
"Football">Football
<br>
<input type = "CheckBox" name="Hobbies" value =
"Reading">Reading
<br>
<input type="Submit" Value = "Save Data">
<input type="Reset" Value = "Reset">
</form></body></html>

Page 5 of 5

You might also like