HTML

Declaring HTML in Document
Every HTML document must contain the following tag elements. Each tag has a different
meaning
The DOCTYPE declaration defines the document type to be HTML
<html> and </html> Describes the HTML document
<head> and </head> This tag provides the basic information about the document
<title> and </title> Title of the HTML Practical 1.1

document <!DOCTYPE html>
<html>
<head>
<body> and </body> Describes main HTML <title>Page Title</title>
body content in the document </head>
<body>
<h1> , <h2>, <h3>, <h4>, <h5>, <h6> etc <h1>HTML5 Example</h1>
<p>Declaring HTML5 Doctype.</p>
Describes the heading tags for the </body>
document </html>
<p> and </p> Describes the paragraph elements
Practical 1.2 Practical 1.3

<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Page Title</title>
</head> </head>
<body> <body>
<h1>First Heading</h1>
<h2>Second Heading</h2> <h1>HTML hr Tag Example</h1>
<h3>Third Heading</h3>
<h4>Fourth Heading</h4> <p>This is the first paragraph of text.
<h5>Fifth Heading</h5> </p>
<h6>Sixth Heading</h6>
<p>First paragraph.</p> <hr>
</body>
</html> <p>This is second paragraph of text.
</p>
</body>
</html>
Basic HTML Elements
HTML elements are the individual components of html document.
Everything we write in the HTML document are enclosed by html tags
HTML unordered list element HTML Ordered List Element
Practical 1.4 Practical 1.5

<html> <html>
<head> <head>
<title>Html Unorder list Tag</title>
</head> </head>
<body> <body>
<h1>HTML Unorder list Tag Example</h1> <h1>HTML order list Tag Example</h1>
<ol type=”1”>
<ul style="list-style- <li>first item</li>
type:disc"> <li>second item</li>
<li>first item</li> <li>third item</li>
<li>second item</li> </ol>
<li>third item</li> </p>
</ul> </body>
</html>
</body>
</html>
HTML Styles
Background Colour Background Colour 2
<html> <html>
<head> <head>
<title>After Applying HTML Style</title> <title>After Applying HTML Style</title>
</head> </head>
<body style="background-color:yellow;"> <body style="background-color: rgba(0, 0, 0, 0.8);">
<h1>Learning about HTML styles</h1>
<h1>Learning about HTML styles</h1> <p>HTML is super fun and easy to learn.</p>
<p>HTML is super fun and easy to learn.</p> </body>
</body> </html>
</html>
Text colour Font Size
<!DOCTYPE html> <h1 style="font-size:50px;">I am 60px
<html> Font size</h1>
<head> <h2 style="font-size:40px;">I am 40px
<title> HTML Style</title> Font size</h2>
</head> <h3 style="font-size:20px;">I am 20px
<body> Font size</h3>
<h1 style="color:green">Styled with green color</h1> <p style="font-size:10px;">I am 10px
<h2 style="color:red">Styled with red color.</h2> Font size</p>
<h3 style="color:orange">Styled with orange color</h3>
<p style="color:blue">Styled with blue color</p>
Font Alignment
<h1 style="text-align:center">Centered
</body>
Aligned</h1>
</html>
<h2 style="text-align:right">Right
Aligned</h2>
<h1 style="text-align:left">Left
Aligned</h1>
Alignment and colour
<h1 style="text-align:center;color:red;">Centered
Aligned</h1>
<h2 style="text-align:right;color:blue;">Right Aligned</h2>
<h1 style="text-align:left;color:green;">Left Aligned</h1>
HTML Text Formatting
<!DOCTYPE html>
<b> - Bold text
<html> <strong> - Important text
<body> <i> - Italic text
<em> - Emphasized text
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p> <mark> - Marked text
<p>This is<sub> subscript</sub> and <small> - Small text
<sup>superscript</sup></p> <del> - Deleted text
<ins> - Inserted text
</body>
</html> <sub> - Subscript text
<sup> - Superscript text
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>

<html> <html> <html>
<body> <body> <body>
<p>This text is normal.</p> <h2>HTML <mark>Marked</mark> <p>The del elementp>
<p><b>This text is bold.</b></p> Formatting</h2> <p>My favorite color is
</body> </body> <del>blue</del> red.</p>
</html> </html> </body>
</html>
HTML Links – Hyperlinks
Link to another site
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p><a href="https://www.Refreshcollege.com/html/">Click here to visit refresh college website</a></p>
</body>
</html>
Local Links
<!DOCTYPE html>
<html>
<body>
<h2>Local Links</h2>
<p><a href="Flower.jpg">HTML Images</a> Click here to view flower image.</p>
</body>
</html>
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="refreshlogo.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
</body>
</html>
HTML Images
Insert an image with defined height and width
<!DOCTYPE html>
<html>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
Floating image
<!DOCTYPE html>
<html>
<body>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="image1.gif" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>

<p>
<img src="image.jpg" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
</body>
</html>
HTML Tables HTML Block

<html> <html>
<body> <body>
<table style="width:100%"> <div style="background-color:black;color:white;padding:20px;">

<tr> <h2>London</h2>
<th>Firstname</th> <p>London is the capital city of England. It is the most populous
<th>Lastname</th> city in the United Kingdom, with a metropolitan area of over 13
<th>Age</th> million inhabitants.</p>
</tr> </div>
<tr>
<td>Jill</td> </body>
<td>Smith</td> </html>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Ex:1
Ex 02:
Ex 03:

HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

Declaring HTML in Document

The DOCTYPE declaration defines the document type to be HTML

<html> and </html> Describes the HTML document

<title> and </title> Title of the HTML Practical 1.1

<p> and </p> Describes the paragraph elements

Practical 1.2 Practical 1.3

Everything we write in the HTML document are enclosed by html tags

HTML unordered list element HTML Ordered List Element

Practical 1.4 Practical 1.5

HTML Text Formatting

<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

<p><strong>Float the image to the right:</strong></p>

<p><strong>Float the image to the left:</strong></p>

HTML Tables HTML Block

<table style="width:100%"> <div style="background-color:black;color:white;padding:20px;">

Вам также может понравиться