Logo
Thainextstep.com สอนทำเว็บไซต์ด้วย Dreamweaver Photoshop  PHP & MySql และ การทำ SEO  
top menu
Thainextstep.com สอน HTML บทความ Dreamweaver สอน Photoshop บทความ PHP & MySql Web Tips SEO Guide
การเขียนภาษา HTML
เริ่มต้นกับ HTML
   ภาษา HTML
   โครงสร้างภาษา HTML
   การปรับแต่งเอกสาร HTML
   การกำหนดลักษณะข้อความ
   การจัดรูปแบบข้อความ
   การจัดตำแหน่งข้อความ
   การใส่รูปภาพ
   การเชื่อมโยง (ลิงค์)
   การสร้างตาราง
   การปรับแต่งตาราง
 

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

ลองเขียนโค้ดมาก็หลายโค้ดแล้วนะค่ะ แต่โค้ดที่ผ่านมาแบบไหน ๆ ก็แสดงข้อความที่ตำแหน่งชิดซ้ายของหน้าจอเสมอ อยากเปลี่ยนตำแหน่งการวางข้อความบ้าง ต้องเขียนโค้ดอย่งไร ในบทความนี้ Webmaster มีคำตอบ (แท็ก) มาฝากค่ะ

ในการกำหนดตำแหน่งในภาษา HTML สามารถกำหนดได้หลายรูปแบบค่ะ ทั้งแบบกำหนดเป็นแท็ก และการกำหนดเป็น Attribute ของแท็กค่ะ โดยมีรูปแบบดังนี้ค่ะ

           1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center  <center> ...ข้อความ...</center>
           2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้
                       <p align = "ตำแหน่ง">
...ข้อความ...</p>
               
ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

 รูปแบบการจัดตำแหน่งข้อความ

  <html>
  <head><title>
....การจัดตำแหน่งข้อความ....</title></head>
       <body>
               <center><font size = "2">
ข้อความนี้อยู่กึ่งกลาง</font></center><br>
               <p align = "left"><font size = "2">
ข้อความชิดซ้าย </font></p><br>
               <p align = "center"><font size = "2">
ข้อความนี้อยู่กึ่งกลาง </font></p><br>
               <p align = "right"><font size = "2">
ข้อความนี้ชิดขวา </font></p><br>
        </body>
  </html>

 

นอกจาก คำสั่ง align ทั้งสามแบบแล้ว ยังมีการจัดตำแหน่งอีกแบบหนึ่งค่ะ นั้นก็คือ <p align="justify">....</p> นิยมใช้จัดข้อความที่เป็นเนื้อหาเยอะ ๆ เพื่อให้มีการจัดข้อความอัตโนมัติ โดยข้อความที่จัดด้วยรูปแบบนี้ ข้อความทั้งซ้ายและขวา จะชิดขอบทั้งสองด้าน ทำให้ดูเป็นระเบียบค่ะ ตัวอย่างที่จัดด้วยรูปแบบนี้ ดูได้จาก การจัดตำแหน่ง ณ ข้อความที่ึุคุณกำลังอ่านอยู่ค่ะ (เนื้อหาที่เป็นข้อความเยอะ ๆ ในเว็บ thainextstep.com จัดด้วยรูปแบบนี้ทั้งหมดค่ะ)

 
ที่มา : Webmaster วันที่ : 12-06-50...
สอนทำเว็บไซต์   |   สอนภาษา HTML   |   สอน Dreamweaver   |   สอน Photoshop   |   สอนภาษา PHP & MySql   |   รวมทิป เทคนิคการทำเว็บไซต์   |   สอนการทำ SEO
:: Copyright © 2005 by Chatta design. All rights reserved. Do not duplicate or redistribute in any form.::