Chapter 2 HTML CSS Outlines q HTML Hypertext
![CSS (Cascading Style Sheet) # Example] <html> <head> <style> body {background-color: powderblue; } h](https://slidetodoc.com/presentation_image_h/e16f238ac832b99b76faf41afc3b688c/image-13.jpg "CSS (Cascading Style Sheet) # Example] <html> <head> <style> body {background-color: powderblue; } h")
- Slides: 14
Chapter 2 HTML & CSS
Outlines q HTML (Hypertext Markup Language) q CSS (Cascading Style Sheet)
HTML (Hypertext Markup Language) q HTML is the lingua franca for publishing hypertext on the World Wide Web q Define tags <html><body> <head>…. etc q Allow to embed other scripting languages to manipulate design layout, text and graphics q Platform independent q Current version is 4. x and in February W 3 C released the first draft of a test suite 4. 01 q For more info: http: //www. w 3. org/Mark. Up/
HTML (Hypertext Markup Language) # Example 1 <HTML> <head> <title>Hello World</title> </head> <body bgcolor = “#000000”> <font color = “#FFFFFF”> <H 1>Hello World</H 1> </font></body> </HTML> Hello World HTML Source Code Output
HTML (Hypertext Markup Language) q Common features Ø Tables Ø Frame Ø Images, Hyperlink, etc…
HTML (Hypertext Markup Language) q Tables <table width=“ 100 px”> <tr> <td>Row 1</td><td>Row 2</td> </tr> <td>Row 3</td><td>Row 4</td> </tr> </table> HTML Source Code Row 1 Row 2 Row 3 Row 4 Output
HTML (Hypertext Markup Language) q Frame <html> <frameset cols="25%, *, 25%"> <frame src="a. htm"> <frame src="b. htm"> <frame src="c. htm"> </frameset> </html> HTML Source Code First Page Second Page Third Page Output
HTML (Hypertext Markup Language) q Image <html> <body> <img src=“flower. jpg”> </body> </html> HTML Source Code Output
HTML (Hypertext Markup Language) q Image <html> <body> <a href=“http: //www. google. com”>Google</a> </body> </html> HTML Source Code Output
CSS (Cascading Style Sheet) q Simple mechanism for adding style to web page q Code be embedded into the HTML file q HTML tag: <style type=“text/css”>CODE</style> q Also be in a separate file FILENAME. css q HTML tag: <link rel=“stylesheet” href=“scs. css” type=“text/css”> q Style types mainly include: Ø Font Ø Color Ø Spacing
CSS (Cascading Style Sheet) q Controls format: Ø Font, color, spacing Ø Alignment Ø User override of styles Ø Aural CSS (non sighted user and voice-browser) Ø Layers v Layout v User Interface
CSS (Cascading Style Sheet) q Client’s browser dependable q Example code: p, h 1, h 2 { margin-top: 0 px; margin-bottom: 100 px; padding: 20 px 40 px; } q More info: Ø http: //www. w 3. org/Style/CSS/ Ø http: //www. w 3 schools. com/css_intro. asp
CSS (Cascading Style Sheet) # Example] <html> <head> <style> body {background-color: powderblue; } h 1 {color: blue; } p {color: red; } </style> </head> <body> <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </body> </html> HTML Source Code
CSS (Cascading Style Sheet) This is a heading This is a paragraph
