Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. HTML
  2. 2. What is HTML? • HTML stands for Hyper Text Markup Language . • It is used to design and develop Web Pages. • 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)
  3. 3. HTML Tags • The HTML instructions are called tags, and look like <TAG> ….. Text here…….. </TAG> • Tags are used for data presentation • There are two types of tags 1. Container tags : Tags that have starting as well as ending part. e.g. <TITLE> Title of the Web Page </TITLE> 2. Empty tags : Tags that do not have the closing part. e.g. <BR> , <HR>
  4. 4. HTML Elements and attributes • HTML elements = (HTML instructions + text to which the instructions apply) • An attribute is an additional feature you can use to configure the element, Attributes are optional.
  5. 5. <H1 ALIGN = ‚CENTER‛> This is a heading </H1> Example
  6. 6. <H1 ALIGN = ‚CENTER‛> This is a heading </H1> Example Starting Tag
  7. 7. <H1 ALIGN = ‚CENTER‛> This is a heading </H1> Example End Tag
  8. 8. <H1 ALIGN = ‚CENTER‛> This is a heading </H1> Example Attributes
  9. 9. <H1 ALIGN = ‚CENTER‛> This is a heading </H1> Example HTML element
  10. 10. HTML Document Structure • An HTML file can be created by using a simple text editor viz notepad, text pad, Eclipse IDE editor • HTML file must have an extension htm or html. <HTML> <HEAD> <TITLE>Title of the Web Page </TITLE> </HEAD> <BODY> <H1> Contents </H1> </BODY> </HTML>
  11. 11. HTML Document - Head • Enclosed in <HEAD> </HEAD> tag • Tags that can go in the document head – <TITLE> : Indicates the title of the document that is used as the window caption – <STYLE > : To Include CSS (Cascading Style Sheet) – <LINK rel=‚stylesheet‛ type=‚text/css‛ href=‚file path‛> : specifies the relationship between the current document and other documents. – <SCRIPT type=‚text/javascript‛> : specifies the client side script name which used to perform the client side validation. 11
  12. 12. HTML Document - Head • <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. • Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. • The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta name="description" content="Free Web tutorials"> <meta charset="UTF-8">
  13. 13. HTML Document - Head <HTML> <HEAD> <TITLE>Title of the Web Page </TITLE> <STYLE > </style> <LINK rel=“stylesheet” type=“text/css” href=“file path”> <SCRIPT type=“text/javascript”> <meta name="description" content="Free Web tutorials"> </HEAD> <BODY> <H1> Contents </H1> </BODY> </HTML>
  14. 14. HTML Document – Body • Enclosed in <BODY> </BODY> tag. • Some important attributes of the BODY tag – BGCOLOR = ‚color‛ / ‚#rrggbb‛ – BACKGROUND = ‚url of the image‛ – TEXT = ‚color‛ / ‚#rrggbb‛ – LINK = ‚color‛ / ‚#rrggbb‛ – ALINK = ‚color‛ / ‚#rrggbb‛ – VLINK = ‚color‛ / ‚#rrggbb‛ • Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). 14
  15. 15. Try Out • Create an html page and name it first.html using the text editor present in your system. The html page should have a text message ‚Welcome to HTML‛ .
  16. 16. Try Out • In the body of first.html try out the various attributes mentioned below: <body BGCOLOR="RED" BACKGROUND="Chrysanthemum.jpg" TEXT = "#000000" LINK = "#FFFF00" ALINK = "RED" VLINK = "WHITE‚>
  17. 17. DOM Structure • The usual parent/child relationship between node • Like any other tree, you can walk this
  18. 18. Formatting the web page
  19. 19. <FONT> • Allows you to specify the font face and font size and other fond styling's. – 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 : specifies the 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>
  20. 20. Text Formatting tags • Paragraphs <P> </P> - used to create paragraphs. • Line Breaks <BR> - to insert returns or 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. E.g: <HR ALIGN = ‚right‛ WIDTH = ‚50%‛> • Comments in HTML <!-- Content here -->
  21. 21. 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> • The font size of the heading will go on decreasing from H1 to H6.
  22. 22. Text Formatting tags • <B>….</B> - Bold • <I>……</I> - Italic • <U>….</U> - Underline • <STRIKE>…</STRIKE> - Strikethrough • <CENTER></CENTER> - Centers the text on the screen. • <SUB>….</SUB> - Subscript • <SUP>….</SUP> - Superscript 22
  23. 23. Try Out • Modify first.html with following features – Add 3 headings with paragraphs underneath to each – Each paragrapshs and heading should be of different color – Each heading should be italic – Each subheading should be italic, bold and underlined
  24. 24. Lists in HTML
  25. 25. Lists in HTML • There are three types of lists in HTML – Ordered List – Unordered List – Description List
  26. 26. Lists in HTML • Un Ordered list <ul> <li> baabtra</li> <li> baabte</li> </ul> Out Put • Baabtra • baabte
  27. 27. Lists in HTML • Ordered list <ol> <li>Projects</li> <li>Products</li> <li>Services</li> </ol> Out Put 1. Projects 2. Products 3. Services
  28. 28. Lists in HTML • Description list <dl> <dt> baabte</dt> <dd> - Parent company</dd> <dt> baabte</dt> <dd> - Training division</dd> </dl> Out Put baabte - Parent company Baabte - Training division
  29. 29. Inline and Block-Level Elements • Elements inside the <BODY> tag are classified as – block-level elements and –Block-level elements usually begin on a new line. Generally, block- level elements may contain inline elements and other block-level elements –Eg :<H1><P><HR> – Inline elements. –Inline elements usually stay on the same line –Eg: <FONT><I><BOLD> 29
  30. 30. Linking Pages • Used to link text with other documents • <A></A> – HREF – NAME (bookmarks inside the page) – TITLE (balloon help in IE) – TARGET (Define where the linked document will be opened) e.g.: <A href=‚next.html‛> Click here </A> • Used to link text with same documents (called bookmarking) 30 <BODY link=“blue” alink=“green” vlink=“red”> <A name=“top”> Top of the Page </A> …………………………………………………… <A href=“#top”>Top</A> </BODY>
  31. 31. Absolute and Relative Link • You can reference a document within an HREF attribute in Two ways. Absolutely or relatively. • An absolute link is created when the href value is a fully qualified URL. • Eg: <A HREF = ‚"> Google</A> • <A HREF=‚C:/html/project/index.html‛>HTML project</A> • A relative link is created when the destination href value is relative to the location of the current webpage • <A HREF = ‚../jsp/display.jsp‛> Display details</A> • <A HREF=‚../project/index.html‛>HTML project</A> • Using relative links allows the web site to remain intact even if the site is moved to another server.
  32. 32. Tables • Displays data in a tabular format so as helps to positioning the contents of the page in a more structured way • <TABLE> ….. </TABLE> • Some attributes • ALIGN = LEFT | RIGHT | CENTER • BORDER = n (Number of Pixels ) • BGCOLOR = ‚color‛ | ‚#rrggbb‛ • WIDTH = % Of Parent | n (pixels) • CELLSPACING = n (Number of Pixels ) -Specifies the space between the cell wall and contents • CELLPADDING = n(Number of Pixels )- Specifies the space between cell
  33. 33. Tables <TABLE BORDER=1> <TR> <TH> first header cell contents </TH> <TH> last header cell contents </TH> </TR> <TR> <TD> first row, first cell contents </TD> <TD> first row, last cell contents </TD> </TR> <TR> <TD> last row, first cell contents </TD> <TD> last row, last cell contents </TD> </TR> </TABLE>
  34. 34. <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> Creating tables 1 34
  35. 35. Creating tables 2 <TABLE BORDER=2 BGCOLOR="#B45F04"> <TR ALIGN="CENTER"> <TD COLSPAN=3>MINI STATEMENT</TD> </TR> <TR ALIGN="CENTER‚> <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>
  36. 36. Iframe • An iframe is used to display a web page within a web page. <iframe src=‚baabtra.html" width="200" height="200"></iframe>
  37. 37. Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. The most common character entities: HTML Character Entities Result Description Entity Name < > & ‚ ‘ non-breaking space less than greater than ampersand quotation mark apostrophe &nbsp; &lt; &gt; &amp; &quot; &apos;
  38. 38. HTML Character Entities - DEMO <html> <head> <title>Entity example</title> </head> <body bgcolor="cyan"> <h1>HTML</h1> <!-- without using Entities --> <h3>All html source code stars with <HTML> Tag</h3> <!-- using Entities to dispaly <HTML> --> <h3>All html source code stars with &lt;HTML&gt; Tag</h3> &copy; &nbsp;&nbsp;XYZ &reg;&nbsp; </body> </html>
  39. 39. Forms • Used for creating Graphical User Interface (GUI) • In a web application client interact through GUI. • FORM by itself really cannot do anything • Forms become powerful when connected to a server application • A single HTML page can have multiple forms.
  40. 40. Forms • Can be designed using <FORM></FORM> tag <FORM NAME=‚form1‛ ACTION="abc.jsp" METHOD=GET> </FORM> (form elements go here)
  41. 41. Forms • Can be designed using <FORM></FORM> tag <FORM NAME=‚form1‛ ACTION="abc.jsp" METHOD=GET> </FORM> (form elements go here) is used for future manipulation of data by scripting language
  42. 42. Forms • Can be designed using <FORM></FORM> tag <FORM NAME=‚form1‛ ACTION="abc.jsp" METHOD=GET> </FORM> (form elements go here) 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.
  43. 43. Forms • Can be designed using <FORM></FORM> tag <FORM NAME=‚form1‛ ACTION="abc.jsp" METHOD=GET> </FORM> (form elements go here) indicates the way the form is submitted to the server - popular options are GET/POST
  44. 44. 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.
  45. 45. 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 – MAXLENGTH : specifies max number of characters that can be entered to the control
  46. 46. Text Area • Multiline text input – <TEXTAREA NAME=‚feedback‛ ROWS=‚3‛ COLS=‚40‛> Default text goes here – </TEXTAREA> • ROWS is the number of rows displayed • COLS is the no of characters per line • Default text is optional • Dose not have VALUE and MAXLENGTH attributes • The default text is to be put into <TEXTAREA> </TEXTAREA> tags
  47. 47. 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>
  48. 48. Check Box • <INPUT TYPE="checkbox" NAME=‛contact" VALUE=‚email‛ CHECKED> Notify by email • Used for multiple selection • 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 48
  49. 49. 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">.
  50. 50. Radio Buttons • Radio buttons with the same NAME are grouped together • 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 50 <INPUT TYPE="radio" NAME="output" VALUE="screen‚ checked> Screen <INPUT TYPE="radio" NAME="output" VALUE="printer">Printer
  51. 51. Hidden text field <INPUT TYPE=‚hidden‛ NAME=‚userinformation‛ VALUE =‚form1‛> – Not displayed to the user – Can be used to pass data from one form to another – Cannot be modified by the user – So it must have a VALUE attribute set – VALUE data to be sent to the server – Mainly used in server side programming 51
  52. 52. 52 Form example • To display the form elements in a visually appealing way, put them into table cells as shown in the above form.
  53. 53. Form Object action Reflects the ACTION attribute. elements An array reflecting all the elements in a form. length Reflects the number of elements on a form. method Reflects the METHOD attribute. reset() Resets a form. submit() Submits a form. Properties Methods Event and event Handlers Reset onReset(), Submit onSubmit()
  54. 54. Text, Textarea, Password, hidden Objects • Properties – defaultValue : Reflects the VALUE attribute. – name : NAME attribute. – type : Reflects the TYPE attribute. – value : Reflects the current value of the Text object’s field. • Methods – focus() : Gives focus to the object. – blur() : Removes focus from the object. – select() : Selects the input area of the object. • Event Handler – onBlur : when a form element loses focus – onChange : field loses focus and its value has been modified. – onFocus : when a form element receives input focus. – onSelect : when a user selects some of the text within a text field.
  55. 55. HTML Events • Click • Moserover • Mousemove • Mousedown • Mouseup • Keypress • Keydown • Keyup
  56. 56. How to Access username using DOM <form name=‚userlogin‛> Username <input type=‚text‛ name=‚username‛> Password<input type=‚text‛ name=‚pass‛> </form> • document object refers the html document.(<body> tag) • Inside the document we have a form object • Inside form we have two textboxes • According to the DOM we can access the value inside the textbox using JavaScript like document.userlogin.username.value • In an form we are accessing elements by name. • The name should be unique.
  57. 57. 57 Try Out • Create a login screen with a heading Login , two text fields user name , password and a submit button. Put the UI elements in a table structure so as to give it good look and feel.
  58. 58. End of day