HTML,CSS & Javascript

HTML,CSS & Javascript by P.Usha Associate Professor , Department of Information Technology, B.S. Abdur Rahman University

Markup Languages • A markup language embeds tags within regular text • Text file → edit with notepad • SGML – Standard Generalized Markup Language • Generic language conceived in the 60’s • Language to separate content and structure • Elements identify text objects • HTML – Hypertext Markup Language • Based on SGML • Most common markup language for Internet pages • XML – Extensible Markup Language • Also based on SGML • Very flexible • Commonly used for information exchange

HTML Editors • HTML Files are simply text files • Notepad and WordPad are fine text editors • Emacs and XEmacs are good, and also work in Linux • Many freeware HTML editors exist

Server basics • HTML file is requested by user • Request travels over internet to proper machine • Internet server computer locates file and responds Internet Internet Server Software <html>... file.html

Markup Tags • Tagsare used to separate structure from content • Usually placed inside < > • E.g. <html> defines the start of an HTML page • Closed with </ > • E.g. </html> closes an HTML page • Generally: <tag> content </tag> • content is processed/displayed according to the meaning of tag • Tags may be nested • <tag> content <tag2> more </tag2> more </tag> • Nesting must be "balanced" • Tags with no content can optionally close themselves • E.g. <br /> same as <br> </br>

More On Tags • Tags are not case-sensitive • <html> = <HTML> = <hTmL> • Lower case is preferred • Tags often contain attributes • Specify specific behavior for tag • Attribute values contained in “”s • E.g. <table border="0">

HTML Skeleton Page <html> <head> <title> </title> </head> <body> </body> </html> • html indicates the type of markup used • head contains header information • title gives page title(window title bar) • body contains main content

Our First Page • Defines an HTML greeting page • <html> • Sets Title Bar text • <title> • Display Paragraph • <p> • White space ignored by browser <html> <head> <title> My First Page </title> </head> <body> <p> Hello World! Welcome to CS301 </p> </body> </html> Output: Hello World! Welcome to CS301

HTML Tags • Headings: <h1>, <h2>, …, <h6> • Various headings in your document • E.g. title <h1>, chapters <h2>, sections <h3>,subsections <h4> • Paragraphs: <p> • Define new paragraph • New line before and after • Line break: <br> • New line, but not new paragraph • Horizontal rule: <hr> • Draw horizontal line across page • Comment:  • Ignored by browser

Example <html> <head> <title>Cinderella</title> </head> <body> <h1>Cinderella</h1>  or, <b>The Little Glass Slipper</b> <h2>Chapter 1</h2> <hr /> <p> There lived once a gentleman who married for his second wife the proudest woman ever seen. She had two daughters of the same spirit, who were indeed like her in all things. … </p> <p> No sooner was the wedding over than the stepmother began to show her ill-temper; she could not bear her young step-daughter's gentle ways, … </p> <br /> <h6>credit to www.childrensbooksonline.org</h6> </body> </html> Cinderella, version 1

Text-formatting Tags • Many formatting tags in HTML

HTML Links • Linking to other pages is the point of the Internet • Anchor: <a> • Common attributes: • href – destination page • target – Where to open page (e.g. target="_blank"opens a new browser window) • name – Anchor on this page • Examples: • <a href="http://www.whitworth.edu" target="_blank">Go to our school!</a> • <a name="start"/> • <a href="mypage.htm#start">Go to start</a>

Example, refined … <body> <a name="top"> <h1>Cinderella</h1> </a> <a href="cinderella2.htm#para1">Paragraph #1</a><br> <a href="cinderella2.htm#para2">Paragraph #2</a><br> <a href="cinderella2.htm#credits">Credits</a><br> <a name="para1" /> <p> … </p> <p><a href="cinderella2.htm#top">Back to top</a></p> <a name="para2"/> <p> … </p> <p><a href="cinderella2.htm#top">Back to top</a></p> <a name="credits"/> <br/><h6>credit to <a href="http://www.childrensbooksonline.org" target="_blank"> Children’s Online Books </a> </h6> <p><a href="cinderella2.htm#top">Back to top</a></p> </body> Cinderella, version 2

Tables • We want to display tabular data • Tags: • <table> Define a table • Attributes: border – border thickness • <tr> Define a table row • <td> Define table data • Attributes: colspan – # of columns to cover with this datarowspan – # of rows to cover with this data • <th> Define table heading

Example <html> <head> <title> Cast for Cinderella </title> </head> <body> <p> Cast of voices for Disney's Cinderella (1950) </p> <table border="1"> <tr><th>CHARACTER</th><th>VOICE TALENT</th></tr> <tr><td>Cinderella</td><td>Ilene Woods</td></tr> <tr><td>Lady Tremaine</td><td>Eleanor Audley</td></tr> <tr><td>Drizella</td><td>Rhoda Williams</td></tr> <tr><td>Anastasia</td><td>Lucille Bliss</td></tr> </table> </body> </html> Cinderella cast

Lists • Display a marked list of items • Unordered List: <ul> • <li>: list item • Ordered List: <ol> • <li>: list item • Definition List: <dl> • <dt>: Dictionary Term • <dd>: Dictionary Definition

Example Conferences: <ul> <li>NFC East</li> <li>NFC North</li> … </ul> Standings: <ul> <li>NFC East <ol> <li>(*) NY Giants</li> <li>(x) Philadelphia</li> <li>Dallas</li> <li>Washington</li> </ol></li> … </ul> <dl> <dt>x</dt><dd>clinched playoff</dd> <dt>z</dt><dd>clinched division</dd> <dt>*</dt><dd>clinched homefield through playoffs</dd> </dl> NFL Standings

Images • Text is boring • Images make a web site more interesting • Tag: <img> • Attributes: src, alt • src is a URL • alt is for text-only browsers, "hovering"

Example Conferences: <ul> <li><img src="NFC.gif">NFC <ul> <li>NFC East</li> <li>NFC North</li> <li>NFC South</li> <li>NFC West</li> </ul> </li> <li><img src="AFC.gif">AFC <ul> <li>AFC East</li> <li>AFC North</li> <li>AFC South</li> <li>AFC West</li> </ul></li> </ul> Standings: <ol> <li><img src="SEA.gif">(x) Seattle</li> <li><img src="STL.gif">St. Louis</li> <li><img src="ARI.gif">Arizona</li> <li><img src="SF.gif">San Francisco</li> </ol> Enhanced NFL Standings

Images as Links • We've seen how to link to other pages • <a href="http://www.whitworth.edu">Go to Whitworth</a> • We've also seen how to put images on the screen • <img src="WhitworthLogo.gif" /> • We can put the two together • <a href="http://www.whitworth.edu"> <img src="WhitworthLogo.gif" /> </a> • <a href="http://www.whitworth.edu"> <img src="WhitworthLogo.gif" /> Go! <img src="WhitworthLogo.gif" /> </a>

HTML <div> tag • Defines a generic container • Allows us to set up tags as a group(e.g. menu bar, image list, …) • Attributes • align (left, center, right, justify) • class

Example <html> <head><title>Cast for Cinderella</title></head> <body> <p>Cast of voices for Disney's Cinderella (1950)</p> <div align="left"> <table border="1"> <tr><th>CHARACTER</th><th>VOICE TALENT</th></tr> <tr><td>Cinderella</td><td>Ilene Woods</td></tr> … </table></div> <div align="center"> <table border="1"> <tr><th>CHARACTER</th><th>VOICE TALENT</th></tr> <tr><td>Cinderella</td><td>Ilene Woods</td></tr> … </table></div> <div align="right"> <table border="1"> <tr><th>CHARACTER</th><th>VOICE TALENT</th></tr> <tr><td>Cinderella</td><td>Ilene Woods</td></tr> … </table></div> </body> </html> Cast_div

HTML Forms • Many Internet applications require user input • E.g. Search engine pages, customer support, Blogs • HTML uses forms to set up user input • Many different form controls • Tag <form> begins a form section • Attributes: name, action, method, id

Form Input Objects • Forms need objects to get information from users • Usually use <input> tag • Attributes: name, type, value, id • Type attribute specifies the kind of input object • submit, text, textarea, checkbox, radio, …

Simple form – search engine page <html> <head> <title>Search the Internet</title> </head> <body> <h1>CS301 -- Internet Search Page</h1>  <form> Search for:  <input type="text" name="q" />  <input type="submit" name="submitbtn" value="Press here!" /> </form> </body> </html> Initial Search Page

A simple Exercise • Design a form • Get the user's name and password in a textbox (e.g. <input type="text" name="user" />) • Include a "submit" button(e.g.<input type="submit" name="submitbtn"value="Press here" />)

Form options • Our form doesn’t (yet) do anything • We need to direct its values to some destination site • Once the user hits the submit button • action, method attributes of <form> specify this • action: URL to destination site • method: how to send the data (get, post) • Example:<form action="mydest.htm" method="get"> Search Page #2

Example <html> <head> <title>Search the Internet</title> </head> <body> <h1>CS301 -- Internet Search Page</h1> <table border="0"> <tr><td><big>Powered by:</big></td> <td><img src="http://www.google.com/intl/en/logos/Logo_25wht.gif"> </td> </tr> </table>  <form action="http://www.google.com/search" method="get"> Search for: <input type="text" name="q" /> <input type="submit" value="submit" /> </form> </body> </html>

Form Methods • The method attribute accepts two values, get and post • get • Submitted URL contains name/value pairs for each control on web page • Users bookmarks contain query answers • Users see URL – security issues? • post • Submitted URL does not contain control values • User bookmarks do not keep query results • Users do not see URL

Form Controls • Forms must have more than text boxes and buttons • We want check boxes, radio buttons, password fields, multi-line fields, … • HTML provides all of these with the <input> tag • Using the type attribute to choose the control • Use the name attribute to name it (for later)

Text Boxes • Text field: <input type="text" • Default (but don’t rely on it) • Password: <input type="password" • Uses ‘*’ for each input character • Should you use get or post? • Multi-line field: Tag <textarea> • Not <input type=…> • Attributes name, rows, cols Text Box Controls

Example <html> <head> <title>PHP Self Description</title> </head> <body> <form action="thanks.htm" method="POST"> Name: <input type="textbox" name="name" /> <br />Password: <input type="password" name="password" /> <br />Description: <textarea rows="10" cols="30" name="description"> </textarea> <br /><input type="submit" value="submit" /> </form> </body> </html>

Buttons • Submit: <input type="submit" • Submit form information to action URL • Reset: <input type="reset" • Clear out information on form • Radio: <input type="radio" • Option buttons (choose one) • Checkbox: <input type="checkbox" • Choose zero or more options Button Controls

Example <form action="thanks.htm" method="get"> Search for: <input type="text" name="q" /> <br /> Choose a search engine: <br /><input type="radio" name="engine" value="google" checked="checked" /> Google <br /><input type="radio" name="engine" value="yahoo" /> Yahoo <br /><input type="radio" name="engine" value="A9" /> A9 <br /><input type="checkbox" name="new" checked="checked" /> Checkbox that does nothing (sorry) <br /><input type="reset" text="clear" /> <input type="submit" value="submit" /> </form>

List Boxes • Drop-down list: <select> • Give user list of options • Attribute namedefines control name • <option> to define each option • Attributes: value, selected New Search Page

Example <form action="thanks.htm" method="get"> Search for: <input type="text" name="q" /> <br /> Choose a search engine: <br /> <select name="engine"> <option value="google" selected="selected"> Google </option> <option value="yahoo"> Yahoo </option> <option value="A9"> A9 </option> </select> <br /> <input type="checkbox" name="new" checked="checked" /> Checkbox that does nothing (sorry) <br /><input type="reset" text="clear" /> <input type="submit" value="submit" /> </form>

Page and Form Layout • Common use for HTML tables is for page layout • Generally, programmers have no layout control over their pages • E.g. 2-column newspaper • We’ll see later that <div> is also very useful, especially with CSS • border="0"(why?) • td supports width, bgcolor, colspan attributes

Making Forms More Readable • Example: Form for a restaurant survey • Need to rate things on scale of 1-5 • Service • Food quality • Price Layout

Example <html> <head> <title>Restaurant Survey</title> </head> <body bgcolor="lightyellow"> <h1>Thank you!</h1> <p>Please fill out this survey</p> <form action="thanks.htm"> <table> <tr><th> </th><th colspan="2">Lowest</th> <th> </th><th colspan="2">Highest</th></tr> <tr><th> </th><th>1</th><th>2</th> <th>3</th><th>4</th><th>5</th></tr> <tr><td>Service</td> <td><input type="radio" name="service"/></td> <td><input type="radio" name="service"/></td> <td><input type="radio" name="service"/></td> <td><input type="radio" name="service"/></td> <td><input type="radio" name="service"/></td></tr> <input type="submit" value="submit"/> </table> </form> </body></html>

Now we need the DIV and SPAN tags • Recall <div> marks areas with a name • <span> is similar, but works within a tag <div class="header"> <img class="watermark" src="WUcolorMarkOnly.jpg" width="150" height="150" alt="Whitworth - Founded 1890"> <img class="logo" src="whit_main_logotype.gif" width="326" height="137" alt="Whitworth - An Education of Mind & Heart"> <p class="caption">Classroom Research conducted by Students in the Math and Computer Science Department at Whitworth University</p> </div> <span class="journaltitle"><a name="CS374_2008">Fall 2008 -- CS374: Database Management Systems</a></span> <span class="editor">Edited by Peter A. Tucker</span><br> Austin Abelar, <a href="2008/CS374/Abelar.pdf">Parallel Query Processing Using Various Techniques of Multicore Technology</a><br> We will see that, by marking groups, we can easily make display changes

What is CSS • CSS – Cascading Style Sheets • Problem: HTML developers have little control of how things look • Modifying a page’s format through HTML can be very messy • Solution: Cascading style sheets • tell the browser how to display objects • Style sheets can be embedded in the HTML file or saved externally

CSS Syntax • Values in a style sheet have the following syntax:selector {property: value} • Where: • selector: the HTML tag to specify • property: the property of tag to set • value: the new value for that tag’s property • Semi-colon delimited list(tag {p1: v1; p2: v2; …})

Examples • p {color: green} • Make contents of <p> green typeface • p { text-align: center; color: green} • Multiple property settings (<p> centered, green) • h1,h2,h3,h4,h5,h6,p { text-align: center; color: green} • Grouping of multiple tags

Applying CSS • Embedded in HTML page (Internal) <head> <title>Simple CSS Test</title> <style type="text/css"> h1,h2,h3,h4,h5,h6,p {text-align: center; color: green} </style> </head> • Linked into HTML page (External) <head> <title>Simple CSS Test</title> <link rel="stylesheet" type="text/css" href="simple.css" /> </head> h1,h2,h3,h4,h5,h6,p {text-align: center; color: green}

A simple Exercise • Construct a style sheet internally to one of your existing web pages • Choose tags, and some color • Reload it in a browser • Construct an external style sheet • Write it using any text editor (notepad, Expression Web, VS.NET, …) • Link it into another one of your existing web pages

CSS Classes • We may not want a single style for all instances of a tag • E.g. <p> is very common • Classes specify different kinds of styles for a tag • Syntax: selector.class {prop: val} • Usage: • Both selector and class are optional • Missing selector: applies to all tags with class=“c” • Missing class: applies to all instances of a tag • p.right {text-align: right}p.center {text-align: center} <p class="right"> Right-aligned </p><p class="center"> Centered </p>

Example <html> <head> <title>Simple CSS Test</title> <style type="text/css"> .global {color: darkred} p {color: green} p.center {text-align: center} p.right {text-align: right} p.left {text-align: left} </style> </head> <body> <h1 class="global">Heading for this page</h1> <p class="center">Cool Main Title in the Center</p> <p class="left">Interesting text on the left</p> <p class="right">other stuff on the right</p> <h4>is this blue?</h4> </body> </html> Classes

Inline Styles • We can also embed styles into a single tag • We lose many advantages of style sheets • Limited use • Syntax: <tag style="p1:v1; p2:v2"> • Example: <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

Which style to choose • Possible conflict of styles • external vs. internal vs. inline • Order: • Browser default • External Style Sheet • Internal Style Sheet (inside the <head> tag) • Inline Style (inside HTML element)

OK, Now We Need Specifics • We know how to use CSS • Real Power – one CSS file controls pages on entire site • Easy to update entire look • What are the possibilities? • What properties can be set for various tags?

HTML,CSS & Javascript