Introduction To HTML: HTM L
Introduction To HTML: HTM L
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.
<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 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">
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
<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"/>
<style>
p { font-size: 15px; color: red; }
h2 { font-weight: normal; color: #196a8e; }
</style>
<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.
<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.
L
Formatting tags
<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:
Image Element:
<HTML>
<img> tag is used to insert an image into HTML document. It is an empty
element
Syntax: <img src=“File.jpg”>
<HTML>
• Known as Numbered list.
HTM
L
2. Unordered List / Bulleted List
<HTML>
HTM
L
3. Description List / Definition List
<HTML>
HTM
L
HTML Table:
Table elements:
• <table> - Create a table
• <tr> - table row
• <td> - table data/cell
• <th> - table header
<HTML>
HTM
L
<HTML>
HTM
L
HTML Form:
<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:
<HTML>
Attribute of <Frameset>
•
•
•
Rows
Cols
Border
HTM •
•
Frameborder
Framespacing
L
HTML Entities:
<HTML>
(;).
• Syntax:
&entity_name;
OR
HTM &#entity_number;
L
<HTML>
HTM
L
HTM
L