ยินดีต้อนรับจ้า บล๊อกยังแต่งไม่เสร็จดีค่ะ แต่เนื้อหาก็มาลงเพิ่มเรื่อยๆนะคะ ขอบคุณสำหรับกำลังใจทุกท่านนะคะ





nHuy.Bloggang.com

บทที่ 4 รวมโค้ด HTML ง่ายๆ แบบนำไปใช้กันได้เลย (ตอนที่ 2)


ต่อจากตอนที่ 1 นะคะ


5. การกำหนดรูปแบบตัวอักษรมากกว่าหนึ่งแบบ


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



<font color="red">เปลี่ยนสีตัวอักษร</font>

โค้ด HTML แต่งตัวอักษร

แล้วต้องการทำให้ตัวอักษรใหญ่ขึ้นด้วย


<font color="red" size="7">เปลี่ยนสีตัวอักษร เพิ่มขนาดด้วย </font>

โค้ด html แต่งตัวหนังสือ

หากต้องการเพิ่มอะไร ก็ใส่แอตทริบิวท์นั้นๆ เพิ่มลงไปในแท็ก Font ก็เรียบร้อยแล้วค่ะ



6. การขึ้นบรรทัดใหม่


การขึ้นบรรทัดใหม่ สามารถทำได้ 2 วิธีคือ



1. ใช้แท็ก <br /> 
เป็นการขึ้นบรรทัดใหม่แบบไม่เว้นบรรทัด ถ้าต้องการเว้นบรรทัดมากกว่า 1 บรรทัด ให้ใช้แท็ก <br /> 
ซ้ำกันตามจำนวนที่ต้องการเว้น


2. ใช้แท็ก <p></p>

ครอบกลุ่มข้อความ ที่ต้องการให้อยู่ในย่อหน้าเดียวกัน
แท็ก p นี้คือ แท็กสำหรับการขึ้นย่อหน้าใหม่ค่ะ โดยปกติ แท็ก p จะเป็นการขึ้นบรรทัดใหม่โดยเว้นบรรทัดค่ะ ดูตัวอย่าง


<p>ย่อหน้าที่หนึ่ง</p>
<p>ย่อหน้าที่สอง</p>

โค้ด HTML จัดตัวหนังสือ


แท็ก p ต่างจากแท็ก br คือ แท็ก p จะใช้ในการจัดกลุ่มให้ข้อความแต่ละย่อหน้า แบ่งออกเป็นชุดๆ โดยเฉพาะถ้ามีตัวหนังสือเป็นจำนวนมาก ก็จะช่วยให้จัดระเบียบได้ดียิ่งขึ้น ปกติเราจะใช้แท็ก p มากกว่าแท็ก br ค่ะ



7. การจัดตำแหน่งให้ข้อความ


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



<p align="left">จัดตำแหน่งชิดซ้ายให้ข้อความ</p>
<h1 align="center">จัดกึ่งกลางให้หัวข้อหลัก</h1>
<h3 align="right">จัดชิดขวาให้ข้อความ</h3>

จัดตัวอักษร โค้ด HTML

ค่าที่จะใส่ในแอตทริบิวท์ align ก็จะมี left, right, center, justify ค่ะ


justify หมายถึง จัดให้ชิดขอบซ้ายขวา เพื่อให้ข้อความที่มีหลายๆบรรทัด มีขอบซ้ายขวาที่เสมอกัน ดูสวยงามมากยิ่งขึ้นค่ะ



8. การเว้นวรรคมากกว่าหนึ่งครั้ง


ในการเขียนเว็บไซต์ จะมีระบบตัดช่องว่าง ให้เหลืออย่างมากที่สุด 1 ช่องว่างเสมอ ทำให้เราเว้นวรรคได้สูงสุด เพียง 1 เคาะ เท่านั้นค่ะ ดังนั้น ถ้าหากเราต้องการเคาะมากกว่า 1 ครั้ง ก็ให้ใช้สัญลักษณ์   สำหรับการเว้นวรรคทุกๆ 1 ครั้ง



ไม่เว้นวรรค<br />
&nbsp;&nbsp;&nbsp;เว้นวรรค 3 ครั้ง<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;เว้นวรรค 5 ครั้ง<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;เว้นวรรค 8 ครั้ง

 เว้นวรรค html



ถ้าต้องการเว้นไปกี่ครั้ง ก็ใส่   ตามจำนวนทที่ต้องการได้เลยค่ะ


9. ทำข้อความวิ่ง (marquee)


การทำข้อความวิ่งๆ จะช่วยทำให้เว็บไซต์ของเรามีสีสันมากยิ่งขึ้น รู้สึกว่ามีอะไรใหม่ๆอัพเดท ดูไม่จืดชืดดีค่ะ วิธีทำข้อความวิ่งก็ง่ายมาก เราก็เพียงแค่ใช้แท็ก marquee ครอบเข้าไปในตัวอักษรที่เราต้องการให้เลื่อนค่ะ



<marquee>ข้อความวิ่งได้</marquee>


ข้อความวิ่งได้

เพิ่มลูกเล่นกันหน่อย โดยกำหนดทิศทางที่ต้องการให้เลื่อนด้วยแอตทริบิวท์ direction ค่ะ


<marquee direction="up">ข้อความเลื่อนขึ้น</marquee>


ข้อความเลื่อนขึ้น


สำหรับการตกแต่งตัวอักษร ในขั้นแรกก็ขอจบลงเพียงเท่านี้ก่อนนะคะ เทคนิคง่ายๆ แค่นี้ เราก็สามารถนำไปใช้ตกแต่งเว็บไซต์ได้มากมาย ลองเอาไปผสมผสาน ประยุกต์ใช้ดูนะคะ





Create Date : 09 ธันวาคม 2551
Last Update : 16 มกราคม 2553 14:54:52 น. 4 comments
Counter : Pageviews.

 
จะลองไปทำดูนะค่ะมือใหม่หัดทำค่ะ


โดย: นู๋ดีค่ะ (kun_isara ) วันที่: 9 ธันวาคม 2551 เวลา:23:37:07 น.  

 
จ้า


โดย: nhuy (huytumhuy ) วันที่: 16 กันยายน 2552 เวลา:17:06:57 น.  

 
ขอบคุณนะ


โดย: มุมมองที่สาม - Third EyeS VieW วันที่: 16 เมษายน 2553 เวลา:15:38:09 น.  

 
ขอบคุณค่ะ


โดย: ตั้งใจมา วันที่: 21 กรกฎาคม 2553 เวลา:16:53:29 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 
huytumhuy
Location :
Thailand United States

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 11 คน [?]




I am nHuy
เปลี่ยนเรื่องเขียนบล็อก เป็นเรื่องจิปาถะไปเรื่อย....มีเวลาจะมาอัพเดทบ่อยๆจ้า

สงวนลิขสิทธิ์ ตามพระราชบัญญัติลิขสิทธิ์ พ.ศ. 2539 ห้ามผู้ใดละเมิด ไม่ว่าการลอกเลียน หรือนำส่วนหนึ่งส่วนใดของรูปภาพ และ ข้อความใน blog แห่งนี้ไปใช้ ทั้งโดยเผยแพร่และเพื่อการอ้างอิง โดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร จะถูกดำเนินคดี ตามที่กฏหมายบัญญัติไว้สูงสุด


โปรแกรมบันทึกค่าใช้จ่ายเจ๋งสุดๆ
Group Blog
 
<<
ธันวาคม 2551
 123456
78910111213
14151617181920
21222324252627
28293031 
 
9 ธันวาคม 2551
 
All Blogs
 
Friends' blogs
[Add huytumhuy's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.