Scribd
Upload
14 views66 pages

HTML 1

Uploaded by

Muhammad Rasool Al-Jaafrah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
14 views66 pages

HTML 1

Uploaded by

Muhammad Rasool Al-Jaafrah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 66

HTML5

BIT 381
HTML Introduction
HTML is the standard markup language for creating Web pages

HTML stands for Hyper Text Markup Language

HTML is the standard markup language for creating Web pages

HTML describes the structure of a Web page

HTML consists of a series of elements

HTML elements tell the browser how to display the content


A Simple HTML Document
• The <!DOCTYPE html> declaration defines that this document is an
HTML5 document.

• The <html> element is the root element of an HTML page

• The <head> element contains meta information about the HTML page

• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.

• The <h1> element defines a large heading

• The <p> element defines a paragraph


What is an HTML Element?

• An HTML element is defined by a start tag, some content, and an end


tag:
<tagname> Content goes here...</tagname>
• The HTML element is everything from the start tag to
the end tag:
<h1> My First Heading </h1>
<p> My first paragraph. </p>
HTML Editors

• Learn HTML Using Notepad or TextEdit


• Web pages can be created and modified by using professional HTML
editors.
• However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
• We believe in that using a simple text editor is a good way to learn
HTML.
• Save the HTML page ending with the extention .html
HTML Documents

• All HTML documents must start with a document type declaration:

<!DOCTYPE html>

• The HTML document itself begins with <html> and ends with </html>

• The visible part of the HTML document is between <body> and </body>
The <!DOCTYPE> Declaration

• The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.

• It must only appear once, at the top of the page (before any HTML tags).

• The <!DOCTYPE> declaration is not case sensitive.

• The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
HTML Headings
HTML Headings
HTML Paragraphs
HTML Links
HTML attributes
• Syntax:
• name = “value”
1) The href attribute
• The <a> tag defines a hyperlink
• The href attribute specifies the URL of the page the link goes to

• Example
• <a href = https://www.yu.edu.jo”> visit Yarmouk University web page
</a>
2) The src attribute
• The <img> tag is used to embed an image in an HTML page.
• The src attribute specifies the path of the image to be displayed on the
web page.
• Example: <img src = “…….path……”>
3) The width and height attributes

• The <img> tag should contain the width and height of the image in
pixels.
• Example:
• <img src= “……path…..” width=“200” height = “250”>
4) The alt attribute
• The alt attribute for the <img> tag specifies an alternate text for an
image , if the image for some reasons can not be displayed.
• Example:
• <img src="C:\Users\Qaisd\Desktop\Spring 2021\Examples at Home\petra.JFIF" width = "200" height = "250" alt = "PETRA Jordan" >
5) The style attribute
Some colors in HTML5
continue
The HTML Style Attribute

• <tagname style="property:value;">
• The property is a CSS property.
• The value is a CSS value.
• We will do more examples about CSS later
in this semester.
Background Color
Set background color for two different elements:
Text Color
Border Color
Fonts
Text Alignment
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
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
• HTML <b> and <strong> Elements
• The HTML <b> element defines bold text, without any extra
importance>

• The HTML <strong> element defines text with strong importance.


The content inside is typically displayed in bold.

• The HTML <em> element defines emphasized text. The content


inside is typically displayed in italic.
HTML <mark> Element

• The HTML < mark> element defines text that should be marked or
highlighted:
Example1
Example-2
Example-3
6) The lang attribute
7) The title attribute
HTML Comments
style Example
HTML5 Document Example
Web Page
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:

o HTML supports 140 standard color names.


Color Names
 Example-1

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

<p style="background-color:Tomato;">Lorem ipsum...</p>

 Example-2:

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

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

<p style="color:MediumSeaGreen;"> Sami </p>


Color Values
 In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and
HSLA values.
HTML RGB and RGBA Colors

 An RGB color value represents RED, GREEN, and BLUE light sources.

 An RGBA color value is an extension of RGB with an Alpha channel (opacity).

 In HTML, a color can be specified as an RGB value, using this formula:

 rgb(red, green, blue)

 Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

 This means that there are 256 x 256 x 256 = 16777216 possible colors!
HTML RGB and RGBA Colors
 For example, rgb(255, 0, 0) is displayed as red, because red is set to its
highest value (255), and the other two (green and blue) are set to 0.

 Another example, rgb(0, 255, 0) is displayed as green, because green is set to


its highest value (255), and the other two (red and blue) are set to 0.

 To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

 To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
HTML RGB and RGBA Colors
HTML RGB and RGBA Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</body>
</html>
HTML RGB and RGBA Colors
Shades of Gray
Shades of gray are often defined using equal values for all three parameters:
HTML RGB and RGBA Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
</body>
</html>
HTML RGB and RGBA Colors
 RGBA Color Values

 RGBA color values are an extension of RGB color values with an Alpha channel -
which specifies the opacity for a color.

 An RGBA color value is specified with:

 rgba(red, green, blue, alpha)

 The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
HTML RGB and RGBA Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</body>
</html>
HEX Color Values
 In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

 Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

 For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and

blue) are set to 00.

 Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red

and blue) are set to 00.

 To display black, set all color parameters to 00, like this: #000000.

 To display white, set all color parameters to ff, like this: #ffffff.
HEX Color Values
HTML HSL and HSLA Colors
 HSL stands for hue, saturation, and lightness.
 HSLA color values are an extension of HSL with an Alpha channel (opacity).

 In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the
form:

hsl(hue, saturation, lightness)


 Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is
blue.
 Saturation is a percentage value, 0% means a shade of gray, and 100% is the full
color.
 Lightness is also a percentage value, 0% is black, and 100% is white.
HTML HSL and HSLA Colors
HTML HSL and HSLA Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>
</body>
</html>
HTML HSL and HSLA Colors
 Shades of Gray

Shades of gray are often defined by setting the hue and saturation to 0, and

adjusting the lightness from 0% to 100% to get darker/lighter shades:


HTML HSL and HSLA Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>
</body>
</html>
HTML HSL and HSLA Colors
 HSLA color values are an extension of HSL color values with an Alpha channel - which
specifies the opacity for a color.
 An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)


 The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
HTML HSL and HSLA Colors
HTML HSL and HSLA Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%,
0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%,
0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%,
0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%,
0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

You might also like