เว็บเพื่อการเรียนรู้ดีเด่น 2547 (สมาคมผู้ดูแลเว็บไทย) | เว็บสื่อวิทย์ฯ ดีเด่น 2549(กระทรวงวิทย์) | เว็บการศึกษายอดผู้ชมสูงสุด 2549-2551(TrueHits)
คุณสามารถแสดงบทความนี้  บนเว็บไซท์ของคุณ หรือที่ไหนก็ได้ โดยตัดโค๊ดนี้ไปแปะไว้
<script language="JavaScript" src="http://www.vcharkarn.com/vlesson/javafeed.php?lessonid=14" type="text/javascript"></script>

69215
บทเรียน HTML ออนไลน์ ง่ายๆ แต่ใช้ได้จริง
    ภาษา HTML ภาษาพื้นฐานแห่งการเขียนเว็บเพจ ใครใคร่เขียนเว็บอย่างเซียน ไม่รู้จัก HTML ไม่ได้แล้ว!!!
ผู้เขียน เนยสด
อยู่ในส่วน คอมพิวเตอร์
ระดับของบทเรียน มัธยมศึกษาตอนต้น
ปรับปรุงล่าสุด 24 ธ.ค. 2550 (12:16)
เข้าชมแล้ว 306149 ครั้ง (รวมทุกหน้า)
[Vote : 868 | Rating : 4.57]
หน้าที่ 1 - รู้จักกับโครงสร้างคำสั่งและโครงสร้างภาษา HTML

HTML ย่อมาจากคำว่า HyperText Markup Language ครับ
เป็นภาษาสำหรับการเขียนเว็บไซท์ให้แสดงผลบนเว็บบราวเซอร์
นับว่าเป็นภาษาเขียนเว็บแรกๆ และเป็นภาษาพื้นฐานที่สุดเลยครับ

แม้ว่าในปัจจุบันจะมีตัวช่วยสร้างเว็บเพจอยู่อย่างมากมายมหาศาล
จนไม่จำเป็นที่ต้องเขียน HTML เป็นก็สามารถสร้างเว็บได้ง่ายๆ
แต่ถ้าคิดจะเอาจริงแล้ว การเรียนขอบพื้นฐานก็ไม่เสียหายครับ

โปรแกรมที่ใช้เขียน HTML แบบบ้านๆ เลยก็คือ Notepad ครับ
จะใช้ MS Word ก็ได้ แต่มันกินทรัพยากรเครื่องเยอะกว่าหน่อย
Notepad จึงได้เปรียบที่เป็นโปรแกรมเล็ก โหลดเร็ว ใช้งานง่าย
และยังแก้ไขไฟล์ใดๆ บนคอมพิวเตอร์ได้ (แต่ต้องเข้าใจภาษานั้น)


เริ่มกันเลยดีกว่า...
โครงสร้างของคำสั่ง HTML นั้น จะมีวงเล็บสามเหลี่ยม < และ >
ตรงกลางเป็นคำสั่งต่างๆ โดยที่ไม่สนว่าเป็นตัวเล็กหรือตัวใหญ่
เช่น <marquee>, <MARQUEE>, <MaRqUeE> ไม่ต่างกัน
แต่ถ้าจะให้ดูง่ายและเป็นมืออาชีพ เลือกใช้ตัวเล็ก/ใหญ่ล้วนดีกว่า
สำหรับผมจะขอใช้ตัวเล็กตลอดทั้งบทเรียนนะครับ ^^

เมื่อมี Tag เปิดแล้วก็ต้องมี Tag ปิดครับ คือเพิ่ม / ไว้หลัง <
เช่น <marquee>...(ข้อความระหว่างคำสั่ง)...</marquee>
ถ้าไม่มี Tag ปิดจะทำให้การแสดงผลผิดพลาดครับ

สำหรับ Tag ที่มีคำอธิบายเพิ่ม เช่น <marquee width="20%">
เวลาปิด Tag ก็ใส่เฉพาะคำสั่งหลักเท่านั้นครับ คือ </marquee>
ไม่ต้องปิดเต็มยศอย่างนี้นะครับ </marquee width="20%"> ^^"

แต่ว่าบางคำสั่งจะไม่มี Tag ปิดครับ เช่น <br>, <img> เป็นต้น
ซึ่งถ้าเราเขียนเพื่อรองรับ XHTML แล้ว ให้เพิ่ม / ไว้ก่อน > ครับ
เป็นการบอกว่า Tag นี้มีตัวมันโดดๆ ไม่มี Tag ปิดนะ เช่น <br/>

อุ้ย... ลืมบอกซะสนิท เราเรียกคำสั่งบน HTML ว่า Tag นะครับ


เมื่อกี้รู้จักโครงสร้าง Tag ไปแล้ว ก็รู้จักโครงสร้างภาษาต่อครับ
ภาษา HTML จะต้องประกาศตัวเองทุกครั้ง ด้วย Tag <html>
สำหรับส่วนที่จะแสดงผลบนเว็บบราวเซอร์ ให้ใช้ Tag <body>
ฟังดูแล้วแล้วอาจงงๆ งั้นลองไปดูตัวอย่างกันเลยดีกว่าครับ

<html>
<body>
บทเรียนภาษา HTML
</body>
</html>


เมื่อแสดงผลบนเว็บบราวเซอร์ จะเห็นแค่ "บทเรียนภาษา HTML"
แต่ถ้าขาด Tag ใด Tag หนึ่งไป ก็จะไม่สามารถแสดงผลได้ครับ


ถ้าลองเขียนแล้วเซฟเพื่อทดสอบ ให้ตั้งชื่อว่า index.html ครับ
ส่วนเหตุผลนั้น ไว้คราวหน้าจะมาบอกครับ ^^

ก็ต้องขอจบตอนที่ 1 ก่อนที่จะยาวไปมากกว่านี้ก่อนนะครับ
ติดตามอ่านตอนที่ 2 ได้เร็วๆ นี้ครับ

หน้าถัดไป (หน้า 2) »»
หน้าที่ -1- 2- 3- 4- 5- 6- 7- 8- 9- 10- 11- 12- 13-

ความคิดเห็นที่ 169 6 มี.ค. 2553 (05:57)
ขอบคุณครับ

โดย daanaina

ความคิดเห็นที่ 168 6 มี.ค. 2553 (05:54)
ขอบคุณครับ

โดย daanaina

ความคิดเห็นที่ 167 1 ก.พ. 2553 (09:37)
ช่วยแนะนำหนังสือหรือเวบที่ใช้ศึกาาภาษาHTML ด้วยครับ บทเรียนที่ดีมากครับ

โดย berserks

ความคิดเห็นที่ 166 29 ม.ค. 2553 (12:55)
[url=http://www.musicheyha.com/" target="_blank" title="ดาวน์โหลดเพลงฟรี"]ดาวน์โหลดเพลงฟรี[/url] [url=http://mp3.musicheyha.com/" target="_blank" title="mp3"]mp3[/url]
[url=http://codehi5.musicheyha.com/" target="_blank" title="โค้ดเพลงhi5"]โค้ดเพลงhi5[/url] [url=http://www.musicheyha.com/" target="_blank" title="โหลดเพลงฟรี"]โหลดเพลงฟรี[/url]
[url=http://www.songded.com/" target="_blank" title="โค้ดเพลงลงhi5"]โค้ดเพลงลงhi5[/url] [url=http://www.musicded.com/" target="_blank" title="เพลงฟรี"]เพลงฟรี[/url]
[url=http://www.music-dd.com/" target="_blank" title="เพลงใหม่ล่าสุด"]เพลงใหม่ล่าสุด[/url]

โดย

ความคิดเห็นที่ 164 20 ม.ค. 2553 (18:23)
[url= http://www.deesong.com ]download เพลง ฟรี[/url]
[url= http://www.mefasol.com ]ดาวน์โหลด เพลง mp3[/url]
[url= http://www.xn--72cze8a7ac2b3a8czgsa.com ]โหลดเพลงฮิต[/url]
[url= http://www.xn--72cz4afjnic4cf7iofwav1f.com ]โหลดเพลงใหม่ฟรี[/url]
[url= http://www.bestsongmp3.com ]โหลดเพลงmp3ฟรี[/url]
[url= http://www.xn--72cz4anqc2bf9pqas6d.com ]โหลดเพลงใหม่[/url]
[url= http://www.topsonghit.com ]โหลดเพลงฟรี[/url]
[url= http://www.pi-singsong.com ]โหลดฟรี mp3[/url]



โดย

ความคิดเห็นที่ 163 19 ธ.ค. 2552 (19:25)
จากที่เครียดกันมา อ่านตำหรับตำราปวดหัว นักร้องคนไหนดี ซุบซิบดารา นักน้องกันนะ ไป[url=http://www.healthyscript.com]โหลดเพลงฟรี[/url]ดีกว่า ฟังเพลงเมื่อยามที่คุณเหนื่อยหล้า แล้วก็ไปซื้อของกันครับที่ [url=http://www.isanpr.com]ร้านค้าออนไลน์[/url] ให้เพลินกันไปเลยครับ

โดย

ความคิดเห็นที่ 162 19 ธ.ค. 2552 (19:25)
จากที่เครียดกันมา อ่านตำหรับตำราปวดหัว นักร้องคนไหนดี ซุบซิบดารา นักน้องกันนะ ไป[url=http://www.healthyscript.com]โหลดเพลงฟรี[/url]ดีกว่า ฟังเพลงเมื่อยามที่คุณเหนื่อยหล้า แล้วก็ไปซื้อของกันครับที่ [url=http://www.isanpr.com]ร้านค้าออนไลน์[/url] ให้เพลินกันไปเลยครับ

โดย

ความคิดเห็นที่ 161 19 ธ.ค. 2552 (19:24)
จากที่เครียดกันมา อ่านตำหรับตำราปวดหัว นักร้องคนไหนดี ซุบซิบดารา นักน้องกันนะ ไป[url=http://www.healthyscript.com]โหลดเพลงฟรี[/url]ดีกว่า ฟังเพลงเมื่อยามที่คุณเหนื่อยหล้า แล้วก็ไปซื้อของกันครับที่ [url=http://www.isanpr.com]ร้านค้าออนไลน์[/url] ให้เพลินกันไปเลยครับ

โดย

ความคิดเห็นที่ 160 18 ธ.ค. 2552 (22:29)
จากที่เครียดกันมา อ่านตำหรับตำราปวดหัว ไป[url=http://www.healthyscript.com]โหลดเพลงฟรี[/url]ดีกว่า ฟังเพลงเมื่อยามที่คุณเหนื่อยหล้า แล้วก็ไปซื้อของกันครับที่ [url=http://www.isanpr.com]ร้านค้าออนไลน์[/url]

โดย

ความคิดเห็นที่ 159 18 ธ.ค. 2552 (21:54)
จากที่เครียดกันมา อ่านตำหรับตำราปวดหัว ไป[url=http://www.healthyscript.com]โหลดเพลงฟรี[/url]ดีกว่า ฟังเพลงเมื่อยามที่คุณเหนื่อยหล้า แล้วก็ไปซื้อของกันครับที่ [url=http://www.isanpr.com]ร้านค้าออนไลน์[/url]

โดย

ขอโทษครับ กรุณา login ก่อนถึงจะสามารถแสดงความคิดเห็นได้ครับ

ล๊อกอินถาวร | Login: Password: สมัครสมาชิกใหม่ | ลืม password

ขอบคุณผู้สนับสนุน




Google  
องค์ความรู้ พัทธมิตร
  • thaigoodview
  • ติดต่อเรา ข้อมูลทั่วไป
    ผู้สนับสนุน คลิีกดูสถิติ
    Creative Commons License สงวนสิทธิ์บางประการภายใต้สัญญาอนุญาต ครีเอทีฟคอมมอนส์ แสดงที่มา-ไม่ใช้เพื่อการค้า-ไม่ดัดแปลง 3.0 ประเทศไทย.
    ท่านสามารถนำเนื้อหาในส่วนบทความไปใช้ แสดง เผยแพร่ โดยต้องอ้างอิงที่มา ห้ามใช้เพื่อการค้าและห้ามดัดแปลง
    Page generated in0.4537 seconds !