Scribd
Upload
10 views36 pages

HTML Introduction

The document provides an introduction to web technologies, focusing on HTML5, CSS, and JavaScript. It explains the structure of HTML5 documents, including elements like the head, body, and various tags for content formatting, such as paragraphs, headings, and links. Additionally, it covers the use of images, lists, and special characters in HTML5, along with validation services for checking document syntax.

Uploaded by

phtkgmz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views36 pages

HTML Introduction

The document provides an introduction to web technologies, focusing on HTML5, CSS, and JavaScript. It explains the structure of HTML5 documents, including elements like the head, body, and various tags for content formatting, such as paragraphs, headings, and links. Additionally, it covers the use of images, lists, and special characters in HTML5, along with validation services for checking document syntax.

Uploaded by

phtkgmz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

Web technologies

UNIT I
Introduction to HTML5 Part - I & II.
Cascading Style Sheets (CSS) Part - I & II.
JavaScript: Introduction to Scripting, Control Statements Part - I & II.

Web technologies refers to the way computers/devices communicate with each other using
mark up languages.
It is communication across the web, and create, deliver or manage web content using
hypertext markup language (HTML).
A web page is a web document which is written in in HTML (hypertext markup language)
Introduction to HTML5 Part - I & II.
Introduction
HTML5 (Hypertext Markup Language 5)
HTML5 is a markup language that specifies the structure and content of documents that are
displayed in web browsers
Hypertext defines the link between the web pages. The markup language is used to define the
text document within the tag which defines the structure of web pages.
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).
Editing HTML5
We’ll create HTML5 documents by typing HTML5 markup text in a text editor (such as
Notepad, TextEdit, vi, emacs) and saving it with the .html or .htm filename extension.
Computers called web servers store HTML5 documents.
Clients (such as web browsers running on your local computer or smartphone) request specific
resources such as HTML5 documents from web servers.
First HTML5 Example
Figure 2.1 is an HTML5 document named main.html.
This first example displays the message : Welcome to HTML5! in the browser.

<!DOCTYPE html>

<!-- Fig. 2.1: main.html -->


<!-- First HTML5 example. -->
<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>Welcome to HTML5!</p>
</body>
</html>
Document Type Declaration
The document type declaration (DOCTYPE) in line 1 is required in HTML5 documents so that browsers
render the page in standards mode, according to the HTML and CSS specifications.
Some browsers operate in quirks mode to maintain backward compatibility with web pages that are not
up-to-date with the latest standards.
Blank Lines
We include blank lines (lines 2 and 10) to make our documents easier to read—the browser ignores them.
Comments Lines
3–4 are HTML5 comments. insert comments in your HTML5 markup to improve readability and describe
the content of a document. The browser ignores comments when your document is rendered. HTML5
comments start with <!-- and end with -->.
html, head and body Elements
HTML5 markup contains text (and images, graphics, animations, audios and videos) that represents the
content of a document and elements that specify a document’s structure and meaning.
html element (which starts in line 5 -14), the head element (lines 6–9) and the body element (lines 11–
13).
The html element encloses the head section (represented by the head element) and the body section
(represented by the body element).
The head section contains information about the HTML5 document, such as the title (line 7).
The head section also can contain special document-formatting instructions called CSS3 style sheets and
client-side programs called scripts for creating dynamic web pages
The body section contains the page’s content, which the browser displays when the user visits the web
page.
Start Tags and End Tags
HTML5 documents delimit most elements with a start tag and end tag.
• A start tag consists of the element name in angle brackets
 For example, <html>
• An end tag consists of the element name preceded by a forward slash (/) in angle brackets
 For example, </html>
• There are several so-called “void elements” that do not have end tags.
• Many start tags have attributes that provide additional information about an element, which browsers
use to determine how to process the element.
• Each attribute has a name and a value separated by an equals sign (=).
title Element
• The title element is called a nested element, because it’s enclosed in the head element’s start and
end tags.
• The head element is also a nested element, because it’s enclosed in the html element’s start and end
tags.
• The title element describes the web page.
• Titles usually appear in the title bar at the top of the browser window, in the browser tab on which the

page is displayed, and also as the text identifying a page when users add the page to their list of
Favorites or Bookmarks, enabling them to return to their favorite sites.
• Search engines use the title for indexing purposes and when displaying results

Paragraph Element
All text placed between the <p> and </p> tags forms one paragraph.
W3C HTML5 Validation Service
The World Wide Web Consortium (W3C) provides a validation service (at validator.w3.org) for checking
a document’s syntax. Documents can be validated by
• providing the URL of an online web page
• uploading a file to the validator
• pasting code directly into a text area provided on the validator site
Validation services (e.g., validator.w3.org/#validate-by-upload) ensure that an HTML5 document is
syntactically correct
Headings
HTML5 provides six heading elements (h1 through h6) for specifying the relative importance of
information
 Heading element h1 is considered the most significant heading and is rendered in the largest font.
 Each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font.
<!DOCTYPE html>
<!-- Fig. 2.2: heading.html -->
<!-- Heading elements h1 through h6. -->
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Level 1 Heading</h1>
<h2>Level 2 heading</h2> Heading elements h1 through h6.
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6
</body>
</html>
Linking
A hyperlink references or links to other resources, such as HTML5 documents and images.
Web browsers typically underline text hyperlinks and color them blue by default
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links Here are my favorite sites</h1>
<p><strong>Click a name to visit that site.</strong></p>
<p><a href="https://www.facebook.com/">facebook!</a></p>
<p><a href="https://www.Twitter.com/">Twitter!</a></p>
<p><a href="https://www.google.com/">google!</a></p>
<p><a href="https://www.rvrjc.ac.in/">rvrjc!</a></p>
</body>
</html>
The strong element indicates that the content has high importance. Browsers typically render such text
in a bold font.
Links are created using the a (anchor) element.
Attribute href (hypertext reference) specifies a resource’s location, such as
 a web page or location within a web page
 a file
 an e-mail address
When a URL does not indicate a specific document on the website, the web server returns a default
web page.
This page is often called index.html, but most web servers can be configured to use any file as the
default web page for the site.
If the web server cannot locate a requested document, it returns an error indication to the web browser
(known as a 404 error), and the browser displays a web page containing an error message.
Hyperlinking to an E-Mail Address
Anchors can link to e-mail addresses using a mailto: URL. When the user clicks this type of anchored
link, most browsers launch the user’s default e-mail program (for example, Mozilla Thunderbird,
Microsoft Outlook or Apple Mail) to enable the user to write an e-mail message to the linked address.
<!DOCTYPE html>
<html>
<body>
<title>Contact Page</title>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new email), use mailto:
inside the href attribute:</p>
<p><a href="mailto:[email protected]">chandu</a></p>
</body>
</html>
Images
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for
the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
example
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get an understanding of what the image
contains:</p>
<img src="E:/Chandu/WEB Tech.rvrlogo.jpg" alt="Rvrjc college" width="100" height="45">
<img src="cse.jpg" alt="dept of cse" width="100" height="45">
<!img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> animated images
</body>
Using Images as Hyperlinks
By using images as hyperlinks, you can create graphical web pages that link to other resources.
<!DOCTYPE html>
<html>
<title>RVRJC</title>
<body>
<p>
<a href="https://rvrjcce.ac.in/"><img src="https://rvrjcce.ac.in/rvr.jpg" alt="click me"
style="width:50px;height:50px;"></a>
</p>
</body>
</html>
Special Characters and Horizontal Rules
Characters with special meaning in HTML are called reserved characters. For example, left (<) and right (>)
angle brackets are reserved in HTML to identify the opening and closing tags of elements.
Characters that don’t appear on your keyboard include things like the copyright symbol (©) and the
mathematical value pi (π)
For example, the mark up
<p>if x < 10 then increment x by 1</p>
We could correct the previous line by writing
<p>if x &lt; 10 then increment x by 1</p>
Horizontal Rules
In HTML <hr> tag to separate out different topics on a page.
The <hr> tag is an empty element. This means that it only has an opening tag, <hr>.
Starting in HTML5, we now need to attach a slash to the tag of an empty element. So, instead of having just
<hr>, you should make it <hr />.
The <hr /> tag accepts attributes such as width, color, size, and align.
Ex
<hr width="50” />
Most Common Character Codes
Here is a quick reference table with a few of the most commonly seen HTML character references:
Character Name Character Name in HTML Symbol
Less Than &lt; <
Greater Than &gt; >
Slash &sol; /
Quotation &quot; "
Apostrophe &apos; '
Ampersand &amp; &
Copyright &copy; ©
Registered Trademark &reg; ®
Degree &deg; °
Left-pointing double angle &laquo; «
Right-pointing double angle &raquo; »
Non-Breaking Space &nbsp;
Subscript: The <sub> tag is used to add a subscript text to the HTML document. The <sub> tag defines the subscript text. Subscript text
appears half a character below the normal line and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O to be written as H 2O.
Superscript: The <sup> tag is used to add a superscript text to the HTML document. The <sup> tag defines the superscript text.
Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font. Superscript text can be used
for footnotes.
<!DOCTYPE html>
<!-- Inserting special characters. -->
<html>
<head>
<meta charset = "utf-8">
<title>Contact Page</title>
</head>
<body>
<p>
<a href = "mailto:[email protected]">Send an email to rvrjc &amp; colleges, Inc.</a>.
</p>
<hr> <!-- inserts a horizontal rule -->
<!-- special characters are entered -->
<!-- using the form &code; -->
<p>All information on this site is <strong>&copy; rvrjc college, Inc. 1985.</strong> </p>
<!-- to strike through text use <del> element -->
<!-- to subscript text use <sub> element -->
<!-- to superscript text use <sup> element -->
<!-- these elements are nested inside other elements -->
<p><del>You may download 3.14 x 10<sup>2</sup>
characters worth of information from this site.</del>
The first item in the series is x<sub>1</sub>.</p>
<p>Note: &lt; &frac14; of the information presented here is updated daily.</p>
</body>
Lists <!DOCTYPE html>
• HTML offers three ways for specifying lists of information. All <html>
lists must contain one or more list elements. Lists may contain − <head>
<ul> − An unordered list. This will list items using plain bullets. <title>HTML Unordered List</title>
</head>
<ol> − An ordered list. This will use different schemes of
numbers to list your items. <body>
<ul>
<dl> − A definition list. This arranges your items in the same way
as they are arranged in a dictionary. <!ul type = "disc">
<li>Beetroot</li>
HTML Unordered Lists
<li>Ginger</li>
• An unordered list is a collection of related items that have no
<li>Potato</li>
special order or sequence.
<li>Radish</li>
• This list is created by using HTML <ul> tag. Each item in the
</ul>
list is marked with a bullet.
</body>
The type Attribute
</html>
You can use type attribute for <ul> tag to specify the type of bullet you like. By
default, it is a disc. Following are the possible options − O/P
<ul type = "square"> • Beetroot
<ul type = "disc"> • Ginger
<ul type = "circle"> • Potato
• Radish
HTML Ordered Lists <!DOCTYPE html>
• If you are required to put your items in a numbered list instead of bulleted, then HTML <html>
ordered list will be used. <head>
• This list is created by using <ol> tag. The numbering starts at one and is incremented <title>HTML Ordered
by one for each successive ordered list element tagged with <li>. List</title>
The type Attribute </head>
We can use type attribute for <ol> tag to specify the type of numbering you like. By <body>
default, it is a number.
<ol>
Following are the possible options −
<!ol type = "1">
• <ol type = "1"> - Default-Case Numerals.
• <ol type = "I"> - Upper-Case Numerals.
<li>Beetroot</li>
• <ol type = "i"> - Lower-Case Numerals. <li>Ginger</li>
• <ol type = "A"> - Upper-Case Letters. <li>Potato</li>
• <ol type = "a"> - Lower-Case Letters <li>Radish</li>
The start Attribute </ol>
We can use start attribute for <ol> tag to specify the starting point of numbering you </body>
need. Following are the possible options −
</html>
• <ol type = "1" start = "4"> - Numerals starts with 4.
• <ol type = "I" start = "4"> - Numerals starts with IV. 1.Beetroot
• <ol type = "i" start = "4"> - Numerals starts with iv. 2.Ginger
• <ol type = "a" start = "4"> - Letters starts with d. 3.Potato
HTML Definition Lists <!DOCTYPE html>
• HTML5 supports a list style which is called definition <html>
lists where entries are listed like in a dictionary or <head>
encyclopedia. The definition list is the ideal way to
present a glossary, list of terms, or other name/value <title>HTML Definition List</title>
list. </head>
Definition List makes use of following three tags. <body>
• <dl> − Defines the start of the Definition list <dl>
• <dt> − Definition term <dt><b>HTML</b></dt>
• <dd> − definition Data <dd>This stands for Hyper Text
</dl> − Defines the end of the Definition list Markup Language</dd>
Output: <dt><b>HTTP</b></dt>
HTML <dd>This stands for Hyper Text
Transfer Protocol</dd>
This stands for Hyper Text Markup Language
</dl>
HTTP
</body>
This stands for Hyper Text Transfer Protocol
</html>
<!DOCTYPE html> <li>New applications

<!-- Nested lists and ordered lists. --> <!-- nested ordered list -->

<html> <ol>

<head> <li>For business</li>

<meta charset = "utf-8"> <li>For pleasure</li>

<title>Lists</title> </ol>

</li> <!-- ends line 27 new applications li-->


</head>
<li>Around the clock news</li>
<body>
<li>Search engines</li>
<ul>
<li>Shopping</li>
<li><a href = "http://www.youtube.com">YouTube</a></li>
<li>Programming
<li><a href = "http://www.wikipedia.org">Wikipedia</a></li>
<!-- another nested ordered list -->
<li><a href = "http://www.amazon.com">Amazon</a></li>
<ol>
<li><a href = "http://www.linkedin.com">LinkedIn</a></li>
<li>XML</li>
</ul>
<li>Java</li>
<h1>The Best Features of the Internet</h1>
<li>HTML5</li>
<!-- create an unordered list -->
<li>JavaScript</li>
<ul>
<li>New languages</li>
<li>You can meet new people from countries around the world.</li>
</ol>
<li>
</li> <!-- ends programming li of line 38 -->
You have access to new media as it becomes public:
</ul> <!-- ends the nested list of line 24 -->
<!-- this starts a nested unordered list, which uses a --> </li>
<!-- different bullet. The list ends when you --> <li>Links</li>
<!-- close the <ul> tag. --> <li>Keeping in touch with old friends</li>
<ul> <li>It’s the technology of the future!</li>
<li>New games</li> </ul> <!-- ends the unordered list of line 15 -->

</body>
Tables
Tables are frequently used to organize data into rows and columns
<caption> : Defines the title of a <table>.
<table> : Defines a container for tabular data, the entire table is represented by the HTML5 table tag. This tag looks like this <table>. The
<table> tag is a container tag – its purpose is to hold the other components of the tag. The <table> tag has a mandatory closing tag
</table>.
<thead> : Defines a group of table rows <tr> at the start of a <table>.
thead – is the head of the table. This area usually contains the column headings
<tr> : Defines a table row, a single row is represented by the <tr> tag.
<tbody> : Defines a group of table rows <tr>.like is the body of the table. The table data.
<td> : Defines a table cell. Must be a direct child of a <tr>.
<th> : Defines a table header, Must be a direct child of a <tr>.
a single cell is represented by either a <td> or <th> tag.
A <td> tag (the “td” stands for “table data”) is used for inserting data into the table.
A <th> tag (the “th” stands for “table header”) is used for inserting headings into the table.
<tfoot> : Defines a group of table rows <tr> at the end of a <table>.
The tfoot section is defined with a tfoot (table foot) element. The text placed in the footer commonly includes calculation results and
<!DOCTYPE html> <th>$3.75</th>
<!-- Creating a basic table. --> </tr>
<html> </tfoot>
<head> <!-- all table content is enclosed -->
<meta charset = "utf-8"> <!-- within the <tbody> -->
<title>A simple HTML5 table</title> <tbody>
</head> <tr>
<body> <td>Apple</td> <!-- insert a data cell -->
<!-- the <table> tag opens a table -->
<td>$0.25</td>
<table border = "1">
</tr
<!-- the <caption> tag summarizes the table's -->
<tr>
<!-- contents (this helps visually impaired people) -->
<td>Orange</td>
<caption><strong>Table of Fruits (1st column) and
<td>$0.50</td>
Their Prices (2nd column)</strong></caption>
<!-- the <thead> section appears first in the table --> </tr>

<!-- it formats the table header area --> <tr>

<thead> <td>Banana</td>

<tr> <!-- <tr> inserts a table row --> <td>$1.00</td>

<th>Fruit</th> <!-- insert a heading cell --> </tr>


<th>Price</th> <tr>
</tr> <td>Pineapple</td>
</thead> <td>$2.00</td>
<!-- the <tfoot> section appears last in the table --> </tr>
<!-- it formats the table footer --> </tbody> </table> </body> </html>
<tfoot>
<tr>
Merging Cells
Merging columns
• To merge different cells on a given row, you use the “colspan” attribute of the tag.
• The colspan attribute takes a number as a value (e.g. colspan= “5”). This number represents the number of columns a given
cell should cover (span).
<tr>
<td colspan="4">
Temperature Distribution In Jan – Apr 2015
</td>
</tr>
Merging Rows
• In order to merge two or more cells in the same column, you use the “rowspan” attribute. This attribute is similar to
the colspan, except that it applies to rows.
• For instance, the average temperatures of February and March are merged as follows:
<tr>
<td> February </td>
<td> 49 </td>
<td> 37 </td>
<td rowspan="2"> 43 </td>
<html>
<tr>
<head>
<td> jan </td>
<title>A simple HTML5 table</title>
</head>
<td> 48 </td>
<body>
<td> 336 </td>
<!-- the <table> tag opens a table -->
<td > 40 </td>
<table border = "1"> </tr>

<tr> <tr>
<td colspan="3"> <td> February </td>
Temperature Distribution In Jan – Apr 2015 <td> 49 </td>
</td> <td> 37 </td>
</tr> <td rowspan="2"> 43 </td>
<tr> <tr>
<td> month </td> <td> march </td>
<td> high </td> <td> 49 </td>
<td> low </td> <td> 37 </td>
<td > avg</td>
</tr> </tr>
</tr>
</table> </body> </html>
</th>
<!DOCTYPE html>
</tr>
<!-- Complex HTML5 table. -->
<tr>
<html>
<th># of humps</th>
<head>
<th>Indigenous region</th>
<meta charset = "utf-8">
<th>Spits?</th>
<title>Tables</title>
<th>Produces wool?</th>
</head> </tr>
<body> </thead>
<h1>Table Example: Spanning Rows and Columns</h1> <tbody>
<table border = "1"> <tr>

<caption>A more complex sample table</caption> <th>Camels (bactrian)</th>

<thead> <td>2</td>

<!-- rowspans and colspans merge the specified --> <td>Africa/Asia</td>

<!-- number of cells vertically or horizontally --> <td>Yes</td>

<tr> <td>Yes</td>

</tr>
<!-- merge two rows -->
<tr>
<th rowspan = "2">
<th>Llamas</th>
<img src = "camel.jpg" width = "205"
<td>1</td>
height = "167" alt = "Picture of a camel">
<td>Andes Mountains</td>
</th>
<td>Yes</td>
<!-- merge four columns -->
<td>Yes</td>
<th colspan = "4">
</tr>
<strong>Camelid comparison</strong><br>
</tbody> </table> </body> </html>
Approximate as of 10/2023
Forms
<p><label>Name:
• A form is a section of a document which contains controls such as
<input name = "name" type = "text" size = "25" maxlength = "30">
text fields, password fields, checkboxes, radio buttons, submit
button, menus etc. </label></p
• A form facilitates the user to enter data that is to be sent to the <p>
server for processing such as name, email address, password, <!-- input types "submit" and "reset" insert -->
phone number, etc. . <!-- buttons for submitting and clearing the -->
<!DOCTYPE html>
<!-- form's contents, respectively -->
<!-- Form with a text field and hidden fields. -->
<html> <input type = "submit" value = "Submit">
<head> <input type = "reset" value = "Clear">
<meta charset = "utf-8">
</p>
<title>Forms</title>
</form>
</head>
<body> </body>
<h1>Feedback Form</h1> </html>
<p>Please fill out this form to help us improve our site.</p>
<!-- this tag starts the the form, gives the -->
<!-- method of sending information and the -->
<!-- location of the form-processing script -->
<form method = "post" action = "http://www.rvrjcce.ac.in">
<!-- hidden inputs contain non-visual -->
<!-- information that will also be submitted -->
<input type = "hidden" name = "recipient"
<!DOCTYPE html>
<label>Enter your phone🤳 number:<br/><small>format:123-456-7890</small></label>
<!-- Form with a text field and hidden fields. -->
<html>
<input type = "tel" id = "phone" name = "phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required/>
<head>
<meta charset = "utf-8">
<title>Forms</title> </p>
</head> <p><input type = "radio" name = "Gender" value = "Male"> Male
<body> <input type = "radio" name = "Gender" value = "Female"> Female</p>
<h1>Feedback Form</h1> <p><input type = "checkbox" name = "hi"value = "Sports" > </p>
<p>Please fill out this form to help us improve our site.</p>
<!-- this tag starts the the form, gives the --> <label for="Programming">PROGRAMMING</label>
<!-- method of sending information and the --> <select id="pogramming" name="PROGRAMMING">
<!-- location of the form-processing script --> <option value="C">C</option>
<form method = "post" action = "http://www.rvrjcce.ac.in"> <option value="PYTHON">PYTHONL</option>
<!-- hidden inputs contain non-visual --> <option value="OOP">OOP</option>
<!-- information that will also be submitted --> <option value="PHP">PHP</option>
<input type = "hidden" name = "recipient" <option value="HTML">HTML</option>
value = "[email protected]"> <option value="CSS">CSS</option>
<input type = "hidden" name = "subject" <option value="JavaScript">JavaScript</option>
value = "Feedback Form"> </select>
<!-- <input type = "text"> inserts a text field --> <p>
<p><label>Name: <!-- input types "submit" and "reset" insert -->
<input name = "name" type = "text" size = "25" maxlength = "30">
<!-- buttons for submitting and clearing the -->
</label></p>
<!-- form's contents, respectively -->
<p><label>Branch:
<input type = "submit" value = "Submit">
<input name = "Branch" type = "text" size = "25" maxlength = "30">
<input type = "reset" value = "Clear">
</label></p>
</p>
<p><label>Branch:
</form>
<input name = "Address" type = "text" size = "25" maxlength = "300">
</body>
</label></p>
</html>
Internal Linking
internal linking—a mechanism that enables the user to jump between locations in the same document.
Internal linking is useful for long documents that contain many sections. Clicking an internal link enables the user to find a section without
scrolling through the entire document.
The <em> tag is used to define emphasized text. The content inside is typically displayed in italic.
<!DOCTYPE html>
<!-- Internal Linking -->
<html>
<head>
<meta charset = "utf-8">
<title>Internal Links</title>
</head>
<body>
<!-- id attribute creates an internal hyperlink destination -->
<h1 id = "features">The Best Features of the Internet</h1>
<!-- an internal link's address is "#id" -->
<p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>
<ul>
<li>You can meet people from countries around the world.</li>
<li>You have access to new media as it becomes public:
<ul>
<li>New games</li> <!-- id attribute creates an internal hyperlink destination -->

<li>New applications <h1 id = "bugs">My 3 Favorite Bugs</h1>


<ul> <p>
<li>For Business</li> <!-- internal hyperlink to features -->
<li>For Pleasure</li> <a href = "#features">Go to <em>Favorite Features</em></a>
</ul> </p>
</li> <ol>
<li>Around the clock news</li> <li>Fire Fly</li>
<li>Search Engines</li> <li>Gal Ant</li>
<li>Shopping</li>
<li>Roman Tic</li>
<li>Programming
</ol>
<ul>
</body>
<li>HTML5</li>
</html>
<li>Java</li>
<li>Dynamic HTML</li>
<li>Scripts</li>
<li>New languages</li>
</ul>
</li>
</ul>
</li>
<li>Links</li>
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li>
Meta Elements
• Search engines catalog sites by following links from page to page (often known as spidering
or crawling the site) and saving identification and classification information for each page.
• One way that search engines catalog pages is by reading the content in each page’s meta
elements, which specify information about a document.
• Using the meta element is one of many methods of search engine optimization (SEO)—the
process of designing and tuning your website to maximize your findability and improve your
rankings in organic (nonpaid) search engine results.
• Metadata will not be displayed on the page, but is machine parsable.
• Two important attributes of the meta element are name, which identifies the type of meta
element, and content, which provides the information search engines use to catalog pages
• <meta> tags always go inside the <head> element, and are typically used to specify
character set, page description, keywords, author of the document, and viewport settings.
<!DOCTYPE html> </head>
<!-- meta elements provide keywords and a <body>
description of a page. -->
<h1>Welcome to Our Website!</h1>
<html>
<p>We have designed this site to teach about the wonders
<head>
of <strong><em>HTML5</em></strong>.
<meta charset = "utf-8"> <em>HTML5</em> is
<title>Welcome</title> better equipped than <em>HTML</em> to represent complex
<!-- <meta> tags provide search engines with --> data on the Internet. <em>HTML5</em> takes advantage of
<!-- information used to catalog a site --> XML's strict syntax to ensure well-formedness. Soon you
<meta name = "keywords" content = "web page, will know about many of the great features of
design,
<em>HTML5.</em></p>
HTML5, tutorial, personal, help, index, form,
<p>Have Fun With the Site!</p>
contact, feedback, list, links, deitel">
</body>
<meta name = "description" content = "This website
will </html>
help you learn the basics of HTML5 and web page
design
through the use of interactive examples and
instruction.">
New HTML5 Form input Types
Color picker control
Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or
hexadecimal), HSL values, keywords, and so on.
A color control can be created using the <input> element with its type attribute set to the value color:
<input type="color" name="color" id="color" />
week
<input type="week"> creates a widget to display and pick a week number and its year.
Weeks start on Monday and run to Sunday. Additionally, the first week 1 of each year contains the first
Thursday of that year — which may not include the first day of the year, or may include the last few days of
the previous year.
<input type="week" name="week" id="week" />
month
<input type="month"> creates a widget to display and pick a month with a year.
<input type="month" name="month" id="month" />
Slider controls
Another way to pick a number is to use a slider. You see these quite often on sites like house-buying sites
Date and time pickers
• Gathering date and time values has traditionally been a nightmare for web developers. For a good user
experience, it is important to provide a calendar selection UI, enabling users to select dates without
necessitating context switching to a native calendar application or potentially entering them in differing
formats that are hard to parse. The last minute of the previous millennium can be expressed in the
following different ways, for example: 1999/12/31, 23:59 or 12/31/99T11:59PM.
• HTML date controls are available to handle this specific kind of data, providing calendar widgets and
making the data uniform.
• A date and time control is created using the <input> element and an appropriate value for the type
attribute, depending on whether you wish to collect dates, times, or both.
datetime-local
<input type="datetime-local"> creates a widget to display and pick a date with time with no specific time
zone information.
<input type="datetime-local" name="datetime" id="datetime" />
URL field
A special type of field for entering URLs can be created using the value url for the type attribute:
<input type="url" id="url" name="url" />
It adds special validation constraints to the field. The browser will report an error if no protocol (such as
http:) is entered, or if the URL is otherwise malformed.
Phone number field
A special field for filling in phone numbers can be created using tel as the value of the type attribute:
<input type="tel" id="tel" name="tel" />
When accessed via a touch device with a dynamic keyboard, most devices will display a numeric keypad
when type="tel" is encountered
Email address field
This type of field is set using the value email for the type attribute:
<input type="email" id="email" name="email" />
input and data list Elements and autocomplete Attribute
The autocomplete attribute can be used on input types to automatically fill in the user’s information
based on previous input—such as name, address or e-mail.
You can enable autocomplete for an entire form or just for specific elements.
For example, an online order form might set automcomplete = "on" for the name and address inputs and
set autocomplete = "off" for the credit card and password inputs for security purposes.

You might also like