Introduction To
HTML
HTM
L
From:
Vyom Girishkumar Patel (12202120601061)
Meet Jiteshkumar Chheta (12202120601032)
Hir Chiragkumar Patel (12202120601022)
Contents:
Basics of HTML
Structures of an HTML Page
HTML tags
<HTML>
Meta tags
HTML forms, frames, buttons, tables
Introduction to HTML5
HTM New Features in HTML5
L
Introduction:
Hypertext –
Hypertext is text which contains links to other texts means web
pages
<HTML>
are linked together.
Markup Language is a way to define elements within a text document
using tags that tells the Web browser how content going to be display.
HTM
L
HTML : Hyper Text Markup Language – A browser understands and
interpret the HTML tags, identifies the structure of the document (which
part are which) and makes decision about presentation (how the parts look)
Basics of an HTML
The <!DOCTYPE> - declaration represents the document
type, and helps browsers to display web pages correctly. It
must only appear once, at the top of the page. The
declaration for doctype is: < ! DOCTYPE html >
<HTML>
The HTML document itself begins with <html> and ends
with </html>.
HTML Layout
• HTML Tags
HTM • HTML Attributes
• HTML Elements
L
• Syntax:
• <tag name attribute_name= " attribute_value"> content </
tag name>
HTML Tags
• HTML tags are used to mark-up HTML elements .
• Tag is surrounded by angular brackets “< >”
• Syntax: <tag> content </tag>
• Example: <b> Welcome to class of WD </b>
HTML Attributes
<HTML>
•
•
•
•
Provide additional information about HTML elements.
HTML Attributes are always specified in to starting tag.
It is usually come in pair of name and value like: name="value”.
For example: <body text="red">
HTM HTML Elements
L • HTML element is defined by starting tag, content and ending
tag.
Types of Elements
1. Empty element :
• Elements do not have ending tag and content.
• Example: <br>, <hr>, <img>
2. Nested element :
• Elements can be placed within other elements.
• Example: <html> <body> <p>content</p></body> </html>
<HTML>
3. Block-level element :
• Structural elements of the page – divides page into different blocks.
• It always starts with new line.
• Takes the full width of web page from left to right.
• Example: <div>, <dl>, <dt>, <fieldset>, <figure>, <footer>,
<form>, <h1>-<h6>, <header>, <hr>, <li>, <p>, <pre>, <table>
HTM
4. Inline element :
L • Contained within block-level elements.
• Surround only small parts of the document’s content.
• Not start with new line and take width as per requirement.
• Example: <a>, <b>, <button>, <i>, <u>, <input>, <label>,
<map>,
<q>, <script>, <select>, <span>, <strong>, <sub>, <sup>,
HTML Head Elements
• HTML <head> element is a container tag
• Placed before the <body> tag
1. <title> element defines title of the HTML document
<head>
<title> Give Title </title>
</head>
2. <meta> element is used to provide structured meta-information about a
<HTML>
web page. The <meta> tag contains page description, keywords and other
important information.
<meta charset="UTF-8"/>
<meta name="description" content="HTML meta element"/>
<meta name="keywords" content="html, css,js"/>
HTM <meta name="author" content="Ganpat university"/>
L 3. <link> element defines the relationship between the current HTML
document and an external resource.
<link rel="stylesheet" type="text/css" href="style.css"/>
4. <style> element is used to write CSS style to an HTML document.
• It contains CSS properties.
<style>
p { font-size: 15px; color: red; }
h2 { font-weight: normal; color: #196a8e; }
</style>
5. <script> element used to defines client-side JavaScript which is specified
within the document or embedded external JavaScript file through
<HTML>
the SRC attribute.
<script>
<script type="text/javascript" src="script.js">
</script>
HTM
L
HTML body Elements
• HTML <body> element defines the document's body.
• <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
Attributes of <body> tag
1. bgcolor:
• It is used to specify the background color of web page.
Syntax : bgcolor=”color name” or bgcolor=”# Hexadecimal number ”
<HTML>
2. background:
• It is used to specify the source of an image to tile as the document
background.
Syntax: background=”Path of Image or URL”
3. text:
HTM • It is used to change the color of the text displayed in webpage.
Syntax: Text=”color name” or text= “#Hexadecimal number”
L
4. link:
• It is used to specify the color to be used while displaying the hyperlink.
• Default link color is blue.
Syntax: link=”color name” or link= “#Hexadecimal number”
HTML Basic Elements:
HTML Headings
• To set titles or subtitles of content.
• There are six different HTML headings <h1> to <h6> tags.
Example:
<h1>Heading 1</h1>
<h6>Heading 6</h6>
<HTML>
< br > tag inserts a single line break.
< hr >It is used to insert a horizontal line in an HTML page to separate document in
sections.
<p> tag defines a paragraph of text.
HTM <!--...--> tag is used to insert comments in the source code.
L <div> tag an empty container which defines a division in an HTML document.
<span> tag is an inline container used to mark up a part of a text, or a part of a
document.
<HTML>
HTM Output:
L
Formatting tags
• Process of formatting text for better look and feel.
• HTML provides ability to format text without using CSS.
• Many formatting tags are available to make text bold, italic, small, big or
underlined.
• Formatting tag always comes in pairs.
<HTML>
HTM
L
HTML Font Element:
• <font> tag defines the font size, color and face of text in the HTML document.
1. Font Attributes: size - Adjust the size of the text. Possible value of font size is
from 1 to 7, where 1 is the smallest, 7 is the largest
2. Font Attributes: face- Set the type of the text. Possible value of font face is
name of
font-family.
<HTML>
3. Font Attributes: color- Set the text color. Color can be specify either with its
name
or with its hex code.
HTM
L
HTML Anchor element:
• Anchor tag: <a> tag
• Defines hyperlink that links one page to another page.
href: links to destination page or URL
syntax: <a href="www.adit.ac.in">Adit </a>
Image Element:
<HTML>
<img> tag is used to insert an image into HTML document. It is an empty
element
Syntax: <img src=“File.jpg”>
<img src="aditimage.jpg" alt="Adit image">
HTM
L
HTML List:
• HTML Lists are used to specify lists of information.
• Lists must contain one or more list elements.
• Types of HTML lists:
1. Ordered List / Numbered List (< ol >)
2. Unordered List / Bulleted List (< ul >)
3. Description List / Definition List (< dl >)
1. Ordered List / Numbered List
• Starts with the <ol> element and list item starts with the <li> element
<HTML>
• Known as Numbered list.
HTM
L
2. Unordered List / Bulleted List
• Collection of items represented by plain bullets
• Starts with the <ul> element and each list item starts with the <li>
element
• Known as bulleted list.
<HTML>
HTM
L
3. Description List / Definition List
• Known as Description Lists
• List of items with a description or definition of each item
• Definition List uses following three tags.
• <dl> − Defines the start of the list
• <dt> − A term
• <dd> − Term definition
<HTML>
HTM
L
HTML Table:
• HTML Table is 2-D arrangement of data in rows and columns.
Table elements:
• <table> - Create a table
• <tr> - table row
• <td> - table data/cell
• <th> - table header
<HTML>
HTM
L
<HTML>
HTM
L
HTML Form:
• To collect different types of user inputs
• Form controls: input box, check box, radio button, submit button, labels,
text area, etc
• Syntax:
<html>
<body>
<form>
//input controls e.g. <input>, <label>,
<HTML>
<textarea>, <select>
</form>
</body>
</html>
<form> element:
HTM
• <form> tag is used to create an HTML form
L • It contains form elements such as <input>, <textarea>, <label>….
elements.
Syntax:
<form>
//Form elements
</form>
<input> element: type attribute:
1) text
▪ define a single-line input text field
▪ Syntax: <input type="text" name="username">
2) password
▪ Allow user to enter the password securely in a webpage.
▪ Syntax: <input type=“password” name=“Password”>
<HTML>
3) Submit
▪ defines a submit button to submit the form to the server.
▪ Syntax: <input type=“submit” value=“submit”>
4) reset
HTM ▪ Define as button , Reset all inputted values
▪ Syntax: <input type=“reset" value=“Reset">
L 5) radio
▪ Defines the radio buttons. At a time only one radio button option can be
selected
▪ Syntax: <input type=“radio” value=“Male”>
6) checkbox
▪ Displayed as square boxes which can be checked or unchecked to select
the choices from the given options
▪ Syntax: <input type=“checkbox” value=“Reading”><input>
7) button
▪ define as simple push button
▪ To control a functionally on any event such as, click event.
▪ Syntax:<input type="button" value="Click me" onclick="alert(‘Thank
<HTML>
you’)”>
8) file
▪ Select one or more files from client side.
▪ Syntax: <input type=“file”>
HTM 9) date
▪ used to add date control.
L ▪ Syntax: <input type=”date”><input> element: type attribute
10) number
▪ define number as value.
▪ Syntax: <input type=”number”>
11) max/min
▪ specify maximum and minimum range of control.
▪ Syntax: <input type=“number” min=“2” max=“5”>
12) email
▪ define a field for an e-mail address and validates automatically when
submitted.
▪ Syntax: <input type=”email”>
13) image
<HTML>
▪ defines an image as a submit button.
▪ Syntax: <input type=“image” src=“path”>
14) The <fieldset> element is used to group the related information of a form.
15) The <legend> element provide caption for the grouped elements.
HTM
L
<HTML>
HTM
L
<HTML>
HTM
L
<HTML>
HTM
L
HTML Frame:
• HTML frames are used to divide your browser window into multiple
sections .
• Each section is called Frame.
• Each Frame can load a separate HTML document.
• Each Frame is independent of other frames.
<HTML>
HTM
L
< frameset > Element:
• <frameset> is collection of frames.
• FRAMESET is a Pair HTML tag
• <frameset> starting tag
• </frameset> ending tag
• It used to divide the window into multiple frames.
<HTML>
Attribute of <Frameset>
•
•
•
Rows
Cols
Border
HTM •
•
Frameborder
Framespacing
L
HTML Entities:
• HTML character entities replace
• Reserved characters in HTML
• Characters that are not present on your keyboard
• Use entity name or entity number (a numerical character reference).
• Each entity starts with symbol ampersand (&) and ends with a semicolon
<HTML>
(;).
• Syntax:
&entity_name;
OR
HTM &#entity_number;
L
<HTML>
HTM
L
HTM
L
