PHP Hypertext Preprocessor

Download Report

Transcript PHP Hypertext Preprocessor 

หลักการออกแบบเว็บ



กาหนดกลุ่มเป้าหมาย
จาแนกกลุ่มเนือ้ หา
ทิศทางการไหลของหน้ าเว็บ
ทิศทางการไหล



แบบลาดับขั้น (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 ของเว็บเพจนั้นด้วย
และสามารถกาหนดตัวหนังสื อทั้งหมดภายเอกสาร
คาสั่ งเพือ่ จัดรู ปแบบตัวอักษร

หัวเรื่ อง


การย่อหน้าข้อความ


<P>…</P> ย่อหน้าใหม่เว้น 1 บรรทัด
การขึ้นบรรทัดใหม่


เริ่ มจาก <H1>..ใหญ่สุด..</H1> ถึง <H6>..เล็กสุ ด..</H6>
<BR>
ขึ้นบรรทัดใหม่ ไม่เว้นบรรทัด
การเว้นช่องว่างระหว่างคา

&nbsp;
เช่น html&nbsp;&nbsp;ย่อมาจาก
ตัวอย่ างการใช้ งาน HTML
คาสั่ งเพือ่ จัดรู ปแบบตัวอักษร

ตัวอักษรตัวหนา


ตัวอักษรปกติตวั เอียง


<I>…</I>
ตัวอักษรปกติขีดเสันใต้


<B>…</B>
<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
MediumForest Green
Salmon
Dark Turquoise
Aquamarine
Medium Turquoise
Medium Slate Blue
Medium Spring Green
#6B238E
#6B8E23
#6F4242
#7093DB
#70DB93
#70DBDB
#7F00FF
#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=”[email protected]"> ส่ ง 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