Presented by: Ruby Jindal Sumit Dhiman Sonit Chawda MBA-IB
What is HTML?
HTML stands for Hyper Text Markup Language . It is used to design and develop Web Pages. Tim Berners-Lee invented the World Wide Web and HTML HTML is
A Simple mark up language (NOT a programming language) Browser/Platform Independent (plain ASCII text format) Not Case Sensitive HTML is Interpreted by browser (NOT compiled). A medium for User Interface (GUI)
HTML-not a programming language
Markup Language is used for adding extra features, like structure or presentation of the text, objects etc. Programming language is used for creating programs. HTML is interpreted by the browser, not like other programming languages.. E.g:- in a car,
markup language would be the tools used to create the body and design programming language - the tools used to build an engine
HTML tags and attributes
The HTML instructions are called tags, and look like <TAG> .. Text here.. </TAG> There are two types of markup tags: Container tags Tags that have starting as well as ending part. <TITLE>Title of the Web Page </TITLE> Empty tags : Tags that do not have the closing part. <BR> , <HR>
(HTML instructions + text to which the instructions apply)= HTML elements
An attribute is an additional feature you can use to configure the element Element Attributes are optional.
e.g. <H1 ALIGN = CENTER> This is a heading name</H1> Attribute Start Tag End Tag
4
Which of the following statements are TRUE about HTML
A
B C D
HTML is compiled by browser
FALSE
HTML is Case Sensitive
FALSE
used to design and develop Web Pages
TRUE
The HTML instructions are called Tags
TRUE
Structure of HTML Document
<HTML>
<HEAD> <!-- Head Section --> <TITLE>Title of the Web Page </TITLE> </HEAD> <BODY> <!-- Body Section --> <!-- Contents on Web Page <H1> Contents </H1> </BODY>
-->
</HTML> An HTML file can be created by using a simple text editor viz notepad, textpad, Eclipse IDE editor HTML file must have an extension htm or html.
Main HTML Elements:-
DOCTYPE:Document Type Declaration The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag. It is an instruction to the web browser about what version of HTML the page is written in. This tag does not have an end tag. The <!DOCTYPE> declaration is NOT case sensitive.
Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
HTML Document - Head
Enclosed in <HEAD> </HEAD> tag Tags that can go in the document head
a. <TITLE> Indicates the title of the document that is used as the window caption b.<STYLE> To Include CSS (Cascading Style Sheet) c.<LINK> specifies the relationship between the current document and other documents.
<head><link rel="stylesheet" type="text/css" href="[Link]"></head>
d.<SCRIPT> specifies the client side script name which used to perform the client side validation
Structure of HTML Document
<!DOCTYPE html> <html> <head> <title>Use of TITLE tag </title> </head> </html>
HTML Document Body Enclosed in <BODY> </BODY> tag. Some important attributes of the BODY tag:
BACKGROUND :- Specifies an image to be tiled as background. BACKGROUND = url of the image <body background=[Link]> BGCOLOR :-Specifies the background color BGCOLOR = color / #rrggbb <body bgcolor=yellow> TEXT :- Specifies the color of text in the page TEXT = color / #rrggbb <body text=#FF0000> LINK :-Specifies the link color. LINK = color / #rrggbb ALINK =Specifies the active link color ALINK = color / #rrggbb VLINK:-Specifies the visited link color. VLINK = color / #rrggbb
Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).
10
HTML Document Body
TEXT
<!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <head> <title>BODY tags </title> <title>BODY tags </title> </head> </head> <!DOCTYPE html> <body text="#FF0000"> background="[Link]"> <html><body <h1>Welcome to UBS</h1> <h1>Welcome to UBS</h1> <body> <head> <body> <title>BODY tags </title> </html> </html> </head> <body bgcolor="green"> <h1>Welcome to UBS</h1> <body> </html>
BACKGROUND
BGCOLOR
11
Formatting the web page
<FONT> tag Allows you to specify the font face and font size.
Some common attributes are
FACE specifies the font type. Defaults fonts like Arial, Times New Roman, and Courier are available in all Systems. SIZE specifies the font size. Value can range from 1 to 7. The default is 3. SIZE can be set as a relative value using + or . COLOR- The color of a font can be specified using a hexadecimal number value six characters long.
<FONT FACE=Arial SIZE=7 COLOR=#FF0000> The Written Word </FONT>
<FONT FACE=Courier SIZE=+2 COLOR=#00FF00> The Written Word </FONT>
12
Formatting the web page
<!DOCTYPE html> <html> <head> <title>BODY tags </title> </head> <body bgcolor="green" text="blue"> <h1>Welcome to UBS</h1> <font face="calibri"size="5" color="yellow"> This is a lecture of Business Computing<BR> </font> HTML Presentation <body> </html>
FACE = calibri SIZE = 5 COLOR = yellow
13
Text Formatting tags
Paragraphs
<P> </P> - used to create paragraphs.
Line Breaks
<BR> - to insert blank lines in the document. e.g. : <P>This <BR> is a para<BR>graph with line breaks</P>
Horizontal Lines
<HR> - used to draw a horizontal line across the web page. It is useful to separate different sections of a single page. Attributes:- Size,Width,Align e.g: <HR ALIGN = right WIDTH = 50%>
14
Text Formatting tags
Header Tags
HTML has six level of headings. Displayed in larger and bolder fonts. Different level heading tags
<H1> Heading 1 </H1> <H2> Heading 2 </H2> <H3> Heading 3 </H3> <H4> Heading 4 </H4> <H5> Heading 5 </H5> <H6> Heading 6 </H6> H6.
(This being the largest)
The font size of the heading will go on decreasing from H1 to
15
Text Formatting tags
Tag Description <B>.</B> - Bold <I></I> - Italic <U>.</U> - Underline <STRIKE></STRIKE> - Strikethrough <TT>.</TT> - Typewriter (monospaced) <CENTER></CENTER> - Centers the text on the screen. <SUB>.</SUB> - Subscript <SUP>.</SUP> - Superscript <BIG>.</BIG> - Bigger font (one font size bigger) <SMALL>.</SMALL> - Small font (one font size smaller)
16
Text Formatting tags <HTML> <HEAD> <TITLE> HTML Presentation </TITLE> </HEAD> <BODY BGCOLOR="00FFFF" TEXT =FF00FF> <H1 ALIGN ="center"> Physical tags </H1> <HR> This is <B> bold </B> <BR> 9:40 PM 10/7/2012This is <I> Italic </I> <BR> This is <U> underline</U> <BR> This is <TT> Monospaced</TT> <BR> This is <STRIKE> Strike-through</STRIKE> <BR> This is <S>Strike-through</S> <BR> <HR color ="black"> <H3 ALIGN ="Right">Some more physical tags</H3> This is <BIG> Big</BIG> <BR> This is even<BIG><BIG> Bigger </BIG></BIG> <BR> This is <SMALL> small</SMALL> <BR> This is even<SMALL><SMALL> smaller</SMALL></SMALL> <BR> This is <SUP> superscript</SUP> <BR> This is <SUB> subscript</SUB> <BR> </BODY> </HTML>
17
Which of the following statements are TRUE about HTML
A B C D
In <FONT> tag FACE attribute specifies the font type
TRUE
<HR> tag is used to specify line breaks
FALSE
<P> tag is used to create paragraphs
TRUE
<H1> is the biggest heading element
TRUE
18
Lists
Lists actually require two tags: the list tag itself and the tag or tags used to define individual list items
Unordered List Ordered List Definition List
19
Lists-UnOrdered Lists
An ordered list starts with the <ul> tag. Each list item starts with the <li> tag. TYPE attributes specifies the type of bullet TYPE = disc | circle | square
<font size="5" color="blue"> <UL TYPE = cirlce"> <LI>Savings <LI>Current <LI>Transactional </UL> </font>
20
Lists-Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. TYPE attribute controls the numbering scheme TYPE = 1 | A | a | I | i
<font size="5 color="blue"> <OL TYPE = "A"> <LI>Savings <LI>Current <LI>Transactional </OL> </font>
21
Lists- Definition Lists
A definition list is a list of items, with a description of each item. Definition list are enclosed with in <dl> and </dl> <dt> Definition term. <dd> Data definition.
<font size="5" color="blue"> <dl> <dt>Savings</dt> <dd>Only limited number of transactions per day</dd> <dd>$20 minimum balance</dd> <dt>Current</dt> <dd>Overdraft facility</dd> <dd>0 minimum balance</dd> </dl> </font>
22
Linking Pages
A link is a unidirectional pointer from a source document that contains the link to some destination <A></A> Anchor tag A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. Link text with other documents by using the href attribute:-
1. HREF (Hypertext Reference) 2. NAME (bookmarks inside the page) 3. TITLE 4. TARGET (Define where the linked document will be opened) e.g.: <A href=[Link]> Click here </A>
Create a link to the "Useful Tips Section" inside the same document: create a link to the "Useful Tips Section" from another page:
Link text with same documents, by using the name attribute
<BODY link=blue alink=green vlink=red> <a name="tips">Useful Tips Section</a> 23 <a href=[Link] Useful Tips Section</a>
Linking Pages Contd
<!DOCTYPE html> <html> <body> <a href="[Link] target="_blank">Com</a> <p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p> </body> </html>
24
Which of the following statements are TRUE about HTML
A B C
<A> tag used to create hyperlinks
TRUE
<link> tag used to create hyperlinks
FALSE
<OL> tag used to create bulleted list
FALSE
<UL> tag used to create numbered list
FALSE
25
Tables
Displays data in a tabular format A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). <TABLE> .. </TABLE> : define a table Some attributes
ALIGN = LEFT | RIGHT | CENTER BORDER = n (Number of Pixels ) BGCOLOR = color | #rrggbb
CELLSPACING = n
(Number of Pixels ) CELLPADDING = n (Number of Pixels ) WIDTH= % Of Parent | n (pixels)
26
Table structure
<TABLE BORDER=1> <!-- start of table definition --> <TR> <!-- start of header row definition --> <TH> first header cell contents </TH> <TH> last header cell contents </TH> </TR> <!-- end of header row definition --> <TR> <!-- start of first row definition --> <TD> first row, first cell contents </TD> <TD> first row, last cell contents </TD> </TR> <!-- end of first row definition --> <TR> <!-- start of last row definition --> <TD> last row, first cell contents </TD> <TD> last row, last cell contents </TD> </TR> <!-- end of last row definition > </TABLE> <!-- end of table definition -->
27
Creating tables 1
<h2> Account details</h2> <TABLE BORDER="1" CELLSPACING="10" CELLPADDING="1" WIDTH=100%"> <TR> <TH>AccountNo</TH><TH>Customer Name</TH> </TR> <TR> <TD>1001</TD><TD>Jack</TD> </TR> <TR> <TD>1002</TD><TD>Tom</TD> </TR> </TABLE>
28
Creating tables 2
<TABLE BORDER=2 BGCOLOR="#B45F04"=> <TR ALIGN="CENTER"> <TD COLSPAN=3>MINI STATEMENT</TD></TR> <TR> <TH>Account ID</TH> <TH>Date</TH> <TH>Amount</TH> </TR> <TR> <TD>54576989</TD> <TD>12-Jan-2009</TD> <TD>3000.00</TD> </TR> <TR> <TD>56783297</TD> <TD>27-Feb-2009</TD> <TD>500.00</TD> </TR> </TABLE>
29
Creating tables 3
<!DOCTYPE html> <html> <body> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
30
Forms
Used for creating Graphical User Interface (GUI) In a web application client interact through GUI.
It is enclosed between the <form> and </form> tags.
<form> . input elements . </form>
Forms become powerful when connected to a server
application
A single HTML page can have multiple forms.
31
Form elements
<INPUT> tag is used to add elements to the form
NAME = controlname TYPE = text / password / checkbox / radio/ submit / reset /
button / hidden / file
VALUE MAXLENGTH SIZE All elements should be named by setting a unique value to the name
attribute. The value attribute is used to set a default value for the control.
32
Forms
<FORM NAME=form1 ACTION="[Link]" METHOD=GET> <! NAME is used for future manipulation of data by scripting language ACTION indicates a program on the server that will be executed when this form is submitted. Mostly it will be an ASP or a JSP script. METHOD indicates the way the form is submitted to the server popular options are GET/POST --> (form elements go here) </FORM>
33
Text Box/Password
A text field can be added to the form by typing
<INPUT TYPE=TEXT" NAME=txtcompany" VALUE=XYZ
SIZE="10" MAXLENGTH="15">
A password field can be added to the form by typing
<INPUT TYPE=PASSWORD NAME=pwdLogin SIZE=50
MAXLENGTH=12> when the text is entered, stars appear instead of the typed letters
Attributes are
VALUE is the default value loaded SIZE sets the size of the field in no. of characters
MAXLENGTH specifies max number of characters that can be entered
to the control
34
Radio Buttons:
Radio buttons with the same NAME are grouped together <input type="radio> Radio buttons are used for Single selection Only one button can be selected in a group VALUE data to be sent to the server CHECKED will preselect the button
<INPUT TYPE="radio" NAME="output" VALUE="screen checked> Screen <INPUT TYPE="radio" NAME="output" VALUE="printer">Printer
35
The Input Element..contd!!!!
[Link]: <input type="checkbox"> Used for multiple selection <INPUT TYPE="checkbox" NAME=contact" VALUE=email CHECKED>Notify by email VALUE indicates the value to be transmitted to the server
e.g: contact=email will be sent to the server
CHECKED sets the checkbox to be selected by default Here Notify by email is visible to the user and the value email is not visible to the user
36
List Box ( Drop-down box)
SIZE number of lines to display VALUE indicates what will be sent to the server SELECTED sets the default selected item MULTIPLE will allow multiple selection of items
Eg: <SELECT NAME=Hobbies MULTIPLE SIZE=3>
<SELECT NAME=Hobbies> <OPTION VALUE=T>Travel <OPTION VALUE=R SELECTED>Reading <OPTION VALUE=S>Sleeping <OPTION VALUE=W>Walking </SELECT>
37
Buttons
The Submit button
Sends the form contents to the server when clicked By default only submit button can invoke the action page and send
data to server. <INPUT TYPE=submit NAME=cmdsubmit VALUE =Submit>
The Reset button
Resets all the form controls to the default state. <INPUT TYPE=Reset NAME=cmdReset VALUE="Reset">.
A button
No predetermined action like submit or reset.
Script should be written to make it work. (this will be covered in later
chapters) <INPUT TYPE=Button NAME=cmdAdd VALUE=Click Me">.
38
Form examples
<!DOCTYPE html> <html><body> <form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="FirstName" value=Ruby"><br> Last name: <input type="text" name="LastName" value=Jindal"><br> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female checked>Female<br> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car <br><br> <select name="cars"> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <input type="submit" value="Submit"></form> <p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p> </body> </html>
39
File and Image
The file control
Available from HTML 4.0 This form control is used to upload a file to the server <INPUT TYPE=file NAME=load> It is possible to set maxlength and size values to file control Its Not suggested because the path name might be larger than the size
specified The file form control is not supported by all browsers
The image control
The image control creates a graphical version of submit button <INPUT TYPE=IMAGE SRC=[Link] alt=submit to server
NAME=flname>
40
File and Image
41
How to specify the path for submitting the data from a html FORM to server side program
A B C
Using action attribute of <form>
TRUE
Using GET method
FALSE
Using POST method
FALSE
External CSS is reusable
TRUE
42
Summary
HTML structure
Different elements and attributes Creating tables
Interaction with the client using forms.
43
Thank You .!!!!!!
44