Scribd
Upload
2 views

HTML2

The document provides a comprehensive overview of HTML elements related to colors, images, and text formatting. It covers how to apply colors to various HTML elements, the use of the <img> tag for embedding images, and the significance of attributes like alt, width, height, and title. Additionally, it explains the use of tags such as <b>, <cite>, <em>, and <label> for text emphasis and accessibility in web design.

Uploaded by

Aegan Joshua Malapitan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML2

The document provides a comprehensive overview of HTML elements related to colors, images, and text formatting. It covers how to apply colors to various HTML elements, the use of the <img> tag for embedding images, and the significance of attributes like alt, width, height, and title. Additionally, it explains the use of tags such as <b>, <cite>, <em>, and <label> for text emphasis and accessibility in web design.

Uploaded by

Aegan Joshua Malapitan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Click to edit Master title style

HTML
Introduction

1
HTML Colors
Click to edit Master title style

HTML Colors can be applied to text, backgrounds, borders, links, forms,


tables, etc.
• This article provides an in-depth look at how colors can be applied to
various elements such as text, backgrounds, borders, links, forms, and
tables in HTML.
• We will explore different color formats including hexadecimal, RGB, RGBA,
HSL, and named colors, offering you precise control over the color
presentation on your web pages.
HTML Colors Name
• HTML color names offer a user-friendly way to specify colors. From classic
colors like Red, Green, Blue, Pink, Purple, Sky Blue, Gray, and Orange, to
more exotic shades, 2 2
Click to edit Master title style

3 3
HTML
Click Images
to edit Master title style

The HTML <img> tag is used to embed an image in web pages by


linking them. It creates a placeholder for the image, defined by
attributes like src, width, height, and alt, and does not require a
closing tag.

There are two ways to insert the images into a webpage:


•By providing a full path or address (URL) to access an internet file.
•By providing the file path relative to the location of the current web
page file.
4 4
Click to edit Master title style

Usage Descriptions Syntax

HTML Background Color is the


shade that appears behind the
content on a webpage. The <div style="background-color:
background covers the total size magenta;">
Background Color
of the element with padding and Div with magenta background
border but excludes the margin. It </div>
makes the text so easy to read
for the user.

Text color in HTML specifies <p style="color: pink;">


Text Color the color of the text content, Pink color is used
similar to font color. </p>

5 5
Click to edit Master title style

HTML Border Color refers to


<div style="border: 1px solid
the color of borders around
black; border-color: green;">
Border Color elements like <div>, <img>,
This div has a green border
etc. It defines the color of the
</div>
border lines.

HTML Link Color specifies the


color of the anchor tag within a
<a href="#" style="color: blue;">
webpage, allowing us to define
Link Color Link has a blue color
the color of clickable text, and
</a>
making user navigation more
visual.
6 6
Click to edit Master title style
HTML Image tag – alt Attribute

The alt attribute in <img> tag provides a text


alternative if the image fails to load. It aids
accessibility for users unable to view images
due to slow internet, src errors, or screen
reader usage.

7
7
Click to edit Master title style
Set Image Size – Width and Height Attribute

The width and height attributes are used to


specify the width and height of an image. The
attribute values are specified in pixels by
default. The width and height attributes are
always declared in pixels.

8 8
Click to edit Master title style
Adding Titles to an Image

The title attribute is displayed as a


tooltip when a user hovers over the
image. To add a title to an image,
include the title attribute in the <img>
tag.

9 9
Click to edit Master title style
Setting Style of an Image

In this example, we are using the border


property to decorate the image.By default,
every picture has a border around it. By using
the border attribute, the thickness of the
border can be changed. A thickness of “0”
means that there will be no border around the
picture.
1010
Click to edit Master title style
Set Image Alignment

Aligning an image in HTML involves using


the align attribute within the <img> tag to
position it horizontally. Options include left,
right, or center, enhancing page layout and
visual appeal.

1111
Click to edit Master title style

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>

<body> <body>
<img src= <img src=
"C:\Users\PC\Downloads\bagyo.png" "C:\Users\PC\Downloads\bagyo.png"
alt="Pogi ba?" /> alt="Pogi ba?“ width="300"
</body> height="300" border="5"/>
</body>
</html>
</html>

1
12
Click to edit Master title style

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>

<body> <body>
<img src= <img src=
"C:\Users\PC\Downloads\bagyo.png" "C:\Users\PC\Downloads\bagyo.png"
alt="Pogi ba?" alt="Pogi ba?"
width="200" width="200"
height="200" height="200"
title=“Bagyo Peels/> title=“Bagyo Peels/>
</body> </body>

</html> </html>

1
13
Click to edit
HTML b Master
Tag title style

The <b> tag in HTML is used to make the enclosed text bold, giving it
greater emphasis or visual importance. Unlike the <strong> tag, which
also makes text bold but with semantic importance. the <b> tag is
purely for styling purposes and does not carry semantic meaning.

<p>This is a <b>bold</b> word in this sentence.</p>

This is a bold word in this


sentence.

1414
Click to edit
HTML b Master
Tag title style

The <b> tag in HTML is used to make the enclosed text bold, giving it
greater emphasis or visual importance. Unlike the <strong> tag, which
also makes text bold but with semantic importance. the <b> tag is
purely for styling purposes and does not carry semantic meaning.

<p>This is a <b>bold</b> word in this sentence.</p>

This is a bold word in this


sentence.

1515
Click to edit Master
HTML cite Tag title style

The <cite> tag in HTML is used to define the title of a


creative work, such as a book, article, song, or movie. It is
typically used to provide a citation for a source of information
or to give credit to the original creator of the work.

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


<cite>This is cite tag text</cite>.

This is normal paragraph text


This is cite tag text
1616
Click to edit Master
HTML <em> Tag title style

HTML <em> tag is used to emphasize text, typically


rendering it in italics. It conveys importance or stress
semantically and is widely employed for emphasis within
paragraphs or sentences.
<h2>HTML em Tag</h2>
<em>Emphasized text content</em>

HTML em Tag
Emphasized text content

1717
Click to edit
HTML MasterTag
<label> title style

The <label> HTML element represents a caption for a form


element in a user interface. It improves accessibility by
linking text to form elements. When a user clicks on
the label, it automatically focuses on or activates
the associated input, such as text fields, checkboxes, or
radio buttons.

1818
ClickSupported Tags
to edit Master title style

The <label> tag can be defined with the following Tags:


•<input> input.html
•<button> button.html
label.html
•<output> output.html
• <progress>
•<select>
•<textarea>

1919

You might also like