ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา
ทิศทางการไหลของหน้าเว็บ
2
ทิศทางการไหล แบบลำดับขั้น (Hierarchy) แบบเชิงเส้น (Linear)
แบบผสม (Combination)
3
สิ่งจำเป็นสำหรับการเขียนเว็บเพจ
Text Editor ใช้สำหรับเขียนคำสั่งต่าง ๆ ลงไป แล้วบันทึกไฟล์ นามสกุลเป็น .htm หรือ .html ตัวอย่างโปรแกรมอื่น ๆ ได้แก่ FrontPage, Hot Dog , Home site , Dreamweaver , Ms. Office โปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer Netscape , Opera
4
กฎในการใช้ HTML 1. แต่ละ TAG จะต้องอยู่ในเครื่องหมาย < ... >
3. เกือบจะแทบทุก TAG ที่มี TAG เปิด และ TAG ปิด โดย TAG ปิด จะมีเครื่องหมาย / ด้วย เช่น <B> ข้อความ </B>
5
โครงสร้างของภาษา HTML
HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการตกแต่งเอกสารอิเล็กทรอนิกส์ ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web Browser <HTML> <HEAD> : …ข้อมูลที่ต้องการแสดงในส่วนหัว... </HEAD> <BODY bgcolor="#FFFFFF"> : คำสั่งหรือข้อความที่ต้องการให้แสดง... </BODY> </HTML>
6
โครงสร้างของภาษา HTML
Horizontal Symmetry Vertical Symmetry เป็นพื้นที่ส่วนหัว เป็นพื้นที่ส่วนเนื้อหา
7
โครงสร้างของภาษา HTML
<HTML>...</HTML> เป็นคำสั่งทุกเอกสาร html จะต้องมีและคำสั่งทั้งหมดจะต้องอยู่ภายใน คำสั่ง html นี้ <HEAD>...</HEAD> ใช้กำหนดหัวข้อของเอกสาร เพื่อให้ผู้ที่ดูเว็บเพจรู้ว่าอยู่ที่หน้าไหน <TITLE>...</TITLE> จะแสดงข้อความที่อยู่ใน tags นี้ไปปรากฏบนไตเติลบาร์ ที่อยู่ด้านบนของหน้าต่าง <BODY>...</BODY> คำสั่ง BODY นี้ใช้เขียนเพื่อกำหนดเนื้อหาบนเว็บเพจ โดยที่จะเขียน คำสั่งต่างๆ ทั้งหมดลงไปไว้ในส่วนนี้ และยังเป็นตัวที่กำหนด Background ของเว็บเพจนั้นด้วย และสามารถกำหนดตัวหนังสือทั้งหมดภายเอกสาร
8
คำสั่งเพื่อจัดรูปแบบตัวอักษร
หัวเรื่อง เริ่มจาก <H1>..ใหญ่สุด..</H1> ถึง <H6>..เล็กสุด..</H6> การย่อหน้าข้อความ <P>…</P> ย่อหน้าใหม่เว้น 1 บรรทัด การขึ้นบรรทัดใหม่ <BR> ขึ้นบรรทัดใหม่ ไม่เว้นบรรทัด การเว้นช่องว่างระหว่างคำ เช่น html ย่อมาจาก
9
ตัวอย่างการใช้งาน HTML
10
คำสั่งเพื่อจัดรูปแบบตัวอักษร
ตัวอักษรตัวหนา <B>…</B> ตัวอักษรปกติตัวเอียง <I>…</I> ตัวอักษรปกติขีดเสันใต้ <U>…</U> ตัวอักษรกระพริบ <BLINK>…</BLINK>
11
ตัวอย่างการใช้งาน HTML
12
คำสั่งเพื่อจัดรูปแบบตัวอักษร
การปรับปรุงฟอนต์ <FONT FACE=“ชื่อฟอนต์ที่ต้องการ”>..ข้อความที่ปรับปรุง..</FONT> เช่น <FONT FACE=“AngsanaUPC”>..ข้อความที่ปรับปรุง..</FONT> การเปลี่ยนขนาดฟอนต์ มีค่าอยู่ระหว่าง 7-1 <FONT SIZE=”ขนาดที่ต้องการ”>..ข้อความที่ปรับปรุง..</FONT> เช่น <FONT SIZE=”+2”>..ข้อความที่ปรับปรุง..</FONT> การเปลี่ยนสีตัวอักษร <FONT COLOR=“RED”>ตัวอักษรสีแดง</FONT>ตัวอักษรสีปกติ
13
ตัวอย่างการใช้งาน HTML
14
คำสั่งเพื่อจัดรูปแบบตัวอักษร
การเพิ่มรูปภาพ <IMG SRC=“ตำแหน่งที่อยู่ของภาพ”> เช่น <IMG SRC=“mon.jpg”> การควบคุมขนาดของภาพ <IMG SRC=“mon.jpg”WIDTH=“640”HEIGHT=“480”> การควบคุมตำแหน่งของรูปภาพ <IMG SRC=“mon.jpg”ALIGN=“ TOP / CENTER / BOTTOM ”>
15
ตัวอย่างการใช้งาน HTML
16
ค่าของสีที่นำไป่ใส่ใน Font , Background , Table ได้
Dark Slate Blue #6B238E MediumForest Green #6B8E23 Salmon #6F4242 Dark Turquoise #7093DB Aquamarine #70DB93 Medium Turquoise #70DBDB Medium Slate Blue #7F00FF Medium Spring Green #7FFF00
17
คำสั่งเพิ่มเติม ภาพ BACKGROUNG <BODY BACKGROUNG=URL> กำหนดสีพื้น
<BODY BGCOLOR=#NNNNNN> กำหนดสีตัวอักษร <BODY TEXT=#NNNNNN>
18
ตัวอย่างการใช้งาน HTML
19
การสร้างรายการ รายการแบบไม่มีลำดับ จะมีตัวอักษรนำหน้ารายการ
รายการแบบไม่มีลำดับ จะมีตัวอักษรนำหน้ารายการ <UL> <LI>ฮาร์ดแวร์ <LI>ซอฟต์แวร์ <LI>พีเพิลแวร์ </UL> รายการแบบมีลำดับ จะมีตัวเลขนำหน้ารายการ <OL> <LI>ฮาร์ดแวร์ <LI>ซอฟต์แวร์ <LI>พีเพิลแวร์ </OL>
20
ตัวอย่างการใช้งาน HTML
21
การสร้างรายการ รายการแบบคำอธิบาย
<DL> <DT>Data </DT> <DD>"command center" of HTML document formatting.</DD> </DL> DATA "command center" of HTML document formatting
22
ตัวอย่างการใช้งาน HTML
23
การเชื่อมโยงระหว่างเว็บเพ็จ
<A>...</A> การเชื่อมโยงเพื่อส่ง <A ส่ง </A> การเชื่อมโยงแบบสัมพัทธ์ <A HREF=“index.html">My home Page</A>
24
ตัวอย่างการใช้งาน HTML
25
การใช้ตาราง <TABLE>….</TABLE> กำหนดจุดเริ่มต้นและจุดสิ้นสุดตาราง < TR>...</TR> แบ่งตารางออกเป็นแถว <TD>...</TD> แบ่งแถวออกเป็นคอลัมน์ <TABLE> <TR><TD>ชาย</TD><TD>100</TD></TR> <TR><TD>หญิง</TD><TD>200</TD></TR> </TABLE>
26
ตัวอย่างการใช้งาน HTML
27
การอ้างอิงตำแหน่งต่างๆ ในเวปเพ็จ
การกำหนดชื่อ <A NAME=“ชื่อต้องการ">ข้อความอ้างถึง</A> เช่น <A NAME=“MON1">ข้อความอ้างถึง</A> การอ้างอิงถึงชื่อ <A HREF=“#MON1">อ้างถึงชื่อMON1</A>
28
ตัวอย่างการใช้งาน HTML
29
HTML
31
HTML HTML <HTML> <BODY> <H1>Example</H1>
<IMG SRC="images/SUTLogo.JPG"><BR> <B>Hello Bold</B> <I>Hello Italic</I> Hello ASP 1 + 1 = 2 </BODY> </HTML>
32
HTML <HTML> <BODY> <H1>Example</H1>
<IMG SRC="images/SUTLogo.JPG"> <BR> <B>Hello Bold</B><BR> <I>Hello Italic</I><BR> Hello ASP 1 + 1 = 2 </BODY> </HTML>
33
ตัวอย่างการใช้งาน HTML
งานนำเสนอที่คล้ายกัน
