Scribd
Upload
76 views

Summary of Basic HTML Tags

The document provides information on basic HTML tags for headings, paragraphs, unordered and ordered lists, anchors, and inline images. It explains that headings are used to title sections and come in 6 levels from h1 to h6. Paragraphs are delimited by <p> tags. Unordered lists use <ul> tags and <li> tags for each item while ordered lists use <ol> tags. Anchors allow internal and external linking using <a> tags. Inline images are included using <img> tags with the image URL as the src attribute.

Uploaded by

Waseef Ahmad
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
76 views

Summary of Basic HTML Tags

The document provides information on basic HTML tags for headings, paragraphs, unordered and ordered lists, anchors, and inline images. It explains that headings are used to title sections and come in 6 levels from h1 to h6. Paragraphs are delimited by <p> tags. Unordered lists use <ul> tags and <li> tags for each item while ordered lists use <ol> tags. Anchors allow internal and external linking using <a> tags. Inline images are included using <img> tags with the image URL as the src attribute.

Uploaded by

Waseef Ahmad
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

<table border="1">

  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Summary of Basic HTML Tags


Head Elements

 Marks properties of entire document


 Marked with <head>

 Includes title <title> tag

 Ended with </head>

Body Elements

 Marked with <body>


 Header levels <h1>, <h2>, <h3>, etc.

 Anchors <a href= "http://www.cs.cf.ac.uk²>Link


text</a>

 Paragraph indicators <p>

 Line breaks <br>

 Horizontal line <hr>

 Address tags <address>|

 Blockquote style <blockquote>

Within a body text may be organised in variety of ways:

Lists

 Unordered <ul> with <li> (list item)


 Ordered <ol> with <li>

 Definition <dl> with <dt> and <dd>


 Menu <menu> with <li>|

 Short <dir> with <li>|

Preformatted text

 <pre>

Character formatting (physical)

 Bold <b>
 Italics <i>

 Underline <u>

 Fixed width <tt>

Character formatting (logical)

 Strong <strong>
 Variable name <var>

 Citation <cite>

Graphics

 In-line images <img src=³image.gif²>


 Include alt=³ ³ for browsers that can¹t display graphics, e.g.

<img src=³image.gif² alt=³Image GIF²>

Entities

 Character strings that represent special symbols, e.g.


 &amp for ``&``

 &gt for ``>``

 &quot for double quote (``)

Headings
 Headings are used to title sections and subsection of a document.
 HTML has 6 levels of headings labelled h1, h2, ..., h6.
 The first heading should be <h1>. item In many documents the first
heading is the same as the title.
 Headings are displayed in larger/bolder fonts than normal body
text.
 Increment headings linearly -- do not skip.

Example of HTML headings:

<html>
<head>
<title> HTML Heading Levels
</title>
</head>

<body>
<h1> This is a level 1 heading </h1>

<p>
This is not a heading. It is a paragraph.
</p>
<h2> This is a level 2 heading </h2>
<h3> This is a level 3 heading </h3>
<h4> This is a level 4 heading </h4>
<h5> This is a level 5 heading </h5>
<h6> This is a level 6 heading </h6>
</body>
</html>

Paragraphs
 <p> ....</p> tag delimts a paragraph.
 HTML ignores most carriage returns in a file.
 Text is wrapped until a <p> or </p> encountered.

o HTML assumes that is a <p> is encounterd before a </p>


then a paragraph should be inserted.
 Paragraphs can be aligned -- LEFT, CENTER, RIGHT - with the
ALIGN attribute via

<p align=center>

<p align>
<!-- THIS IS A COMMENT -->
<!-- Default alignement is left -->
Left aligned paragraph
</p>
<p align = center>

Center aligned paragraph


</p>

<p align = right>

right aligned paragraph


</p>

Anchors

Anchors are special places within documents that can be linked to.

 Anchors are created anywhere in a document with

<a name = "anchor_name">Anchor Position</a>

 Anchors within the same document are referred to by

<a href = "#anchor_name">Go to anchor</a>

 Anchors in the external document are referred to by

<a href = "link#anchor_name">

where link may a relative, absolute or remote URL link.

Therefore given this page of Html

We will Jump back here soon

Unordered or Bulleted lists


 <ul> ... </ul> delimits list.
 <li> indicates list items. No closing </li> is required.

For Example:

<ul>
<li> apples.
<li> bananas.
</ul>

Ordered or Numbered lists


 <ul> ... </ul> delimits list.
 <li> indicates list items. No closing </li> is required.
For Example

<ol>
<li> apples.
<li> bananas.
</ol>
1. apples.
2. bananas

Nesting Lists

Lists of the same or different type may be nested in any number of ways. For Example:

<ul>
<li> Some fruit:
<ul>
<li> bananas.
</ul>
<li> Some more fruit
<ul>
<li> oranges.
</ul>
</ul>

which when viewed in browser looks like:

 Some fruit:
o bananas.

 Some more fruit

o oranges.

In-Line Images
 Most browsers can display in-line images that are in JPEG or GIF format. Use the img
tag with src attribute to include an image in you HTML page:
 <img src=image_link>
 where image_link is the the relative, absolute or remote URL link of the image file.
 Example:
 <p align = center>
 An image mixed in with text <br>

 <img src="Images/gromit.gif" align=middle
 alt="wallace and gromit">
 </p>
 Which looks like this when viewed from a browser:
External Images, Sounds, Video
External Images will be loaded into their own page. The href field within the anchor tag is
used.

These are easily included by using

<a href=``image_url''>link anchor</a>

<a href=``video_url''>link anchor</a>

<a href=``audio_url''>link anchor</a>

You might also like