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=”https://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=”https://techlee.org” target=”_blank”>Visit the knowledge base</a>

Absolute URLs vs. Relative URLs

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

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>

HTML special formatting elements like subscript

<html>
<head>
</head>
<body>
<b>This text is bold</b><br>

<strong>This text is important!</strong><br>
<i>This text is italic</i><br>
<em>This text is emphasized</em><br>

<small>This is some smaller text.</small><br>
<p>Do not forget to buy <mark>milk</mark> today.</p><br>

<p>My favorite color is <del>blue</del> red.</p><br>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p><br>

<p>H<sub>2</sub>O</p><br>
<p>This is <sup>superscripted</sup> text.</p><br>
</body>
</html>

Info on the code is below

HTML Formatting Elements

live demonstration with code
see the link in the description to copy the code

Formatting elements were designed to display special types of text:

<b> – Bold text
<strong> – Important text
<i> – Italic text
<em> – Emphasized text
<mark> – Marked text
<small> – Smaller text
<del> – Deleted 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 <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

<ins> – Inserted text
<sub> – Subscript text
<sup> – Superscript text

HTML style attribute and its properties

<html>
<head>
<title> STYLE attribute and its properties</title>
</head>
<body>

this will have a blue background
<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

<h1 style=”font-family:verdana;”>Font verdana</h1>
<p style=”font-family:courier;”>courier</p>

<h1 style=”font-size:300%;”>font size</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

<h1 style=”text-align:right;”>Central Heading</h1>
<p style=”text-align:center;”>Central paragraph.</p>

</body>
</html>

 

See in info on the code below

SHORT video on STYLE attribute and it’s properties

Demonstration with code

Copy the code from the link in the description

<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Text color

<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

FONT FAMILY

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

FONT SIZE

<h1 style=”font-size:200%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

Alignment

<h1 style=”text-align:right;”>Central Heading</h1>
<p style=”text-align:center;”>Central paragraph.</p>

<p>This is <sup>superscripted</sup> text.</p>

Paragraph and headings in HTML tutorial

<html>
<head>
</head>
<body>
<h1 style=”font-size:250px;”> heading 1</h1>
<p>
i am using this code
to demonstrate that spaces given
in notepad means nothing in a HTML browser page
</p>
<h2> heading 2</h2>
<h3> heading 3</h3>
<h4> heading 4</h4>
<h5> heading 5</h5>
<h6> heading 6</h6>

<p>
i am using this code
to demonstrate that spaces given
in notepad means nothing in a HTML browser page
</p>

<h2>

<p>
<pre>

i am using this code
to demonstrate that spaces given
<hr></hr>

in notepad means
nothing in a HTML browser page</pre>
</p>

&nbsp;

</body>
</html>

Paragraphs and headings

Live demonstration with code
Copy the code from the link in the description

Headings

h1 to h6
<h1> heading 1</h1>
<h2> heading 2</h2>
<h3> heading 3</h3>
<h4> heading 4</h4>
<h5> heading 5</h5>
<h6> heading 6</h6>

Can be used with style attribute
<h1 style=”font-size:250px;”>Heading 1</h1>

paragraphs-

<p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<p>
i am using this code
to demonstrate that spaces given
in notepad means nothing in a HTML browser page
</p>

<pre>

<hr>

Quotes , citing and comment elements

<html>
<body>

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite=”https://www.techlee.org/episode-2-html-
tutorial/”>
Paired and non-paired tags

Paired are the tags that come in pairs just like above in the
body and head.

Non paired are the tags which are not needed to be closed
like
</blockquote>

<p>The <abbr title=”World Health
Organization”>WHO</abbr> was founded in 1948.</p>

<p>If your browser supports bi-directional override (bdo),
the next line will be written from right to left (rtl):</p>

<bdo dir=”rtl”>This line will be written from right to
left</bdo>

<p><cite>The Scream</cite> by charlie. Painted in
1993.</p>

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<p>Techlee’s goal is:
<q>Provide the knowledge, knowledge is power</q>
We hope they succeed.</p>

<!– comment in code –>

<p>This is a paragraph.</p>

<!– you can add info while coding and it will not display –>

</body>
</html>

Quoate and citation elements in HTML

Demonstration with code

copy the full code from the link in the description

  • <abbr> IT defines an abbreviation or acronym
  • <address> IT defines contact information for the author/owner of a document
  • <bdo> IT defines the text direction
  • <blockquote> IT defines a section that is quoted from another source
  • <cite> IT defines the title of a work
  • <q> IT defines a short inline quotation

comments-
<!– comment in code –>

HTML ATTRIBUTES IMG tag and A tag

 

<!DOCTYPE html>
<html lang=”en”>
<body>

<h2>Width and Height Attributes</h2>

<p>SEE here width and height attrbute of an image tag</p>

<p title=”Para title”>This is a paragraph.</p>

<img src=”image.jpg” width=”500″ height=”600″ alt=”The
computers”>

<h1><p style=”color:red;”>This is a
blueparagraph.</p></h1>

<a href=”https://techlee.org”>Visit our HTML tutorial</a>

</body>
</html>

<IMG> and <a> tags

Tag <img>

Is used to include an image on the Webpage

Attribute- src=”image.jpg”

Other attributes

HEIGHT
WIDTH
ALT

See the code to see it is used and the video to see it in working.

HTML attributes provide additional information about HTML elements.

HTML ATTRIBUTES

  • All HTML elements can have attributes
  • These Attributes provide additional information about elements
  • Attributes are always specified in the start/opening tag
  • Attributes usually come in name and value pairs like: name=”value”

<a> and its href attribute

<a href=”https://techlee.org”>Visit our HTML tutorial</a>

Lang attribute

It is a tag that comes with <html> tag. It defined the language used in the webpage.

<html lang=”en”>

Style attribute

style attribute is used to add styles to an element, such as color, font, size, and more

<p style=”color:red;”>This is a
blueparagraph.</p>

Title attribute

title attribute defines some extra information about an element

<p title=”Para title”>This is a paragraph.</p>

see the video to see the code working or do it by yourself.

see the code above and the video to see the code in working

  • All HTML elements can have attributes
  • the src attribute of <img> specifies the path to the image to be displayed
  • The href attribute of <a> specifies the URL of the page the link goes to
  • The width and height attributes of <img> provide size info for images
  • The alt attribute of <img> gives an alternate text for an image
  • The style attribute is used to add styles to an element, such as color, font, size, and more
  • The lang attribute of the <html> tag declares the language of the Web page
  • The title attribute defines some extra information about an element

Episode 2- HTML TUTORIAL

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading <br> SEE the code <br></h1>
<p>My first paragraph.</p>

</body>
</html>

 

EP 02

Complete introduction With HTML

See the code

<html> – showing it’s written in HTML and it is the declaration. IT is a must for starting a simple HTML.

Now HTML document has 2 parts

Head and body tags

1- Head – contains meta info about HTML page.
2- Body- This is the page that will appear.

Head declaration – <head>
closing head declaration- </head>

Body- <body>
close body- </body>

Paired and non-paired tags

Paired are the tags that come in pairs just like above in the body and head.

Non paired are the tags which are not needed to be closed
like

<br> – tag for breakin a line

<h1> Tag for heading 1 ( biggest heading)

Other heading tags are
h2, h3 , h4 , h5 and h6

<p> is a tag for paragraph

You already know from the first episode, that you need to copy this code and save it on a notepad in order to make an HTML.

Save page as name.html or index.html

After saving open with a Web browser and you will see the web page.
I will show you it is working