Scribd
Upload
14 views

Front End Web Technologies_HTML

HTML bascis

Uploaded by

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

Front End Web Technologies_HTML

HTML bascis

Uploaded by

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

Front end Web Technologies:

HTML

By Prerna Solanke
Introduction
Three languages define front-end web development —
HTML, CSS, and JavaScript.

● HTML → to build web page structure,


● CSS → to enhance look and feel, and
● Javascript → to add functionality to HTML elements.
HTML Versions
HTML5 Basics
● HTML5 is the newest version of HTML.
● It is a markup language used for structuring and presenting
content on the World Wide Web.
● It is the fifth and final major HTML version that is a World
Wide Web Consortium (W3C) recommendation.
● With HTML5, you can create web applications that work
offline, support high-definition video and animations, and
know where you are geographically located.
Why HTML5 ?
● It is supported by all the major
browsers
● With new semantic element, it
allow you to write more cleaner
code and you can create websites
and apps that are more
accessible.
● Supporting multimedia without
the need for Flash or other
plugins.
HTML Basic Structure
Semantic HTML tags
are tags that define the
meaning of the content
they contain.
HTML5 Fundamental Syntax
DOCTYPE: An instruction to the web
<!DOCTYPE html> HTML5 browser about the version of HTML the
page is written in.
<html lang=”en”>
<head> Character Encoding: It ensure that text
<meta charset = "utf-8"> is consistently represented and
<title>...</title> understood across different devices and
</head> platforms.
<body> UTF- Unicode Transformation Format
<header>...</header> HTML5 supports both UTF-8 and
<nav>...</nav> UTF-16!
HTML5 New Tags
● article − Represents an independent piece of
<article> content of a document, such as a blog entry or
<section> newspaper article.
... ● section − Represents a generic document or
application section. It can be used together with
</section>
h1-h6 to indicate the document structure.
</article> ● aside − Represents a piece of content that is only
<aside>...</aside> slightly related to the rest of the page.
<footer>...</footer> ● header
</body> ● footer
</html> ● nav − Represents a section of the document
intended for navigation.
HTML5 New Tags
● canvas – Used to draw canvas,
graphics and animations using
JavaScript.
● dialog − 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.
● time - To display time/date within
webpage.
HTML5 New Tags
HTML5 Semantic Elements
A semantic element clearly describes its meaning to both the
browser and the developer.
Examples of non-semantic elements:
<div> and <span> - Tells nothing about its content.
Examples of semantic elements:
<header>, <form>, <table>, and <article> - Clearly defines its
content.
HTML5 Semantic Elements
Many web sites contain HTML
code like:
<div id="nav">
<div class="header">
<div id="footer">
to indicate navigation, header, and
footer.
In HTML5, semantic elements
that can be used to define
different parts of a web page:
Tables in HTML5
The entire table is represented by the HTML5 <table> tag. The
<table> tag is a container tag hold the other components of the tag.
The <table> tag has a mandatory closing tag </table>.

● Row – a single row is represented by the <tr> tag.


● Column – a table column doesn’t have a specific tag.
● Cell – a single cell is represented by either a <td> or <th> tag.
<th> tag (“th” stands for “table header”) is used for inserting
headings into the table.
<td> tag (“td” stands for “table data”) is used for inserting
data into the table.
Common Tables tags in HTML5
★ <tr> - represents rows
★ <td> - used to create data cells
★ <th> - used to add table headings
★ <caption> - used to insert captions
★ <thead> - adds a separate header to the table
★ <tbody> - shows the main body of the table
★ <tfoot> - creates a separate footer for the table
Here, the border is an
attribute of <table> tag and it
is used to put a border across
all the cells. If you do not
need a border, then you can
use border = "0"
Merging Cell in table:

colspan - to merge column


rowspan - to merge rows
<!DOCTYPE html> <td>Table 2</td>
<html> <td>Table 2</td>
<head> </tr>
<style> <tr>
table table { <td>Table 2</td>
border: 2px solid blue; <td>Table 2</td>
} </tr>
td { </table>
padding: 10px; </td>
text-align: center; </tr>
} <tr>
</style> <td>Table 1</td>
<body> <td>Table 1</td>
<h2 style="color: green;">Nested HTML table</h2> </tr>
<body> </table>
<table border="2"> </body>
<tr> </html>
<td>Table 1</td>
<td> Table 1
<table border="2">
<tr>
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.

Example: <table border="1" cellpadding = "5" cellspacing = "5">


Lists in HTML5
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>
HTML Unordered Lists
● 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.
HTML Ordered Lists
● In the ordered HTML
lists, all the list items are
marked with numbers by
default.
● It is known as numbered
list also.
● The ordered list starts
with <ol> tag and the list
items start with <li> tag.
HTML Definition or Description Lists
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).
HTML Definition or Description Lists
<select> tag
<optgroup> tag
<optgroup> tag

Here, Group 3 is disabled


Images in HTML5
HTML img tag is used to display image on the web page.
It is an empty tag that contains attributes only, closing tags are
not used in it.
Syntax:
<img src="image address" alt="any text" height=” ” width= “ ”/>
Image attributes
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.
3) width
4) height
Example 1: Displaying image
<body>
<center>
<img src =
"https://media.easemytrip.com/
media/Blog/India/63784149801
7163568/637841498017163568
UZ6hpK.jpg" height = "400"
width = "500" />
<footer>Duck</footer>
</center>
</body>
Anchor tag in HTML5
The HTML anchor tag containing its href attribute, defines a
hyperlink that links one page to another page.
It can create hyperlink to other web page as well as files,
location, or any URL.

Syntax:
<a href = "..url...."> Link Text </a>
<a href="#top">Go to Top</a>
Example 1:
<body>
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
</body>
Example 2:
<body>
<center>
<img src =
"https://www.mistay.in/travel-blog/content/images/2020/07/mayani.jpg"
height = "400" width = "500" />
<footer> <a
href="https://www.mistay.in/travel-blog/top-10-bird-sanctuaries-in-mumb
ai-for-nature-lovers/"> Bird Sactuary </a> </footer>
</center>
</body>
Example 2: output
Example 3:
<p>To create a link that opens in the user's email program (to let
them send a new email): </p>
<p>
<a href="mailto:[email protected]">Send email</a>
</p>
Audio and Video tag in HTML5
● Earlier, native web technologies such as HTML didn't allow
embedding video and audio on the Web.
● Later, HTML5 specification introduced such features with the
<video> and <audio> elements.
● The <audio> element is used to embed audio files to a web
page, and the <video> element is used to embed a video.
<audio> tag in HTML5
● The <audio> tag is used to embed an audio file on a web page.
● The src attribute specifies the location of the audio file.
● The controls attributes used to specify the audio file to be
played, the volume, and the playback rate.
● It may contain multiple <source> tags to specify multiple
audio formats.
<audio>
<source src="music.mp3" type="audio/mp3">
</audio>
Attributes:
autoplay
Makes the audio or video start playing right away, while the rest
of the page is loading.
loop
Makes the video (or audio) start playing again whenever it
finishes.
preload
Used for buffering large files; it can take one of three values:
● "none" does not buffer the file
● "auto" buffers the media file
● "metadata" buffers only the metadata for the file
<audio> tag example
<head>
<title>Jingle Bells</title>
</head>
<body>
<audio controls>
<source src="C:\Users\91983\OneDrive\Desktop\Jingle-Bells.mp3"
type="audio/mpeg">
</audio>
<p>Click the play button</p>
</body>
<audio> tag example
<video> tag in HTML5
● The <video> tag is used to embed a media player that supports
video playback on a web page.
● The src attribute specifies the location of the video file.
● The controls attributes used to specify the video file to have
controls like play, pause, stop, volume, etc.
● It may contain multiple <source> tags to specify multiple video
formats
<video>
<source src="video-path.mp4" type="video/mp4">
</video>
<video> tag example

<body>
<video width="400" height="300" controls>
<source src="animal.mp4" type="video/mp4">
</video>
</body>
<video> tag example
<video> tag
The poster Attribute is used to display the image while video
downloading or when user click the play button.
If this image not set then it will take the first frame of video as a
poster image.
Syntax:
<video poster="URL">
<canvas> tag

A canvas is a rectangle like area on Note: It is always necessary to specify


an HTML page. It is specified with the id attribute and the height & width
canvas element. By default, the attribute to define the size of the
<canvas> element has no border and canvas. You can have multiple canvas
no content, it is like a container. elements on one HTML page.
<form> tag in HTML5

● An HTML form is used to collect user input. The user input is


most often sent to a server for processing.

● The following code shows the basic structure of a form:

<form>
The input elements goes here
</form>
<form> tag
Two attributes to be used with the form tag are:
● The action attribute points to the back-end of our web page,
which handles the form submission
● The method attribute is used to upload the data. The most
commonly used attributes are the GET and POST methods.
<form >
--------
</form>
<form> tag: The <input> Element
An <input> element can be displayed in many ways, depending on
the type attribute. Here are some examples:
<form> tag: The <label> Element
The <label> element defines a label for several form elements.
Example:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

Label
<form> tag:
<form> tag: The <select> Element
<select> element defines a drop-down list:
Example:

<label for="cars"> Choose a car: </label>


<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
<form> tag: The <textarea> Element
The <textarea> element defines a multi-line input field (a text
area)

Example:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<form> tag: The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset>
element.
<form> tag: The <button > Element
The <button> element defines a clickable button.

Example:
<!DOCTYPE html>
<body>
<h2>The button Element</h2>
<button type="button" onclick="alert('Hello!')">Click Me!</button>
</body>
</html>
<iframe> tag
The <iframe> tag can appear anywhere in your document.
The <iframe> tag defines a rectangular region within the
document in which the browser can display a separate document
or file.
We can include external html file in your document using iframe
tag.
Example:
<iframe src="file.html" width="300" height="200">
</iframe>
<iframe> tag
<!DOCTYPE html>
<body>
<h2>iframes Example</h2>
<p>Use the height and width attributes
to specify the size of the iframe:</p>
<iframe src="f1.HTML"
height="400"
width="400"></iframe>
</body>
</html>

You might also like