Scribd
Upload
113 views85 pages

HTML5

HTML guide

Uploaded by

1NT17EC034 Deepthi K J
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
113 views85 pages

HTML5

HTML guide

Uploaded by

1NT17EC034 Deepthi K J
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/ 85

HTML5

By,
Navya C
Assistant Professor
Department of Information Science & Engineering
Nitte Meenakshi Institute of Technology,
Document Structure
<!DOCTYPE html> <!-- declaration of HTML5 -->

<html> <!-- root element of an HTML page -->

<head>
<meta charset="UTF-8"> <!-- Character encoding declaration -->
<title>Title of the document</title>
</head>

<body>

Content of the document......

</body>

</html>
Basic Text Mark-up
• Paragraphs
• Line breaks
• Preserving White Space
• Headings
• Block Quotations
• Font styles and sizes
• Character Entities
• Uses of meta Element
Paragraphs <p>
• Text is placed in the content of a paragraph element
Paragraphs Contd.,
Line Breaks <br/>
• Text require a break without preceding a blank line
• Break tag has no content
Preserving White Space <pre>
• Multiple spaces can be preserved in the text.
Headings
• 6 levels of headings
• <h1> • <h4> Default Size
Larger than
• <h2> • <h5> Smaller than
default size
• <h3> • <h6> Default Size

• Uses bold font


• Size depends on the number in the heading tag
• Always break the Current Line
• Browsers include some vertical space before and after all
headings
Headings Contd.,
HTML
• Quotation tag
<q>….</q>
• Citation tag
<cite>……</cite>
• Definition tag
<dl>….</dl>
<dt>…..</dt>
<dd>……</dd>
• Comment tag
<!......>
• Horizontal tag
<hr/>
<hr size=‘”20” style=“background-color:blue;”/>
Block Quotations <blockquote>
• Sets off a block of text from the normal flow of text in the document
• The text is indented on both sides
Font Styles & Sizes
• List of tags
o <b> o <sup>
o <big> o <u>
o <i> o <code>
o <small> o <em>
o <strike> o <strong>
o <sub> o <cite>
o <Q>

• The advent od CSS made these tags no longer fashionable.


Font Styles & Sizes Contd.,
Character Entities
• Special characters are defined as entities
• It has some codes in HTML
Character Entity Meaning
& &amp; Ampersand
< &lt; Is less than
> &gt; Is greater than
“ &quot Double quote
0
&deg Degree
¼ &frac14 One-fourth
© &copy Copyright
Forms
• Used by the user to communicate information from web
browser to the server

• Tags generate commonly used objects on the screen.

• Also called as controls/ widgets/ components

• Gathers information in the form of either text or button


selection

• All the values of the controls in a form is called form data


Form element <form>
• All Controls of form appear in the content of <form> element
• Attributes
o action – Specifies the URL of the application on the web server that is
to be called when the user clicks the submit button
o method – Specifies the technique used to pass the form data to server
 Get
 Post HTML VIEW
Input element <input>
• Controls specified using <input > tag
1.Text box
2.Password
3.Checkbox
4.Radio button
5.Button
6.Submit Button
7.Reset Button
• Attributes of <input> tag
1. type – specifies the particular kind of control required
2. name – All controls require a name
- require foe client side and server side validation
3. value – only checkbox and radio button requires this
Text Box
• To gather information like name, address etc.
• Default size – 20 characters
• Value of the type attribute is “text”
• Attributes that can be used for text box are
1. Size – to set size of the text box
2. Maxlenght – Takes only specified number of characters
HTML VIEW
Text Box Contd.,

HTML VIEW
Password
• Characters in a password field are masked
HTML VIEW
Checkbox
• Used for multiple choice input from the user

• Only checked items are included in the form data

• Every checkbox require a name and value attribute in <input> tag

• Value of type attribute is “checkbox”

• Every checkbox in the list should have same value for name
attribute

• It should appear in label element


Checkbox Contd.,
HTML VIEW
Radio Button
• Only one radio button can be on at any time

• Type value in the input tag is “radio”

• All Radio buttons in a group should have same value for name
attribute

• If a radio button is pressed the button in the group that was


previously on is turned off
Radio Button Contd.,
HTML VIEW
Action Buttons
Submit Button
• Every form should have a submit button
• As soon as it is clicked
– Form data is encoded and sent to the server
– Server is requested to execute the server resident program
specified in the action attribute of the <form> tag

Reset Button
• clears all the controls in the form to their initial states
Action Buttons Contd.,
HTML VIEW
Button
HTML VIEW
Select Element
• The <select> element defines a drop-down list
• The <option> elements defines an option that can be selected.
• By default, the first item in the drop-down list is selected.
• Value of the name attribute of select tag and chosen menu item is sent in
form data
• Attributes
– Name
– Size – specifies the number of items that are initially displayed to the
user. Default = 1
– Selected - To define a pre-selected option
• Each item of the menu is specified using the <option> tag nested in
<select> element
Select Element Contd.,
HTML VIEW
Text area Element
• It defines a multi-line input field
• The rows attribute specifies the visible number of lines in a
text area.
• The cols attribute specifies the visible width of a text area.
• It is not limited by length
• Implicit scrolling is done both vertically and horizontally

HTML VIEW
Image Formats
GIF JPEG PNG
Expansion Graphic Joint Photographic Portable Network
Interchange Experts Group Graphics
Format
Color 8 bit 24 bit
Representation
for pixels
Number of Colors 256 16 million 16 million
Compression Poor Better than GIF Doesn't sacrifices
Algorithm but sacrifices picture clarity
picture clarity
Extension .gif, .GIF .jpg, .jpeg, .JPG .png, .PNG
Image Element <img />
• Attributes (1&2 – mandatory)
1. src – Specifies the file containing the image
Eg: abc.jpg – image file is in same directory where HTML file is stored
Eg: subdirectory_name/abc.jpg – image file is in the sub-directory where HTML file is stored

2. alt – Specifies the text to be displayed when browser is unable to


display the image

3. width
Helps In scaling the image
4. Height
5. Ismap – Indicates that the image is used as an image map {optional)
6. Usemap – Associates an element with ann image map. (Optional)
Image Map Element
<IMG src=“path of the image” usemap=“#name of the map>
<MAP shape=“name of the shape” coords=coordinate
positon” href=“name of the target page”/>
Image Element Contd.,
HTML VIEW
Lists
• Unordered Lists
• Ordered Lists
• Definition Lists
Unordered Lists <ul>
• Each list item is specified with <li> tag
• List items are implicitly preceded by bullets when displayed
• Nested lists can also be written

HTML VIEW
Ordered Lists
• Each list item is specified with <li> tag
• Default: Arabic numerals are displayed
• Nested lists can also be written

HTML VIEW
Definition Lists <dl>
• Also called as Description List
• It 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 

HTML VIEW
Tables <table>
• It’s a matrix of cell
• Content of a cell can be text, image or nested table etc.
• Each table row is defined with the <tr> tag
• A table header is defined with the <th> tag. By default, table
headings are bold and centred
• A table data/cell is defined with the <td> tag
• To add a heading to a table, use the <caption> tag
– A table should have only one caption
– Placed after the opening tag of the table
Tables <table>
• COLGROUP – used to specify the properties such as font color,
background color, border for a group of columns in a table.
– Placed after the Caption element and before the thread element.
– Attributes: span – to specify number of columns on which properties
should be applied, style – to specify properties.
• COL – used to define properties of each column of a table
separately
– Defined inside the COLGOUP element
• TBODY – used to group the rows of a table
• THEAD – Used to define header for the table
– Defined after the CAPTION and the COLGROUP element
• TFOOT – Used to define the footer of the table.
Tables <table> Contd.,

HTML VIEW
Cell Spanning
• To make a cell span more than one column, use the colspan attribute
• To make a cell span more than one row use the rowspan attribute.

HTML VIEW
Exercise
1. Create a HTML document that descries a table
with the following contents: The columns of
the table must have the headings “Pine”,
”Maple”, “Oak”, and “Fir. The rows must have
the labels “Average Height”, “Average width”,
“Typical Life Span” and “Leaf Type”. You can
make up the data cell values.
2. To the above created table add a column label
“Tree” and a row label “characteristics”.
Exploring Audio File Formats
File format Description
Advanced Audio Coding (AAC) • Based on MPEG-2, MPEG-4, 3GPP
• Offers
• lossy audio compression
• encoding scheme for digital audio
• Indistinguishable quality from the original
audio source
• Gives better sound quality than MP3
Audio Interchange File Format • Developed by Apple computers
(AIFF) • Mostly used for storing audio data for personal
computers and other electronic audio devices
• Commonly used on MAC OS
• File extension - .aif or .aiff
Audio File (Au) • Developed by Sun Micro-systems
• Used mostly by Sun and NeXT systems
• File extension - .au
Exploring Audio File Formats
File format Description
Interchange File Format (IFF) • Developed by Electronic Arts Company
• Helps to transfer data between software
produced by different companies
• IFF file contains text, graphics and games along
with the audio
• Do not have any file extension
Media Playlist (M3U) • Used to store multimedia playlists
• First implemented in winamp
• Now supported by Windows Media Player and
RealPlayer
• It’s a plain text file containing paths of one or
more media files
• File extension - .m3u
Exploring Audio File Formats
File format Description
Musical Instrument Digital • Used to interchange the musical information
Interface (MIDI) between various musical instruments,
Synthesizers, keyboard controllers, sound cards
and computers.
• file extension: .mid or .midi.
MPEG-2 • Commonly used for digital television signals.
RealAudio • developed by Real Networks.
• uses a variety of audio codecs ranging from low
bit rate to high fidelity formats.
• smaller than other audio file formats such as
MPEG – 2 and AAC.
• The Drawback : sound quality is not as good as
the other common formats such as AAC and
MPEG-2.
Exploring Audio File Formats
File format Description
Waveform Audio (WAVE) • developed by Microsoft and IBM to store an
audio bit stream on computer system.
Windows Media Audio (WMA) • developed by Microsoft.
• The file extension for WMA is .wma
Exploring Video File Formats
File Format Description
Audio Video Interleave (AVI) • Developed by Microsoft
• Contains both audio and video
• File extension - .avi
MPEG Video File Format • Used for coding audio-visual information in a digital
compressed format
• Uses sophisticated compression techniques
• File size is much smaller than other formats
• Drawbacks : Expensive and slow to de-compress
• File extension - .mpeg, .mpg
QuickTime Movie File format • Developed by Apple, works on Mac OS
• Capable of handling varios formats of digital video, 3D
Models, Sound, Text and Animation
• File extension - .qt, .mov
Windows Media Video (wmv) • Developed by Microsoft
• Designed to handle all types of video cotent
• File extension - .wmv
Audio Element <audio>
• Before HTML5, audio files could only be played in a browser
with a plug-in (like flash).
• The HTML5 <audio> element specifies a standard way to embed
audio in a web page.
• The controls attribute adds audio controls, like play, pause, and
volume.
• The <source> element specify alternative audio files which the
browser may choose from. The browser will use the first
recognized format.
• The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.
Audio Element <audio> Contd.,
• Media Type
File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

• Browser Support - The numbers in the table specify the first


browser version that fully supports the <audio> element.

Element
<audio> 4.0 9.0 3.5 4.0 10.5
Audio Element <audio> Contd.,
The browser support for the different formats is: 

Browser MP3 Wav Ogg


Internet YES NO NO
Explorer
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
Audio Element <audio> Contd.,

HTML VIEW
Video Element <video>
• Before HTML5, audio files could only be played in a browser with a
plug-in (like flash).
• The HTML5 <video> element specifies a standard way to embed audio
in a web page.
• The controls attribute adds video controls, like play, pause, and
volume.
• Always include width and height attributes. If height and width are
not set, the page might flicker while the video loads.
• The <source> element allows you to specify alternative video files
which the browser may choose from. The browser will use the first
recognized format.
• The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.
• To start a video automatically use the autoplay attribute
Video Element <video> Contd.,
• Media Type
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

• Browser Support - The numbers in the table specify the first


browser version that fully supports the <audio> element.

Element
<audio> 4.0 9.0 3.5 4.0 10.5
Video Element <video> Contd.,
The browser support for the different formats is: 

Browser MP4 WebM Ogg


Internet YES NO NO
Explorer
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from YES YES
Opera 25)
Video Element <video> Contd.,

HTML VIEW
Hypertext Links
• HTML links are hyperlinks.
• One can click on a link and jump to another document.
• A link does not have to be text. It can be an image or any
other HTML element.
• Syntax: <a href="url"> link text/image </a>
• The href attribute specifies the destination address of the link.
• The link text/image is the visible part 
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Hypertext Links Contd.,
HTML VIEW
Hypertext Links Contd.,
• HTML Links can create a Bookmark within the same document
• HTML bookmarks are used to allow readers to jump to specific
parts of a Web page.
• Bookmarks can be useful if your webpage is very long.
• First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
• Then, add a link to the bookmark from within the same page:
<a href="#C4">Jump to Chapter 4</a>
• Or, add a link to the bookmark from another page
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Hypertext Links Contd.,
Target Attribute
• The target attribute specifies where to open the linked
document.
• The target attribute can have one of the following
values:
o _blank - Opens the linked document in a new window or tab
o _self - Opens the linked document in the same window/tab
as it was clicked (this is default)
o _parent - Opens the linked document in the parent frame
o _top - Opens the linked document in the full body of the
window
Hypertext Links Contd.,
HTML VIEW
Hypertext Links Contd.,

HTML VIEW
HTML VIEW
URL
• Unique address that identifies each web page on www
• Common way to access a website is to enter its URL in the
address bar of a web browser
• HTML elements like A include URL as an attribute
• It contains either a file name or IP address
• It consists of 3 parts
1. Protocol – transfers a resource over the web
2. Domain name – refers to the machine hosting the resource
3. Path name – Specifies the path of the resource
Structuring the URL
• General syntax
Scheme://host.domain:port/path/filename?query_string#anchor
• Scheme Scheme Access – Refers to
File A file on the local PC
• Refers to protocol ftp A file on the ftp server
that is used to http A file on the www
access the file Gopher A file on the gopher server
resource mailto An electronic mail address
• Specifies the type News A usenet newsgroup
of the internet telnet A telnet connection
service wais A file on Wide Area
Information Servers
Structuring the URL
• Host
– Specifies the domain host
– Default host for http is www
• Domain
– Used to identify the unique IP adrress
– Eg: 209.85.231.104 IP address can be accessed as google.co.in
• Port
– Refers to the port number that connects a client browser to the server
– Every scheme has different port number
– Its optional (If not specified default port number of the cheme is used)
– For http - 80
Structuring the URL
• File_name
– Specifies a document, information or program
– Every website has a default filename, index.html which opens when
the web site opens in the browser
– Scheme://host.domain:port/path/ opens default site of the website
• Query_string
– Contains data to be passed to web applications
– Contains parameter/value pairs separated by &
– Parameter and value is separated by =
– Whole query string is preceded by ?
– Eg: ?para1=val1&para2=var2……
Structuring the URL
• Anchor
– Specifies a particular location on the web page
– Eg: http://www.google.com/books/listing#top
provides address of the beginning of the listing
section of the page
Exploring the URL
• Process of converting the URL into a valid URL format
• Used to safely transmit it over the internet
• Performed via HTML forms
• Because of the following possibilities
– The character has a special meaning. Eg: # (%23)
– The character is not a valid character for a URL Eg: space
– The character is not transferred properly over the internet.
Eg:~ (%7E)
Frames
• Used to display more than one document at a time

• The window can be divided into rectangular areas, each of


which is a frame

• Each frame is capable of displaying its own document

• Not recommended to use in html5


<frameset>
• The <frameset> element specifies HOW MANY columns or rows there will
be in the frameset, and HOW MUCH percentage/pixels of space will
occupy each of them.
• The <frameset> element holds one or more <frame> elements.
• To validate a page containing frames, be sure the <!DOCTYPE> is set to
either "HTML Frameset DTD" or "XHTML Frameset DTD".

<frame>
• The <frame> tag defines one particular window (frame) within a
<frameset>.
• Each <frame> in a <frameset> can have different attributes, such as
border, scrolling, the ability to resize, etc.
<frame>
Attribute Value Description
frameborder 0 Specifies whether or not to display a border
1 around a frame
Marginheight pixels Specifies the top and bottom margins of a
frame
marginwidth pixels Specifies the left and right margins of a frame
name text Specifies the name of a frame
noresize noresize Specifies that a frame is not resizable
Scrolling yes Specifies whether or not to display scrollbars in
no a frame
auto
src URL Specifies the URL of the document to show in a
frame
Frames
<!DOCTYPE html5> HTML VIEW
<html>
<frameset cols="40%,30%">
<frameset rows="40%,30%">
<frame src="bookmark.html">
<frame src="orlist.html">
</frameset>
<frameset rows="40%,30%">
<frame src="bookmark.html">
<frame src="orlist.html">
</frameset>
</frameset>
</html>
HTML Elements
Categorized into following types
• Root
• Metadata
• Section
• Heading
• Flow
• Phrasing
• Embedded
• Interactive
Metadata Elements
• Used to set the presentation or behaviour of the
remaining content of a document
• List of metadata elements
1. Title
2. Base
3. Link
4. Meta
5. Noscript
6. Script
7. Style
Root Elements
• Represent the starting element that should be
present in all HTML documents
• HTML element – It allows browser to identify
the document type.
• Attributes – class, dir = “ltr/rtl”, id, lang,
spellcheck, style etc
Section Elements
• Different section elements are used to define different
parts of a document.
• List of Section elements
– Body
– Section
– Nav
– Article
– Aside
– Header
– Footer
– Address
Flow Elements
• Used in the body of the HTML documents or
applications.
• Contains all most all the HTML elements that
are used to display text, links, images, audio,
video, tables, forms.
Phrasing Elements
• Used to represent the text of the HTML
document
• ABBR, CODE, SAMP, KDB, EM, STRONG, Q, INS,
DEL, BLOCKQUOTE
Embedded Elements
• Used to import content from other sources into the HTML
document
• Eg: To plug-in the content from other sources.
• List of embedded elements
– Audio
– Video
– Embed
– Img
– Canvas
– Math
– Object etc
Interactive Elements
• Specifically intended for user interaction
• Some of them are
– Audio (If controls is present)
– Video (If controls is present)
– Img (If usemap attribute is present)
–A
– Input
– Embed
– Button
– Menu
– Select
– Textarea
Meta Element <meta>
• It has no content
• Provides information about the document for search engines
• Attributes
o charset – Specifies Character set used in the document
o Name – EG: Title, Author, Key words
o Content – Specifies information through this
o http-equiv – EG: content-type expires, refresh, set-cookie
• Eg:
<meta name=“title” content=“HTML” />
<meta name=“author” content=“Sebesta” />
<meta name=“keywords” content=“tags, entities” />
enctype form attribute
• Used to encode information in the form before sending it to
the server.
• Encoding is done by browser
• 3 types of encoding
1. Application/x-www-form-urlencoded
2. Multipart/form-data
3. Text/plain
Application/x-www-form-urlencoded

• Default type
• Here, browser converts a
– Space into +
– Non-alphanumeric character into % followed by 2 hexadecimal digits
that represent ASCII code character
– Line breaks into CR/LF pairs (%0D%0A)
– Name of each form control present in the form
– Form control are separated by &
• Eg: If Username = ABC EFG and Password=@hel6, encoded as
Username=ABC+EFG&Password=%E8hel6
Multipart/form-data

• Used when method attribute of the form is set to POST


• More cumbersome and longer than the Application/x-www-form-urlencoded
• Also Preferred when form contains file selection control
• Eg: If Username = ABC EFG and Password=@hel6, filename = file.txt encoded
as
-----------------------------------------12345788989
Content – Disposition: form-data; name=“username”
ABC EFG
-----------------------------------------12345788989
Content – Disposition: form-data; name=“password”
ABC EFG
-----------------------------------------12345788989
Content – Disposition: form-data; name=“filename”
content of the file
Thank You

You might also like