Monday, December 17, 2018
Home > HTML example > HTML Example Part-1

HTML Example Part-1

HTML Basic example

1- HTML document

 

<!DOCTYPE html>

<html>

<body>

 

<h1>My First Heading</h1>

 

<p>My first paragraph.</p>

 

</body>

</html>

 

2- HTML headings

 

<!DOCTYPE html>

<html>

<body>

 

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

 

</body>

</html>

3-html paragraphs

 

<!DOCTYPE html>

<html>

<body>

 

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

 

</body>

</html>

4-html links

 

<!DOCTYPE html>

<html>

<body>

 

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

 

</body>

</html>

5-html images

 

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Images</h2>

<p>HTML images are defined with the img tag:</p>

 

<img src=”image.jpg” alt=”example.com” width=”104″ height=”142″>

 

</body>

</html>

6-html buttons

 

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Buttons</h2>

<p>HTML buttons are defined with the button tag:</p>

 

<button>Click me</button>

 

</body>

</html>

7-html lists

 

<!DOCTYPE html>

<html>

<body>

 

<h2>An Unordered HTML List</h2>

 

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

 

<h2>An Ordered HTML List</h2>

 

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

 

</body>

</html>

 

———————————————————————————————————————————————————-

HTML Attributes example

 

1-Title attributes

 

<!DOCTYPE html>

<html>

<body>

 

<h2 title=”I’m a header”>The title Attribute</h2>

 

<p title=”I’m a tooltip”>

Mouse over this paragraph, to display the title attribute as a tooltip.

</p>

 

</body>

</html>

 

2-href attributes

 

<!DOCTYPE html>

<html>

<body>

 

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

 

<a href=”https://example.com”>This is a link</a>

 

</body>

</html>

 

3-hight and wirth attributes

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Size Attributes</h2>

<p>Images in HTML have a set of size attributes, which specifies the width and height of the image:</p>

 

<img src=”img_girl.jpg” width=”500″ height=”600″>

 

</body>

</html>

 

4-alt attributes

 

<!DOCTYPE html>

<html>

<body>

 

<h2>The alt Attribute</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

 

<img src=”img_girl.jpg” alt=”Girl with a jacket” width=”500″ height=”600″>

 

</body>

</html>

 

5-attributes without quotes

 

<!DOCTYPE html>

<html>

<body>

 

<a href=https://www.example.com>This is a link</a>

 

</body>

</html>

6- attributes without quotes does not work

 

<!DOCTYPE html>

<html>

<body>

 

<h1>About onetoptrend</h1>

 

<p title=About onetoptrend>

You cannot omit quotes around an attribute value

if the value contains spaces.

</p>

 

<p><b>

If you move the mouse over the paragraph above,

your browser will only display the first word from the title.

</b></p>

 

</body>

</html>

 

————————————————————————————————————

HTML Headings

1-HTML headings

 

<!DOCTYPE html>

<html>

<body>

 

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

 

</body>

</html>

2-HTML horizontal rules

 

<!DOCTYPE html>

<html>

<body>

 

<h1>This is heading 1</h1>

<p>This is some text.</p>

<hr>

 

<h2>This is heading 2</h2>

<p>This is some other text.</p>

<hr>

 

<h2>This is heading 2</h2>

<p>This is some other text.</p>

 

</body>

</html>

3-HTML head

 

<!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

<meta charset=”UTF-8″>

</head>

<body>

 

<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>

 

</body>

</html>

 

———————————————————————————————————————————————————-

HTML Paragraphs

1-HTML paragraphs

 

<!DOCTYPE html>

<html>

<body>

 

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

 

</body>

</html>

2-More HTML paragraphs

 

<!DOCTYPE html>

<html>

<body>

 

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

 

<p>

This paragraph

contains      a lot of spaces

in the source     code,

but the    browser

ignores it.

</p>

 

<p>

The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.

</p>

 

</body>

</html>

3-The use of line breaks in HTML

 

<!DOCTYPE html>

<html>

<body>

 

<p>This is<br>a paragraph<br>with line breaks</p>

 

</body>

</html>

4-Poem problems (some problems with HTML formatting)

 

<!DOCTYPE html>

<html>

<body>

 

<p>In HTML, spaces and new lines are ignored:</p>

 

<p>

 

My Bonnie lies over the ocean.

 

My Bonnie lies over the sea.

 

My Bonnie lies over the ocean.

 

Oh, bring back my Bonnie to me.

 

</p>

 

</body>

</html>

5-How to control the line breaks and spaces with the <pre> tag

 

<!DOCTYPE html>

<html>

<body>

 

<p>The pre tag preserves both spaces and line breaks:</p>

 

<pre>

My Bonnie lies over the ocean.

 

My Bonnie lies over the sea.

 

My Bonnie lies over the ocean.

 

Oh, bring back my Bonnie to me.

</pre>

 

</body>

</html>

 

———————————————————————————————————————————————————-

HTML Styles

1-HTML styles

 

<!DOCTYPE html>

<html>

<body>

 

<p>I am normal</p>

<p style=”color:red;”>I am red</p>

<p style=”color:blue;”>I am blue</p>

<p style=”font-size:50px;”>I am big</p>

 

</body>

</html>

 

2-HTML background color

 

<!DOCTYPE html>

<html>

<body style=”background-color:powderblue;”>

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

 

3-HTML text color

 

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”color:blue;”>This is a heading</h1>

<p style=”color:red;”>This is a paragraph.</p>

 

</body>

</html>

 

4-HTML text font

 

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”font-family:verdana;”>This is a heading</h1>

<p style=”font-family:courier;”>This is a paragraph.</p>

 

</body>

</html>

 

5-HTML text size

 

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”font-size:300%;”>This is a heading</h1>

<p style=”font-size:160%;”>This is a paragraph.</p>

 

</body>

</html>

 

6-HTML text alignment

 

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”text-align:center;”>Centered Heading</h1>

<p style=”text-align:center;”>Centered paragraph.</p>

 

</body>

</html>

 

———————————————————————————————————————————————————-

HTML Text Formatting

1-Bold formatting using the <b> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><b>This text is bold.</b></p>

 

</body>

</html>

 

2-Strong formatting using the <strong> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><strong>This text is strong.</strong></p>

 

</body>

</html>

 

3-Italic formatting using the <i> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><i>This text is italic.</i></p>

 

</body>

</html>

 

4-Emphasized formatting using the <em> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><em>This text is emphasized.</em></p>

 

</body>

</html>

 

5-Small formatting using the <small> element

 

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML <small>Small</small> Formatting</h2>

 

</body>

</html>

 

6-Marked formatting using the <mark> element

 

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML <mark>Marked</mark> Formatting</h2>

 

</body>

</html>

 

7-Marked deleted using the <del> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>The del element represents deleted (removed) text.</p>

 

<p>My favorite color is <del>blue</del> red.</p>

 

</body>

</html>

8-Marked inserted using the <ins> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>The ins element represent inserted (added) text.</p>

 

<p>My favorite <ins>color</ins> is red.</p>

 

</body>

</html>

 

9-Marked deleted and inserted using <del> and <ins>

 

<!DOCTYPE html>

<html>

<body>

 

The del element represent deleted (removed) text.

The ins element represent inserted (added) text.

 

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

 

</body>

</html>

 

10-Subscript formatting using the <sub> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>This is <sub>subscripted</sub> text.</p>

 

</body>

</html>

 

11-Superscript formatting using the <sup> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>This is <sup>superscripted</sup> text.</p>

 

</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *