HTML Image and Image map

Image HTML Tutorial – Part 1

See the codes used in the video from the link in the description

see simple image tutorial with the code now
<html>
<head>
</head>
<body>

<img src=”image.jpg” alt=”HTML5 Icon” width=”128″
height=”128″>

<img src=”image.jpg” alt=”HTML5 Icon”
style=”width:200px;height:120px;”>

</body>
</html>

Image maps

<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to
go to a new page and read more about the topic:</p>

<img src=”image.jpg” alt=”Workplace” usemap=”#workmap”
width=”400″ height=”379″>

<map name=”workmap”>
<area shape=”rect” coords=”75,40,150,280″ alt=”tab”
href=”computer.htm”>
<area shape=”rect” coords=”290,172,333,250″ alt=”computer”
href=”phone.htm”>
<area shape=”circle” coords=”337,300,44″ alt=”Cup of coffee”
href=”coffee.htm”>
</map>

</body>
</html>

HTML LINKS or Hyperlinks and table of content

HTML LINKS or Hyperlinks
—————————————

See the description to get code used in this video

syntax

<a href=”//techlee.org”>Visit the knowledge base</a>

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

<a href=”//techlee.org” target=”_blank”>Visit the knowledge base</a>

Absolute URLs vs. Relative URLs

<h2>Absolute URLs</h2>
<p><a href=”//www.w3.org/”>W3C</a></p>
<p><a href=”//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>

Link color-

By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href=”default.asp” target=”_blank”>This is a link</a>

</body>
</html>

Bookmarking example or making table of content

<html>
<body>

<p><a href=”#C4″>Jump to Chapter 4</a></p>
<p><a href=”#C10″>Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id=”C4″>Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id=”C10″>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

CSS (Internal, Inline and External) CSS

EXTERNAL CSS Example

<html>
<head>
<link rel=”stylesheet” href=”styles.css”>

</head>
<body>
<h1> i am a heading</h1>
<p> i am a para</p>

</body>
</html>

 

Styles.css

body {
background-color: blue;
}
h1 {
color: white;
}
p {
color: red;
}

 

Internal CSS example

<html>
<head>
<style>

body {
background-color:blue;
}
h1 {
color:white;
}
p {
color:red;
}

</style>

</head>
<body>
<h1> i am a heading</h1>
<p> i am a para</p>

</body>
</html>

Inline CSS example

<html>
<body>

<h1 style=”color:blue;”>A Blue Heading</h1>

<p style=”color:red;”>A red paragraph.</p>

</body>
</html>

 

HTML colors HEX, RGB , HSL, RGBA #HTMLhex #HTML_colors #HTMLrgb

<html>
<head>
</head>
<body>
<h1 style=”background-color:Blue;”>Hello World</h1>
<p style=”background-color:red;”>SEE red</p>

<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>

<br>
<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:rgb(255, 99, 71);”>rgb(255, 99,
71)</h1>
<h1 style=”background-color:rgba(255, 99, 71, 0.6);”>rgba(255,
99, 71, 0.6)</h1>

<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: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>

<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>

see the complete code above and description below-

HTML colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

See live demo along with code

see the link in the description to get code

color with color names
<h1 style=”background-color:Blue;”>Hello World</h1>
<p style=”background-color:red;”>SEE red</p>

<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>

RGB
rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.
256 x 256 x 256 = 16777216 possible colors

RGBA
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

<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>

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.

<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>

HSLA Color Values
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)

<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>

hex
<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>