ภาษา HTML กับภาษา CSS ที่ควรรู้


 **เวลาเอา Code ไปใช้ ให้คีย์เครื่องหมาย ” ” ใหม่ทั้งหมด
**ไม่อนุญาตให้นำบทความ Tutorial นี้ไปใช้ในเว็บไซต์อื่น หรือเพื่อการค้าใด ๆ

รูปแบบทั่วไปของภาษา HTML จะมีคำสั่งเริ่มต้นและสิ้นสุด อยู่ในวงเล็บ <….> โดยคำสั่งสิ้นสุดจะมีเครื่องหมาย / อยู่ด้านหน้าคำสั่ง เช่น
<b>ตัวหนา</b>แค่ข้อความแรก และ<font color=”#FF0000″>ตัวแดงที่นี่</font>
จะเห็นเป็น:  ตัวหนาแค่ข้อความแรก และตัวแดงที่นี่

ภาษา HTML ที่ควรรู้

ใส่รูป
<img src=”Photo_URL.jpg” width=”500″ height=”375″>
Photo_URL.jpg คือ URL ของรูป ถ้าใส่ไว้ใน Folder เดียวกันจะเป็นเชื่อรูปและ . นามสกุลทันที แต่ถ้าเอามาจากในเว็บไซต์ จะเริ่มต้นด้วย http://

♒  ♒  ♒  ♒  ♒  ♒  ♒

ใส่ลิงค์ เชื่อมหลายหน้าเข้าด้วยกัน
<a href=”gallery.html”>ข้อความหรือรูปที่จะให้คนอื่นคลิก</a>
gallery.html คือชื่อเพจ ที่เมื่อผู้ใช้คลิกที่ข้อความแล้ว จะเปิดไปที่หน้านี้

 ♒  ♒  ♒  ♒  ♒  ♒  ♒

ขึ้นย่อหน้าใหม่
<p>ข้อความในย่อหน้าทั้งหมด</p>

 ♒  ♒  ♒  ♒  ♒  ♒  ♒

ขึ้นบรรทัดใหม่ แบบไม่ใช่ย่อหน้า
<br>

 ♒  ♒  ♒  ♒  ♒  ♒  ♒

หัวข้อ
<h1>หัวข้อใหญ่สุด ตัวอักษรขนาดใหญ่</h1>
<h2>หัวข้อใหญ่รองลงมา ตัวอักษรเล็กกว่า h1 นิดนึง</h2>
<h3>หัวข้อรองลงมาอีก แต่ตัวหนังสือก็ใหญ่กว่าปกติทั่วไป</h3>

ภาษา HTML ใช้ร่วมกับภาษา CSS

ความสัมพันธ์ระหว่าง CSS และ HTML
สังเกตุจากภาษา HTML ตัวอย่างเช่น
<a href=”index.html”><img src=”photo.jpg”></a>
จากตัวอย่างภาษา HTML ด้านบนซึ่งหมายถึง รูป ที่คลิกไปหน้าอื่นได้
ถ้าเราจะกำหนดค่าของรูปนี้ ภาษา CSS จะเป็น
a img {border: none;}
ให้สังเกตุว่าจะได้ a และ img มาจากภาษา html

♒  ♒  ♒  ♒  ♒  ♒  ♒

เปลี่ยนสี หรือขนาดตัวอักษร
การตั้ง Class ใหม่ในภาษา CSS จะต้องเติม . แล้วตามด้วยชื่อที่ตั้งเอาเองเช่น .myRedBigText
จากนั้นให้ตั้งชื่อให้กำหนดค่าสีและขนาดตัวอักษรที่ต้องการ โดยเขียนในวงเล็บ {…..}
ตัวอย่างเช่น
.myRedBigText {
color:#00FF00;
font-size:30px
}
และเมื่อต้องการให้คุณสมบัติการตั้งค่านี้ ปรากฏในหน้า HTML ให้เขียนเป็น
<span class=”myRedBigText“>ข้อความที่เราต้องการเปลี่ยนรูปแบบ</span>
กรณีที่เรามีคำสั่ง HTML อื่น ๆ ค่อมข้อความอยู่แล้วเช่น <p> , <div> หรือ <td>
เราสามารถใส่  class=”myRedBigText”  ลงในวงเว็บนั้นได้เลย เช่น
<p class=”myRedBigText“>ย่อหน้า ข้อความที่เราต้องการเปลี่ยนรูปแบบ</p>
ข้อดีของมันก็คือ เวลาเราเปลี่ยนรูปแบบตัวหนังสือให้เป็นเช่นนี้หลาย ๆ ที่ แล้วเกิดเราเปลี่ยนใจอยากเปลี่ยนสีรือขนาดทั้งหมด เราสามารถทำได้ทันทีในไฟล์ CSS

♒  ♒  ♒  ♒  ♒  ♒  ♒

รูปใหญ่ขึ้นเมื่อเอาเมาส์ลากผ่าน
ตั้ง Class ใหม่ในภาษา CSS ทั้งหมด 1 Class แต่ 2 สถานะ ให้เขียนเป็น
.BiggerImage {
width:100px;
height:100px;
}
.BiggerImage:hover {
width:200px;
height:200px;
}
.BiggerImage หมายความว่า สถานะปกติที่ยังไม่เอาเมาส์ไปลากผ่าน
.BiggerImage:hover หมายความว่า ค่าใหม่ ที่เราจะเห็นเมื่อเอาเมาส์ไปลากผ่าน
ส่วนในภาษา HTML ให้เขียนเป็น
<img src=”Photo_URL.jpg” class=”BiggerImage“>

♒  ♒  ♒  ♒  ♒  ♒  ♒

ใส่สีตัวหนังสือ ในรูปแบบภาษา CSS ที่แอบอยู่ในคำสั่ง HTML
(ไม่แนะนำให้ทำ)
<span style=”color: #ff0000;”>ตัวหนังสือสีแดง</span>
จะสังเกตุว่าโดยทั่วไปในหน้า HTML ที่มีภาษา CSS แทรกอยู่จะเอาภาษา CSS ไว้ระหว่าง <style> กับ </style> แต่คราวนี้ก็มีวิธีเขียน

♒  ♒  ♒  ♒  ♒  ♒  ♒

 

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply ถาม หรือ แสดงความคิดเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s