HTML 5 By Syed Imran
JSPIDERS
1
CSE/ISE/MCA/BCA MECH/CIVIL ECE/EEE/TC
Scratch
2
Course Outline
❑ HTML Image
❑ What is HTML?
❑ HTML List
❑ Features of HTML
❑ HTML Table
❑ History of HTML
❑ HTML Form
❑ HTML Tags
❑ Requirements
❑ HTML Attributes
❑ Upcoming Batches
❑ Structure of HTML
❑ Placed Candidates
❑ HTML Paragraph and Break
2
What is WEB Technologies ?
1991 Tim Berners Lee HTML Structure/Skeleton/Layout
1994 Hakon Wium Lie CSS Design/Makeup
First name of JS
1995 Brendan Eich Mocha Javascript Actions and Validation
3
Difference between HTML ,CSS and JS
3
History of Html
• HTML —which is short for HyperText Markup Language— is the
official language of the World Wide Web .
• HTML was first conceived in 1990.
• HTML is a product of SGML (Standard Generalized Markup
Language) which is a complex.
• HTML especially developed to link documents electronically
using hyperlinks.
• The current version of Html is Html 5.0
10
What is HTML?
• HTML describes the structure of web pages
HTML
Hyper Text Markup Language
Reference/link Data/information Predefined / Communication
Marked
8
Features of Html
• Html stands for Hyper Text Markup Language.
• Html mainly use for design a client side web pages .
• Html is used to create static web pages.
• Html is case in-sensitive.
• Html is simple and easy language.
• Html programs are executed by the browser when the file is opened in the
browser.
• Html programs should be saved with .html extension.
9
HTML Tag
• An HTML code that defines every structure on an HTML page.
• It includes the placement of text and images and hypertext links.
• HTML tags begin with the less-than (<) character and end with greater-than (>).
• These symbols are also called angle brackets.
11
Types of Tags
1.Paired Tags/Closed Html Tags
2.Singular Tags/Unpaired tags/Self-closing Tags
12
Paired Tags/Closed Tags
• Paired tags have an opening and closing tag.
• The opening tag is similar to the single tag , and the closing has forward slash.
• Between an opening and closing tag, write some content (text, images or something else).
• Content can be other tag also.
Opening Tag Closing
Tag
<p> Welcome To Jspiders </p>
Content
Element 13
Unpaired Tags/Self-closing Tags
• Unpaired tag has both opening and closing tag in a single tag.
Opening Tag / Closing Tag
<br/>
Note: Forward slash is not mandatory for unpaired tags. Unpaired tags also known as empty elements.
14
Attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value”
<p align = “right">This is right aligned</p>
15
Structure of HTML
• The <!DOCTYPE> declaration must be the
<!DOCTYPE html> 1 very first thing in your HTML document.
R
<html> • It indicates Version Information( HTML5)
o
<head>
• <head> tag is used to contain specific information about
o </head> 2 a web page
t
E
l
e
m <body> • The <body> tag defines the document's body.
e 3 • The <body> element contains all the contents of an
n </body> HTML document, such as headings, paragraphs, images,
t </html> hyperlinks, tables, lists, etc.
16
Head Tag
<head> • The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
• Metadata will not be displayed on the page, but is machine parsable.
<meta/> • Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
• <link> tag is used add icon to the web page.
<link/> • <link> tag is used to add External CSS file.
• <title> tag is used add title to the web page.
<title>JSPIDERS</title> • File name will be displayed if don’t use <title> tag.
<style>CSS Properties</style> • <style> tag is used CSS Properties.
• <script> tag is used JavaScript code.
<script>Javascript code</script> • We can use inside both <head> and <body> tag.
</head> • But good practice is to use it inside the <body> as the last tag
17
Paragraph <p> and Break <br> Tag
• The HTML <p> tag represents a paragraph.
• Paragraphs are usually represented in visual media as blocks of text
separated from adjacent blocks by blank lines and/or first-line
indentation.
• The <br> tag is an inline element used to create a single line break in a
document.
18
Headings
• The heading tag is used in HTML to define headings of a page.
• Headings are defined by <hn>.
• “n” being a number between 1 and 6.
• <h1>, <h2>,<h3>,<h4>,<h5> and <h6> are the different types of headings.
• Heading <h1> defined the most important heading and <h6> define most
least heading.
• <h1> text is big in size and <h2> text is smaller than <h3> text and <h4> text
is smaller than <h5> text and so on..
19
Image Tag and Attributes <img>
• <img> tag used to display images on web page.
Sl No Attribute Name Parameter/Values Description
Image Path, Image Name , Are used for specify the source file from where
1 Src
Image Address you want to display image.
Are used to specify alternate text to display in
2 Alt Any Name the place of image when browser is unable to
display image.
Are used to specify a title for the image that will
3 Title Any Name be displayed when mouse is placed over the
image for few seconds.
4 Height PX , % Are used to specify height of image.
5 Width PX , % Are used to specify Width of image.
20
List
• Html list are used to arrange HTML elements in list format. Html provide three types of list.
• Ordered List or Numbered List (<ol>).
• Unordered List or Bulleted List (<ul>).
• Description list <dl>. Note: Not Required
• The <li> tag is used inside ordered lists (<ol>), unordered lists (<ul>).
• <li> tag defines a list item.
Sl No Attribute Name Parameter/Values Description
1(Default), a, A, I, i <ol> Specifies the type of list marker that should be
1 Type
Disc(Default),Circle,Square <ul> used on each item of a list.
2 Start Any Number Defines the starting number in an ordered list.
21
Marquee Tag <marquee>
• Marquee tag are used for display the moving content on the web browser.
Sl No Attribute Name Parameter/Values Description
1 Behavior Scroll(Default),Slide,Alternat To Change the Behaviour
2 Direction Left(Default),Right,Up,Down To Change the Direction
3 Bgcolor Colour name/ Colour Code To Apply Background Colour
4 Scrollamount Any Number To increase the Speed
5 Loop Any Number For Repeatation
6 Height PX , % Are used to specify height of Marquee tag.
7 Width PX , % Are used to specify Width of Marquee tag.
22
Table , Tr , Th, Td Tags
• HTML tables are created using the <table> tag
• Table is a collection of cells in HTML
• Table row is defined using <tr> tag
• Table header is defined with <th> tag
• Table data/cell is defined with <td> tag
23
Table and td/th Attributes
Sl No Attribute Name Parameter/Values Description
1 Border PX,% To apply Border to the table
2 Cellspacing PX,% To apply space between cells
3 Cellpadding PX,% To apply space between content and border of cell
4 Rules Rows,Cols,all To represent table in the form of rows and colomns
5 Height PX , % To increase or decrease the height.
6 Width PX , % To increase or decrease the width.
<td> or <th>
1 Valign Middle(Default),Top,Bottom To align the Content Verticaly
Is used to specify the number of columns a cell
2 Colspan Any Number
should span(merge)
Is used to specify the number of rows a cell should
3 Rowspan Any Number
span(merge)
24
Anchor Tag <a> (Hyperlinks)
• <a> tag is used to create Hyperlinks that allow the users to navigate from one page to
another.
Sl No Attribute Name Parameter/Values Description
1 Href Url/File Name Href attribute specifies the destination address
Are used to specify a title for the image that will be
2 Title Any name displayed when mouse is placed over the image for
few seconds.
Target attribute specifies where to open the linked
_Parent(Default),_Blank
3 Target document like open in new window, open in same
window.
The download attribute specifies that the target
Any name
4 Download will be downloaded when a user clicks on the
hyperlink
25
Forms <form>
• HTML Forms are required, when you want to collect some data from the user.
• Forms contains controls such as text fields, email field, password fields, checkboxes, button, radio buttons, submit button, menus etc
• For example when you fill the registration form lot of information given by user and these information server get from web page using
form element..
Sl No Tag Name Description
1 <input> The <input> tag specifies an input field where the user can enter data.
<textarea> The <textarea> tag defines a multi-line text input control. The <textarea> element is often
2
used in a form, to collect user inputs like comments or reviews.
The <select> element has some unique attributes you can use to control it, such as
3 <select>
multiple to specify whether multiple options can be selected.(Dropdown)
4 <option> The <option> tag defines an option in a select list.
<button>
5 The <button> tag defines a clickable button.
26
Input Tag <input>
Sl No Attributes Name Parameter/Values
Text, Password, Submit, Reset, URL, Email, Radio , Button, Checkbox ,Date, Time, File
1 Type
, Number, Week,Color
2 Placeholder Any Name
3 Value Any Name
4 Name Any Name
5 Id Any Name
6 Size PX,%
7 Maxlength Any Number
8 Minlength Any Number
9 Required
10 Checked
11 Disabled
27
Select and Textarea
• Select <select>
Sl No Attributes Name Parameter/Values Description
1 Rows Any Number To increase height of <textarea>
2 Cols Any Number To increase width of <textarea>
• Textarea <textarea>
Sl No Attributes Name Parameter/Values Description
1 Multiple To select multiple <option>
28
Form Tag Attributes <form>
Sl No Attributes Name Parameter/Values
1 Action URL/File Name
2 Any Name
Name
3 Target _Parent(Default),_Blank
4 Method Get(Default),Post
29
