Download presentation
Presentation is loading. Please wait.
1
Chapter 2 HTML & CSS
2
Outlines HTML (Hypertext Markup Language) CSS (Cascading Style Sheet)
3
HTML (Hypertext Markup Language)
HTML is the lingua franca for publishing hypertext on the World Wide Web Define tags <html><body> <head>….etc Allow to embed other scripting languages to manipulate design layout, text and graphics Platform independent Current version is 4.x and in February W3C released the first draft of a test suite 4.01 For more info:
4
HTML (Hypertext Markup Language)
# Example 1 <HTML> <head> <title>Hello World</title> </head> <body bgcolor = “#000000”> <font color = “#FFFFFF”> <H1>Hello World</H1> </font></body> </HTML> Hello World HTML Source Code Output
5
HTML (Hypertext Markup Language)
Common features Tables Frame Images, Hyperlink, etc…
6
HTML (Hypertext Markup Language)
Tables <table width=“100px”> <tr> <td>Row 1</td><td>Row 2</td> </tr> <td>Row 3</td><td>Row 4</td> </table> HTML Source Code Row 1 Row 2 Row 3 Row 4 Output
7
HTML (Hypertext Markup Language)
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
8
HTML (Hypertext Markup Language)
Image <html> <body> <img src=“flower.jpg”> </body> </html> HTML Source Code Output
9
HTML (Hypertext Markup Language)
Image <html> <body> <a href=“ </body> </html> HTML Source Code Output
10
CSS (Cascading Style Sheet)
Simple mechanism for adding style to web page Code be embedded into the HTML file HTML tag: <style type=“text/css”>CODE</style> Also be in a separate file FILENAME.css <link rel=“stylesheet” href=“scs.css” type=“text/css”> Style types mainly include: Font Color Spacing
11
CSS (Cascading Style Sheet)
Controls format: Font, color, spacing Alignment User override of styles Aural CSS (non sighted user and voice-browser) Layers Layout User Interface
12
CSS (Cascading Style Sheet)
Client’s browser dependable Example code: p,h1,h2 { margin-top:0px; margin-bottom:100px;padding:20px 40px 0px 40px; } More info:
13
CSS (Cascading Style Sheet)
# Example] <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> HTML Source Code
14
CSS (Cascading Style Sheet)
This is a heading This is a paragraph
Similar presentations
