HTML

ร้องเพลง + Html เล็กน้อย

posted on 15 Jul 2008 22:47 by reshavalentine in HTML, Music

ช่วงนี้กิจการร้านน้ำชาก็ขอพักไปชั่วคราว แต่ยังเข้าไปนั่งในร้านน้ำชาเพื่อพักผ่อนได้เช่นเคยนะคะ

วันนี้ก็จะมาบอกว่า...

เบียจะประกวดร้องเพลง ซึ่งเป็นงานของโรงเรียน

เค้ากำหนดมาให้ ร้องเพลงพระราชนิพนธ์ (ภาษาอังกฤษ) 1 เพลง

และเพลงอะไรก็ได้ (ภาษาอังกฤษ) อีก 1 เพลง

ซึ่งเบียเลือกเพลงใกล้รุ่ง และเพลง Simple & Clean ค่ะ

แต่ว่า... ถ้าหากขออาจารย์ว่าขอเล่นกีตาร์(สด)ได้ จะเอา Simple & Clean

แต่ถ้าไม่ได้ จะเอา Why, or why not ค่ะ *-*

 

และเบียเองก็จะมีคอนเสิตในวันที่ 26 นี้(ไม่แน่ใจว่าจะโดนเลื่อนมั้ย)

รายชื่อเพลงที่จะเล่น (อาจมีการเปลี่ยนแปลงภายหลัง)

1. Shio

2. Canon in Me

3. You are my love

(ทั้ง3เพลงนี้เบียโซโล่คีย์บอร์ด)

4. สิ่งที่ฉันเป็น (อคูสติค)

5. Soulmate (อคูสติค)

6. My Happy Ending (อคูสติค)

7. มุม

8. ปลายทาง

9. หวั่นไหว

10. เล่นของสูง (อคูสติค) 

ไม่มีอะไรแน่นอนซักอย่างเลยเนอะชีวิตเบีย - -!!!

 

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

 

แท็กใหม่ที่จะมานำเสนอในวันนี้ก็คือ

<marquee> ค่ะ

เป็นการทำให้ข้อมูล เลื่อนจากขวาไปซ้าย

มีแอททริบิวต์ก็คือ

behavior="alternate" ช่วยให้ข้อมูล เลื่อนจากขวาไปซ้ายไปขวาไปซ้าย (เด้งไปมานั่นเอง)

direction="right" ทำให้ข้อมูลเลื่อนจากซ้ายไปขวา

bgcolor="สี" ใส่สีพื้นหลังแก่ข้อมูลที่วิ่งไปมา...

loop="ตัวเลข" จำนวนครั้งที่เลื่อนไปมา

 

เดี๋ยวจะไปศึกษาเรื่องของการทำ Image Rollover ก่อนค่ะ

แล้วไว้จะมาอธิบายนะคร้าาา 

HTMLวันนี้เบียขอพูดถึงเรื่อง

การใส่รูปและ การใส่ลิงค์ละกันนะคะ

 

พูดถึงการใส่รูปก่อนเลยละกัน

ก็เหมือนการใส่รูปที่แบคกราวนด์ค่ะ

แค่เปลี่ยนแท็กเป็น

<img src="......">

ใน..... นั้นก็ใส่ลิงค์ของรูปภาพนะคะ

อย่างเช่น

<img src="http://reshavalentine.exteen.com/images/15555.JPG">

การแสดงผลก็จะออกมาเป็นรูปนี้ค่ะ

สามารถปรับขนาดรูปภาพได้โดยการใส่ แอททริบิวต์เพิ่มเข้าไป และยังสามารถจัดตำแหน่งได้ด้วย

 

แอททริบิวต์ที่ใช้ก็คือ

width height align เหมือนเดิมค่ะ 

<img src="http://reshavalentine.exteen.com/images/15555.JPG" width="100" height="300" align="center"> 

ผลก็คือ

 

 
มันก็เละๆงี้แหละค่ะ  (เพราะปรับขนาดเพี้ยนมาก >.>!!)

 

ต่อไปมาดูการใส่ลิงค์กัน 

คำสั่งที่ใช้ก็คือ

<a href="....">123456789</a>

ใน.... นั้นคือลิงค์ค่ะ ส่วน 123456789 คือข้อความที่จะแสดงเป็นลิงค์ค่ะ อย่างเช่น

 

<a href="http://reshavalentine.exteen.com">คลิกเลย!!</a>

ก็จะแสดงผลออกมาตามนี้ค่ะ

คลิกเลย!! 

 

ถ้าอยากให้ลิงค์ขึ้นมาในหน้าใหม่ล่ะ?

ก็คลิกขวาที่ลิงค์แล้ว open in new tab หรือ new window ค่ะ -..-

ล้อเล่น >.<!!

บางที่มันคลิกขวามะได้เนอะ แต่ก็อยากให้มันขึ้นในแท็บหรือหน้าใหม่

ก็ใส่แอททริบิวต์นี่เลย

target="blank"

 

อย่างนี้

<a href="http://reshavalentine.exteen.com" target="blank">คลิกเดะ - -"</a>

ก็จะเป็นงี้

คลิกเดะ - -" 

 

ลองมารวมหลายๆแท็กที่เคยทำไปแล้วเข้าด้วยกันดูนะคะ

เริ่มจากการสร้างตาราง การกำหนดรูปแบบตัวอักษร ใส่รุปภาพ ใส่ลิงค์เลยค่ะ *-*

(ค่อยๆเป็นค่อยๆไปละกัน)

<table cellspacing="5" cellpadding="5" border="3" bgcolor="azure">

<tr>

<td rowspan="2"><img src="http://reshavalentine.exteen.com/images/onion/ToT.gif"></td>

<td><b><font color=red size=10>T^T!!</font></b>

</tr>

<tr>

<td><a href="http://reshavalentine.exteen.com"><font size=5>จิ้มเลย!!</font></a>

</tr>

ผลก็จะเป็นงี้ค่ะ

(ไปใส่แท็ก html head body กันเองเน้อ) 

T^T!!
จิ้มเลย!!

 

อธิบายก่อน...

เบียสร้างตารางแบบปกติเลย... แค่ให้ระยะห่างระหว่างช่้องตารางแต่ละช่อง(cellspacing)เป็น5 และระยะห่างระหว่างข้อมูล

กับเส้นขอบช่องตาราง(cellpadding)เป็น5เปลี่ยนสีพื้นหลังเป็น azure

จากนั้นพอเริ่มทำตารางแถวแรก (บน)

เบียให้ ช่องแรก(ซ้าย) มี rowspan = 2 ก็คือมีค่าเท่ากับ2ช่อง(ในแนวตั้ง)นั่นเอง ทำให้เหมือนเ้ป็นการ

ยุบรวมเซลล์(ในExcel)

 

ต่อไปช่องที่2 (ขวาบน)

เบียก็ใส่ตัวอักษรธรรมดา ใส่สีแดง ขนาด10

พอมาแถวล่าง เบียสร้างช่องเพิ่มแค่ช่องเดียว

เพราะช่องแรงโดนยุบรวมไปแล้ว

และได้ใส่ลิงค์ ซึ่งเป็นสีฟ้าเข้าไป

 

ลองไปทดลองทำกันดูนะคะ...

รูปก็ทำลิงค์ได้ค่ะ

อย่างเช่น

<a href="http://reshavalentine.exteen.com" target="blank"><img src="http://reshavalentine.exteen.com/images/onion/ToT.gif"></a>

ก็จะแสดงผลดังนี้ค่ะ

 

วันนี้ก็มีเพียงเท่านี้นะคะ ไว้คิดแท็กใหม่ได้ค่อยมาอธิบายต่อ -..-