ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
ความรู้เบื้องต้นเกี่ยวกับ HTML
2
HTML คืออะไร HTML ย่อมาจากคำว่า HyperText Markup Language เป็นภาษาที่ใช้ในการแสดงผลของเอกสารบนเว็บไซต์ หรือเว็บเพจ เป็นภาษาที่พัฒนาโดย World Wide Web Consortium (W3C) HTML เป็นภาษาที่สำคัญมากกับเทคโนโลยีบนเว็บไซต์ ไม่ว่าคุณจะเขียนโปรแกรมบนเว็บไซต์ด้วยภาษาใดๆ เช่น PHP, ASP, Perl หรืออื่น ๆ คุณก็ต้องมีความจำเป็นในการแสดงผลข้อมูลออกมายัง Web Browser ด้วยภาษา HTML เป็นหลัก หรือให้เรามองว่า HTML คือ Output ในการแสดงผลสู่จอภาพของ Web Browser
3
HTML คืออะไร (ต่อ) ภาษา HTML เป็นภาษาพื้นฐานหรือเป็นเรื่อง BASIC ที่ ผู้ต้องการจัดทำเว็บไซต์จำเป็นต้องรู้ ปัจจุบันมีโปรแกรมอย่าง Dreamweaver ถูกพัฒนาขึ้นมาเพื่ออำนวยความสะดวกให้เรา ไม่ต้องเรียนรู้ภาษา HTML ก็สามารถสร้างเว็บเพจได้ แต่กว่า 80 % ที่มีปัญหาเกี่ยวกับการออกแบบเว็บ ส่วนใหญ่เกิดจากการ ไม่มีความเข้าใจในเรื่องของภาษาพื้นฐาน HTML นี้ พอมีปัญหา ก็ไม่อาจจะแก้ไขได้ จึงคิดว่าโปแกรม Dreamweaver ใช้งานยาก ในบทเรียนนี้จะทำให้เรามีความเข้าใจในพื้นฐานของภาษา HTMLมากขึ้น
4
<body>…………….</body>
ทำความเข้าใจ HTML HTML เป็น Script ที่เรียงลำดับ Tag (คำสั่ง) ไว้เป็น file ไฟล์หนึ่ง เพื่อเป็นตัวบอก Browser ว่าจะต้องแสดงอะไร ลักษณะอย่างไร Tag จะประกอบด้วยเครื่องหมาย < ตามด้วยชื่อ Tag และเครื่องหมาย > ซึ่งโดยทั่วไป Tag จะมีเป็นคู่ เพื่อเปิดและปิดคำสั่งโดย Tag เปิดจะมีลักษณะดังข้างต้น แต่ Tag ปิดจะเพิ่ม Slash (/) หน้า Tag เท่านั้น ตัวอย่างเช่น คำสั่ง body <body>…………….</body> Tag จะพิมพ์ด้วยตัวอักษรใหญ่ หรือเล็กก็ได้
5
โครงสร้างพื้นฐานของ HTML
6
โครงสร้างพื้นฐานของภาษา HTML
โครงสร้างของ HTML นั้นถือว่าเป็นโครงสร้างที่เป็นมาตรฐาน ซึ่งหากว่าวันหนึ่ง เราได้ฝึกเขียนภาษาอื่นๆ เราก็อาจจะทำความเข้าใจกับภาษาเหล่านั้นได้ดี เพราะว่ามีความรู้ และความเข้าใจในโครงสร้างของ HTML เป็นพื้นฐานมาก่อน สิ่งที่จะต้องจดจำก็คือ ทุกครั้งที่จะเขียน Script ก็จะต้อง เปิดแท็กเสมอ < >เช่น <html> และเมื่อจบ script หรือคำสั่งต่างๆ ก็จะ ต้องปิดแท็กด้วยเครื่องหมายนี้เสมอ </ > เช่น </html> ซึ่งแท็กเปิดและปิดนั้น ก็จะเขียนในรูปแบบนี้โดยตลอดนั่นเอง แต่ว่าคำสั่งใน แท็กเปิดและปิดนั้นจะเป็นอย่างไรนั้น ก็ขึ้นอยู่กับ คำสั่งต่างๆ
7
โครงสร้างพื้นฐานของภาษา HTML (ต่อ)
ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่ายๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag <HTML>…</HTML>
8
โครงสร้างพื้นฐานภาษา HTML
<head><title>……</title> </head> ส่วนหัว <body> … ….. ….. .. </body> ส่วน body ที่แสดงผล </html> <คำสั่ง> เป็นลักษณะTag เปิด เช่น <html> <head> <title> <body> </คำสั่ง> เป็นลักษณะTag ปิด เช่น </html> </head> </title> </body>
9
โครงสร้างคำสั่งมาตรฐานในการสร้างเว็บเพจต่างๆ
<html> </html> วางไว้ที่ต้นและท้ายของไฟล์ เพื่อให้ Browser รู้ว่า โค๊ดที่กำลังจะอ่าน และนำออกมาแสดงผล เป็นโค๊ดของ html <head> </head> ใช้สำหรับกำหนดชื่อเรื่องของเว็บเพจ แต่จะไม่ปรากฏให้เห็นผ่านทาง Browser ซึ่ง บางครั้งการแทรก script ของ java script ก็มักจะแทรกไว้ระหว่าง <head>นั่นเอง <title> </title> ใช้แสดงข้อความด้านบนของโปรแกรม browser จะต้องเขียนไว้ระหว่าง <head>......</head> เสมอ <body>……..</body> ใช้แสดงส่วนของเนื้อหาภายในเว็บเพจ
10
ตัวอย่างการเขียนโค๊ดของ Html
11
ตัวอย่างการบันทึกไฟล์ Html
2. คลิกเลือก All Files 3. กด Save เพื่อบันทึก
12
ลองดูผลลัพธ์ที่ได้ ข้อความที่อยู่ในแท็ก Title
ข้อความที่อยู่ในแท็ก Body
13
ข้อความลักษณะหัวเรื่อง (Heading) ข้อความลักษณะหัวเรื่อง จะกำกับด้วยแท็ก <Hn> โดย <Hn>....Heading Text ... </Hn> n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้นจะมีค่าอยู่ที่ n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด สามารถเพิ่ม/ลดขนาดโดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น
14
การกำหนดขนาดของตัวอักษร
<FONT SIZE="ค่ากำหนดขนาดของตัวอักษร"> </FONT> กำหนดเป็นตัวเลขซึ่งจะมีค่า โดย * ค่ามาตรฐานจะมีค่าจะอยู่ที่ * ค่าตัวเลขที่เป็น 1 และ 2 นั้นจะเป็นการย่อขนาดของตัวอักษร * ค่าตัวเลข 4 ถึง 7 นั้นจะเป็นการขยายขนาดของตัวอักษร
15
การใส่สีพื้นหลังให้กับเว็บเพจ
16
การใส่สีพื้นหลังให้กับเว็บเพจ
ในบทเรียนนี้ เราจะมาดูโค๊ดที่ ใส่สีพื้นหลังให้ Background กันดูนะครับ แต่ขอแนะนำว่า เราควรเลือกสีให้เหมาะสมกับ ตัวหนังสือ หรือไม่ก็ภาพประกอบต่างๆภายในเว็บเพจด้วย มิฉะนั้น อาจจะออกมาไม่สวยงาม
17
การใส่สีให้กับพื้นหลังมีคำสั่งดังต่อไปนี้
18
ผลลัพธ์ที่ได้
19
การใส่สีพื้นหลังให้กับเว็บเพจ
นอกเหนือจากการกำหนดโค๊ดของสีพื้นหลังให้เป็น โค๊ดแบบ รหัสค่าสี(เช่น #FFCCFF) แล้ว คุณยังสามารถที่จะกำหนดค่าสีเป็นแบบตัวอักษรแทนชื่อสีได้โดยตรง
20
การใส่สีพื้นหลังให้กับเว็บเพจโดยใช้ชื่อสีโดยตรง
21
ผลลัพธ์ที่ได้
22
การจัดรูปแบบตัวอักษร
23
การจัดรูปแบบตัวอักษร
ในบทนี้เรามาดูเรื่อง รูปแบบต่างๆ ของตัวอักษรกัน ลองดูซิว่ามีคำสั่งอะไรเกี่ยวกับตัวอักษรบ้าง เวลาที่เราทำเว็บไซด์เราจะได้ เลือกใช้ให้เหมาะสมได้
24
การกำหนดลักษณะตัวอักษร
<B>…….</B> ตัวหนา <I>……..</I> ตัวเอียง <U>…….</U> ตัวขีดเส้นใต้ <S>….…</S> ตัวขีดฆ่า <TT>……. </TT> ตัวพิมพ์ดีด <SUP>…</ SUP > ตัวยก <SUB>…</ SUB > ตัวห้อย
25
การจัดรูปแบบตัวอักษร
26
ผลลัพธ์ที่ได้
27
สร้างเส้นใต้พารากราฟ
รูปแบบ <HR> <HR> ตีเส้น <HR NOSHADE> ตีเส้นสีดำ <HR SIZE = 10> กำหนดความหนาของยาวเส้น ใช้หน่วย pixel <HR SIZE = 300> กำหนดความยาวเส้น ใช้หน่วย pixel <HR ALIGN=CENTER>ใช้ในกรณีเส้นมีความยาวไม่เต็มจอ และจัดไว้กึ่งกลาง
28
ตัวอักษรวิ่ง คำสั่ง <Marquee>
รูปแบบ <Marquee> ข้อความ </Marquee> <Marquee direction=“ทิศทางวิ่ง” scrollamount=“ความเร็วในการวิ่ง” scrolldelay=“เวลาหน่วง” color=“สี” > ข้อความ </Marquee> ทิศทาง = up down left right ตัวอย่าง Marquee
29
การใส่รูปภาพภายในเว็บเพจ
30
การใส่รูปภาพภายในเว็บเพจ
การใส่ภาพภายในเว็บเพจ ตรงนี้ก็มีส่วนสำคัญ สำหรับดึงดูดตา ดึงดูดใจ ให้ผู้ที่ผ่านเข้ามาในเว็บไซด์ของเรา ตัวอย่างโค๊ดการใส่รูปภาพภายในเว็บเพจ
31
ผลลัพธ์ที่ได้
32
การใส่ตาราง
33
การสร้างตาราง โครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ใน แนวนอนเดียวกัน ก็คือแถว และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง <TABLE> <CAPTION> </CAPTION> <TR> <TH> </TH> <TH> </TH> </TR> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> <TABLE>
34
<TABLE> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </TABLE>
<CAPTION> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และ มีคำสั่งปิดคือ </CAPTION> <TR> (Table Row) เป็นการกำหนดแถวของตาราง และ มีคำสั่งปิดคือ </TR> <TH> (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และ มีคำสั่งปิดคือ </TH> <TD> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิด คือ </TD>
35
ตัวอย่างการสร้างตาราง
1 2 3 4 <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> A B C <TABLE> <TR ALIGN=CENTER> <TD COLSPAN=2>A</TD></TR> <TR><TD>B</TD><TD>C</TD></TR> </TABLE> A B C <TABLE> <TR><TD ROWSPAN=2>A</TD> <TD>B</TD></TR> <TR><TD>C</TD></TR> </TABLE>
36
การเชื่อมโยง
37
การเชื่อมโยง (Link) การเชื่อมโยงหรือ Link เป็นการกำหนดจุดที่เราจะเคลื่อนย้ายไปยังปลายทางหรือจุดหมายที่เราต้องการ ในการเขียนคำสั่งเชื่อมโยงข้อมูลนั้น จะต้องทราบ “จุดหมาย” และ “ปลายทาง” ถึงจะสามารถทำการเชื่อมโยงได้สำเร็จ การเชื่อมโยงทำได้ 2 แบบ เชื่อมโยงด้วยข้อความ เชื่อมโยงด้วยรูปภาพ
38
ตัวอย่างโค๊ดการเชื่อมโยง (Link)
39
ผลลัพธ์ที่ได้ จุดหมายปลายทาง จุดที่ทำการเชื่อมโยง
40
การสร้าง Frame Frame คือ กรอบรายการที่มีประโยชน์ในการแบ่งเนื้อที่ใน page มีผลทำให้ 1 page แสดงได้หลายเอกสาร โดยที่ แต่ละเอกสารไม่จำเป็นต้องเปลี่ยนพร้อมกัน
41
ส่วนประกอบการทำ FRAME
<FRAMESET > - แทนส่วน Body <FRAME > ………... </FRAMSET>
42
คำสั่ง FRAMESET <FRAMESET BORDER = ความกว้างของขอบ
FRAMEBORDER= YES|NO ROWS = ค่าของแถว (Pixel) หรือ % แถว,…,* COLS = ค่าของคอลัมน์ (Pixel) หรือ คอลัมน์,…,*> …….. </FRAMSET>
43
คำสั่ง FRAME <FRAME SRC = “page ที่ต้องการแสดง” NAME = “ชื่อ”
MARGINHEIGHT = ความสูง MARGINWIDTH =ความกว้าง NORESIZE SCROLLING= YES|NO|AUTO> ………...
44
คำแนะนำ หากต้องการแบ่ง Frame ในแนวนอนให้กำหนด
<FRAMESET ROWS = ค่าของส่วนแรก,*> <FRAMESET COLS = ค่าของส่วนแรก,*> <FRAMESET ROWS = ค่าของแถว,* COLS = ค่าของคอลัมน์, *>
45
แบบทดสอบภาคปฏิบัติหลังเรียน
ให้นักเรียนสร้างเว็บเพจ ของนักเรียนโดยใช้คำสั่งที่ได้เรียนมาทั้งหมดมาใช้ในการสร้างเว็บเพจดังนี้ การใส่ข้อความ ใส่รูปแบบข้อความ ใส่สีพื้นหลัง ใส่รูปภาพ สร้างการเชื่อมโยงไปยังเว็บเพจอื่นๆ เป็นต้น
งานนำเสนอที่คล้ายกัน
