Scribd
Upload
21 views

_Lec03_HTML Elements

The document provides an overview of HTML headings, paragraphs, styles, and text formatting elements. It explains the use of various HTML tags for structuring content, styling elements, and formatting text, including examples for each. Key elements include headings (<h1> to <h6>), paragraphs (<p>), and formatting tags like <b>, <i>, <em>, <mark>, <del>, <ins>, <sub>, and <sup>.

Uploaded by

ahmeddhamed179
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
21 views

_Lec03_HTML Elements

The document provides an overview of HTML headings, paragraphs, styles, and text formatting elements. It explains the use of various HTML tags for structuring content, styling elements, and formatting text, including examples for each. Key elements include headings (<h1> to <h6>), paragraphs (<p>), and formatting tags like <b>, <i>, <em>, <mark>, <del>, <ins>, <sub>, and <sup>.

Uploaded by

ahmeddhamed179
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/ 79

HTML Headings

• HTML headings are titles or subtitles that you want to


display on a webpage.
Example
<!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>
Page 1 of 6
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the
least important heading.

Example
<!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>
Page 2 of 6
Headings are Important:
• Search engines use the headings to index the
structure and content of your web pages.
• Users often scan a page by its headings. It is important
to use headings to show the document structure.

<h1> headings should be used for main headings,


followed by <h2> headings, then the less important
<h3>, and so on.

• HTML headings for headings only. Don't use


headings to make text BIG or bold.
Page 3 of 6
Bigger Headings:
• Each HTML heading has a default size.
• You can specify the size for any heading with the style
attribute, using the CSS font-size property:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the
style attribute, using the font-size property.</p>
</body>
</html>

Page 4 of 6
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings

Page 5 of 6
Exercise?
Which of the following headers is the largest and most
important header?
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Page 6 of 6
HTML Paragraphs

• A paragraph always starts on a new line, and is


usually a block of text.

HTML Paragraphs
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and
browsers automatically add some white space (a
margin) before and after a paragraph.

Page 1 of 15
Example
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

Page 2 of 15
HTML Display
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will
create different results.
• With HTML, you cannot change the display by
adding extra spaces or extra lines in your HTML
code.
• The browser will automatically remove any extra
spaces and lines when the page is displayed:

Page 3 of 15
Example
<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
Page 4 of 15
<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
Page 5 of 15
browser window, the number of lines in this
paragraph will change.
</p>

</body>
</html>

Page 6 of 15
HTML Horizontal Rules
• The <hr> tag defines a thematic break in an HTML
page, and is most often displayed as a horizontal rule.

• The <hr> element is used to separate content (or


define a change) in an HTML page:

• The <hr> tag is an empty tag, which means that it


has no end tag.

Page 7 of 15
Example
<!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>
Page 8 of 15
The HTML <br> element
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line)
without starting a new paragraph:
• The <br> tag is an empty tag, which means that it
has no end tag.

Page 9 of 15
Example
<!DOCTYPE html>
<html>
<body>

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


breaks.</p>

</body>
</html>

Page 10 of 15
Example: This text will display on a single line:
<!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>
Page 11 of 15
Solution - The HTML <pre> Element
• The HTML <pre> element defines preformatted
text.
• The text inside a <pre> element is displayed in a
fixed-width font (usually Courier), and it preserves
both spaces and line breaks:

Page 12 of 15
Example
<!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>

Page 13 of 15
Tag Description
<p> Defines a paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text

Page 14 of 15
Exercise?
True or False:
HTML paragraphs always starts on a new line.

True

Page 15 of 15
HTML Styles
• The HTML style attribute is used to add styles to an
element, such as color, font, size, and more.
Example
<!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>
Page 1 of 10
The HTML Style Attribute
• Setting the style of an HTML element, can be done
with the style attribute.
• The HTML style attribute has the following syntax:

<tagname style="property:value;">

• The property is a CSS property. The value is a CSS


value.

Page 2 of 10
Background Color
• The CSS background-color property defines the
background color for an HTML element.
Example: Set the background color for a page to
powderblue:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Page 3 of 10
Example: Set background color for two different
elements:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">This
is a heading</h1>
<p style="background-color:tomato;">This is a
paragraph.</p>
</body>
</html>
Page 4 of 10
Text Color
• The CSS color property defines the text color for an
HTML element:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a blue heading</h1>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
Page 5 of 10
Fonts
• The CSS font-family property defines the font to be used
for an HTML element:
Example
<!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>
Page 6 of 10
Text Size
• The CSS font-size property defines the text size for
an HTML element:
Example
<!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>

Page 7 of 10
Text Alignment
• The CSS text-align property defines the horizontal text
alignment for an HTML element:

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>

Page 8 of 10
Summary:
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

Page 9 of 10
Exercise?

What is the correct way to add a background color to an


HTML document?
1) <body style='background-color:pink;'>
2) <body background-color='pink;'>
3) <body style='bgcolor:pink;'>

Page 10 of 10
HTML Text Formatting

HTML contains several elements for defining text with a


special meaning.

Example
This text is bold
This text is italic
This is subscript and superscript

Page 1 of 16
<!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>

Page 2 of 16
HTML Formatting Elements
• 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> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
Page 3 of 16
HTML <b> and <strong> Elements
• The HTML <b> element defines bold text, without
any extra importance.

Example
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
Page 4 of 16
• The HTML <strong> element defines text with
strong importance. The content inside is typically
displayed in bold.

Example
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is important!</strong></p>
</body>
</html>
Page 5 of 16
HTML <i> and <em> Elements
• The HTML <i> element defines a part of text in an
alternate voice or mood. The content inside is
typically displayed in italic.
• The <i> tag is often used to indicate a technical term,
a phrase from another language, a thought, a ship
name, etc.

Page 6 of 16
Example
<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Page 7 of 16
• The HTML <em> element defines emphasized text.
The content inside is typically displayed in italic.
• A screen reader will pronounce the words in <em>
with an emphasis, using verbal stress.

Example
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
Page 8 of 16
HTML <small> Element
• The HTML <small> element defines smaller text:

Example:
<!DOCTYPE html>
<html>
<body>

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


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

</body>
</html>
Page 9 of 16
HTML <mark> Element
• The HTML <mark> element defines text that should
be marked or highlighted:

Example
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>

Page 10 of 16
HTML <del> Element
• The HTML <del> element defines text that has been
deleted from a document. Browsers will usually strike
a line through deleted text:

Example
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
Page 11 of 16
HTML <ins> Element
• The HTML <ins> element defines a text that has been
inserted into a document. Browsers will usually
underline inserted text:

Example
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del>
<ins>red</ins>.</p>
</body>
</html>
Page 12 of 16
HTML <sub> Element
• The HTML <sub> element defines subscript text.
Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller
font. Subscript text can be used for chemical
formulas, like H2O:
Example
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
Page 13 of 16
HTML <sup> Element
• The HTML <sup> element defines superscript text.
Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller
font. Superscript text can be used for footnotes, like
WWW[1]:
Example
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
Page 14 of 16
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
Page 15 of 16
Exercise?
Two of the following HTML elements make the text
bold, which two?
1. <em> and <b>
2. <strong> and <b>
3. <big> and <b>
4. <mark> and <b>

Page 16 of 16
HTML Quotation and Citation Elements

In this part, we will go through the <blockquote>,<q>,


<abbr>, <address>, <cite>, and <bdo> HTML
elements.

Page 1 of 13
HTML <blockquote> for Quotations

• The HTML <blockquote> element defines a section


that is quoted from another source.
• Browsers usually indent <blockquote> elements.

Page 2 of 13
Example
<!DOCTYPE html>
<html>
<body>
<p>Here is a quote from a website:</p>
<blockquote
cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature
thrive. As the world's leading conservation organization,
WWF works in nearly 100 countries. At every level, we
collaborate with people around the world to develop and
deliver innovative solutions that protect communities,
wildlife, and the places in which they live.
</blockquote>
</body>
</html>
Page 3 of 13
HTML <q> for Short Quotations
• The HTML <q> tag defines a short quotation.
• Browsers normally insert quotation marks around
the quotation.
Example
<!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>
Page 4 of 13
HTML <abbr> for Abbreviations
• The HTML <abbr> tag defines an abbreviation or an
acronym, like "HTML", "CSS", "Mr.", "Dr.",
"ASAP", "ATM".
• Marking abbreviations can give useful information to
browsers, translation systems and search engines.
• Use the global title attribute to show the description
for the abbreviation/acronym when you move the
mouse over the element.

Page 5 of 13
Example
<!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>
Page 6 of 13
HTML <address> for Contact Information
• The HTML <address> tag defines the contact
information for the author/owner of a document or an
article.
• The contact information can be an email address,
URL, physical address, phone number, social media
handle, etc.
• The text in the <address> element usually renders in
italic, and browsers will always add a line break
before and after the <address> element.

Page 7 of 13
Example
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact
information (author) of a document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
California<br>
USA
</address>
</body>
</html>
Page 8 of 13
HTML <cite> for Work Title
• The HTML <cite> tag defines the title of a creative
work (e.g. a book, a poem, a song, a movie, a
painting, a sculpture, etc.).

• The text in the <cite> element usually renders in


italic.

Page 9 of 13
Example
<!DOCTYPE html>
<html>
<body>
<p> HTML cite element defines title of a work.</p>
<p>Browsers usually display cite elements in
italic.</p>
<img src="https://www.w3schools.com/html/
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>
Page 10 of 13
HTML <bdo> for Bi-Directional Override
• BDO stands for Bi-Directional Override. The HTML
<bdo> tag is used to override the current text direction:
Example
<!DOCTYPE html>
<html>
<body>
<p>If your browser supports bi-directional override
(bdo), 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>
Page 11 of 13
HTML Quotation and Citation Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the
author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another
source
<cite> Defines the title of a work
<q> Defines a short inline quotation

Page 12 of 13
Exercise?
Which of the following is NOT a quotation element (in
fact, not an HTML element at all)?
1. <q>
2. <quote>
3. <blockquote>

<quote>: This is not an HTML element. The correct


elements for quotations in HTML are <q> and
<blockquote>.

Page 13 of 13
HTML Comments

• HTML comments are not displayed in the browser, but


they can help document your HTML source code.

HTML Comment Tag


• You can add comments to your HTML source by using
the following syntax:

<!-- Write your comments here -->

• There is an exclamation point (!) in the start tag, but not


in the end tag.
• Note: Comments are not displayed by the browser, but
they can help document your HTML source code.
Page 1 of 7
Add Comments
• With comments you can place notifications and
reminders in your HTML code:

Example
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
Page 2 of 7
Hide Content
• Comments can be used to hide content.
• This can be helpful if you hide content temporarily:

Example
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
</body>
</html>
Page 3 of 7
• You can hide more than one line. Everything
between <!-- and --> will be hidden from the display.
Example: Hide a section of HTML code:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
</body>
</html>
Page 4 of 7
Comments are also great for debugging HTML,
because you can comment out HTML lines of code, one
at a time, to search for errors.

Page 5 of 7
Hide Inline Content
• Comments can be used to hide parts in the middle
of the HTML code.

Example: Hide a part of a paragraph:


<!DOCTYPE html>
<html>
<body>
<p>This <!-- great text --> is a paragraph.</p>
</body>
</html>

Page 6 of 7
Exercise?
What is the correct syntax for adding a comment in
HTML?
1. <-- This is a comment -->
2. <## This is a comment ##>
3. <--> This is a comment </-->
4. <!-- This is a comment -->

Page 7 of 7
HTML Colors

HTML colors are specified with predefined color names,


or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names
• In HTML, a color can be specified by using a color
name.
• HTML supports 140 standard color names.

Page 1 of 12
<!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>

Page 2 of 12
Background Color
• You can set the background color for HTML elements:

<h1 style="background-color:DodgerBlue;">Hello</h1>

<p style="background-color:Tomato;">Alex</p>

Page 3 of 12
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">
Hello World</h1>
<p style="background-color:Tomato;">
As I have seen, I will come to a minimum, who will
take part in the exercise of corporal punishment in
order to get some benefit from it.
</p>
</body>
</html>

Page 4 of 12
Text Color
You can set the color of text:

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Alex</p>

Page 5 of 12
Example:
<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;"> Alex</p>

<p style="color:MediumSeaGreenEgypt</p>

</body>
</html>
Page 6 of 12
Border Color
• You can set the color of borders:

Page 7 of 12
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello
World</h1>
<h1 style="border: 2px solid
DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello
World</h1>
</body>
</html>
Page 8 of 12
Color Values
• In HTML, colors can also be specified using RGB
values, HEX values, HSL values, RGBA values, and
HSLA values.
• The following three <div> elements have their
background color set with RGB, HEX, and HSL
values:

Page 9 of 12
Example
<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>


<h1 style="background-color:rgb(255, 99,
71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%,
64%);">hsl(9, 100%, 64%)</h1>

Page 10 of 12
<p>Same as color name "Tomato", but 50%
transparent:</p>
<h1 style="background-color:rgba(255, 99, 71,
0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%,
0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors


can be specified using RGB, HEX, HSL, or even
transparent colors using RGBA or HSLA color
values.</p>

</body>
</html>
Page 11 of 12
Exercise?
Do you remember any legal HTML color names? Which
one of the following is a legal HTML color?
1. Apple
2. Banana
3. Tomato

"Tomato" is a valid HTML color name, while "Apple"


and "Banana" are not recognized as legal color names
in HTML.

Page 12 of 12

You might also like