Please enable JavaScript.
Coggle requires JavaScript to display documents.
การจัดรูปแบบตัวอกัษรและรูปภาพ - Coggle Diagram
การจัดรูปแบบตัวอกัษรและรูปภาพ
การก าหนดหัวข้อเรื่อง
ใช้ในกรณีที่ตอ้งการให้ขอ้ มูลมีการแสดงหัวขอ้ หรือหัวเรื่องที่ตอ้งการให้มีความโดดเด่น
เห็นได้ชัดเจน ดูสวยงาม และน่าสนใจ โดยใช้แท็ก <Hn>
รูปแบบ
<Hn> ข้อความ </Hn>
ค าอธิบาย
<Hn>…</Hn> คา สั่งกา หนดหวัเรื่องกา หนดไดต้้งัแต่<H1> ถึง <H6> โดย
<H1> มีขนาดใหญ่ที่สุด และ<H6> มีขนาดเล็กที่สุด
ข้อความ ข้อความที่ต้องการแสดงเป็ นหัวเรื่องในเว็บเพจ
การกา หนดรูปแบบตัวอกัษร
การจดัรูปแบบตวัอกัษรในตา แหน่งแท็กเปิด <Body> เป็นตา แหน่งที่เมื่อใชค้า สั่งใดก็ตาม
ลงไปในตา แหน่งน้ี
รูปแบบ
<Body Text=“#รหสัค่าสีหรือชื่อสี”> ข้อความ </Body>
ค าอธิบาย
<Body>…</Body> คา สั่งที่มีผลต่อท้งัเวบ็ เพจ
Text แอททริบิวต์กา หนด สีตวัอกัษร
ชื่อสี ชื่อสีในภาษาองักฤษ เช่น Red, Green, Blue, White, Black
ข้อความ ข้อความที่ต้องการแสดง
รหสัค่าสี รหสัค่าสีเลขฐาน 16 เช่น #FF0000, #00FF00, #FFD765
การก าหนดลักษณะตัวอักษร
<B> ข้อความ </B> ตัวหนา
<I> ข้อความ </I> ตัวเอียง
<Em> ข้อความ </Em> ตัวเอียง
<U> ข้อความ </U> ตัวขีดเส้นใต้
<S> ข้อความ </S> ตัวขีดทับกลางตัวอักษร
<Strike> ข้อความ </Strike> ตัวขีดทับกลางตัวอักษร
<Sup> ข้อความ </Sup> ตวัยกข้ึน
<Sub> ข้อความ </Sub> ตัวห้อย
<Big> ข้อวาม </Big> ตวัอกัษรตวัใหญ่
<Small>ข้อความ </Small> ตัวอักษรตัวเล็ก
<TT> ข้อความ </TT> ตัวอักษรพิมพ์ดีด
การก าหนดตัวอักษรวิ่ง
เราสามารถทา ให้เอกสารเวบ็ เพจดูน่าสนใจข้ึนได้ดว้ยการกา หนดตวัอกั ษรวิ่ง เคลื่อนไหว
บนจอภาพได้ในหลายลักษณะ
รูปแบบ
<Marquee
Behavior=“รูปแบบการวงิ่ ” Direction=“ทิศทางการวงิ่ ”
Width=“ความกวา้งกรอบการวงิ่ ” Height=“ความสูงกรอบการวงิ่ ”
Hspace=“ระยะห่างของขอ้ความกบักรอบซา้ยขวา”
Vspace=“ระยะห่างของขอ้ความกบักรอบบนล่าง”
Loop=“จา นวนรอบการวงิ่ ”Scrollamount=“ความเร็วในการวงิ่ ”>
Bgcolor=“สีพ้ืนหลงัขอ้ความวงิ่ ”>ข้อความ </Marquee>
ค าอธิบาย
<Marquee>…</Marquee> คา สั่งกา หนดตวัอกัษรวงิ่
Behavior แอททริบิวต์กา หนดรูปแบบการวงิ่ กา หนดได้
3รูปแบบ คือ
Scroll วงิ่ หายไปจากขอบ แลว้วนซ้า เรื่อย ๆ
Slide วงิ่ แลว้หยดุ ที่ขอบ
Alternate วงิ่ ถึงขอบแลว้เดง้กลบัไปมา
ประเภทของภาพกราฟิ กที่ใช้ในการสร้างเว็บเพจ
เอกสารเว็บเพจ หรือแม้แต่เอกสารประเภทอื่น จะขาดรูปภาพไม่ไดเ้ลย เนื่องจากเป็ นการ
สื่อสารความหมายไดด้ีที่สุด มีความสวยงาม น่าสนใจ สามารถดึงดูดความสนใจของผูเ้ขา้ชมได้เป็ น
ประเภทของภาพกราฟิ กที่ใช้ในการสร้างเว็บเพจ
(ระยะห่างจากขอบที่เป็นพื ้นที่แสดงตัวอักษรวิ่ง)
(กรอบความกว้าง/สูงของตัวอักษรวิ่ง)
233
อย่างดี
การแทรกรูปภาพในเวบ็ เพจ
การแทรกรูป ด้วยแท็ก <Img> เป็ นการน ารูปภาพแทรกในเอกสารเว็บเพจ
รูปแบบ
<Img Src=“ชื่อแฟ้มข้อมูลรูปภาพ.นามสกุล”>
ค าอธิบาย
<Img> Image คา สั่งแทรกรูปภาพ
Src แอททริบิวต์แสดงแหล่งแฟ้มข้อมูลรูปภาพที่ต้องการแสดง (Source)
ระบุชื่อและนามสกุลของแฟ้มข้อมูลรูปภาพ เช่น Cat.GIF, Dog.JPG
การจัดวางรูปภาพกบั ข้อความในเวบ็ เพจ
การจัดวางรูปภาพท าให้งานเว็บเพจ ดูลงตวัและเหมาะสมมากยิ่งข้ึน
รูปแบบ
<Img Src=“ชื่อแฟ้มข้อมูลรูปภาพ.นามสกุล” Align=“ตา แหน่งการจดัวาง”>
ค าอธิบาย
Align แอททริบิวต์จดัวางตา แหน่งรูปภาพ ได้5 ตา แหน่ง ดงัน้ี
Left จัดวางรูปภาพไว้ด้านซ้ายของข้อความ
Right จัดวางรูปภาพไว้ด้านขวาของข้อความ
Top จัดวางข้อความไว้ด้านบนรูปภาพ
Bottom จดัวางขอ้ความไวด้า้นล่างรูปภาพ
Middle จัดวางข้อความไว้ตรงกลางรูปภาพ
การกา หนดขนาดรูปภาพในเวบ็ เพจ
การแทรกภาพที่มีขนาดใหญ่ เราสามารถปรับเปลี่ยนขนาดของรูปภาพให้เหมาะสมกับ
เอกสารได
รูปแบบ
<Img Src=“ชื่อแฟ้มข้อมูลรูปภาพ.นามสกุล” Width=“ค่าความกวา้ง”
Height=“ค่าความสูง”>
<Img Src=“ชื่อแฟ้มข้อมูลรูปภาพ.นามสกุล” Width=“ค่าความกวา้ง”
Height=“ค่าความสูง”>
ค าอธิบาย
Width แอททริบิวต์จดักา หนดความกวา้งของรูปภาพ กา หนดเป็นพิเซล หรือ
เปอร์เซ็นต์ของหน้าจอ
การกา หนดข้อความอธิบายรูปภาพ
หากต้องการให้ภาพมีความสมบูรณ์ในการน าเสนอควรมีการแสดงขอ้ความอธิบายอีกท้งั
ยงัสามารถช่วยให้ผูช้ มเวบ็ เพจ
รูปแบบ
<Img Src=“ชื่อแฟ้มข้อมูลรูปภาพ.นามสกุล” Alt=“ข้อความอธิบายภาพ”>
ค าอธิบาย
Alt แอททริบิวต์กา หนดขอ้ความอธิบายภาพ
การใส่กรอบรูปภาพ
เราสามารถทา ใหรู้ปภาพที่แทรกมีความโดดเด่นและสวยงามมากข้ึน ดว้ยการใส่กรอบภาพ
โดยการใช้แอททริบิวต์ Border
รูปแบบ
<Img Src=“ชื่อแฟ้มข้อมูลรูปภาพ.นามสกุล” Border=“ค่าความหนากรอบภาพ”>
ค าอธิบาย
Border แอททริบิวต์กา หนดกรอบภาพ ระบุเป็นตวัเลขหน่วยเป็นพิเซล
การกา หนดระยะห่างระหว่างข้อความกบัรูปภาพ
ในขณะแทรกรูปภาพและข้อความ ปกติจะแสดงอยู่ติดกัน เราสามารถจัดวางให้เกิด
ระยะห่างระหวา่ งขอ้ความและรูปภาพไดท้ ้งัในแนวต้งัและแนวนอน
รูปแบบ
<Img Src=“ชื่อแฟ้มข้อมูลรูปภาพ.นามสกุล” Hspace=“ค่าระยะห่างในแนวนอน”
Vspace=“ค่าระยะห่างในแนวต้งั”>
ค าอธิบาย
Hspace แอททริบิวต์ กา หนดค่าระยะห่างในแนวนอน
Vspace แอททริบิวต์กา หนดค่าระยะห่างในแนวต้ง
การกา หนดรูปภาพเป็นพืน้ หลง
การนา ภาพเป็นภาพพ้ืนหลงั จะตอ้งนา ภาพที่มีความเหมาะสมในเรื่องของสี และขนาดของ
ภาพ นนั่ คือหากภาพมีสีที่ฉูดฉาดมากเกินไปอาจกลมกลืนกบัขอ้ความดา้นบนทา ให้ไม่สวยงามและ
แยกแยะไม่ออก
รูปแบบ
<Body Background=“ชื่อแฟ้มข้อมูลรูปภาพ.นามสกุล”>
ค าอธิบาย
<Body>…</body> คา สั่งที่แสดงผลท้งัเวบ็ เพจ
Background แอททริบิวต์กา หนดภาพพ้ืนหลงั ระบุชื่อแฟ้มรูปภาพและ
นามสกุล