Html 5

HTML 5
Presented By Urwa Maqsood

Introduction
HTML stands for HyperText Markup Language:
A markup language is a computer language that defines the
structure and presentation of raw text.
HyperText is text displayed on a computer or device that provides
access to other text through links, also known as hyperlinks.

Why HTML?
HTML is the skeleton of all web pages used to structure a web
page and its content. It’s often the first language learned by
developers, marketers, and designers and is core to front-end
development work.

IDE
• Notepad
• Notepad++
• Visual Studio Code
• Sublime Text

Browser
• Chrome
• Firefox
• Internet Explorer
• Safari
• Opera

Element
HTML is composed of elements. These elements' structure the
webpage and define its content.

The <html> tag
• To create HTML structure and content, we must add opening and
closing <html> tags after declaring <!DOCTYPE html>
• Anything between the opening <html> and closing </html> tags will
be interpreted as HTML code.
<!DOCTYPE html>
<html>
</html>

The Head
• The <head> element is a container for metadata (data about data)
and is placed between the <html> tag and the <body> tag.
• Metadata is data about the HTML document. Metadata is not
displayed.
• Metadata typically define the document title, character set, styles,
scripts, and other meta information.

The Body
One of the key HTML elements we use to build a webpage is
the body element. Only content inside the opening and closing
body tags can be displayed to the screen
<body>
<div>
</div>
</body>

HTML Structure
HTML is organized as a collection of family tree relationships. When
an element is contained inside another element, it is considered
the child of that element. The child element is said to be nested inside
of the parent element.
<body>
<div>
<h1>Sibling to p, but also grandchild of body</h1>
<p>Sibling to h1, but also grandchild of body</p>
</div>
</body>

Comments
• HTML files also allow you to add comments to your code.
• Comments begin with . Any characters in
between will be ignored by your browser.

Headings
Headings in HTML are similar to headings in other types of media. For
example, in newspapers, large headings are typically used to capture a
reader’s attention.
In HTML, there are six different headings, or heading elements.
The following is the list of heading elements available in HTML. They are
ordered from largest to smallest in size.
<h1></h1> : used for main headings. All other smaller headings are used for
subheadings.
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Attributes
Class:
• The class attribute specifies one or more classnames for an element.
• The class attribute is part of the Global Attributes and can be used on any
HTML element.
<h1 class="intro">Header 1</h1>
IDS:
• The id attribute specifies a unique id for an HTML element (the value must
be unique within the HTML document).
• The id attribute is a Global Attribute and can be used on any HTML
element.
<h1 id="myHeader">Hello World!</h1>

Displaying Text
If you want to display text in HTML, you can use
a paragraph or span:
• Paragraphs <p> contain a block of plain text.
• <span> contains short pieces of text or other HTML. They are
used to separate small pieces of content that are on the same
line as other content.
<p><span>Self-driving cars</span> are anticipated to replace up
to 2 million jobs over the next two decades.</p>

Divs
One of the most popular elements in HTML is the <div> element.
<div> is short for “division” or a container that divides the page into
sections. These sections are very useful for grouping elements in your
HTML together.
<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>

Styling Text
You can also style text using HTML tags. The <em> tag emphasizes text,
while the <strong> tag highlights important text.
• The <em> tag will generally render as italic emphasis.
• The <strong> will generally render as bold emphasis.
<p><strong>The Nile River</strong> is the <em>longest</em> river in
the world, measuring over 6,850 kilometers long (approximately 4,260
miles).</p>

Line Breaks
The spacing between code in an HTML file doesn’t affect the
positioning of elements in the browser. If you are interested in
modifying the spacing in the browser, you can use HTML’s line break
element: <br>.
<p>The Nile River is the longest river <br> in the world, measuring over
6,850 <br> kilometers long (approximately 4,260 <br> miles).</p>

Lists
HTML lists allow web developers to group a set of related items in lists.
• Unordered HTML List: An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
• Ordered HTML List: An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
• HTML Description Lists: A description list is a list of terms, with a description of each
term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term.

Linking to Other Web Pages
You can add links to a web page by adding an anchor element <a> and including the
text of the link in between the opening and closing tags.
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown
Bear</a>
<a href="./contact.html">Contact</a>
<p id="top">This is the top of the page!</p>
<ol>
<li><a href="#top">Top</a></li>
</ol>

Images
The <img> tag allows you to add an image to a web page. Most
elements require both opening and closing tags, but the <img> tag is a
self-closing tag.
• The <img> tag has a required attribute called src. The src attribute
must be set to the image’s source, or the location of the image. In this
case, the value of src must be the uniform resource locator (URL) of
the image.
• The alt attribute, which means alternative text, brings meaning to the
images on our sites.
<img src="image-location.jpg" alt="A field of yellow
sunflowers" />

Figure and Figcaption
• <figure> is an element used to encapsulate media such as an image,
illustration, diagram, code snippet, etc.
• <figcaption> is an element used to describe the media in the <figure>
tag.
<figure>
<img src="overwatch.jpg">
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>

Videos
The HTML <video> element is used to show a video on a web page.
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>

Indentation
The World Wide Web Consortium, or W3C, is responsible for
maintaining the style standards of HTML. At the time of writing,
the W3C recommends 2 spaces of indentation when writing
HTML code. Although your code will work without exactly two
spaces, this standard is followed by the majority of professional
web developers. Indentation is used to easily visualize which
elements are nested within other elements.

Introduction to Tables
• There are many websites on the Internet that display
information like stock prices, sports scores, invoice data, and
more. This data is naturally tabular in nature, meaning that a
table is often the best way of presenting the data.
• Before displaying data, we must first create the table that will contain
the data by using the <table> element.
<table>
</table>

Table Rows
The first step in entering data into the table is to add rows using the
table row element: <tr>.
<table>
<tr>
</tr>
</table>

Table Data
The <td> tag defines a standard data cell in an HTML table.
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

Table Headings
• To add titles to rows and columns, you can use the table heading element: <th>.
• The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>

Spanning Columns/Rows
Data can span columns using the colspan attribute. The attribute accepts an integer (greater than or
equal to 1) to denote the number of columns it spans across.
<table>
<tr>
<th rowspan=“3”>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td colspan="2">Out of Town</td>
<td>Back in Town</td>
</tr>
</table>

Head, Body and Footer
•The <thead> tag is used to group header
content in an HTML table.
•The <tbody> tag is used to group the body
•The <tfoot> tag is used to group footer

Example
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

How a Form Works
The <form> element is a great tool for collecting information, but then
we need to send that information somewhere else for processing. We
need to supply the <form> element with both the location of where the
<form>‘s information goes and what HTTP request to make. Take a look
at the sample <form> below
<form action="/example.html" method="POST"> </form>

GET & POST Method
Both GET and POST method is used to transfer data from client
to server in HTTP protocol
GET method is used to appends form data to the URL in name or
value pair.
In the POST method, the data is sent to the server as a
package in a separate communication with the processing script

Text Input
• The <input> element has a type attribute which determines how it renders
on the web page and what kind of data it can accept.
<form action="/example.html" method="POST">
<input type="text" name="first-text-field">
</form>
• The first value for the type attribute we’re going to explore is "text". When
we create an <input> element with type="text", it renders a text field that
users can type into. Note that the default value of type is "text". It’s also
important that we include a name attribute for the <input> — without the
name attribute, information in the <input> won’t be sent when the <form>
is submitted

Adding a Label
The <label> element has an opening and closing tag and displays text that is
written between the opening and closing tags. To associate a <label> and an
<input>, the <input> needs an id attribute. We then assign the for attribute
of the <label> element with the value of the id attribute of <input>
<form action="/example.html" method="POST">
<label for="meal">What do you want to eat?</label>
<br>
<input type="text" name="food" id="meal">
</form>

Password Input
An <input type ="password"> element will replace input text with
another character like an asterisk (*) or a dot (•). The code below
provides an example of how to create a password field
<form>
<label for="user-password">Password: </label>
<input type="password" id="user-password" name="user-password">
</form>

Number Input
• By setting type="number" for an <input> we can restrict what users
type into the input field to just numbers (and a few special characters
like -, +, and .)
• We can also provide a step attribute which creates arrows inside the
input field to increase or decrease by the value of the step attribute.
<form>
<label for="years"> Years of experience: </label>
<input id="years" name="years" type="number" step="1">
</form>

Checkbox Input
So far the types of inputs we’ve allowed were all single choices. But, what if we
presented multiple options to users and allow them to select any number of options?
Sounds like we could use checkboxes!
<form>
<p>Choose your pizza toppings:</p>
<label for="cheese">Extra cheese</label>
<input id="cheese" name="topping" type="checkbox" value="cheese">
<br>
<label for="pepperoni">Pepperoni</label>
<input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
<br>
<label for="anchovy">Anchovy</label>
<input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>

Radio Button Input
Checkboxes work well if we want to present users with multiple options and
let them choose one or more of the options. However, there are cases
where we want to present multiple options and only allow for one selection
<form>
<p>What is sum of 1 + 1?</p>
<input type="radio" id="two" name="answer" value="2">
<label for="two">2</label>
<br>
<input type="radio" id="eleven" name="answer" value="11">
<label for="eleven">11</label>
</form>

Dropdown list
An alternative solution is to use a dropdown list to allow our users to choose one option
from an organized list.
<form>
<label for="lunch">What's for lunch?</label>
<select id="lunch" name="lunch">
<option value="pizza">Pizza</option>
<option value="curry">Curry</option>
<option value="salad">Salad</option>
<option value="ramen">Ramen</option>
<option value="tacos">Tacos</option>
</select>
</form>

Datalist Input
The <datalist> is used with an <input type="text"> element. The <input> creates a text field that
users can type into and filter options from the <datalist>
<form>
<label for="city">Ideal city to visit?</label>
<input type="text" list="cities" id="city" name="city">
<datalist id="cities">
<option value="New York City"></option>
<option value="Tokyo"></option>
<option value="Barcelona"></option>
<option value="Mexico City"></option>
<option value="Melbourne"></option>
<option value="Other"></option>
</datalist>
</form>

Textarea element
The <textarea> element is used to create a bigger text field for users to
write more text.
<form>
<label for="blog">New Blog Post: </label>
<br>
<textarea id="blog" name="blog" rows="5" cols="30">
</textarea>
</form>

Submit Form
Remember, the purpose of a form is to collect information that
will be submitted. To make a submit button in a <form>, we’re
going to use the reliable <input> element and set the type to
"submit".
<form>
<input type="submit" value="Send">
</form>

Html 5

More Related Content

What's hot (20)

Similar to Html 5 (20)

Recently uploaded (20)

Html 5