Scribd
Upload
7 views18 pages

Lec 03

The document provides an overview of various HTML elements, including the <pre> element for preformatted text, background color properties, and text formatting elements such as bold, italic, and emphasized text. It also covers HTML elements for quotations, computer code formatting, alignment, font attributes, and lists. Additionally, it discusses block and inline elements, along with common troubleshooting tips for HTML issues.

Uploaded by

zkryaalhsany411
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
7 views18 pages

Lec 03

The document provides an overview of various HTML elements, including the <pre> element for preformatted text, background color properties, and text formatting elements such as bold, italic, and emphasized text. It also covers HTML elements for quotations, computer code formatting, alignment, font attributes, and lists. Additionally, it discusses block and inline elements, along with common troubleshooting tips for HTML issues.

Uploaded by

zkryaalhsany411
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/ 18

2024-11-09

Lecture 3

H T M L Elements

Dr. Mohammed Shobail

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:

1
2024-11-09

HTML Background Colour


✓ The background-color property defines the
background color for an HTML element: such as
✓ It can be added into <body> element changes the
background color of the howl page.
✓ It can be added into <h1> to changes its background color.
✓ …..

HTML Background Colour...

2
2024-11-09

HTML Text Formatting Elements


✓ HTML defines special elements for defining text with a
special meaning.
✓ Formatting elements special types of text were designed to
display:
– Bold text – Small and big text
– Important text – Deleted text
– Italic text – Inserted text
– Emphasized text – Subscripts
– Marked text – Superscripts
5

HTML Text Formatting Elements...


✓ Bold text
– The HTML <b> element defines bold text

– Or, we can use <strong> element to bold the text

3
2024-11-09

HTML Text Formatting Elements...


✓ HTML Italic and Emphasized Formatting:
– The HTML <i> element defines italic text

– The HTML <em> element defines emphasized text

HTML Text Formatting Elements...


✓ Small and big text
– It is a way to maximize or minimize the text size.
– To minimize the text size use <small> element, and
maximize the text size use <big> element.

4
2024-11-09

HTML Text Formatting Elements...


✓ HTML Marked Formatting
– The HTML <mark> element defines marked or highlighted
text:

✓ HTML Deleted Formatting


– The HTML <del> element defines deleted (removed) text.

HTML Text Formatting Elements...


✓ HTML Inserted Formatting
– The HTML <ins> element defines inserted (added) text.

10

5
2024-11-09

HTML Text Formatting Elements...


✓ HTML Subscript Formatting
– The HTML <sub> element defines subscripted text.

– HTML Superscript Formatting


– The HTML <sup> element defines superscripted text.

11

Text direction
✓ Right to Left
<html dir="rtl">
<p dir=“rtl”> your paragraph </p>

✓ Left to Right
<html dir=“ltr">
<p dir=“ltr”> your paragraph </p>

12

6
2024-11-09

HTML Quotation
✓ HTML defines some elements for quotation such as:
✓ Blockquotes
– Content of <blockquote>
– To set a block of text off from the normal flow and
appearance of text

13

HTML Computer Code Elements


✓ HTML Computer Code Formatting
– HTML normally uses variable letter size and spacing.
– This is not wanted when displaying examples of computer code. HTML
– defines the below elements for computer code formatting:
– <kbd> defines keyboard input
– <samp> defines sample output from a computer program.
– <code> defines a piece of programming code.
• Notice that the <code> element does not preserve extra
whitespace and line-breaks.
• To fix this, you can a put the <code> element inside
<pre> element
14

7
2024-11-09

HTML Computer Code Elements...

15

HTML Computer Code Elements...

16

8
2024-11-09

Alignment
✓ <p align="left">Left aligned paragraph</p>
✓ <p align="center">Centered paragraph</p>
✓ <p align="right">Right aligned paragraph</p>
✓ <p align="justify">Right aligned paragraph</p>

17

Font color
✓ To add the font color we should use an attribute called
color inside the opening font tag
This is <font color="red">Red</font> and This
is <font color="blue">Blue</font>

This is Red and This is Blue

18

9
2024-11-09

Font type
<font face="Verdana">Verdana Text</font><br>
<font face="Courier New">Courier New Text</font>

<font face="Courier New, Verdana, Arial, Times New Roman


">write your Text here…. </font>
• Make sure to write the correct font name
• If the computer doesn’t support the first font type, it will go to the
second type and so on.
19

Font size
There are 7 font size, the default font size is 3,
<font size="+4">Size 7</font><br>
<font size="+3">Size 6</font><br>
<font size="+2">Size 5</font><br>
<font size="+1">Size 4</font><br>
<font size=“+0">Size 3</font><br>
<font size="-1">Size 2</font><br>
<font size="-2">Size 1</font><br>
20

10
2024-11-09

Font size...
Or directly you can choose the font size
<font size="7">Size 7</font><br>
<font size="6">Size 6</font><br>
<font size="5">Size 5</font><br>
<font size="4">Size 4</font><br>
<font size="3">Size 3</font><br>
<font size="2">Size 2</font><br>
<font size="1">Size 1</font>
21

Font size...
✓ Another way to maximize or minimize the font by on step is
using <small> or <big> (based on the default font size)

<big>size 4</big><br>
<small>size 2</small><br>
<big><big>size 5</big></big><br>

22

11
2024-11-09

Horizontal Line <hr>


✓ Width: to specify the line width such as 19, 293 ,… by pixel or by
percentage from the page width such as 20% or 85% Size:
✓ to specify the line height
✓ Color: to specify the line color

This is the First Line


<hr>
This is the Secound Line
<hr color="Purple">
This is the Third Line
<hr width="30%">
23

Add an Image
✓

• The src attribute provides the name of the image file that should be
inserted, and the alt attribute provides text that should be displayed if the
image is not available.
<img src="images.jpg" width=200 high=200 alt="my Image">
24

12
2024-11-09

List attribute
The attribute type used in ordered list and unordered list. (li: List Item)

Ordered Lists:
Unordered Lists:
<ol type="A"> 1: <ul type="circle">
1, 2, 3, 4, …. circle, square, disc
a: a, b, c, d,…. A:
A, B, C, D,....
i: i, ii, iii, iv,.... I:
I, II, III, IV,….

25

List attribute...
✓ <ol type="I">
<li>Windows (85%)
<li>Linux (10%)
<li>Mac (3%)
<li>Other (2%)
</ol>

<ul type="circle">
<li>Pepsi
<li>Crash
<li>7 Up
</ul>
26

13
2024-11-09

List attribute…

<li>German Companies
<li>Microsoft

<li>6

<li>7
<li>General

<li>Dubian
<li>BMW
<ul>
<li>American
Nested attribute:

</ol>
<ol>

<ol>
Companies

Motors

Class
<ol>

27

HTML Block and Inline Elements


✓ Every HTML element has a default display value depending on what type of
element it is. The default display value for most elements is block or inline.
Block-level Elements
✓
– A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can).
– Examples of block-level elements:
– <div>
– <h1> - <h6>
– <p>
– <form>

28

14
2024-11-09

HTML Block and Inline Elements…


✓ Inline Elements
– An inline element does not start on a new line and only
takes up as much width as necessary.
– Examples of inline elements:
– <span>
– <a>
– <img>

29

HTML Block and Inline Elements…


✓ The <div> Element
– The <div> element is a block-level element that is often
used as a container for other HTML elements.
– The <div> element has no required attributes, but
style and class are common.
– When used together with CSS, the <div> element can be
used to style blocks of content:

30

15
2024-11-09

HTML Block and Inline Elements…

31

HTML Block and Inline Elements…


✓ The <span> Element
– The <span> element is an inline element that is often
used as a container for some text.
– The <span> element has no required attributes, but
style and class are common.
– When used together with CSS, the <span> element can be
used to style parts of the text:

32

16
2024-11-09

HTML Block and Inline Elements…

33

Having Problems?
✓ I’ve changed my document, but when I reload the page in my
browser, it looks exactly the same.
– It could be you didn’t save your document before reloading, or you
may have saved it in a different directory.
✓
Half my page disappeared.
– This could happen if you are missing a closing bracket (>) or a
quotation mark within a tag. This is a common error when writing
HTML by hand.

34

17
2024-11-09

Having Problems?...
✓ I put in a graphic using the img element, but all that shows up is a
broken image icon.
– The broken graphic could mean a couple of things.
• it might mean that the browser is not finding the graphic. Make
sure that the URL to the image file is correct.
• Make sure that the image file is actually in the directory you’ve
specified.
• If the file is there, make sure it is in one of the formats that
web browsers can display (GIF, JPEG, or PNG) and that it is
named with the proper suffix (.gif, .jpeg or
.jpg, or .png, respectively).
35

18

You might also like