Scribd
Upload
706 views

HTML Solo Learn

The document provides an overview of HTML including basic tags like <html>, <head>, <body>, and other common elements like headings, paragraphs, images, and links. It explains the structure and purpose of HTML documents and how to add basic formatting and content.

Uploaded by

sai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
706 views

HTML Solo Learn

The document provides an overview of HTML including basic tags like <html>, <head>, <body>, and other common elements like headings, paragraphs, images, and links. It explains the structure and purpose of HTML documents and how to add basic formatting and content.

Uploaded by

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

Overview

What is HTML?
Welcome to HTML!
HTML stands for HyperText Markup Language.
Unlike a scripting or programming language that uses scripts to perform functions, a markup language
uses tags to identify content.
Here is an example of an HTML tag:
<p> I'm a paragraph </p>

The Web Structure

The ability to code using HTML is essential for any web professional. Acquiring this skill should be
the starting point for anyone who is learning how to create content for the web.

Modern Web Design

HTML: Structure

CSS: Presentation

JavaScript: Behavior

PHP or similar: Backend

CMS: Content Management

The <html> Tag


Although various versions have been released over the years, HTML basics remain the same.

The structure of an HTML document has been compared with that of a sandwich. As a sandwich
has two slices of bread, the HTML document has opening and closing HTML tags.

These tags, like the bread in a sandwich, surround everything else.

<html> </html>
The <head> Tag
Immediately following the opening HTML tag, you'll find the head of the document, which is
identified by opening and closing head tags.

The head of an HTML file contains all of the non-visual elements that help make the page work.

<html> <head>…</head></html>

The <body> Tag


The body tag follows the head tag.

All visual-structural elements are contained within the body tag.

Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be
contained within the body tag.

Basic HTML Structure:

<html>

<head>

</head>

<body>

</body>

</html>

The HTML File


HTML files are text files, so you can use any text editor to create your first webpage.

There are some very nice HTML editors available; you can choose the one that works for you. For
now let's write our examples in Notepad.
The HTML File
Add the basic HTML structure to the text editor with "This is a line of text" in the body section.

<html>
<head>
</head>
<body>
This is a line of text.
</body>
</html>

The <title> Tag

To place a title on the tab describing the web page, add a <title> element to your head section:

<html>

<head>

<title>first page</title>

</head>

<body>

This is a line of text.

</body>

</html>

Paragraphs
The <p> Element
To create a paragraph, simply type in the <p> element with its opening and closing tags:

<html>

<head>

<title>first page</title>
</head>

<body>

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

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

</body>

</html>

Single Line Break

Use the <br /> tag to add a single line of text without starting a new paragraph:

<html>

<head>

<title>first page</title>

</head>

<body>

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

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

<p>This is <br /> a line break </p>

</body>

</html>
Text formatting
In HTML, there is a list of elements that specify text style.

Formatting elements were designed to display special types of text:

<html>

<head>

<title>first page</title>

</head>

<body>

<p>This is regular text </p>

<p><b> bold text </b></p>

<p><big> big text </big></p>

<p><i> italic text </i></p>

<p><small> small text </small></p>

<p><strong> strong text </strong></p>

<p><sub> subscripted text </sub></p>

<p><sup> superscripted text </sup></p>

<p><ins> inserted text </ins></p>

<p><del> deleted text </del></p>

</body>

</html>
HTML Headings

HTML includes six levels of headings, which are ranked according to importance.

These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

The following code defines all of the headings:

<html>

<head>

<title>first page</title>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>
Horizontal Lines

To create a horizontal line, use the <hr /> tag.

<html>

<head>

<title>first page</title>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<p>This is a paragraph </p>

<hr />

<p>This is a paragraph </p>

</body>

</html>

In HTML5, the <hr> tag defines a thematic break.


Comments

The browser does not display comments, but they help document the HTML and add
descriptions, reminders, and other notes.

<!-- Your comment goes here -->

Example:

<html>

<head>

<title>first page</title>

</head>

<body>

<p>This is a paragraph </p>

<hr />

<p>This is a paragraph </p>

<!-- This is a comment -->

</body>

</html>

There is an exclamation point (!) in the opening tag, but not in the closing tag.
HTML Elements

HTML documents are made up of HTML elements.

An HTML element is written using a start tag and an end tag, and with the content in between.

HTML documents consist of nested HTML elements. In the example below, the body element
includes the <p> tags, the <br /> tag and the content, "This is a paragraph".

<html>

<head>

<title>first page</title>

</head>

<body>

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

</body>

</html>

Some HTML elements (like the <br /> tag) do not have end tags.
Some elements are quite small. Since you can't put contents within a break tag, and you don't
have an opening and closing break tag, it’s a separate, single element.

So HTML is really scripting with elements within elements.

HTML Attributes

Attributes provide additional information about an element or a tag, while also modifying them.
Most attributes have a value; the value modifies the attribute.

<p align="center">
This text is aligned to center

</p>

In this example, the value of "center" indicates that the content within the p element should be
aligned to the center
Attributes are always specified in the start tag, and they appear in name="value" pairs.

Attribute Measurements

As an example, we can modify the horizontal line so it has a width of 50 pixels.

This can be done by using the width attribute:

<hr width="50px" />

An element's width can also be defined using percentages:

<hr width="50%" />

An element's width can be defined using pixels or percentages.

The Align Attribute


The align attribute is used to specify how the text is aligned.

In the example below, we have a paragraph that is aligned to the center, and a line that is aligned to the
right.

<html>

<head>

<title>Attributes</title>

</head>

<body>

<p align="center">This is a text <br />

<hr width="10%" align="right" /> This is also a text.


</p>

</body>

</html>

The align attribute of <p> is not supported in HTML5.

You may be wondering what happens if you try to apply contradictory attributes within the same
element.

<p align="center">

This is a text.

<hr width="50%" align="left" />

</p>

IMAGES
The <img> Tag

The <img> tag is used to insert an image. It contains only attributes, and does not have a closing
tag.

The image's URL (address) can be defined using the src attribute.

The HTML image syntax looks like this:


<img src="image.jpg" />

The alt attribute specifies an alternate text for an image.


Image Location

You need to put in the image location for the src attribute that is between the quotation marks.

For example, if you have a photo named "tree.jpg" in the same folder as the HTML file, your code
should look like this:

<html>

<head>

<title>first page</title>

</head>

<body>

<img src="tree.jpg" alt="" />

</body>

</html>

In case the image cannot be displayed, the alt attribute specifies an alternate text that describes
the image in words. The alt attribute is required.

Image Resizing

To define the image size, use the width and height attributes.
The value can be specified in pixels or as a percentage:

<html>

<head>

<title>first page</title>

</head>

<body>
<img src="tree.jpg" height="150px" width="150px" alt="" />

<!-- or -->

<img src="tree.jpg" height="50%" width="50%" alt="" />

</body>

</html>

Loading images takes time. Using large images can slow down your page, so use them with care.

Image Border

By default, an image has no borders. Use the border attribute within the image tag to create a
border around the image.

<img src="tree.jpg" height="150px" width="150px" border="1px" alt="" />

By default, Internet Explorer 9, and its earlier versions, display a border around an image unless a
border attribute is defined.

The <a> Tag

Links are also an integral part of every web page. You can add links to text or images that will
enable the user to click on them in order to be directed to another file or webpage.
In HTML, links are defined using the <a> tag.

Use the href attribute to define the link's destination address:


<a href=""></a>

To link an image to another document, simply nest the <img> tag inside <a> tags.

The target Attribute


The target attribute specifies where to open the linked document.
Giving a _blank value to your attribute will have the link open in a new window or new tab:

<a href="http://www.sololearn.com" target="_blank">

Learn Playing

</a>

A visited link is underlined and purple.

HTML Ordered Lists

An ordered list starts with the <ol> tag, and each list item is defined by the <li> tag.
Here is an example of an ordered list:

<html>

<head>

<title>first page</title>

</head>

<body>

<ol>

<li>Red</li>

<li>Blue</li>

<li>Green</li>

</ol>

</body>

</html>

The list items will be automatically marked with numbers.


HTML Unordered List

An unordered list starts with the <ul> tag.

<html>

<head>

<title>first page</title>

</head>

<body>

<ul>

<li>Red</li>

<li>Blue</li>

<li>Green</li>

</ul>

</body>

</html>

The list items will be marked with bullets.

Tables
Creating a Table

Tables are defined by using the <table> tag.


Tables are divided into table rows with the <tr> tag.
Table rows are divided into table columns (table data) with the <td> tag.
Here is an example of a table with one row and three columns:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Table data tags <td> act as data containers within the table.
They can contain all sorts of HTML elements, such as text, images, lists, other tables, and so on.

The border and colspan Attributes

A border can be added using the border attribute:


<table border="2">

A table cell can span two or more columns:

<table border="2">

<tr>

<td>Red</td>

<td>Blue</td>

<td>Green</td>

</tr>

<tr>

<td><br /></td>

<td colspan="2"><br /></td>

</tr>
</table>

The border attribute is not supported in HTML5.

Colspan Color

The example below demonstrates the colspan attribute in action:

<table border="2">

<tr>

<td>Red</td>

<td>Blue</td>

<td>Green</td>

</tr>

<tr>

<td>Yellow</td>

<td colspan="2">Orange</td>

</tr>

</table>
You can see that the cell containing "Orange" spans two cells.

To make a cell span more than one row, use the rowspan attribute.

The align and bgcolor Attributes

To change your table's position, use the align attribute inside your table tag:
<table align="center">

Now let's specify a background color of red for a table cell. To do that, just use the bgcolor
attribute.

<table border="2">

<tr>

<td bgcolor="red">Red</td>

<td>Blue</td>

<td>Green</td>

</tr>

<tr>

<td>Yellow</td>

<td colspan="2">Orange</td>

</tr>

</table>
Result:

Types of Elements

In HTML, most elements are defined as block level or inline elements.


Block level elements start from a new line.
For example: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, etc.

Inline elements are normally displayed without line breaks.


For example: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.

The <div> element is a block-level element that is often used as a container for other HTML
elements.
When used together with some CSS styling, the <div> element can be used to style blocks of
content:
<html>

<body>

<h1>Headline</h1>

<div style="background-color:green; color:white; padding:20px;">

<p>Some paragraph text goes here.</p>

<p>Another paragraph goes here.</p>

</div>
</body>

</html>

Similarly, the <span> element is an inline element that is often used as a container for some text.
When used together with CSS, the <span> element can be used to style parts of the text:

<html>

<body>

<h2>Some

<span style="color:red">Important</span>

Message</h2>

</body>

</html>
Summary
The <div> element defines a block-level section in a document.
The <span> element defines an inline section in a document.

In the case of styling elements, CSS is more effective than HTML. Try our free "Learn CSS"
course to learn more about CSS and styles.

Types of Elements

Other elements can be used either as block level elements or inline elements. This includes the
following elements:
APPLET - embedded Java applet
IFRAME - Inline frame
INS - inserted text
MAP - image map
OBJECT - embedded object
SCRIPT - script within an HTML document

You can insert inline elements inside block elements. For example, you can have multiple <span>
elements inside a <div> element.
Inline elements cannot contain any block level elements.
FORMS
The <form> Element

HTML forms are used to collect information from the user.


Forms are defined using the <form> element, with its opening and closing tags:
<body>
<form>…</form>
</body>

Use the action attribute to point to a webpage that will load after the user submits the form.
<form action="http://www.sololearn.com">
</form>

Usually the form is submitted to a web page on a web server.

The method and name Attributes

The method attribute specifies the HTTP method (GET or POST) to be used when forms are
submitted (see below for description):
<form action="url" method="GET">

<form action="url" method="POST">

When you use GET, the form data will be visible in the page address.

Use POST if the form is updating data, or includes sensitive information (passwords).
POST offers better security because the submitted data is not visible in the page address.

To take in user input, you need the corresponding form elements, such as text fields. The <input>
element has many variations, depending on the type attribute. It can be a text, password, radio,
URL, submit, etc.

The example below shows a form requesting a username and password:


<form>

<input type="text" name="username" /><br />

<input type="password" name="password" />

</form>

Result:

The name attribute specifies a name for a form.

Form Elements

If we change the input type to radio, it allows the user select only one of a number of choices:

<input type="radio" name="gender" value="male" /> Male <br />

<input type="radio" name="gender" value="female" /> Female <br />

Result:
The type "checkbox" allows the user to select more than one option:

<input type="checkbox" name="gender" value="1" /> Male <br />

<input type="checkbox" name="gender" value="2" /> Female <br />

Result:

The <input> tag has no end tag.

The submit button submits a form to its action attribute:

<input type="submit" value="Submit" />

Result:

After the form is submitted, the data should be processed on the server using a programming
language, such as PHP.
Contact Form

Next, we'll create a Contact Form for your blog. The form will include Name, Email, and Message
fields. We'll also add a Submit button.

Check out the code:

<h1><span>Contact Me</span></h1>

<form>

<input name="name" type="text" /><br/>

<input name="email" type="email" /><br/>

<textarea name="message"></textarea>

<input type="submit" value="SEND" class="submit" />

</form>

HTML Colors!

HTML colors are expressed as hexadecimal values.

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
As you can see, there are 16 values there, 0 through F. Zero represents the lowest value, and F
represents the highest.

HTML Color Model

Colors are displayed in combinations of red, green, and blue light (RGB).

Hex values are written using the hashtag symbol (#), followed by either three or six hex
characters.
As shown in the picture below, the circles overlap, forming new colors:
RGB color values are supported in all browsers.

Color Values

All of the possible red, green, and blue combinations potentially number over 16 million.

Here are only a few of them:

We can mix the colors to form additional colors.


Orange and red mix:
Hexadecimal color values are supported in all browsers.

Background and Font Colors


The bgcolor attribute can be used to change the web page's background color.

This example would produce a dark blue background with a white headline:

<html>

<head>

<title>first page</title>

</head>

<body bgcolor="#000099">

<h1>

<font color="#FFFFFF"> White headline </font>

</h1>

</body>

</html>

Result:
The color attribute specifies the color of the text inside a <font> element.

FRAMES
The <frame> Tag

A page can be divided into frames using a special frame document.

The <frame> tag defines one specific window (frame) within a <frameset>. Each <frame> in a
<frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.

The <frameset> element specifies the number of columns or rows in the frameset, as well as
what percentage or number of pixels of space each of them occupies.
<frameset cols="100, 25%, *"></frameset>
<frameset rows="100, 25%, *"></frameset>

The <frameset> tag is not supported in HTML5.

Working with Frames

Use the <noresize> attribute to specify that a user cannot resize a <frame> element:
<frame noresize="noresize">

Frame content should be defined using the src attribute.


Lastly, the <noframes> element provides a way for browsers that do not support frames to view
the page. The element can contain an alternative page, complete with a body tag and any other
elements.
<frameset cols="25%,50%,25%">
<frame src="a.htm" />
<frame src="b.htm" />
<frame src="c.htm" />
<noframes>Frames not supported!</noframes>
</frameset>

The <frame> tag is not supported in HTML5.

Blog Project

To finalize our blog, we'll use a frame to embed a YouTube video. We'll also create a Follow Me
section that includes links at the end of the page.

Check out the final code:

...

<div class="section">

<h1><span>My Media</span></h1>

<iframe height="150" width="300" src="https://www.youtube.com/embed/Q6_5InVJZ88"


allowfullscreen frameborder="0"></iframe>

</div>

...

TASK:
1. Finalize your blog page.
2. Share your code creation with the community, get feedback, and receive upvo
INTRODUCTION TO HTML5
HTML5
When writing HTML5 documents, one of the first new features that you'll notice is the doc type
declaration:
<!DOCTYPE HTML>

The character encoding (charset) declaration is also simplified:


<meta charset="UTF-8">

New Elements in HTML5


<article>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <footer>, <header>, <nav>,
<output>, <progress>, <section>, <video>, and even more!
The default character encoding in HTML5 is UTF-8.

New in HTML5

Forms
- The Web Forms 2.0 specification allows for creation of more powerful forms and more
compelling user experiences.
- Date pickers, color pickers, and numeric stepper controls have been added.
- Input field types now include email, search, and URL.
- PUT and DELETE form methods are now supported.

Integrated API (Application Programming Interfaces)


- Drag and Drop
- Audio and Video
- Offline Web Applications
- History
- Local Storage
- Geolocation
- Web Messaging
You will learn more about these new features in the upcoming lessons.
Tap the Continue button to begin!
The List of Content Models

In HTML, elements typically belonged in either the block level or inline content model. HTML5
introduces seven main content models.

- Metadata
- Embedded
- Interactive
- Heading
- Phrasing
- Flow
- Sectioning
The HTML5 content models are designed to make the markup structure more meaningful for
both the browser and the web designer.

Content Models

Metadata: Content that sets up the presentation or behavior of the rest of the content. These
elements are found in the head of the document.
Elements: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>

Embedded: Content that imports other resources into the document.


Elements: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>

Interactive: Content specifically intended for user interaction.


Elements: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>,
<object>, <select>, <textarea>

Heading: Defines a section header.


Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

Phrasing: This model has a number of inline level elements in common with HTML4.
Elements: <img>, <span>, <strong>, <label>, <br />, <small>, <sub>, and more.
The same element can belong to more than one content model

Content Models

Flow content: Contains the majority of HTML5 elements that would be included in the normal flow
of the document.

Sectioning content: Defines the scope of headings, content, navigation, and footers.
Elements: <article>, <aside>, <nav>, <section>

The various content models overlap in certain areas, depending on how they are being used.
Page Structure in HTML5

A generic HTML5 page structure looks like this:

You may not need some of these elements, depending on your page structure.

The <header> Element

In HTML4, we would define a header like this:


<div id="header">

In HTML5, a simple <header> tag is used, instead.

The <header> element is appropriate for use inside the body tag.

<!DOCTYPE html>

<html>

<head></head>
<body>

<header>

<h1> Most important heading </h1>

<h3> Less important heading </h3>

</header>

</body>

</html>

Note that the <header> is completely different from the <head> tag

The <footer> Element

The footer element is also widely used. Generally we refer to a section located at the very bottom
of the web page as the footer.
<footer>…</footer>

The following information is usually provided between these tags:


- Contact Information
- Privacy Policy
- Social Media Icons
- Terms of Service
- Copyright Information
- Sitemap and Related Documents

The <nav> Element

This tag represents a section of a page that links to other pages or to certain sections within the
page. This would be a section with navigation links.

Here is an example of a major block of navigation links:

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">About us</a></li>

</ul>

</nav>
Not all of the links in a document should be inside a <nav> element. The <nav> element is
intended only for major blocks of navigation links. Typically, the <footer> element often has a list
of links that don't need to be in a <nav> element.

The <article> Element

Article Is a self-contained, independent piece of content that can be used and distributed
separately from the rest of the page or site. This could be a forum post, a magazine or
newspaper article, a blog entry, a comment, an interactive widget or gadget, or any other
independent piece of content.

The <article> element replaces the <div> element that was widely used in HTML4, along with an
id or class.

<article>

<h1>The article title</h1>

<p>Contents of the article element </p>

</article>

When an <article> element is nested, the inner element represents an article related to the outer
element. For example, blog post comments can be <article> elements nested in the <article>
representing the blog post.

The <section> Element

<section> is a logical container of the page or article.


Sections can be used to divide up content within an article.
For example, a homepage could have a section for introducing the company, another for news
items, and still another for contact information.
Each <section> should be identified, typically by including a heading (h1-h6 element) as a child
of the <section> element.

<article>

<h1>Welcome</h1>

<section>

<h1>Heading</h1>

<p>content or image</p>

</section>

</article>

Try It Yourself

If it makes sense to separately syndicate the content of a <section> element, use an <article>
element instead.

The <aside> Element

<aside> is secondary or tangential content which could be considered separate from but
indirectly related to the main content.
This type of content is often represented in sidebars.
When an <aside> tag is used within an <article> tag, the content of the <aside> should be
specifically related to that article.

<article>

<h1> Gifts for everyone </h1>

<p> This website will be the best place for choosing gifts </p>

<aside>

<p> Gifts will be delivered to you within 24 hours </p>

</aside>

</article>

Try It Yourself
When an <aside> tag is used outside of an <article> tag, its content should be related to the
surrounding content.

Audio on the Web

Before HTML5, there was no standard for playing audio files on a web page.
The HTML5 <audio> element specifies a standard for embedding audio in a web page.

There are two different ways to specify the audio source file's URL. The first uses the source
attribute:

<audio src="audio.mp3" controls>

Audio element not supported by your browser

</audio>

Try It Yourself

The second way uses the <source> element inside the <audio> element:

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

<source src="audio.ogg" type="audio/ogg">

</audio>

Try It Yourself

Multiple <source> elements can be linked to different audio files. The browser will use the first
recognized format.
Audio on the Web

The <audio> element creates an audio player inside the browser.

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

<source src="audio.ogg" type="audio/ogg">

Audio element not supported by your browser.

</audio>

Try It Yourself

Result:

The text between the <audio> and </audio> tags will display in browsers that do not support the
<audio> element.

Attributes of <audio>

controls
Specifies that audio controls should be displayed (such as a play/pause button, etc.)
autoplay
When this attribute is defined, audio starts playing as soon as it is ready, without asking for the
visitor's permission.

<audio controls autoplay>

Try It Yourself

loop
This attribute is used to have the audio replay every time it is finished.

<audio controls autoplay loop>

Try It Yourself

Currently, there are three supported file formats for the <audio> element: MP3, WAV, and OGG.

Videos in HTML

The video element is similar to the audio element.


You can specify the video source URL using an attribute in a video element, or using source
elements inside the video element:

<video controls>

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type="video/ogg">

Video is not supported by your browser

</video>

Try It Yourself

Another aspect that the audio and video elements have in common is that the major browsers do
not all support the same file types. If the browser does not support the first video type, it will try
the next one.
Attributes of <video>

Another aspect shared by both the audio and the video elements is that each has controls,
autoplay and loop attributes.

In this example, the video will replay after it finishes playing:

<video controls autoplay loop>

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type="video/ogg">

Video is not supported by your browser

</video>

Try It Yourself

Currently, there are three supported video formats for the <video> element: MP4, WebM, and
OGG.

Progress Bar

The <progress> element provides the ability to create progress bars on the web.
The progress element can be used within headings, paragraphs, or anywhere else in the body.

Progress Element Attributes


Value: Specifies how much of the task has been completed.
Max: Specifies how much work the task requires in total.

Example:

Status: <progress min="0" max="100" value="35">


</progress>

Try It Yourself

Result:

Use the <progress> tag in conjunction with JavaScript to dynamically display a task's progress.

HTML5 Web Storage

With HTML5 web storage, websites can store data on a user's local computer.
Before HTML5, we had to use JavaScript cookies to achieve this functionality.

The Advantages of Web Storage


- More secure
- Faster
- Stores a larger amount of data
- Stored data is not sent with every server request
Local storage is per domain. All pages from one domain can store and access the same data.

Types of Web Storage Objects


There are two types of web storage objects:
- sessionStorage()
- localStorage()

Local vs. Session


- Session Storage is destroyed once the user closes the browser
- Local Storage stores data with no expiration date
You need to be familiar with basic JavaScript in order to understand and use the API.

Working with Values

The syntax for web storage for both local and session storage is very simple and similar.
The data is stored as key/value pairs.

Storing a Value:
localStorage.setItem("key1", "value1");

Getting a Value:
//this will print the value
alert(localStorage.getItem("key1"));

Removing a Value:
localStorage.removeItem("key1");

Removing All Values:


localStorage.clear();

The same syntax applies to the session storage, with one difference: Instead of localStorage,
sessionStorage is used.
What is the Geolocation API?

In HTML5, the Geolocation API is used to obtain the user's geographical location.

Since this can compromise user privacy, the option is not available unless the user approves it.

Geolocation is much more accurate for devices with GPS, like smartphones and the like.

Using HTML Geolocation

The Geolocation API’s main method is getCurrentPosition, which retrieves the current
geographic location of the user's device.
navigator.geolocation.getCurrentPosition();

Parameters:
showLocation (mandatory): Defines the callback method that retrieves location information.
ErrorHandler(optional): Defines the callback method that is invoked when an error occurs in
processing the asynchronous call.
Options (optional): Defines a set of options for retrieving the location information.
You need to be familiar with basic JavaScript in order to understand and use the API.

Presenting Data

User location can be presented in two ways: Geodetic and Civic.

1. The geodetic way to describe position refers directly to latitude and longitude.
2. The civic representation of location data is presented in a format that is more easily read and
understood by the average person.

Each parameter has both a geodetic and a civic representation:


The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and
accuracy properties are always returned.

DRAG AND DROP API


Making Elements Draggable

The drag and drop feature lets you "grab" an object and drag it to a different location.
To make an element draggable, just set the draggable attribute to true:
<img draggable="true" />

Any HTML element can be draggable.

The API for HTML5 drag and drop is event-based.

Example:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="box" ondrop="drop(event)"


ondragover="allowDrop(event)"
style="border:1px solid black;
width:200px; height:200px"></div>

<img id="image" src="sample.jpg" draggable="true"


ondragstart="drag(event)" width="150" height="50" alt="" />

</body>
</html>

What to Drag
When the element is dragged, the ondragstart attribute calls a function, drag(event), which
specifies what data is to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In our example, the data type is "text" and the value is the ID of the draggable element ("image").

Where to Drop
The ondragover event specifies where the dragged data can be dropped. By default, data and
elements cannot be dropped in other elements. To allow a drop, we must prevent the default
handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event.

Do the Drop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

The preventDefault() method prevents the browser's default handling of the data (default is open
as link on drop).
The dragged data can be accessed with the dataTransfer.getData() method. This method will
return any data that was set to the same type in the setData() method.
The dragged data is the ID of the dragged element ("image").

At the end, the dragged element is appended into the drop element, using the appendChild()
function.
Basic knowledge of JavaScript is required to understand and use the API.
SVG
Drawing Shapes

SVG stands for Scalable Vector Graphics, and is used to draw shapes with HTML-style markup.

It offers several methods for drawing paths, boxes, circles, text, and graphic images.

SVG is not pixel-based, so it can be magnified infinitely with no loss of quality.

Inserting SVG Images

An SVG image can be added to HTML code with just a basic image tag that includes a source
attribute pointing to the image:
<img src="image.svg" alt="" height="300" />

SVG defines vector-based graphics in XML format.

Drawing a Circle

To draw shapes with SVG, you first need to create an SVG element tag with two attributes: width
and height.
<svg width="1000" height="1000"></svg>

To create a circle, add a <circle> tag:

<svg width="2000" height="2000">

<circle cx="80" cy="80" r="50" fill="green" />

</svg>

Try It Yourself
- cx pushes the center of the circle further to the right of the screen
- cy pushes the center of the circle further down from the top of the screen
- r defines the radius
- fill determines the color of our circle
- stroke adds an outline to the circle

Result:

Every element and every attribute in SVG files can be animated.

Other Shape Elements

<rect> defines a rectangle:

<svg width="2000" height="2000">

<rect width="300" height="100"

x="20" y="20" fill="green" />

</svg>

Try It Yourself

The following code will draw a green-filled rectangle.


<line> defines a line segment:

<svg width="400" height="410">

<line x1="10" y1="10" x2="200" y2="100"

style="stroke:#000000; stroke-linecap:round;

stroke-width:20" />

</svg>

Try It Yourself

(x1, y1) define the start coordinates(x2, y2) define the end coordinates.

<polyline> defines shapes built from multiple line definitions:


<svg width="2000" height="500">

<polyline style="stroke-linejoin:miter; stroke:black;

stroke-width:12; fill: none;"

points="100 100, 150 150, 200 100" />

</svg>

Try It Yourself

Points are the polyline's coordinates.


The code below will draw a black check sign:

The width and height attributes of the <rect> element define the height and the width of the
rectangle.

<ellipse> and <polygon>

Ellipse
The <ellipse> is similar to the <circle>, with one exception:
You can independently change the horizontal and vertical axes of its radius, using the rx and ry
attributes.

<svg height="500" width="1000">

<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green" />


</svg>

Try It Yourself

Result:

Polygon
The <polygon> element is used to create a graphic with at least three sides. The polygon element
is unique because it automatically closes off the shape for you.

<svg width="2000" height="2000">

<polygon points="100 100, 200 200, 300 0"

style="fill: green; stroke:black;" />

</svg>

Try It Yourself

Result:
Polygon comes from Greek. "Poly" means "many" and "gon" means "angle."

You might also like