Computer Programming 1 การเขียนโปรแกรมคอมพิวเตอร์ 1

Computer Programming 1 การเขี�ยนโปรแกรมคอมพิ�วเตอร� 1

โดยส.อ. ประกาศิ�ต วรน�ช

ว�ทยาลั�ยเฉลั�มกาญจนา

ขีอบเขีต• HTML• CSS

การเขี�ยน Homepage ด!วย HTML

HTML ย"อมาจาก HyperText Markup Language

เป#นภาษาคอมพิ�วเตอร�ร&ปแบบหน()ง ม�โครงสร!าง การเขี�ยนโดยใช! แท,ก (Tag) ควบค�มการแสดงผลัขีอง

ขี!อความ ร&ปภาพิ หร.อว�ตถุ�อ.)น ๆ ผ"านโปรแกรมเว,บเบรา เซอร� แต"ลัะ Tag อาจจะม�ส"วนขียายท�)เร�ยกว"า Attribute

ส2าหร�บระบ�หร.อควบค�มแสดงผลั

Application

• Editer– Notepad– Editplus

• Web Browser– Internet Explorer (IE)– FireFox– Google Chrome– Opera– Safari

โครงสร!างภาษา HTML• ร&ปแบบโครงสร!าง HTML <html><head><title>…ส"วนท�)แสดงขี.)อหน!าหร.อเร.)องบนไตเต�4

…ลับาร� </title></head>

<body>… ……ส"วนท�)จะแสดงผ"านหน!าจอ</body>

</html>

การบ�นท(ก (Save) ไฟลั�เอกสาร HTML

• เลั.อก file• Save as • บ�นท(กเป#น XXXX.html หร.อ XXXX.htm• Save

การปร�บแต"งเอกสาร HTML

• การใส"ร&ปแบบน�4นจะใส"เพิ�)มในส"วนขีองแท,กเป6ด ขีองแท,ก<body> เพิราะค2าส�)งน�4เป#นส"วนขียายท�)เร�ยกว"า Attribute

ขีองแท,ก <body>• การใส"ส�ให!พิ.4นหลั�ง

ใช!ค2าส�)ง <body bgcolor =“ ”ช.)อส� > , <body bgcolor =“# ”รห�สส� > • การใส"ภาพิให!พิ.4นหลั�ง

ใช!ค2าส�)ง <body background =“ ”ช.)อภาพิ >

การก2าหนดลั�กษณะขี!อความในเอกสาร

• การก2าหนดลั�กษณะขี!อความ จะใส"เพิ�)มในส"วนขีอง แท,กเป6ด ขีองแท,ก <font> เพิราะค2าส�)งน�4เป#นส"วน

ขียายท�)เร�ยกว"า Attribute ขีองแท,ก <font>• การก2าหนดร&ปแบบต�วอ�กษร ใช!ค2าส�)ง

<font face = "MS Sans Serif"> ขี!อความน�4ก2าหนดฟอนต�แบบ MS Sans Serif </font>

• การก2าหนดขีนาดต�วอ�กษร ใช!ค2าส�)ง<font size = "2"> ขี!อความน�4ก2าหนดขีนาดเท"าก�บ 2</font>

• การก2าหนดส�ต�วอ�กษร ใช!ค2าส�)ง<font color = "red"> ขี!อความน�4ก2าหนดให!เป#นส�แดง</font> <br><font color = "#0000ff"> ขี!อความน�4ก2าหนดให!เป#นส�น24าเง�น </font> <br>

การเว!นวรรค• ค2าส�)งท�)ใช!

แทน 1 วรรค

การขี(4นบรรท�ดใหม"• การขี(4นบรรท�ดใหม"ม� 2 ลั�กษณะ

1. การขี(4นบรรท�ดใหม"ในย"อหน!าเด�ยวก�น (ช"องไฟระหว"างบรรท�ดปกต�) ใช!ค2าส�)ง <br> ป6ดท!าย

บรรท�ด เพิ.)อเป#นการแสดงการจบบรรท�ดขีองย"อหน!าน�42. การขี(4นบรรท�ดย"อหน!า ( ช"องไฟระหว"างบรรท�ด1.5 ) ใช!ค2าส�)ง

<p>…….text……. </p>

การจ�ดร&ปแบบต�วอ�กษร• การก2าหนดแบบต�วหนา (Bold) ใช!ค2าส�)ง

<b>หร.อ<strong><b><font size = "2"> ขี!อความน�4ก2าหนดต�วหนาb</font></b><br>

• การก2าหนดแบบต�วเอ�ยง (Italic) ใช!ค2าส�)ง<i><font size = "2"> ขี!อความน�4ก2าหนดต�วเอ�ยง i </font></i><br>

• การก2าหนดแบบต�วขี�ดเส!นใต! (Underline) ใช!ค2าส�)ง<u><font size = "2"> ขี!อความน�4ก2าหนดต�วขี�ดเส!นใต! u </font></u><br>

• การก2าหนดแบบต�วขี�ดฆ่"า (Strike) ใช!ค2าส�)ง <strike><font size = "2"> ขี!อความน�4ก2าหนดต�วขี�ดฆ่"า strike

</font></strike><br>

การจ�ดต2าแหน"งขี!อความ• การก2าหนดให!อย&"ต2าแหน"งก()งกลัาง ใช!ค2าส�)ง <center>… …ขี!อความ </center>• แลัะการก2าหนดต2าแหน"งโดยใช! Attribute ขีอง

แท,ก <p> โดยใช! Attribute align ใช!ค2าส�)งด�งน�4<p align = "ต2าแหน"ง"> ...ขี!อความ...</p>ตั�วอย่�าง<p align = "left"><font size = "2"> ขี!อความช�ดซ!าย </font></p><br><p align = "center"><font size = "2"> ขี!อความน�4อย&"ก()งกลัาง </font></p><br><p align = "right"><font size = "2"> ขี!อความน�4ช�ดขีวา </font></p><br>

การใส"ร&ปภาพิ• การใส"ร&ปภาพิ ใช!ค2าส�)ง

<img src =“ ”ช.)อภาพิ >• ต�วอย"าง

<img src = "lilies.jpg">

การใส"ร&ปภาพิ• แท,กการใส"ร&ปภาพิ สามารถุม� Attribute ก2าก�บเพิ�)มเต�มได!ไม"ว"าจะ

เป#นขีนาดความกว!าง ความส&งขีองร&ปภาพิว"าเราต!องการให!แสดง ขีนาดกว!างแลัะส&ง ซ()งหากไม"ได!ระบ�ภาพิจะม�ขีนาดเท"าขีนาดขีอง

ภาพิต!นฉบ�บ นอกจากน�4เราย�งสามารถุใส"ขีอบขีองภาพิได!ด!วย ซ()งAttribute ม�ด�งน�4

• ความกว!าง width="ต�วเลัขีระบ�ความกว!าง" ความส&ง height="ต�วเลัขีระบ�ความส&ง" เส!นขีอบ border=" “ต�วเลัขีระบ�ความหนาขีองเส!นขีอบ ต�วอย"าง

<img src = "lilies.jpg" width="200" height="150" border="1">

• จากต�วอย"าง จะแสดงภาพิขีนาด 200x150 px. (หน"วยการแสดงผลั ภาพิ แสดงเป#น Pixels) แลัะม�ขีอบ หากไม"ต!องการให!แสดงเส!นขีอบ

ให!ก2าหนด border="0" ( หากต!องการให!ขีอบม�ความหนามาก ระบ�ต�วเลัขีให!มาก)

การเช.)อมโยง (ลั�งค�)• การเช.)อมโยงน�4 สามารถุแบ"งได!ท�4ง 4 ประเภท ค.อ

1. การเช.)อมโยงระหว"างเว,บเพิจ <a href=" ”ไฟลั�เว,บเพิจ >...ส�)งท�)จะลั�งค�...</a> 2. การเช.)อมโยงนอกเว,บไซต � <a href="URL">...ส�)งท�)จะลั�งค�...</a>3. การเช.)อมโยงภายในหน!าเว,บเพิจ <a name="ก2าหนดช.)อ

”ปลัายทาง ></a> แลัะ <a href="# ”ช.)อปลัายทาง >..ส�)งท�)จะลั�งค�...</a>

4. การเช.)อมโยงแบบอ�เมลั �<a href="mailto: E-mail address ”ท�)ต!องการส"งถุ(ง >..ส�)งท�)จะลั�งค�...</a>

ร&ปแบบการเช.)อมโยง ต"อ-05/09/54

• ร&ปแบบการเช.)อมโยงระหว"างเว,บเพิจ<a href="index.html">คลั�9กท�)น�4เพิ.)อกลั�บไปหน!าแรก</a><p> <!--ลั�งค�โดยใช!

ขี!อความ -> <a href="index.html"><img src="home.gif"></a> <!-- ลั�งค�โดยใช!ร&ปภาพิ ->

• ร&ปแบบการเช.)อมโยงนอกเว,บไซต�<!--ลั�งค�โดยใช!ขี!อความ -><a href="http://www.xxx.com"> ลั�งค�มาท�)เว,บไซต�Nextstepdev.com</a><p><!--ลั�งค�โดยใช!ร&ปภาพิ -><a href="http://www.xxx.com"><img src="nextstpdev.gif"></a>

การสร!างตาราง การสร!างตารางม� Tag ท�)ใช!ส2าหร�บสร!างตารางใน

ภาษา html ด�งน�4

1. การสร!างตาราง <table> </table> 2. การสร!างแถุวภายในตาราง <tr> </tr> แท,กน�4

ต!องอย&"ภายในแท,ก <table> </table>3. การสร!างคอลั�มน�ภายในแถุวแต"ลัะแถุว <td> </td> แท,กน�4ต!องอย&"ภายในแท,ก <tr> </tr>

ร&ปแบบโครงสร!างตาราง<table>

<tr><td>...ขี!อม&ลั....</td>

</tr> </table>

จากโครงสร!างจะเป#นการสร!างตารางแบบง"ายท�)ส�ด ค.อ การสร!างตาราแบบ 1 แถุว แลัะ 1 คอลั�มน�

ต�วอย"างการสร!างตารางแบบ 2x3

ร&ปแบบค2าส�)งขีองโครงสร!างตาราง2x3

• <table><!-- เร�)มต!นแถุวท�) 1 ->

<tr><td>...ขี!อม&ลั....</td><td>...ขี!อม&ลั....</td><td>...ขี!อม&ลั....</td>

</tr> <!-- เร�)มต!นแถุวท�) 2 ->

<tr><td>...ขี!อม&ลั....</td><td>...ขี!อม&ลั....</td><td>...ขี!อม&ลั....</td>

</tr> </table>

การปร�บแต"งตาราง• การใส"ส�ให!กรอบตาราง ม�ร&ปแบบด�งน�4

<table border="1" bordercolor="#FF0000" cellpadding="0" cellspacing="0" ><tr>

<td>...ขี!อม&ลั...</td><td>...ขี!อม&ลั...</td>

</tr></table>

• border ส2าหร�บก2าหนดความหนาขีองกรอบตาราง• bordercolor ส2าหร�บก2าหนดส�ขีองเส!นกรอบขีองตาราง• Cellspacing ส2าหร�บก2าหนดระยะห"างระหว"างเซลัลั�แต"ลัะ

เซลัลั�• cellpadding ส2าหร�บก2าหนดระยะห"างระหว"างขีอบขีอง

เซลัลั�ก�บเน.4อหา

การปร�บแต"งตาราง• การใส"ส�พิ.4นหลั�งให!ก�บตาราง ม�ร&ปแบบด�งน�4

<table bgcolor=“#0000ff” ><tr>


</tr></table>

• จากต�วอย"างเป#นการเพิ�)ม attribute bgcolor ส2าหร�บ ก2าหนดส�พิ.4นหลั�งขีองตาราง โดยใช!ร&ปแบบการก2าหนดช.)อ

ส� หร.อการก2าหนดแบบรห�สส� โดยม�ร&ปแบบด�งน�4 <table bgcolor = "green"> หร.อ <table bgcolor = "#00ff00">

การปร�บแต"งตาราง• การใส"ภาพิเป#นพิ.4นหลั�งให!ก�บตาราง ม�ร&ปแบบด�งน�4

<table background=“xxx.jpg”><tr>


</tr></table>

• จากต�วอย"างเป#นการเพิ�)ม attribute background ส2าหร�บก2าหนดใส" ร&ปให!ก�บพิ.4นหลั�งขีองตาราง โดยม�ร&ปแบบด�งน�4 <table backgound

= "ช.)อร&ป"> ส2าหร�บการน2าร&ปมาใช!สามารถุใช!ได!ก�บ สก�ลั .gif .jpg .png เป#นต!น

การปร�บแต"งตาราง• การปร�บขีนาดขีองตาราง ม�ร&ปแบบด�งน�4

<table width=“300” height=“500”><tr>


</tr></table>

• จากต�วอย"างเป#นการเพิ�)ม attribute width แลัะ height ซ()งแต"ลัะ attribute ม� ค�ณสมบ�ต�ด�งน�4 width ส2าหร�บก2าหนดความกว!างขีองตาราง โดยสามารถุก2าหนด

เป#นหน"วยขีอง Pixel หร.อเป#นเปอร�เซ,นต�ได! โดยม�ร&ปแบบด�งน�4 <table width = "150"> หร.อ <table width = "50%"> height ส2าหร�บก2าหนดความส&งขีองตาราง โดยสามารถุก2าหนดเป#นหน"วยขีองPixel หร.อเป#นเปอร�เซ,นต�ได! โดยม�ร&ปแบบด�งน�4 <table hight = "150"> หร.อ<table hight = "10%">

การปร�บแต"งตาราง• การปร�บเปลั�)ยนขีนาดขีองคอลั�มน� ม�ร&ปแบบด�งน�4

<table border="1" cellpadding="0" cellspacing="0“ width=“400” hight=“200” ><tr>

<td width=“20%”>...ขี!อม&ลั...</td><td width=“80%”>...ขี!อม&ลั...</td>

</tr></table>

จากต�วอย"าง เป#นการก2าหนดขีนาดขีองความกว!างขีองคอลั�มน� จากต�วอย"างเป#นการก2าหนดโดยใช!ร&ปแบบก2าหนดเป#น % ซ()ง

นอกจากย�งสามารถุก2าหนดเป#นหน"วย Pixel ก,ได!เช"นก�น จาก ต�วอย"างน�4 การก2าหนดความกว!างขีองคอลั�มน�เป#น % จะเป#นการ

ค2านวณจากค"าความกว!างท�4งหมดขีองตาราง โดย คอลั�มน�แรกม� ความกว!าง 20% ขีองความกว!างขีองตารางท�4งหมดท�) 400 Pixel

แลัะส"วนคอลั�มน�ท�) 2 ม�ความกว!าง 80 % ขีองพิ.4นท�) 400 Pixel

การปร�บแต"งตาราง• การผสานเซลัลั�ในตาราง สามารถุท2าได! 2 ลั�กษณะค.อ1. การรวมแถุวเขี!าด!วยก�นโดยใช! Atrtibute rowspan = " “จ2านวนแถุวท�)รวมเซลัลั�2. การรวมคอลั�มน�เขี!าด!วยก�นโดยใช! Attribute colspan = "จ2านวนคอลั�มน�ท�)รวม

”เซลัลั�

การปร�บแต"งตาราง• ตั�วอย่�างที่� 1 การรวมแถวเข้�าด้�วย่ก�นโด้ย่ใช้� Attibute rowspan สามารถเข้ย่นโค้�ด้ได้�ด้�งน��น <table border="1" cellpadding="0" cellspacing="0" width="200" height="30">

<tr> <td rowspan="2" >...ขี!อม&ลั...</td><td >...ขี!อม&ลั...</td>

</tr><tr>

<td >...ขี!อม&ลั...</td></tr>

</table>

การปร�บแต"งตาราง• ตั�วอย่�างที่� 2 การรวมแถวเข้�าด้�วย่ก�นโด้ย่ใช้� Attibute colspan สามารถเข้ย่นโค้�ด้ได้�ด้�งน��น <table border="1" cellpadding="0" cellspacing="0" width="200" height="30">

<tr> <td colspan="2" >...ขี!อม&ลั...</td><td >...ขี!อม&ลั...</td>

</tr><tr>

<td >...ขี!อม&ลั...</td></tr>

</table>

การปร�บแต"งตาราง• การจั�ด้วางตั�าแหน�งข้องตัาราง ในการสร!างตารางสามารถุ

ก2าหนดการจ�ดวางต2าแหน"งขีองตารางบนหน!าจอ โดยสามารถุ ก2าหนดเป#น left (ช�ดซ!าย) right (ช�ดขีวา) แลัะ center (ต2าแหน"ง

ก()งกลัาง) โดยม�ร&ปแบบด�งน�4 <table align = "left"> หร.อ<table align = "right"> หร.อ <table align = "center"> ร&ปแบบการ

เขี�ยนโค!ดม�ด�งน�4<table align="center" border="1" cellpadding="0" cellspacing="0">

<tr><td>...ขี!อม&ลั...</td><td>...ขี!อม&ลั...</td>

</tr></table>

ค2าถุาม?

Documents

Computer Programming 1 การเขียนโปรแกรมคอมพิวเตอร์ 1