Scribd
Upload
51 views

HTML Links: Example

The document discusses various HTML tags for formatting text, including headings, paragraphs, bold, italics, links, and images. It also covers tags for styling text like font, size, color, and alignment. Additional sections explain HTML lists, tables, and how to insert styles using internal, external and inline styles.

Uploaded by

Jamshed Tanoli
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views

HTML Links: Example

The document discusses various HTML tags for formatting text, including headings, paragraphs, bold, italics, links, and images. It also covers tags for styling text like font, size, color, and alignment. Additional sections explain HTML lists, tables, and how to insert styles using internal, external and inline styles.

Uploaded by

Jamshed Tanoli
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<html>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML Links

HTML links are defined with the <a> tag.

Example

<a href="http://www.w3schools.com">This is a link</a>

HTML Images

HTML images are defined with the <img> tag.

Example

<img src="w3schools.jpg" width="104" height="142" />

<b> or <i> defines bold or italic text only.

HTML Text Formatting Tags


Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

HTML Style Example - Background Color

The background-color property defines the background color for an element:

Example

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

Try it yourself »

The style attribute makes the "old" bgcolor attribute obsolete.


Try it yourself: Background color the old way

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

Example

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

Try it yourself »

The style attribute makes the old <font> tag obsolete.

Try it yourself: Fonts the old way

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

Example

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

TABLE:
<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>

HTML Table Tags


Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Lists

An ordered list: An unordered list:

1. The first list item  List item


2. The second list item  List item
3. The third list item  List item

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

How the HTML code above looks in a browser:

 Coffee
 Milk

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.


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

How the HTML code above looks in a browser:

1. Coffee
2. Milk

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The <dl> tag defines a definition list.

The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee
- black hot drink
Milk
- white cold drink

HTML List Tags


Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list

How to Use Styles

When a browser reads a style sheet, it will format the document according to it.

There are three ways of inserting a style sheet:

 External style sheet


 Internal style sheet
 Inline styles

External Style Sheet


An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of
an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the
<head> section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of
an HTML page, by using the <style> tag, like this:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of an element.

To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example
below shows how to change the text color and the left margin of a paragraph:

<p style="color:blue;margin-left:20px">This is a paragraph.</p>

To learn more about style sheets, visit our CSS tutorial.

HTML Style Tags


Tag Description
<style> Defines style information for a document
<link /> Defines the relationship between a document and an external resource

You might also like