ทบทวน Html

1.รวมทุกอย่างที่ใช้สร้างเว็บรวมไว้ใน Folder เดียวกัน
เช่น ไฟล์รูปภาพ / ไฟล์จาก Notepad

อย่า.....เพราะอาจทาให้มีปัญหาได้
1. อย่าตั้งชื่อ Folder หรือ ชื่อไฟล์ภาพ ไฟล์งาน
ต่างๆ เป็นภาษาไทย เป็นตัวเลข หรือภาษาอังกฤษได้
2. ทางานไปแล้ว ย้ายที่เก็บรูป ที่เก็บงานใหม่

แนะนา
1. ตั้งชื่อไฟล์จาง่ายๆ เช่น 1-2-3 / page1-2-3..,
2. หน้าแรก ต้องตั้งชื่อเป็น index.html เสมอๆ
3. ชื่อไฟล์ภาพ ถ้ายาวอย่าพิมพ์เอง ให้ Copy มา
4. อะไรที่เหมือนกันไม่จาเป็นต้องพิมพ์เองทุกบรรทัด ให้
Copy มาวาง แล้วก็แก้

 ภาพแบล็กกราวสวยๆ
http://wallpaper.yenta4.com/ www.yenta4.com
ภาพดุกดิ๊ก
- เส้น (Line Dookdik)
http://dookdik.kapook.com/dookdik.php?page=1&type=&hit=0&catid=55&line=1

- ไอคอน
http://dookdik.kapook.com/dookdik.php?catid=15&hit=0

- โมจิ (การ์ตูน)
www.kapook.com
- แบล็กกราว

- ข้อความ

ไอคอนแต่งเว็บ
http://webboard.yenta4.com/topic/519890

http://www.zalim-code.com/iconmini.htm (อยู่ล่างๆ เว็บ)

 พิมพ์สิ่งที่ต้องการลงไป เช่น
พิมพ์สิ่งที่ต้องการ
ต้องการปุ่มรูปบ้าน ให้พิมพ์
 icon+home ค้นหาแบบรูปภาพ

 ให้ Google ค้นหาแบบรูปภาพ
 คลิกขวาที่ภาพ Save picture As
 เลือกที่เก็บ คลิกขวา Save
 ตั้งชื่อ แนะนาเป็นตัวเลขจาง่ายๆ Picture As

 Save

<html>
<head>
<title> ข้อความที่ต้องการให้แสดงในส่วน Title Bar </title>
</head>
<body background="13.jpg"> ต้องการให้พื้นหลังเว็บเพจเป็น
รูปภาพ “13.jpg” คือชื่อรูปภาพ
ข้อความที่ต้องการให้ .................................................
แสดงในหน้าเว็บเพจ..............................................

</body>
</html>

<html>
<head>
<title> ข้อความที่ต้องการให้แสดงในส่วน Title Bar </title>
</head>
<body bgcolor="#000000">
ต้องการให้พื้นหลังเว็บเพจเป็นสี ทาได้ 2 แบบ
1. ใส่ค่าสี ="#000000"
2. ใส่ชื่อสี ="black
ข้อความที่ต้องการให้ .................................................
แสดงในหน้าเว็บเพจ..............................................
ค่าสีหาได้จาก google พิมพ์ว่า “ตารางค่าสี”
http://www.abhidhamonline.o
rg/color%20code.htm
</body>
</html>

 <BODY> ชื่อ Font ที่ต้องการ

 <FONT FACE="AngsanaUPC"> ข้อความ....................................<BR> </FONT>
<FONT FACE="JasmineUPC">ข้อความ.................................... <BR> </FONT>
<FONT FACE="IrisUPC"> ข้อความ.................................... </FONT>

 </BODY>

 --------------------------------------------------------------------------------------------------------------------------------------------------------

 อธิบายคาสั่ง <FONT FACE="ชื่อฟ้อนต์ทใช้"> เป็นคาสั่งที่ใช้กาหนดฟ้อนต์ที่จะใช้ในเว็บเพจ </FONT> เป็นคา
ี่
สั่งปิดที่ต้องใช้คู่กันเสมอ

 <BODY>
ใส่คาสั่งไว้หน้า และหลังข้อความ
ที่ต้องการ
 <h1>ข้อความ.................................... </h1>
<h2>ข้อความ.................................... </h2>
<h3>ข้อความ.................................... </h3>
<h4>ข้อความ.................................... </h4>
<h5>ข้อความ.................................... </h5>

 </BODY>

------------------------------------------------------------------------------------------
หรือ
•<FONT SIZE=ขนาดตัวอักษร> เป็นคาสั่งที่ใช้กาหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ
ขนาดตัวอักษร สามารถกาหนดได้ตั้งแต่ 1 - 7
•</FONT> เป็นคาสั่งปิดที่ต้องใช้คู่กนเสมอ ั

เลื่อนไปทางซ้าย
 <marquee>TEXT</marquee>

เลื่อนไปทางขวา
 <marquee direction="right">TEXT</marquee>

เลื่อนไปกลับ
 <marquee behavior="alternate">TEXT</marquee>

เลื่อนขึ้น
 <marquee direction="up">TEXT</marquee>

เลื่อนลง
 <marquee direction="down">TEXT</marquee>

 <BODY>

<B>...ข้อความ......</B> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวอักษร-ตัวเข้ม
<I> ...ข้อความ...... </I> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวอักษร-ตัวเอียง
<S> ...ข้อความ...... </S> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<U> ...ข้อความ...... </U> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
<SUP> ...ข้อความ...... </SUP> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวยก
<SUB> ...ข้อความ...... </SUB> เป็นคาสั่งที่ใช้กาหนดรูปแบบตัวห้อย

 </BODY>

 <BODY>

 <FONT COLOR=RED> ...............ข้อความ.............................. </FONT> <BR>
 <FONT COLOR=GREEN> ...............ข้อความ.............................. </FONT> <BR>
 <FONT COLOR=BLUE> ...............ข้อความ.............................. </FONT> <BR>
 <FONT COLOR=VIOLET> ...............ข้อความ.............................. </FONT> <BR>
 <FONT COLOR=YELLOW> ...............ข้อความ.............................. </FONT>

 </BODY>
-----------------------------------------------------------------------------------------------------------------------------------------
อธิบายคาสั่ง
•<FONT COLOR="ชื่อสี"> เป็นคาสั่งที่ใช้กาหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ
•</FONT> เป็นคาสั่งปิดที่ต้องใช้คู่กันเสมอ

<BODY TEXTCOLOR="black" BGCOLOR="lightblue"> ............ข้อความ..........
</BODY> </HTML>

------------------------------------------------------------------------------------------
อธิบายคาสั่ง <BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี">
TEXTCOLOR ใช้กาหนดสี Default ให้กับตัวอักษรทั้งหมดภายในเอกสาร
BGCOLOR ใช้กาหนดสีแบล็คกราวด์ของเอกสาร กาหนดได้เพียงครั้งละหนึ่งสี

 <BODY>
 <P ALIGN=LEFT>ข้อวาม</P>
 <P ALIGN=CENTER>ข้อวาม </P>
 <P ALIGN=RIGHT>ข้อวาม </P>
 </BODY>

-------------------------------------------------------------------------------------------

<P> เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
<P ALIGN=LEFT> กาหนดให้ข้อความอยู่ชิดด้านซ้าย
<P ALIGN=CENTER> กาหนดให้ข้อความอยูกึ่งกลางเอกสาร ่
<P ALIGN=RIGHT> กาหนดให้ข้อความอยู่ชดด้านขวา ิ
</P> เป็นคาสั่งปิดที่ต้องใช้คู่กนเสมอ (เมื่อใช้ <P ALIGN>)
ั

 <IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120>

 <IMG> เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
 SRC="ชื่อไฟล์รูปภาพ" ชื่อของรูปภาพที่จะนามาประกอบเว็บเพจ (ต้องระบุ)
 BORDER=0 กาหนดให้มีหรือไม่มีเส้นขอบรอบรูปภาพ 0=ไม่มีเส้นขอบ (ค่าปกติ)
 WIDTH=120 กาหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกาหนดก็ได้)
 HEIGHT=120 กาหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกาหนดก็ได้)
 ALT="คาอธิบาย" คาอธิบายนี้จะแสดงในกรณีที่ไม่สามารถแสดงรูปภาพได้ หรือเมื่อวางเมาส์บนรูปภาพ การใช้แท็กแบบย่อ
ๆ
 <IMG SRC="mypic.gif"> จะได้ผลลัพธ์คือไม่มเส้นขอบ ี

 <A HREF="index.html“>หน้าแรก</A>
 <A HREF=“page1.html“>ประวัติส่วนตัว</A>
 <A HREF=“page2.html“>ประวัติการศึกษา</A>
 <A HREF=“page3.html“>ประวัติการทางาน</A>
 <A HREF=“page4.html“>ติดต่อเรา</A>
 ---------------------------------------------------------------
 ใส่หัวข้อให้ด้วย <li>…</li>
 <li><A HREF="index.html“>หน้าแรก</A></li>
 <li>< A HREF=“page1.html“>ประวัติส่วนตัว</li>
 <li>< A HREF=“page2.html“>ประวัติการศึกษา</li>
 <li>< A HREF=“page3.html“>ประวัติการทางาน</li>
 <li>< A HREF=“page4.html“>ติดต่อเรา</li>

 <A HREF="index.html"><IMG SRC=“1.gif"></A>

-----------------------------------------------------------------------------------------------------------
Table border=0
การสร้างตาราง คาสั่งสร้างตาราง
<table border="0"> กาหนดให้เส้นขอบเป็น 0
<tr>
<td><a href="index.html"><img border="0" src="back.gif"></a></td>
<td><a href="index.html"><img border="0" src="m1.jpg"></a></td>
<td><a href="p2.html"><img border="0" src="m2.jpg"></a></td>
<td><a href="p3.html"><img border="0" src="m3.jpg"></a></td> <tr> สร้างแถว
<td> สร้างคอลัมภ์
<td><a href="p3.html"><img border="0" src="next.gif"></a></td>
</tr>
</table>

<tr> สร้างแถว </tr>
<td> สร้างคอลัมภ์ </td>

<tr>
<td><a href="index.html"><img border="0" src="back.gif"></a></td>
<td><a href="index.html"><img border="0" src="m1.jpg"></a></td>
<td><a href="p3.html"><img border="0" src="next.gif"></a></td>
</tr>

 <A HREF=“index.html" TARGET="_blank">หน้าแรก</A>

หรือ ลิงค์ไปยังเว็บไซต์ภายนอก

 <A HREF="http://www.google.co.th" TARGET="_blank">ไป GOOGLE</A>

 แบบที่ 1
 ลิ้งค์ข้อความธรรมดา <A HREF="Mailto:aeey12@thaimail.com">ส่งอีเมล์ถึง.......</A>

ใส่ email ของ
ตนเอง
 แบบที่ 2
 ใช้รูปภาพเป็นลิ้งค์ เพื่อเพิ่มความน่าสนใจ<p>
<A HREF="Mailto:aeey12@thaimail.com"><IMG SRC="mail2.gif"
BORDER=“0"></A>

ใส่ email ของ
ตนเอง ชื่อไฟล์รูปภาพ

•<FORM>
• Name: ชื่อ-นามสกุล<BR>
• <INPUT TYPE="text" NAME="name" SIZE="30" MAXLENGTH=30><BR>
• Site Url: ที่อยู่เว็บไซต์ของคุณ<BR>
• <INPUT TYPE="text" NAME="siteurl" SIZE="30" MAXLENGTH=30
VALUE="http://"><BR>
•</FORM>
----------------------------------------------------------------------
•<INPUT TYPE="text"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ TEXT
•NAME="name" ชื่อของช่องรับข้อมูล (จะต้องมีชื่อไม่ซ้ากันหากมีช่องรับข้อมูลมากกว่า 1 ช่อง)
•SIZE="20" เป็นการกาหนดความกว้างของช่องรับข้อมูล
•MAXLENGTH="30" เป็นการกาหนดความยาวสูงสุดของข้อมูล (จานวนตัวอักษร)
•VALUE="http://" เป็นการกาหนดค่าเบื้องต้นให้กับช่องรับข้อมูล

•<FORM>
• คุณอายุเท่าใด:(เลือกเพียงข้อใดข้อหนึ่งเท่านั้น)<BR>
• <INPUT TYPE="radio" NAME="age" VALUE="20-30">20-30 ปี
• <INPUT TYPE="radio" NAME="age" VALUE="31-40" CHECKED>31-40 ปี
• <INPUT TYPE="radio" NAME="age" VALUE="41-50" DISABLED>41-50 ปี
•</FORM>
----------------------------------------------------------------------------------
 ผลลัพธ์ที่ได้
 •คุณอายุเท่าใด:(เลือกเพียงข้อใดข้อหนึ่งเท่านั้น)
 •20-30 ปี <-- ค่าปกติ
 •31-40 ปี <-- CHECKED
 •41-50 ปี <-- DISABLED
 •อธิบายคาสั่ง
 •<INPUT TYPE="redio"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ REDIO
 •NAME="age" ชื่อของปุ่มรับข้อมูล (ต้องเป็นชื่อเดียวกันทุกปุ่ม)
 •VALUE="20-30" เป็นกาหนดค่าหรือข้อมูลให้กับปุ่มรับข้อมูล
 •CHECKED เป็นการกาหนดให้มีการเลือกปุ่มรับข้อมูลนี้เป็นเบื้องต้น
 •DISABLED เป็นการกาหนดไม่ให้มีการเลือกปุ่มรับข้อมูลนี

 •<FORM>
 • หัวข้อใดที่คุณชื่นชอบเป็นพิเศษ (เลือกได้มากกว่า 1 ข้อ)<BR>
 • <INPUT TYPE="checkbox" NAME="Members">ทะเบียนรายชื่อสมาชิก<BR>
 • <INPUT TYPE="checkbox" NAME="New page" CHECKED>แนะนาเว็บเพ็จใหม่
<BR>
 • <INPUT TYPE="checkbox" NAME="Techno" DISABLED>วิชาการ/บทความ<BR>
 •</FORM>
 •------------------------------------------------------------------------------------
 •หัวข้อใดที่คุณชื่นชอบเป็นพิเศษ (เลือกได้มากกว่า 1 ข้อ)
 •ทะเบียนรายชื่อสมาชิก <-- ค่าปกติ
 •แนะนาเว็บเพ็จใหม่ <-- CHECKED
 •วิชาการ/บทความ <-- DISABLED
 •<INPUT TYPE="checkbox"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ CHECKBOX
 •NAME="Member" ชื่อของปุ่มรับข้อมูล (จะต้องมีชื่อไม่ซ้ากันหากมีปุ่มรับข้อมูลมากกว่า 1 ปุ่ม)
 •VALUE="20-30" เป็นกาหนดค่าหรือข้อมูลให้กับปุ่มรับข้อมูล
 •CHECKED เป็นการกาหนดให้มีการเลือกปุ่มรับข้อมูลนี้เป็นเบื้องต้น
 •DISABLED เป็นการกาหนดไม่ให้มีการเลือกปุ่มรับข้อมูลน

 •<FORM>
 • Username: ชื่อสมาชิก<BR>
 • <INPUT TYPE="text" NAME="name" SIZE="30"><BR>
 • Password: รหัสผ่านของคุณ<BR>
 • <INPUT TYPE="password" NAME="password" SIZE="30"><BR>
 •</FORM>
 •ผลลัพธ์ที่ได้
 •Username : ชื่อสมาชิก
 •
 •Password : รหัสผ่านของคุณ
 • -------------------------------------------------------------------------------
 •<INPUT TYPE="text"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ TEXT
 •<INPUT TYPE="password"> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ PASSWORD
 •หมายเหตุ ในช่องรับข้อมูลแบบ PASSWORD เมื่อป้อนข้อมูลจะเห็นตัวอักษรเป็น ****

 •<FORM>
 • คาแนะนาหรือติชม<BR>
 • <TEXTAREA NAME="comment" COLS="50" ROWS="5"
WRAP="virtual"></TEXTAREA>
 •</FORM>
 •ผลลัพธ์ที่ได้
 •คาแนะนาหรือติชม
 •<TEXTAREA> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ TEXTAREA
 •NAME="comment" ชื่อของช่องรับข้อมูล (Field Name)
 •COLS="50" เป็นกาหนดความกว้างของช่องรับข้อมูล
 •ROWS="5" เป็นการกาหนดจานวนบรรทัดของช่องรับข้อมูล
 •WRAP="vitual" เป็นการกาหนดให้มีการตัดคาของข้อมูลโดยอัตโนมัติ
 •</TEXTAREA> แสดงจุดสิ้นสุดช่องรับข้อมูลแบบ TEXTAREA

 •<FORM>
 • <SELECT NAME="province" SIZE="1">
 • <OPTION VALUE="กรุงเทพมหานคร">กรุงเทพมหานคร</OPTION>
 • <OPTION VALUE="กระบี่">กระบี</OPTION>
่
 • <OPTION VALUE="กาญจนบุร" SELECTED>กาญจนบุร</OPTION>
ี ี
 • <OPTION VALUE="กาฬสินธ์">กาฬสินธ์</OPTION>
 • </SELECT>
 •</FORM>
 -----------------------------------------------------------------------------------------
 •<SELECT> เป็นการกาหนดให้มีช่องรับข้อมูลแบบ SELECT
 •NAME="province" ชื่อของช่องรับข้อมูล (Field Name)
 •SIZE="1" เป็นกาหนดความกว้างของช่องรับข้อมูล (จานวนบรรทัด)
 •ROWS="5" เป็นการกาหนดจานวนบรรทัดของช่องรับข้อมูล
 •OPTION VALUE="กาญจนบุรี" เป็นการกาหนดตัวเลือกให้กับช่องรับข้อมูล
 •NAME="SELECTED" กาหนดให้เลือกข้อมูลนี้เป็นเบื้องต้น
 •</SELECT> แสดงจุดสิ้นสุดช่องรับข้อมูลแบบ SELECT

 •<FORM>
 • Name: ชื่อ-นามสกุล<BR> <INPUT TYPE="text" NAME="name"
SIZE="30"><BR>
 • E-mail: ที่อยู่อีเมล์ของคุณ<BR> <INPUT TYPE="text" NAME="email"
SIZE="30"><BR>
 • คาแนะนา/เสนอแนะ/ติชม: (เพื่อการปรับปรุงเว็บไซท์ครั้งต่อไป)<BR>
 • <TEXTAREA NAME="comment" COLS="50" ROWS="5"
WRAP="virtual"></textarea><P>
 • <INPUT TYPE="submit" VALUE="ส่งข้อมูล">
 • <INPUT TYPE="reset" VALUE="ลบพิมพ์ใหม่">
 •</FORM>
 ------------------------------------------------------------------------------
 •Name : ชื่อ-นามสกุล
 •E-mail : ที่อยู่อีเมล์ของคุณ
 •คาแนะนา/เสนอแนะ/ติชม: (เพื่อการปรับปรุงเว็บไซท์ครั้งต่อไป)

 1. สร้างเว็บเพจ “แนะนาตัวเอง”
ประกอบด้วย ตั้งชื่อ
▪ หน้าแรก index.html
▪ ประวัติสวนตัว
่ page1.html
▪ ประวัติการศึกษา page2.html
▪ ประวัติการทางาน page3.html
▪ รูปภาพ page4.html
▪ ติดต่อเรา page5.html
---------------------------------------------------------------------------------------------------
 ส่วนท้ายเว็บใส่ข้อความเหมือนตัวอย่าง ทุกหน้าเว็บเพจ
 ใส่ไว้ใน Folder ชื่อตนเอง (เป็นภาษาอังกฤษ)

ใส่ข้อความ

 ส่งงานทาง Email : kmee01@gmail.com
 ส่งทั้ง Folder ที่เก็บงาน

 ดูผลการเรียน
 http://atippawan.blogspot.com/

ทบทวน Html

Recommended

Recommended

More Related Content

Similar to ทบทวน Html

Similar to ทบทวน Html (20)

More from School

More from School (20)

ทบทวน Html