ภาษา HTML
หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา ทิศทางการไหลของหน้าเว็บ
ทิศทางการไหล แบบลำดับขั้น (Hierarchy) แบบเชิงเส้น (Linear) แบบผสม (Combination)
HTML คืออะไร HyperText Markup Language เป็นภาษา script ประเภทหนึ่ง ซึ่งใช้ทำ Web page เป็นงานหลัก ในระบบ World Wide Web ถูกเสนอโดยนาย Berners-Lee ซึ่งเป็นนักโปรแกรมเมอร์ทำงานที่ European Center for Particle Physics (CERN) เพื่อสร้างสื่อที่นักวิทยาศาสตร์สามารถจะเผยแพร่ผลงาน และใช้อ้างอิง ได้ตลอด 24 ช.ม. เพื่อสร้างภาษาคอมพิวเตอร์ที่รองรับภาษาท้องถิ่น ที่ไม่ขึ้นกับระบบของเครื่องคอมพิวเตอร์ (Platform) หรือระบบเครือข่ายใดๆ
โครงสร้างของภาษา HTML <HTML> <HEAD> : </HEAD> <BODY> : </BODY> </HTML>
โครงสร้างของ Tag Tags คือ คำสั่งในภาษา HTML โดยจะมีประสิทธิภาพสูงสุด เมื่อกำหนดส่วนขยายให้กับ tags Attributes เป็นส่วนประกอบหนึ่งของส่วนขยาย ทำหน้าที่กำหนดทิศทางของ tags Values เป็นส่วนประกอบสุดท้ายของส่วนขยาย ทำหน้าที่กำหนด ขนาด หรือ ลักษณะ ให้กับ attributes
หลักของ Symmetry Horizontal Symmetry Vertical Symmetry
Tags เพื่อจัดรูปแบบตัวอักษร Headings เริ่มจาก <H1>…</H1> ถึง <H6>…</H6> Paragraph <P>…</P> Break <BR> Preformatted Text <PRE>…</PRE>
Tags เพื่อจัดรูปแบบตัวอักษร Bold <B>…</B> Italic <I>…</I> Underlined <U>…</U>
คำสั่งที่ล้าสมัย (Deprecated) <STRONG>…</STRONG> และ <EM>…</EM> <SMALL>…</SMALL> <BIG>…</BIG> <SUP>…</SUP> <SUB>…</SUB> <STRIKE>…</STRIKE>
การสร้างลิสต์ (Lists) ลิสต์แบบ Bullet (Unordered/ Bullet list) <UL> <LI>ปากกาลูกลื่น <LI>ดินสอดำ 2B <LI>ยางลบหรือน้ำยาลบคำผิด </UL> ลิสต์แบบตัวเลข (Ordered/ Numbered list) <OL> <LI>ทำความเข้าใจในโครงสร้างคำสั่ง <LI>ทดลองเขียน tags ลงในโปรแกรม Text editor <LI>Save ไฟล์แล้วตั้งชื่อไฟล์ <LI>ดูผลลัพธ์ของ tags ดังกล่าวด้วยโปรแกรม web browser <LI>ถ้าหากไม่ผลลัพธ์ดังตัวอย่าง ให้กลับไปแก้ไข (เรียก debug) คำสั่งที่เขียนผิด <LI>กลับไปทำในข้อ 4 </OL>
การสร้างลิสต์ (Lists) ลิสต์แบบ Definition (Definition List) <DL> <DT>Tag <DD>A tag also referred to as an element; can be considered the "command center" of HTML document formatting. </DL>
การสร้าง Hyperlink <A>...</A> การเชื่อมโยงแบบเต็ม (Absolute Linking) <A HREF="http://www.download.com/linux"> Linux app. at Download.com</A> การเชื่อมโยงแบบสัมพัทธ์ (Relative Linking) <A HREF=“index.html">My home Page</A>
การสร้าง Hyperlink ในหน้าเดียวกัน การเชื่อมโยงภายในหน้าเดียวกัน (Intra-Page Linking) </HEAD> <BODY> <A HREF="#linux">Linux Talks</A> <P> <P> <P> <A NAME="linux">Linux Talks</A><br> ทุกๆ เรื่องที่เกี่ยวกับลีนุกซ์ ถามมาได้เลย... เราพร้อมจะตอบให้ ........ </BODY> </HTML>
การสร้าง Hyperlink สำหรับ email การเชื่อมโยงเพื่อส่ง email (Mail Linking) <A HREF="mailto: webmaster@swu.ac.th"> ส่ง email ถึงเรา</A>
การใส่รูปกราฟิก (Image Tag) <IMG> <IMG SRC=“image.gif">
การสร้างตาราง <TABLE>...</TABLE> ใช้ระบุถึงการเริ่มต้น และสิ้นสุดของตาราง <TR>...</TR> ใช้กำหนดแถวของ ตาราง (Table rows) <TD>...</TD> ใช้กำหนดช่องหรือเซลล์ ของตาราง (Table data)
เฟรม (Frames) <frameset>...</frameset> <frame>
เฟรม (Frames) ข้อสังเกต <frameset> ทำหน้าที่แทน <body> ...</body> ในหน้าที่ใช้เฟรม หมายความว่า เมื่อสร้างหน้าที่ใช้เฟรม <body>...</body> จะถูกแทนที่ด้วย <frameset>...</frameset> แทน <HTML><HEAD> <TITLE>Frame Controls</TITLE> </HEAD> <FRAMESET cols="140,*"> <FRAME src="menu.html"> <FRAME src="main.html"> </FRAMESET> </HTML>
Magic Target Names target="_self" target="_top" target="_blank" ใช้เพื่อให้เปิดหน้าเว็บเพ็จในหน้าต่างปัจจุบัน target="_top" ใช้เพื่อเปิดหน้าเว็บเพ็จในหน้าต่างปัจจุบัน แบบเต็มหน้าจอ target="_blank" ใช้เพื่อให้เปิดหน้าเว็บเพ็จในหน้าต่างใหม่ target="_parent" ใช้เพื่อเปิดหน้าเว็บเพ็จในหน้าต่างที่ทำลิงค์มายังหน้าต่างปัจจุบัน
ไม่ควรลืม TITLE <title>หลักสูตรบัณฑิตศึกษา – บันทิตวิทยาลัย – มหาวิทยาลัยศรีนครินทรวิโรฒ </title> META <meta name=”keywords” content=”Srinakharinwirot University, Humanity Faculty, Science Faculty, Graduate School, Computer Center”> <meta name=”description” content=”……..”>
ไม่ควรลืม หรือ IMG encoding Width และ Height Alternative <meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> หรือ <meta http-equiv="Content-Type" content="text/html; charset=windows-874">
สไตล์ (Cascading Style Sheet) วิธีการกำหนดรูปแบบ (Format) ของเอกสาร HTML ด้วยการใช้ attribute “Style” กับ tags บางประเภทในภาษา HTML
ประเภทของ Style Sheets Inline Embedded Linked บางครั้งเรียก External Style Sheet
Inline Style เป็นวิธีกำหนดรูปแบบด้วยการใส่ Style attribute เข้ากับ tag <P> รูปแบบและขนาดของตัวอักษรในย่อหน้านี้ จะมีขนาดและรูปแบบตัวอักษรเป็นไปตามค่า default ของ web browser </P> <P STYLE="font: 16pt BrowaliaUPC;"> รูปแบบและขนาดของตัวอักษรในย่อหน้านี้ จะมีขนาด 16 point และรูปแบบตัวอักษรเป็น BrowaliaUPC </P>
Embedded style วิธีกำหนดรูปแบบให้กับทั้งหน้าเว็บเพ็จ โดย การใช้ <STYLE> วางไว้ในส่วน <HEAD> <html><head> <style> h1 { font-family: Tahoma; color: #00FF00 } </style> </head> <body> <h1>Embedded Style Sheet</h1> </body> </html>
External Style Sheet เป็น CSS ที่เรียก ใช้ด้วยการเชื่อมโยง (Linked) เข้าสู่เอกสาร HTML มักใช้เพื่อเป็นแม่แบบให้กับเอกสารหลายๆ หน้า <HTML> <HEAD> <TITLE>กำหนดรูปแบบด้วย Linked Style Sheet</TITLE> <LINK rel=stylesheet href="style.css" type="text/css"> </HEAD> <BODY> <H1>ประเภทของ Style Sheets</H1> : </BODY> </HTML>
นำ CSS ทั้ง 3 แบบมาใช้ร่วมกัน ได้ผลอย่างไร??? จดจำลักษณะตาม Linked CSS เป็นลำดับแรก แล้วจึงมองหา ลักษณะ เพิ่มเติมจาก Embedded และ Inline CSS ตามลำดับ แล้วจึงกำหนดค่าให้กับ tag ที่เกี่ยวข้อง ถ้าหากมีการกำหนด ลักษณะซ้ำด้วย Embedded และ/หรือ Inline CSS ให้กับ tag ที่ได้กำหนดไว้แล้วใน Linked CSS โปรแกรม web browser จะ override ค่าที่กำหนด
Class วิธีกำหนดลักษณะเฉพาะแตกต่างไปจากส่วนอื่นๆ วิธีการนี้เรียกว่า Style class กำหนด class ด้วยการตั้งชื่อให้กับ tag ที่ เราต้องการ โดยเพิ่ม . (period) แล้วตามด้วยชื่อ เรียกใช้ด้วย tag นั้น ตามด้วย class="x" เมื่อ x เป็นชื่อที่กำหนด
ตัวอย่างการใช้ Class <HTML> <HEAD> <TITLE>Style sheet sample: class</TITLE> <STYLE> <!-- P.center { font-family: garamond, times, serif; font-size: 10pt; text-align: center; } P.right { font-family: garamond, times, serif; font-size: 8pt; text-align: right; } P.name { font-family: garamond, times, serif; font-size: 8pt; text-align: center; text-weight: bold; text-style: italic; } --> </STYLE> </HEAD> <BODY> <P class="center"> Let my first words in this book be an apology for whatever errors do appear here, and for whatever overlooked toics don't. I have done my darnedest to make this the most useful book possible, the book that I would have wanted when I began digging past the </P> <P class="right"> The author and publisher connection with, or arising out of, the furnishing, performance, or use of these programs. </P> <P class="name"> -- Michael B. Little </P> </BODY> </HTML>
หลักการ Include การเรียกใช้ file จากภายใน Homepage เป็นการลดความซ้ำซ้อน คำสั่ง include ใน ASP <!--#include file="../path/file.htm"--> คำสั่ง include ใน PHP <?include("../path/file.htm"); ?>
สรุป หลักการออกแบบเว็บเพจ HTML (คำแนะนำในการใช้บาง attribute) การใช้สไตล์ การ include