web designing
TRANSCRIPT
Meher AnandAbhinav Krishnamoorthy
Client Server ModelSend
request for
webpage
Receive
request
Receive Data
Send data
About HTML
Hypertext Markup Language Idea proposed in 1980 Continuously upgraded since then Latest version HTML 5 in January
2008 Case - insensitive
Code Structure
Text is enclosed between tags – an opening tag and a closing tag
<xyz> is an opening tag, </xyz> is a closing tag
Tags can be nested and they must follow stack property, i.e. Last In First Out
<tag1><tag2>Some text here</tag2></tag1>
<tag1><tag2>Some text here</tag1></tag2>
Tag Structure
An opening delimiter the < symbol. This tells the browser that it is encountering a tag.
The tag name. One or more attributes that set
variables for the tag. A closing delimiter, the > symbol.
This marks the end of the tag. Ex:- < p align=center >
Hello World Page
<html><head>
<title>Title of the page</title></head> <body>
<p align=center>Hello World!!!</p></body>
</html>
Standard body
Any sort of content must be enclosed in the <html> tag, i.e. must start and end with the <html> tag
Information about the page such as title, file includes etc must be included in the <head> tag right after the opening html tag
The <body> tag is followed by the main content of the webpage. The body starts right after the head ends
Other Standard Tags <p> - Paragraph <b>, <i>, <u> - Bold, italics,
underline <h1>, <h2>, <h3> - Headings,
decreasing order in terms of size <font> - Control how the text looks like Few exceptions to the opening and
closing tag rule: <img/> - insert an image <br/> - New line
Example 1
Dynamic HTML Disadvantages of using Static HTML?
(Why dynamic HTML) Lesser control over page, very dull and
unattractive, not dynamic (Duh! ) “Dynamic HTML, or DHTML, is a collection
of technologies used together to create interactive and animated websites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.” - Wikipedia
What is CSS?
CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a
problem External Style Sheets can save you a lot of
work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one
CSS – Cascading Style Sheets Designed primarily to separate the
content of the website from the design aspects such as color, layout and styles.
File Extension: .css File type : text/css
1 - Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector { property : value } Ex:- body { color : black }
If the value is multiple words, put quotes around the value:
p { font-family : “sans serif” }
1 – Syntax … If you wish to specify more than one property, you
must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
p { text-align : center ; color : red }
To make the style definitions more readable, you can describe one property on each line, like this:
p { text-align : center ;
color : black ; font-family : arial
}
1 – Syntax …
Grouping You can group selectors. Separate
each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
h1,h2,h3,h4,h5,h6 { color : green }
1 – Syntax …
The class Selector With the class selector you can define
different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align: right}
p.center {text-align: center}
1 – Syntax …
You have to use the class attribute in your HTML document:
<p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
1 – Syntax …
Note: To apply more than one class per given element, the syntax is:
<p class="center green"> This is a paragraph. </p>
The paragraph above will be styled by the class "center" AND the class “green".
.center {text-align: center} .green{color : green}
1 – Syntax …
Add Styles to Elements with Particular Attributes
You can also apply styles to HTML elements with particular attributes.
The style rule below will match all input elements that have a type attribute with a value of "text":
input[type="text"] {background-color: blue}
1 – Syntax …
The id Selector You can also define styles for HTML
elements with the id selector. The id selector is defined as a #.
The style rule below will match the element that has an id attribute with a value of "green":
#green {color: green} The style rule below will match the p element that has an id with a value of "para1":
p#para1 { text-align: center; color: red }
2 – How to insert a Style Sheet External Style Sheet An external style sheet is ideal when the
style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head> <link rel="stylesheet" type="text/css" href=“style.css" />
</head>
Refer Example 4
2 – How to insert a Style Sheet Internal Style Sheet An internal style sheet should be used
when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
<head> <style type="text/css"> hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/image.jpg")}</style> </head>
2 – How to insert a Style Sheet Inline Styles To use inline styles you use the style
attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
Examples 5 & 6
JavaScript With CSS, we can control the looks of
the site We still lack the dynamism JavaScript is a solution to it Commonly confused with Java, but they
are totally different except for the name It is a client-side scripting language
meaning all computation and interpretation is done on the client-side
Resembles C in many ways
Declarations and definitions Variable declaration done using
keyword var Ex:- var my_number=10;
Function declaration done using keyword function Ex:- function my_function(param1,
param2){//Some code herereturn something;}
Hello World Program
<html>
<head>
<title>My Page</title>
</head>
<body>
<script type="text/javascript">
document.write(‘<b>Hello World!!!</b>');
</script></body>
</html>
Control Statements
if…else if… else if… else for while do… while switch… case break continue
Example 8
Document Object Model (DOM) Access elements of HTML and properties of
CSS using DOM Ex:-
document.getElementsByTagName("div")will get all elements with a div tag and create a list of them
Value of a CSS property can be obtained or modified using the DOM equivalent of the CSS property
Ex: document.body.style.backgroundColor=“black”;
Example 9 & Example 10
This will be come clearer in
DOM (contd…) DOM can be used for really cool effects A simple one is demonstrated in Example
11 High amount of control on page content
after combining HTML, CSS and JavaScript Java Applets, Flash Videos and other
plugins can be embedded in webpages but they require special capabilities on the client side
Javascript requires only a good modern browser
Add more power to web pages Have server side scripting in addition
to client side scripting User management, data
management, session management Combination of PHP and MySQL
extremely popular. Each is one of the most efficient in their respective fields
To be covered in a future session
Thank You!