Scribd
Upload
123 views

HTML Freshers

The document provides an overview of HTML including: 1. A brief history of HTML and how it has evolved over time from Tim Berners-Lee's original creation in 1991 to current versions. 2. An explanation of key HTML elements and tags such as headings, paragraphs, images, lists, and forms. It also describes attributes that provide additional information about elements. 3. An outline of the basic structure of an HTML document which includes the <!DOCTYPE>, <html>, <head>, and <body> tags and how they are organized.

Uploaded by

VIDEOS JUNCTION
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
123 views

HTML Freshers

The document provides an overview of HTML including: 1. A brief history of HTML and how it has evolved over time from Tim Berners-Lee's original creation in 1991 to current versions. 2. An explanation of key HTML elements and tags such as headings, paragraphs, images, lists, and forms. It also describes attributes that provide additional information about elements. 3. An outline of the basic structure of an HTML document which includes the <!DOCTYPE>, <html>, <head>, and <body> tags and how they are organized.

Uploaded by

VIDEOS JUNCTION
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

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

You might also like