Table Of Content

1 HTML, CSS, JavaScript Unit 1 - HTML – Hyper Text Markup Language 2 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 2 Course Objective To introduce the participants to – Different HTML tags – Cascading Style Sheets – Client side Scripting with JavaScript – Document Object Model 3 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 3 Session Plan Day 1 HTML Frames, Images and Forms CSS Day 2 Introduction to JavaScript Document Object Model 4 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 4 References Ivan Byross, “ Web enabled Commercial Application development HTML,DHTML,JavaScript, Perl ,CGI “, BPB publications David Flanagan, JavaScript The Definite Guide , Shroff Publishers. Thomas Powell ,The Complete Reference – HTML, TATA McGRAW-HILL www.w3schools.com www.htmlgoodies.com 5 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 5 Unit Plan What is HTML? Where does it fit in? HTML tags and attributes Text formatting tags Linking pages Working with lists and tables. 6 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 6 WWW and HTML The World Wide Web (WWW) is a network of the computers all over the world. WWW is also knows as the web is a client-server network. Communication on the web happens through HTTP. Web information is stored in Web pages Web Pages are stored on Web servers Web clients view the pages in a Web browser. Popular browsers are Internet Explorer and Netscape Navigator Overview of www and HTML • Internet is a communication network linking computers world wide. • The World Wide Web is a way of accessing information over the medium of Internet. It is an information sharing model that is built on top of the Internet. • WWW is also known as the web. • WWW is not a single entity it is a client-server network that includes web servers that are designed to deliver files to the client. • The web uses the http protocol to transmit data. • A web site is a collection of files, linked together and saved on the web server. These files are known as web pages. • A Browser is an application that allows a user to find, view, hear, and interact with World Wide Web • Client utilizes browsers such as Internet Explorer, Netscape Navigator, Mozilla, Opera etc to access web documents called web pages. • First page which is displayed in the web browser when it connects to the web site is called the home page.( The file name of the home page is normally index.html or default.html) • A Web server is the computer program (housed in a computer) that serves requested HTML pages or files. • Hypertext Transfer Protocol (HTTP) - The standard language that computers connected to the World Wide Web use to communicate with each other. 7 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 7 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 – Simple – Browser/Platform Independent – Not Case Sensitive – Different from other Programming Languages – A medium for User Interface Web Pages are coded in HTML. HTML documents are stored on the web server and are downloaded as part of a response to a request from the client. HTML stands for Hyper Text Markup Language and is used to create hypertext documents that are platform independent. An HTML document is a text file that contains the elements a browser uses to display text, multimedia objects, and hyperlinks. A hyper link connects one document to another document. Hyper links in text are easy to spot because they are usually underlined and a different color from the rest of the text. A markup language is a language that has codes for indicating layout and styling (such as boldface, italics, paragraphs, placement of graphics, etc.) within a text file. Markup language is entirely different from a programming language. HTML is derived from Standard Generalized Markup Language (SGML). SGML is a language used to define other languages. Tim Berners-Lee invented the World Wide Web, HTML, HTTP and Universal Resource Locators (URLs). He is currently the director of the World Wide Web Consortium(W3C) the group that sets technical standards for the Web. HTML tags are not case sensitive, <body> means the same as <BODY> HTML using ASCII (plain text) format , hence platform independent HTML is interpreted by the browser, not like other programming languages. HTML form elements are used to create a GUI. 8 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 8 The HTML instructions are called tags, and look like – <TAG> ….. Text here…….. </TAG> Container tags :Tags that have starting as well as ending part. – e.g.: <TITLE>Title of the Web Page </TITLE> Empty tags : Tags that do not have the closing part. – e.g. <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 Attributes are optional. e.g.: <H1 ALIGN = “CENTER”> This is a heading </H1> HTML tags and attributes Attribute Start tag Element End tag An HTML file contains markup tags that tell the browser how to display the page. HTML tags are used to mark the elements of a document for your browser. These elements could be headings, tables, lists etc. and can contain plain text, other elements, or both. The tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags could be paired (e.g., <H1> and </H1>) to start and end the tag instruction. Some tags don't need to have the closing part - these are called empty tags e.g. <BR> whereas some tags necessarily need to have both the starting and ending part - these are called container tags e.g. <H3> and </H3>. HTML tags are case insensitive. Many HTML tags also have attributes assigned to them. An attribute is an additional feature you can use to configure the element. For example, <H1> tag can also have an attribute “ALIGN” assigned to it, so that <H1 ALIGN = “CENTER”> will generate a center aligned heading. Attributes are optional, can be used depending on how you want to modify the tag. Attributes always come in name/value pairs like this: name="value" and are added to the start tag of an HTML element. 9 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 9 Structure of HTML Document <HTML> <HEAD>  <TITLE>Title of the Web Page </TITLE> </HEAD> <BODY>   <H1> Contents </H1> </BODY> </HTML> An HTML file can be created by using a simple text editor viz notepad, textpad, editplus. HTML file must have an extension htm or html. first.html Every HTML program or document has a rigid structure. The entire web page is enclosed within the <HTML> </HTML> tag. Within this tag, two distinct sections, head and body are created. These sections are as described below. Document Head The text between the <HEAD> tag and the </HEAD> tag is header information. Header information is not displayed in the browser window, it is necessary for the internal working of the document. An exception to this is the <TITLE> </TITLE> tag, which displays the document title in the browser’s title bar. Document Body The <BODY></BODY> tag encloses the body of the HTML document. Comments The  tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. Comments can be used to explain your code or earmark the areas that need improvement, which can help you when you edit the source code at a later date. e.g.:  Note that you need an exclamation point after the opening bracket, but not before the closing bracket. You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage, Visual Interdev etc. However, these tools do not generate very optimized HTML code because it may contain Unnecessary tags. 10 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 10 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 – <BASE> specifies the absolute URL address – <LINK> specifies the relationship between the current document and other documents. – <META> element can be used to specify name/value pairs describing various properties of the document – <SCRIPT> specifies the client side script name. – <STYLE> To Include CSS (Cascading Style Sheet) <BASE> element specifies an absolute URL address that is used to provide server and directory information for partially specified URL address called relative address. e.g: <BASE HREF ="http://www.inf.com/file.html“> Specifies the base URL of the document. This is used when dereferencing relative URLs in the page. <META> element uses name value pairs to provide meta information about the document. It often provides descriptive information that is targeted by search engines. Eg: . 1. To have your page automatically reloaded every X seconds <META HTTP-EQUIV="REFRESH" CONTENT=X > 2. To have a different page automatically loaded after X seconds <META HTTP-EQUIV="REFRESH" CONTENT="X; URL= http://address/file.html"> 3. To specify an expiration date for the page so that it will be reloaded after a certain date. <META HTTP-EQUIV="Expires" CONTENT="Mon, 23 Sep 2001 01:21:00 GMT"> 4. To specify keywords for certain search services to use. <META HTTP-EQUIV="Keywords" CONTENT="keyword1, keyword2, ..."> 5. To specify a description of your page for certain search services to use <META HTTP-EQUIV="Description" CONTENT="Describe your site here....“ <LINK> element is used in linking external CSS which will be discussed in later chapters. 11 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 11 HTML Document – Body Enclosed in <BODY> </BODY> tag. Some important attributes of the BODY tag – BGCOLOR = “color” / “#rrggbb” – BGPROPERTIES=FIXED – BACKGROUND = “url of the image” – TEXT = “color” / “#rrggbb” – LEFTMARGIN = n – LINK = “color” / “#rrggbb” – ALINK = “color” / “#rrggbb” – VLINK = “color” / “#rrggbb” – TOPMARGIN= n – Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). body.html <BODY > tag attributes BACKGROUND=x.jpg - Specifies an image to be tiled as background. BGCOLOR=color - Specifies the background color BGPROPERTIES=FIXED -Fixes the background image so that it doesn't scroll. LEFTMARGIN=n -Specifies the left margin for the entire page TEXT=color -Specifies the color of text in the page TOPMARGIN=n -Specifies the top margin for the entire page. LINK -Specifies the link color. ALINK -Specifies the active link color. VLINK -Specifies the active link color. RGB Color Components. Color attribute values give a color definition. Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). A collection of color names like blue, green, cyan etc. are also supported by most of the browsers. <html><head> <title>Background color</title> </head><body bgcolor="cyan"> <h1> Contents </h1> </body></html> 12 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 12 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. – E.g.: <FONT FACE=“Helvetica, Arial” SIZE=“7” COLOR=“#FF0000”> The Written Word</FONT> Formatting tags are used inside the <BODY> of the document to format your text This is the largest category of tags and you will be using these tags most frequently. <FONT> tag is a physical tag that describes the display attributes of the text inside. E.g: <FONT FACE="Comic Sans MS" SIZE=“2“ COLOR="Red"> This is comical and red and small</FONT><BR>  <FONT FACE="Comic Sans" SIZE="+2" COLOR="Red"> This is red and big. Is it comical?</FONT><BR> If the font face is not specified correctly or not available in the system , the text will be displayed in the default font. In HTML the font size is limited to 1 to 7. In future you can use CSS (Cascading Style Sheets) for changing the properties. ie you can have a font with size 10 cm . 13 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 13 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. Headings HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>. The syntax of the heading element is: <Hy>Text of heading </Hy> where y is a number between 1 and 6. HTML automatically adds an extra blank line before and after a heading. HTML elements permitted within the BODY are classified as either block-level elements (or) inline elements. Block-level elements typically contain inline elements and other block-level elements. Block-level elements usually begin on a new line. 14 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 14 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%” NOSHADE > Paragraphs Unlike documents in most word processors, HTML document ignore multiple spaces, tabs and carriage returns. Word wrapping can happen any time in your source file and multiple spaces are collated into a single space. To preserve some text formatting we use the <p> tag which created paragraphs. Normally the browser places a blank line before the paragraph Some elements do not have closing tags (known as empty tag). <BR> is an empty tag used when you want to end a line, but don't want to start a new paragraph. The <BR> tag forces a line break wherever you place it. e.g. : <P>This <BR> is a para<BR>graph with line breaks</P> <P> tag has a ALIGN attribute which aligns the paragraph to LEFT, RIGHT, CENTER or JUSTIFY (justified) Horizontal rules The <HR> tag draws a horizontal line across the page. It is useful to separate different sections of a single page. Some attributes are SIZE - Sets the line thickness WIDTH - Sets the width of the of the line ALIGN - sets the alignment to LEFT,RIGHT or CENTER. NOSHADE - renders the bar without surrounding shadow. 15 ER/CORP/CRS/LA39/003 Version 1.00 Copyright © 2005, Infosys Technologies Ltd 15 Text level elements Basic two flavors – Physical tags : dictates the presentation • E.g.: <B> </B> – Logical tags : indicates the contents • E.g.: <STRONG> </STRONG> Logical tags A logical tag gives some kind of indication about the content but does not dictate the presentation. For e.g. Level 1 heading i.e. <H1> - this indicates the highest level heading in the page. However it does not specify whether this should be Arial or Times New Roman, 20 pt or 24 pt. Advantage of logical tags is that they help enforce consistency in your documents. For example, consider the <STRONG> tag. Most browsers render it in bold text. Logical styles offer the flexibility of changing the display attributes while making minimum changes to code Physical tags Physical tags are used to specify how text should be rendered.