Scribd
Upload
0 views

html

The document provides an overview of HTML elements, including headings, paragraphs, links, images, buttons, lists, and text formatting. It explains how to use various tags and attributes to style text, set background colors, and define lists. Additionally, it includes examples of using colors and fonts in HTML.

Uploaded by

madihahena1
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 views

html

The document provides an overview of HTML elements, including headings, paragraphs, links, images, buttons, lists, and text formatting. It explains how to use various tags and attributes to style text, set background colors, and define lists. Additionally, it includes examples of using colors and fonts in HTML.

Uploaded by

madihahena1
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

HTML Document

Code
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
HTML Headings

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs

• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links

• HTML links are defined with the < a > tag


• <a href="https://www.w3schools.com">This is a
link</a>
HTML Images

• HTML images are defined with the <img>tag


• <img src="w3schools.jpg" alt="W3Schools.com" width="104" height=
"142">
HTML Buttons

• <button>Click me</button>
HTML Lists
• HTML lists are defined with the <ul> unordered/bullet
list) or the <ol> (ordered/numbered list) tag, followed
by <li> tags (list items)
• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML Background Color

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

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

</body>
HTML Text Color

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


<p style="color:red;">This is a paragraph.</p>
HTML Fonts

• <h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
HTML Text Size

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


<p style="font-size:160%;">This is a paragraph.</p>
HTML Text Alignment

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


<p style="text-align:center;">Centered paragraph.</p>
HTML Text Formatting

• <!DOCTYPE html>
• <html>
• <body>

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


• <p><i>This text is italic</i></p>
• <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

• </body>
• </html>
Text
Formatting elements were designed to display special types of text:
•<b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Small text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
HTML bold and strong
• <!DOCTYPE html>
• <html>
• <body>

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

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

• </body>
• </html>
• Strong
• <strong>This text is strong</strong>
HTML Colors
• In HTML, a color can be specified by using a color name:
• Tomato
• Orange
• DodgerBlue
• MediumSeaGreen
• Gray
• SlateBlue
• Violet
• LightGray
continue
• <!DOCTYPE html>
• <html>
• <body>

• <h1 style="background-color:Tomato;">Tomato</h1>
• <h1 style="background-color:Orange;">Orange</h1>
• <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
• <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
• <h1 style="background-color:Gray;">Gray</h1>
• <h1 style="background-color:SlateBlue;">SlateBlue</h1>
• <h1 style="background-color:Violet;">Violet</h1>
• <h1 style="background-color:LightGray;">LightGray</h1>

• </body>
• </html>

You might also like