หลักการเขียนเว็บไซต์ ง 30205 การเขียนเว็บไซต์เบื้องต้น ศูนย์คอมพิวเตอร์โรงเรียนปลวกแดงพิทยาคม
Internet เริ่มจาก ARPANET USA Inter + Network เชื่อมต่อเครือข่ายหลายๆรูปแบบเข้าด้วยกันโดยผู้ใช้ไม่ต้องสนใจ
Internet
คำศัพท์ Web site ที่ตั้งเว็บ Web page หน้าเอกสาร Homepage เอกสารหน้าแรก Server เครื่องให้บริการ Web Server เครื่องให้บริการเว็บ Client เครื่องขอใช้บริการ URL ชื่อเว็บไซต์
ที่อยู่บนอินเตอร์เน็ต(IP Address) IP : Internet Protocol Address ใช้ในการติดต่อระหว่างเครื่องคอมพิวเตอร์บนอินเตอร์เน็ต มี 2 แบบคือภายในและภายนอก
แบ่งตัวเลขเป็น 4 ชุดแต่ละชุดมีค่า 0- 255 ของโรงเรียนคือ IP Address แบ่งตัวเลขเป็น 4 ชุดแต่ละชุดมีค่า 0- 255 ของโรงเรียนคือ ภายนอก 203.172.167.82 ภายใน 192.168.1.1
Web Browser โปรแกรมค้นหาและแสดงข้อมูลบนอินเตอร์เน็ต Internet Explorer, Nescape Navigator, Konquer ปลาวาฬ etc.
Internet Explorer ติดมากับ windows ใช้งานง่าย
ส่วนประกอบ Title bar Menu bar Tool bar Address bar
วิธีการใช้ IE พิมพ์ URL ในช่อง address bar กด enter หรือกดปุ่ม go
ภาษา HTML Hyper Text Markup Language ภาษาที่ใช้ในการตกแต่งโดยใช้ข้อความ เป็นภาษาพื้นฐานที่ใช้ในการแสดงผลบนอินเตอร์เน็ตในยุคปัจจุบัน
ตระกูลภาษา markup html : Hyper Text ML xml : extensible ML wml : wireless ML SGML VRML
ลักษณะการทำงาน <tag คุณสมบัติอื่นๆ> ข้อมูล </tag>
ชนิดของ tag Tag เดี่ยว : สามารถใช้งานได้เพียงอันเดียว เช่น <br> ขีดเส้นใต้ <hr> ตีเส้น <img> แสดงภาพ Tag คู่ : ต้องใช้ 2 tag มี tag เปิดและ tag ปิด เช่น <h1> ข้อมูล </h1>
ลักษณะของภาษา HTML อักษรตัวเล็กกับตัวใหญ่เหมือนกัน <html> เหมือนกับ <HTML> สามารถเว้นบันทัดหรือช่องว่างได้ยกเว้น tag มีนามสกุล .html หรือ .htm
ข้อมูลต่างที่ต้องการแสดง องค์ประกอบของ HTML <html> <head> <title> ข้อความที่แสดงบน title bar </title> <script> โปรแกรมสคิปต์ต่างๆ </script> </head> <body> ข้อมูลต่างที่ต้องการแสดง </body> </html> ส่วนหัว ส่วนตัว
ผลที่ได้
โปรแกรมที่ใช้สร้างและแสดงผลภาษา HTML โปรแกรมที่ใช้สร้างคือโปรแกรม editor ทั่วไป เช่น notepad, word, powerdev โปรแกรมที่ใช้แสดงคือโปรแกรม web browser เช่น IE, Nescape
ขั้นตอนการสร้าง HTML เปิดโปรแกรม editor (notepad) save เป็นนามสกุล .html และเลือก All file บันทึกใน public_html
เริ่มต้นสร้าง HTML เปิดโปรแกรม notepad start ->program ->accessory -> notepad พิมพ์ภาษา HTML ตามใบงานที่ 1 ดังนี้
ใบงานที่ 1 สร้าง web page 1. เปิดโปรแกรม notepad
2. พิมพ์ภาษา html เหล่านี้ลงไปในโปรแกรม notepad
3. ไปที่เมนู file เลือก Save As
4. ตั้งชื่อว่า first.html
5. เลือก All Files (*.*)
6. เข้าไป save ที่ public_html ใน locker
7. กดบันทึก
การแก้ไขโฮมเพจ เปิดไฟล์เก่าขึ้นมา แก้ไขคำสั่ง save ทับที่เดิม ใช้ IE เปิดดูใหม่แล้วกด refresh หรือปุ่ม F5
ลองทำดู ลองเปิดไฟล์ first.html ขึ้นมาแล้วเปลี่ยนข้อความ “HTML ง่ายนิดเดียว” เป็นชื่อและนามสกุลของท่าน ทำการบันทึกโดยเลือก save แล้วใช้โปรแกรม IE เปิดดูแบบ refresh อีกครั้ง ข้อความเปลี่ยนเป็นชื่อหรือไม่ เปลี่ยน ไม่
คำสั่ง (Tag) ใน HTML มีจำนวนมากและในแต่ละ tag ก็มีคุณสมบัติย่อยอีกหลายอย่าง ต้องอาศัยคู่มือ หลักสำคัญคืออยากให้ข้อมูลเป็นอย่างไรก็ใช้ tag นั้น tag สามารถครอบกันได้ โดยจะเป็นการรวมคุณสมบัติของ tag ที่ครอบอยู่ทั้งหมด
กลุ่ม tag ที่สำคัญ จัดรูปแบบพื้นหลัง จัดรูปแบบข้อความ แสดงภาพ สร้างตาราง ทำการเชื่อมต่อ (link) ทำรายการ (list)
จัดรูปแบบพื้นหลัง <body bgcolor = red>
เรื่องของสี แดง เขียว น้ำเงิน เราสามารถผสมสีได้ 256 ^ 3 ใช้ bgcolor = #rrggbb ตัวอักษรแทนเลขฐานสิบหก 0-F 0 1 2 3 4 5 6 7 8 9 A B C D E F แดง เขียว น้ำเงิน
เรื่องของสี เขียว น้ำเงิน เหลือง ม่วง เช่น #FF0000 เป็นสีแดง #00FF00
เรื่องของสี (ต่อ) ดำ #000000 #FFFFFF ขาว
ลองทำดู ให้ลองใช้ความเข้าใจเกี่ยวกับการผสมสีในภาษา HTML ลองเปลี่ยนสีพื้นหลังให้เป็น สีเทา ทำได้ ทำไม่ได้
Tag จัดรูปแบบข้อความ <H1> … <H7> ใช้กำหนดขนาดของข้อความ
H1 … H7
<center> จัดข้อความให้อยู่กลาง <center> ข้อมูล </center>
<marquee> ทำให้ตัวอักษรวิ่ง ทำได้เฉพาะ IE <marquee>ข้อมูล</marquee>
U B & I <U>ขีดเส้นใต้</U> <B> ตัวหนา </B> <I> ตัวเอียง </I>
U B & I
<BR> <HR> เป็น tag เดี่ยว
หลักการแสดงภาพ ต้องมีภาพอยู่ที่เดียวกับ ไฟล์ HTML (ถ้าอยู่คนละที่ต้องระบุตำแหน่งให้ถูก) ต้องรู้ชื่อและนามสกุลที่ถูกต้องของภาพนั้น ใช้คำสั่ง <img src = ชื่อภาพ>
หลักการแสดงภาพ
การแสดงภาพ <img src = fruit.jpg> ถ้าต้องการกำหนดขนาด <img src = fruit.jpg width = 100% >
การแสดงภาพ
การสร้างลิ้งค์ คือการสร้างจุดที่ใช้ในการเชื่อมโยงไปยังเป้าหมาย มีหลักการคือต้องระบุเป้าหมายให้ถูกต้อง มี 2 ลักษณะคือ ลิ้งค์ไปยังไฟล์และลิ้งค์ไปยังเว็บไซต์อื่นๆ
สื่อ ชื่อสื่อ ไฟล์ B ไฟล์ A ไฟล์ A ไฟล์ B
คำสั่งในการสร้างลิ้งค์ <A href = เป้าหมาย> ข้อความที่ใช้ลิ้งค์ <A> เช่น <a href = knowledge.html>
<html> <head><title> เมนูสื่อ </title> <body> <a href = knowledge.doc> ใบความรู้ </a> </body> </html>
เมื่อคลิ๊กโปรแกรมจะทำการเรียกใบความรู้ที่ชื่อ knowledge เมื่อคลิ๊กโปรแกรมจะทำการเรียกใบความรู้ที่ชื่อ knowledge.doc ขึ้นมาแสดง (ถ้ามีอยู่จริง)