Download
1 / 37
370 likes | 521 Views
CHARPTER 2. การสร้างเว็บเพจและการจัดตำแหน่งข้อมูลวิธี การจัดตัวอักษร. วัตถุประสงค์การเรียนรู้. 1. การเปลี่ยนสีให้กับตัวอักษรและพื้นหลังเว็บไซด์และการเลือกค่าสี 2. การจัดตำแหน่งอักษรต่าง ๆได้แก่ ชิดด้านซ้าน,กลาง,ขวา เป็นต้น 3. การจัดตำแหน่งอักษรให้เหมาะสม. การใส่รูปภาพ. รูปแบบคำสั่ง.
E N D
CHARPTER 2 การสร้างเว็บเพจและการจัดตำแหน่งข้อมูลวิธี การจัดตัวอักษร
วัตถุประสงค์การเรียนรู้วัตถุประสงค์การเรียนรู้ 1. การเปลี่ยนสีให้กับตัวอักษรและพื้นหลังเว็บไซด์และการเลือกค่าสี 2. การจัดตำแหน่งอักษรต่าง ๆได้แก่ ชิดด้านซ้าน,กลาง,ขวา เป็นต้น 3. การจัดตำแหน่งอักษรให้เหมาะสม
การใส่รูปภาพ รูปแบบคำสั่ง <img scr=“ชื่อไฟล์รูปภาพ”> </img> ชื่อแท็ก imgชื่อแอตทริบิวต์ scrตำแหน่งที่ใช้ ระหว่าง <body>…..</body>ค่าที่กำหนดให้ พาธและชื่อไฟล์รูปภาพ โดยกำหนดเฉพาะชื่อไฟล์ หมายความว่า ไฟล์รูปภาพดังกล่าวเก็บใน Dictoryเดียวกันเท่านั้น
การใส่รูปภาพ TEST2_2.htm การใส่รูปภาพลงในเว็บเพจ <HTML> <HEAD> <TITLE>ทดสอบการสร้างเว็บเพจเบื้องต้น</TITLE> </HEAD> <BODY> <img src="picture/sju.jpg"></img> </BODY> </HTML>
การใส่รูปภาพ TEST2_3.htm การใส่รูปภาพลงในเว็บเพจและขยายขนาดภาพ <HTML> <HEAD> <TITLE>ทดสอบการสร้างเว็บเพจเบื้องต้น</TITLE> </HEAD> <BODY> <img src="picture/sju.jpg"width="400" height="200"></img> </BODY> </HTML>
การเปลี่ยนสีพื้นหลังหรือใส่รูปภาพด้านหลังการเปลี่ยนสีพื้นหลังหรือใส่รูปภาพด้านหลัง การใส่สีพื้นหลัง BACKGROUND รูปแบบคำสั่ง <body bgcolor=“#FF00CC"></body> ชื่อแอตทริบิวต์ bgcolorตำแหน่งที่ใช้ ภายในแท็กเปิดของ <body>…..</body>ค่าที่กำหนดให้ ชื่อสีหรือค่าสี โดยตัวอย่างของชื่อสีคือ red, green, blue, pink ส่วนตัวอย่างของค่าสีก็เช่น FF00CC
การเปลี่ยนสีพื้นหลังหรือใส่รูปภาพด้านหลังการเปลี่ยนสีพื้นหลังหรือใส่รูปภาพด้านหลัง TEST2_4.htm การใส่สี Background พื้นหลัง <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย</TITLE> </HEAD> <BODY bgcolor="#FF00CC"></body> <IMG SRC="picture/sju.jpg" ></img> <p></p> มหาวิทยาลัยเซนต์จอห์น </BODY> </HTML>
การเปลี่ยนสีพื้นหลังหรือใส่รูปภาพด้านหลังการเปลี่ยนสีพื้นหลังหรือใส่รูปภาพด้านหลัง การใส่สีรูปภาพพื้นหลัง BACKGROUND รูปแบบคำสั่ง <body background=“ชื่อไฟล์รูปภาพ”></body> ชื่อแอตทริบิวต์ backgroundตำแหน่งที่ใช้ ภายในแท็กเปิดของ <body>…..</body>ค่าที่กำหนดให้ พาธและชื่อไฟล์รูปภาพ โดยการกำหนดเฉพาะชื่อไฟล์ก็ หมายความว่าไฟล์รูปภาพดังกล่าวเก็บอยู่ใน Directory เดียวกับไฟล์ที่เก็บลงในเว็บเพจนั้น
การเปลี่ยนสีพื้นหลังหรือใส่รูปภาพด้านหลังการเปลี่ยนสีพื้นหลังหรือใส่รูปภาพด้านหลัง TEST2_5.htm การใส่ Picture Background พื้นหลัง <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย</TITLE> </HEAD> <BODY background="picture/bg3.gif" > <IMG SRC="picture/sju.jpg" ></img> <p></p> มหาวิทยาลัยเซนต์จอห์น </BODY> </HTML>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ การจัดข้อความอยู่กึ่งกลางหน้า รูปแบบคำสั่ง <body > <center> ข้อมูลที่ต้องการจัดตำแหน่ง </center> </body> ชื่อแท็ก CENTERตำแหน่งที่ใช้ ระหว่าง <body>…..</body>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ TEST2_6.htm การจัดข้อความอยู่กึ่งกลาง <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย</TITLE> </HEAD> <BODY background="picture/bg3.gif" > <p></p> <CENTER>มหาวิทยาลัยเซนต์จอห์น</CENTER> </BODY> </HTML>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ TEST2_7.htm การจัดรูปภาพอยู่กึ่งกลาง <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย</TITLE> </HEAD> <CENTER><img src="picture/sju.jpg"></img></CENTER> <p></p> ประโยคที่ต่อจากการจัดวางโดยใช้แท็ก center จะถูกจัดวางบรรทัดใหม่โดยอัตโนมัติ </BODY> </HTML>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ คำสั่งให้บราเซอร์ตัดข้อมูลขึ้นบรรทัดใหม่ รูปแบบคำสั่ง <body > <br> ข้อมูลที่ต้องการจัดตำแหน่ง </br> </body> ชื่อแท็ก brตำแหน่งที่ใช้ ระหว่าง <body>…..</body>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ TEST2_8.htm คำสั่งให้บราวเซอร์ตัดข้อมูลขึ้นบรรทัดใหม่ <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย</TITLE> </HEAD> <img src="picture/sju.jpg"></img> <p></p> ประโยคที่ต่อจากการจัดวางโดยใช้แท็ก center จะถูกจัดวางบรรทัดใหม่โดยอัตโนมัติ <br>เนื่องจากมีการกำหนดให้ขึ้นบรรทัดใหม่ ประโยคนี้จึงถูกจัดวาง คนละบรรทัดกับประโยคที่ 2 </BODY> </HTML>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ คำสั่งไม่ให้บราเซอร์ตัดข้อมูลขึ้นบรรทัดใหม่ รูปแบบคำสั่ง <body > <nobr> ไม่ต้องการให้ขึ้นบรรทัดใหม่ </body> ชื่อแท็ก nobrตำแหน่งที่ใช้ ระหว่าง <body>…..</body>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ TEST2_9.htm คำสั่งไม่ให้บราวเซอร์ตัดข้อมูลขึ้นบรรทัดใหม่ <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > หมู่เกาะสุรินทร์<br> ที่ตั้ง หมู่เกาะทะเลกลางทะเลอันดามัน เขตจังหวัดพังงาภายใต้ประเทศไทย<br> จุดเด่น : มีแนวปะการังน้ำตื้นที่อุดสมบูรณ์และสวยงามมากแห่งหนึ่ง เหมาะ เป็นแหล่งดำน้ำดูปะการัง มีสาหร่าย<nobr>ชนิดต่าง ๆ เช่น ดอกไม้ทะเล กัลปังหา และฝูงปลาหลากหลายชนิด </BODY> </HTML>
ก่อนใช้คำสั่ง <nobr> หลังใช้คำสั่ง <nobr>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ คำสั่งกำหนดจุดบราเซอร์ตัดข้อมูลขึ้นบรรทัดใหม่ รูปแบบคำสั่ง <body > <wbr> คำ<wbr> หรือ<wbr> ประโยค </body> ชื่อแท็ก wbrตำแหน่งที่ใช้ ระหว่าง <body>…..</body>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ คำสั่ง คั่นเส้นแนวนอน รูปแบบคำสั่ง <body > มหาวิทยาลัยเซนต์จอห์น มีจำนวนนักศึกษา ทั้งหมด 2,000 คน ประกอบด้วย 5 คณะ <hr> </body> ชื่อแท็ก hrตำแหน่งที่ใช้ ระหว่าง <body>…..</body>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ TEST2_10.htm คำสั่งคั่นเส้นแนวนอน <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > มหาวิทยาลัยเซนต์จอห์น มีจำนวนนักศึกษา ทั้งหมด 2,000 คน ประกอบด้วย 5 คณะ <hr> </BODY> </HTML>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ คำสั่ง คั่นเส้นแนวนอนแต่ปรับขนาดเส้นและความยาว รูปแบบคำสั่ง <body > มหาวิทยาลัยเซนต์จอห์น มีจำนวนนักศึกษา ทั้งหมด 2,000 คน ประกอบด้วย 5 คณะ <hr width=“250” size=“7”> </body> ชื่อแอตทริบิวต์ size,widthชื่อแท็ก <hr width=“250” size=“7”>ตำแหน่งที่ใช้ ระหว่าง <body>…..</body>ภายใต้แท็ก hrค่าที่กำหนด ขนาดของเส้นแนวนอนมีหน่วยพิกเซล
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ TEST2_11.htm คำสั่งคั่นเส้นแนวนอนที่กำหนดขนาดความกว้างและ ขนาดเส้น <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > มหาวิทยาลัยเซนต์จอห์น มีจำนวนนักศึกษา ทั้งหมด 2,000 คน ประกอบด้วย 5 คณะ <hr width="250" size="5"> </BODY> </HTML>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ คำสั่ง ใส่สัญลักษณ์ กรณีมีหัวข้อย่อย รูปแบบคำสั่ง <body > <ol type=“a”> <li>รายการลำดับที่ 1 <li>รายการลำดับที่ 2 </ol> </body> ชื่อแอตทริบิวต์ typeตำแหน่งที่ใช้ ภายในแท็ก <ol>ค่าที่กำหนด 1,a,A,i,I โดย 1 เป็นค่าปกติ
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ TEST2_12.htm การใส่สัญลักษณ์หน้าตัวอักษรBullets <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > ภาษาอะไรที่ใช้สำหรับเขียนเว็บเพ <ol type="a"> <li>ภาษา HTML <li>ภาษา C <li>ภาษา C++ <li>ภาษา XML </ol> </BODY> </HTML>
การจัดตำแหน่งอักษรและภาพการจัดตำแหน่งอักษรและภาพ TEST2_13.htm การใส่สัญลักษณ์หน้าตัวอักษรBullets และสร้างข้อย่อย <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > <ol> <li>บทที่ 1 การเขียนภาษา HTML <ul type="circle"> <li>ภาษา C <li>ภาษา C++ </ul> <li>บทที่ 2 </ol> </BODY> </HTML>
การกำหนด Effectให้กับอักษร คำสั่ง กำหนด Effect ให้กับตัวอักษรกระพริบ รูปแบบคำสั่ง <body > <blink>ประโยคที่ต้องการให้กระพริบ</blink> </body> ชื่อแท็ก blinkตำแหน่งที่ใช้ ระหว่าง <body>…. </body>
การกำหนด Effectให้กับอักษร TEST2_13.htm การใส่ Effect ให้กับอักษรกระพริบ <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > <blink>มหาวิทยาลัยเซนต์จอห์น</blink> </BODY> </HTML>
การกำหนด Effectให้กับอักษร คำสั่ง กำหนด Effect ให้กับตัวอักษรเลื่อนขึ้น รูปแบบคำสั่ง <body > <marquee scrolldelay=“2000” direction=“up”>ประโยคที่ต้องการให้กระพริบ</marquee> </body> ชื่อแอตทริบิวต์ scrolldelay, directionตำแหน่งที่ใช้ ภายในแท็กเปิด <marquee>ค่าที่กำหนด กำหนดความเร็วในการเลื่อนเป็นหน่วยมิลลิวินาทีให้แอตทริ บิวต์ scrolldelay ส่วนทิศทางการเลื่อนที่กำหนดให้แอตทริ บิวต์ direction นั้นได้ คือ lift, right, up, down
การกำหนด Effectให้กับอักษร TEST2_14.htm การใส่ Effect ให้กับอักษรเลื่อนขึ้น <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > <marquee scrolldelay="300" direction="up">มหาวิทยาลัยเซนต์จอห์น </marquee> </BODY> </HTML>
การปรับขนาดให้อักษร คำสั่ง ปรับขนาดอักษร รูปแบบคำสั่ง <body > <font size=“5”>ตัวอักษร</font> </body> ชื่อแอตทริบิวต์sizeตำแหน่งที่ใช้ ภายในแท็กเปิด <font>ค่าที่กำหนด ขนาดตัวอักษรตั้งแต่ 1-7 หรือขนาดเปรียบเทียบจากปกติโดยใช้ + หรือ – เพื่อหมายถึงมาก หรือ น้อย กว่าขนาดตัวอักษรในขณะนั้น เช่น + 2 หมายถึง เพิ่มขนาดขึ้น อีก 2 ระดับ จากขนาดตัวอักษรใน ขณะนั้น
การปรับขนาดให้อักษร TEST2_15.htm การปรับขนาดตัวอักษรให้ใหญ่ขึ้น <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > <font size="5">มหาวิทยาลัยเซนต์จอห์น</font> <br>วิศวกรรมศาสตร์ สาขา เทคโนโลยีสารสนเทศ </BODY> </HTML>
การปรับขนาดให้อักษร คำสั่ง ปรับรูปแบบอักษรต่าง ๆ รูปแบบคำสั่ง <body > <b>ตัวหนา</b> <i>ตัวเอียง</i> <u>ตัวขีดเส้นใต้</u> </body> ชื่อแอตทริบิวต์sizeตำแหน่งที่ใช้ ภายในแท็กเปิด <body>
การปรับขนาดให้อักษร TEST2_17.htm การปรับรูปแบบตัวอักษร <HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > <font size="5"><B>มหาวิทยาลัยเซนต์จอห์น</B></font> <p> <font size="5"><I>มหาวิทยาลัยเซนต์จอห์น</I></font> <p> <font size="5"><U>มหาวิทยาลัยเซนต์จอห์น</U></font> </BODY> </HTML>
การปรับขนาดให้อักษร คำสั่ง ปรับสีตัวอักษรต่างบางกลุ่ม ๆ รูปแบบคำสั่ง <body > <FONT SIZE="5" COLOR="#FFFF00">ตัวอักษร</FONT> </body> ชื่อแอตทริบิวต์colorตำแหน่งที่ใช้ ภายในแท็กเปิด <font>ค่าที่กำหนดให้ เป็นสี red, green, blue, pink ตัวอย่างสี #FFFF00
<HTML> <HEAD> <TITLE> ทดสอบการสร้างเว็บเพจอย่างง่าย </TITLE> </HEAD> <BODY > <FONT SIZE="5" COLOR="#FFFF00">มหาวิทยาลัยเซนต์จอห์น </FONT> </BODY> </HTML>
สรุป 1. วิธีการเปลี่ยนสีให้กับตัวอักษรและพื้นหลังเว็บไซด์และการ เลือกค่าสี 2. วิธีการจัดตำแหน่งอักษรต่าง ๆได้แก่ ชิดด้านซ้าน,กลาง,ขวา เป็นต้น 3. วิธีการจัดตำแหน่งอักษรให้เหมาะสม
