เขียนเว็บจาก HTML แบบง่ายๆ

สวัสดีครับ วันนี้มาพบกันอีกแล้ว ทุกคนคงเคยเล่นเว็บไซต์ต่างๆในโลกอินเตอร์เน็ตมามากมายแล้ววันนี้ขอนำเสนอการเขียน html ของส่วนต่าง ๆ ภายในเว็บไซต์ให้ทุกคนได้รับชมกันนะครับ เรามาเริ่มกันเลย

ตัวอย่างที่ให้ดูนี้ มาจากการสร้างเว็บคร่าว ๆของผมนะครับ

นี่คือเว็บไซต์ที่ผมสร้างนะครับจะมีหน้าตาดังนี้

หน้าแรกนะครับ จะเป็นหน้า Home มาดูหน้าตาเว็บแล้วมาดู Code Html กันดีกว่า

หน้า Home

Screen Shot 2559-11-28 at 2.23.51 PM

ในทุกๆการเขียน 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>

Screen Shot 2559-11-28 at 4.32.16 PM

// คือส่วน 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 , และส่วนพูดคุยของทางเว็บ

Screen Shot 2559-11-28 at 2.23.51 PM

<body>

<div class=”mediaguru_navbar”>
<div class=”mediaguru_wrapper”>

// คือคำสั่ง ดึงค่าจาก CSS มาใช้งาน 

Screen Shot 2559-11-28 at 5.19.32 PM

<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>
Screen Shot 2559-11-28 at 2.25.05 PM Screen Shot 2559-11-28 at 2.25.01 PM
<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 ทั้งหมด

Screen Shot 2559-11-28 at 2.25.13 PM
<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 จากภายนอก และ ใส่รูปเข้ามาในส่วนนี้

 

Screen Shot 2559-11-28 at 2.25.16 PM
<div class=”news”>
<h2>News and Events</h2>
<img src=”images/toyota.png” width=”84″ height=”65″ alt=”loading” />
<p>โตโยต้าเปิดตัววิออส แฮทช์แบ็กและยาริส แอล ซีดานที่งานกวางโจว มอเตอร์โชว์ซึ่งเป็นการขยายไลน์ผลิตภัณฑ์ให้ครอบคลุมความต้องการของลูกค้ามากขึ้น</p>

<p>&nbsp;</p>
</div>

//ส่วนนี้ คือ News and Event ในส่วนนี้ ก็เช่นกันใช้ CSS จากภายนอกมาช่วย แล้ว ใส่รูป แล้วข้อความลงไป 

Screen Shot 2559-11-28 at 2.25.19 PM
<div class=”testimonial”>
<h2>&nbsp;</h2>
<div class=”testimonial_text”>
<p>สวัสดีครับ ยินดีต้อนรับสู่เว็บ Car Gallery นะครับท่านจะได้รับข่าวสารเกี่ยวกับรถยนต์ต่างๆ รวมถึง รวมรูปรถยี่ห้อต่างๆอยู่ gallery ของทางเว็บ</p>
<span>&nbsp;</span>
</div>
<span class=”person_name”>-By Pichayut Kositbenjapol</span>
</div>
<div class=”clear”></div>
</div>

</div>

//ส่วนนี้คือ ส่วนพูดคุยจากทางเว็บ ก็ใช้ CSS จากภายนอกเช่นกัน และ ใส่ข้อความลงไป

Screen Shot 2559-11-28 at 4.52.23 PM

<div class=”footer_bottom”>
<div class=”mediaguru_wrapper”>
<p>Copyright &copy;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;
}

Screen Shot 2559-11-28 at 5.19.32 PM
/*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;
}

// ส่วนหัวของเว็บและเมนูของเว็บ 

 

 

Screen Shot 2559-11-28 at 2.25.01 PM Screen Shot 2559-11-28 at 2.25.05 PM

/*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 ของเว็บ

Screen Shot 2559-11-28 at 6.36.48 PM Screen Shot 2559-11-28 at 6.36.55 PM Screen Shot 2559-11-28 at 6.37.00 PM Screen Shot 2559-11-28 at 6.37.07 PM Screen Shot 2559-11-28 at 6.37.14 PM

/*content start*/
.mediaguru_content{
padding-top:20px;
padding-bottom:20px;
}
.mediaguru_content h2{
color:#d50000
}
/*content end*/

//ส่วนของ content ของทุกหน้า

Screen Shot 2559-11-28 at 5.31.14 PM

/*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 

Screen Shot 2559-11-28 at 5.35.14 PM

/*———-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

Screen Shot 2559-11-28 at 2.25.13 PM

/*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

Screen Shot 2559-11-28 at 2.25.16 PM

.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 

Screen Shot 2559-11-28 at 2.25.19 PM

.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*/

// ส่วนนี้ คือ ส่วนพูดคุยของทางเว็บ

 

Screen Shot 2559-11-28 at 4.52.23 PM

/*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 นี้นะครับ

Screen Shot 2559-11-28 at 2.25.05 PM Screen Shot 2559-11-28 at 2.25.01 PM

 

ในส่วนหน้าที่เหลือ คือ  About us , Services , News/Event , Gallery  และ หน้า contact us นั้นมีส่วนคล้ายกับหน้า Home ในทุกๆส่วนยกเว้น ส่วนของ body ในส่วน content เท่านั้น ดังนั้น ของพูดถึงแค่ส่วนของ content ใน body ของแต่ละหน้าเท่านั้นนะครับ

หน้า About us

Screen Shot 2559-11-28 at 2.24.00 PM

<div class=”mediaguru_content”>

<div class=”mediaguru_wrapper”>
<h2>เกี่ยวกับเรา</h2>
<p>เว็บนี้จัดทำขึ้นเพื่อบอกข่าวสารเกี่ยวกับรถยนต์ยี่ห้อต่างๆ รวมถึงรวมรูปรถต่างๆให้ได้รับชมกัน</p>
</div>
</div>

//นี้ คือส่วน content ของหน้า About us คือส่วน เกี่ยวกับเรา

หน้า Services

Screen Shot 2559-11-28 at 2.24.08 PM

<div class=”mediaguru_content”>
<div class=”mediaguru_wrapper”>
<h2>บริการของเรา</h2>
<p>บริการข่าวสารเกี่ยวกับรถยนต์ และ รวมรูปรถยนต์ยี่ห้อต่างๆ</p>
</div>
</div>

//นี้ คือส่วน content ของหน้า About us คือส่วน บริการเกี่ยวกับเรา

 

หน้า News and Events

Screen Shot 2559-11-28 at 6.29.28 PM Screen Shot 2559-11-28 at 6.29.54 PM

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>&nbsp;</p>
<p>ขณะที่ยาริส แอล ซีดานก็มีการออกแบบที่คล้ายคลึงกัน ไฟท้ายแอลอีดี กรอบไฟหน้ารูปทรงโฉบเฉี่ยว เส้นสายด้านข้างมีความเฉียบคมชัดเจน </p>

รถทั้งสองรุ่นใช้เครื่องยนต์เบนซินของเดิม เริ่มจาก 1.3 ลิตร 99 แรงม้า และ 1.5 ลิตร Dual VVT-i 107 แรงม้า ส่งกำลังด้วยระบบเกียร์ธรรมดา 5 สปีดหรือเกียร์อัตโนมัติซีวีทีแบบ 7 สปีด
</p>
</div>
</div>

//ส่วน content ของหน้า News and Events เป็นส่วนของข่าวสารต่างๆที่มาจากทางเว็บ

หน้า Car Gallery

Screen Shot 2559-11-28 at 2.24.39 PM
<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

Screen Shot 2559-11-28 at 2.24.51 PM

<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- &Chi; &Chi; &Chi; &Chi; &Chi; &Chi;</span></p>
<p>Mobile no:<span> &Chi; &Chi; &Chi; &Chi; &Chi; &Chi; &Chi; &Chi; &Chi; &Chi;</span><span style=”margin-left:8px;”>/ &Chi; &Chi; &Chi; &Chi; &Chi; &Chi; &Chi; &Chi; &Chi; &Chi;</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 ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ

Screen Shot 2559-11-28 at 2.23.51 PM

ในหน้า About us เปิดเข้ามาก็จะเห็น

ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ

ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา

ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือเกี่ยวกับเรา บอกข้อมูลเกี่ยวกับเรา

ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ

Screen Shot 2559-11-28 at 2.24.00 PM

ในหน้า Services เปิดเข้ามาก็จะเห็น

ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ

ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา

ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือ บริการของเรา ไว้บอกบริการต่างๆ

ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ​

Screen Shot 2559-11-28 at 2.24.08 PM

ในหน้า News and Events เปิดเข้ามาก็จะเห็น

ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ

ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา

ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือ News and Events ไว้บอกข่าวสารต่างๆของทางเว็บ

ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็

 

Screen Shot 2559-11-28 at 6.29.28 PM

ในหน้า Car Gallery เปิดเข้ามาก็ จะเห็น

ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ

ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา

ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือ Photo Gallery ไว้เพื่อให้ดูรูปรถยนต์ต่างๆผ่านทางหน้านี้

ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ​​

 

Screen Shot 2559-11-28 at 2.24.39 PM

ในหน้า Contact us เปิดเข้ามาก็จะเห็น

ส่วนที่ 1 จะเป็นเมนูอยู่ข้างบนนะครับ ไว้เลือกในหน้าต่างๆ

ส่วนที่ 2 จะเห็น slideshow รูปรถยนต์ ที่สลับไปมา

ส่วนที่ 3 จะเป็นส่วนเนื้อหา ที่ทางเว็บใส่ไว้ นั้นคือ Contact ไว้เพื่อติดต่อ กับทางเว็บ

ส่วนที่ 4 จะเห็น ข้อมูลของ Photo Gallery โชว์รูปต่างๆ, News and Events ข่าวสารของทางเว็บ และ ส่วนของการพูดคุยของทางเว็บ​​

 

Screen Shot 2559-11-28 at 2.24.51 PM

 

ถ้าใครยังไม่เข้าใจก็ลองเอาไฟล์งาน ของผมไปลองเล่นดูได้นะครับ

LINK :https://drive.google.com/drive/folders/0B_lykFnoYNkQZXFoanBVMXFab1E?usp=sharing

 

จะเห็นว่าการเขียน HTML นั้น ไม่ยากเลยถ้า เราสามารถรู้ตำแหน่งของส่วนต่างๆ ของเว็บและคำสั่งในส่วนต่าง ของ HTML ,CSS และ  JAVASCRIPT  นั้นได้ เราก็สามารถสร้างเว็บๆหนึ่งขึ้นมาได้ ลองเอาไปศึกษา ลองเอาไปทำความเข้าใจดูนะครับ #ลองดูนะครับ

PICHAYUT KOSITBENJAPOL
at GlurGeek.Com
ชื่อ พิชญุตม์ โฆษิตเบ็ญจพล ชื่อเล่น เจมส์​ ตอนนี้ศึกษาอยู่คณะวิศวกรรมคอมพิวเตอร์ รหัสนักศึกษา 1590902498

Leave a Reply

Copyright © 2021 GlurGeek.Com. All Rights Reserved.