สวัสดีครับ วันนี้มาพบกันอีกแล้ว ทุกคนคงเคยเล่นเว็บไซต์ต่างๆในโลกอินเตอร์เน็ตมามากมายแล้ววันนี้ขอนำเสนอการเขียน html ของส่วนต่าง ๆ ภายในเว็บไซต์ให้ทุกคนได้รับชมกันนะครับ เรามาเริ่มกันเลย
ตัวอย่างที่ให้ดูนี้ มาจากการสร้างเว็บคร่าว ๆของผมนะครับ
นี่คือเว็บไซต์ที่ผมสร้างนะครับจะมีหน้าตาดังนี้
หน้าแรกนะครับ จะเป็นหน้า Home มาดูหน้าตาเว็บแล้วมาดู Code Html กันดีกว่า
หน้า Home
ในทุกๆการเขียน html เลยเราต้องเขียน
<html>โดยทุกๆ ส่วนต้องอยู่ระหว่าง</html>
และส่วนใหญ่ๆของหน้าเว็บจะมี
<head></head> // ส่วนหัวของเว็บ
<body></body> // ส่วนตัวเว็บ เป็นส่วนเนื้อหาของเว็บ
<footer></footer> // ส่วนท้ายของเว็บ
มาเริ่มส่วนที่ 1
<head></head> เลยดีกว่า
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
//ส่วนนี้ คือส่วนที่ใช้แสดงภาษาทุกภาษา โครงสร้างภาษา
<title>Car Gallery</title>
// คือส่วน title ของตัวเว็บ
<link href=”css/reset.css” rel=”stylesheet” type=”text/css” />
<link href=”css/global.css” rel=”stylesheet” type=”text/css” />
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
// เขียน CSS จากภายนอกเข้าสู่ HTML
<script src=’js/jquery.js’></script>
<script src=’js/cycle.js’></script>
<script src=’js/easing.js’></script>
<script>
$(document).ready(function(){
$(‘.slideshow’).cycle({
fx: ‘scrollLeft’,
speed: ‘slow’,
timeout: 2000,
height: 361,
next: ‘#next2’,
prev: ‘#prev2’
});
$(‘#slideshow2’).cycle({
fx: ‘all’,
randomizeEffects: false,
easing: ‘easeInBack’ // easing supported via the easing plugin
});
for(i=0;i<=7;i++){
if(i%4==0 && i!=0){
$(‘.photo_gallery’).append(‘<div class=”clear”></div>’);
}
$(‘.photo_gallery’).append(‘<a onmouseover=”popimage(‘+i+’,2)” onmouseout=”popimage(‘+i+’,1)” href=”#”><img id=”img’+i+'” src=”images/’+(i+1)+’.jpg” width=”71″ height=”53″ align=”loading” /></a>’);
}
})
var popimage=function(count,func){
if(func==2){
$(‘#img’+count).css(‘margin-top’,’-5px’);
}else{
$(‘#img’+count).css(‘margin-top’,’0px’);
}
}
</script>
// ส่วนของ JAVASCRIPT เข้าสู่ HTML
</head>
ส่วนที่ 2 <body></body> ในส่วนนี้ เราจะทำการเขียน เมนู ,Sildshow ของเว็บที่มาจาก Javascript , Photo Gallery ,New and Events , และส่วนพูดคุยของทางเว็บ
<body>
<div class=”mediaguru_navbar”>
<div class=”mediaguru_wrapper”>
// คือคำสั่ง ดึงค่าจาก CSS มาใช้งาน
<ul>
<li class=”selected”><a href=”index.html”>Home</a></li>
<li><a href=”aboutus.html”>About us</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”news.html”>News/Events</a></li>
<li><a href=”gallery_categories.html”>Gallery</a></li>
<li><a href=”contactus.html”>Contact us</a></li>
</ul>
// ส่วนของเมนูต่างๆ โดยจะมี หน้า Home , About us , Services ,New/Events ,Gallery และ Contact us
</div>
</div>
<div class=”slider”>
<div class=”mediaguru_wrapper”>
<div class=’slideshow’>
<img src=’images/slider_img.jpg’>
<img src=’images/slider_img1.jpg’>
</div>
<a href=”#” id=’prev2′ class=”prev”>prev</a>
<a href=”#” id=’next2′ class=”next”>next</a>
</div>
</div>
// ส่วนของ Sildeshow เรียก javascript
ส่วนที่ 3 footer ในส่วนนี้ ได้ทำการเขียนรวมกันกับ body ทำให้อยู่ครอบ ของ body ทั้งหมด
<div class=”footer”>
<div class=”footer_top”>
<div class=”mediaguru_wrapper”>
<div class=”photo_gallery”>
<h2>Photo Gallery</h2>
<br />
<!–<a href=”#”><img src=”images/1.jpg” width=”71″ height=”53″ align=”loading” /></a>
<a href=”#”><img src=”images/2.jpg” width=”71″ height=”53″ align=”loading” /></a>
<a href=”#”><img src=”images/3.jpg” width=”71″ height=”53″ align=”loading” /></a>
<a href=”#”><img src=”images/4.jpg” width=”71″ height=”53″ align=”loading” class=”nomargin” /></a>
<div class=”clear”></div>
<a href=”#”><img src=”images/5.jpg” width=”71″ height=”53″ align=”loading” /></a>
<a href=”#”><img src=”images/6.jpg” width=”71″ height=”53″ align=”loading” /></a>
<a href=”#”><img src=”images/7.jpg” width=”71″ height=”53″ align=”loading” /></a>
<a href=”#”><img src=”images/8.jpg” width=”71″ height=”53″ align=”loading” class=”nomargin” /></a>–>
</div>
// ส่วนนี้คือส่วนของ Photo Gallery ทั้งหมด โดยเรียกใช้ CSS จากภายนอก และ ใส่รูปเข้ามาในส่วนนี้
<div class=”news”>
<h2>News and Events</h2>
<img src=”images/toyota.png” width=”84″ height=”65″ alt=”loading” />
<p>โตโยต้าเปิดตัววิออส แฮทช์แบ็กและยาริส แอล ซีดานที่งานกวางโจว มอเตอร์โชว์ซึ่งเป็นการขยายไลน์ผลิตภัณฑ์ให้ครอบคลุมความต้องการของลูกค้ามากขึ้น</p>
<p> </p>
</div>
//ส่วนนี้ คือ News and Event ในส่วนนี้ ก็เช่นกันใช้ CSS จากภายนอกมาช่วย แล้ว ใส่รูป แล้วข้อความลงไป
<div class=”testimonial”>
<h2> </h2>
<div class=”testimonial_text”>
<p>สวัสดีครับ ยินดีต้อนรับสู่เว็บ Car Gallery นะครับท่านจะได้รับข่าวสารเกี่ยวกับรถยนต์ต่างๆ รวมถึง รวมรูปรถยี่ห้อต่างๆอยู่ gallery ของทางเว็บ</p>
<span> </span>
</div>
<span class=”person_name”>-By Pichayut Kositbenjapol</span>
</div>
<div class=”clear”></div>
</div>
</div>
//ส่วนนี้คือ ส่วนพูดคุยจากทางเว็บ ก็ใช้ CSS จากภายนอกเช่นกัน และ ใส่ข้อความลงไป
<div class=”footer_bottom”>
<div class=”mediaguru_wrapper”>
<p>Copyright ©Pichayut Kositbenjapol.</p>
<div class=”socialmedia”></div>
</div>
</div>
</div>
// ส่วนนี้คือ ส่วน Copyright ก็ใช้ CSS จากภายนอกเช่นกัน แล้ว เขียนข้อความลงไป
</body>
จบไปแล้วนะ ครับจากหน้า Home ที่ใช้ HTML เขียนขึ้นมา ส่วนต่อไปเรามาดูส่วน CSS กันต่อกันนะครับ
ในส่วนของ CSS นี้คือส่วนที่ ช่วยตกแต่งหน้าเว็บให้สวยงาม เรามาดูส่วนต่างๆกันเลยดีกว่า
h2{ font-size:22px; margin-bottom:10px; line-height:22px;}
.nomargin{ margin-right:0 !important;}
.mediaguru_wrapper{
margin:0 auto;
width:1000px;
}
/*mediaguru_header start*/
.mediaguru_header{
height:105px;
background:#3c0405;
}
.mediaguru_header .biz-logo{
margin:13px 0 0 60px;
float:left;
}
.mediaguru_header .cal{
float:right;
width:185px;
margin:30px 93px 0 0;
}
.mediaguru_header .cal img{
float:left;
margin-right:20px;
}
.mediaguru_header .cal p {
color:#e50000;
}
/*mediaguru_header end*/
/*mediaguru_navbar star*/
.mediaguru_navbar{
background:url(../images/navbar_bg.jpg) repeat-x left top;
height:40px;
}
.mediaguru_navbar ul li{
float:left;
}
.mediaguru_navbar ul li.selected a,
.mediaguru_navbar ul li a:hover{
background:url(../images/arrow.png) no-repeat center 28px;
color:#CCC;
}
.mediaguru_navbar ul li a{
color:#fff;
display:block;
line-height:40px;
padding:0 17px;
}
// ส่วนหัวของเว็บและเมนูของเว็บ
/*slider start*/
.slider{
background:url(../images/slider-bg.jpg) repeat-x left top;
height:361px;
}
.slider .mediaguru_wrapper{
/*background:url(../images/slider_img1.jpg) center center;*/
height:361px;
position:relative;
}
.slider .mediaguru_wrapper a.prev{
background:url(../images/prev.png) no-repeat left top;
position:absolute;
top:140px;
left:0;
text-indent:-9999px;
}
.slider .mediaguru_wrapper a.next{
background:url(../images/next.png) no-repeat left top;
position:absolute;
top:140px;
text-indent:-9999px;
right:0;
}
/*slider end*/
//ส่วนนี้ คือส่วน slider ของเว็บ
/*content start*/
.mediaguru_content{
padding-top:20px;
padding-bottom:20px;
}
.mediaguru_content h2{
color:#d50000
}
/*content end*/
//ส่วนของ content ของทุกหน้า
/*gallery start*/
.gallery
.gallery{
}
.gallery ul li{
float:left;
width:184px;
margin-right:20px;
margin-bottom:20px;
}
.gallery a img{
float:left;
}
.gallery li a span{
display:none;
text-align:center;
width:184px;
opacity:0.7;
color:#fff;
margin-top:-34px;
height:30px;
float:left;
padding-top:4px;
background:#000;
}
.gallery li a:hover span{
display:block;
}
/*gallery end*/
//ส่วนนี้ คือ ส่วนของ gallery จะอยู่ในหน้าของ gallery
/*———-contact us page————-*/
.contactus_block{ width:100%;}
.address h3{ color:#d50000;}
.form{ width:500px; float:left; padding-bottom:15px;}
.form p span{color:#FF0000;}
.form table{}
.form table td{}
.form table td label{}
.form table td input[ type=text]{ padding:4px;}
.form table td input[ type=password]{ padding:4px;}
.form table td input[ type=textarea]{ padding:4px;}
.form table td label span{ color:#F00;}
.form table td input.submit{ border:0; border-radius:12px; background:#005353; color:#fff; -moz-border-radius:12px; -webkit-border-radius:12px; cursor:pointer; width:100px; margin-top:10px;}
.form table td input.submit:hover{color:#FFFFFF;background:#0068ae; }
.address{ float:left; margin-right:20px;}
.address h3{ font-size:21px; border-bottom:1px solid #0068ae; margin-bottom:20px; line-height:40px; padding-left:40px; background:url(../images/contact.png) no-repeat left top;}
.address p{line-height:22px;}
.address p span{margin-left:4px; font-weight:bold;}
.map{margin-top:20px; float:left;}
/*———-contact us page end————-*/
//ส่วนนี้คือส่วน contact ในหน้า contact us
/*footer_top start*/
.footer{
}
.footer_top{
background:#680000;
padding-bottom:20px;
}
.footer_top .photo_gallery{
float:left;
margin-top:20px;
margin-right:27px;
}
.footer_top .photo_gallery h2{
color:#fff;
}
.footer_top .photo_gallery img{
float:left;
margin-right:12px;
margin-bottom:10px;
}
// ส่วนนี้คือ ส่วนของ photo gallery
.footer_top .news{
float:left;
margin-top:20px;
margin-right:22px;
width:319px;
}
.footer_top .news h2{
color:#fff;
}
.footer_top .news img{
float:left;
margin-right:20px;
}
.footer_top .news p{
color:#fff;
text-align:justify;
}
.footer_top .testimonial{
float:left;
margin-top:20px;
width:266px;
}
//ส่วนนี้ คือส่วน News and Events
.footer_top .testimonial_text{
background:#9c0000;
padding:16px 10px 20px 15px;
border:1px solid #9c0000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
position:relative;
}
.footer_top .testimonial h2{
color:#fff;
}
.footer_top .testimonial p{
color:#fff;
font-size:11px;
}
.footer_top .testimonial_text span{
background:url(../images/testimonial-arrow.png) no-repeat left top;
height:33px;
width:22px;
display:block;
position:absolute;
left:29px;
bottom:-34px;
}
.footer_top .testimonial span.person_name{
color:#fff;
margin-top:30px;
margin-left:20px;
float:left;
}
/*footer_top end*/
// ส่วนนี้ คือ ส่วนพูดคุยของทางเว็บ
/*footer_bottom start*/
.footer_bottom{
background:#6d0000 url(../images/separator.jpg) repeat-x left top;
height:42px;
}
.footer_bottom p{
line-height:42px;
color:#fff;
float:left;
}
/*footer_bottom end*/
// ส่วนนี้ คือ ส่วน Copyright
/*footer end*/
ก็จบไปแล้วนะครับ สำหรับส่วนของ CSS เรามาต่อส่วนของ Javascript กันต่อเลยดีกว่า
ในส่วนของ javascript ได้ใช้ใน ส่วนของ Slideshow เป็นส่วนใหญ่ ขอไม่เขียนแยกส่วนใน หน้าของ Javascript นี้นะครับ
ในส่วนหน้าที่เหลือ คือ About us , Services , News/Event , Gallery และ หน้า contact us นั้นมีส่วนคล้ายกับหน้า Home ในทุกๆส่วนยกเว้น ส่วนของ body ในส่วน content เท่านั้น ดังนั้น ของพูดถึงแค่ส่วนของ content ใน body ของแต่ละหน้าเท่านั้นนะครับ
หน้า About us
<div class=”mediaguru_content”>
<div class=”mediaguru_wrapper”>
<h2>เกี่ยวกับเรา</h2>
<p>เว็บนี้จัดทำขึ้นเพื่อบอกข่าวสารเกี่ยวกับรถยนต์ยี่ห้อต่างๆ รวมถึงรวมรูปรถต่างๆให้ได้รับชมกัน</p>
</div>
</div>
//นี้ คือส่วน content ของหน้า About us คือส่วน เกี่ยวกับเรา
หน้า Services
<div class=”mediaguru_content”>
<div class=”mediaguru_wrapper”>
<h2>บริการของเรา</h2>
<p>บริการข่าวสารเกี่ยวกับรถยนต์ และ รวมรูปรถยนต์ยี่ห้อต่างๆ</p>
</div>
</div>
//นี้ คือส่วน content ของหน้า About us คือส่วน บริการเกี่ยวกับเรา
หน้า News and Events
div class=”mediaguru_content”>
<div class=”mediaguru_wrapper”>
<h2>News and Events</h2>
<p>หลังจากมีภาพหลุดตั้งแต่เดือนที่แล้ว โตโยต้าเปิดตัววิออส แฮทช์แบ็กและยาริส แอล ซีดานที่งานกวางโจว มอเตอร์โชว์ซึ่งเป็นการขยายไลน์ผลิตภัณฑ์ให้ครอบคลุมความต้องการของลูกค้ามากขึ้น
<p>
<p><img src=”images/toyota2.jpg” alt=”loading” />
<p>
<p>ก่อนหน้านี้ โตโยต้าเดินกลยุทธ์รุกตลาดบีเซกเมนท์อย่างหนักหน่วงอยู่แล้วโดยมีทั้งวิออส เวอร์ชั่นซีดานจำหน่ายภายใต้บริษัทร่วมทุนจีเอซี และยาริส แอล แฮทช์แบ็กที่จำหน่ายภายใต้บริษัทร่วมทุนเอฟเอดับเบิลยู โตโยต้ มอเตอร์
สำหรับรถสองรุ่นล่าสุดนี้เป็นการแตกไลน์เพิ่มเติม ซึ่งมีทั้งซีดานอย่างยาริส แอล ซีดาน และวิออส แฮทช์แบ็ก ทำให้ลูกค้าชาวจีนมีทางเลือกเพิ่มมากขึ้น
<p>
<p><img src=”images/toyota.png” alt=”loading” />
<p>
<p>รูปร่างหน้าตาภายนอกเป็นไปในทิศทางเดียวกันหมด โดยวิออส แฮทช์แบ็กถ่ายทอดมาจากวิออส ซีดานที่เคยเปิดตัวในงานปักกิ่ง ออโต้โชว์ในช่วงต้นปีที่ผ่านมา ส่วนบนของกระจังหน้าใช้ดีไซน์รูปทรงตัว T กรอบไฟมีความทันสมัยยิ่งขึ้น มีเดย์ไลท์แอลอีดีเพิ่มความหรูหรา
<p>
<p><img src=”images/toyota3.jpg” alt=”loading” />
<p> </p>
<p>ขณะที่ยาริส แอล ซีดานก็มีการออกแบบที่คล้ายคลึงกัน ไฟท้ายแอลอีดี กรอบไฟหน้ารูปทรงโฉบเฉี่ยว เส้นสายด้านข้างมีความเฉียบคมชัดเจน </p>
รถทั้งสองรุ่นใช้เครื่องยนต์เบนซินของเดิม เริ่มจาก 1.3 ลิตร 99 แรงม้า และ 1.5 ลิตร Dual VVT-i 107 แรงม้า ส่งกำลังด้วยระบบเกียร์ธรรมดา 5 สปีดหรือเกียร์อัตโนมัติซีวีทีแบบ 7 สปีด
</p>
</div>
</div>
//ส่วน content ของหน้า News and Events เป็นส่วนของข่าวสารต่างๆที่มาจากทางเว็บ
หน้า Car Gallery
<div class=”mediaguru_content”>
<div class=”mediaguru_wrapper”>
<div class=”gallery”>
<h2>Photo Gallery </h2>
<ul>
<li><a href=”#”><img src=”images/0001.jpg” width=”184″ height=”105″ /><span>Farari</span></a></li>
<li><a href=”#”><img src=”images/0002.jpg” width=”184″ height=”105″ /><span>Lamborghini</span></a></li>
<li><a href=”#”><img src=”images/0003.jpg” width=”184″ height=”105″ /><span>Aston martin</span></a></li>
<li><a href=”#”><img src=”images/0004.jpg” width=”184″ height=”105″ /><span>Toyota</span></a></li>
<li class=”nomargin”><a href=”#”><img src=”images/0005.jpg” width=”184″ height=”105″ /><span>Audi</span></a></li>
</ul>
<div class=”clear”></div>
</div>
</div>
</div>
//เป็นส่วน content ของหน้า Gallery เผื่อโชว์รูปรถยนต์ต่างๆ
หน้า contact us
<div class=”mediaguru_content”>
<div class=”mediaguru_wrapper”>
<div class=”contactus_block”>
<div class=”form “>
<h2>Send us a message</h2><br/>
<p>Required fields are marked <span>*</span></p>
<form action=”” method=”post”>
<table border=”0″ cellpadding=”5″ cellspacing=”5″ width=”500″>
<tr>
<td><label>Name<span>*</span></label><br/>
<input type=”text” value=”” name=”” size=”70″ />
</td>
</tr>
<tr>
<td><label>Email<span>*</span></label><br/>
<input type=”password” value=”” name=”” size=”70″ />
</td>
</tr>
<tr>
<td><label>Message Subject<span>*</span></label><br/>
<input type=”text” name=”” size=”70″ />
</td>
</tr>
<tr>
<td><label>Comment<span>*</span></label><br/>
<textarea rows=”5″ cols=”54″ name=”” style=”padding:4px;” ></textarea>
</td>
</tr>
<tr>
<td><label>Word Verification<span>*</span></label>
<div class=”captcha”><img src=”images/capcha.jpg” height=”40″ /></div>
</td>
<tr>
<td><input type=”text” class=”text ” size=”70″ name=”” /></td></br>
</tr>
<tr>
<td><input type=”submit” class=”submit” value=”submit” name=”” />
<input name=”reset” type=”reset” class=”submit” value=”reset” name=”” />
</td>
</tr>
</table>
</form>
</div>
<div class=”address”>
<h3>Contact Address</h3>
<p><span>Car Gallery</span></p>
<p>Phone no:<span>087- Χ Χ Χ Χ Χ Χ</span></p>
<p>Mobile no:<span> Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ</span><span style=”margin-left:8px;”>/ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ</span></p>
<p>Email:<span>xxxxxxx@gmail.com</span></p>
</div>
<div class=”clear”></div>
</div>
</div>
</div>
//เป็น content ส่วนของหน้า contact us ที่ในหน้าจะให้ใส่ข้อมูลการติดต่อต่างๆ ไว้ในหน้านี้
ก็จบลงไปแล้วนะครับ สำหรับ content ในแต่ละหน้าของเว็บที่สร้างไว้
การทำงานของเว็บไซด์ นะครับ
ในหน้า Home เปิดเข้ามาก็ จะเห็น
ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ
ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปหา
ส่วนที่ 3 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ
ในหน้า About us เปิดเข้ามาก็จะเห็น
ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ
ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา
ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือเกี่ยวกับเรา บอกข้อมูลเกี่ยวกับเรา
ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ
ในหน้า Services เปิดเข้ามาก็จะเห็น
ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ
ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา
ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือ บริการของเรา ไว้บอกบริการต่างๆ
ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ
ในหน้า News and Events เปิดเข้ามาก็จะเห็น
ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ
ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา
ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือ News and Events ไว้บอกข่าวสารต่างๆของทางเว็บ
ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็
ในหน้า Car Gallery เปิดเข้ามาก็ จะเห็น
ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ
ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา
ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือ Photo Gallery ไว้เพื่อให้ดูรูปรถยนต์ต่างๆผ่านทางหน้านี้
ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ
ในหน้า Contact us เปิดเข้ามาก็จะเห็น
ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ
ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา
ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือ Contact ไว้เพื่อติดต่อ กับทางเว็บ
ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ
ถ้าใครยังไม่เข้าใจก็ลองเอาไฟล์งาน ของผมไปลองเล่นดูได้นะครับ
LINK :https://drive.google.com/drive/folders/0B_lykFnoYNkQZXFoanBVMXFab1E?usp=sharing
จะเห็นว่าการเขียน HTML นั้น ไม่ยากเลยถ้า เราสามารถรู้ตำแหน่งของส่วนต่างๆ ของเว็บและคำสั่งในส่วนต่าง ของ HTML ,CSS และ JAVASCRIPT นั้นได้ เราก็สามารถสร้างเว็บๆหนึ่งขึ้นมาได้ ลองเอาไปศึกษา ลองเอาไปทำความเข้าใจดูนะครับ #ลองดูนะครับ