330 likes | 396 Views
หลักการออกแบบเว็บ. กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา ทิศทางการไหลของหน้าเว็บ. ทิศทางการไหล. แบบลำดับขั้น (Hierarchy) แบบเชิงเส้น (Linear) แบบผสม (Combination). สิ่งจำเป็นสำหรับการเขียนเว็บเพจ. Text Editor ใช้สำหรับเขียนคำสั่งต่าง ๆ ลงไป แล้วบันทึกไฟล์ นามสกุลเป็น .htm หรือ .html
E N D
หลักการออกแบบเว็บ • กำหนดกลุ่มเป้าหมาย • จำแนกกลุ่มเนื้อหา • ทิศทางการไหลของหน้าเว็บ
ทิศทางการไหล • แบบลำดับขั้น (Hierarchy) • แบบเชิงเส้น (Linear) • แบบผสม (Combination)
สิ่งจำเป็นสำหรับการเขียนเว็บเพจสิ่งจำเป็นสำหรับการเขียนเว็บเพจ • Text Editor ใช้สำหรับเขียนคำสั่งต่าง ๆ ลงไป แล้วบันทึกไฟล์ นามสกุลเป็น .htm หรือ .html ตัวอย่างโปรแกรมอื่น ๆ ได้แก่ FrontPage, Hot Dog , Home site , Dreamweaver , Ms. Office • โปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer Netscape , Opera
กฎในการใช้ HTML 1. แต่ละ TAG จะต้องอยู่ในเครื่องหมาย < ... > 2. คำสั่งใน TAG จะพิมพ์ด้วยตัวพิมพ์เล็ก หรือตัวพิมพ์ใหญ่ก็ได้ 3. เกือบจะแทบทุก TAG ที่มี TAG เปิด และ TAG ปิด โดย TAG ปิด จะมีเครื่องหมาย / ด้วย เช่น <B> ข้อความ </B>
โครงสร้างของภาษา HTML • HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการตกแต่งเอกสารอิเล็กทรอนิกส์ ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web Browser <HTML><HEAD>: …ข้อมูลที่ต้องการแสดงในส่วนหัว... </HEAD><BODY bgcolor="#FFFFFF"> : ...คำสั่งหรือข้อความที่ต้องการให้แสดง... </BODY></HTML>
โครงสร้างของภาษา HTML • Horizontal Symmetry • Vertical Symmetry เป็นพื้นที่ส่วนหัว เป็นพื้นที่ส่วนเนื้อหา
โครงสร้างของภาษา HTML • <HTML>...</HTML>เป็นคำสั่งทุกเอกสาร html จะต้องมีและคำสั่งทั้งหมดจะต้องอยู่ภายใน คำสั่ง html นี้ • <HEAD>...</HEAD>ใช้กำหนดหัวข้อของเอกสาร เพื่อให้ผู้ที่ดูเว็บเพจรู้ว่าอยู่ที่หน้าไหน • <TITLE>...</TITLE>จะแสดงข้อความที่อยู่ใน tags นี้ไปปรากฏบนไตเติลบาร์ ที่อยู่ด้านบนของหน้าต่าง • <BODY>...</BODY>คำสั่ง BODY นี้ใช้เขียนเพื่อกำหนดเนื้อหาบนเว็บเพจ โดยที่จะเขียน คำสั่งต่างๆ ทั้งหมดลงไปไว้ในส่วนนี้ และยังเป็นตัวที่กำหนด Background ของเว็บเพจนั้นด้วย และสามารถกำหนดตัวหนังสือทั้งหมดภายเอกสาร
คำสั่งเพื่อจัดรูปแบบตัวอักษรคำสั่งเพื่อจัดรูปแบบตัวอักษร • หัวเรื่อง • เริ่มจาก <H1>..ใหญ่สุด..</H1> ถึง <H6>..เล็กสุด..</H6> • การย่อหน้าข้อความ • <P>…</P>ย่อหน้าใหม่เว้น 1 บรรทัด • การขึ้นบรรทัดใหม่ • <BR>ขึ้นบรรทัดใหม่ ไม่เว้นบรรทัด • การเว้นช่องว่างระหว่างคำ • เช่น html ย่อมาจาก
คำสั่งเพื่อจัดรูปแบบตัวอักษรคำสั่งเพื่อจัดรูปแบบตัวอักษร • ตัวอักษรตัวหนา • <B>…</B> • ตัวอักษรปกติตัวเอียง • <I>…</I> • ตัวอักษรปกติขีดเสันใต้ • <U>…</U> • ตัวอักษรกระพริบ • <BLINK>…</BLINK>
คำสั่งเพื่อจัดรูปแบบตัวอักษรคำสั่งเพื่อจัดรูปแบบตัวอักษร • การปรับปรุงฟอนต์ • <FONT FACE=“ชื่อฟอนต์ที่ต้องการ”>..ข้อความที่ปรับปรุง..</FONT> • เช่น <FONT FACE=“AngsanaUPC”>..ข้อความที่ปรับปรุง..</FONT> • การเปลี่ยนขนาดฟอนต์มีค่าอยู่ระหว่าง 7-1 • <FONT SIZE=”ขนาดที่ต้องการ”>..ข้อความที่ปรับปรุง..</FONT> • เช่น <FONT SIZE=”+2”>..ข้อความที่ปรับปรุง..</FONT> • การเปลี่ยนสีตัวอักษร • <FONT COLOR=“RED”>ตัวอักษรสีแดง</FONT>ตัวอักษรสีปกติ
คำสั่งเพื่อจัดรูปแบบตัวอักษรคำสั่งเพื่อจัดรูปแบบตัวอักษร • การเพิ่มรูปภาพ • <IMG SRC=“ตำแหน่งที่อยู่ของภาพ”> • เช่น <IMG SRC=“mon.jpg”> • การควบคุมขนาดของภาพ • <IMG SRC=“mon.jpg”WIDTH=“640”HEIGHT=“480”> • การควบคุมตำแหน่งของรูปภาพ • <IMG SRC=“mon.jpg”ALIGN=“ TOP / CENTER / BOTTOM ”>
ค่าของสีที่นำไป่ใส่ใน Font , Background , Table ได้ Dark Slate Blue #6B238EMediumForest Green #6B8E23 Salmon #6F4242 Dark Turquoise #7093DB Aquamarine #70DB93Medium Turquoise #70DBDBMedium Slate Blue #7F00FFMedium Spring Green #7FFF00
คำสั่งเพิ่มเติม • ภาพ BACKGROUNG <BODY BACKGROUNG=URL> • กำหนดสีพื้น <BODY BGCOLOR=#NNNNNN> • กำหนดสีตัวอักษร <BODY TEXT=#NNNNNN>
การสร้างรายการ • รายการแบบไม่มีลำดับ จะมีตัวอักษรนำหน้ารายการ <UL> <LI>ฮาร์ดแวร์ <LI>ซอฟต์แวร์ <LI>พีเพิลแวร์</UL> • รายการแบบมีลำดับ จะมีตัวเลขนำหน้ารายการ <OL><LI>ฮาร์ดแวร์ <LI>ซอฟต์แวร์ <LI>พีเพิลแวร์</OL>
การสร้างรายการ • รายการแบบคำอธิบาย <DL> <DT>Data </DT> <DD>"command center" of HTML document formatting.</DD></DL> DATA "command center" of HTML document formatting
การเชื่อมโยงระหว่างเว็บเพ็จการเชื่อมโยงระหว่างเว็บเพ็จ • <A>...</A> • การเชื่อมโยงเพื่อส่ง email • <A HREF=”webmaster@swu.ac.th"> ส่ง email </A> • การเชื่อมโยงแบบสัมพัทธ์ • <A HREF=“index.html">My home Page</A>
การใช้ตาราง <TABLE>….</TABLE> กำหนดจุดเริ่มต้นและจุดสิ้นสุดตาราง < TR>...</TR> แบ่งตารางออกเป็นแถว <TD>...</TD> แบ่งแถวออกเป็นคอลัมน์ <TABLE> <TR><TD>ชาย</TD><TD>100</TD></TR> <TR><TD>หญิง</TD><TD>200</TD></TR> </TABLE>
การอ้างอิงตำแหน่งต่างๆ ในเวปเพ็จ • การกำหนดชื่อ • <A NAME=“ชื่อต้องการ">ข้อความอ้างถึง</A> • เช่น <A NAME=“MON1">ข้อความอ้างถึง</A> • การอ้างอิงถึงชื่อ • <A HREF=“#MON1">อ้างถึงชื่อMON1</A>
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>
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>