Embed Size (px)
DESCRIPTION
Citation preview
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://dookdik.kapook.com/dookdik.php?catid=108&hit=0 - แบลกกราว
http://dookdik.kapook.com/dookdik.php?catid=54&hit=0 - ขอความ
http://dookdik.kapook.com/dookdik.php?catid=56&hit=0
ไอคอนแตงเวบ
http://webboard.yenta4.com/topic/519890 http://www.zalim-code.com/iconmini.htm (อยลางๆ เวบ)
www.kapook.com
www.yenta4.com
พมพสงทตองการลงไป เชน ตองการปมรปบาน ใหพมพ
icon+home ให Google คนหาแบบรปภาพ
คลกขวาทภาพ Save picture As
เลอกทเกบ
ตงชอ แนะน าเปนตวเลขจ างายๆ
Save
พมพสงทตองการ
คนหาแบบรปภาพ
คลกขวา Save
Picture As
กรณบนทกคร งแรก
1.คลกเมน File 2.Save หรอ Save As กได 3.เลอก Folder ทเกบงาน
4.ต งชองานทชอง File name เชน index.html , page1.html 5.Save as type : All file
6.คลก Save กรณบนทกเมอมการท างานเพม
- คลก File > Save
- หรอกด Ctrl+S กรณตองการไฟลงานเพม โดยทงานเดมยงอย
1.File 2.Save As 3.เลอกทเกบ
4.ต งชอใหม ทไมใชชอเดม
ไปท Folder ทเกบงานไว คลกทไฟล คลกเมาสขวา
Open With เลอกโปรแกรมทตองการเปดด
1.เปดโปรแกรม Notepad 2.คลก File 3.คลก Open 4.ไปคลกทไฟล ทตองการเปด เชน
Index.html Page1.html
<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
<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><A HREF="index.html">หนาแรก</A></LI><br> <LI><A HREF="page1.html">ประวตสวนตว</A></LI><br> <LI><A HREF="page2.html">ประวตการศกษา</A></LI><br> <LI><A HREF="page3.html">ประวตการท างาน</A></LI><br> <LI><A HREF="page4.html">ตดตอเรา</A></LI>
<UL>ขอความ</UL><br> เชน
<UL>Menu</UL><br> <LI><A HREF="index.html">หนาแรก</A></LI><br> <LI><A HREF="page1.html">ประวตสวนตว</A></LI><br> <LI><A HREF="page2.html">ประวตการศกษา</A></LI><br> <LI><A HREF="page3.html">ประวตการท างาน</A></LI><br> <LI><A HREF="page4.html">ตดตอเรา</A></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 ชอตนเอง (เปนภาษาองกฤษ)
ใสขอความ
