การกำหนดตัวอักษร ขนาด และสีของข้อความ
การกำหนดตัวอักษร ขนาด และสี เืพื่อต้องการเน้นข้อความ ทำได้โดยใช้แท็ก
<font size="x" color="สี" face="ชื่อตัวอักษร">--</font>
ตัวอย่าง
<p><font size="+6" color="red" face="AngsanaUPC, MS Sans Serif">การออกแบบและจัดทำเว็บเพจ</font></p>
รูปแบบของตัวอักษร
เราสามารถกำหนดตัวอักษรให้ตัวหนา ตัวเอียง หรือ ตัวขีดเส้นใต้ ได้ด้วยการใช้แท็กต่างๆ ดังนี้
<b>ตัวหนา</b>
<i>ตัวเอียง</i>
<u>ตัวขีดเส้นใต้</u>
การกำหนดให้ข้อความเคลื่อนไหว
การทำให้ข้อความเคลื่อนไหว ใช้คำสั่ง
<MARQUEE ตัวเลือก>..............</MARQUEE>
ตัวเลือกได้แก่
BEHAVIOR=ลักษณะการเคลื่อนไหว ได้แก่ SCROLL , SLIDE , ALTERNATE
DIRECTION=ทิศทางการเคลื่อนไหว ได้แก่ LEFT , RIGHT
WIDTH/HEIGHT=กำหนดขนาดของพื้นที่แสดงผล
LOOP=จำนวนรอบที่แสดงผล
การจัดข้อความ
เราสามารถกำหนดตำแหน่งหัวเรื่องและตัวอักษรให้ชิดซ้าย ขวา และกึ่งกลาง ได้โดยการเติมแอตทริบิวต์ align="left" / "right" / "center" ในแท็กหัวเรื่องและแท็กย่อหน้า
ตัวอย่าง
<h1 align="center">โรงเรียนสระยายโสมวิทยา</h1>
<p align="right">ห้องปฏิบัติการคอมพิวเตอร์ </p>
การจัดข้อความด้วยแท็ก DIV
ในกรณีที่ต้องการจัดข้อความทุกย่อหน้าเหมือนกันทั้งหมด สามารถเลือกใช้แท็ก <div align="left / center / right"> --</div> ครอบคลุมย่อหน้าทั้งหมดได้
ตัวอย่าง
<html>
<head>
<title>เพลงเยาวชนคนดีศรีสุพรรณ</title>
</head>
<body bgcolor="CCFFCC" text "005588">
<div align="center">
<h1>เพลงเยาวชนคนดีศรีสุพรรณ</h1>
<p><font face="Ms Sans Serif"><b>เยาวชนคนดีศรีสุพรรณ<br/>
จำให้มั่นบัญญัติหัดนิสัย<br/>
สิบเอ็ดข้อก่อสุขสิ้นทุกภัย<br/>
นำชาติไทย พัฒนา ก้องฟ้าเอย<br></font></b></p>
</div>
</body>
</html>
เส้นกั้นตามแนวนอน HR
เส้นกั้นตามแนวนอนใช้ในการแบ่งสัดส่วนของเืนื้อหา หรือข้อความในหน้าเว็บเพจ โดยแท็กที่ใช้คือ <hr /> ซึ่งจะไม่มีแท็กปิด
เราสามารถกำหนด ความหนา ความยาว ตำแหน่ง และแสดงผลเส้นทึบของเส้นได้ดังนี้
<HR SIZE = n WIDTH =m ALIGN = position NOSHADE>
SIZE = n เป็นความหนาของเส้น ขนาดปกติ 2 pixel
WIDTH = m เป็นการกำหนดความยาวของเส้น ถ้าไม่ระบุจะได้เส้นครงยาวเต็มจอภาพ อาจระบุเป็น% ก็ได้
ALIGN = LEFT / RIGHT / CENTER เป็นการกำหนดตำแหน่งเส้นครงตามแนวนอน ในกรณีที่เส้นมีความยาวไม่เต็มจอภาพ กำหนดได้เป็น LEFT , RIGHT , CENTER
NOSHADE เป็นการกำหนดเส้นตรงแนวนอนแบบทึบไม่มีเงา
ตัวอย่าง
<HTML>
<BODY>
<HR SIZE=50 WIDTH=50% ALIGN=LEFT>
<HR SIZE=20 WIDTH=30% ALIGN=LEFT>
<HR NOSHADE SIZE=10 WIDTH=50% ALIGN=LEFT>
<HR NOSHADE SIZE=100 WIDTH=1% >
<HR NOSHADE SIZE=70 WIDTH=1% >
</BODY>
</HTML>
การใส่รูปภาพในเว็บเพจ
ชนิดของรูปภาพ
1. ภาพชนิด jpeg /jpg (Joint Photographic Experts Group) เป็นไฟล์รูปภาพที่มีการบีบอัดเนื้อที่ สามารถแสดงความละเอียดได้สูงสุด 16 ล้านสี ภาพจะมีความคมชัด
2. ภาพชนิด gif (Graphics Interchange Format) เป็นไฟล์รูปภาพที่มีการบีบอัดเนื้อที่ มีความละเิอียด ของภาพ 256 สี
การแทรกรูปภาพใช้คำสั่ง
<img src="path/name.jpg">
img ย่อมาจาก images
src ย่อมาจาก source
path คือ เส้นทางของโฟลเดอร์ที่เก็บแฟ้มข้อมูลที่เป็นรูปภาพ
name คือ ชื่อภาพที่เราต้องการแทรก ซึ่งอาจมีนามสกุล jpg หรือ gif
ถ้าต้องการจัดวางตำแหน่งรูปภาพให้จัดชิดซ้าย ขวา กึ่งกลางสามารถใช้คำสั่งแบบเดียวกับการจัดตำแหน่งข้อความ โดยใช้คำสั่ง div align= "left/right/center"
นอกจากนี้ยังสามารถกำหนดให้ปรากฏข้อความเมื่อเลื่อนเมาส์มาวางบนรูปภาพ โดยเติม alt="---" ต่อจากชื่อแฟ้มรูปภาพ และหากต้องการกำหนดขนาดความกว้างและความสูงของรูป สามารถกำหนดโดยใช้คำสั่ง width="---" และ height="---" โดยค่าตัวเลขที่กำหนดเป็นค่าพิกเซล (pixels)
ตัวอย่าง
<div align="center"><img src="images/sport.jpg" alt="srayaisomgames" width="300" height="255" /></div>
<h1 align="center">กีฬาสี</h1>
<p align="center" >โรงเรียนสระยายโสมวิทยา ทำการแข่งขันกีฬาเพื่อให้นักเรียนได้รู้จักการรู้แพ้
รู้ชนะ รู้อภัย มีน้ำใจเป็นนักกีฬา</p>
การใส่รูปภาพให้กับพื้นหลัง
เราสามารถนำรูปภาพมาใส่เป็นพื้นหลัง (Background) โดยอาจจะใส่เป็นภาพที่แสดงลวดลาย หรือจะเป็นภาพทั่วไปก็ได้ โดยใช้คำสั่งดังนี้
<body background="ชื่อไฟล์รูปภาพ">
ตัวอย่าง
<body background="images/abc.gif">