Scribd
Upload
36 views40 pages

04/11/2024 Gagan Thakral (Abes) 1

HTML is used to describe web documents and pages using markup tags. It allows embedding of images, hyperlinks, tables and forms. Common HTML tags are used to structure text into headings, paragraphs, lists and divide content using div sections.

Uploaded by

sivani14565220
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views40 pages

04/11/2024 Gagan Thakral (Abes) 1

HTML is used to describe web documents and pages using markup tags. It allows embedding of images, hyperlinks, tables and forms. Common HTML tags are used to structure text into headings, paragraphs, lists and divide content using div sections.

Uploaded by

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

HTML

• Hyper Text Markup Language


• It is used for describing web documents or
web pages.
• A markup language is set of markup tags.
• HTML documents are described by HTML tags.
• Each HTML tag describes different HTML
content.

04/11/2024 GAGAN THAKRAL(ABES) 1


HTML
• An HTML file must have an .htm or .html file
extension
• HTML files can be created with text editors:
– NotePad, NotePad ++, PSPad
• Or HTML editors:
– Microsoft FrontPage
– Macromedia Dreamweaver
– Netscape Composer
– Microsoft Word
– Visual Studio
04/11/2024 GAGAN THAKRAL(ABES) 2
HTML Example

04/11/2024 GAGAN THAKRAL(ABES) 3


HTML Example

04/11/2024 GAGAN THAKRAL(ABES) 4


HTML Versions

04/11/2024 GAGAN THAKRAL(ABES) 5


Some Simple Tags
• Hyperlink Tags
<a href="http://www.google.com/">Link to google
Web site</a>
• Image Tags
<img src="logo.gif" alt="logo" />
• Text formatting tags
• This text is <em>emphasized.</em>
• <br />new line<br />
• This one is
• <strong> more emphasized </strong>
04/11/2024 GAGAN THAKRAL(ABES) 6
Some Simple Tags Example
• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Simple Tags Demo</title>
• </head>
• <body>
• <a href="http://www.google.com/">This is a link </a>
• <br />
• <img src="logo.gif" alt="logo" />
• <br />
• <b><strong>Bold</strong></b> and
<i><em>italic</em></i> text.
• </body>
• </html>

04/11/2024 GAGAN THAKRAL(ABES) 7


Some Simple Tags Example

04/11/2024 GAGAN THAKRAL(ABES) 8


Tags Attributes
• Tags can have attributes
– Attributes specify properties and behavior
– Few attributes can apply to every element:
• id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the
element is hovered with the mouse.

04/11/2024 GAGAN THAKRAL(ABES) 9


Headings and Paragraphs
• Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
• Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
• Sections: div
<div style="background: skyblue;">This is a div
</div>

04/11/2024 GAGAN THAKRAL(ABES) 10


Headings and Paragraphs Example
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>
04/11/2024 GAGAN THAKRAL(ABES) 11
Headings and Paragraphs Example

04/11/2024 GAGAN THAKRAL(ABES) 12


Ordered Lists: <ol> Tag
• Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

• Attribute values for type are 1, A, a, or i

04/11/2024 GAGAN THAKRAL(ABES) 13


Unordered Lists: <ul> Tag
• Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

• Attribute values for type are:


- disk, circle or square

04/11/2024 GAGAN THAKRAL(ABES) 14


Definition List
• A definition list is a list of items, with a description
of items
• Eg.
<dl>
<dt>CS</dt>
<dd>Computer Science</dd>
<dt>IT</dt>
<dd>Information Technology</dd>
</dl>
04/11/2024 GAGAN THAKRAL(ABES) 15
Some more simple tags
• <big>
• <small>
• <q>
• <strong>
• <sub>
• <sup>
• <del>
• <pre>
04/11/2024 GAGAN THAKRAL(ABES) 16
HTML Tables
• Tables represent tabular data
– A table consists of one or several rows
– Each row has one or more columns
• Tables comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)

04/11/2024 GAGAN THAKRAL(ABES) 17


HTML Tables
• Start and end of a table
- <table> …… </table>
• Start and end of a row
- <tr> ……. </tr>
• Start and end of a cell in a row
- <td> …….. </td>

04/11/2024 GAGAN THAKRAL(ABES) 18


Simple HTML Table Example
• <html><head><title>Simple Table </title></head>
• <body>
• <table cellspacing="0" cellpadding="5">
• <tr>
• <td>Web Technology</td>
• <td><a href="lecture1.ppt">Lecture 1</a></td>
• </tr>
• <tr>
• <td>Web Technology</td>
• <td><a href="lecture2.ppt">Lecture 2</a></td>
• </tr>
• <tr>
• <td>Web Technology</td>
• <td><a href="lecture2-demos.zip">
• Lecture 2 - Demos</a></td>
• </tr>
04/11/2024
• </table></body></html> GAGAN THAKRAL(ABES) 19
Simple HTML Table Example

04/11/2024 GAGAN THAKRAL(ABES) 20


Complete HTML Tables
• Table rows split into three semantic sections:
header, body and footer
– <thead> denotes table header and contains <th>
elements, instead of <td> elements
– <tbody> denotes collection of table rows that
contains the data
– <tfoot> denotes table footer but comes BEFORE
the <tbody> tag

04/11/2024 GAGAN THAKRAL(ABES) 21


Complete HTML Table Example
• <table>
• <thead>

• <tr><th>Column 1</th><th>Column 2</th></tr>


• </thead>

• <tfoot>

• <tr><td>Footer 1</td><td>Footer 2</td></tr>


• </tfoot>

• <tbody>

• <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>


• <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
• </tbody>

• </table>
04/11/2024 GAGAN THAKRAL(ABES) 22
Complete HTML Table Example

04/11/2024 GAGAN THAKRAL(ABES) 23


Cell Spacing and Padding
• Tables have two important attributes:
• Cellspacing cellpadding
cell cell cell cell

cell cell cell cell

04/11/2024 GAGAN THAKRAL(ABES) 24


Cell Spacing and Padding
• cellspacing
- Defines the empty space between cells
• cellpadding
- Defines the empty space around the cell
content

04/11/2024 GAGAN THAKRAL(ABES) 25


Column and Row Span
• Table cells have two important attributes:
• colspan
- Defines how many columns the cell occupies
• Rowspan
- Defines how many rows the cell occupies

04/11/2024 GAGAN THAKRAL(ABES) 26


Column and Row Span Example
<table border="1">
<tr>
<td>Cell[1,1]</td>
<td colspan="2“ align="center"> Cell[2,1] </td>
</tr>
<tr>
<td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td>
</tr>
<tr>
<td>Cell[1,3]</td>
<td>Cell[2,3]</td>
</tr>
</table>
04/11/2024 GAGAN THAKRAL(ABES) 27
Column and Row Span Example

04/11/2024 GAGAN THAKRAL(ABES) 28


HTML Forms
• Forms are the primary method for gathering
data from site visitors
• Create a form block with
- <form> … </form>
• Example:
• <form name="myForm" method="post"
action="path/to/some-script.php">
• ...
• </form>

04/11/2024 GAGAN THAKRAL(ABES) 29


HTML Forms
• The “method" attribute tells how the form
data should be sent – via GET or POST
request
• The "action" attribute tells where the form
data should be sent

04/11/2024 GAGAN THAKRAL(ABES) 30


Form Fields
• Single-line text input fields:
- <input type="text" name="FirstName"
value="This is a text field" />
• Multi-line textarea fields:
- <textarea name="Comments">This is a
multi-line text field</textarea>
• Hidden fields contain data not shown to the user:
- <input type="hidden" name="Account"
value="This is a hidden text field" />
04/11/2024 GAGAN THAKRAL(ABES) 31
Form Fields
• Checkboxes:
- <input type="checkbox" name="fruit"
value="apple" />
• Radio buttons:
- <input type="radio" name="title"
value="Mr." />
• Radio buttons can be grouped, allowing only one to be
selected from a group:
- <input type="radio" name="city"
value=“Ghaziabad" />
- <input type="radio" name="city"
value=“Faridabad" />
04/11/2024 GAGAN THAKRAL(ABES) 32
Form Fields
• Dropdown menus:
<select name="gender">
<option value="Value 1“
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
• Submit button:
- <input type="submit" name="submitBtn"
value="Apply Now" />
04/11/2024 GAGAN THAKRAL(ABES) 33
Form Fields
• Reset button – brings the form to its initial state
- <input type="reset" name="resetBtn"
value="Reset the form" />
• Image button – acts like submit but image is
displayed and click coordinates are sent
- <input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />

04/11/2024 GAGAN THAKRAL(ABES) 34


Form Fields
• Password input – a text field which masks the entered text with
* signs
- <input type="password" name="pass" />
• Multiple select field – displays the list of items in multiple lines,
instead of one
- <select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
04/11/2024 GAGAN THAKRAL(ABES) 35
HTML Frames

04/11/2024 GAGAN THAKRAL(ABES) 36


HTML Frames
• Frames provide a way to show multiple HTML
documents in a single Web page
• The page can be split into separate views
(frames) horizontally and vertically
• Frames were popular in the early ages of HTML
development, but now their usage is rejected
• Frames are not supported by all user agents
(browsers, search engines, etc.)

04/11/2024 GAGAN THAKRAL(ABES) 37


HTML Frames Example
<html>
<head><title>Frames
Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>
04/11/2024 GAGAN THAKRAL(ABES) 38
HTML Frames Example
<html>
<head><title>Frames
Example</title></head>
<frameset rows=“25%,*,25%">
<frame src=“Top.html" />
<frame src=“Main.html" />
<frame src=“Bottom.html" />
</frameset>
</html>
04/11/2024 GAGAN THAKRAL(ABES) 39
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
04/11/2024 GAGAN THAKRAL(ABES) 40

You might also like