ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
Creating simple Home Page
2
เอกสารไฮเปอร์เท็กซ์ โฮมเพจเป็นเอกสารไฮเปอร์เท็กซ์ ใช้ภาษา HTML เขียนมีรูปแบบไวยากรณ์ที่ชัดเจน เก็บอยู่บนเครื่อง Server เอกสารไฮเปอร์เท็กซ์ ที่ถูกแปลงและแสดงโดย Web browser ที่เครื่อง PC
3
HTML ย่อมาจาก HyperText Markup Language
เป็นภาษาที่สื่อให้ Web browser ทราบรูปแบบการแสดงผล คำสั่งที่ใช้ในการกำหนดรูปแบบการแสดงผล เรียกว่า tag Web browser จะแสดงผลตามความหมายของ tag ที่ระบุ โดยคำสั่ง tag จะไม่ถูกแสดงออกมาให้เห็นทางหน้าจอ คำสั่ง tag จะอยู่ระหว่างเครื่องหมาย < และ > ตามลำดับ ตัวอย่างเช่น <body> Sawasdee Everyone </body>
4
Web Editor คือโปรแกรมที่ใช้เป็นเครื่องมือในการเขียนรูปแบบคำสั่ง HTML เนื่องจาก HTML อยู่ในรูป ASCII TEXT ธรรมดา ดังนั้น จึงสามารถที่จะใช้แม้กระทั่ง Text Editor ธรรมดา อย่างเช่น Notepad มาเขียนก็ได้ ปัจจุบันมี Web Editor ที่มีความสามารถสูงมากมาย ยกตัวอย่างเช่น FrontPage , NetObject, Composer, HotMetal เป็นต้น
5
Edit Plus เป็นตัวสร้างเวบ (Web Editor) ที่เราจะนำมาใช้ในปฏิบัติการ
6
โครงสร้างภาษา HTML <HTML> <HEAD>
<TITLE>..</TITLE> </HEAD> <BODY> .. </BODY> </HTML>
7
รูปแบบคำสั่งของ HTML ประกอบด้วย open tag เช่น <I> และ close tag เช่น </I> การใช้ Tag จะซ้อนกันเป็นชั้น <B> <U> <S> message </S> </U> </B>
8
การกำหนดชื่อเรื่อง (Title)
สำหรับใช้เป็นชื่อเรื่องเอกสาร ซึ่งจะไปปรากฎที่ title bar ของ Browser <TITLE> </TITLE> ชื่อเรื่องเอกสาร ตัวอย่าง <TITLE>Welcome to : Introduction to Computers</TITLE>
9
การกำหนดหัวเรื่อง (Headings)
ใช้เน้นข้อความ เช่น ชื่อเรื่อง ชื่อบท ชื่อตอนหรือข้อความสำคัญอื่นๆ เมื่อ browser พบ tag นี้ จะขึ้นบรรทัดใหม่ พิมพ์ข้อความใน heading และเว้นบรรทัดว่าง 1 บรรทัด <Hn> </Hn> ข้อความหัวเรื่อง เมื่อค่า n เป็นขนาดของข้อความหัวเรื่องมีค่า 1-6
10
การทำคำสั่งให้เป็นเพียงคำบรรยาย
หากไม่ต้องการใช้ tag คำสั่งใดๆ ทำการแสดงผลให้ใส่เครื่องหมาย !ไว้หลังเครื่องหมาย < ดังนี้ <! Tag > หากต้องการให้ tag คำสั่งหรือข้อความใดๆ ไม่แสดงบน Web Browser <!-- text >
11
การขึ้นบรรทัดใหม่ (LINE Breaks)
การขึ้นบรรทัดใหม่ในเอกสาร html ไม่ได้ทำให้หน้าจอที่เห็นมีการขึ้นบรรทัดใหม่ด้วย ดังนั้นถ้าต้องการจบข้อความใดๆ โดยข้อความถัดไปต้องขึ้นบรรทัดใหม่ให้ใช้คำสั่ง br ดังนี้ <BR> ชื่อเรื่องเอกสาร ตัวอย่าง <BODY>Welcome to <BR>Introduction to Computers</BODY> Welcome to Introduction to Computers
12
การขึ้นย่อหน้าใหม่ (Paragraphs)
เป็นการกำหนดย่อหน้าข้อมูล <P align=“---”> </P> เนื้อความเอกสาร “---” สามารถเป็นได้ 3 ค่าคือ left ชิดซ้าย right ชิดขวา center จัดกึ่งกลาง
13
การวางข้อความไว้กลางบรรทัด (Center)
สำหรับข้อความสั้นๆ แค่บรรทัดเดียว <CENTER> </CENTER> ข้อความ
14
การสร้างเส้น (Horizontal Rule)
เป็นเส้นตรงในแนวนอน สามารถกำหนดความยาวและความกว้างของเส้นได้ <HR SIZE=ความหนาของเส้น WIDTH=ความยาวหรือเปอร์เซ็นต์ความยาว ALIGN=left|right|center>
15
การกำหนดบล็อกข้อความ (Quotation Block)
เป็นการกำหนดบล็อกข้อความ เมื่อต้องการเน้นข้อความแยกจากตัวเนื้อหาเอกสาร <BLOCKQUOTE>ข้อความ</BLOCKQUOTE>
16
การจัดรูปแบบข้อความตามอิสระ(Preformatted)
ใช้เมื่อต้องการจัดวางเอกสารตามอิสระตามที่ได้จัดไว้ใน TAG PRE <PRE> ข้อความ </PRE>
17
การจัดรูปแบบตัวอักษร
Tag การจัดรูปแบบ ตัวหนา(Bold) <B>ข้อความ</B> ตัวเอียง (Italic) <I>ข้อความ</I> ตัวขีดเส้นใต้ (Underline) <U>ข้อความ</U> ตัวกระพริบ (Blink) <BLINK>ข้อความ</BLINK> ตัวขีดฆ่า (Strike) <STRIKE>ข้อความ</STRIKE> ตัวห้อย (Sub-script) <SUB>ข้อความ </SUB> ตัวยก (Super-script) <SUP>ข้อความ </SUP>
18
<FONT SIZE=ค่า 1-7>ข้อความ</FONT>
ปกติฟอนต์จะถูกเซตให้มีขนาด = 3 ถ้าต้องการเปลี่ยนขนาดฟอนต์ให้มีขนาดเล็กลงหรือใหญ่ขึ้น ก็สามารถกำหนดขนาดได้ในช่วง 1-7 <FONT SIZE=ค่า 1-7>ข้อความ</FONT>
19
การตั้งค่าตัวอักษรมาตรฐาน (BASEFONT)
จะมีผลตลอดทั้งเอกสาร <BASEFONT SIZE= ค่า 1-7>ข้อความ
20
การกำหนดชนิดของตัวอักษร
เมื่อต้องการกำหนดชนิดของตัวอักษรหรือต้องการแสดงผลด้วยชนิดของตัวอักษรมากกว่า 1 ชนิด <FONT FACE=“ชื่อ Font , ชื่อ Font,…>
21
การกำหนดสีให้กับตัวอักษร
กำหนดสีตัวอักษรเฉพาะข้อความที่ต้องการ <FONT COLOR=“#RRGGBB” หรือระบุชื่อสี> <FONT SIZE=“ค่า 1-7” COLOR=“ระบุสี”>ข้อความ</FONT> กำหนดสีตัวอักษรตลอดทั้งเอกสาร <BODY TEXT=“#RRGGBB” หรือระบุชื่อสี>
22
การกำหนดสีให้กับพื้นหลัง
สามารถกำหนดสีพื้นหลังได้ในส่วนของ <body> <BODY BGCOLOR=“#RRGGBB” หรือ ระบุชื่อสี> การกำหนดสีพื้นหลังและกำหนดสีของข้อความที่อยู่ภายใต้แท็ก <body> <BODY BGCOLOR=“#RRGGBB” TEXT=“#RRGGBB”>
23
การกำหนดรูปภาพให้เป็นพื้นหลัง
<BODY BACKGROUND=“ชื่อไฟล์รูปภาพ”> การกำหนดตำแหน่งของไฟล์รูปภาพ Path/filename.extension
24
การแสดงผลแบบรายการ รายการแบบใช้สัญลักษณ์กำกับ รายการแบบใช้ตัวเลขกำกับ
รายการแบบคำจำกัดความ
25
รายการแบบใช้สัญลักษณ์กำกับ (Unordered list)
<UL TYPE=DISC|CIRCLE|SQUARE> <LI>ข้อมูล …. </UL>
26
รายการแบบใช้ตัวเลขกำกับ (Ordered list)
<OL TYPE = A|a|1|i|I > <LI>ข้อมูล …. </OL>
27
รายการแบบคำจำกัดความ (Definition list)
<DL> <DT> คำจำกัดความ </DT> <DD> คำอธิบาย </DD> ... </DL>
28
การแสดงภาพ Graphic <IMG SRC=“ชื่อไฟล์รูปภาพ”
ALIGN = left|right|middle|top|bottom ALT = ข้อความที่ต้องการให้แสดงบนกรอบจอภาพ WIDTH = ความกว้างของภาพ HEIGHT = ความสูงของภาพ BORDER = ความหนาของกรอบ(สีเดียวกับตัวอักษร) >
29
TIP คลิ้กเมาส์ขวาที่รูปภาพ เลือก “Save picture as..”
รูปจาก site ที่เข้าไปชม ทำได้โดยเมื่อต้องการ save ถ้าต้องการนำภาพมาเป็น Background ของ Windows คลิ้กเมาส์ขวาที่รูปภาพ เลือก “Save picture as..” คลิ้กเมาส์ขวาที่รูปภาพ เลือก “Set As Wallpaper”
30
การเน้นที่อยู่ ( Address)
<ADDRESS>ข้อความ</ADDRESS>
งานนำเสนอที่คล้ายกัน
