Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
44 views

CH 2 Basic of HTML and Advanced HTML

The document provides an introduction to HTML including what HTML is, the basic structure of an HTML document, and common HTML elements and tags. It describes HTML elements like headings, paragraphs, lists, and attributes. It also covers formatting elements, tables, images, and embedding audio.

Uploaded by

Ha Black
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

CH 2 Basic of HTML and Advanced HTML

The document provides an introduction to HTML including what HTML is, the basic structure of an HTML document, and common HTML elements and tags. It describes HTML elements like headings, paragraphs, lists, and attributes. It also covers formatting elements, tables, images, and embedding audio.

Uploaded by

Ha Black
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

HTML Introduction

What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

Prepared By : Mr Nirav Limbai


Basic structure of HTML
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Prepared By : Mr Nirav Limbai
Example Explained

•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
Prepared By : Mr Nirav Limbai
What is an HTML Element?

• An HTML element is defined by a start tag, some content, and an end tag:
• <tagname> Content goes here... </tagname>
• The HTML element is everything from the start tag to the end tag:
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

• Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!

Prepared By : Mr Nirav Limbai


HTML Attribute
• Each element or tag can have attributes, which defines the behaviour
of that element.
• Attributes should always be applied with start tag.
• The Attribute should always be applied with its name and value pair.
• The Attributes name and values are case sensitive, and it is
recommended by W3C that it should be written in Lowercase only.
• You can add multiple attributes in one HTML element, but need to
give space between two attributes.
• Syntax
<element attribute_name="value">content</element>
Prepared By : Mr Nirav Limbai
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style property
in element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>

Prepared By : Mr Nirav Limbai


HTML Formatting Elements

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
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
Prepared By : Mr Nirav Limbai
Element name Description
<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.


<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5).Monospaced Font
provides similar space among every letter.
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)

<sup> It displays the content slightly above the normal line.


<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.
Prepared By : Mr Nirav Limbai
HTML List tag

• HTML Lists are used to specify lists of information. All lists may
contain one or more list elements. There are three different types of
HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Prepared By : Mr Nirav Limbai


HTML Ordered List
• HTML Ordered List or Numbered List displays elements in numbered
format. The HTML ol tag is used for ordered list. We can use ordered
list to represent items either in numerical order format or
alphabetical order format, or any format where an order is
emphasized. There can be different types of numbered list:
Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Romal Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)

Prepared By : Mr Nirav Limbai


Type Description
Type "1" This is the default type. In this type, the list
items are numbered with numbers.
Type "I" In this type, the list items are numbered
with upper case roman numbers.
Type "i" In this type, the list items are numbered
with lower case roman numbers.
Type "A" In this type, the list items are numbered
with upper case letters.
Type "a" In this type, the list items are numbered
with lower case letters.
start attribute
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="1" start="5"> : It will show numeric values starting with "5".
Prepared By : Mr Nirav Limbai
HTML Unordered List or Bulleted List

• In HTML Unordered list, all the list items are marked with bullets.
• It is also known as bulleted list also.
• The Unordered list starts with <ul> tag and list items start with the
<li> tag.

Prepared By : Mr Nirav Limbai


HTML Description List or Definition List

• HTML Description list is also a list style which is supported by HTML


and XHTML. It is also known as definition list where entries are listed
like a dictionary or encyclopedia.
• The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

Prepared By : Mr Nirav Limbai


Cellpadding and Cellspacing Attributes
• There are two attributes called cellpadding and cellspacing which you will use to
adjust the white space in your table cells.
• The cellspacing attribute defines space between table cells, while cellpadding
represents the distance between cell borders and the content within a cell.
Colspan and Rowspan Attributes
• You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or more
rows.
• Tables Backgrounds
• You can set table background using one of the following two ways −
• bgcolor attribute − You can set background color for whole table or just for one
cell.
• background attribute − You can set background image for whole table or just for
one cell.

Prepared By : Mr Nirav Limbai


The <frame> Tag Attributes
• name: This attribute is used to give names to the frame. It differentiate one frame from another.
It is also used to indicate which frame a document should loaded into.
Example :
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
• src: This attribute in frame tag is basically used to define the source file that should be loaded into
the frame.The value of src can be any url.
Example :
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
• scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute in frame tag. This
is basically used to control the appearance of scrollbar. The value of this attribute can be yes, no,
auto. Where the value no denotes there will be no appearance of scroll bar.
<frame scrollbar="no">

Prepared By : Mr Nirav Limbai


Adding images and sound
• HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML
image element.
• Attributes of HTML img tag
• The src and alt are important attributes of HTML img tag. All attributes of
HTML image tag are given below.
1) src
• It is a necessary attribute that describes the source or path of the image. It
instructs the browser where to look for the image on the server.
• The location of image may be on the same directory or another server.
2) alt
• The alt attribute defines an alternate text for the image, if it can't be
displayed. The value of the alt attribute describe the image in words. The alt
attribute is considered good for SEO prospective.
Prepared By : Mr Nirav Limbai
How to embed audio in HTML?
• To embed audio in HTML, we use the <audio> tag.
• Before HTML5, audio can not be added to web pages in the Internet
Explorer era. To play audio, we used web plugins like Flash.
• After the release of HTML5, it is possible.
• This tag supports Chrome, Firefox, Safari, Opera, and Edge in three
audio formats – MP3, WAV, OGG.
Syntax:
<audio>
<source src="file_name" type="audio_file_type">
</audio>

Prepared By : Mr Nirav Limbai


Attributes of <audio> tag

Attribute Value Description


autoplay autoplay When the page is loaded. It specifies to play audio as soon as possible.

controls controls It displays audio control.

loop loop It will start the audio again when it is finished.

muted muted When the page is loaded audio will be automatically muted.

src URL It specifies the URL of the audio file.

Prepared By : Mr Nirav Limbai


3) width
• It is an optional attribute which is used to specify the width to display
the image. It is not recommended now. You should apply CSS in place
of width attribute.
4) height
• It h3 the height of the image. The HTML height attribute also
supports iframe, image and object elements. It is not recommended
now. You should apply CSS in place of height attribute.

Prepared By : Mr Nirav Limbai


How to embed video in HTML?
• To embed video in HTML, we use the <video> tag.
• It contains one or more video sources at a time using <source>
tag. It supports MP4, WebM, and Ogg in all modern browsers.
Syntax
<video>
<source src="file_name" type="video_file_type">
</video>

Prepared By : Mr Nirav Limbai


Attributes of <video> tag
Attribute Value Description
autoplay autoplay When the page is loaded. It specifies to play video as soon as possible.
controls controls It displays video control such as play, pause, and stop.
loop loop It will start the video again when it is finished.
muted muted When the page is loaded video will be automatically muted.
poster URL It specifies an image will be shown until video play.
auto
It specifies how the author thinks the video will be loaded when the page is
preload metadata
ready.
none
src URL It specifies the URL of the audio file.
width pixels It specifies the width of the video area. The default value of width is ‘auto’.
height pixels It specifies the height of the video area. The default value of width is ‘auto’.
Prepared By : Mr Nirav Limbai
HTML Table

• A table is a structured set of data made up of rows and columns


(tabular data).
• HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
• We can create a table to display data in tabular form, using <table>
element, with the help of <tr> , <td>, and <th> elements.
• In Each table, table row is defined by <tr> tag, table header is defined
by <th>, and table data is defined by <td> tags.

Prepared By : Mr Nirav Limbai


Frame in Html
• HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document.
• A collection of frames in the browser window is known as a frameset.
• The window is divided into frames in a similar way the tables are
organized: into rows and columns.
• HTML <frame> tag (Not supported in HTML5).
• A <frame> tag is used with <frameset>, and it divides a webpage into
multiple sections or frames, and each frame can contain different
web pages.

Prepared By : Mr Nirav Limbai


Attributes of Frameset tag:

• cols: The cols attribute is used to create vertical frames in web


browser. This attribute is basically used to define the no of columns
and its size inside the frameset tag.

•Use absolute value in pixel


Example:<frameset cols = "300, 400, 300">
•Use percentage value
Example:<frameset cols = "30%, 40%, 30%">
•Use wild card values:
Example:<frameset cols = "30%, *, 30%">

Prepared By : Mr Nirav Limbai


• rows: The rows attribute is used to create horizontal frames in web
browser. This attribute is used to define no of rows and its size inside
the frameset tag.

•Use absolute value in pixel


Example:<frameset rows = "300, 400, 300">
•Use percentage value
Example:<frameset rows = "30%, 40%, 30%">
•Use wild card values
Example:<frameset rows = "30%, *, 30%">

Prepared By : Mr Nirav Limbai


•border: This attribute of frameset tag defines the width of border of each
frames in pixels. Zero value is used for no border.
Example:<frameset border="4" frameset>
•frameborder: This attribute of frameset tag is used to specify whether the three-
dimensional border should be displayed between the frames or not for this use two
values 0 and 1, where 0 defines for no border and value 1 signifies for yes there will
be border.
•framespacing: This attribute of frameset tag is used to specify the amount
of spacing between the frames in a frameset. This can take any integer
value as an parameter which basically denotes the value in pixel.
Example:<framespacing="20"> It means there will be 20 pixel
spacing between the frames

Prepared By : Mr Nirav Limbai


Disadvantages of Frames
• There are few drawbacks with using frames, so it's never
recommended to use frames in your webpages −
• Some smaller devices cannot cope with frames often because their
screen is not big enough to be divided up.
• Sometimes your page will be displayed differently on different
computers due to different screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame technology.

Prepared By : Mr Nirav Limbai


HTML Form
What is HTML <form>?
• form is a container that contains input elements like text, email,
number, radio buttons, checkboxes, submit buttons, etc.
• Forms are generally used when you want to collect data from the
user.
• For example, a user wants to buy a bag online, so he/she has to first
enter their shipping address in the address form and then add their
payment details in the payment form to place an order.
• Forms are created by placing input fields within paragraphs,
preformatted text, lists and tables.
• The <form> tag is used to create an HTML form. Here's a simple
example of a login form
Prepared By : Mr Nirav Limbai
HTML Form Syntax
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>

Sr.No Attribute & Description


1 action
Backend script ready to process your passed data.
2 method
Method to be used to upload data. The most frequently used are GET and POST
methods.
3 target
Specify the target window or frame where the result of the script will be displayed. It
takes values like _blank, _self, _parent etc.

Prepared By : Mr Nirav Limbai


HTML Form Controls

• There are different types of form controls that you can use to collect
data using HTML form −
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• Submit and Reset Button

Prepared By : Mr Nirav Limbai


form controls
• 1.<label> : It defines label for <form> elements.
• 2. <input> : It is used to get input data from the form in various types such as
text, password, email, etc by changing its type.
• It allows you to specify various types of user input fields, depending on
the type attribute. An input element can be of type text field, password
field, checkbox, radio button, submit button, reset button, file select box

• Syntax:
<input type="text" />

Prepared By : Mr Nirav Limbai


Sr.No Attribute & Description
1 type
Indicates the type of input control and for text input control it will be set
to text.
2 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.
3 value
This can be used to provide an initial value inside the control.
4 size
Allows to specify the width of the text-input control in terms of characters.
5 maxlength
Allows to specify the maximum number of characters a user can enter into
the text box.

Prepared By : Mr Nirav Limbai


• 3. Password input controls : This is also a single-line text input but it masks
the character as soon as a user enters it. They are also created using HTML
<input>tag but type attribute is set to password.
• syntax : <input type=“password”>
Sr.No Attribute & Description
1 type
Indicates the type of input control and for password input control it will be set to password.
2 name
Used to give a name to the control which is sent to the server to be recognized and get the
value.
3 value
This can be used to provide an initial value inside the control.
4 size
Allows to specify the width of the text-input control in terms of characters.
5 maxlength
Allows to specify the maximum number of characters a user can enter into the text box.

Prepared By : Mr Nirav Limbai


Multiple-Line Text Input Controls
• 3. Multiple-Line Text Input Controls : This is used when the user is
required to give details that may be longer than a single sentence.
Multi-line input controls are created using HTML <textarea> tag.
• syntax : <textarea>…….</textarea>
Sr.No Attribute & Description
1 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.
2 rows
Indicates the number of rows of text area box.
3 cols
Indicates the number of columns of text area box

Prepared By : Mr Nirav Limbai


• 4. Checkboxes are used when more than one option is required to be
selected. They are also created using HTML <input> tag but type
attribute is set to checkbox.
• syntax : <input type=“checkbox”>
Sr.No Attribute & Description
1 type
Indicates the type of input control and for checkbox input control it will be set
to checkbox..
2 name
Used to give a name to the control which is sent to the server to be recognized and get the
value.
3 value
The value that will be used if the checkbox is selected.
4 checked
Set to checked if you want to select it by default.

Prepared By : Mr Nirav Limbai


• 5. Radio buttons are used when out of many options, just one option is
required to be selected. They are also created using HTML <input> tag
but type attribute is set to radio.
• syntax : <input type=“radio”>

Sr.No Attribute & Description


1 type
Indicates the type of input control and for checkbox input control it will be set to radio.
2 name
Used to give a name to the control which is sent to the server to be recognized and get the value.
3 value
The value that will be used if the radio box is selected.
4 checked
Set to checked if you want to select it by default.

Prepared By : Mr Nirav Limbai


• 6. Select Box Control : A select box, also called drop down box which
provides option to list down various options in the form of drop down
list, from where a user can select one or more options.
syntax : <input type=“radio”>

Sr.No Attribute & Description


1 name
Used to give a name to the control which is sent to the server to be recognized and get the
value.
2 size
This can be used to present a scrolling list box.
3 multiple
If set to "multiple" then allows a user to select multiple items from the menu.

Prepared By : Mr Nirav Limbai


Following is the list of important attributes of
<option> tag −

Sr.No Attribute & Description


1 value
The value that will be used if an option in the select box box is selected.
2 selected
Specifies that this option should be the initially selected value when the page loads.
3 label
An alternative way of labeling options

Prepared By : Mr Nirav Limbai


• 6.Button Controls : There are various ways in HTML to create clickable
buttons. You can also create a clickable button using <input>tag by
setting its type attribute to button. The type attribute can take the
following values.
• syntax : <input type=“button”>
Sr.No Type & Description
1 submit
This creates a button that automatically submits a form.
2 reset
This creates a button that automatically resets form controls to their initial values.
3 button
This creates a button that is used to trigger a client-side script when the user clicks that
button.
4 image
This creates a clickable button but we can use an image as background of the button.

Prepared By : Mr Nirav Limbai


HTML5 | Introduction & syntax

• HTML 5 is the fifth and current version of HTML. It has improved the
markup available for documents and has introduced application
programming interfaces(API) and Document Object Model(DOM).
• The latest versions of Apple Safari, Google Chrome, Mozilla Firefox,
and Opera all support many HTML5 features and Internet Explorer 9.0
will also have support for some HTML5 functionality.
• The mobile web browsers that come pre-installed on iPhones, iPads,
and Android phones all have excellent support for HTML5.

Prepared By : Mr Nirav Limbai


New Features
• HTML5 introduces a number of new elements and attributes that can help you in building modern websites.
Here is a set of some of the most prominent features introduced in HTML5.
• New Semantic Elements − These are like <header>, <footer>, and <section>.
• Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag.
• Persistent Local Storage − To achieve without resorting to third-party plugins.
• WebSocket − A next-generation bidirectional communication technology for web applications.
• Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they
are called Server-Sent Events (SSE).
• Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.
• Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.
• Geolocation − Now visitors can choose to share their physical location with your web application.
• Drag and drop − Drag and drop the items from one location to another location on the same webpage.

Prepared By : Mr Nirav Limbai


HTML5 Document
• The following tags have been introduced for better structure −
• section − This tag represents a generic document or application section. It can be used together
with h1-h6 to indicate the document structure.
• article − This tag represents an independent piece of content of a document, such as a blog entry
or newspaper article.
• aside − This tag represents a piece of content that is only slightly related to the rest of the page.
• header − This tag represents the header of a section.
• footer − This tag represents a footer for a section and can contain information about the author,
copyright information, et cetera.
• nav − This tag represents a section of the document intended for navigation.
• dialog − This tag can be used to mark up a conversation.
• figure − This tag can be used to associate a caption together with some embedded content, such
as a graphic or video.
Prepared By : Mr Nirav Limbai
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
HTML 5 <header>...</header> HTML 5
document <nav>...</nav> document
structure structure
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>

Prepared By : Mr Nirav Limbai


HTML5 Document structure
• The following tags have been introduced for better structure −
1. section − This tag represents a generic document or application section. It can
be used together with h1-h6 to indicate the document structure. Section tag
defines the section of documents such as chapters, headers, footers or any
other sections.
2. article − This tag represents an independent piece of content of a document,
such as a blog entry or newspaper article. It defines the self-contained content.
3. aside − This tag represents a piece of content that is only slightly related to the
rest of the page. It defines content aside from main content. Mainly
represented as sidebar. The <aside> tag contains mainly author information,
links, related content, and so on.
4. header − This tag represents the header of a section. The <header> tag in
HTML is used to define the header for a document or a section as it contains
the information related to the title and heading of the related content.

Prepared By : Mr Nirav Limbai


5. footer − It defines the footer section of a webpage. The <footer> tag in HTML is
used to define a footer of HTML document. This section contains the footer
information (author information, copyright information, carriers, etc). The footer tag
is used within the body tag. The <footer> tag is new in the HTML5. The footer
elements require a start tag as well as an end tag.
6. nav − This tag represents a section of the document intended for navigation.The
<nav> tag defines a set of navigations links.
7. dialog − This tag can be used to mark up a conversation. It defines a dialog box or
other interactive components. The <dialog> tag is used to specify the dialog box or
window. This tag is used to create a popup dialog and models on a web page. This
tag is new in HTML5.
8. figure − The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos, or codes listing in a document. It is related to main
flow, but it can be used in any position of a document and the figure goes with the
flow of the document and if remove it then it should not affect the flow of the
document. This tag is new in HTML5.
Prepared By : Mr Nirav Limbai
Web Forms 2.0(The <input> element in HTML5
)
Sr.No. Type & Description
Datetime : A date and time (year, month, day, hour, minute, second,
1 fractions of a second) encoded according to ISO 8601 with the time zone
set to UTC.
datetime-local : A date and time (year, month, day, hour, minute, second,
2 fractions of a second) encoded according to ISO 8601, with no time zone
information.

Date : A date (year, month, day) encoded according to ISO 8601.


3
Month : A date consisting of a year and a month encoded according to
4
ISO 8601.
Prepared By : Mr Nirav Limbai
Week : A date consisting of a year and a week number encoded according to ISO
5
8601.
Time : A time (hour, minute, seconds, fractional seconds) encoded according to ISO
6
8601.
Number :It accepts only numerical value. The step attribute specifies the precision,
7
defaulting to 1.
Rangel : The range type is used for input fields that should contain a value from a
8
range of numbers.
Emaill :It accepts only email value. This type is used for input fields that should contain
9 an e-mail address. If you try to submit a simple text, it forces to enter only email
address in email@example.com format.
url : It accepts only URL value. This type is used for input fields that should contain a
10 URL address. If you try to submit a simple text, it forces to enter only URL address
either in http://www.example.com format or in http://example.com format.
Color : Choose the color from the color picker window.
11
Prepared By : Mr Nirav Limbai
Attributes of HTML5
1. The placeholder attribute : HTML5 introduced a new attribute
called placeholder. This attribute on <input> and <textarea>
elements provide a hint to the user of what can be entered in the
field. The placeholder text must not contain carriage returns or line-
feeds.
2. The autofocus attribute : This is a simple one-step pattern, easily
programmed in JavaScript at the time of document load,
automatically focus one particular form field.
3. The required attribute :Now you do not need to have JavaScript for
client-side validations like empty text box would never be submitted
because HTML5 introduced a new attribute called required.

Prepared By : Mr Nirav Limbai


4. Pattern attribute : The pattern attribute specifies a regular expression that
the <input> element's value is checked against on form submission.
Note: The pattern attribute works with the following input types: text, date,
search, url, tel, email, and password.

1. The pattern attribute specifies a <input type="text" id="country_code" name="


regular expression that country_code"
the <input> element's value is pattern="[A-Za-z]{3}" title="Three letter
checked against on form submission. country code">
Note: The pattern attribute works
with the following input types: text,
date, search, url, tel, email, and
password.

Prepared By : Mr Nirav Limbai


2. An <input> element with type="password" that <input type="password" id="pwd" name="pwd"
must contain 8 or more characters: pattern=".{8,}" title="Eight or more characters">

3. An <input> element with type="password" that <input type="password" id="pwd" name="pwd"


must contain 8 or more characters that are of at pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
least one number, and one uppercase and title="Must contain at least one number and
lowercase letter: one uppercase and lowercase letter, and at least 8
or more characters">

4. An <input> element with type="email" that must <input type="email" id="email" name="email"
be in the following pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-
order: characters@characters.domain (characters z]{2,}$">
followed by an @ sign, followed by more
characters, and then a "."
After the "." sign, add at least 2 letters from a to z:

Prepared By : Mr Nirav Limbai


5. autocomplete Attribute :Autocomplete allows the browser to predict the value. When a user
starts to type in a field, the browser should display options to fill in the field, based on earlier typed
values. It is possible to have autocomplete "on" for the form, and "off" for specific
input fields, or vice versa.
Note: The autocomplete attribute works with the following <input> types: text,
search, url, tel, email, password, datepickers, range, and color.
EX :

<form action="/action_page.php" method="get" autocomplete="on">


E-mail: <input type="email" name="email" autocomplete="off"><br>

Prepared By : Mr Nirav Limbai


HTML Canvas Tag

• HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript.
It can be used to draw graphs, make photo compositions or do simple (and not so simple)
animations.
• There are several methods in canvas to draw paths, boxes, circles, text and add images.
• The HTML <canvas> element is used to draw graphics on a web page.
• You can easily find that <canvas> element in the DOM using getElementById() method as follows −
var canvas = document.getElementById("mycanvas");
Here is a simple <canvas> element which has only two specific attributes width and height plus all
the core HTML5 attributes like id, name and class, etc

Prepared By : Mr Nirav Limbai


<html>
<body>

<canvas id="myCanvasLine" width="200" height="100" style="border:1px s


olid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var cctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

Prepared By : Mr Nirav Limbai

You might also like