 |
<script language="JavaScript" src="http://www.vcharkarn.com/vlesson/javafeed.php?lessonid=14" type="text/javascript"></script> |
 |
บทเรียน HTML ออนไลน์ ง่ายๆ แต่ใช้ได้จริง
ภาษา HTML ภาษาพื้นฐานแห่งการเขียนเว็บเพจ ใครใคร่เขียนเว็บอย่างเซียน ไม่รู้จัก HTML ไม่ได้แล้ว!!!
ผู้เขียน เนยสด
อยู่ในส่วน คอมพิวเตอร์
ระดับของบทเรียน มัธยมศึกษาตอนต้น
ปรับปรุงล่าสุด 24 ธ.ค. 2550 (12:16)
เข้าชมแล้ว 83401 ครั้ง (รวมทุกหน้า)
[Vote : 85  | Rating : 4.57] |
สารบัญ
หน้าที่ 1 - รู้จักกับโครงสร้างคำสั่งและโครงสร้างภาษา HTML
หน้าที่ 2 - ขอพรรณาเรื่องพื้นฐานที่ยังไม่เกี่ยวกับคำสั่งก่อนเน้อ
หน้าที่ 3 - ลองมาเล่นกับตัวอักษรขั้นพื้นฐานกันก่อนนะครับ
หน้าที่ 4 - เล่นกับการจัดย่อหน้า & การใส่รูปลงในเว็บเพจ
หน้าที่ 5 - พบปัญหาน่าปวดหัว เมื่อตัวอักษรแต่งงานกับรูปภาพ!
หน้าที่ 6 - มาดูวิธีทำลิง เอ้ย! ทำลิงก์กันเถอะครับ (แถมตัววิ่ง)
หน้าที่ 7 - Table ไม่ได้แปลว่าโต๊ะเพียงอย่างเดียวนะครับ ^^
หน้าที่ 1 - รู้จักกับโครงสร้างคำสั่งและโครงสร้างภาษา HTML
หน้าที่ 2 - ขอพรรณาเรื่องพื้นฐานที่ยังไม่เกี่ยวกับคำสั่งก่อนเน้อ
หน้าที่ 3 - ลองมาเล่นกับตัวอักษรขั้นพื้นฐานกันก่อนนะครับ
หน้าที่ 4 - เล่นกับการจัดย่อหน้า & การใส่รูปลงในเว็บเพจ
หน้าที่ 5 - พบปัญหาน่าปวดหัว เมื่อตัวอักษรแต่งงานกับรูปภาพ!
หน้าที่ 6 - มาดูวิธีทำลิง เอ้ย! ทำลิงก์กันเถอะครับ (แถมตัววิ่ง)
หน้าที่ 7 - Table ไม่ได้แปลว่าโต๊ะเพียงอย่างเดียวนะครับ ^^
หน้าที่ 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 ได้เร็วๆ นี้ครับ
หน้าที่ -1-
2-
3-
4-
5-
6-
| ความคิดเห็นที่ 62 8 พ.ค. 2551 (11:50) |
พี่เนยสดจ๋า มาสอนหนูหน่อยจิ 5555 ติด vRecommend ด้วย เรียนคณิต งัยมาเปิดสอนคอมฯ ว่าแล้วมาเรียนวิทยาคอมฯ ด้วยกันป๊ะ |
| โดย ekizai |
| ความคิดเห็นที่ 61 30 เม.ย. 2551 (10:28) |
อืม ดีมากมาย แล้วจะลองศึกษาดูนะคะ ไปละนะ ขอบคุณมากมาย |
| โดย nu_pond_jung |
| ความคิดเห็นที่ 60 23 เม.ย. 2551 (21:15) |
มีอีก แต่ยังไม่รู้จะเขียนอะไรดี แล้วก็เหนื่อยๆ (ใจ) ด้วย เลยไม่มีรมณ์เขียน แต่ตอนนี้ก็ปิดเทอมแล้ว เดี๋ยวเบื่อๆ ก็หายเหนื่อยเองแหละ |
| โดย เนยสด |
| ความคิดเห็นที่ 59 23 เม.ย. 2551 (08:43) |
ขอ แบบละเอียดหน่อยได้มั้ยอะค่ะ พอดีเพิ่งหัดทำเวบนะค่ะ |
| โดย wi_va |
| ความคิดเห็นที่ 57 19 เม.ย. 2551 (15:13) |
dfsdf(น้ำเงิน) |
| โดย khenji |
| ความคิดเห็นที่ 56 16 เม.ย. 2551 (17:34) |
ไว้ว่าง ๆ ต้องมาฝึกดูแล้วครับงานนี้เดี๋ยวทำไม่เป็นแล้วจะอายเด็กสมัยใหม่  |
| โดย Timestopper_STG |
| ความคิดเห็นที่ 55 7 เม.ย. 2551 (19:13) |
| โดย |
| ความคิดเห็นที่ 54 6 เม.ย. 2551 (18:40) |
สีน้ำเงินตัวโตๆ |
| โดย pooleen |
| ความคิดเห็นที่ 52 4 เม.ย. 2551 (11:32) |
การอัพภาพลงในเวปครับ อ้างอิงครับhttp://www.baanmaha.com/community/archive/index.php/t-8443.html ดูเวอร์ชั่นเต็ม : โปรแกรมช่วยในการอัพโหลดภาพจากเครื่อง..แบบง่ายๆ ________________________________________ โพสโดยคุณ บ่าวคนเดิม 03-20-2007, 07:13 AM วันนี้แนะนำโปรแกรม imageshackert เป็นโปรแกรมที่ช่วยอำนวยความสะดวกในการอัพโหลด รูปภาพจากเครื่องของท่าน เพียงแค่ดาว์นโหลดโปรแกรม ดาว์นโหลด imageshackert (http://www.buggyashell.nl/progs/imageshackert/download/) แล้วคลายซิบไปไว้ที่หน้าเดสก์ทอป การเรียกใช้งานเพียงแค่ดับเบิ้ลคลิกที่ไอคอน ที่เราคลายซิบออกมา เราก็สามารถเลือกไฟล์ภาพเพื่อที่จะอัพโหลดได้แล้ว ภาพประกอบ http://img156.imageshack.us/img156/7225/imgua5.jpg http://img120.imageshack.us/img120/841/img2cy9.jpg http://img469.imageshack.us/img469/4462/img3ey7.jpg ขออนุญาตินำมาเผยแพร่ครับ |
| โดย gudjeejung |
| ความคิดเห็นที่ 51 4 เม.ย. 2551 (10:00) |
ขอบคุณที่แบ่งปันความรู้ครับ |
| โดย gudjeejung |
ขอโทษครับ กรุณา login ก่อนถึงจะสามารถแสดงความคิดเห็นได้ครับ
xx
Copyright© 2000-2007, Vcharkarn.Com. All rights reserved.
|
คลิ๊กเพื่อดูสถิติ รับรองและสนับสนุนโดย |
 สสวท. |
 มูลนิธิ พสวท. |
 พสวท. |