![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}](https://image.slidesharecdn.com/webdesigning-090514143802-phpapp02/85/Web-Designing-19-320.jpg)
Web Designing
- 1. Meher Anand Abhinav Krishnamoorthy
- 2. Client Server Model Send request for webpage Receive request Receive Data Send data
- 3. About HTML Hypertext Markup Language Idea proposed in 1980 Continuously upgraded since then Latest version HTML 5 in January 2008 Case - insensitive
- 4. 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>
- 5. 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 >
- 6. Hello World Page <html> <head> <title>Title of the page</title> </head> <body> <p align=center>Hello World!!!</p> </body> </html>
- 7. 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
- 8. 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
- 9. Example 1
- 10. 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
- 11. What is CSS? CSS stands for C ascading S tyle S heets 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
- 12. 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
- 13. 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” }
- 14. 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 }
- 15. 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 }
- 16. 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}
- 17. 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>
- 18. 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}
- 19. 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}
- 20. 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 }
- 21. 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
- 22. 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>
- 23. 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>
- 24. Examples 5 & 6
- 25. 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
- 26. 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 here return something; }
- 27. Hello World Program <html> <head> <title>My Page</title> </head> <body> <script type="text/javascript"> document.write(‘<b>Hello World!!!</b>'); </script> </body> </html>
- 28. Control Statements if…else if… else if… else for while do… while switch… case break continue
- 29. Example 8
- 30. 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”;
- 31. Example 9 & Example 10 This will be come clearer in
- 32. 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
- 33. 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
- 34. Thank You!