หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา ทิศทางการไหลของหน้าเว็บ
ทิศทางการไหล แบบลำดับขั้น (Hierarchy) แบบเชิงเส้น (Linear) แบบผสม (Combination)
สิ่งจำเป็นสำหรับการเขียนเว็บเพจ Text Editor ใช้สำหรับเขียนคำสั่งต่าง ๆ ลงไป แล้วบันทึกไฟล์ นามสกุลเป็น .htm หรือ .html ตัวอย่างโปรแกรมอื่น ๆ ได้แก่ FrontPage, Hot Dog , Home site , Dreamweaver , Ms. Office โปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer Netscape , Opera
กฎในการใช้ HTML 1. แต่ละ 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 ย่อมาจาก
ตัวอย่างการใช้งาน HTML
คำสั่งเพื่อจัดรูปแบบตัวอักษร ตัวอักษรตัวหนา <B>…</B> ตัวอักษรปกติตัวเอียง <I>…</I> ตัวอักษรปกติขีดเสันใต้ <U>…</U> ตัวอักษรกระพริบ <BLINK>…</BLINK>
ตัวอย่างการใช้งาน HTML
คำสั่งเพื่อจัดรูปแบบตัวอักษร การปรับปรุงฟอนต์ <FONT FACE=“ชื่อฟอนต์ที่ต้องการ”>..ข้อความที่ปรับปรุง..</FONT> เช่น <FONT FACE=“AngsanaUPC”>..ข้อความที่ปรับปรุง..</FONT> การเปลี่ยนขนาดฟอนต์ มีค่าอยู่ระหว่าง 7-1 <FONT SIZE=”ขนาดที่ต้องการ”>..ข้อความที่ปรับปรุง..</FONT> เช่น <FONT SIZE=”+2”>..ข้อความที่ปรับปรุง..</FONT> การเปลี่ยนสีตัวอักษร <FONT COLOR=“RED”>ตัวอักษรสีแดง</FONT>ตัวอักษรสีปกติ
ตัวอย่างการใช้งาน HTML
คำสั่งเพื่อจัดรูปแบบตัวอักษร การเพิ่มรูปภาพ <IMG SRC=“ตำแหน่งที่อยู่ของภาพ”> เช่น <IMG SRC=“mon.jpg”> การควบคุมขนาดของภาพ <IMG SRC=“mon.jpg”WIDTH=“640”HEIGHT=“480”> การควบคุมตำแหน่งของรูปภาพ <IMG SRC=“mon.jpg”ALIGN=“ TOP / CENTER / BOTTOM ”>
ตัวอย่างการใช้งาน HTML
ค่าของสีที่นำไป่ใส่ใน 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
คำสั่งเพิ่มเติม ภาพ BACKGROUNG <BODY BACKGROUNG=URL> กำหนดสีพื้น <BODY BGCOLOR=#NNNNNN> กำหนดสีตัวอักษร <BODY TEXT=#NNNNNN>
ตัวอย่างการใช้งาน HTML
การสร้างรายการ รายการแบบไม่มีลำดับ จะมีตัวอักษรนำหน้ารายการ รายการแบบไม่มีลำดับ จะมีตัวอักษรนำหน้ารายการ <UL> <LI>ฮาร์ดแวร์ <LI>ซอฟต์แวร์ <LI>พีเพิลแวร์ </UL> รายการแบบมีลำดับ จะมีตัวเลขนำหน้ารายการ <OL> <LI>ฮาร์ดแวร์ <LI>ซอฟต์แวร์ <LI>พีเพิลแวร์ </OL>
ตัวอย่างการใช้งาน HTML
การสร้างรายการ รายการแบบคำอธิบาย <DL> <DT>Data </DT> <DD>"command center" of HTML document formatting.</DD> </DL> DATA "command center" of HTML document formatting
ตัวอย่างการใช้งาน HTML
การเชื่อมโยงระหว่างเว็บเพ็จ <A>...</A> การเชื่อมโยงเพื่อส่ง email <A HREF=”webmaster@swu.ac.th"> ส่ง email </A> การเชื่อมโยงแบบสัมพัทธ์ <A HREF=“index.html">My home Page</A>
ตัวอย่างการใช้งาน HTML
การใช้ตาราง <TABLE>….</TABLE> กำหนดจุดเริ่มต้นและจุดสิ้นสุดตาราง < TR>...</TR> แบ่งตารางออกเป็นแถว <TD>...</TD> แบ่งแถวออกเป็นคอลัมน์ <TABLE> <TR><TD>ชาย</TD><TD>100</TD></TR> <TR><TD>หญิง</TD><TD>200</TD></TR> </TABLE>
ตัวอย่างการใช้งาน HTML
การอ้างอิงตำแหน่งต่างๆ ในเวปเพ็จ การกำหนดชื่อ <A NAME=“ชื่อต้องการ">ข้อความอ้างถึง</A> เช่น <A NAME=“MON1">ข้อความอ้างถึง</A> การอ้างอิงถึงชื่อ <A HREF=“#MON1">อ้างถึงชื่อMON1</A>
ตัวอย่างการใช้งาน HTML
HTML
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>
ตัวอย่างการใช้งาน HTML