• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html,javascript & css

Html,javascript & css



A beginner guide to HTML - CSS - Javascript

A beginner guide to HTML - CSS - Javascript



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.linkedin.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Html,javascript & css Html,javascript & css Presentation Transcript

    • HTML, JAVASCRIPT & CSS Web is a book outlet and our website is a book
    • Agenda • • • • • Basics to Html, CSS, JavaScript Where this fits in Website development Debugging Examples Q/A
    • Introduction • Core Concept of web development • • HTML + CSS + JavaScript Content + Style + Behavior
    • HTML • What? • Web server: a system on the internet contains one or more web site • Web site: a collection of one or more web pages • Web pages: single disk file with a single file name • Home pages: first page in website o What for ? • Think about the sort of information(content) you want to put on the Web. • Set the goals for the Web site. • Organize your content into main topics. • Come up with a general structure for pages and topics.
    • HTML
    • HTML • • HTML is not a programming language, it is a markup language HTML markup tags are usually called HTML tags o o o o • • • HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags HTML documents describe web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page Note: • • • • 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 • • When you save an HTML file, you can use either the .htm or the .html file extension Elements: Start tag * <p> <a href="default.ht m" > <br /> Element content End tag * This is a </p> paragraph This is a link </a>
    • HTML • HTML Attributes o o o o • 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“ Sample Attributes: Attribute Value Description class classname Specifies a classname for an element id id Specifies a unique id for an element style style_defin Specifies an inline style for an ition element title tooltip_tex Specifies extra information t about an element (displayed as a tool tip)
    • HTML • Website Layouts o • HTML Different Doctypes o • External style sheet Internal style sheet Inline styles Html head element: o • The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. There are three ways of inserting a style sheet: o o o • Most websites have put their content in multiple columns (formatted like a magazine or newspaper) Head,Script,Base,Style,meta,title The HTML noscript Element o The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.
    • HTML
    • CSS • • • The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file Separates design elements from structural logic Rule Structure:
    • CSS • Class Selectors <H1 CLASS=“warning”>Danger!</H1> <P CLASS=“warning”>Be careful…</P> ……. In your HTML code H1.warning {color: red;} OR to an entire class… .warning {color:red;} • Css are not even • Make sure your CSS properties are supported
    • CSS Pattern Meaning * Universal selector: matches any element. E Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P). EF Descendant selector: matches any F element that is a descendant of an E element. E>F Child selector: matches any F element that is a child of an element E. E+F Adjacent siblings selector: Matches any F element immediately preceded by an element E. E[foo] Attribute selector: matches any E element with the "foo" attribute set (whatever the value). E[foo="warning"] Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning". E[foo~="warning"] Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". E[lang|="en"] Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en“ (e.g. en-US). DIV.warning HTML only. The same as DIV[class~="warning"]. E#myid ID selector: matches any E element ID equal to "myid". E:lang(c) Pseudo-class selector: matches element of type E if it is in (human) language c (the document language specifies how language is determined). E:first-child Pseudo-class selector: matches element E when E is the first child of its parent. E:link, E:visited Pseudo-class selector: matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). E:active, E:hover, E:focus Dynamic Pseudo-class selector: matches E during certain user actions. E:first-line, E:first-letter Pseudo-element selector: matches the first formatted line or letter of element E.
    • JavaScript • • • • • • • • • JavaScript: The World's Most Misunderstood Programming Language JavaScript is THE scripting language of the Web. JavaScript is a dynamic scripting language that allows you to build interactivity into otherwise static HTML pages JavaScript Functions should be defined in the <head> tag JavaScript runs in client software. JavaScript enables shopping carts, form validation, calculations, special graphic and text effects, image swapping, image mapping, clocks, and more. JavaScript is an interpreted language (means that scripts execute without preliminary compilation) With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon (;). Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.
    • JavaScript • Events o Events are mostly caused by user actions. o We want our JavaScript program to react to certain events. This can be done with the help of event-handlers o example of the event-handler onClick: <form><input type="button" value="Click me" onClick="alert(’Yo’)"></form> why not onClick="alert(“Yo”)“? o Events are normally used in combination with functions, and the function will not be executed before the event occurs! o Eg: <html> <head> <script type="text/javascript"> <!-- function popup() { alert("Hello World") } //--> </script> </head> <body> <input type="button" value="Click Me!" onclick="popup()"><br /> <a href="#" onmouseover="" onMouseout="popup()"> Hover Me!</a> </body> </html>
    • JavaScript • Events Event Attribute Description DOM click onclick The event occurs when the user clicks on an element 2 dblclick ondblclick The event occurs when the user double-clicks on an element 2 mousedown onmousedown The event occurs when a user presses a mouse button over an element 2 mousemove onmousemove The event occurs when a user moves the mouse pointer 2 over an element mouseover onmouseover The event occurs when a user mouse over an element mouseout onmouseout The event occurs when a user moves the mouse pointer 2 out of an element mouseup onmouseup The event occurs when a user releases a mouse button over an element 2 2
    • JavaScript • Variables o Variables are used to store data. o A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. o Rules for variable names: o Variable names are case sensitive o They must begin with a letter or the underscore character • strname – STRNAME (not same)
    • JavaScript • Event Hierarchy o Take the case of a Login Page
    • JavaScript • JavaScript No's o Global variables • var foo = "global"; //Don't do this function(){ var bar = "local"; //This is ok }(); • function(){ foo = "global"; //Don't do this var bar = "local"; //This is ok }(); o Inline JavaScript • Inline JavaScript is any JavaScript code that is mixed with HTML. There are two primary ways in which you can do this: o Eval • Also like most other programming languages, using eval in JavaScript is considered.. well, evil. If you find yourself using eval, there’s a big chance your approach is wrong. • Eg:var strJSON = '{"result":true,"count":1}'; var objJSON = eval("(function(){return " + strJSON + ";})()"); alert(objJSON.result); alert(objJSON.count);
    • JavaScript • JavaScript No's o alert("In your face") • Most of the time, using the alert method is unnecessary. The most prevalent misuse of this method is for debugging purposes, but using tools such as Firebug and equivalents for other browsers is a much better and more efficient way to debug JavaScript code. o element.style • You can change an element’s style directly by changing properties on its style property: • el.style.backgroundColor = "#ff0000";el.style.color = "#00ff00"; This is usually not a good idea because you want to keep the styling separate from the behaviour and changing an element’s style directly will override anything you’ve defined in your CSS. Better way here is to add a class to the element
    • Debugging • Firebug
    • Q/A