HTML Text
Formatting
Prepared by: Era Marie F. Gannaban
HTML FORMATTING ELEMENTS
• <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
• <b>This text is bold</b>
• <strong>This text is important!</strong>
• <i>This text is italic</i>
• <em>This text is emphasized</em>
• <small>This is some smaller text.</small>
• <p>Do not forget to buy <mark>milk</mark> today.</p>
• <p>My favorite color is <del>blue</del> red.</p>
• <p>My favorite color
is <del>blue</del> <ins>red</ins>.</p>
• <p>This is <sup>superscripted</sup> text.</p>
HTML COMMENTS
• <!-- Write your comments here -->
• <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here --
>
• <!-- Do not display this image at the moment
<img border="0" src="pic_trulli.jpg"
alt="Trulli">
-->
HTML Colors
• HTML colors are specified with predefined color
names, or with RGB, HEX, HSL, RGBA, or HSLA
values.
BACKGROUND COLOR
• <h1 style="background-
color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>
Text Color
• <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem
ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi
enim...</p>
Border Color
• <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>
• <h1 style="background-color:rgb(255, 99,
71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1
>
<h1 style="background-color:hsl(9, 100%,
64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71,
0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%,
64%, 0.5);">...</h1>
HTML Links
• The most important attribute of the <a> element is the href
attribute, which indicates the link's destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified
URL address.
• <a href="url">link text</a>
• <a href="https://www.w3schools.com/">Visit
W3Schools.com!</a>
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Target Attribute
• The target attribute specifies where to open the linked
document.
• The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab
as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
Example
• <a href="https://
www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
Absolute URLs vs. Relative URLs
• A local link (a link to a page within the same website) is
specified with a relative URL (without the "https://www"
part):
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</
a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML
Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Use an image as link
• <a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
• Link to an Email Address
• Use mailto: inside the href attribute to
create a link that opens the user's email
program (to let them send a new email):
• <a href="mailto:[email protected]">Send
email</a>
Button as link
• <button onclick="document.location='default.a
sp'">HTML Tutorial</button>
Link Titles
• <a href="https://www.w3schools.com/
html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
• Use the <a> element to define a link
• Use the href attribute to define the link address
• Use the target attribute to define where to open the linked
document
• Use the <img> element (inside <a>) to use an image as a link
• Use the mailto: scheme inside the href attribute to create a link
that opens the user's email program
HTML Images
• <img src="pic_trulli.jpg" alt="Italian
Trulli">
• <img src="img_girl.jpg" alt="Girl in a
jacket">
• <img src="img_chania.jpg" alt="Flowers in
Chania">
• The HTML <img> tag is used to embed an image in a web
page.
• Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding
space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does
not have a closing tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
• <img src="url" alt="alternatetext">
• <img src="img_chania.jpg" alt="Flowers in
Chania">
• <img src="img_chania.jpg" alt="Flowers in
Chania">
• <img src="wrongname.gif" alt="Flowers in
Chania">
• <img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
• <img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
• <!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
</body>
</html>
• <img src="https://www.w3schools.com/images/
w3schools_green.jpg" alt="W3Schools.com">
• <img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
• <a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
• <p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42
px;">
The image will float to the right of the
text.</p>
<p><img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42p
x;">
The image will float to the left of the
text.</p>
Common Image Formats
• Use the HTML <img> element to define an image
• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an
image, if it cannot be displayed
• Use the HTML width and height attributes or the CSS width
and height properties to define the size of the image
• Use the CSS float property to let the image float to the left or
to the right
HTML Image Maps
• <img src="workplace.jpg" alt="Workplace" usem
ap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" a
lt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" al
t="Coffee" href="coffee.htm">
</map>
The image is inserted using the <img> tag
• <img src="workplace.jpg" alt="Workplace" usem
ap="#workmap">
Then, add a <map> element.
The <map> element is used to create an image
map, and is linked to the image by using the
required name attribute:
<map name="workmap">
• A clickable area is defined using an <area> element.
•rect - defines a rectangular region
•circle - defines a circular region
•poly - defines a polygonal region
•default - defines the entire region
•<area shape="rect" coords="34, 44, 270,
350" href="computer.htm">
Thank You!
