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

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">  </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

Html,javascript & css

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Html,javascript & css (20)

Recently uploaded (20)

Html,javascript & css