วันพฤหัสบดีที่ 14 มกราคม พ.ศ. 2559

ขั้นตอนการสร้างเว็บไซต์

1. Objective 

Objective ใน การสร้างเว็บไซต์ จำแนกให้คร่าวๆดังนี้

  • Company/Organize website ทำเว็บไซต์เพื่อเป็นหน้าบ้าน เป็นหน้าตาขององค์กร, บริษัท, โรงงาน หรือหน่วยงานใดๆก็ตาม เพื่อเป็นช่วงทางในการติดต่อจากผู้ที่สนใจ และอาจจะมีระบบบางอย่าง ซึ่งใช้งานเฉพาะในหน่วยงานนั้นๆ
  • Shopping/Service website เป็นการสร้างเว็บไซต์ขึ้นมาเพื่อเป็นอีกช่องทางในการขายสินค้า หรือเสนอบริการต่างๆ ซึ่งโดยมากมักจะเป็นธุรกิจที่ดำเนินมาแล้ว และต้องการเพิ่มช่องทางในการเข้าถึงสินค้า และบริการเหล่านั้น
  • Make money website เป็นเว็บไซต์ที่สร้างขึ้นมาเพื่อหารายได้โดยเฉพาะ มันจะเป็นเว็บที่มี banner โฆษณาต่างๆให้เห็นเยอะๆ ข้อมูลเนื้อหาสาระมีมากมาย เป็นเว็บ variety ก็มี หรือจะเป็นเว็บข้อมูลเฉพาะทางก็ไม่น้อย
  • Community website เป็นเว็บที่ทำตัวเป็นเหมือนแหล่งให้ผู้ที่ชื่อชอบอะไรที่คล้ายๆกัน มาพบปะพูดคุยแลกเปลี่ยนความคิดเห็นกัน โดยมากจะเป็นเว็บบอร์ด เช่นบอร์ดรถ บอร์ดสัตว์เลี้ยง ตัวอย่างก็เว็บอย่าง pantip เป็นต้น และนอกจากนี้ยังรวมถึงเว็บ Social ต่างๆด้วย เช่น facebook, twitter อะไรแบบนั้น แต่สุดท้าย เว็บแนวนี้ก็ไม่พ้นเป็น money website อยู่ดี
  • Other website นอกจากที่กล่าวมาแล้ว มันยังมีเว็บไซต์อีกหลายรูปแบบที่เค้ามีเหตุผลบางอย่างที่ไม่อาจเปิดเผย
2. Sitemap & Layout เราต้องวางโครงสร้างเว็บก่อนครับ มันก็เหมือนสารบัญของหนังสือนั่นแหละ จะต้องมีหน้าไหนบ้าง และแต่ละหน้าจะวาง Layout มันยังไง เช่น มี header มี footer มี sidebar มั้ย เป็นต้นครับ


3. Website Design คือการออกแบบเว็บไซต์นั่นแหละ จะให้ดีต้องเริ่มจากการกำหนดแนวโน้มของ concept เว็บไซต์ก่อนว่าจะไปทางไหน อาจมีการทำ color scheme เป็นการเลือกว่าเว็บไซต์ต้องมีสีอะไรบ้าง หรืออาจะมีการทำ Image map เอารูปภาพมาแปะๆดูเนี่ยแหละ ว่าแนวทาง หน้าตาจะออกมาแบบไหน Vintage, Modern, เรียบๆ หรือ อวกาศ อะไรแบบนั้น ถ้ายังคิดไม่ออกก็ต้องลองเปิดเว็บไซต์ชาวบ้านหาแรงบันดาลใจ และแนวทางดูครับ สุดท้ายในการออกแบบเว็บไซต์เนี่ย มันก็อยู่ที่ Products, Service หรือ Company ของคุณนั้นแหละครับ ว่าคืออะไร มี Concept อย่างไร

4. Coding คือการเขียนโปรแกรมเว็บไซต์ครับ โดยภาษา ณ ปัจจุบัน ที่นิยมมากที่สุด และสามารถสร้างให้เกิดเว็บไซต์ได้ เราต้องรู้จักคือ ภาษา HTML ครับ เป็นภาษาที่จะบอกให้เว็บไซต์แสดงผลออกมาในรูปแบบต่างๆ เช่นตำแหน่งตัวอักษร ภาพ ขนาดตัวอักษร หรือ สี เป็นต้นครับ แต่ในความเป็นจริง เราไม่ได้ใช้ HTML อย่างเดียวในการออกแบบเว็บไซต์ครับเดี๋ยวจะขออธิบายเพิ่มเติมอีกที

5. Content เมื่อทั้งระบบและการออกแบบผสานกันจะเสร็จแล้ว มันก็จะออกมาเป็นเว็บไซต์โล่งๆครับ เหมือนห้องสมุดที่ไม่มีหนังสือ ทำอย่างไร เราก็ทำการเอา Content ใส่เข้าไปในเว็บไซต์ครับ โดยส่วนมากก็จะใช้งานกับผ่านระบบ CMS ครับ

6. Promote ครับ เมื่อเว็บเราสวย Content น่าสนใจ แต่ไม่เป็นที่รู้จัก ก็เหมือนห้างสุดหรูอยู่กลางป่าเขา ไม่มีใครเห็น สิ่งที่เราต้องทำคือย้ายมันมาอยู่แหล่งเศรษฐกิจนั่นเองครับ ก็คือการโปรโมทมันเข้าไปครับ บอกต่อเพื่อน แชร์ผ่าน Social Network แลก Banner โพสตามเว็บบอร์ด ต่างๆนาๆ เพื่อให้เว็บเราเป็นที่รู้จักครับ ไม่อย่างงั้นเว็บดีสวย แต่ไม่มีคนเข้า จะทำทำไมเนอะ


ที่มา http://arkadej.com/post/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C/

Code HTML

Hypertext Markup Language

โครงสร้าง

<html>
<head>
<title>.........</title>
</head>

<body>
</body>
</html>

แต่ไม่ต้องไปสนใจ

มาสนใจโค้ดดีก่า

html ก็เหมือน ภาษาอังกฤษอ่าครับ

ก็คือ ต้องท่องคำศัพท์

และจำคำแปลไห้ได้ เท่านั้นเองครับ

------------------------------------------------------------

เกี้ยวกับรูปแบบ

<br> : เว้นบรรทัด

&nbsp; : เว้นวรรค

<div align="left">ข้อความ</div> : ข้อความชิดซ้าย

<div align="right">ข้อความ</div> : ข้อความชิดขวา

<div align="center">ข้อความ</div> : ข้อความอยู่กลาง

<center>ข้อความ</center> : ข้อความอยู่กลาง

------------------------------------------------------------

เกี้ยวกับสีสันข้อความ

<b>ข้อความ</b> : ตัวหนา

<strong>ข้อความ</strong> : ตัวหนา

<i>ข้อความ</i> : ตัวเอียง

<em>ข้อความ</em> : ตัวเอียง

<u>ข้อความ</u> ขีดเส้นใต้

<font size="10">ข้อความ</font> : ขนาดข้อความ

<font color="#000000">ข้อความ</font> : สีข้อความ

<font color="#000000" size="10">ข้อความ</font> : ขนาดและสีข้อความ

------------------------------------------------------------

เกี่ยวกับรูปภาพ

<img src="url"> : ใส่รูป

<img src="url" width="100px" height="100px"> : ใส่รูป แบบ กำหนดขนาด

<img src="url" border="3" border-color="#000000"> : ใส่รูป แบบ กำหนกขนาดและสีเส้นขอบ

<img src="url" ait="ข้อความ"> : ใส่รูป แบบ เวลาเอาเมาไปชี้แล้วมีข้อความขึ้นมา

------------------------------------------------------------

เกี่ยวกับ Link

<a href="url">ข้อความ</a> : ลิ้งโดยใช้ข้อความ

<a href="url"  target="_blank">ข้อความ</a> : ลิ้งโดยใช้ข้อความ แบบเปิดหน้าต่างไหม่

<a href="url"><img src="url รูป"></a> : ลิ้งโดยใช้รูปภาพ
 
<a href="url"  target="_blank"><img src="url รูป"></a> : ลิ้งโดยใช้รูปภาพ แบบเปิดหน้าต่างไหม่

------------------------------------------------------------

เกี้ยวกับ marquee หรือข้อความเลื่อน (ถูกทางฮิห้าบล๊อก)

<marquee>ข้อความ</marquee> : ข้อความเลื่อนจากขวาไปซ้าย

<marquee direction="left">ข้อความ</marquee> : ข้อความเลื่อนจากขวาไปซ้าย

<marquee direction="right">ข้อความ</marquee> : ข้อความเลื่อนจากซ้ายไปขวา

<marquee direction="up">ข้อความ</marquee> : ข้อความเลื่อนจากล่างขึ้นบน

<marquee direction="down">ข้อความ</marquee> : ข้อความเลื่อนจากบนลงล่าง

<marquee width="100px" height="100px">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดความกว้าง

<marquee bgcolor="#00CC99">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดสีพื้นหลัง

<marquee scrollamount="1">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดความเร็ว

<marquee behavior="alternate">ข้อความ</marquee> : ข้อความเลื่อน แบบ ไปกลับ

<marquee behavior="slide">ข้อความ</marquee> : ข้อความเลื่อน แบบ ไปรอบเดียว 

------------------------------------------------------------

เกี้ยวกับ marquee หรือรูปเลื่อน (ถูกทางฮิห้าบล๊อก)

<marquee><img src="urlรูป"></marquee> : รูปเลื่อนจากขวาไปซ้าย

<marquee direction="left"><img src="urlรูป"></marquee> : รูปเลื่อนจากขวาไปซ้าย

<marquee direction="right"><img src="urlรูป"></marquee> : รูปเลื่อนจากซ้ายไปขวา

<marquee direction="up"><img src="urlรูป"></marquee> : รูปเลื่อนจากล่างขึ้นบน

<marquee direction="down"><img src="urlรูป"></marquee> : รูปเลื่อนจากบนลงล่าง

<marquee width="100px" height="100px"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดความกว้าง

<marquee bgcolor="#00CC99"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดสีพื้นหลัง

<marquee scrollamount="1"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดความเร็ว

<marquee behavior="alternate"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ ไปกลับ

<marquee behavior="slide"> <img src="urlรูป"> </marquee> : รูปเลื่อน แบบ ไปรอบเดียว 

------------------------------------------------------------

เกี่ยวกับตาราง

<table background="urlรูป"><tr><td>ข้อความ</td></tr></table> ใส่พื้นหลังไห้ข้อความ

------------------------------------------------------------

การดัดแปลง

เช่นผมคิดจะทำ topfriend เลื่อนได้ (ถูกทางฮิห้าบล๊อก)

<center>
        <table border="2" bordercolor="#สีขอบ" height="150" width="400" background="ภาพพื้นหลัง">
                <tr>
                        <td>
                                <marquee direction="left">
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                </marquee>
                        </td>
                </tr>
        </table>
</center>

หรืออักษร welcome สวยๆ

<center>
     <b>
          <FONT COLOR="#FF0000" size="5">W</FONT>
          <FONT COLOR="#FF9900" size="5">e</FONT>
          <FONT COLOR="#FFFF00" size="5">l</FONT>
          <FONT COLOR="#99FF00" size="5">c</FONT>
          <FONT COLOR="#00FF00" size="5">o</FONT>
          <FONT COLOR="#00FF99" size="5">m</FONT>
          <FONT COLOR="#00FFFF" size="5">e</FONT>
          <FONT COLOR="#0099FF" size="5">T</FONT>
          <FONT COLOR="#0000FF" size="5">o</FONT>
          <FONT COLOR="#9900FF" size="5">H</FONT>
          <FONT COLOR="#FF00FF" size="5">i</FONT>
          <FONT COLOR="#FF0099" size="5">5</FONT>
     </b>
</center>

ขอแค่ว่าเปิดแล้วต้องปิด เท่านั้นครับ

แถมตารางสี





โค้ดพวกนี้ สามารถ นำไปคอมเม้นไห้เพื่อน เพื่อเพิ่มความสวยงาม โดยการใส่ไปในกล่องรับข้อความ เช่น

ip address คืออะไรอ่ะ?

ip address คือ

   
    ip address คือ เลขรหัสประจำคอมพิวเตอร์ที่ต่ออยู่บนเครือข่าย ซึ่งประกอบด้วยตัวเลข 4 ชุดและมีเครื่องหมายจุดขั้นระหว่างชุด ยกตัวอย่างเช่น 192.168.1.1 เป็นต้นหรือนิยมเรียกสั้นๆว่า IP ซึ่งตัวเลข IP แต่ละเครื่องจะไม่ซ้ำกัน ดังนั้น จึงได้มีการก่อตั้งองค์กรเพื่อ แจกจ่าย IP Address โดยเฉพาะ ชื่อองค์กรว่า InterNIC (International Network Information Center) อยู่ที่ประเทศสหรัฐอเมริกา การแจกจ่ายนั้นทาง InterNIC จะแจกจ่ายเฉพาะ Network Address ให้แต่ละเครือข่าย ส่วนลูกข่ายของเครือง ทางเครือข่ายนั้นก็จะเป็น ผู้แจกจ่ายอีกทอดหนึ่ง ดังนั้นพอสรุปได้ว่า IP Address จะประกอบด้วยตัวเลข 2 ส่วน คือ
  1. Network Address
  2. Computer Address
การแบ่งขนาดของ Network Address แบ่งได้ หลายขนาด Class A หมายเลข IP Address จะอยู่ในช่วง 0.0.0.0 ถึง 127.255.255.255 มีไว้สำหรับจัดสรรให้กับองค์กรขนาดใหญ่ที่มีคอมพิวเตอร์เชื่อมต่อภายในเครือ ข่ายจำนวนมากๆ Class B หมายเลข IP Address จะอยู่ในช่วง 128.0.0.0 ถึง 191.255.255.255 มีไว้สำหรับจัดสรรให้กับองค์กรขนาดกลาง ซึ่งสามารถเชื่อมต่อคอมพิวเตอร์ในเครือข่ายได้มากถึง 65,534 เครื่อง Class C หมายเลข IP Address จะอยู่ในช่วง 192.0.0.0 ถึง 223.255.255.255 มีไว้สำหรับจัดสรรให้กับองค์กรขนาดเล็กและใช้กับคอมพิวเตอร์ส่วนใหญ่ในเครือ ข่ายอินเตอร์เน็ตสามารถต่อเชื่อมกับคอมพิวเตอร์ในเครือข่ายได้ 254 เครื่อง Class D หมายเลข IP Address จะอยู่ในช่วง 224.0.0.0 ถึง 239.255.255.255 สำหรับหมายเลข IP Address ของ Class นี้มีไว้เพื่อใช้ในเครือข่ายแบบ Multicast เท่านั้น Class E หมายเลข IP Address จะอยู่ในช่วง 240.0.0.0 ถึง 254.255.255.255 สำหรับหมายเลข IP Address ของ Class นี้จะเก็บสำรองไว้ใช้ในอนาคต ปัจจุบันจึงยังไม่ได้มีการนำมาใช้งาน
ที่มา http://www.howto108.com/ip-address-%E0%B8%84%E0%B8%B7%E0%B8%AD.html