Scribd
Upload
169 views

WD PPT HTML Unit-2

1. The document provides an introduction to HTML and outlines key HTML tags and elements. It explains that a web page is a text file containing HTML code, which uses tags to provide semantic and presentation markup. 2. The document covers basic HTML tags like headings, paragraphs, colors, fonts, lists, links, images, and tables. It provides examples of how to use each tag and attributes they can include. 3. Forms are also covered, explaining that a <form> tag is used to create interfaces to collect user input on web pages. The form tag encloses elements like text boxes, buttons, and menus to gather information from users.

Uploaded by

kb181203
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
169 views

WD PPT HTML Unit-2

1. The document provides an introduction to HTML and outlines key HTML tags and elements. It explains that a web page is a text file containing HTML code, which uses tags to provide semantic and presentation markup. 2. The document covers basic HTML tags like headings, paragraphs, colors, fonts, lists, links, images, and tables. It provides examples of how to use each tag and attributes they can include. 3. Forms are also covered, explaining that a <form> tag is used to create interfaces to collect user input on web pages. The form tag encloses elements like text boxes, buttons, and menus to gather information from users.

Uploaded by

kb181203
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

3151606

Web Development

Unit-2
HTML
Outline
1. Introduction to HTML – List
• What is a Web Page? – Anchor
• My First HTML Page – Image
• HTML Code Formatting 3. HTML Tables
2. Basic HTML Tags 4. HTML Forms
• Heading 5. XHTML
• Paragraph 6. Introduction to HTML 5
• Color
• Font
What is a Web Page?
• Web page is text file containing HTML
• HTML – Hyper Text Markup Language
– A notation for describing
• document structure (semantic markup)
• formatting (presentation markup)
• The markup tags provide information about
the page content structure
Creating HTML Pages
• 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 (WYSIWYG Editors):
– Microsoft FrontPage
– Macromedia Dreamweaver
– Netscape Composer
– Visual Studio
First HTML Page
test.html
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML Structure
• “elements” and “tags” are used in HTML
– Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>

• Tags have attributes:


<img src="logo.jpg" alt="logo" />
• HTML describes structure using two main
sections: <head> and <body>
HTML Code Formatting
• The HTML source code should be formatted to
increase readability and facilitate debugging.
– Every block element should start on a new line.
– Every nested (block) element should be indented.
– Browsers ignore multiple whitespaces in the page source,
so formatting is harmless.
• For performance reasons, formatting can be
sacrificed
First HTML Page: Tags

<!DOCTYPE HTML>
Opening tag
<html>
<head>
<title>My First HTML Page</title>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>
An HTML element consists of an opening tag, a closing tag and the content inside.
First HTML Page: Header

HTML header
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page: Body

<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
First HTML Page
test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Basic HTML Tags
1. Headings
2. Paragraph
3. Colors
4. Fonts
5. List
6. Anchor Tag
7. Image
8. Table
9. Form
1) Headings
 Headings are important because search engines use
the headings to index the structure and content of
your web pages.

<h1> text </h1> -- largest of the six


<h2> text </h2>
<h3> text </h3>
<h4> text </h4>
<h5> text </h5>
<h6> text </h6> -- smallest of the six

align="position" --left (default), center or right


2) <p> paragraph
 <p> defines a paragraph
 Add align="position" (left, center, right)
 Multiple <p>'s do not create blank lines
 Use <br> for blank line
 Fully-specified text uses <p> and </p>, but </p> is
optional
3) Colors
 Values for bgcolor and color
• many are predefined (red, blue, green, ...)
• all colors can be specified as a six character hexadecimal
value: #RRGGBB
• #FF0000 – red
• #888888 – gray
• #00FF00 –green
• #000000 – black
4) Fonts
 The <font> tag specifies the font face, font size, and
color of text.
 The <font> tag is not supported in HTML5.

<font color="red" size="2" face="Times Roman">


This is the text of line one </font>

<font color="green" size="4" face="Arial">


Line two contains this text </font>

<font color="#FF9933" size="6" face="Courier“>


The third line has this additional text </font>
5) List
Ordered List
1. Block-A a) Block-A A. Block-A i. Block-A I. Block-A

2. Block-B b) Block-B B. Block-B ii. Block-B II. Block-B


c) Block-C C. Block-C iii. Block-C III. Block-C
3. Block-C
d) Block-D D. Block-D iv. Block-D IV. Block-D
4. Block-D

Unordered o Block-A  Block-A


List o Block-B  Block-B
– Block-A o Block-C  Block-C
– Block-B o Block-D  Block-D
– Block-C
– Block-D
5.1) Ordered List
<ol>
<li> Item one </li>
Types:
<li> Item two </li>
<ol type="I" > Type = 1 (default)
<li> Sublist item one </li> Type = a
<li> Sublist item two </li> Type = A
<ol type="i"> Type = I
<li> Sub-sub list item one </li> Type = i
<li> Sub-sub list item two </li>
</ol> Output
</ol>
</ol>
5.2) Unordered List
<ul>
<li> One </li>
Types:
<li> Two </li>
<ul type="circle"> Type = disc (default)
<li> Three </li> Type = circle
<li> Four </li> Type = square
<ul type="square">
<li> Five </li>
<li> Six </li>
</ul> Output
</ul>
</ul>
6) <a> Anchor Tag (Hyperlinks)
 The <a> tag defines a hyperlink, which is used to link from one
page to another.

Link to an absolute URL:


If you get spam, contact <a href="http://www.microsoft.com">
Microsoft </a> to report the problem.

Link to a relative URL:


See these <a href=“./index.php"> references </a>
concerning our fine products.

Link to a section within a URL:


<a href=“#reference">
Reference Section. </a>
7) Images
 Syntax :
<img src=“PathToImage”/>
 src is required
 alt will specify the text to display if the Image not found
 width, height may be in units of pixels or percentage of page
or frame
• width="357"
• height="50%“
Images (cont.)
<img src="dolphin.jpg" align="left" width="150" height="150"
alt="dolphin jump!">

align=position Image/Text Placement

Left Image on left edge; text flows to right of image

Right Image on right edge; text flows to left

Top Image is left; words align with top of image

Bottom Image is left; words align with bottom of image

Middle Words align with middle of image


Image (cont.) => align=“bottom”
Image (cont.) => align=“right”
8) Table
<table> table tag
<caption> optional table title
<table border=1> <tr> table row
<caption>Table Caption</caption> <th> table column header
<tr> <td> table data element
<th>Heading1</th>
<th>Heading2</th>
</tr>
<tr>
<td>Row1 Col1 Data</td>
<td>Row1 Col2 Data</td>
</tr>
<tr>
<td>Row2 Col1 Data</td>
<td>Row2 Col2 Data</td>
</tr>
</table>
Table Element Attributes
 align=position -- left, center, right for table
 border=number -- width in pixels of border (default 0)
 cellspacing=number -- spacing in pixels between cells, default
about 3
 cellpadding=number -- space in pixels between cell border and
table element, default about 1
 width=number[%]-- width in pixels or percentage of page/frame
width
Table Row <tr> Attributes
Valid for the table row:
align -- left, center, right
valign -- top, middle, bottom
bgcolor -- background color

<table align="center" width="300" height="200">


<tr align="left" valign="top" bgcolor="red">
<td>One</td>
<td>Two</td>
</tr>
<tr align="center" valign="middle" bgcolor="lightblue">
<td>Three</td>
<td>Four</td>
</tr>
<tr align="right" valign="bottom" bgcolor="yellow">
<td>Five</td>
<td>Six</td>
</tr>
</table>
Irregular Table
Valid for the table cell:
colspan b c
- how many columns this cell occupies
a
rowspan
- how many rows this cell occupies d

<table align="center" width="300" height="200" border="1">


<tr>
<td colspan="1" rowspan="2">a</td>
<td colspan="1" rowspan="1">b</td>
<td colspan="1" rowspan="1" >c</td>
</tr>
<tr>
<td colspan=“2" rowspan="1">d</td>
</tr>
</table>
9) HTML Form
 <form> is just another kind of HTML tag
 HTML forms are used to create GUIs on Web pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server
 A form is an area that can contain form elements
• The syntax is: <form parameters> ...form elements... </form>
• Form elements include: buttons, checkboxes, text fields, radio buttons,
drop-down menus, etc
• Other kinds of HTML tags can be mixed in with the form elements
• A form usually contains a Submit button to send the information in
the form elements to the server
• The form’s parameters tell browser how to send the information to
the server (there are two different ways it could be sent)
The <form> Tag
 The <form arguments> ... </form> tag encloses form
elements (and probably other HTML as well)
 The arguments to form tell what to do with the user input
• action="url" (required)
• Specifies where to send the data when the Submit button is clicked
• method="get" (default)
• Form data is sent as a URL with ?form_data info appended to the end
• Can be used only if data is all ASCII and not more than 100 characters
• method="post"
• Form data is sent in the body of the URL request
• Cannot be bookmarked by most browsers
• target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
Input tags
• Text field
– Example: <input type=“text” name=“inputname”/>
• Password field
– Example: <input type=“password” name=“inputname”/>
• Radio buttons
– Example:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
• Check boxes
– Example:
<input type="checkbox" name="Roll1"> Roll No 1 <br/>
<input type="checkbox" name="Roll2"> Roll No 2 <br/>
<input type="checkbox" name="Roll3"> Roll No 3 <br/>
Input tags (cont.)
• Dropdown list
– <select> tag is used to create a drop-down list in HTML.
– <option> tags inside the <select> tag define the available options in
the list.
– Example:
<select>
<option value=“1”>Rajkot</option>
<option value=“2”>Ahemdabad</option>
<option value=“3”>Surat</option>
</select>
– Example (multiple select):
<select multiple="multiple">
<option value=“1”>Rajkot</option>
<option value=“2”>Ahemdabad</option>
<option value=“3”>Surat</option>
</select>
Input tags (cont.)
• Text area
– <textarea> tag defines a multi-line text
input control.
– Example :
<textarea rows=“8” cols=“30”>
This is text area with multiple line.
</textarea>
• Submit Button
– Submit button is used to submit the data
to the form action url.
• Example :
<input type=“submit” value=“Add City”>
Meta Tag Attributes
Attribute Value Description
Charset Character_set Specifies the character encoding for the HTML document

author
description
name keywords Specifies a name for the metadata
robots
expires

content-type
Provides an HTTP header for the information/value of the
http-equiv default-style
content attribute
refresh
Gives the value associated with the http-equiv or name
content text
attribute
format/URI Not supported in HTML5. Specifies a scheme to be used to
scheme
USA/Europe interpret the value of the content attribute
Character Entities
• Character entities are used to display reserved characters in HTML.
• Characters that are not present on your keyboard can also be
replaced by entities.
Character Character Entity Description
&nbsp; Space
& &amp; Ampersand
“ &quot; Quote
< &lt; Less than
> &gt; Greater than
© &copy; Copyright
® &reg; Registered
™ &trade; Trademark
£ &pound; Pound
¢ &cent; Cent
÷ &divide; Divide
35
Keyboard and How Browser Works ?
Mouse
Output
To
HTML Interpreter Display
Controller Display
Plug-Ins/ Drivers
Other Interpreter
Response
from web
server
Other
Clients Network
HTTP Interface
Client Communicati
on with web
server
Introduction to HTML 5
• The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
• The character encoding (charset) declaration is also very
simple:
<meta charset="UTF-8">

• New HTML5 Elements:


– New semantic elements like <header>, <footer>, <article>, and
<section>.
– New form control attributes like number, date, time, calendar,
and range.
– New graphic elements: <svg> and <canvas>.
– New multimedia elements: <audio> and <video>.
– Some Elements Removed in HTML5
Introduction to HTML 5 (cont.)
• The following HTML4 elements have been
removed
HTML 4
from HTML5:
HTML 5 HTML 4 HTML 5
<acronym> <abbr> <strike> CSS
<applet> <object> <tt> CSS
<center> CSS <basefont> CSS
<dir> <ul> <big> CSS
<font> CSS

You might also like