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>
ขึ้นบรรทัดใหม่ ไม่เว้นบรรทัด
การเว้นช่องว่างระหว่างคา
เช่น html ย่อมาจาก
ตัวอย่ างการใช้ งาน 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