Munu1.สร้าง 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 ก็ได้ )
(สามารถเขียนด้วย 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” >
<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 ในบรรทัดสุดท้าย ดังภาพ
