มาเขียนเว็บกับภาษา html [2-final]

posted on 07 Apr 2006 19:49 by rije in HTML

หลังจากเรียนรู้เรื่องพื้นฐานเกี่ยวกับการสร้างเว็บด้วย html กันแล้วนะครับ

ตอนนี้เป็น entry สุดท้ายสำหรับเรื่อง html ก่อนจะขึ้นเรื่อง css กันต่อไป

วันนี้จะมาพูดถึงเรื่องโค้ดที่เหลือให้จบกันเลยละกันนะครับ

..................................................................

Code ที่ใส่อยู่ระหว่าง <body> .... </body> ครับ

ใส่เสียง

<EMBED SRC="ชื่อไฟล์เสียง">

ตัวนี้สามารภกำหนด width , height , border , align (การจัดวาง) , loop ได้ครับ

แล้วก็ HIDDEN=TRUE การซ่อนครับ ใส่ true จะเป็นการซ่อนไม่ให้มองเห็นครับ

<BGSOUND SRC="ชื่อไฟล์เสียง" LOOP=INFINITE>

ตัวนี้ไม่ได้ต่างจากข้างบนนักครับ เพียงแต่ว่าเมื่อคุณปิดหน้าต่างลงมาอยู่ที่ bar ด้านล่าง

เสียงเพลงจะหยุดครับ แต่ตัวบนจะไม่หยุดมันจะเล่นไปเรื่อยๆ ครับ

.................................................................

ทำตัวอักษรวิ่ง

<MARQUEE>ใส่ข้อความคุณตรงส่วนนี้</MARQUEE>

ตัวนี้คุณกำหนดได้ว่าจะให้ตัวอักษรวิ่งไปทางไหนและกำหนดความเร็วตัวอัษรได้ครับ

คำสั่งที่จะใส่ไว้ในส่วน <MARQUEE ใส่ตรงนี้>ข้อความ</MARQUEE> ครับ

behavior="scroll" เริ่มวิ่งมาจาก scrollbar เลย

behavior="alternate" เริ่มวิ่งโดยห่างจาก scrollbar มาตามปกติ

direction="up" ใส่เป็น up, down, right หรือ left ครับ เป็นการกำหนดให้ตัวอักษรวิ่งไปทางใดครับ

และกำหนดความกว้างยาว รวมถึงสีพื้นหลัง(bgcolor)ได้ครับ

.................................................................

การทำ form

ช่องสำหรับกรอกข้อความ

<FORM METHOD="POST" ACTION="">
<TEXTAREA NAME="ชื่อ" ROWS=30 COLS=30>ใส่ข้อความตรงส่วนนี้</TEXTAREA>
</FORM>

rows แล้วก็ cols กำหนดขนาดความกว้างของช่อง

<INPUT TYPE="TEXT" NAME="ชื่อ" VALUE="ข้อความที่ปรากฏด้านใน">

เป็นเหมือนช่องที่ให้คุณใส่ usename นั่นเอง

ช่องกรอกรหัส

<INPUT TYPE="PASSWORD" NAME="ชื่อ" VALUE="รหัสจะปรากฏเป็น * ">

ปุ่มที่ไว้สำหรับติ๊กเช่นพวก vote ที่จะมีปุ่มกลมๆ ให้คลิกเลือก

<INPUT TYPE="RADIO" NAME="ชื่อ">

แบบกล่องสี่เหลี่ยม

<INPUT TYPE="CHECKBOX" NAME="">

ปุ่มกดแบบ submit, reset, ok

<INPUT TYPE="SUBMIT" NAME="ชื่อ" VALUE="ข้อความข้างใน">

<INPUT TYPE="RESET" NAME="" VALUE="ข้อความข้างใน">

<INPUT TYPE="BUTTON" NAME="" VALUE="ข้อความข้างใน">

form แบบให้เลือกเป็นข้อๆ ลงมา

.................................................................

รายการ [List]

ประเภทนี้จะเป็นพวกจุดวงกลมหรือสี่เหลี่ยมหน้าข้อความที่ใส่ไว้

type ที่มีคือ SQUARE , CIRCLE และ DISC

ประเภทนี้หน้าข้อความจะเป็นตัวอักษรภาษาอังกฤษจาก A-Z

type ที่ใส่ได้แก่ A, a, L, l, 1

.................................................................

การทำลิงค์ส่งเมล์

<A HREF="ใส่ข้อความMAILTO:ใส่เมล์ตรงส่วนนี้">ใส่ข้อความ</A>

.................................................................

การจัดหน้ากระดาษ

<P ALIGN=LEFT>ข้อความ</P> จัดไว้ทางซ้ายของเพจ
<CENTER>ข้อความ</CENTER> ตรงกลาง
<P ALIGN=RIGHT>ข้อความ</P> จัดไว้ทางขวาของเพจ
<BLOCKQUOTE>ข้อความ</BLOCKQUOTE> จัดเป็นแบบบล็อค

<PRE>ข้อความ</PRE> ข้อความที่ใส่จะถูกจัดเรียงตามที่เราเขียนลงไป

.................................................................

code

  การเว้นระยะ ในกรณีคุณอยากเว้นช่องว่างระหว่างคำมากกว่า 1 space ใช้โค้ดนี้พิมพ์กั้นระหว่างคำ

เช่น ข้อความ1 ข้อความ 2

ข้อความ 1       ข้อความ 2 จะได้

ข้อความ 1 ข้อความ 2

< คือตัว <

> คือตัว >

& คือตัว &

" คือตัว "

© ตัว copyright

.................................................................

วิธีการใส่ Flash

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/

shockwave/cabs/flash/swflash.cab#version=5,0,0,0"

WIDTH="ใส่ความกว้าง" HEIGHT="ใส่ความสูง" border="เส้นกรอบ">

<PARAM NAME=movie VALUE="ข้อมูล"> <PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="ชื่อไฟล์.swf" quality=high

gcolor=#FFFFFF WIDTH=300 HEIGHT=300

TYPE="application/x-shockwave-flash"

PLUGINSPAGE=shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlashhttp://www.macromedia.com/>

</EMBED></OBJECT>

ตัวนี้ไม่ยากครับก๊อบไปใช้แล้วเปลี่ยนตรง "ชื่อไฟล์.swf" เท่านั้นครับ

จะเปลี่ยนขนาดความกว้างความยาวหรือเส้นกรอบก็ได้ครับ

.................................................................

เสริม form การสร้างโค้ดเข้ารหัส

<form name="loginform">
Username : <input name="login"><br>
Password : <input name="pass" type=password>
<input type=button value="Login" OnClick="checklogin()">
<input type=reset>
</form>
<script LANGUAGE="JAVASCRIPT">
function checklogin()
{
if(document.loginform.login.value =="ตั้งidตรงนี้" &&
document.loginform.pass.value =="ตั้งพลาสตรงนี้")
{window.location.href="ใส่หน้าลิงค์หลังจาก login เข้าไปแล้ว";}
else
{ alert("Your ID and Password Wrong!");}
}
</script>

โค้ดนี้นำไปใส่ระหว่าง <body> ... </body> ครับ

.................................................................

ทำให้ภาพพื้นหลังไม่ขยับไปกับการลาก scrollbar

ใส่โค้ดระหว่าง <body ใส่ตรงนี้>

bgproperties=fixed

.................................................................

ลิงค์แบบ blank เปิดหน้าต่างใหม่กำหนดขนาดได้

.................................................................

โค้ดส่วนที่ใช้บ่อยก็มีเท่านี้ล่ะมั้งครับ ถ้าอยากรู้โค้ดไหนก็ comment ไว้นะครับ ^^

entry หน้า จะเป็นเรื่องโค้ด css และ styleนะครับ วันนี้เอาตัวอย่างไปเล็กน้อยละกัน

*************************************

body {
scrollbar-arrow-color: #877D7D;
scrollbar-base-color: #000000;
scrollbar-face-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-highlight-color: #A30505;
scrollbar-shadow-color: #A30505;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
background-image: url(images/image01.gif);
font-family: Verdana;
font-size: 8pt;
color: #5D5D5D;
background-color: #ffffff;
margin: 0;
padding: 0;
}

.................................................................

สุดท้ายนี้ขอทิ้งท้ายด้วยเรื่องการออกแบบ theme เพจเว็บกันนะครับ

เป็นคำแนะนำง่ายๆ สั้นๆ ครับ ถ้าคุณเก่ง photoshop

ให้ลองออกแบบลงบน Photoshop ก่อนทำ จะทำให้สามารถมองเห็นภาพเพจที่คุณคิดได้

หากคุณไม่เก่งด้านนี้ก็ลองออกแบบลงบนกระดาษดูก่อนก็ได้ครับ ^^

ก่อนทำควรคิดก่อนและลองทำตัวอย่างเล็กๆ ขึ้นมาเวลาแก้ไขจะทำได้ง่าย

และง่ายต่อการเข้าใจและการทำในขั้นตอนต่อไปครับ ^__^/ ขอให้สนุกกับการทำเว็บนะครับ~♥