Seasion5

1,346 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,346
On SlideShare
0
From Embeds
0
Number of Embeds
872
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Seasion5

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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)

×