Seasion5
•
1 like•1,525 views
The document discusses various aspects of web page structure and styling including: - Common HTML tags like <html>, <head>, <title>, <body> that provide the structure and metadata for a web page. - CSS is used to style and lay out elements on the page through selectors like classes, IDs, and tags that target specific elements. Properties like font, color, size etc. are used to control styling. - Additional CSS topics covered include links and hover effects, margins and spacing between elements, backgrounds, and headers/banners at the top of pages. External CSS style sheets are linked to pages to manage styles separately from the HTML.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Seasion5
Similar to Seasion5 (20)
Recently uploaded
Recently uploaded (20)
Seasion5
- 1. Web Page structure <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title> F</title> <body> …………… F </body> </html> projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 2. Web Page structure F F F tag body <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> F ก F PHP <link href="style.css" rel="stylesheet" type="text/css" /> ก style Fก ก file style.css projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 3. Tag div span F F F ก ˈ F F <div> </div>,<span> </span> Attribute align ก F F F F (left) ก (center) (right)(center) (right) <span>span1</span><span>span2</span> <div>div2</div><div>div1</div> ก F F F ก F tag div span div F F tag F F span F F F tag F projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 4. Style Sheet Style Sheet ˈ F ก .css F F .class name { attribute:attribute value;attribute:attribute value; attribute:attribute value; } class name ก style Fก div ก span ก <div class=“class name”></div> <span class=“class name”></span> <a class=“class name” ></a> projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 5. Style Sheet tag name { attribute:attribute value; attribute:attribute value;attribute:attribute value; } ก style tag name tag name ก style attribute ก projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 6. Style Sheet F style sheet tag F F attribute style=“” <tag name style=“attribute:attribute value” > projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 7. Font color: ก font-size: ก font-family: font text-decoration: F F ˈ none ก F F F F F ˈtext-decoration: F F ˈ none ก F F F F F ˈ underline F F ก font-style: F F ˈ italic F ก projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 8. Font <link href="style_font.css" rel="stylesheet" type="text/css" /> <div class="style1">Style 1</div> <center>Style 2</center><center>Style 2</center> <a href="http://google.co.th" style="color:green;text- decoration:none" >Google</a> projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 9. Font file style_font.css .style1 { font-family:verdana; font-size:36px;font-size:36px; color:#7D7D7D; font-style: italic; text-decoration:underline; } center { font-size:24px; color:red; } projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 10. Font <div class="style1">Style 1</div> ก style .style1 F style_font.css <center>Style 2</center> ก style center tag name F F tagก style center tag name F F tag center ก tag ก style ก <a href="http://google.co.th" style="color:green;text- decoration:none" >Google</a> ก style tag F attribute style=“” projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 11. ก F link F mouse ก :hover F tag name class name style tag a F a:hover {{ color:gray; text-decoration:underline; } ก ก F mouse tag a F F ก ˈ F F F projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 12. ก F link F mouse .a_class:hover { font-size:14px; font-style:italic;font-style:italic; } ก F tag a attribute class=“a_class” mouse F ก ˈ 14 ˈ projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 13. ก F link F mouse <link href="link_style.css" rel="stylesheet" type="text/css" /> <a href="#" class="a_class">Link1</a><br /> <a href="#">Link2</a><a href="#">Link2</a> href="#" link F ˆ projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 14. ก F link F mouse F link_style.css a { color:black; text-decoration:none; } a:hover { color:blue; text-decoration:underline; } projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 15. ก F link F mouse .a_class { color:green; font-size:12px;font-size:12px; } .a_class:hover { font-size:14px; font-style:italic; } projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 16. ก F F F margin margin-left: ก F F ก F F margin-right: ก F F ก F margin-top: ก F F ก F margin-bottom: ก F F ก F Fmargin-bottom: ก F F ก F F Attribute value ก ก F ก F F ก projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 17. ก F F F margin <div style="margin-left:90px">margin-left</div> <div style="margin-top:90px;margin- left:90px">margin_top</div> margin-left:90px ก ก F F tag div F ก F 90 ก margin-top:90px; ก ก F F tag div F ก F 90 ก projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 18. ก F F F margin ก F F F F ก F F web browser F ก style F tag body <body style="margin-left:0px;margin-top:0px;"> BodyBody </body> F style="margin-left:0px;margin-top:0px;“ ก F ก F projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 19. ก F tag background-color: ก Fก tag F <body style="background-color:black;"></body> ก ก F F ˈ background-image: ก F ˈ ก Fbackground-image: ก F ˈ ก F Attribute value ˈ url( F ) ก background-repeat: ก F ก x ก y attribute value ˂ repeat-x, repeat-y width: ก ก F tag F ˈ px % height: ก Fก tag F ˈ px % F link F mouse projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 20. F ก F Header Fก Web Page <html> <meta http-equiv="Content-Type" content="text/html; charset=TIS-620" /> <title> ก </title> <body style="margin-left:0px;margin-top:0px;"> <link href="background2.css" rel="stylesheet" type="text/css" /> <div class="back_ground_header" align="center"> <br /> <br /> <br /> <span class="font_header"> ก </span> </div> </body> </html> projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)
- 21. F ก F Header Fก Web Page F background2.css .back_ground_header { background-image:url(images/bg.jpg); background-repeat:repeat-x;background-repeat:repeat-x; height:200px; } .font_header { color:white; font-size:36px } projectsoft.biz ก Web Application F PHP MySQL Ajax(jquery)