การสร้างโฮมเพจด้วย Html

การสร้างโฮมเพจด้วย Html

เริ่มต้นเรียนภาษา HTML

กรณีที่เราต้องการเขียนเว็บขึ้นมาสักเพจด้วยภาษา HTML นั้น ก่อนอื่นเราต้องมือเครื่องมือ
ในการเขียนก่อน สำหรับครื่องมือในการเขียนเว็บนั้น เราสามารถหามาใช้ได้อย่างง่ายดาย
โดยใช้โปรแกรมประเภท Text Editor

     โปรแกรม Text Editor คืออะไร ..

..     โปรแกรม Text Editor คือโปรแกรมประเภทที่เราสามารถพิมพ์ข้อความหรือตัวหนังสือได้
ซึ่งเรียกว่า Text Editor เช่น MS Word ,Note pad,Word pad เป็นต้น ซึ่งเป็นแบบพื้นฐาน เพราะจริงๆแล้วมีเครื่องมือช่วยในการเขียนเว็บมีมากมาย        แต่มือใหม่ควรฝึกกับโปรแกรมประเภทนี้ก่อนเพื่อเป็นการเรียนรู้การใช้คำสั่งขั้นพื้นฐาน
เมื่อคล่องดีแล้วค่อยหาเครื่องมือ อื่น ๆ มาใช้

      ที่สำคัญก็คือ เมื่อเวลาเราต้องการจะ Save ข้อมูลนั้นเราจะต้องระบุลงไปด้วยว่าเป็นไฟล์ของ HTML
ไฟล์นั้นถึงจะเป็นเว็บเพจ เช่น <ชื่อไฟล์>.html หรือ <ชื่อไฟล์>.htm ก็ได้ อย่างใดอย่างหนึ่ง
ซึ่งเมื่อเราทำการ Save ไฟล์เป็น นามสกุลดังกล่าวแล้ว(.htm .html) จะทำให้ โปรแกรม Browser
อ่านข้อความของไฟล์นั้นได้

   เครื่องมืออีกอย่างที่จะต้องมีก็คือ โปรแกรม Browser คืออะไร ..

       โปรแกรม Browser คือ โปรแกรมที่ใช้สำหรับดูเว็บเพจที่เราสร้างขึ้นมา ถ้าไม่มีโปรแกรมประเภทนี้
อยู่ที่เครื่องเรา เราก็ไม่สามารถจะดูเว็บที่เราสร้างขึ้นมาได้ โปรแกรม Browser ที่นิยมกันอยู่ตอนก็คือ
Internet Explore กับ Netscape

โปรแกรม Html

      html ย่อมาจาก (hyper text markup language) เป็นภาษาสำหรับการสร้าง
โฮแพจ แฟ้มเอกสาร html ที่สร้างขึ้นจะนำไปแสดงผลได้ด้วยโปรแกรมเว็บเบราเซอร์
เช่น Netscape Navigatsr , intemet explore
นักเรียน นักศึกษา นักธุรกิจและขยายไปยังผู้ใช้ที่อยู่ตามบ้านทั่วไป นิยมสร้าง
<home page> และเว็บเพจ <wed page>

   ก่อนที่จะลงมือเขียนโปรแกรมHtml ต้องจัดเตรียมอุปกรณ์ต่อไปนี้

  1 เครื่องคอมพิวเตอร์ขนาดตั้งแต่ 486 เป็นต้นไป หรือ pentium
  2 หน่วยความจำไม่น้อยกว่า 8 mb ขึ้นไป
  3 พื้นที่ ฮาร์ด ดิสก์ ไม่น้อยกว่า 20 mb
  4 mouse
  5 โปรแกรม MS. Windows ตั้งแต่ Version 30 เป็นต้นไป
  6 โปรแกรม netscape navigator, internet explore
(โปรแกรมสื่อกลางในการติดต่อระหว่างผู้ใช้
กับผู้อื่นบนระบบอินเตอร์เน็ต โปรแกรมบราว์เซอร์)
  7. โปรแกรม Notepad (เป็นเท็กซ์เอดิเตอร์ที่มีอยู่แล้วในการติดตั้งWindows
เวอร์ชั่นใดก็ได้ ถือเป็นโปรแกรมปรับแต่งไฟล์ข้อความต่างๆ ได้หลายชนิด)

โครงสร้างของภาษา HTML

โครงสร้างของ ภาษา HTML นั้น ประกอบไปด้วยส่วนต่าง ๆ ที่สำคัญดังนี้ คือ

<html>
<head><title> ชื่อเรื่อง </title></head>
<body>
ส่วนที่ปรากฎบนหน้าจอทั้งหมด
</body>
</html>

   โดยแต่และส่วนสามารถอธิบายความหมายได้ดังนี้

    <html> และ </html> เป็น tag ที่ใช้เพื่อกำหนดว่าเอกสารต่อไปนี้เป็นเอกสารที่ใช้ภาษา HTML
เป็น Markup Language และจะไม่ปารกฏในโปรแกรม Web Browser
   <head> และ </head> เป็น tag ที่ใช้กำหนดส่วนหัวของเอกสาร Head ไม่ได้เป็นส่วนของเอกสาร
ภายใน แต่จะให้ข้อมูลเกี่ยวกับเอกสารฉบับนี้
    <title> และ </title> เป็นการระบุข้อความที่ต้องการให้เป็นส่วนหัวของเอกสาร Title
จะเป็นส่วนหนึ่งของ Head โดยข้อความที่อยู่ใน Title จะไปปรากฏอยู่ที่ส่วนบนสุดของ Web Browser
    <body> และ </body> เป็น tag ที่บอกถึงลักษณะต่าง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body
จะมี Attributes ต่าง ๆ ได้แก่ BGCOLOR (หมายถึงการกำหนดสีพื้นด้านหลังของเอกสาร)
TEXT (หมายถึงการกำหนดสีของตัวอักษรในเอกสาร) เป็นต้น

   หมายเหตุ :-

<...> เรียกว่า tag เปิด </....> เรียกว่า Tag ปิด

ทำความเข้าใจกับส่วนประกอบของเว็บไซค์

โฮมเพจ (Home Page) เมื่อเข้าสู่ระบบอินเตอร์เน็ตแล้วและเปิดเว็บไซท์สิ่งที่เห็นหน้าแรกจะเรียกว่าโฮมเพจ (Home Page)ปัจจุบันมี เว็บไซท์เกิดขึ้นมากมายทั้งในและต่างประเทศ หากโฮมเพจมีลูกเล่นมากเท่าไร การโหลด (Load) หน้าเว็บเพจก็จะช้าลงไปด้วย

เว็บเพจ (Web Page) สำหรับเอกสารใดๆ ในเว็บไซท์แต่ละแห่งถูกเรียกว่า เว็บเพจซึ่งสามารถเข้าไปในแต่ละหน้านั้นได้โดยการลิงค์จาก โฮมเพจ

   เว็บไซท์ (Web Site) เว็บไซท์หรือไซท์คือตำแหน่งที่อยู่ของผู้ที่มี เว็บเพจ ของตนเองบนอินเตอร์เน็ตเมื่อมีการลงทะเบียนถูกต้องแล้ว ก็สามารถจัดทำ เว็บเพจ
และส่งให้ศูนย์บริการนำไปไว้บนระบบอินเตอร์เน็ต (Upload) ก็จะมีผู้อื่นเข้ามาดูเว็ปไซท์ของเราบ้าง
โดยส่วนมากหน่วยงานต่างๆ ทั้งภาครัฐและเอกชนมักมี เว็บไซท์เป็นของตน
เพื่อประชาสัมพันธ์ข้อมูลข่าวสารการติดต่อสื่อสาร

   เวิร์ล - ไวด์ - เว็ป (World -Wide - Web) ในการทำงานของ เวิร์ล - ไวด์ - เว็ป นั้นใช้การติดต่อแบบเครือข่ายโยงใยกันทั่วถึงทุกเครื่องทั่วโลกที่อยู่ในระบบอินเตอร์เน็ตลักษณะ การเชื่อมโยงเป็นเครือข่ายกันนี้ถูกเปรียบเทียบกับการโยงใยของแมงมุม อาจเรียกสั้นๆ ว่า เว็ป
ระบบเว็ปมีการทำงานหลัก 2 ส่วน คือ ส่วนให้บริการได้แก่เครื่องคอมพิวเตอร์ของศูนย์บริการที่เรา
สมัครเป็นสมาชิกอินเตอร์เน็ต และส่วนขอใช้บริการ คือเครื่องที่เราใช้ติดต่อเข้าสู่ระบบอินเตอร์เน็ต
ซึ่งทั้ง 2 ส่วนจะติดต่อสื่อสารกันผ่านช่องทางที่เรียกว่า โพรโตคอล (Protocol)โดยใช้เอกสาร
(Hyper Text) สังเกตได้ว่าเวลาเราป้อนชื่อเว็ปที่ต้องการเข้าดูข้อมูลมักใช้ HTTPนำหน้า
เช่น http://www.sanook.com เป็นต้น

         เตรียมตัวก่อนเขียนเว็บไซท์ (Web Site)

1. เลือกหัวเรื่อง
2. เตรียมเนื้อหาที่จะนำเสนอ ทั้งข้อความ เสียง รูปภาพ และอื่นๆ ที่ต้องการ
3. จัดเตรียมโปรแกรมที่เกี่ยวข้องในการทำงาน

คำสั่งต่างๆ ในภาษา html

ลำดับ	รูปแบบคำสั่ง	ความหมาย
1.	<H..> message </H..>	การกำหนดหัวเรื่อง
2	message <BR>	ขึ้นบรรทัดใหม่
3.	<P> message </P>	ขึ้นย่อหน้าใหม่
4.	<blockquote> message </blockquote>	บล็อคข้อความ
5.	<CENTER> message </CENTER>	จัดให้อยู่กึ่งกลาง
6.	<HR>	การสร้างเส้นในเอกสาร
7.	<B> message </B>	ตัวอักษรหนา
8.	<I> message </I>	อักษรเอียง
9.	<U> message </U>	ขีดเส้นใต้
10.	<TT> message </TT>	ตัวพิมพ์ดีด
11.	<S> message </S>	มีเส้นพาดกลางข้อความตัวอักษร
12.	<BLINK> message </BLINK>	ตัวอักษรกระพริบ
13	<Address> message </Address>	อักษรกี่ยวกับ E-mail เลขโทรศัพท์
14.	<CITE> message </CITE>	เน้นคำพูด
15.	<CODE> message <CODEP>	อักษรแบบคอมพิวเตอร์
16.	<EM> message </EM>	อักษรเอียงเน้นคำพูด,วลี
17.	<KBD> message </KBD>	อักษรที่ให้ผู้ใช้ป้อนทางคีย์บอร์ด
18.	<VAR> message </VAR>	รูปแบบข้อความ,ค่าตัวเลข
19.	<SUB> message </SUB>	อักษรห้อย
20.	<SUP> message </SUP>	อักษรยกขึ้น
21.	<BIG> message </BIG>	อักษรตัวโต
22.	< SMALLP> message </SMALL>	อักษรตัวเล็ก
23.	<Font Size= n> message </Font>	กำหนดขนาดตัวอักษรโดยใช้เลข (1-7)
24.	<BaseFont Size= n> message	ตัวอักษรมาตรฐานของโปรแกรมบราว์เซอร์
25.	<Font Face= name1,....name2>	กำหนดแบบฟอนต์ตัวอักษร
26.	<Font color= colormane>	การกำหนดสีให้กับตัวอักษร (Color)
27.	<Font Text= colormane>	กำหนดสีให้กับตัวอักษรทั้งเอกสาร
28.	<MARQUEE> message </MARQUEE>	การสร้างอักษรวิ่ง
ตัวอย่างคำสั่งบางส่วน

เริ่มต้นการทำงาน

ลักษณะโปรแกรม Text Editor เพื่อพิมพ์คำสั่ง	เมื่อเขียนโปรแกรมเสร็จสั่งแสดงผลโดยการกด F 12
	ลักษณะโปรแกรม Browser ดูเว็บเพจที่เราสร้างขึ้น