กำหนดอักษร ข้อความ สี รูปภาพ

การกำหนดตัวอักษร ขนาด และสีของข้อความ

การกำหนดตัวอักษร ขนาด และสี เืพื่อต้องการเน้นข้อความ ทำได้โดยใช้แท็ก

ตัวอย่าง

<p><font size="+6" color="red" face="AngsanaUPC, MS Sans Serif">การออกแบบและจัดทำเว็บเพจ</font></p>

รูปแบบของตัวอักษร

เราสามารถกำหนดตัวอักษรให้ตัวหนา ตัวเอียง หรือ ตัวขีดเส้นใต้ ได้ด้วยการใช้แท็กต่างๆ ดังนี้

<b>ตัวหนา</b>
<i>ตัวเอียง</i>
<u>ตัวขีดเส้นใต้</u>

การกำหนดให้ข้อความเคลื่อนไหว

การทำให้ข้อความเคลื่อนไหว ใช้คำสั่ง

ตัวเลือกได้แก่
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 ย่อมาจาก 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) โดยอาจจะใส่เป็นภาพที่แสดงลวดลาย หรือจะเป็นภาพทั่วไปก็ได้ โดยใช้คำสั่งดังนี้

ตัวอย่าง

Page updated

Report abuse