E-Learning Blogs: ธันวาคม 2013

How can I add or edit HTML code in my page?

จากที่สอนไปคาบเรียนที่ผ่านมา นักเรียนได้เรียนรู้เกี่ยวกับโครงสร้างของ HTMLไปแล้ว
วันนี้จะพูดถึง โค้ด (code) โค้ดตัวนี้ไม่ใช้ เบรนแดน ร็อดเจอร์ส แต่อย่างใด แล้วจะพูดถึงทำไม?

เบรนแดน ร็อดเจอร์ส ไม่ได้พูดถึงโค้ดฟุตบอล

โค้ดคำนี้หมายถึง code ที่ใช้เขียนโปรแกรมทั่วไป โดยทั่วไปแล้ว โค้ดที่พูดถึงในวันนี้คือ โค้ดHTMLครับ
และจะมาสาธิตวิธีการเขียนและรัน (Run)โค้ดง่ายๆให้ชมกันครับ

1. คลิกขวาเปิด Text Document หรือ Notepad
2. พิมพ์ โค้ด ลงไป โดยใส่ โครงสร้างของ HTML
3. เซฟ ให้มีนามสกุล .html
4. เปิดด้วย เว็บบราวเซอร์

โดยโค้ดที่นำเสนอในวันนี้มี

html ก็เหมือน ภาษาอังกฤษอ่าครับ

ก็คือ ต้องท่องคำศัพท์และจำคำแปลไห้ได้ เท่านั้นเองครับ

------------------------------------------------------------

เกี้ยวกับรูปแบบ

<br> : เว้นบรรทัด

  : เว้นวรรค

<div align="left">ข้อความ</div> : ข้อความชิดซ้าย

<div align="right">ข้อความ</div> : ข้อความชิดขวา

<div align="center">ข้อความ</div> : ข้อความอยู่กลาง

<center>ข้อความ</center> : ข้อความอยู่กลาง

------------------------------------------------------------

เกี้ยวกับสีสันข้อความ

<b>ข้อความ</b> : ตัวหนา

<strong>ข้อความ</strong> : ตัวหนา

<i>ข้อความ</i> : ตัวเอียง

<em>ข้อความ</em> : ตัวเอียง

<u>ข้อความ</u> ขีดเส้นใต้

<font size="10">ข้อความ</font> : ขนาดข้อความ

<font color="#000000">ข้อความ</font> : สีข้อความ

<font color="#000000" size="10">ข้อความ</font> : ขนาดและสีข้อความ

------------------------------------------------------------

เกี่ยวกับรูปภาพ

<img src="url"> : ใส่รูป

<img src="url" width="100px" height="100px"> : ใส่รูป แบบ กำหนดขนาด

<img src="url" border="3" border-color="#000000"> : ใส่รูป แบบ กำหนกขนาดและสีเส้นขอบ

<img src="url" ait="ข้อความ"> : ใส่รูป แบบ เวลาเอาเมาไปชี้แล้วมีข้อความขึ้นมา

------------------------------------------------------------

เกี่ยวกับ Link

<a href="url">ข้อความ</a> : ลิ้งโดยใช้ข้อความ

<a href="url" target="_blank">ข้อความ</a> : ลิ้งโดยใช้ข้อความ แบบเปิดหน้าต่างไหม่

<a href="url"><img src="url รูป"></a> : ลิ้งโดยใช้รูปภาพ

<a href="url" target="_blank"><img src="url รูป"></a> : ลิ้งโดยใช้รูปภาพ แบบเปิดหน้าต่างไหม่

------------------------------------------------------------

เกี้ยวกับ marquee หรือข้อความเลื่อน

<marquee>ข้อความ</marquee> : ข้อความเลื่อนจากขวาไปซ้าย

<marquee direction="left">ข้อความ</marquee> : ข้อความเลื่อนจากขวาไปซ้าย

<marquee direction="right">ข้อความ</marquee> : ข้อความเลื่อนจากซ้ายไปขวา

<marquee direction="up">ข้อความ</marquee> : ข้อความเลื่อนจากล่างขึ้นบน

<marquee direction="down">ข้อความ</marquee> : ข้อความเลื่อนจากบนลงล่าง

<marquee width="100px" height="100px">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดความกว้าง

<marquee bgcolor="#00CC99">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดสีพื้นหลัง

<marquee scrollamount="1">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดความเร็ว

<marquee behavior="alternate">ข้อความ</marquee> : ข้อความเลื่อน แบบ ไปกลับ

<marquee behavior="slide">ข้อความ</marquee> : ข้อความเลื่อน แบบ ไปรอบเดียว

HTML คืออะไร
คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language โดย

Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink)

Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ

ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเอง

------------------------------------------------------------------------------------------------------------
โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ

head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง

body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web browser โดยตรง

title ข้อความที่ใช้เป็น title ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser

<html>
<head>
คำสั่งในหัวข้อของ head
</head>
<title>
ข้อความอธิบายชื่อเรื่องของเว็บ
</title>
<body>
คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล
</body>
</html>