วันศุกร์ที่ 12 ธันวาคม พ.ศ. 2557

เขียนเว็บเพจ HTML เบื้องต้น (Basic HTML)

Latest 108LIKE.COM

การเขียน IMEI Android

สำหรับใครที่ใช้ Android แล้วเกิดหลง Formart Rom หรือลง Rom ใหม่แล้ว IMEI Androi...

กล้อง Sony QX1

สุดยอดกล้องถ่ายภาพที่สามารถเชื่อมต่อกับ smart phone ได้ ที่ไม่ใช่แค่การถ่ายภาพนิ...

ถ้ำแระแซ

แหล่งท่องเที่ยวในฤดูหนาวที่เราอยากจะแนะนำคุณในช่วงปีใหม่นี้ครับ บรรยากาศกำลังดีเ...

AIS SUPER COMBO PRO 4.5 (Iris 708)

ออกมาใหม่อีกแล้วกับ AIS SUPER COMBO PRO 4.5 (Iris 708)ในราคา 3,690 บาท พร้อมฟรีค...

ทางรถไฟสายมรณะ

แหล่งท่องเที่ยวสำคัญๆ ที่มีความเป็นมาของประวัติศาสตร์ทางรถไฟสายมรณะ ของประเทศไทย
 


เขียนเว็บเพจ HTML เบื้องต้น (Basic HTML)



 

เขียน HTML โดยปกติเว็บโปรแกรมเมอร์หรือมาสเตอร์ต่างๆมักใช้โปรแกรมช่วยเหลือต่างๆนาๆ ผู้ใช้หลายท่านอาจมองว่าเป็นการยากถ้าจะเป็นเจ้าของเว็บไซต์สักที่ แต่ปัจจุบันนั้นแสนง่ายดาย เพียงแค่เรามีคอมพิวเตอร์ที่มี Text Editor สักตัว เช่น Notepad บน Windows OS และอื่นๆก็สามารถเริ่มเขียนเว็บเพจ HTML เบื้องต้นได้ไม่ยากนัก
การเว็บเพจ ด้วยภาษา HTML ก่อนอื่นให้เข้าใจตรงกันว่า HTML หรือก็คือ Hypertext Markup Language เป็นภาษาพื้นฐานของเว็บไซต์ที่เขียนด้วยภาษาต่างๆทุกภาษา ไม่ว่าจะเป็น PHP ASP ASP.NET เป็นต้น เหล่านี้เมื่อประมวลผลออกมาแล้วก็ยังคงแสดงในรูปแบบ Static หรือในรูปแบบภาษา HTML 
ดังนั้นควรเข้าใจภาษาพื้นฐานหรือภาษา HTML เบื้องต้นนี้ก่อนที่จะเข้าไปศึกษาร่ำเรียนการเขียนเว็บไซต์ด้วยภาษาอื่นๆ ในที่นี้ผู้เขียนจะเริ่มต้นจากการเปิดเขียน Code ด้วยโปรแกรม Notepad ที่มีอยู่ใน Windows OS จากนั้นจะพาท่านเขียนโค๊ดขั้นพืนฐานแบบ Step by Step ทีละขั้นให้แสดงเนื้อหาข้อความ Text ธรรมดา ข้อความขนาดใหญ่ ( H1,H2,H3 ...) และการแสดงผลรูปภาพ (IMG Tag) ให้สามารถเข้าใจได้ง่ายมากที่สุด ดังต่อไปนี้่

เขียนเว็บเพจด้วยภาษา HTML เบื้องต้น Step by Step

1.สร้าง folder ที่หน้า Desktop ตั้งชื่ออย่างไรก็ได้ แต่ในที่นี้ตั้งชื่อโฟลเดอร์นี้ว่า myweb ดังภาพ
2.เตรียมรูปภาพไว้ในโฟลเดอร์ myweb ที่เราต้องการนำขึ้นมาแสดงที่หน้าเว็บเพจ HTML ของเราโดยรูปภาพทั้งหมดให้สร้างในโฟลเดอร์ image อีกทีหนึ่ง ดังภาพ 
3.สร้างไฟล์ HTML หน้าแรกภายในโฟลเดอร์ myweb โดยไฟล์สามารถตั้งชื่ออะไรก็ได้แต่ต้องมีนามสกุล .htm หรือ .html อย่างใดอย่างหนึ่ง ในที่นี้ตั้งชื่อไฟล์ว่า index.html (ซึ่งโดยปกติเป็นที่ทราบโดยทั่วกันว่าหน้าแรกของเว็บไซต์ต้องตั้งชื่อว่า index เพื่อเป็นมาตรฐานเดียวกัน)
ภาพด้านล่าง แสดงตัวอย่างการสร้างไฟล์ index.html จากนั้นคลิกขวาเปิดด้วยโปรแกรม Notepadที่มีอยู่แล้วใน windows เพื่อดำเนินการเขียนเว็บเพจ HTML ด้วยโค๊ด (Coding) ในขั้นตอนต่อไป
4.เขียนโค๊ด (Coding) ด้วยโปรแกรม Notepad ทีละตัว (ห้าม Copy เพราะมันจะทำให้ติดเป็นนิสัย แล้วก็จะจำ Tag ในภาษา HTML ไม่ได้) ดังภาพ

ขั้นตอนนี้ผู้เขียนจะอธิบายโค๊ดทีละบรรทัด เพื่อความสะดวกผู้เขียนจะเปิดด้วยโปรแกรมNotepad2 แทนโปรแกรม Notepad ธรรมดาในวินโดว์ เนื่องจากโปรแกรมดังกล่าวสามารถมองเห็นหมายเลขบรรทัดแต่ละบรรทัดเพื่อความสะดวกในการบรรยาย ดังภาพ
 (สามารถเขียนด้วย Notepad หรือ Notepad2 ก็ได้ )
เมื่อเปิดด้วยโปรแกรม Notepad2 จะเห็นว่าการแสดงผลดูสะดวกและแตกต่างขึ้นไปบ้าง แต่ไม่ว่าจะเปิดด้วยโปรแกรมใด HTML Code ก็ยังคงเป็นเหมือนเดิม ดังภาพ
อธิบาย
ภาษา HTML จะมีจะมีหลายๆ TAG ด้วยกัน แบ่งเป็น Tag คู่ และ Tag เดี่ยว เขียนด้วยตัวพิมพ์ใหญ่หรือพิมพ์เล็กก็ได้ (แต่โดยปกติแล้วถ้าพิมพ์ใหญ่ก็ใหญ่หมด ถ้าพิมพ์เล็กก็เล็กหมดเพื่อความเป็นระเบียบ) การเขียนก็สามารถเขียนบนบรรทัดเดียวกัน หรือแยกบรรทัดกันอย่างไรก็ได้ (ปกติจะแยกเพื่อความเป็นระเบียบเช่นกัน)
- แท็กคู่ รูปแบบจะเป็น <TAG> ... </TAG> ก็คือแท็กที่มีการเปิดและปิดในตอนท้ายซึ่งอาจมีแท็กอื่นๆ หรือข้อความต่างๆแทรกอยู่ภายใน เช่น <HTML>..</HTML> , <BODY>..</BODY> , <H1>..</H1>
- แท็กเดี่ยว รูปแบบ <TAG> หรือ <TAG /> อย่างใดอย่างหนึ่ง เช่น <IMG /> , <BR />
บรรทัดที่ 1 เป็นการเริ่มต้นเขียน HTML เพื่อบอกว่านี่เป็นภาษา HTML สังเกตุว่าเราจะเขียนครอบไว้ทั้งหมด (อันที่จริงแท็กนี้ถึงแม้ไม่มีก็สามารถแสดงผลเว็บเพจได้อย่างไม่ผิดเพี้ยน เพราะ Browser ทุกวันนี้สามารถประมวลผลได้เอง แต่อย่างไรก็ตามครอบไว้ล่ะเป็นดี)
บรรทัดที่ 2 แท็ก <HEAD>..</HEAD> จะทำหน้าที่เก็บทุกแท็กที่เรามองไม่เห็นไว้ภายใน (ยกเว้นแท็ก TITLE ที่จะมองเห็นบน Title Bar) เช่น แท็ก META ที่ทำให้บอท(เช่น Google bot) มองเห็นข้อมูลเว็บไซต์ของเรา หรือแท็กที่มีประโยชน์อื่นๆซึ่งในที่นี้เราจะไม่กล่าวถึง สังเกตุว่าภายในจะมีแท็ก <Title> ซึ่งภายในเขียนคำว่า First Webpage ข้อความดังกล่าวจะปรากฏอยู่ในแถบ Title Bar เมื่อเราแสดงผล
บรรทัดที่ 5 แท็ก <BODY> .. </BODY> แท็กนี้จะเป็นส่วนของการแสดงผลทั้งหมดบนหน้าเว็บเพจของเรา ภายในจะมีแท็กหรือข้อความต่างๆเพื่อแสดงเนื้อหาข้อความ(Text) หรือรูปภาพ(Image) หรือไฟล์มัลติมีเดียต่างๆ ในที่นี้ จะเห็นว่ามีแท็กต่างๆมากมายอยู่ภายใน เช่น <H1> , <H2> , <IMG> , <BR /> ซึ่งจะอธิบายในต่อไป
มาถึงจุดนี้สังเกตุได้ว่าภาษา HTML แท้จริงแล้วมีเพียงแค่ 2 ส่วน ได้แก่ส่วนของ Head และส่วนของ Body โดยส่วนของ Head เราได้อธิบายไปแล้วว่าก็คือส่วนของการตั้งค่า การแสดงข้อมูล ฯลฯ ซึ่งเราจะมองไม่เห็นยกเว้นส่วนของแท็ก Title บนหน้าจอแสดงผล เพราะฉะนั้นเราสามารถเขียนเว็บไซต์หรือเขียนเว็บเพจใดๆให้สวยงามได้ ตามแต่ความสามารถในการเขียนแท็ก หรือข้อความ รูปภาพ ลงไปในส่วนของ Body เท่านั้นเอง
บรรทัดที่ 7 แท็ก <H1>..</H1> ใช้แสดงข้อความตัวหนาที่สุด และใหญ่ที่สุด โดยปกติแล้วจะใช้แสดงข้อความที่เป็นหัวเรื่องของเว็บเพจนั้นๆ
บรรทัดที่ 8 แท็ก <H2>..</H2> เช่นเดียวกันกับแท็ก H1 แต่จะมีข้อความเล็กกว่าและบางกว่าลงมา ตามลำดับ H1 , H2 , H3 ... H6 ขนาดจะเล็กลงเรื่อยๆ (เราสามารถกำหนดขนาดเองได้ด้วย CSS แต่จะไม่กล่าวถึง)
บรรทัดที่ 9 แท็ก <IMG> เป็นแท็กเดี่ยวใช้แสดงรูปภาพโดยจำเป็นต้องระบุตำแหน่ง(URL)รูปภาพที่เราเตรียมไว้ด้วยแอทริบิว ( Attribute ) SRC เช่น 
              <img src="http://108like.com/computer/img/108like.png" >
แต่ในที่นี้เราได้เตรียมรูปภาพไว้อยู่แล้วก็สามารถใส่ชื่อ Folder และชื่อไฟล์(.jpg) ซึ่งเป็นตำแหน่งของรูปภาพของเรา จะได้ดังนี้
              <img src="image/girl.jpg" > 
และกำหนดขนาดความกว้างด้วยแอทริบิว width ( width attribute ) ให้กว้าง 400 pixel จะได้ดังนี้
              <img src="image/girl.jpg" width="400px" /> 
สังเกตุว่าผู้เขียนได้ใส่สัญลักษณ์   /   เพื่อบอกว่าเป็นแท็กเดี่ยวที่สิ้นสุดคำสั่งแล้ว (ซึ่งมีหรือไม่มีก็ได้ ) โปรแกรมจะแสดงภาพที่มีขนาดตามที่เรากำหนดไว้ ซึ่งคำสั่งนี้สามารถเรียกภาพอื่นๆหรือภาพเดียวกันซ้ำกันหลายๆครั้งก็ได้
บรรทัดที่ 10 คำสั่ง <br> เป็นแท็กเดี่ยว เพื่อขึ้นบรรทัดใหม่ของพารากราฟนั้นๆ(เช่นเดียวกับการกดแป้น Enter ใน MS Word) ในภาษา HTML จะไม่สนใจว่าเราจะเขียนห่างกันกี่บรรทัด ถ้าต้องการให้ขึ้นบรรทัดใหม่ก็สามารถใช้คำสั่ง <br > หรือด้วยวิธีอื่นๆ
บรรทัดที่ 11 คือการเขียนข้อความ Text ธรรมดา เมื่อรันด้วยบราวเซอร์จะแสดงข้อความดังกล่าวออกมา
5.รันไฟล์ index.html ด้วยโปรแกรมบราวเซอร์ที่มีอยู่ในเครื่องของเรา เช่น IE , Firefox หรือ Google Chrome ในที่นี้ผู้เขียนใช้ Google Chrome ในการแสดงผลภาษา HTML ที่เราได้เขียนไปแล้วในข้อ 4 ดังภาพ

การแสดงผลจะเป็นดังที่ได้อธิบายไว้ในข้อที่ 4 โดยเริ่มต้นจากการแสดงผลจากด้านบนสู่ด้านล่าง ตั้งแต่แท็ก H1 -> H2 -> IMG  และ Text ในบรรทัดสุดท้าย ดังภาพ


สรุปการเขียนเว็บเพจด้วยภาษา HTML เบื้องต้น

จะเห็นได้ว่าการเขียนเว็บด้วยภาษา HTML ในขั้นพื้นฐานนี้ไม่ได้ยากเลย เพียงแค่มีโปรแกรม Text Editor ง่ายๆอย่างโปรแกรม Notepad ในการเขียน จากนั้นก็รันโค๊ดดังกล่าวด้วย IE , Chrome หรือ Firefox แล้วแต่ตามสะดวก ก็จะได้เว็บเพจตามที่เราเขียนหรือออกแบบไว้
การออกแบบและการดีไซน์ต่างๆขึ้นอยู่กับความสามารถของผู้เขียนเว็บเอง การวาง layout การออกแบบรูปภาพ เนื้อหา ต่างๆเหล่านี้ล้วนมีเทคนิคและมีเสน่ห์ในตัวของผู้เขียน หลายคนยึดงานด้านการดีไซน์เว็บเพจเป็นอาชีพ หรือแม้แต่การออกแบบเนื้อหาเป็นงานประจำ ซึ่งด้วยเหตุผลใดก็หวังว่าการเขียนเว็บเพจ Basic HTML นี้จะเป็นพื้นฐานให้ผู้อ่านต่อยอดไปข้างหน้าได้ในอนาคต 

 

เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)