0% found this document useful (0 votes)
14 views35 pagesIntroduction To HTML Chapter-1
The document provides a comprehensive overview of HTML, including its basic structure, key tags, and differences between HTML4 and HTML5. It also discusses HTTP vs FTP, website design considerations, cross-browser compatibility issues, and various HTML elements like forms, frames, and lists. Additionally, it outlines the differences between GET and POST methods in web forms.
Uploaded by
jignesh.234026101Copyright
© © 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
0% found this document useful (0 votes)
14 views35 pagesIntroduction To HTML Chapter-1
The document provides a comprehensive overview of HTML, including its basic structure, key tags, and differences between HTML4 and HTML5. It also discusses HTTP vs FTP, website design considerations, cross-browser compatibility issues, and various HTML elements like forms, frames, and lists. Additionally, it outlines the differences between GET and POST methods in web forms.
Uploaded by
jignesh.234026101Copyright
© © 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
Internet Programming
Introduction to HTML
1. <!Doctype html> --- It specifies HTML version 5. It tells to the
parser that use HTML5 encoding.
2. <html> --- It specifies the language use is HTML.
3. <head> --- It describe the head section of the page, which include
title, link, meta, script and style.
4. <link> --- using link the external file to a web page, which include
favicon, stylesheets etc. (favicon is a website icon, which shows in
webpage tab. )
5. <title> --- It specifies the title to be displayed in the browser title
bar or tab.
6. <meta> --- It describes metadata, which
contents information about your application like
keywords, descriptions, charset, author name
etc.
7. <script> --- It is used to import and configure
scripts into a webpage like JavaScript, jQuery
etc.
8. <style> --- It is used to import and configure
styles into a webpage.
Basic structure of HTML
• Basic structure of a Web Page is
• <HTML>
• <Head>
• <title> </title>
• </head>
• <Body>…..</body>
• </html>
HTML4 HTML5
It is an extension of html4. It is the
It is an extension of 4th Version. 5th version of HTML.
HTML, using vector graphics was only HTML5 supports SVG (Scalable Vector
possible by using different technologies Graphics), canvas, and other virtual vector
like Flash, VML (Vector Markup graphics.
Language)
In html4 these supported provided by the Multimedia support provided by html5.
third party like Silverlight and flash
These element are not support HTML4 HTML5 supports new kinds of form
controls, including dates and
times, email, number, range, tel, url, searc
h, etc
HTML4 are used for <div id > and <div HTML5 are used
class> Header,footer,nav,article,section
DIFFERENCE BETWEEN HTTP VS FTP
HTTP FTP
HTTP stands for Hyper Text FTP stands for File Transfer
Transfer Protocol Protocol
HTTP is used to Transfer files FTP used to transfer file only
between Web server and Web computers directly .
client
HTTP port no is 80 FTP port No is 20 data connection
& 21 control connection.
HTTP is stateless protocol FTP is maintain state.
No of TCP connection 1 No of TCP connection is 2
Web site Design issues
Purpose of Website
• Why are your building this site?
• The first step of website planning should be deciding on the purpose of the
website.
• Determine what it is that you wish to accomplish with the website.
Determine Target Audience
• What is your target audience?
• Ask yourself, "Who is going to be looking at my site”?
• "What technologies will your visitors have”?
• When planning a website you need to assess what the target audience will be.
• what technologies their systems will have and what their computer experience
before you can decide on your website technologies
Website Technical Considerations
• Ask yourself, "What technologies do I need?" The website technologies you will
require will depend on the type of website you are building and what type of
audience you have decided to target and accommodate. Have your list of website
Website Hosting Costs
• Website hosting costs influenced by website
planning.
Your hosting costs are influenced by all of the above.
Website Budget
• Ask yourself, "What is my budget?" When planning a
website, budget can be a determining factor as to
what features the website will
Various Cross Browser Compatibility Issues
1. Lack of Testing on Real Devices
2. HTML/ CSS Validation
3. Vendor-specific functions
4. DOCTYPE Error
5. Outdated Browser Detection
6. Missing CSS Resets
7. Layout Compatibility
BASIC TAGS
<HTML> - Begins your HTML document.
<HEAD> - Contains information about the page such as the TITLE, META
tags for proper Search Engine indexing, STYLE tags, which determine the
page layout, and JavaScript coding for special effects.
<TITLE> - To insert the title for the web page. This will be visible in the title
bar of the viewers’ browser.
</TITLE> - Closes the HTML <TITLE> tag.
</HEAD> - Closes the HTML <HEAD> tag.
<BODY> - Everything that is written in this tag is displayed on the web
page
</BODY> - Closes theHTML <BODY> tag.
</HTML> - Closes the <HTML> tag.
TEXT TAGS
• <pre></pre> Creates preformatted text
• <h1> </h1> Creates the largest headline
• <h6> </h6> Creates the smallest headline
• <b> </b> Creates bold text
• <i> </i> Creates italic text
• <tt> </tt> Creates teletype, or typewriter-style text
• <cite> </cite> Creates a citation, usually italic
• <em> </em> Emphasizes a word (with italic or bold)
• <strong></strong> Emphasizes a word (with italic or bold)
• <sub></sub> For including subscript in the page (eg H<sub>2</sub>O will
produce output as H2O)
• <sup></sup> For including superscript in the page (eg x<sup>2</sup> will
produce output as x2)
• <font size="3"></font> Sets size of font, from 1 to 7
• <font color="green"></font> Sets font color, using name or hex value
• <font face=”times new roman”></font> Sets font type
BODY ATTRIBUTES
Body Element Attributes -
1. bgcolor -- It sets background color in the page body
section.
Syntax-
<body bgcolor="red"> </body>
2. background -- It sets background images or any graphics.
Syntax-
<body background="[Link]"></body>
3. color -- It sets color for text in body.
Syntax-
LINKS
HyperLink -
A hyperlink is clickable text, picture or graphic that links to any
named location with in the same document or any another
document.
<a></a> Use to Insert a link in the web page. It is
known as anchor tag
<a href="URL"></a> Creates a hyperlink.
<a href="[Link] Creates a mailto link
<a name="text123"></a> Creates a target location
within a document
<a href="#NAME"></a> Links to that target text123
location from elsewhere in the document
<a href=”URL” target=”_blank”> opens new page in a blank
FORMATTING
<p>…</p> Creates a new paragraph
<p align="left"> Aligns a paragraph to the left (default), right, or center.
1. <br> --- for the line break;
2.   (Non-breakable space) --- for word or character space;
Text Formatting in HTML --
The text Formatting include changing of font, font style and font effects
to control character appearance.
<font> -- changes the character appearance, which includes font-face,
size and color.
<font> Attributes --
size : specifies the font size in levels from 1(min) to 7(max).
face : specifies the font family name like, Arial, Times New Roman etc.
color : sets a color for text.
• <marquee>…</marquee> To insert a scrolling text in
the web page (by default the text scrolls from right to
left)
• <marquee direction =right>…</marquee> the text
will scroll from right direction
• <marquee scrolldelay=200>…</marquee> this
attribute is used to set the speed of the scrolling
(also we can use scrollamount)
• <marquee bgcolor=”red”>…</marquee> to
set background color for the marquee text.
<h1 align="center">Welcome to HTML </h1>
<h2 align="left"> Welcome to HTML </h2>
<h3 align="right"> Welcome to HTML </h3>
<h4 align="right"> Welcome to HTML </h4>
<h5 align="center"> Welcome to HTML </h5>
<h6> Welcome to HTML </h6>
List in HTML
<ol></ol> Creates a ordered list
<ul> </ul> Create a inordered list
<li></li> Precedes each list item, and adds a number
or symbol depending upon the type of list selected
IMAGE TAG
• <img> -- Allocates a location for image in
webpage
• Image Attributes --
• src -- Specifies name and path of image to be
displayed.
• width -- Sets image width.
• height -- Sets image height.
• border -- Sets a border for image.
• align -- Align the image left or right.
• alt -- Alternative text to be displayed when
images fails to load.
TABLE TAGS
<table></table> Creates a table .
<tr></tr> Sets off each row in a table .
<td></td> Sets off each cell in a row or table data.
<th></th> Sets off the table header (a normal cell with
bold, centered text) .
Attributes --- Description
border -- Sets border for table
align -- Align table, tr and td to left, center or right
valign -- Align cell content vertically top, center or bottom
width -- Sets width for table
height -- Sets height for table and table row.
bgcolor -- Sets background color for table, tr and td.
background -- Sets background image for table, tr, td.
cellpadding -- Sets spacing between text and cell border
cellspacing -- Sets spacing between cells
colspan -- Merges column into single cell
rowspan -- Merges rows into single cell
HTML Forms
• Forms in HTML --
• A form is a collection of controls that allow
interaction with the user. Every web
application allows users interaction, by using
web Form.
• A typical web form contents controls like
Button, TextBox, CheckBox, RadioButton,
ListBox, ComboBox etc-
<Form></form> Creates all forms
<Select></select> Creates a Drop down menu.
<select multiple name="NAME" size=?></select> Creates a scrolling menu
where we can select multiple choices together.
Size sets the number of menu items visible before you need to scroll.
<Option> Sets off each menu item
<textarea name="NAME" cols=”40” rows=”8”></textarea name> Creates a
text box area. Columns set the width; rows set the height.
<input type="checkbox" name="NAME"> Creates a checkbox. Text follows
tag.
<input type="radio" name="NAME" value="x"> Creates a radio button. Text
follows tag
The <form> Tag -
It is used to encapsulate all the controls in a
webpage and manage the page on various
request types.
Attributes --
1. Method - Specifies the request header GET,
POST, PUT, DELETE etc-
2. Action - Specifies the target URL to navigate
when form is submitted.
Attributes ---- Description
----------------------------------------------------------------------
1. name --- Specifies the reference name for a textbox.
2. value --- Specifies the value present in textbox.
3. size --- Sets width for textbox.
4. maxlength --- Specifies the maximum number of characters
allowed.
5. readonly --- Disables editing hence readonly.
6. placeholder --- Sets a watermark text for textbox.
7. autofocus --- Sets focus on textbox automatically when page
loaded.
8. required --- Specifies that textbox must have a value and can't be
null.
9. pattern --- Validates the inputs value by matching it against
a pattern. Patterns are build by using meta character and
quantifiers.
10. list --- Attaches a datalist to textbox.
<input type=”text” name="ram" size=20>
Creates a one-line textbox area. Size sets length, in
characters.
<input type="submit" value="NAME"> Creates
a Submit button
<input type="button">Submit</input> Creates
an actual button that is clicked
<input type="password"> Creates a field to enter
password the information will be appeared in ‘*’
<input type="reset"> Creates a Reset button
Difference Between Get and Post Method
GET METHOD POST METHOD
1) Get, only limited amount of Post Method, large amount of
data can be sent because data is data can be sent because data is
sent in header. sent in body.
2) Get is not secured because Post Method is secured because
data is exposed in URL bar. data is not exposed in URL bar.
3) Get Method can be Post Method cannot be
bookmarked. bookmarked.
4) Get Method is the length of URL will Post Method is there is no restriction in
limited. sending the length of data.
5) Get Method is more Post Method is less efficient and
efficient and used more than used less than get.
Post.
Frames
• Frames in HTML –
• Frames are used to split the browser window into horizontal
and vertical parts so that every frame represent a display
multiple pages in a single browser.
• The following elements are used to create and manipulate
frames.
• Element --- Description
• <frameSet> --- It is a collection of frames organized into rows
and columns.
• <frame> --- It represents individual frame, which can display
any document as source.
Syntax --
<frameSet rows/cols="percentile">
<frame name="frame1" src="page"></frame>
</frameSet>
• Frame is used for divide web page into a number of regions
• Each region has different URL and can load information in
individual regions independent of each other.
• A frame does not have a body tag because frames only load
different webpages onto a web page but there is no content
of its own.
• Note - A html document with frame can not use body
elements. Hence you have to display any content using
another HTML document.
Advantages of Frame
The copyright logos, notices of firms can be
placed in a fixed frame.
We can have web pages with 2 frames where
one frame has the table of content and on
clicking the content the result displays in the
second frame i.e. they are used for navigation.
Disadvantages of Frames
The web developer must keep track of more
HTML documents.
It is difficult to print the entire page.
<frameset></frameset> Replaces the <body> tag in a frames
document; can also be nested in other framesets i.e frameset
within another frameset.
<frameset rows="value,value"> Defines the rows within a
frameset, using number in pixels, or fraction, or percentage of
width
<frameset cols="value,value"> Defines the columns within a
frameset, using number in pixels, or fraction, or percentage of
width
<frame> Defines a single frame — or region — within a frameset
<noframes></noframes> Defines what will appear on browsers
that don't support frames.
Frames Attributes
<frame src="URL"> Specifies which HTML document should be displayed
<frame name="name"> Names the frame, or region, so it may be
targeted by other frames
<frame marginwidth="value"> Defines the left and right margins for the
frame; must be equal to or greater than 1
<frame marginheight="value"> Defines the top and bottom margins for
the frame; must be equal to or greater than 1
<frame scrolling="value"> Sets whether the frame has a scrollbar; value
may equal "yes," "no," or "auto." The default, as in ordinary documents,
is auto.
<frame noresize="noresize"> Prevents the user from resizing a frame ie.
No scroll bar will appear
<!DOCTYPE html>
<html>
<head> <title> MyWebsite </title>
</head>
<frameset rows="15%, 70%, 15%" noresize>
<frame src="[Link]" name="framehead">
</frame>
<frame src="[Link]" name="framebody">
</frame>
<frame src="[Link]" name="framefooter">
</frame>
</frameset>
</html>
[Link](Source)
<!DOCTYPE html>
<html>
<head> <title> MyWebsite </title>
</head>
<body>
<header>
<nav>
<menu>
<a href="[Link]" target="framebody"> HOME </a>
<a href="[Link]" target="framebody"> ABOUT </a>
<a href="[Link]" target="framebody"> CONTACT </a>
</menu>
</nav>
</header>
</body>
</html>
[Link](Source)
<!DOCTYPE html>
<html>
<head> <title> MyWebsite </title>
</head>
<body>
<h2 align="center"> © Copyright 2016 </h2>
</body>
</html>
Add any content into the pages-
"[Link]"
"[Link]"
"[Link]"
