Easy Webpage

 


การสร้างเวบเพจ
1. ขั้นแรกก็ต้องหาโปรแกรมที่ใช้เขียนเวบเพจก่อนครับเช่นFontpage , Dreamweaver , Netobject ซึ่งเป็น โปรแกรมที่ใช้งานง่ายแต่ก็ควรศึกษาการใช้บ้าง และโปรแกรมพวกHTML Editorเช่น Notepad , Wordpad ซึ่งจะต้องเขียนโค้ดHTMLเอง มีโปรแกรมอะไรบ้างลองไปดูที่นี่ครับ 2. เมื่อมีโปรแกรมแล้วขั้นต่อไปก็ต้องศึกษาวิธีการใช้ดูครับซึ่งมีเวบไซต์มากมายครับที่สอนการใช้โปรแกรมแต่ละชนิด หรือจะหาหนังสือมาอ่านก็ดีครับ(เสียสตางค์หน่อยแต่ก็ได้ความรู้ครับ) แต่อย่างไรก็ตามก็ควรที่จะมีความรู้เรื่อง HTMLบ้างครับเผื่อจำเป็นต้องการแก้ไขเวบเพจของเราที่ Codeโดยตรง ดังนั้นเราลองมาดูการเขียน Code HTML กันครับ -โครงสร้างพื้นฐานของหน้าHTML -แท็กต่างๆที่ใช้บ่อยๆในการเขียนHTML -โค้ดที่ใช้ใส่รูปภาพลงในเวบเพจ -โค้ดที่ใช้ใส่Linkลงในเวบเพจ 3. ขั้นต่อมาคืดขั้นตอนก่อนที่จะสร้างเวบเพจครับซึ่งแบ่งเป็น2ข้อย่อยคือ 3.1 การเตรียมความพร้อมในHarddishของเราครับก็คือการสร้างFolder(หรือDirectory)เตรียมเอา ไว้เก็บ File ต่างๆไม่ว่าจะเป็น ไฟล์เอกสาร(.html) หรือไฟล์รูปภาพ(.gif) .............อ่านต่อ 3.2 การขอพื้นที่ฟรีที่จะเอาไว้เก็บไฟลล์ต่างๆที่สร้างขึ้นมาครับซึ่งมีให้บริการมากมายครับลองไปดูกันว่ามีที่ ใหนและมีรายละเอียดอย่างไร......ไปดู ส่วนวิธีการขอใชบริการก็จะมีวิธีคล้ายๆกันครับลองดูตัวอย่าง เมื่อได้พื้นที่แล้วอยากใช้ชื่อที่สั้นๆหรือที่ขึ้นต้นด้วยชื่อเวบของเราก็ต้องไปใช้บริการ URL redirect ครับซึ่งการขอใช้ บริการก็ต้องไปลงทะเบียนครับ(คล้ายๆตอนขอพื้นที่ฟรีโฮมเพจ) ลองไปดูครับว่ามีที่ใหนบ้าง......ไปดู เพื่อความสะดวกในการเตรียมรูปหรือปุ่มต่างเราจำเป็นต้องมีชื่อเวบไซต์ที่แน่นอนก่อนครับ จะได้ใส่ชื่อลงในเวบเพจได้เลยครับ 4. ขั้นต่อไปก็เป็นการเตรียมอุปกรณ์ต่างๆที่จะใส่ลงไปในเวบเพจของเราครับเช่น -รูปภาพต่างๆ -ป้ายแบนเนอร์และปุ่มต่างๆ -เวบบอร์ด -เกสต์บุ๊ค -แชทรูม -เคาเตอร์ -สถิติ 5. เมื่อได้อุปกรณ์ต่างที่ต้องการครบแล้วต่อไปก็เป็นการสร้างเวบเพจซึ่งพอจะสรุปเป็นขั้นตอนย่อยๆคือ 5.1 สรุปเนื้อหาโดยรวมว่ามีอะไรบ้างจะแบ่งเป็นกี่หน้าและหน้าโฮมเพจจะมีอะไรบ้าง 5.2 ออกแบบหน้าโฮมเพจ(หน้าแรก index.html ) แบบคร่าวๆ(ดูว่าจะวางอะไรไว้ตำแหน่งใหนจะได้กำหนดตาราง เพื่อแบ่งหน้าเวบเพจของเราออกเป็นส่วนๆเพื่อวางรูปภาพหรือข้อความตามที่ได้ออกแบบไว้) 5.3 สร้างหน้าเวบเพจไว้เป็นแม่แบบ(อาจตั้งชื่อว่า ex.html ก็ได้) โดยอาจจะมีส่วนหัวของเวบเพจ( รูปและชื่อเวบ) และปุ่มLinkไปหน้าหลักๆ(Nevigator Bar) เพื่อใช้หน้านี้เป็นหน้าที่เอาไว้ใส่เนื้อหาของหน้าต่าง(คือใช้หน้านี้เขียน และ save เป็นชื่อของเวบเพจตามต้องการ) เราก็จะได้เวบไซต์ที่มีแต่ละหน้าเป็นแบบเดียวกัน 5.4 กำหนดชื่อของไฟล์หน้าเวบเพจต่างๆที่จะมีรวมถึง Folderที่ใช้เก็บไฟล์นั้นๆด้วย 5.5 ลงมือสร้างโดยเริ่มจากหน้าแรก( index.html ) ก่อนแล้วค่อยๆสร้างหน้าอื่นๆต่อไปจนครบ 5.6 สุดท้ายก็ลองตรวจสอบดูว่าการLinkต่างภายในเวบมีข้อผิดพลาดหรือไม่และทำการแก้ไข 6. เมื่อได้เวบเพจทั้งหมดแล้วขั้นสุดท้ายก็ทำการ Upload ไฟล์ทั้งหมดไปเก็บไว้ในพื้นที่โฮมเพจฟรีที่ได้ขอไว้ ........อ่านต่อ 7. เมื่อเรามีเวบไซต์ของเราแล้วต่อไปก็ต้องโปรโมทละครับเพื่อให้เพื่อนๆได้รู้จักซึ่งมี่วิธีคือ - เขียนอีเมลล์ไปบอกคนที่เรารู้จัก - เขียนลงใน เวบบอร์ดของเวบไซต์ต่างๆที่เขาจัดเอาไว้ให้โปรโมทเวบไซต์ - หรือเข้าไปตอบคำถามของคนอื่นในเวบบอร์ดแล้วทิ้งท้ายไว้หน่อยก็ไม่ผิดกติกาครับ - แลก Linkครับลองไปดูที่ใหนเขามีก็แลกไป - เข้าไปในเวบท่าต่างๆแล้วก็ไป Add URL เช่นที่ Hunsa , Sanook , Lemononline - สมัครจัดอันดับเวบไซต์ครับเช่นที่ Thaitop , Bangkok.com - ส่งชื่อเวบเราไปให้เสิร์ทเอนจินต่างๆ.......ดูรายละเอียด

 

ตัวอย่างSource Code

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<meta name="keywords" content="">
<meta name="description" content="">

<title>ใส่ข้อความTitleที่ต้องการ</title>

<style>
<!--
A:link {color:"#0000FF";text-decoration:none}
A:visited {color:"#FF0000";text-decoration:none}
A:hover {color:"#FF0000";text-decoration:underline}
A:active {color:"#000086";}.form{ font-family: MS Sans Serif; font-size: 14; color: rgb(0,0,128) }
.font {font-family:Ms Sans Serif;font-size:10pt;color: rgb(0,0,128)}
-->
</style>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!--/////////////////////////////////ส่วนบนสุด/////////////////////////////////-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#0000FF">
<tr>
<!-- แถวที่1คอลัมภ์ที่1 -->
<td >
 
</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#000080">
<tr>
<!-- แถวที่1คอลัมภ์ที่1 -->
<td width="30%" valign="middle" align="center" >
 <br>ใส่ข้อความหรือรูปตามต้องการ<br> 
</td>
<!-- แถวที่1คอลัมภ์ที่2 -->
<td width="70%" valign="middle" align="center">
 <br><img src="../images/02_banner.gif" width="468" height="60" alt="คำอธิบายรูป"><br> 
</td>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#0000FF">
<tr>
<!-- แถวที่1คอลัมภ์ที่1 -->
<td >
 
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- แถวที่1คอลัมภ์ที่1 -->
<td bgcolor="#ff6215" width="200" height="20">
 
</td>
</tr>
</table>

<!--////////////////////////////////จบส่วนบน//////////////////////////////-->

<!--/////////////////////////เริ่มส่วนเนื้อหาของเวบเพจ///////////////-->

<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<!-- //////////////////ส่วนรูปเมนู////////////////////////////////// -->
<td bgcolor="FFFFFF" width="200" valign="top" align="left">
 <img src="../images/01_button.gif" width="126" height="46" alt=""><br>
 <img src="../images/02_button.gif" width="126" height="46" alt=""><br>
 <img src="../images/03_button.gif" width="126" height="46" alt=""><br>
 <img src="../images/04_button.gif" width="126" height="46" alt="">
</td>
<!--////////////////////จบส่วนเมนู/////////////////////////////-->

<!--///////////////////เริ่มเนื้อหา/////////////////////////////// -->
<td valign="top">
ใส่ข้อความหรือรูปภาพ<br>
</td>
</tr>
</table>
<!--////////////////////จบเนื้อหา/////////////////////////-->

<!--///////////////////ส่วนท้าย////////////////////////-->

<center>
<br><a href="mailto:mduniform@hotmail.com"><img src="../images/Mail1202.gif" width="32" height="32"
alt="Mail to me"></a>

</body>
</html>

  ดูตัวอย่าง

[ Home ]  [ Chatroom ]  [ Board 1]  [Board 2 ]  [ Book ]  [ Sourcecode ]  [ Free ]  [ Servicesite ]  [ Link ]

1