Scribd
Upload
4 views

Chapter 2 HTML

Uploaded by

nedijemal1
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Chapter 2 HTML

Uploaded by

nedijemal1
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 170

CHAPTER 2

WEB DESIGN AND


DEVELOPMENT Introduction to
HTML

By.Abrahim A. 1
Outline
• FUNDAMENTALS
• HYPERTEXT MARKUP LANGUAGE (HTML):
• Why do we use HTML?,
• HTML Document Structure,
• Basic HTML syntax,
• HTML Tags

By.Abrahim A. 2
What is HTML?
• HTML, otherwise known as HyperText Markup Language, is the
language used to create Web pages
• Using HTML, you can create a Web page with text, graphics, sound,
and video

By.Abrahim A. 3
Cont

• It is a standard text formatting language used for developing web


pages released in 1993.
• HTML is a language that is interpreted by the browser and it tells the
browser what to display and how to display.

By.Abrahim A. 4
latest version of HTML
• The latest version of HTML is HTML5.
• There are two main components in HTML language, Tags and
Attributes.
• The below image shows some basic HTML tags and attributes.

By.Abrahim A. 5
Cont

By.Abrahim A. 6
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 three kinds
of Doctypes which are available:
• Strict Doctype ,Transitional Doctype, Frameset Doctype

By.Abrahim A. 7
HTML 4.01 strict doctype
• This is strict version of HTML 4.01 doctype. HTML 4.01 Strict Doctype
does not allow presentational attributes to be written within HTML
Elements. It also does not support inclusion of Frames.
• Example of HTML 4.01 strict doctype
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strictl//EN"
• "http://www.w3.org/TR/html4/strict.dtd">
• HTML 4.01 strict doctype declaration does not allow frameset, target
link to be included in the HTML document.

By.Abrahim A. 8
HTML 4.01 transitional doctype

• HTML 4.01 Transitional is a derivative of HTML 4.01 Strict doctype


declaration, allowing users to use certain elements and attributes
which are not allowed to be used in strict doctype.

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01


Transitional//EN"

"http://www.w3.org/TR/html4/transitional.dtd">

• This is a doc type declaration for transitional doctype declaration.


By.Abrahim A. 9
HTML 4.01 frameset doctype
• HTML 4.01 Frameset is a derivative of HTML 4.01 Transitional
doctype declaration, allowing users to use frames. In an HTML
document using Frameset doctype, body element is replaced by
frameset element.
• Here is how you can declare a frameset doctype in an HTML
document.
• Example of HTML 4.01 frameset doctype
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

By.Abrahim A. 10
More elements
• 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

By.Abrahim A. 11
HTML head element
• can contain only following elements - base, link, meta, script, style,
and title.
• HTML head element can reside within html element only.
• Attributes specific to this element
• profile - Value of the profile attribute is a URL. The URL points to a
document that contains a set of rules. User agents can read those
rules to understand the information contained within the meta tags.

By.Abrahim A. 12
The <TITLE> Tag
• Choose the title of your Web page carefully; The title of a Web page
determines its ranking in certain search engines
• The title will also appear on Favorite lists, History lists, and Bookmark
lists to identify your page.
• HTML title element can not contain any other element.
• HTML title element can reside within head element only.
• No event
• Are the HTML tags and elements the same thing?

No. HTML elements are defined by a starting tag, may contain


some content and a closing tag.
By.Abrahim A. 13
tags and attributes?
• What are tags and attributes in HTML?
• Tags are the primary component of the HTML that defines how the
content will be structured/ formatted, whereas Attributes are used
along with the HTML tags to define the characteristics of the element.
• For example,
<p align=” center”>Interview questions</p>
, in this the ‘align’ is the attribute using which we will align the
paragraph to show in the center of the view

By.Abrahim A. 14
Structure of a Web Page
• All Web pages share a common <HTML>
structure <HEAD>
<TITLE> Example </TITLE>
• All Web pages should contain a
</HEAD>
pair of <HTML>, <HEAD>,
<TITLE>, and <BODY> tags <BODY>
This is where you would include the text
and images on your Web page.
</BODY>
</HTML>

By.Abrahim A. 15
How to View HTML Source

• Have you ever seen a Web page and wondered "Hey! How did they do that?"

• Click CTRL + U in an HTML page, or right-click on the page and select "View
Page Source". This will open a new tab containing the HTML source code of the
page.

• Inspect an HTML Element:

• Right-click on an element (or a blank area), and choose "Inspect" to see what
elements are made up of (you will see both the HTML and the CSS). You can also
edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
By.Abrahim A. 16
Meta element
• The character set is defined in <meta> tag inside <head> element.
• HTML meta element can not contain any other element.
• HTML meta element can reside within head element only.
• No event can bind to meta
• Attributes specific to this element
• name: This attribute specifies a name which provides
information for the entire document. The value of this attribute
is relevant to the value of the content. If this attribute is set,
same meta element can not contain http-equiv attribute.

By.Abrahim A. 17
Meta element
• The following table provides a list of the values.
• application-name: Defines the name of the web application running
in the webdocument.
• Author: Defines the name of the author of the document.
• Description: Specifies a short but appropriate summary of the
content of the webdocument. Several browsers and search engines
use this meta as the consider this as the default description of the
page.
• Generator:Contains the identifier to the software that generated the
webdocument.

By.Abrahim A. 18
Meta element
• Keywords:Contain a comma separated list of words relevant to the
content of the webdocument.
• Example of using name attribute in meta element
• <meta name="author" content="w3resource"> <meta
name="copyright" content="w3resource.com"> <meta
name="keywords" content="meta tag ,html tutorials,w3resource">
<meta name="description" content="html meta tag tuotrial ">
• The name attribute may also have extended values taken. Two of
those values are described bellow.
• Expires: Defines the expiration date of the webdocument

By.Abrahim A. 19
HTML body element
• HTML body element represents the main content of an HTML
page.
• In an HTML document, only one body element can exist.
• HTML html element can contain inline as well as block level
elements.
• Can reside within HTML html element.
• Events
• onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup.

By.Abrahim A. 20
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>

By.Abrahim A. 21
Semantic Elements

• Semantic elements are those which describe the particular meaning to


the browser and the developer.
• Elements like <form>, <table>, <article>, <figure>, etc., are semantic
elements.

By.Abrahim A. 22
HTML Properties
• HTML is Not Case Sensitive
• HTML tags are not case sensitive: <P> means the same as <p>.
• The HTML standard does not require lowercase tags, but W3C
recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.

By.Abrahim A. 23
Void elements in HTML?

• HTML elements which do not have closing tags or do not need to be


closed are Void elements. For Example <br />, <img />, <hr />, etc.
• Never Skip the End Tag in other cases
• 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!

By.Abrahim A. 24
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"

By.Abrahim A. 25
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.w3schools.com">Visit W3Schools</a>

By.Abrahim A. 26
The src Attribute
• The <img> tag is used to embed an image in an HTML page. The src
attribute specifies the path to the image to be displayed:
• Example
• <img src="img_girl.jpg">
• There are two ways to specify the URL in the src attribute:

By.Abrahim A. 27
Cont’
1. Absolute URL - Links to an external image that is hosted on another
website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".
• Notes: External images might be under copyright. If you do not get
permission to use it, you may be in violation of copyright laws. In
addition, you cannot control external images; it can suddenly be
removed or changed.

By.Abrahim A. 28
Cont’
2. Relative URL - Links to an image that is hosted within the website.
Here, the URL does not include the domain name. If the URL begins
without a slash, it will be relative to the current page.
Example: src="img_girl.jpg". If the URL begins with a slash, it will
be relative to the domain.
• Example: src=“../images/img_girl.jpg".

• Tip: It is almost always best to use relative URLs. They will not break
if you change domain.

By.Abrahim A. 29
The width and height Attributes
• The <img> tag should also contain the width and height attributes,
which specify the width and height of the image (in pixels)
• Example
• <img src="img_girl.jpg" width="500" height="600">

By.Abrahim A. 30
The alt Attribute
• The required alt attribute for the <img> tag specifies an alternate text
for an image, if the image for some reason cannot be displayed. This
can be due to a slow connection, or an error in the src attribute, or if
the user uses a screen reader.
• Example
• <img src="img_girl.jpg" alt="Girl with a jacket">

By.Abrahim A. 31
Example
• See what happens if we try to display an image that does not exist:
• <img src="img_typo.jpg" alt="Girl with a jacket">

By.Abrahim A. 32
More on Attribute
• The style Attribute:is used to add styles to an element, such as color,
font, size, and more
• <p style="color:red;">This is a red paragraph.</p>
• The lang Attribute
• You should always include the lang attribute inside the <html> tag, to
declare the language of the Web page. This is meant to assist search
engines and browsers.
• <!DOCTYPE html>
<html lang="en">
<body> …</body>
</html>
By.Abrahim A. 33
Country codes
• Country codes can also be added to the language code in the lang
attribute. So, the first two characters define the language of the
HTML page, and the last two characters define the country.
• The following example specifies English as the language and United
States as the country:
• <!DOCTYPE html>
<html lang="en-US">
<body>... </body>
</html>

By.Abrahim A. 34
ISO 639-1 Language Codes
• In XHTML, the language is declared inside the <html> tag as
follows
• <html xmlns="http://www.w3.org/1999/
xhtml" lang="en" xml:lang="en">
...
</html>...
• ISO 639-1 defines abbreviations for languages:

Language ISO Code


Abkhazian ab
Afar aa
Amharic am

By.Abrahim A. 35
Single or Double Quotes?
• Double quotes around attribute values are the most common in
HTML, but single quotes can also be used.
• In some situations, when the attribute value itself contains double
quotes, it is necessary to use single quotes:
• <p title='John "ShotGun" Nelson’>
Or vice versa:
• <p title="John 'ShotGun' Nelson">

By.Abrahim A. 36
White space?
• In HTML, a blank sequence of whitespace characters is treated as a
single space character,
• Because the browser collapses multiple spaces into a single space
character and this helps a developer to indent lines of text without
worrying about multiple spaces and maintain readability and
understandability of HTML codes

By.Abrahim A. 37
HTML Entities

• In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. called
HTML Entities.

Character Entity Name Entity Number


< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
&nbsp; Eg.
(non-breaking
<p>10&nbsp&nbsp &#160;
space) Eg. 10 PM
PM</p>

By.Abrahim A. 38
HTML Headings
• HTML headings are titles or subtitles that you want to display on a
webpage
• Note: Browsers automatically add some white space (a margin) before
and after a heading.
• Headings Are Important
• Search engines use the headings to index the structure and content of
your web pages.

By.Abrahim A. 39
HTML Headings
• Users often skim a page by its headings. It is important to use
headings to show the document structure.
• <h1> headings should be used for main headings, followed by <h2>
headings, then the less important <h3>, and so on.

By.Abrahim A. 40
HTML Headings
• Note: Use HTML headings for headings only. Don't use headings to
make text BIG or bold.
• Bigger Headings
• Each HTML heading has a default size. However, you can specify the
size for any heading with the style attribute, using the CSS font-size
property:
• Example
• <h1 style="font-size:60px;">Heading 1</h1>

By.Abrahim A. 41
Headings
• Web pages are typically organized into sections with headings; To
create a heading use the expression <Hn>….</Hn> where n is a
number between 1 and 6
• In this case, the 1 corresponds to the largest size heading while the 6
corresponds to the smallest size
• Example
• <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

By.Abrahim A. 42
HTML Paragraphs
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers automatically
add some white space (a margin) before and after a paragraph.
• Example
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>

By.Abrahim A. 43
HTML Display
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create different
results.
• With HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code.
• The browser will automatically remove any extra spaces and lines
when the page is displayed:
• <pre> Element

By.Abrahim A. 44
<pre> Element
• Solution - The HTML <pre> Element
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:
<p>personality is very important
in all aspects of your life </p>
Example
<pre>
<p>personality is very important
in all aspects of your life </p> </pre>

By.Abrahim A. 45
HTML Horizontal Rules
• The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.
• The <hr> element is used to separate content (or define a change) in
an HTML page:
• Example
• <h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

By.Abrahim A. 46
HTML Line Breaks
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line) without starting a new
paragraph:
• Example
<p>This is<br>a paragraph<br>with line breaks.</p>
• Both<br> and <hr> tag is an empty tag, which means that it has no
end tag.

By.Abrahim A. 47
The HTML Style Attribute
• Setting the style of an HTML element, can be done with the style
attribute.
• The HTML style attribute has the following syntax:
• <tagname style="property:value;">
• The property is a CSS property. The value is a CSS value.
• You will learn more about CSS later in this course.

By.Abrahim A. 48
Favicon in HTML
• You can use any image you like as your favicon. You can also create your own
favicon on sites like https://www.favicon.cc.
• <!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

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

</body>
</html>
By.Abrahim A. 49
HTML layout structure
• Every web page templated that are globally accepted way to structure
the web page, such as:
• <header>: Stores the starting information about the web page.
• <footer>: Represents the last section of the page.
• <nav>: The navigation menu of the HTML page.

By.Abrahim A. 50
Cont
• <article>: It is a set of information.
• <section>: It is used inside the article block to define the basic
structure of a page.
• <aside>: Sidebar
content of the page.

By.Abrahim A. 51
Cont

By.Abrahim A. 52
Iframe
• Can we display a web page inside a web page or Is nesting of
webpages possible?
• Yes, we can display a web page inside another HTML web page.
HTML provides a tag <iframe> using which we can achieve this
functionality.
• Syntax
• <iframe src="url" title="description"></iframe>

By.Abrahim A. 53
Iframe - Set Height and Width
• Use the height and width attributes to specify the size of the iframe.
• The height and width are specified in pixels by default:
• Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" tit
le="Iframe Example"></iframe>
By default, an iframe has a border around it.
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe
Example"></iframe>

By.Abrahim A. 54
Iframe - Target for a Link
• An iframe can be used as the target frame for a link.
• The target attribute of the link must refer to the name attribute of the
iframe:
• Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Scho


ols.com</a></p>

By.Abrahim A. 55
HTML Responsive Web Design
• Responsive web design is about creating web pages that look
good on all devices! A responsive web design will automatically
adjust for different screen sizes and viewports

By.Abrahim A. 56
Setting The Viewport
• Responsive Web Design is about using HTML and CSS to
automatically resize, hide, shrink, or enlarge, a website, to make it
look good on all devices (desktops, tablets, and phones):
• To create a responsive website, add the following <meta> tag to all
your web pages:
• Example
• <meta name="viewport" content="width=device-width, initial-
scale=1.0">

By.Abrahim A. 57
Setting The Viewport
• This will set the viewport of your page, which will give the browser
instructions on how to control the page's dimensions and scaling.
• Here is an example of a web page without the viewport meta tag, and
the same web page with the viewport meta tag:

By.Abrahim A. 58
Responsive Images
• Responsive images are images that scale nicely to fit any browser
size.
• Using the width Property
• If the CSS width property is set to 100%, the image will be responsive
and scale up and down:
• Example
• <img src="img_girl.jpg" style="width:100%;">
• Notice that in the example above, the image can be scaled up to be
larger than its original size. A better solution, in many cases, will be to
use the max-width property instead.

By.Abrahim A. 59
max-width Property
• Using the max-width Property
• If the max-width property is set to 100%, the image will scale down if
it has to, but never scale up to be larger than its original size:
• Example
• <img src="img_girl.jpg" style="max-width:100%;height:auto;">

By.Abrahim A. 60
Images Depending on Browser
• Show Different Images Depending on Browser Width
• The HTML <picture> element allows you to define different images for
different browser window sizes.
• Resize the browser window to see how the image below changes
depending on the width:
• Example
• <picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
By.Abrahim A. 61
Responsive Text Size
• The text size can be set with a "vw" unit, which means the "viewport
width".
• That way the text size will follow the size of the browser window:
• Example
• <h1 style="font-size:10vw">Hello World</h1>
• Viewport is the browser window size. 1vw = 1% of viewport width. If
the viewport is 50cm wide, 1vw is 0.5cm.

By.Abrahim A. 62
Media Queries
• In addition to resize text and images, it is also common to use media
queries in responsive web pages.
• With media queries you can define completely different styles for
different browser sizes.
• Example: resize the browser window to see that the three div elements
below will display horizontally on large screens and stack vertically
on small screens:

By.Abrahim A. 63
Example

<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}

.main {
float: left;
width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */


@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
By.Abrahim A. 64
Tags
• The essence of HTML programming is tags
• A tag is a keyword enclosed by angle brackets ( Example: <I> )
• There are opening and closing tags for many but not all tags; The
affected text is between the two tags

By.Abrahim A. 65
More Tags...
• The opening and closing tags use the same command except the
closing tag contains and additional forward slash /
• For example, the expression <B> Warning </B> would cause the
word ‘Warning’ to appear in bold face on a Web page

By.Abrahim A. 66
Nested Tags
• Whenever you have HTML tags within other HTML tags, you must
close the nearest tag first
• Example:
<H1> <I> The Nation </I> </H1>

By.Abrahim A. 67
Text Formatting
• Manipulating text in HTML can be tricky; Oftentimes, what you see
is NOT what you get
• For instance, special HTML tags are needed to create paragraphs,
move to the next line, and create headings

By.Abrahim A. 68
Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line

By.Abrahim A. 69
Changing the Font

• The expression <FONT FACE = “fontname”> …


</FONT> can be used to change the font of the enclosed
text
• To change the size of text use the expression <FONT SIZE=n> ….
</FONT> where n is a number between 1 and 7

By.Abrahim A. 70
Changing the Font

• To change the color, use <FONT COLOR=“red”>…. </FONT>;


The color can also be defined using hexadecimal representation
( Example: #ffffff )
• These attributes can be combined to change the font,
size, and color of the text all at once; For example,
<FONT SIZE=4 FACE=“Courier” COLOR=“red”> ….
</FONT>

By.Abrahim A. 71
Color Codes
• Colors are set using “RGB” color codes, which are, represented as
hexadecimal values.
• Each 2-digit section of the code represents the amount, in sequence,
of red, green or blue that forms the color.
• For example, a RGB value with 00 as the first two digits has no red
in the color.

By.Abrahim A. 72
Main Colours

By.Abrahim A. 73
RGB Colour Model

By.Abrahim A. 74
16 Basic Colors

By.Abrahim A. 75
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
By.Abrahim A. 76
15. ORANGE 15. #FF7F00
Aligning Text
• The ALIGN attribute can be inserted in the <P> and <Hn> tags to
right justify, center, or left justify the text
• For example, <H1 ALIGN=CENTER> The New York Times </H1>
would create a centered heading of the largest size

By.Abrahim A. 77
Comment Statements
• Comment statements are notes in the HTML code that explain the
important features of the code
• The comments do not appear on the Web page itself but are a useful
reference to the author of the page and other programmers
• To create a comment statement use the <!-- …. --> tags

By.Abrahim A. 78
The Infamous Blink Tag
• It is possible to make text blink using the <BLINK> … </BLINK>
tag
• However, it is best to use this feature at most sparingly or not at all;
What seems like a good idea to a Web designer can become very
annoying to a Web user
• The <BLINK> tag is not supported by Internet Explorer

By.Abrahim A. 79
Page Formatting
• To define the background color, use the BGCOLOR attribute in the
<BODY> tag
• To define the text color, use the TEXT attribute in the <BODY> tag
• To define the size of the text, type <BASEFONT SIZE=n>

By.Abrahim A. 80
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on your Web page.
</BODY>
</HTML>

By.Abrahim A. 81
Inserting Images
• Type <IMG SRC = “image.ext”>, where image.ext indicates the
location of the image file
• The WIDTH=n and HEIGHT=n attributes can be used to adjust the
size of an image
• The attribute BORDER=n can be used to add a border n pixels thick
around the image

By.Abrahim A. 82
Alternate Text
• Some browsers don’t support images. In this case, the ALT attribute
can be used to create text that appears instead of the image.
• Example:
<IMG SRC=“satellite.jpg” ALT = “Picture of satellite”>

By.Abrahim A. 83
Links
• A link lets you move from one page to another, play movies and
sound, send email, download files, and more….
• A link has three parts: a destination, a label, and a target
• To create a link type
<A HREF=“page.html”> label </A>

By.Abrahim A. 84
Anatomy of a Link
<A HREF=“page.html”> label </A>

• In the above link, “page.html” is the destination. The destination


specifies the address of the Web page or file the user will access when
he/she clicks on the link.
• The label is the text that will appear underlined or highlighted on the
page

By.Abrahim A. 85
Example: Links
• To create a link to CNN, I would type:
<A HREF=“http://www.cnn.com”>CNN</A>

• To create a link to MIT, I would type:


<A HREF=“http://www.mit.edu”>MIT</A>

By.Abrahim A. 86
Changing the Color of Links
• The LINK, VLINK, and ALINK attributes can be inserted in the
<BODY> tag to define the color of a link
• LINK defines the color of links that have not been visited
• VLINK defines the color of links that have already been visited
• ALINK defines the color of a link when a user clicks on it
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

By.Abrahim A. 87
Using Links to Send Email
• To create a link to an email address, type <A
HREF=“mailto:email_address”> Label</A>
• For example, to create a link to send email to myself, I would type:
<A HREF=“mailto: [email protected]”>email Katie Dunn</A>

By.Abrahim A. 88
Anchors
• Anchors enable a user to jump to a specific place on a Web site
• Two steps are necessary to create an anchor.
• First you must create the anchor itself.
• Then you must create a link to the anchor from another point in the
document.

By.Abrahim A. 89
Anchors
• To create the anchor itself, type <A NAME=“anchor
name”>label</A> at the point in the Web page where you want the
user to jump to
• To create the link, type <A HREF=“#anchor name”>label</A> at the
point in the text where you want the link to appear

By.Abrahim A. 90
Example: Anchor

<A HREF="#chap2">Chapter Two</A><BR>


Link

<A NAME="chap2">Chapter 2 </A> Anchor

By.Abrahim A. 91
Target’ attribute
• HTML provides a hyperlink - <a> tag to specify the links in a
webpage.
• The ‘href’ attribute is used to specify the link and the ‘target’ attribute
is used to specify, where do we want to open the linked document.
The ‘target’ attribute can have the following values:

By.Abrahim A. 92
Cont
1._self: This is a default value. It opens the document in the same
window or tab as it was clicked.
2._blank: It opens the document in a new window or tab.
3._parent: It opens the document in a parent frame.
4._top: It opens the document in a full-body window.

By.Abrahim A. 93
Lists
• Ordered lists are a list of Here’s how it would look on the
numbered items. Web:
• To create an ordered list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step three.
</OL>

By.Abrahim A. 94
More Ordered Lists….
• The TYPE=x attribute allows you to change the the kind of symbol
that appears in the list.
• A is for capital letters
• a is for lowercase letters
• I is for capital roman numerals
• i is for lowercase roman numerals

By.Abrahim A. 95
Unordered Lists
• An unordered list is a list of Here’s how it would look on the
bulleted items Web:
• To create an unordered list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>

By.Abrahim A. 96
More Unordered Lists...
• The TYPE=shape attribute allows you to change the type of bullet
that appears
• circle corresponds to an empty round bullet
• square corresponds to a square bullet
• disc corresponds to a solid round bullet; this is the default value

By.Abrahim A. 97
Forms

 What are forms?


• An HTML form is an area of the document that allows users to
enter information into fields.
• A form may be used to collect personal information, opinions in
polls, user preferences and other kinds of information.

By.Abrahim A. 98
Form
Forms add the ability to web pages to not only provide the person viewing the document
with dynamic information but also to obtain information from the person viewing it, and
process the information.
Objectives:
Upon completing this section, you should be able to
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI (Common Gateway Interface).
4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
 Forms work in all browsers.
 Forms are Platform Independent.

By.Abrahim A. 99
Form elements
 To insert a form we use the <FORM></FORM> tags. The rest of the form
elements must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.ffff.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname”
MAXLENGTH=“50”> </P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</FORM>
</BODY> </HTML>

By.Abrahim A. 100
Form element attribute

 ACTION: is the URL of the CGI (Common Gateway Interface) program


that is going to accept the data from the form, process it, and send a response
back to the browser.
 METHOD: GET (default) or POST specifies which HTTP method will be
used to send the form’s contents to the web server.
 The CGI application should be written to accept the data from either method.

 NAME: is a form name used by VBScript or JavaScripts.

 TARGET: is the target frame where the response page will show up.
By.Abrahim A. 101
METHOD
• Notes on GET:
• Appends the form data to the URL, in name/value pairs
• NEVER use GET to send sensitive data! (the submitted form data is visible in the
URL!)
• The length of a URL is limited (2048 characters)
• Useful for form submissions where a user wants to bookmark the result
• GET is good for non-secure data, like query strings in Google
• Notes on POST:
• Appends the form data inside the body of the HTTP request (the submitted form
data is not shown in the URL)
• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked
By.Abrahim A. 102
Cont
 Form elements have properties: Text boxes, Password
boxes, Checkboxes, Option(Radio) buttons, Submit,
Reset, File, Hidden and Image.
 The properties are specified in the TYPE Attribute of the
HTML element <INPUT></INPUT>.

By.Abrahim A. 103
Forms
• There are two basic components of a Web form: the shell, the part that
the user fills out, and the script which processes the information
• HTML tags are used to create the form shell. Using HTML you can
create text boxes, radio buttons, checkboxes, drop-down menus, and
more...

By.Abrahim A. 104
Cont
• Following are the significant new data types offered by HTML5:
• Date - Only select date by using type = "date"
• Week - Pick a week by using type = "week"
• Month - Only select month by using type = "month"

By.Abrahim A. 105
data types offered by HTML5
• Time - Only select time by using type = "time".
• Datetime - Combination of date and time by using type = "datetime"
• Datetime-local - Combination of date and time by using type =
"datetime-local." but ignoring the timezone
• Color - Accepts multiple colors using type = "color"

By.Abrahim A. 106
Cont’
• Email - Accepts one or more email addresses using type = "email"
• Number - Accepts a numerical value with additional checks like min
and max using type = "number"
• Search - Allows searching queries by inputting text using type =
"search"
• Tel - Allows different phone numbers by using type = "tel"

By.Abrahim A. 107
Cont
• Placeholder - To display a short hint in the input fields before entering
a value using type = "placeholder"
• Range - Accepts a numerical value within a specific range using type
= "range"
• Url - Accepts a web address using type = "url”

By.Abrahim A. 108
Example: Form

Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area

Reset Button
By.Abrahim A.
Submit 109
The Form Shell
• A form shell has three important parts:
• the <FORM> tag, which includes the address of the script which will process
the form
• the form elements, like text boxes and radio buttons
• the submit button which triggers the script to send the entered information to
the server

By.Abrahim A. 110
Creating the Shell
• To create a form shell, type <FORM METHOD=POST
ACTION=“script_url”> where “script_url” is the address of the script
• Create the form elements
• End with a closing </FORM> tag

By.Abrahim A. 111
Creating Text Boxes
• To create a text box, type <INPUT TYPE=“text” NAME=“name”
VALUE=“value” SIZE=n MAXLENGTH=n>
• The NAME, VALUE, SIZE, and MAXLENGTH attributes are
optional

By.Abrahim A. 112
Text Box Attributes
• The NAME attribute is used to identify the text box to the
processing script
• The VALUE attribute is used to specify the text that will
initially appear in the text box
• The SIZE attribute is used to define the size of the box in
characters
• The MAXLENGTH attribute is used to define the
maximum number of characters that can be typed in the
box

By.Abrahim A. 113
Example: Text Box
First Name: <INPUT TYPE="text" • Here’s how it would look on the
NAME="FirstName" VALUE="First Web:
Name" SIZE=20>
<BR><BR>

Last Name: <INPUT TYPE="text"


NAME="LastName" VALUE="Last
Name" SIZE=20>
<BR><BR>

By.Abrahim A. 114
Creating Larger Text Areas
• To create larger text areas, type <TEXTAREA NAME=“name”
ROWS=n1 COLS=n2 WRAP> Default Text </TEXTAREA>, where
n1 is the height of the text box in rows and n2 is the width of the text
box in characters
• The WRAP attribute causes the cursor to move automatically to the
next line as the user types

By.Abrahim A. 115
Example: Text Area
<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments" ROWS=10 COLS=50 WRAP>
</TEXTAREA>

By.Abrahim A. 116
Creating Radio Buttons
• To create a radio button, type <INPUT TYPE=“radio”
NAME=“name” VALUE=“data”>Label, where “data” is the text that
will be sent to the server if the button is checked and “Label” is the
text that identifies the button to the user

By.Abrahim A. 117
Example: Radio Buttons
<B> Size: </B>
<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
VALUE="Small">Small

By.Abrahim A. 118
Creating Checkboxes
• To create a checkbox, type <INPUT TYPE=“checkbox”
NAME=“name” VALUE=“value”>Label
• If you give a group of radio buttons or checkboxes the same name, the
user will only be able to select one button or box at a time

By.Abrahim A. 119
Example: Checkboxes
<B> Color: </B>
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Navy">Navy
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Black">Black

By.Abrahim A. 120
Creating Drop-down Menus
• To create a drop-down menu, type <SELECT NAME=“name”
SIZE=n MULTIPLE>
• Then type <OPTION VALUE= “value”>Label
• In this case the SIZE attribute specifies the height of the menu in lines
and MULTIPLE allows users to select more than one menu option

By.Abrahim A. 121
Example: Drop-down Menu
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>

By.Abrahim A. 122
Creating a Submit Button
• To create a submit button, type <INPUT TYPE=“submit”>
• If you would like the button to say something other than submit, use
the VALUE attribute
• For example, <INPUT TYPE=“submit” VALUE=“Buy Now!”>
would create a button that says “Buy Now!”

By.Abrahim A. 123
Creating a Reset Button
• To create a reset button, type <INPUT TYPE=“reset”>
• The VALUE attribute can be used in the same way to change the text
that appears on the button

By.Abrahim A. 124
Tables
• Tables can be used to display rows and columns of data, create multi-
column text, captions for images, and sidebars
• The <TABLE> tag is used to create a table; the <TR> tag defines the
beginning of a row while the <TD> tag defines the beginning of a cell

By.Abrahim A. 125
Adding a Border
• The BORDER=n attribute allows you to add a border n pixels thick
around the table
• To make a solid border color, use the BORDERCOLOR=“color”
attribute
• To make a shaded colored border, use
BODERCOLORDARK=“color” and
BORDERCOLORLIGHT=“color”

By.Abrahim A. 126
Creating Simple Table
<TABLE BORDER=10> • Here’s how it would look on the
<TR> Web:
<TD>One</TD>
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>

By.Abrahim A. 127
Adjusting the Width
• When a Web browser displays a table, it often adds extra space. To
eliminate this space use the WIDTH =n attribute in the <TABLE> and
<TD> tags
• Keep in mind - a cell cannot be smaller than its contents, and if you
make a table wider than the browser window, users will not be able to
see parts of it.

By.Abrahim A. 128
Centering a Table
• There are two ways to center a table
• Type <TABLE ALIGN=CENTER>
• Enclose the <TABLE> tags in opening and closing <CENTER> tags

By.Abrahim A. 129
Wrapping Text around a Table
• It is possible to wrap text around a table. This technique is often used
to keep images and captions together within an article.
• To wrap text around a table, type <TABLE ALIGN = LEFT> to align
the table to the left while the text flows to the right.
• Create the table using the <TR>, <TD>, and </TABLE> tags as you
normally would

By.Abrahim A. 130
Adding Space around a Table
• To add space around a table, use the HSPACE=n and VSPACE=n
attributes in the <TABLE> tag
• Example:
<TABLE HSPACE=20 VSPACE=20>

By.Abrahim A. 131
Spanning Cells Across Columns
• It is often necessary to span one cell across many columns. For
example, you would use this technique to span a headline across the
columns of a newspaper article.
• To span a cell across many columns, type <TD COLSPAN=n>, where
n is the number of columns to be spanned

By.Abrahim A. 132
Spanning Cells Across Rows
• To span a cell across many rows, type <TD ROWSPAN=n>, where n
is the number of rows

By.Abrahim A. 133
Aligning Cell Content
• By default, a cell’s content are aligned horizontally to the left and and
vertically in the middle.
• Use VALIGN=direction to change the vertical alignment, where
“direction” is top, middle, bottom, or baseline
• Use ALIGN=direction to change the horizontal alignment where
“direction” is left, center, or right

By.Abrahim A. 134
Controlling Cell Spacing
• Cell spacing is the space between cells while cell padding is the space
around the contents of a cell
• To control both types of spacing, use the CELLSPACING =n and
CELLPADDING=n attributes in the <TABLE> tag

By.Abrahim A. 135
Nesting Tables
• Create the inner table
• Create the outer table and determine which cell of the outer table will
hold the inner table
• Test both tables separately to make sure they work
• Copy the inner table into the cell of the outer table
• Don’t nest too many tables. If you find yourself doing that, find an
easier way to lay out your Web page

By.Abrahim A. 136
Changing a Cell’s Color
• To change a cell’s color, add the BGCOLOR=“color” attribute to the
<TD> tag
• Example:
<TD BGCOLOR=“blue”>

By.Abrahim A. 137
Dividing Your Table into Column Groups
• You can divide your table into two kinds of column groups: structural
and non-structural.
• Structural column groups control where dividing lines are drawn;
Non-structural groups do not
• Both let you format an entire column of cells at once

By.Abrahim A. 138
Column Groups
• To create structural column groups, type <COLGROUP SPAN=n>
after the <TABLE> tag, where n is the number of columns in the
group
• To create non-structural column groups, type <COL SPAN=n>, where
n is the number of columns in the group

By.Abrahim A. 139
Dividing Table into Horizontal Sections
• You can also create a horizontal section consisting of one or more
rows. This allows you to format the rows all at once
• To create a horizontal section, type <THEAD>, <TBODY>, or
<TFOOT> before the first <TR> tag of the section
• Netscape does not support these tags

By.Abrahim A. 140
Controlling Line Breaks
• Unless you specify otherwise a browser will divide the lines in a cell
as it sees fit.
• The NOWRAP attribute placed within the <TD> tag forces the
browser to keep all the text in a cell on one line
• Example:
• <TD NOWRAP>Washington, D.C.

By.Abrahim A. 141
Parting Words….
• If you can imagine a way to lay out your page, chances are it is
possible using HTML
• When in doubt, use an HTML reference

By.Abrahim A. 142
Formatting tags
• HTML has various formatting tags:
• <b> - makes text bold
• <i> - makes text italic
• <em> - makes text italic but with added semantics importance
• <big> - increases the font size of the text by one unit
• <small> - decreases the font size of the text by one unit

By.Abrahim A. 143
Cont’
• <sub> - makes the text a subscript
• <sup> - makes the text a superscript
• <del> - displays as strike out text
• <strong> - marks the text as important
• <mark> - highlights the text
• <ins> - displays as added text

By.Abrahim A. 144
Block-level Elements
• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the
element.
• A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• Two commonly used block elements are: <p> and <div>.
• The <p> element defines a paragraph in an HTML document.
• The <div> element defines a division or a section in an HTML
document.

By.Abrahim A. 145
Here are the block-level elements in
HTML
<address> <fieldset> <main> <ul>
<article> <figcaption> <nav>
<aside> <figure> <noscript>
<blockquote> <footer> <ol>
<canvas> <form> <p>
<dd> <h1>-<h6> <pre>
<div> <header> <section>
<dl> <hr> <table>
<dt> <li> <tfoot>

By.Abrahim A. 146
Inline Elements
• An inline element does not start on a new line.
• An inline element only takes up as much width as
necessary.
• This is a <span> element inside a paragraph.
• Example
• <span>Hello World</span>

By.Abrahim A. 147
Some inline element
• <a> • <em> • <select>
• <abbr> • <i> • <small>
• <acronym> • <img> • <span>
• <b> • <input> • <strong>
• <bdo> • <kbd> • <sub>
• <big> • <label> • <sup>
• <br> • <map> • <textarea>
• <button> • <object> • <time>
• <cite> • <output> • <tt>
• <code> • <q> • <var>
• <dfn> • <samp>
• <script>
By.Abrahim A. 148
HTML 5
• HTML5 is the new HTML standard. HTML4.01 was the
previous version, released in 1999. Since then, the
internet has evolved significantly. HTML5 is still in its
infancy. HTML5 is a new standard for HTML, XHTML, and
the HTML Document Object Model (DOM).
• HTML5 isn’t a brand-new technology. The majority of
HTML5 standards are derived from HTML or HTML 1.0.
HTML files may be read by a web browser and turned
into visual or audio web pages.

By.Abrahim A. 149
By.Abrahim A. 150
Video and Audio Features
• HTML5 has two crucial additions: audio and video tags. It enables
web developers to include a video or audio file on their pages. The
video element in HTML5 may be styled using CSS and CSS. Borders,
opacity, reflections, gradients, transitions, transformations, and even
animations may all be changed. YouTube also declares video
embedding by providing the code to use to embed their videos on
other websites. It contributes to the web being increasingly engaged
with multimedia. HTML5 includes a new element, the audio tag,
which is accessible for use, which is used to embed any audio file into
a webpage on the Internet.

By.Abrahim A. 151
Media Elements
• <audio> - Used for sounds, audio streams, or music, embed audio
content without any additional plug-in.
• <video> - Used for video streams, embed video content etc.

By.Abrahim A. 152
Cont’
• <source> - Used for multiple media resources in media elements,
such as audio, video, etc.
• <embed> - Used for an external application or embedded content.
• <track> - Used for subtitles in the media elements such as video or
audio.

By.Abrahim A. 153
HTML Block and Inline Elements
• Every HTML element has a default display value, depending on what
type of element it is.
• The two most common display values are block and inline.

By.Abrahim A. 154
Header and Footer
• These new tags eliminate the requirement for a div> tag to separate
the two parts. The footer appears at the bottom of the page, whereas
the header appears at the top. The browser will know what to load
first and what to load later if you use the HTML5 elements header
and footer.
• The header may include the following information:
• There are one or more header components (h1 – h6).
• Icon or logo
• Authorship Information

By.Abrahim A. 155
Input tag kinds have been
expanded.
• Input is an old attribute that has been resurrected in HTML with new
values such as email, month, number, range, search, tel, color, week,
URL, time, date, DateTime-local, and so on.
• These are the new values that the input tag may include.
• ContentEditable
• It’s a characteristic that allows the user to make changes to the
content. It makes determining What You See Is What You Get a
breeze. By clicking on the content, you will be able to change it.

By.Abrahim A. 156
Progress
• This tag is used to monitor the status of a job while it is being
completed. You may use the progress tag in conjunction with
JavaScript. It’s similar to a progress bar.
• section
• The section tag is used to split a document into sections or pieces.
For instance, an article may include many parts, such as a header,
footer, newest news, and a section for the primary material, among
others.

By.Abrahim A. 157
Main
• Main is a tag that is used to encapsulate the page’s primary content.
• There can’t be more than one main tag in a document, and this tag
can’t be within the article aside, footer, or header tags.
• The navigation bar, header, and footer are not included.

By.Abrahim A. 158
Figure and figcaption
• Previously, there was no way to add a figure to a document while also
providing a caption.
• It is now semantically possible to include an image into a page
together with its description, thanks to the introduction of the figure
and figcaption tags.

By.Abrahim A. 159
Syntax

<figure>
<img src="image/image-1.jpg" alt="About ADMEC" />
<figcaption>
<p>This is our institute </p>
</figcaption>
</figure>

By.Abrahim A. 160
Placeholders
• To make placeholders for text boxes before, we had to use a little
JavaScript.
• Sure, you may customize the value property as you see appropriate at
first, but the input will be left blank if the user deletes that content
and clicks away.
• This is fixed by using the placeholder property.

By.Abrahim A. 161
Preload Videos
• It’s a fantastic function for sharing videos. It describes how to upload
the video as well as how long the website will take to load.
• This informs the browser about the enhancements made to the
webpage’s user experience. Though this isn’t a must-have feature,
You should include it. It aids in a more accurate portrayal of the page.

By.Abrahim A. 162
Controlling the display
• The display property is used to determine how elements behave. The
default values are used if this attribute is not supplied.
• Regular Expressions
• We may use a regular expression to add a certain pattern as an input.
The most frequent pattern, for example, is [A-Za-z] 5,11. It will take
both capital and lowercase letters. It also indicates that the minimum
character length is five, and the maximum permissible character
length is 11.

By.Abrahim A. 163
Adaptability

• HTML5 has played a significant part in giving the finest accessibility


features to a website since its inception. The usage of the website has
been streamlined as a result of this. People with practically any form
of handicap, such as vision impairment, color blindness, poor vision,
blindness, and so on, may use websites built using HTML5’s
accessibility capabilities.

By.Abrahim A. 164
Validation
• Validation, for example, is the finest example of giving accessibility in
forms. Labels must be clearly indicated.
• Elements that appear inline
• In order to maintain code up to date, these inline items are quite
useful:
• mark: It draws attention to stuff that has been marked in some
manner.
• Time: This is used to display the current time and date on the
website.

By.Abrahim A. 165
Support for Dynamic Pages
• Meter: It indicates how much space on the storage drive is still
available.
• Progress bar: It allows you to track the progress of a task that has
been assigned to you.
• Instead of static websites, dynamic and interactive websites are in
demand these days. Several aspects give the website a dynamic feel:
• mark – It draws attention to stuff that has been marked in some
manner.

By.Abrahim A. 166
Email as a property
• Time — This is used to display the current time and date on the
website.
• Meter – It indicates how much space on the storage drive is still
available.
• Progress bar – It allows you to track the progress of a task that has
been assigned to you. There are other more aspects that help to
make the website dynamic.
• When we write the kind of email in a form, the browser automatically
takes the command from the code to produce an email in the right
and valid format. In previous browsers, this was not feasible.

By.Abrahim A. 167
Cryptographic Nonces
• We may now apply cryptographic nonces to all styles and scripts in
this latest version of HTML. Inside the script and style tags, we
normally employ the nonce attribute. This nonce tag, in essence,
produces a random number that is only used once.
• As a result, every time the page is refreshed, it gets regenerated. It’s
a fantastic feature since it may be utilized to improve the security of
the page’s content—this aids in declaring and permitting the website
to select a certain script or style.

By.Abrahim A. 168
Reverse Links
• With HTML 5.1, the rev property for reverse links is back in play. It
essentially enables web users to utilize the link and anchor tag
components once again. In addition, it describes the connection
between the current document and the linked document in reverse
order.
• Images with a width of zero
• The width of the pictures may now be set to zero by site developers.
This function comes in handy when there’s no need to reveal them to
consumers, such as when monitoring picture files since it would take
up more space otherwise. It is recommended to utilize photos with a
zero width and an empty alt tag.

By.Abrahim A. 169
Canvas in HTML5
• A canvas is a rectangular area that may be used to conduct pixel-level
operations such as drawing a line, box, circle, or executing graphics,
among other things. HTML5 now includes support for canvas regions.
An example code is shown below.
• <canvas id="myCanvas" width="200" height="100">
• Fallback content, when canvas is not supported by the browser.
• </canvas>

By.Abrahim A. 170

You might also like