0% found this document useful (0 votes)
2 views

01-Web Technology HTML Examples

The document provides multiple examples of HTML code snippets demonstrating various web technologies. It includes basic structures for headings, paragraphs, links, images, buttons, lists, and metadata. Each example illustrates different HTML elements and their usage in web development.

Uploaded by

pubgupdate711
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
0% found this document useful (0 votes)
2 views

01-Web Technology HTML Examples

The document provides multiple examples of HTML code snippets demonstrating various web technologies. It includes basic structures for headings, paragraphs, links, images, buttons, lists, and metadata. Each example illustrates different HTML elements and their usage in web development.

Uploaded by

pubgupdate711
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
You are on page 1/ 4

Web Technology Examples:

1.

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

2. <!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. <!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the a tag:</p>


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

</body>

</html>

4. <!DOCTYPE html>

<html>

<body>

<h2>HTML Images</h2>

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

<img src="sample.jpg" alt="W3Schools.com" width="104" height="142">

</body>

</html>

(Copy any one JPG file from your c:\windows\web\wallpaper folder and use its name in <img src=””> place)

5. <!DOCTYPE html>

<html>

<body>

<h2>HTML Buttons</h2>

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

<button>Click me</button>

</body>

</html>

6. <!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>

7. <!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>

8. <!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>

9.

<!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</head>

<body>

<p>The HTML head element contains meta data.

<br>Meta data is data about the HTML document. This line is in new line due to linebreak</p>

</body>

</html>

10. <!DOCTYPE html>

<html>

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

<h1>This is a heading</h1>

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

</body>

</html>

You might also like