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