Movatterモバイル変換

AN OVERVIEW OFHTML,CSS &JAVA SCRIPT

WHAT IS HTML?HTML STANDS FOR HYPER TEXT MARKUP LANGUAGEHTML IS A MARKUP LANGUAGEA MARKUP LANGUAGE IS A SET OF MARKUP TAGSTHE TAGS DESCRIBE DOCUMENT CONTENTHTML DOCUMENTS CONTAIN HTML TAGS AND PLAIN TEXTHTML DOCUMENTS ARE ALSO CALLED WEB PAGES

HTML TAGSHtml tags are keywords (tag names) surrounded by ANGLE BRACKETSlike <html>Html tags normally come in pairs like <p> and </p>The first tag in a pair is the START TAG, the second tag is the END TAGThe end tag is written like the start tag, with a SLASH before the tag nameSTART and END tags are also called OPENING TAGS and CLOSINGTAGSEXAMPLE:<tagname>content</tagname>

HTML EXAMPLE<html><body><h1>my first heading</h1><p>my first paragraph.</p></body></html>EXAMPLE EXPLAINED The text between <html> and </html> DESCRIBES THE WEB PAGE The text between <body> and </body> is the VISIBLE PAGE CONTENT The text between <h1> and </h1> is DISPLAYED AS A HEADING The text between <p> and </p> is DISPLAYED AS A PARAGRAPH

HTML EDITORSWrite html using notepad or texteditHtml can be edited by using a professional html editor like:Adobe dreamweaverMicrosoft expression webCoffeecup html editorHowever, for learning html we recommend a text editor like notepad (pc) ortextedit (mac).When saving an html file, use either the .htm or the .html file extension.there is no difference, it is entirely up to you.

HTML TAGHtml headings are defined with the <h1> to <h6> tags<h1>this is a heading</h1>Html paragraphs are defined with the <p> tag.<p>this is a paragraph.</p>Html links are defined with the <a> tag.<a href="http://espesolutions.com">this is a link</a>Html images are defined with the <img> tag.<img src=“espelogo.jpg” alt=“espesolutions.com” width=“105”height=“105”>Html uses tags like <b> and <i> for formatting output, like bold or italic text.<b>this text is bold</b>,<i>this text is italic</i>

HTMLATTRIBUTESHtml elements can have ATTRIBUTESAttributes provide ADDITIONAL INFORMATION about an elementAttributes are always specified in THE START TAGAttributes come in name/value pairs like: name="value“<IMG SRC=“ESPELOGO.JPG” WIDTH=“105” HEIGHT=“105”>↓ ↓ ↓ ↓ ↓ ↓NAME VALUE NAME VALUE NAME VALUE

HTML TABLES Tables are defined with the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. A table row can also be divided into table headings with the <th> tag.Example<table><tr><th>name</th><th>qualification</th></tr><tr><td>sandeep</td><td>cse</td></tr></table>

HTML LISTHTML CAN HAVE UNORDERED LISTS &ORDERED LISTSUNORDERED HTML LIST The first item The second item The third item The fourth itemORDERED HTML LIST1. The first item2. The second item3. The third item4. The fourth item

EXAMPLEUNORDERD LIST:<ul><li>java</li><li>c</li><li>c++</li></ul>ORDERD LIST:<ol><li>java</li><li>c</li><li>c++</li></ol>

HTML FORMSHtml forms are used to select different kinds of user input.Html forms are used to pass data to a server.An html form can contain input elements like text fields,checkboxes, radio-buttons, submit buttons and more. a form canalso contain select lists, textarea, fieldset, legend, and labelelements.SYNTAX:<form>input elements</form>

INPUT ELEMENTThe most important form element is the <input> element.The <input> element is used to select user information.An <input> element can vary in many ways, dependingon the type attribute.An <input> element can be of type text field, checkbox,password, radio button, submit button, and more.

TEXT FIELDSDEFINES ONE LINE INPUT FIELD WHERE USER CAN ENTER TEXT.EXAMPLE:<form>FIRST NAME: <input type="text“ name="firstname"><br>LAST NAME: <input type="text" name="lastname"></form>OUTPUT:FIRST NAME:LAST NAME:

PASSWORD FIELD PASSWORD defines a password field.<input type=“password”> the text entered in the textfield will view as *******.Syntax:password:<input type =“password” name=“ password”>OUTPUT:PASSWORD: *********

RADIO BUTTONSRadio buttons let a user select only one of a limited numberof choices.<input type="radio“>SYNTAX:<form><input type="radio" name=“gender"value="male">male<br><input type="radio" name=“gender"value="female">female</form>OUTPUT:MaleFemale

CHECKBOXESCheckboxes let a user select zero or more options of a limitednumber of choices.<input type="checkbox“>SYNTAX:<form><input type="checkbox" name="vehicle" value="bike">i have abike<br><input type="checkbox" name="vehicle" value="car">i have a car</form>OUTPUT:I HAVE A BIKEI HAVE A CAR

SUBMITA submit button is used to send form data to a server.The data is sent to the page specified in the form's action attribute. tThe file defined in the action attribute usually does something withthe received input.<input type="submit“>TYPE: SUBMIT.NAME: Value used by the cgi (common gateway interface)script forprocessing.VALUE: Determines the text label on the button, usually submitquery.CGI: External program use standard input and output for dataexchange.

SUBMITSYNTAX:<form name="input" action="demo" method="get">username: <input type="text" name="user">password:<input type=“password” name=“pass”><input type="submit“ value=“submit” ></form>OUTPUT:

RESETIt allows the surfer to clear all the input in the form.For reset give <input type=“reset”>The browser display reset button.

DROP-DOWN LISTLet a user select one or more choices from limited number of options.SYNTAX:<html><body><select><option value=“fiat">fiat</option><option value="audi">audi</option></select></body></html>

TEXTAREAThe <textarea> tag defines a multi-line text input control.The size of a text area can be specified by the cols and rowsattributes, or even better; through css' height and widthproperties.Syntax:<html>< body><textarea rows="10"cols="30"></textarea></body></html>output

WHAT IS CSS?Css stands for cascading style sheetsStyles define how to display html elementsStyles were added to html 4.0 to solve a problemExternal style sheets can save a lot of workExternal style sheets are stored in css filesCSS SYNTAXA CSS rule set consists of a selector and a declaration block:

CSS EXAMPLEA css declaration always ends with a semicolon, and declarationgroups are surrounded by curly braces:p {color: red;text-align: center;}CSS SELECTORSCss selectors are used to "find" (or select) html elements based ontheir id, classes, types, attributes, values of attributes and much more.element selectorid selectorclass selector

THE ELEMENT SELECTORThe element selector selects elements based on the element name.p {text-align: center;color: red;}THE ID SELECTORThe id selector uses the id attribute of an html tag to find the specificelement.An id should be unique within a page, so you should use the idselector when you want to find a single, unique element.

<p id=“para1”>hi</p>#para1{text-align: center;color: red;}THE CLASS SELECTORThe class selector finds elements with the specific class.The class selector uses the html class attribute.Html elements with class="center".center{text-align : center;color: red;}

THREE WAYS TO INSERT CSSThere are three ways of inserting a style sheet:External style sheetInternal style sheetInline styleEXTERNAL STYLE SHEETAn external style sheet is ideal when the style is applied to many pages. withan external style sheet, you can change the look of an entire web site bychanging just one file.<head><link rel="stylesheet" type="text/css“ href="mystyle.css"></head>

INTERNAL STYLE SHEETAn internal style sheet should be used when a single document has aunique style. you define internal styles in the head section of an htmlpage, inside the <style> tag, like this:<head><style>body {background-color: linen;}h1 {color: maroon;margin-left: 40px;}</style></head>

INLINE STYLESAn inline style loses many of the advantages of a style sheet (bymixing content with presentation). use this method sparingly!To use inline styles, add the style attribute to the relevant tag. thestyle attribute can contain any css property.EXAMPLE:<h1 style="color:blue;margin-left:30px;">this is aheading.</h1>

STYLING LINKSLinks can be styled with any css property (e.g. color, font-family,background, etc.).The four links states are:A:LINK - A normal, unvisited linkA:VISITED - A link the user has visitedA:HOVER - A link when the user mouses over itA:ACTIVE - A link the moment it is clicked

EXAMPLE:/* UNVISITED LINK */a:link {color: #ff0000;}/* VISITED LINK */a:visited {color: #00ff00;}/* MOUSE OVER LINK */a:hover {color: #ff00ff;}/* SELECTED LINK */a:active {color: #0000ff;}

LISTIn html, there are two types of lists: Unordered lists - the list items are marked with bullets Ordered lists - the list items are marked with numbers or lettersul {list-style-image: url('sqpurple.gif');}ul {list-style-type: circle;}ol{list-style-type: upper-roman;}

TABLE BORDERSTo specify table borders in css, use the border property.table,th,td{border : 1px solid black;}COLLAPSE BORDERSThe border-collapse property sets whether the table borders arecollapsed into a single border or separated:table{border-collapse: collapse;}table,th,td{border : 1px solid black;}

TABLE WIDTH, HEIGHT, TEXT ALIGNMENT ANDPADDINGWidth and height of a table is defined by the width and height properties.table{width: 100%;}th{height: 50px;}td{text-align: right;padding: 15px;}

THE CSS BOX MODELAll html elements can be considered as boxes. in css, the term "box model"is used when talking about design and layout.The image below illustrates the box model:Explanation of the different parts:Content - The content of the box, where text and images appearPadding - Clears an area around the content. The padding is transparentBorder - A border that goes around the padding and contentMargin - Clears an area outside the border. The margin is transparent

Client-side programming with JavaScriptScripts vs. programsJavaScript vs. JScript vs. VBScriptCommon tasks for client-side scriptsJavaScriptData types & expressionsControl statementsFunctions & librariesStrings & arraysDate, document, navigator, user-defined classes

CLIENT-SIDE PROGRAMMING Client-side programmingPrograms are written in a separate programming (or scripting)languagee.g., JavaScript, JScript, VBScriptPrograms are embedded in the HTML of a Web page, with(HTML) tags to identify the program componente.g., <script type="text/javascript"> … </script>The browser executes the program as it loads the page,integrating the dynamic output of the program with the staticcontent of HTMLCould also allow the user (client) to input information andprocess it, might be used to validate input before it’s submittedto a remote server

JAVASCRIPTJavascript code can be embedded in a web page using <script> tags<html><!–- COMP519 js01.html 16.08.06 --><head><title>JavaScript Page</title></head><body><script type="text/javascript">// silly code to demonstrate outputdocument.write("<p>Helloworld!</p>");document.write(" <p>How are <br/> "+" <i>you</i>?</p> ");</script><p>Here is some static text aswell.</p></body></html>document.write displays text inthe page text to be displayed caninclude HTML tags the tags areinterpreted by the browser whenthe text is displayed as inC++/Java, statements end with ;but a line break might also beinterpreted as the end of astatement (depends uponbrowser).JavaScript commentssimilar to C++/Java// starts a single line comment/*…*/ enclose multi-linecomments

JAVASCRIPT DATA TYPES & VARIABLESJavascript has only three primitive data typesSTRING : "FOO" 'HOW DO YOU DO?' "I SAID 'HI'." ""NUMBER: 12 3.14159 1.5E6BOOLEAN : TRUE FALSE *FIND INFO ON NULL, UNDEFINED<html><!–- COMP519 js02.html 16.08.06 --><head><title>Data Types and Variables</title></head><body><script type="text/javascript">var x, y;x= 1024;y=x; x = "foobar";document.write("<p>x = " + y + "</p>");document.write("<p>x = " + x + "</p>");</script></body></html>

JAVASCRIPT OPERATORS & CONTROLSTATEMENTS<html><!–- COMP519 js03.html 08.10.10 --><head><title>Folding Puzzle</title></head><body><script type="text/javascript">var distanceToSun = 93.3e6*5280*12;var thickness = .002;var foldCount = 0;while (thickness < distanceToSun) {thickness *= 2;foldCount++;}document.write("Number of folds = " +foldCount);</script></body></html>standard C++/Java operators &control statements are provided inJavaScript• +, -, *, /, %, ++, --, …• ==, !=, <, >, <=, >=• &&, ||, !,===,!==• if , if-else, switch• while, for, do-while, …PUZZLE: Suppose you took apiece of paper and folded it inhalf, then in half again, and so on.How many folds before thethickness of the paper reachesfrom the earth to the sun?*Lots of information is availableonline

JAVASCRIPT MATH ROUTINES<html><!–- COMP519 js04.html 08.10.10 --><head><title>Random Dice Rolls</title></head><body><div style="text-align:center"><script type="text/javascript">var roll1 = Math.floor(Math.random()*6) + 1;var roll2 = Math.floor(Math.random()*6) + 1;document.write("<img src='http://www.csc.liv.ac.uk/"+"~martin/teaching/comp519/Images/die" +roll1 + ".gif‘ alt=‘dice showing ‘ + roll1 />");document.write("  ");document.write("<img src='http://www.csc.liv.ac.uk/"+"~martin/teaching/comp519/Images/die" +roll2 + ".gif‘ alt=‘dice showing ‘ + roll2 />");</script></div></body></html>The built-in Mathobject containsfunctions andconstantsMath.sqrtMath.powMath.absMath.maxMath.minMath.floorMath.ceilMath.roundMath.PIMath.EMath.randomfunction returns areal number in [0..1)

INTERACTIVE PAGES USING PROMPT<html><head><title>Interactive page</title></head><body><script type="text/javascript">var userName = prompt("What is your name?", "");var userAge = prompt("Your age?", "");var userAge = parseFloat(userAge);document.write("Hello " + userName + ".")if (userAge < 18) {document.write(" Do your parents know " +"you are online?");}else {document.write(" Welcome friend!");}</script><p>The rest of the page...</p></body></html>crude user interaction cantake place using prompt1st argument: the promptmessage that appears in thedialog box2nd argument: a defaultvalue that will appear in thebox (in case the user entersnothing)the function returnsthe value entered by the userin the dialog box (a string)if value is a number, mustuse parseFloat (or parseInt)to convertforms will provide a betterinterface for interaction(later)

USER-DEFINED FUNCTIONS Function definitions are similar to c++/java, except: No return type for the function (since variables are loosely typed) No variable typing for parameters (since variables are loosely typed) By-value parameter passing only (parameter gets copy of argument)function isPrime(n)// Assumes: n > 0// Returns: true if n is prime, else false{if (n < 2) {return false;}else if (n == 2) {return true;}else {for (var i = 2; i <= Math.sqrt(n); i++) {if (n % i == 0) {return false;}}return true;}}Can limit variable scopeto the function.if the first use of avariable is precededwith var, then thatvariable is local to thefunctionfor modularity, shouldmake all variables in afunction local

STRING EXAMPLE: PALINDROMESfunction strip(str)// Assumes: str is a string// Returns: str with all but letters removed{var copy = "";for (var i = 0; i < str.length; i++) {if ((str.charAt(i) >= "A" && str.charAt(i) <= "Z")||(str.charAt(i) >= "a" && str.charAt(i) <="z")) {copy += str.charAt(i);}}return copy;}function isPalindrome(str)// Assumes: str is a string// Returns: true if str is a palindrome, else false{str = strip(str.toUpperCase());for(var i = 0; i < Math.floor(str.length/2); i++) {if (str.charAt(i) != str.charAt(str.length-i-1)) {return false;}}return true;}suppose we want totest whether a word orphrase is apalindrome

<html><!–- COMP519 js09.html 11.10.2011 --><head><title>Palindrome Checker</title><script type="text/javascript">function strip(str){// CODE AS SHOWN ON PREVIOUS SLIDE}function isPalindrome(str){// CODE AS SHOWN ON PREVIOUS SLIDE}</script></head><body><script type="text/javascript">text = prompt("Enter a word or phrase", "Madam, I'm Adam");if (isPalindrome(text)) {document.write("'" + text + "' <b>is</b> a palindrome.");}else {document.write("'" + text + "' <b>is not</b> a palindrome.");}</script></body></html>

JAVASCRIPT ARRAYS• Arrays store a sequence of items, accessible via an indexsince javascript is loosely typed, elements do not have to be the same type• To create an array, allocate space using new (or can assign directly)• ITEMS = NEW ARRAY(10); // ALLOCATES SPACE FOR 10 ITEMS• ITEMS = NEW ARRAY(); // IF NO SIZE GIVEN, WILL ADJUST DYNAMICALLY• ITEMS = [0,0,0,0,0,0,0,0,0,0]; // CAN ASSIGN SIZE & VALUES []• To access an array element, use [] (as in c++/java)• FOR (I = 0; I < 10; I++) {• ITEMS[I] = 0; // STORES 0 AT EACH INDEX• }• The length property stores the number of items in the array• FOR (I = 0; I < ITEMS.LENGTH; I++) {• DOCUMENT.WRITE(ITEMS[I] + "<BR>"); // DISPLAYS ELEMENTS• }

ARRAY EXAMPLE<html><!–- COMP519 js10.html 11.10.2011 --><head><title>Die Statistics</title><script type="text/javascript"src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js"></script></head><body><script type="text/javascript">numRolls = 60000;dieSides = 6;rolls = new Array(dieSides+1);for (i = 1; i < rolls.length; i++) {rolls[i] = 0;}for(i = 1; i <= numRolls; i++) {rolls[randomInt(1, dieSides)]++;}for (i = 1; i < rolls.length; i++) {document.write("Number of " + i + "'s = " +rolls[i] + "<br />");}</script></body></html>suppose we want tosimulate die rolls andverify even distributionkeep an array ofcounters:initialize each count to0each time you roll X,incrementrolls[X]display each counter

DATE OBJECTString & array are the most commonly used objects in javascriptOther, special purpose objects also existThe date object can be used to access the date and timeTo create a date object, use new & supply year/month/day/… as desiredToday = new date(); // sets to current date & timeNewyear = new date(2002,0,1); //sets to jan 1, 2002 12:00amMETHODS INCLUDE:newyear.getyear()newyear.getmonth()newyear.getday()newyear.gethours()newyear.getminutes()newyear.getseconds()newyear.getmilliseconds()

DATE EXAMPLE<html><!–- COMP519 js11.html 16.08.2006 --><head><title>Time page</title></head><body>Time when page was loaded:<script type="text/javascript">now = new Date();document.write("<p>" + now + "</p>");time = "AM";hours = now.getHours();if (hours > 12) {hours -= 12;time = "PM"}else if (hours == 0) {hours = 12;}document.write("<p>" + hours + ":" +now.getMinutes() + ":" +now.getSeconds() + " " +time + "</p>");</script></body></html>by default, a date will bedisplayed in full, e.g.,Sun Feb 03 22:55:20GMT-0600 (CentralStandard Time) 2002can pull out portions of thedate using the methods anddisplay as desiredhere, determine if "AM"or "PM" and adjust sohour between 1-1210:55:20 PM

JavaScript and HTML validatorsIn order to use an HTML validator, and not get error messagesfrom the JavaScript portions, you must “mark” the JavaScipt sectionsin a particular manner. Otherwise the validator will try to interpretthe script as HTML code.To do this, you can use a markup like the following in your inlinecode (this isn’t necessary for scripts stored in external files).<script type=“text/javascript”> // <![CDATA[document.write(“<p>The quick brown fox jumped over the lazydogs.</p>”); // **more code here, etc.</script>

<!DOCTYPE html><html><head><script>function validateForm() {var x = document.forms["myForm"]["fname"].value;if (x==null || x=="") {alert("First name must be filled out");return false;}}</script></head><body><form name="myForm" action="demo_form.asp" onsubmit="returnvalidateForm()" method="post">First name: <input type="text" name="fname"><input type="submit" value="Submit"></form></body></html>

Movatterモバイル変換

Change Language

An Overview of HTML, CSS & Java Script

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to An Overview of HTML, CSS & Java Script

Recently uploaded

An Overview of HTML, CSS & Java Script