พื้นฐาน html
Download
Report
Transcript พื้นฐาน html
พืน
้ ฐาน html
ง30213 การเขียนเว็บเพจโดยใช ้
ภาษาสคริปต์
ศูนย์คอมพิวเตอร์
โรงเรียนปลวกแดงพิทยาคม
HTML คืออะไร
เป็ นภาษาทีใ่ ชก้ าหนดหน ้าตาของ
เอกสารบนเว็บ
Hyper Text Markup Language
้ าสงั่ ในภาษา HTML กากับ
เราใชค
ข ้อความต่างๆทีจ
่ ะแสดงออกมาใน
หน ้าเว็บเพจ เพือ
่ ให ้โปรแกรมเว็บ
บราวเซอร์สามารถแสดงผลข ้อความ
นัน
้ ออกมาตามลักษณะทีเ่ ราต ้องการ
รู ้จักกับ HTML Tags
ั่ ในภาษา HTML เรียกว่า แท็ก
คาสง
(Tag) ซงึ่ แท็กหนึง่ ๆประกอบด ้วย 3
สว่ น ได ้แก่
เครือ
่ งหมายน ้อยกว่า (<)
ื่ คาสงั่ หรือชอ
ื่ แท็ก
ชอ
เครือ
่ งหมายมากกว่า (>)
่ <body>, <b> และ <table> เป็ น
เชน
ต ้น
ประเภทของTags
้
้ นคู่
แท็กคู่ เวลาใชงานจะต
้องใชเป็
ประกอบด ้วยแท็กเปิ ดและแท็กปิ ด
ื่ เหมือนแท็กเปิ ดแต่
แท็กปิ ดจะมีชอ
ื่ แท็กจะมีเครือ
หน ้าชอ
่ งหมาย / อยู่
ื่
หน ้าชอ
้ ก
แท็กเดีย
่ ว ทางานได ้โดยใชแท็
เดียว
ทดลองสร ้างเว็บเพจด้วย
ภาษา HTML
ให ้เปิ ดโปรแกรม notepad ขึน
้ มาแล ้วพิมพ์
ข ้อความเข ้าไปดังนี้
<html>
<head>
<title> ทดลองสร ้างเว็บเพจ </title>
</head>
<body>
<h1>ยินดีต ้อนรับ</h1> <br>
ทดสอบการแสดงข ้อความเป็ น <b>ตัวหนา</b>
และ <i>ตัวเอียง</i>
</body>
</html>
่ ต้
่ องทา
สิงที
ื่ อะไรก็ได ้แต่ต ้องมีนามสกุล
ตัง้ ชอ
.html
ให ้เลือกชนิดของไฟล์เป็ น All Files
(*.*)
่
ผลทีได้
แท็กสาคัญ
ในภาษา html มีแท ้ฏทีส
่ าคัญดังต่อไปนี้
้ าหรับ
แท็ก <html> … </html> ใชส
บอกกับเว็บบราวเวอร์วา่ ทัง้ หมดทีอ
่ ยู่
ภายในเป็ นข ้อมูลแบบ html
้ าหรับ
แท็ก <title> … </title> ใชส
กาหนดหัวเรือ
่ งของเว็บเพจ ข ้อความที่
ื่ ของเว็บ
อยูร่ ะหว่างแท็ก title จะเป็ นชอ
เพจ
้
แท็ก <body>…</body> ใชแสดง
การกาหนด Attribute
ให้กบ
ั แท็ก
บางครัง
้ คุณจาเป็ นต ้องระบุข ้อมูล
เพิม
่ เติมให ้กับแท็กหนึง่ ๆ โดยเราเรียกว่า
การกาหนด แอทริบวิ ต์ ให ้กับแท็กนัน
้ ๆ
่
เชน
<body bgcolor= “gray”>
…
</body>
ตัวอย่างนีค
้ อ
ื การกาหนดแอตทริบวิ ต์
bgcolor (ย่อมาจาก background color)
ให ้กับแท็ก <body> มีคา่ เท่ากับ gray ซงึ่
ระบบสีในภาษา HTML
กาหนดโดยเลขฐาน 6 หลัก ได ้มาจากการนาค่า
ี อ
ของแม่ส ี 3 สค
ื แดง, เขียว และน้ าเงิน แต่ละส ี
ิ หกตัง้ แต่ 00 ไปจนถึง ff
จะมีคา่ เป็ นเลขฐานสบ
ิ ) การระบุ
(เท่ากับ 0 – 255 ในระบบเลขฐานสบ
ค่าสใี ห ้นาค่าทัง้ สามมาเขียนต่อกันตามลาดับ
จากแดงไปเขียวและน้ าเงิน แล ้วใสเ่ ครือ
่ งหมาย
่
# นาหน ้า เชน
ี า (แดง 00, เขียว 00, น้ า
#000000 หมายถึงสด
เงิน 00)
ี าว(แดง ff, เขียว
#ffffffหรือ(#FFFFFF)หมายถึงสข
ff, น้ าเงิน ff)
ระบบสีในภาษา HTML
#ff0000
#00ff00
#0000ff
#ffff00
#ff00ff
#ffffff
#000000
#สเี ทา
red
green
blue
yellow
violet
white
black
#888888
การใส่รูปภาพในเว็บเพจ
้ ก <img> โดยระบุ
การใสร่ ป
ู ภาพในเว็บเพจ ใชแท็
ื่ ไฟล์รป
้
ชอ
ู ภาพโดยใชแอตทริ
บวิ ต์ src นอกจากนี้
่ border ใชก้ าหนด
ยังมีแอตทริบวิ ต์อน
ื่ ๆอีก เชน
ขนาดความหนาของกรอบรูป, width ใชก้ าหนด
ความกว ้างของรูป, และ height ใชก้ าหนดความสูง
ของรูป เป็ นต ้นดังตัวอย่าง
<img src=logo.gif border=5 width=320
height=400>
แอตทริบวิ ต์อก
ี อย่างของแท็ก <img> ที่
น่าสนใจคือ alt (alternative text) ใชส้ าหรับกาหนด
Whitespace ในภาษา
HTML
่ งว่าง แท็บ
เว็บบราวเซอร์จะไม่สนใจชอ
และการขึน
้ บรรทัดใหม่ในโค๊ด HTML (เรียก
่ งว่างขาว หรือ Whitespace) ดังนัน
รวมๆว่า ชอ
้
ไม่วา่ คุณจะพิมพ์ตด
ิ ๆกัน หรือขึน
้ บรรทัดใหม่
หรือเว ้นระยะห่างเท่าใด ก็จะไม่มผ
ี ลใดกับ
การตีความของเว็บบราวเซอร์ เว็บบราวเซอร์
จะตีความ whitespace ทัง้ หมดทีอ
่ ยูต
่ ด
ิ กันเป็ น
่ งว่าง
แค่ 1 ชอ
เราสามารถสงั่ ให ้เว็บบราวเซอร์
การสร ้างตาราง
ตารางถือได ้ว่าเป็ นคุณสมบัตพ
ิ น
ื้ ฐานของ
การออกแบบเอกสาร ไม่เว ้นแม ้กระทั่ง
เอกสารบนหน ้าจอคอมพิวเตอร์อย่างเว็บเพจ
้
เราอาจใชตารางแสดงข
้อมูลออกมาใน
รูปแบบของตาราง (tabular format) หรือใชจั้ ด
องค์ประกอบให ้กับเนือ
้ หาสว่ นต่างๆในหน ้า
เว็บเพจ
การสร ้างตารางจะเริม
่ ด ้วยแท็ก <table>
และปิ ดด ้วยแท็ก </table> ภายในแท็กนีเ้ รา
จะกาหนดแถว (row) ของตารางขึน
้ มาด ้วย
ตัวอย่างการสร ้างตาราง
<table border=3>
ื่ -สกุล</th>
<tr><th>เลขที<
่ /th><th>ชอ
</tr>
<tr><td>1</td>
</td></tr>
<tr><td>2</td>
</td></tr>
</table>
<td>นายวีระ คงกระจ่าง
<td>นายเดชา ล ้อมวงษ์
้
การสร ้างไฮเปอร ์ลิงค ์
ไฮเปอร์ลง
ิ้ ค์ (hyperlink) หรือเรียกว่า
ลิง้ ค์ (link) คือคุณสมบัตส
ิ าคัญทีส
่ ด
ุ
อย่างหนึง่ ของภาษา HTML การคลิก
ื่ มโยงจากเว็บ
ลิง้ ค์จะทาให ้เกิดการเชอ
หนึง่ ไปยังอีกเว็บหนึง่ ลิง้ ค์จงึ เป็ นสงิ่
หนึง่ ทีท
่ าให ้ใครสามารถท่องไปใน
อินเตอร์เน็ ตได ้อย่างง่ายดาย แทนที่
จะต ้องพิมพ์ URL ของเว็บเพจอยู่
ตลอดเวลา
้
การสร ้างไฮเปอร ์ลิงค ์
ื่
การสร ้างลิง
้ ค์จะใชคู้ แ
่ ท็ก <a></a> (ชอ
แท็กย่อมาจาก anchor) โดยกาหนด
ข ้อความทีต
่ ้องการแสดงเป็ นลิง้ ค์ไว ้
ระหว่างคูแ
่ ท็กนี้ และกาหนดเว็บเพจ
ปลายทาง ทีแ
่ อตทริบวิ ต์ href ดัง
ตัวอย่าง
<a href=test2.html> จุดคลิ๊ ก </a>
บางครัง
้ เราสามารถใชรู้ ปภาพเป็ นจุด
่
คลิ๊ กได ้ เชน
คอมเมนต ์ในภาษา HTML
คอมเมนต์ (comment) คือข ้อความหมาย
เหตุทใี่ สไ่ ว ้ในโค๊ดของเพจ ซงึ่ เว็บ
บราวเซอร์จะไม่สนใจคือจะไม่ตค
ี วาม
แสดงผลออกมา มีประโยชน์ในการ
อธิบายโปรแกรม
คอมเมนต์ในภาษา HTML จะเริม
่ ต ้น
ด ้วย <!—และปิ ดท ้ายด ้วย --> โดยไม่
จาเป็ นต ้องอยูใ่ นบรรทัดเดียวกัน คาสงั่
ทัง้ หมดทีอ
่ ยูร่ ะหว่างเครือ
่ งหมายคอม
้
่
สรุปแท็กพืนฐานทีสาคัญ
แท็กหรืออิลเิ มนต ์
คาอธิบาย
<html>…</html
>
<head>…</hea
d>
<body>…</bod
y>
<title>…</title>
ระบุวา
่ เป็ นภาษา html
<p>…</p>
ย่อหน้า
ส่วนหัวของเว็บเพจ ใช้กาหนดคุณสมบัต ิ
้
ส่วนเนื อหาของเว็
บ ใช้แสดงข้อมู ล
่ บ
ใช้แสดงชือเว็
<a>…</a>
้ ์
ไฮเปอร ์ลิงค
<b>…</b>
ตัวหนา
<em>…</em>
ตัวเน้น
้
่
สรุปแท็กพืนฐานทีสาคัญ
<font>…</font
>
<i>…</i>
<small>…</s
mall>
<table>…</tab
le>
<tr>…</tr>
<th>…</th>
<td>…</td>
<ul>…</ul>
<ol>…</ol>
<li>…<li>
กาหนดรู ปแบบตัวอ ักษร
ตัวเอียง
ตัวเล็ก
กาหนดตาราง
สร ้างแถวของตาราง
่ นหัวตาราง
สร ้างช่องตารางทีเป็
ช่องตารางปกติ
กาหนดรายการแบบไม่เป็ นลาดับ
กาหนดรายการแบบเป็ นลาดับ
แสดงแต่ละรายการ