html,javascript & css

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 is not a programming language, it is a markup language

• HTML markup tags are usually called HTML tags o HTML tags are keywords surrounded by angle brackets like <html>

o HTML tags normally come in pairs like <b> and </b>

o The first tag in a pair is the start tag, the second tag is the end tag

o 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 * Element content End tag *

<p> This is a paragraph

</p>

<a href="default.htm" >

This is a link </a>

<br />

HTML • HTML Attributes

o HTML elements can have attributes

o Attributes provide additional information about an element

o Attributes are always specified in the start tag

o 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_definition

Specifies an inline style for an element

title tooltip_text

Specifies extra information about an element (displayed as a tool tip)

HTML • Website Layouts

o Most websites have put their content in multiple columns (formatted like a magazine or newspaper)

• HTML Different Doctypes 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 External style sheet

o Internal style sheet

o Inline styles

• Html head element: o 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.

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).

E F 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">  </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 over an element

2

mouseover onmouseover The event occurs when a user mouse over an element 2

mouseout onmouseout The event occurs when a user moves the mouse pointer out of an element

2

mouseup onmouseup The event occurs when a user releases a mouse button over an element

2

http://www.w3schools.com/jsref/event_onclick.asp

http://www.w3schools.com/jsref/event_ondblclick.asp

http://www.w3schools.com/jsref/event_onmousedown.asp

http://www.w3schools.com/jsref/event_onmousemove.asp

http://www.w3schools.com/jsref/event_onmouseover.asp

http://www.w3schools.com/jsref/event_onmouseout.asp

http://www.w3schools.com/jsref/event_onmouseup.asp

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

html,javascript & css

Technology