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

HTML Example Part-2

HTML Quotations and Citations

 

1-Formatting short quotations with the <q> element.

 

<!DOCTYPE html>

<html>

<body>

 

<p>Browsers usually insert quotation marks around the q element.</p>

 

<p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q></p>

 

</body>

</html>

 

2-Formatting quoted sections with the <blockquote> element.

 

<!DOCTYPE html>

<html>

<body>

 

<p>Browsers usually indent blockquote elements.</p>

 

<blockquote cite=”http://www.worldwildlife.org/who/index.html”>

For 50 years, WWF has been protecting the future of nature.

The world’s leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

</blockquote>

 

</body>

</html>

 

3-Formatting document author/owner information with the <address> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>Browsers usually indent blockquote elements.</p>

 

<blockquote cite=”http://www.worldwildlife.org/who/index.html”>

For 50 years, WWF has been protecting the future of nature.

The world’s leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

</blockquote>

 

</body>

</html>

 

4-Formatting abbreviations and acronyms the <abbr> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>

 

<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>

 

</body>

</html>

 

5-Formatting work title with the <cite> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>The HTML cite element defines the title of a work.</p>

<p>Browsers usually display cite elements in italic.</p>

 

<img src=”img_the_scream.jpg” width=”220″ height=”277″ alt=”The Scream”>

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

 

</body>

</html>

 

6-Formatting text direction with the <bdo> element

 

<!DOCTYPE html>

<html>

<body>

 

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

 

<bdo dir=”rtl”>This line will be written from right to left</bdo>

 

</body>

</html>

 

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

 

HTML Comments

 

1-Hidden comments

 

<!DOCTYPE html>

<html>

<body>

 

<!– This is a comment –>

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

<!– Comments are not displayed in the browser –>

 

</body>

</html>

 

2-Conditional comments

 

<!DOCTYPE html>

<html>

<body>

 

<!–[if IE 5]>This is IE 5<br><![endif]–>

<!–[if IE 6]>This is IE 6<br><![endif]–>

<!–[if IE 7]>This is IE 7<br><![endif]–>

<!–[if IE 8]>This is IE 8<br><![endif]–>

<!–[if IE 9]>This is IE 9<br><![endif]–>

 

</body>

</html>

 

3-Comments for debugging

 

<!DOCTYPE html>

<html>

<body>

 

<!– Do not display this at the moment

<img border=”0″ src=”pic_trulli.jpg” alt=”Trulli”>

–>

 

</body>

</html>

 

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

HTML CSS

 

1-HTML with inline CSS

 

<!DOCTYPE html>

<html>

<body>

 

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

 

</body>

</html>

 

2-HTML with internal CSS

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1   {color: blue;}

p    {color: red;}

</style>

</head>

<body>

 

<h1>This is a heading</h1>

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

 

</body>

</html>

 

3-HTML with external CSS

 

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

 

<h1>This is a heading</h1>

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

 

</body>

</html>

 

4-HTML with CSS fonts

 

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: blue;

font-family: verdana;

font-size: 300%;

 

}

p  {

color: red;

font-family: courier;

font-size: 160%;

}

</style>

</head>

<body>

 

<h1>This is a heading</h1>

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

 

</body>

</html>

 

5-HTML with CSS using the id attribute

 

<!DOCTYPE html>

<html>

<head>

<style>

#p01 {

color: blue;

}

</style>

</head>

<body>

 

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

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

<p id=”p01″>I am different.</p>

 

</body>

</html>

 

6-HTML with CSS using the class attribute

 

<!DOCTYPE html>

<html>

<head>

<style>

p.error {

color: red;

}

</style>

</head>

<body>

 

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

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

<p class=”error”>I am different.</p>

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

<p class=”error”>I am different too.</p>

 

</body>

</html>

 

7-HTML and CSS borders

 

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 1px solid powderblue;

}

</style>

</head>

<body>

 

<h1>This is a heading</h1>

 

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

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

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

 

</body>

</html>

 

8-HTML and CSS padding

 

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 1px solid powderblue;

padding: 30px;

}

</style>

</head>

<body>

 

<h1>This is a heading</h1>

 

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

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

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

 

</body>

</html>

 

9-HTML and CSS margin

 

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 1px solid powderblue;

margin: 50px;

}

</style>

</head>

<body>

 

<h1>This is a heading</h1>

 

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

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

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

 

</body>

</html>

 

10-HTML and CSS full demo

 

<!DOCTYPE html>

<html>

<body>

 

<div style=”position:relative;”>

<div style=”opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF”></div>

<div style=”opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;background-color:#73AD21″></div>

<div style=”margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;”>

<h1>CSS = Styles and Colors</h1>

<div style=”letter-spacing:12px;font-size:15px;position:relative;left:25px;top:25px;”>Manipulate Text</div>

<div style=”color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:30px;”>Colors,

<span style=”background-color:#B4009E;color:#ffffff;”> Boxes</span></div>

</div>

</div>

 

</body>

</html>

 

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

 

HTML Links

 

1-Linking, using an absolute URL

 

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Links</h2>

<p><a href=”https://www.example.com/html/”>Visit our HTML tutorial</a></p>

 

</body>

</html>

2-Linking, using a relative URL

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Local Links</h2>

 

<p><a href=”html_images.asp”>HTML Images</a> is a link to a page on this website.</p>

 

<p><a href=”https://www.example.org/”>W3C</a> is a link to a website on the World Wide Web.</p>

 

</body>

</html>

 

3-Changing the color of links

 

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

color: green;

background-color: transparent;

text-decoration: none;

}

a:visited {

color: pink;

background-color: transparent;

text-decoration: none;

}

a:hover {

color: red;

background-color: transparent;

text-decoration: underline;

}

a:active {

color: yellow;

background-color: transparent;

text-decoration: underline;

}

</style>

</head>

<body>

 

<h2>Link Colors</h2>

 

<p>You can change the default colors of links</p>

 

<a href=”html_images.asp” target=”_blank”>HTML Images</a>

 

</body>

</html>

 

4-Removing the underline from links

 

<!DOCTYPE html>

<html>

<body>

 

<a href=”html_images.asp” style=”text-decoration:none”>HTML Images</a>

 

</body>

</html>

 

5-Changing the target of a link

 

<!DOCTYPE html>

<html>

<body>

 

<h2>The target Attribute</h2>

 

<a href=”https://www.example.com/html/” target=”_blank”>Visit our HTML tutorial!</a>

 

<p>If you set the target attribute to “_blank”, the link will open in a new browser window or tab.</p>

 

</body>

</html>

 

6-An image as a link

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Links</h2>

 

<p>The image is a link. You can click on it.</p>

 

<a href=”default.asp”>

<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0″>

</a>

 

<p>We have added “border:0” to prevent IE9 (and earlier) from displaying a border around the image.</p>

 

</body>

</html>

 

7-Creating a bookmark link

 

<!DOCTYPE html>

<html>

<body>

 

<p><a href=”#C4″>Jump to Chapter 4</a></p>

 

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

 

<h2 id=”C4″>Chapter 4</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 6</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 11</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 12</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 13</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 14</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 15</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 16</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 17</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 18</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 19</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 20</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 21</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 22</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 23</h2>

<p>This chapter explains ba bla bla</p>

 

</body>

</html>

 

8-A link that breaks out of a frame

 

<!DOCTYPE html>

<html>

<body>

 

<p>Locked in a frame? <a href=”https://www.example.com/html/” target=”_top”>Click here!</a></p>

 

</body>

</html>

 

9-A mailto link

 

<!DOCTYPE html>

<html>

<body>

 

<p>

This is an email link:

<a href=”mailto:someone@example.com?Subject=Hello%20again” target=”_top”>

Send Mail</a>

</p>

 

<p>The link will only work if you have email installed.</p>

 

<p>(Spaces between words should be replaced by %20 to ensure that the browser will display the text properly)</p>

 

</body>

</html>

 

10-A mailto link with subject

 

<!DOCTYPE html>

<html>

<body>

 

<p>

This is another mailto link:

<a href=”mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!” target=”_top”>Send mail!</a>

</p>

 

<p>The link will only work if you have email installed.</p>

 

<p>(Spaces between words should be replaced by %20 to ensure that the browser will display the text properly)</p>

 

</body>

</html>

Leave a Reply

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