HTML 5 By Syed Imran
JSPIDERS
RAJAJINAGAR
CONTACT: 7760200900 HR: 7022889639 1
CSE/ISE/MCA/BCA MECH/CIVIL ECE/EEE/TC
Scratch
CONTACT: 7760200900 HR: 7022889639 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
CONTACT: 7760200900 HR: 7022889639 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
CONTACT: 7760200900 HR: 7022889639 3
Difference between HTML ,CSS and JS
CONTACT: 7760200900 HR: 7022889639 3
Bootstrap
• Bootstrap is a free and open-source CSS framework, Used to develop responsive web applications.
• It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons,
navigation, and other interface components.
CONTACT: 7760200900 HR: 7022889639 5
Request Response Model
Browser Search Engine Hyper Text Transfer Protocol Server
Client Business Logic Server Database Server
HTML
Google Chrome
HTTP REQ Java REQ
CSS Google
Virat Kohli C
Javascript C++ SQL
Bootstrap HTTP RESP
Python RESP
MSQL
NodeJs DB2
MongoDB
Front-End Back-End
CONTACT: 7760200900 HR: 7022889639 6
Javascript Full Stack Development
MEAN MERN MEVN
MongoDB ExpressJS Angular ReactJS VueJS NodeJS
CONTACT: 7760200900 HR: 7022889639 7
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
CONTACT: 7760200900 HR: 7022889639 10
What is HTML?
• HTML describes the structure of web pages
HTML
Hyper Text Markup Language
Reference/link Data/information Predefined / Communication
Marked
CONTACT: 7760200900 HR: 7022889639 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 .htm or .html extension.
CONTACT: 7760200900 HR: 7022889639 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.
CONTACT: 7760200900 HR: 7022889639 11
Types of Tags
1.Paired Tags/Closed Html Tags
2.Singular Tags/Unpaired tags/Self-closing Tags
CONTACT: 7760200900 HR: 7022889639 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
CONTACT: 7760200900 HR: 7022889639 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.
CONTACT: 7760200900 HR: 7022889639 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>
CONTACT: 7760200900 HR: 7022889639 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.
CONTACT: 7760200900 HR: 7022889639 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
CONTACT: 7760200900 HR: 7022889639 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.
CONTACT: 7760200900 HR: 7022889639 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..
CONTACT: 7760200900 HR: 7022889639 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.
CONTACT: 7760200900 HR: 7022889639 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.
CONTACT: 7760200900 HR: 7022889639 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.
CONTACT: 7760200900 HR: 7022889639 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
CONTACT: 7760200900 HR: 7022889639 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)
CONTACT: 7760200900 HR: 7022889639 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
CONTACT: 7760200900 HR: 7022889639 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.
CONTACT: 7760200900 HR: 7022889639 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
CONTACT: 7760200900 HR: 7022889639 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>
CONTACT: 7760200900 HR: 7022889639 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
CONTACT: 7760200900 HR: 7022889639 29
Upcoming Batches in Jspiders RajajiNagar
Upcoming Batches for the Month June
Sl No Time Technology Session Start Date Trainer
1 11:30 AM Python Morning 10th June 2020 Mr. Keshav
2 6:30 PM Python Evening 17th June 2020 Mr. Keshav
3 6:30 PM Python Evening 24th June 2020 Mr. Keshav
4 2:30 PM Core Java Afternoon 8th June 2020 Mr. Keshav
5 4:30 PM Core Java Afternoon 15th June 2020 Mr. Uday Pawar
6 4:00 PM Core Java Afternoon 22nd June 2020 Mr. Uday Pawar
CONTACT: 7760200900 HR: 7022889639 30
Upcoming Batches in Jspiders RajajiNagar
CONTACT: 7760200900 HR: 7022889639 31
Placed Candidates Jspiders RajajiNagar
CONTACT: 7760200900 HR: 7022889639 32
