Spring Boot vs Quarkus the ultimate battle - DevoxxUK
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)
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)
