Web CH 2 - Part I

Contents
• HTML Introduction, • HTML Favicon • HTML Entitles

• HTML Basic, • HTML Tables • HTML Symbols
• HTML Elements, • HTML Lists • HTML Emojis
• HTML Attributes, • HTML Block and Inline • HTML Charset
• • HTML URL Encode
• HTML Heading, HTML Classes
• HTML vs. XHTML
• HTML Paragraphs, • HTML ID
• HTML Forms
• HTML Styles • HTML Iframes
• HTML Forms
• • HTML File Paths
HTML Formatting • HTML Form Attributes
• HTML Head •
• HTML Quotations HTML Form Elements
• HTML Layout • HTML Input Types
• HTMLL Comments
• HTML Responsiveness • HTML Input Attribute
• HTML Colors
• HTML Computercode • HTML Input Form Attributes
• HTML Links 2
• HTML Semantics Compiled By Aliazar D. (MSc in SEng)
HTML Introduction
• HTML stands for Hyper Text Markup Language
• It describes the structure of a Web page
• In 1989, Tim Berners-Lee invented www and after two
years he also invented HTML.
• The World Wide Web Consortium is the main
international standards organization for the World Wide
Web.
• Founded in 1994 and led by Tim Berners-Lee, the
consortium is made up of member organizations that
maintain full-time staff working together in the
development of standards for the World Wide Web
Compiled By Aliazar D. (MSc in SEng) 3
HTML Basic
Basic HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Cont..
•The <!DOCTYPE html> declaration defines that this document is an HTML
document and helps browsers to display web pages correctly.
•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 5
Compiled By Aliazar D. (MSc in SEng)
Cont..
HTML Editors
• Web pages can be created and modified
by using text editors like Notepad,
Notepad++, Sublime Text or any other
text editor.
• HTML documents can be saved with
extension “.htm or .html”
• To View the HTML Page, Open the
saved HTML file in your favorite
browser
6
HTML Tags and Elements
• An HTML tag is a piece of markup language used to indicate the beginning and
end of an HTML element in an HTML document.
• As part of an HTML element, HTML tags help web browsers convert HTML
documents into web pages.
• An HTML element is defined by a start tag, some content, and an end tag
• <tagname>Content goes here...</tagname>
• Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!
• HTML elements can be nested (this means that elements can contain other
elements).
• Some HTML elements will display correctly, even if you forget the end tag:
However, never rely on this! Unexpected results and errors may occur if you
forget the end tag!
• HTML tags are not case sensitive: <P> means the same as <p>

HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name=“value”
o Double quotes around attribute values are the most common
in HTML, but single quotes can also be used.
o In some situations, when the attribute value itself contains
double quotes, it is necessary to use single quotes:
8
Conti..
• The href Attribute • There are two ways to specify the URL in the src attribute:
✓ The <a> tag defines a hyperlink. 1. Absolute URL - Links to an external image that is hosted on
another website. Example:
✓ The href attribute specifies the URL of the page
src="https://www.wku.edu.et/images/img_wku.jpg".
the link goes to:
2. Relative URL - Links to an image that is hosted within
✓ <a href="https://www.wku.edu.et">Visit Wolkite the website. Here, the URL does not include the domain
University </a> name.
• The src Attribute ✓ If the URL begins without a slash, it will be relative to the
current page. Example: src="img_girl.jpg".
✓ The <img> tag is used to embed an image in an
✓ If the URL begins with a slash, it will be relative to the domain.
HTML page. Example: src="/images/img_wku.jpg".
✓ The src attribute specifies the path to the image to• The alt Attribute
be displayed: ✓ The required alt attribute for the <img> tag specifies an
✓ <img src="img_girl.jpg" width="500" alternate text for an image, if the image for some reason
height="600"> cannot be displayed. This can be due to a slow connection,
✓ You can also specify the width and height of the or an error in the src attribute, or if the user uses a screen
image (in pixels) reader.
✓ <img src="img_wku.jpg" alt=“Wolkite University Logo"
Compiled By Aliazar D. (MSc in SEng) width="500" height="600"> 9
Conti..
• The style Attribute • The title Attribute
✓ The style attribute is used to add styles to an ✓ The title attribute defines some extra information about an
element, such as color, font, size, and more. element.
✓ <p style="color:red;">This is a red ✓ The value of the title attribute will be displayed as a
paragraph.</p> “Wolkite University” when you mouse over the element:
• The lang Attribute ✓ <p title=“Wolkite Univesity">Wolkite University is one of
✓ You should always include the lang attribute the 3rd generation federal University in Ethiopia .</p>
inside the <html> tag, to declare the language of ✓ The HTML standard does not require lowercase attribute
the Web page. This is meant to assist search names
engines and browsers. • The title attribute (and all other attributes) can be
✓ Example: <html lang="en"> specifies English as written with uppercase or lowercase like title or
the language TITLE.
✓ Country codes can also be added to the language • However, W3C recommends lowercase attributes in
code in the lang attribute. So, the first two HTML.
characters define the language of the HTML ✓ The HTML standard does not require quotes around
page, and the last two characters define the attribute values.
country. • However, W3C recommends quotes in HTML, and
✓ Example: <html lang="en-US"> specifies demands quotes for stricter document types.
English as the language and United States as the • <a href="https://www.wku.edu.et/index/">Visit our
country WKU </a> 10
HTML Headings
• HTML headings are titles or
subtitles that you want to
display on a webpage.
• HTML headings are defined
with the <h1> to <h6> tags.
• <h1> defines the most
important heading.
• Each HTML heading has a default size. However,
• <h6> defines the least you can specify the size for any heading with the
important heading. style attribute, using the CSS font-size property:
<h1 style="font-size:60px;">Heading 1</h1>
HTML Paragraphs
• The HTML <p> element defines a paragraph.• HTML Line Breaks
• A paragraph always starts on a new line, and ✓ The HTML <br> element defines a line
break.
is usually a block of text. ✓ Use <br> if you want a line break (a new
• <p>This is a paragraph.</p> line) without starting a new paragraph:
• <p>This is another paragraph.</p> ✓ <p>This is<br>a paragraph<br>with line
breaks.</p>
• HTML Horizontal Rules • The HTML <pre> Element

✓ The <hr> tag defines a thematic break in ✓ The HTML <pre> element defines
an HTML page, and is most often preformatted text.
displayed as a horizontal rule. ✓ The text inside a <pre> element is
displayed in a fixed-width font (usually
✓ <p>This is some text.</p> Courier), and it preserves both spaces and
<hr> line breaks (The Poem Problem)
HTML Styles Title • Text Color
• The HTML style attribute is used ✓ The color property defines the text color
to add styles to an element, such for an HTML element: <h1
style="color:blue;">This is a heading</h1>
as color, font, size, and more. • Fonts
• The HTML style attribute has the ✓ The font-family property defines the font
following syntax: to be used for an HTML element:
<tagname style="property:value;"> <h1 style="font-family:verdana;">This is a heading</h1>
• The property is a CSS property. The • Text Size
value is a CSS value. ✓ The font-size property defines the text
size for an HTML element:
<p style="font-size:160%;">This is a paragraph.</p>
• Background Color • Text Alignment
✓ The background-color property ✓ The text-align property defines the
defines the background color for horizontal text alignment for an HTML
an HTML element. element:
✓ <body style="background-color:powderblue;"> ✓ <p style="text-align:center;">Centered paragraph.</p>
13
HTML Text Formatting
• HTML contains several elements for defining text with a special meaning.
• Formatting elements were designed to display special types of text:
▪ <b> - Bold text
• <b>This text is bold</b>
▪ <strong> - Important text • <strong>This text is important!</strong>
▪ <i> - Italic text • <i>This text is italic</i>
▪ <em> - Emphasized text • <em>This text is emphasized</em>
• <p>Do not forget to buy <mark>milk</mark> today.</p>
▪ <mark> - Marked text • <small>This is some smaller text.</small>
▪ <small> - Smaller text • <p>My favorite color is <del>blue</del> red.</p>
▪ <del> - Deleted text • <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
▪ <ins> - Inserted text • <p>This is <sub>subscripted</sub> text.</p>
• <p>This is <sup>superscripted</sup> text.</p>
▪ <sub> - Subscript text
▪ <sup> - Superscript text
HTML Quotation and Citation Elements
• HTML <blockquote> for <!DOCTYPE html>

<html>
Quotations <body>
<p>Browsers usually indent blockquote elements.</p>
✓ The HTML <blockquote> <blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature. The
element defines a section world's leading conservation organization, WWF works in 100
countries and is supported by more than one million members in the
that is quoted from another United States and close to five million globally.
source. </blockquote>
</body>
✓ Browsers usually indent </html>
<blockquote> elements.

Conti…
• HTML <q> for Short <!DOCTYPE html>
<html>
Quotations <body>
• The HTML <q> tag defines <p>Browsers usually insert quotation marks around
the q element.</p>
a short quotation. <p>WWF's goal is to: <q>Build a future where
• Browsers normally insert people live in harmony with nature.</q></p>
</body>
quotation marks around the
</html>
quotation.

Conti..
• HTML <abbr> for Abbreviations <!DOCTYPE html>
✓ The HTML <abbr> tag defines an <html>
abbreviation or an acronym, like <body>
"HTML", "CSS", "Mr.", "Dr.", <p>The <abbr title="World Health
"ASAP", "ATM". Organization">WHO</abbr> was founded
✓ Marking abbreviations can give in 1948.</p>
useful information to browsers, <p>Marking up abbreviations can give
translation systems and search- useful information to browsers, translation
engines systems and search-engines.</p>
✓ Tip: Use the global title attribute to </body>
show the description for the
abbreviation/acronym when you </html>
mouse over the element.
Conti..
• HTML <address> for Contact Information <!DOCTYPE html>
<html>
✓ The HTML <address> tag defines the contact
information for the author/owner of a document <body>
or an article. <p>The HTML address element defines contact
information (author/owner) of a document or article.</p>
✓ The contact information can be an email address,
<address>
URL, physical address, phone number, social
Written by Lazarus D.<br>
media handle, etc.
Visit us at:<br>
✓ The text in the <address> element usually renders
wku.edu.et<br>
in italic, and browsers will always add a line
Box 07, Wolkite<br>
break before and after the <address> element.
Ethiopia
</address>
</body>
</html>

Conti..
• HTML <cite> for Work Title <!DOCTYPE html>
✓ The HTML <cite> tag defines the title of a <html>
creative work (e.g. a book, a poem, a song,
a movie, a painting, a sculpture, etc.).
<body>
✓ Note: A person's name is not the title of a <p>The HTML cite element defines
work. the title of a work.</p>
✓ The text in the <cite> element usually <p>Browsers usually display cite
renders in italic. elements in italic.</p>
<p><cite>The WWW</cite> by
Lazarus D. Published in 2022.</p>
</body>
</html>
Conti..
• HTML <bdo> for Bi-Directional <!DOCTYPE html>
<html>
Override
<body>
✓ BDO stands for Bi-Directional <p>If your browser supports bi-directional override (bdo),
Override. the next line will be written from right to left (rtl):</p>
✓ The HTML <bdo> tag is used to <bdo dir="rtl">This line will be written from right to
left</bdo>
override the current text direction: </body>
</html>

HTML Comments
• HTML comments are not displayed in the <!DOCTYPE html>
browser, but they can help document your HTML <html>
source code. <body>
• HTML Comment Tag <p>This is a paragraph.</p>
✓ You can add comments to your HTML source by
using the following syntax: 
✓  <p>This is a paragraph too.</p>
or 
--> </body>
✓ Notice that there is an exclamation point (!) in the </html>
start tag, but not in the end tag.

• Background Color
✓ You can set the background color for
HTML elements:
HTML Colors <!DOCTYPE html>
<html>
• HTML colors are specified with <body>
predefined color names, or with <h1 style="background-
RGB, HEX, HSL, RGBA, or color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
HSLA values.
Lorem ipsum dolor sit amet, consectetuer
• Color Names adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
✓ In HTML, a color can be aliquam erat volutpat.
specified by using a color name: </p>
</body>
</html>

• Border Color
Conti.. ✓ You can set the color of borders:
• Text Color <!DOCTYPE html>
✓ You can set the color of text:
<html>
<!DOCTYPE html>
<html> <body>
<body> <h1 style="border: 2px solid
<h3 style="color:Tomato;">Hello World</h3> Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum <h1 style="border: 2px solid
dolor sit amet, consectetuer adipiscing </p> DodgerBlue;">Hello World</h1>
<p style="color:MediumSeaGreen;">Ut wisi
enim ad minim veniam, quis nostrud exerci <h1 style="border: 2px solid
tation ullamcorper .</p> Violet;">Hello World</h1>
</body> </body>
</html> </html>

Conti..
• 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).
Conti..
• RGB Color Values o For example, rgb(255, 0, 0) is
o In HTML, a color can be specified as an displayed as red, because red is set to
RGB value, using this formula: rgb(red, its highest value (255), and the other
green, blue) two (green and blue) are set to 0.
o Each parameter (red, green, and blue) defines
the intensity of the color with a value o Another example, rgb(0, 255, 0) is
between 0 and 255. displayed as green, because green is
o This means that there are 256 x 256 x 256 = set to its highest value (255), and the
16777216 possible colors! other two (red and blue) are set to 0.
o To display black, set all color
parameters to 0, like this: rgb(0, 0, 0).
o To display white, set all color
parameters to 255, like this: rgb(255,
255, 255).

Conti
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

</body>
</html>
• Shades of Gray
✓ Shades of gray are often defined using equal values for all three
parameters:
Conti..
• RGBA Color Values <!DOCTYPE html>
<html>
✓ RGBA color values are an <body>
extension of RGB color values <h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
with an Alpha channel - which <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
specifies the opacity for a <h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
color. <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>
✓ An RGBA color value is <h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
specified with: rgba(red, </body>
green, blue, alpha) </html>
✓ The alpha parameter is a
number between 0.0 (fully
transparent) and 1.0 (not
transparent at all):

Conti..
HTML HEX Colors
▪ A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG
(green) and BB (blue) hexadecimal integers specify the components of the
color.
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.
Conti..
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
</body>
</html>
Shades of Gray
• Shades of gray are often defined using equal values for
all three parameters
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>

<!DOCTYPE html>
Conti.. <html>
<body>
<h1 style="background-color:hsl(0, 100%,
• HTML HSL and HSLA Colors 50%);">hsl(0, 100%, 50%)</h1>
o HSL stands for hue, saturation, and <h1 style="background-color:hsl(240, 100%,
lightness. 50%);">hsl(240, 100%, 50%)</h1>
o HSLA color values are an extension of <h1 style="background-color:hsl(147, 50%,
HSL with an Alpha channel (opacity). 47%);">hsl(147, 50%, 47%)</h1>
• HSL Color Values <h1 style="background-color:hsl(300, 76%,
o In HTML, a color can be specified using 72%);">hsl(300, 76%, 72%)</h1>
hue, saturation, and lightness (HSL) in the <h1 style="background-color:hsl(39, 100%,
form: 50%);">hsl(39, 100%, 50%)</h1>
hsl(hue, saturation, lightness) <h1 style="background-color:hsl(248, 53%,
o Hue is a degree on the color wheel from 0 58%);">hsl(248, 53%, 58%)</h1>
to 360. 0 is red, 120 is green, and 240 is </body>
blue.
</html>
o Saturation is a percentage value. 0% means
a shade of gray, and 100% is the full color.
o Lightness is also a percentage value. 0% is
black, and 100% is white.

Conti..
Saturation Lightness
• Saturation can be described as the intensity of a color. • The lightness of a color can be described as how much light you want to give
• 100% is pure color, no shades of gray. the color, where 0% means no light (black), 50% means 50% light (neither
dark nor light), and 100% means full lightness (white).
• 50% is 50% gray, but you can still see the color.
<!DOCTYPE html>
• 0% is completely gray; you can no longer see the color.
<html>
<!DOCTYPE html>
<body>
<html>
<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%,
50%)</h1> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1> <h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1> <p>With HSL colors, 0% lightness means black, and 100 lightness means
white.</p>
</body>
<p>With HSL colors, less saturation mean less color. 0% is completely
gray.</p> </html>
</body>
</html>
31
<!DOCTYPE html>
<html>
<body>
Conti.. <h1 style="background-color:hsla(9, 100%, 64%,
0);">hsla(9, 100%, 64%, 0)</h1>
• HSLA Color Values <h1 style="background-color:hsla(9, 100%, 64%,
0.2);">hsla(9, 100%, 64%, 0.2)</h1>
▪ HSLA color values are an <h1 style="background-color:hsla(9, 100%, 64%,
extension of HSL color values, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
with an Alpha channel - which <h1 style="background-color:hsla(9, 100%, 64%,
0.6);">hsla(9, 100%, 64%, 0.6)</h1>
specifies the opacity for a color. <h1 style="background-color:hsla(9, 100%, 64%,
▪ An HSLA color value is 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
specified with: hsla(hue, <h1 style="background-color:hsla(9, 100%, 64%,
1);">hsla(9, 100%, 64%, 1)</h1>
saturation, lightness, alpha) </body>
▪ The alpha parameter is a number </html>
between 0.0 (fully transparent)
and 1.0 (not transparent at all):

Part I
Thank you!
Any Questions?

Web CH 2 - Part I

Uploaded by

Copyright:

Available Formats

Web CH 2 - Part I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web CH 2 - Part I

Uploaded by

Copyright:

Available Formats

Contents

• HTML Introduction, • HTML Favicon • HTML Entitles

Basic HTML Document

Compiled By Aliazar D. (MSc in SEng) 4

Compiled By Aliazar D. (MSc in SEng) 7

• HTML Horizontal Rules • The HTML <pre> Element

• HTML <blockquote> for <!DOCTYPE html>

Compiled By Aliazar D. (MSc in SEng) 15

Compiled By Aliazar D. (MSc in SEng) 16

Compiled By Aliazar D. (MSc in SEng) 18

Compiled By Aliazar D. (MSc in SEng) 20

Compiled By Aliazar D. (MSc in SEng) 21

Compiled By Aliazar D. (MSc in SEng) 22

Compiled By Aliazar D. (MSc in SEng) 23

Compiled By Aliazar D. (MSc in SEng) 25

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

Compiled By Aliazar D. (MSc in SEng) 27

HEX Color Values

Compiled By Aliazar D. (MSc in SEng) 29

Compiled By Aliazar D. (MSc in SEng) 30

Compiled By Aliazar D. (MSc in SEng) 32

Compiled By Aliazar D. (MSc in SEng) 33

You might also like