sbeebird.blogspot.com: สิงหาคม 2013

วันพุธที่ 28 สิงหาคม พ.ศ. 2556

การแทรกรูปภาพ

Tag <img> เป็นแท็ก ที่ไว้ใช้สำหรับ การแท็กภาพมาไว้ในเว็บเพจ โดย tag<img> นี้จะมี Attribute หลักๆ คือ src

attribute src="ที่ตั้งรูปภาพ” โดยความสำคัญของ src คือเป็นการอ้างแหล่งที่อยู่ของรูปภาพ

รูปแบบคำสั่ง <img src="ชื่อรูปภาพ.jpg หรือ .gif">

การปรับขนาดของรูปภาพ

การปรับความกว้าง - Width การปรับความสูง - Height

รูปแบบคำสั่ง <img src="ชื่อรูปภาพ.jpg หรือ .gif" width= X height=Y >

ตัวอย่าง

<html>

<body>

</body>

</html>

ผลที่ได้

หมายเหตุ : กรณีที่ รูปภาพอยู่ที่เดียวกับที่เก็บไฟล์ HTML

-----------------------------------------------------------------------------------------

การจัดตำแหน่ง

สามารถใช้ Tag ได้ 2แบบ คือ P ALIGN หรือ CENTER

รูปแบบคำสั้ง <img src="ชื่อรูปภาพ.jpg หรือ .gif">

ตัวอย่าง

<html>

<body>

</body>

</html>

ผลที่ได้

-----------------------------------------------------------------------------------------

การแทรกรูปภาพจากเว็บอื่นๆ

รูปแบบคำสั่ง <img src="http://www.________.com/___.jpg หรือ อื่นๆ">

ตัวอย่าง

<html>

<body>

</body>

</html>

ผลที่ได้

-----------------------------------------------------------------------------------------

กรณีที่ รูปภาพอยู่คนละที่กับไฟล์เว็บเพจ

จะต้องใส่ Path ให้กับ Tag <img>

รูปแบบคำสั่ง <img src="ที่อยู่ไฟล์/ชื่อรูปภาพ.jpg หรือ .gif">

ตัวอย่าง

คำสั่ง คือ <img src="รูป/Turbo.jpg">

-----------------------------------------------------------------------------------------

อ้างอิง

http://sbeebird.blogspot.com (1/9/56)

http://www.sadung.com/?p=5850 (1/9/56)

วันพฤหัสบดีที่ 22 สิงหาคม พ.ศ. 2556

การแต่งตัวอักษร

การกำหนดแบบอักษร FONT ,ขนาด,สีตัวอักษร

รูปแบบคำสั่ง .....ข้อความ.....

FONT

กำหนดรูปแบบตามต้องการเช่น AngsanaUPC ,Cordia New,MS sans serif

รูปแบบคำสั่ง .....ข้อความ......

ตัวอย่าง

<html>

<body>

อักษรแบบ Ms sans serif

อักษรแบบ AngsanaUPC

อักษรแบบ Cordia New

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

ขนาด

รูปแบบคำสั่ง .....ข้อความ......

ตัวอย่าง

<html>

<body>

แสดงข้อความที่มีขนาด n=1 
แสดงข้อความที่มีขนาด n=2 
แสดงข้อความที่มีขนาด n=3 
แสดงข้อความที่มีขนาด n=4 
แสดงข้อความที่มีขนาด n=5 
แสดงข้อความที่มีขนาด n=6 
แสดงข้อความที่มีขนาด n=7 
แสดงข้อความที่มีขนาด n=8

</body>

</html>

หมายเหตุ : ขนาดใหญ่สุดคือ 7 ดูได้จากรูป

ผลที่ได้

----------------------------------------------------------------------------------------

สีตัวอักษร

รูปแบบคำสั่ง .....ข้อความ......

#รหัสสี

ตัวอย่าง

<html>

<body>

อักษรสีแดง 
 อักษรสีน้ำเงิน 
 อักษรสีฟ้า

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

ตัวเอียง,ตัวหนา,ขีดเส้นใต้

รูปแบบคำสั่ง .....ข้อความ..... : คำสั่งตัวหนา

.....ข้อความ..... : คำสั่งตัวเอียง

.....ข้อความ..... : คำสั่งขีดเส้นใต้

ตัวอย่าง

<html>

<body>

ข้อความหนา

ข้อความเอียง

ข้อความขีดเส้นใต้

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

ตัวขีดฆ่า,ตัวยก,ตัวห้อย

รูปแบบคำสั่ง <s>.....ข้อความ.....</s> : ตัวขีดฆ่า

.....ข้อความ..... : ตัวยก

.....ข้อความ..... : ตัวห้อย

ตัวอย่าง

<html>

<body>

<s>.....ตัวขีดฆ่า.....</s>

ข้อความ.....ตัวยก.....

ข้อความ.....ตัวห้อย.....

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

ตัวอักษรวิ่ง

รูปแบบคำสั่ง <marquee>...</marquee>

<marquee direction="left">ขวาไปซ้าย</marquee>

<marquee direction="right">ซ้ายไปขวา</marquee>

<marquee direction="down">บนลงล่าง</marquee>

ตัวอย่าง

<html>

<body>

<marquee direction="left">ขวาไปซ้าย</marquee>

<marquee direction="right">ซ้ายไปขวา</marquee>

<marquee direction="down">บนลงล่าง</marquee>

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

ตัวอักษรกระพริบ

รูปแบบคำสั่ง <blink>.....ข้อความ.....</blink>

ตัวอย่าง

<html>

<body>

<blink>.....ข้อความ.....</blink>

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

ที่มา

http://skyfah024.blogspot.com/2012/07/blog-post.html (22/8/56)

http://it.e-tech.ac.th/sutin/index6.htm (22/8/56)