ทบทวน 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/

ภาพดกดก

- เสน (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

- โมจ (การตน)


- แบลกกราว


- ขอความ


ไอคอนแตงเวบ

http://webboard.yenta4.com/topic/519890

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

www.kapook.com

www.yenta4.com

































http://www.zalim-code.com/iconmini.htm



พมพสงทตองการลงไป เชน

ตองการปมรปบาน ใหพมพ

icon+home ให Google คนหาแบบรปภาพ คลกขวาทภาพ Save picture As เลอกทเกบ

ตงชอ แนะน าเปนตวเลขจ างายๆ

Save

พมพสงทตองการ

คนหาแบบรปภาพ

คลกขวา Save

Picture As

<html><head><title> ขอความทตองการใหแสดงในสวน Title Bar </title> </head><body background="13.jpg">

ขอความทตองการให .................................................

แสดงในหนาเวบเพจ..............................................

</body> </html>

ตองการใหพนหลงเวบเพจเปน

รปภาพ “13.jpg” คอชอรปภาพ

<html><head><title> ขอความทตองการใหแสดงในสวน Title Bar </title> </head><body bgcolor="#000000">

ขอความทตองการให .................................................

แสดงในหนาเวบเพจ..............................................

</body> </html>

ตองการใหพนหลงเวบเพจเปนส ท าได 2 แบบ

1. ใสคาส ="#000000"2. ใสชอส ="black

คาสหาไดจาก google พมพวา “ตารางคาส”

http://www.abhidhamonline.org/color%20code.htm

http://www.abhidhamonline.org/color code.htm




<BODY>

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

</BODY>

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

อธบายคาสง <FONT FACE="ชอฟอนตทใช"> เปนคาสงทใชกาหนดฟอนตทจะใชในเวบเพจ </FONT> เปนคาสงปดทตองใชคกนเสมอ

ชอ 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"><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><td><a href="p4.html"><img border="0" src="m4.jpg"></a></td><td><a href="p5.html"><img border="0" src="m5.jpg"></a></td><td><a href="p6.html"><img border="0" src="m6.jpg"></a></td><td><a href="p3.html"><img border="0" src="next.gif"></a></td>

</tr></table>

Table border=0ค าสงสรางตาราง

ก าหนดใหเสนขอบเปน 0

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

<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="p2.html"><img border="0" src="m2.jpg"></a></td><td><a href="p3.html"><img border="0" src="m3.jpg"></a></td><td><a href="p4.html"><img border="0" src="m4.jpg"></a></td><td><a href="p5.html"><img border="0" src="m5.jpg"></a></td><td><a href="p6.html"><img border="0" src="m6.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:[email protected]">สงอเมลถง.......</A>

แบบท 2

ใชรปภาพเปนลงค เพอเพมความนาสนใจ<p>

<A HREF="Mailto:[email protected]"><IMG SRC="mail2.gif" BORDER=“0"></A>

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

ใส 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 : [email protected] สงทง Folder ทเกบงาน

ดผลการเรยน

http://atippawan.blogspot.com/

mailto:[email protected]



http://atippawan.blogspot.com/

ทบทวน html

Documents