Scribd
Upload
34 views6 pages

HTML Quick Reference Guide

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views6 pages

HTML Quick Reference Guide

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

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 = "[Link]" height =
"100" width = "100">
</td>
<td><a href="[Link]
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 ="[Link]">Page 2 </a>
<br>
Pictures also can be a link.
<br>
<a href="[Link]
<img src = "[Link]" 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 =
"[Link]">
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

Common questions

Powered by AI

Tables in HTML are constructed using the <table>, <tr>, and <td> tags. The <table> tag defines the table as a whole. Each table is organized in rows using the <tr> tag. Within each row, data cells are placed using the <td> tag .

Ordered lists use the <ol> tag and represent items with numbers or letters, while unordered lists use the <ul> tag and represent items with bullet points. Each list item is defined by the <li> tag .

HTML supports multimedia elements such as images and links that can be clicked to visit other web pages or show images. The <img> tag is used to embed images into a page, with attributes like src for the image source and alt for the alternative text. Additionally, images can be used as links by placing <img> within an <a> tag .

HTML improves readability and accessibility through structured elements such as headers, paragraphs, and lists. Using <h1> to <h6> tags defines headings that help screen readers prioritize content. Proper use of lists (<ul>, <ol>, <li>) organizes data clearly. Semantic HTML also aids accessibility tools in interpreting page structure .

HTML links function by using the <a> tag to connect different web pages. They can link to pages within the same website or to external pages. Links can be text-based or take the form of clickable images, using the <img> tag as an anchor .

The <br> tag is used to insert a line break in HTML and is unique because it doesn't require a closing tag. This feature makes it different from most other HTML tags, which require both an opening and a closing tag .

Closing HTML tags is crucial because leaving a tag unclosed can disrupt the layout and functionality of a table and potentially the entire page structure. This is especially important in table structures where hierarchy and nesting can lead to errors if not properly managed .

Attributes in HTML tags provide additional information about elements. For example, in the <body bgcolor='RED'> tag, the bgcolor attribute sets the background color. Tags like <img> use the src attribute to define the image source, and <a> tags use the href attribute to specify the link destination .

Forms are crucial in HTML for collecting user data and submitting it to a server. Key elements in forms include text inputs, password inputs, radio buttons, checkboxes, select options, and buttons for submission or resetting data .

HTML uses various tags for text formatting: <b> is used for bold text, <i> for italic text, <u> for underlined text, and <font> can set text size, color, and face .

You might also like