1 / 30

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

Computer Programming 1 การเขียนโปรแกรมคอมพิวเตอร์ 1. โดย ส.อ. ประกาศิต วร นุช วิทยาลัยเฉลิม กาญจนา. ขอบเขต. HTML CSS. การเขียน Homepage ด้วย HTML. HTML ย่อมาจาก HyperText Markup Language

jaclyn
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Computer Programming 1การเขียนโปรแกรมคอมพิวเตอร์ 1 โดย ส.อ.ประกาศิต วรนุช วิทยาลัยเฉลิมกาญจนา

  2. ขอบเขต • HTML • CSS

  3. การเขียน Homepage ด้วย HTML HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง มีโครงสร้างการเขียนโดยใช้ แท็ก(Tag) ควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ ผ่านโปรแกรมเว็บเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุหรือควบคุมแสดงผล

  4. Application • Editer • Notepad • Editplus • Web Browser • Internet Explorer (IE) • FireFox • Google Chrome • Opera • Safari

  5. โครงสร้างภาษา HTML • รูปแบบโครงสร้าง HTML <html> <head> <title>…ส่วนที่แสดงขื่อหน้าหรือเรื่องบนไตเติ้ลบาร์…</title> </head> <body> …ส่วนที่จะแสดงผ่านหน้าจอ…… </body> </html>

  6. การบันทึก (Save) ไฟล์เอกสาร HTML • เลือก file • Save as • บันทึกเป็น XXXX.html หรือ XXXX.htm • Save

  7. การปรับแต่งเอกสาร HTML • การใส่รูปแบบนั้นจะใส่เพิ่มในส่วนของแท็กเปิด ของแท็ก<body> เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก<body> • การใส่สีให้พื้นหลัง ใช้คำสั่ง <body bgcolor =“ชื่อสี”> , <body bgcolor =“#รหัสสี”> • การใส่ภาพให้พื้นหลัง ใช้คำสั่ง <body background =“ชื่อภาพ”>

  8. การกำหนดลักษณะข้อความในเอกสารการกำหนดลักษณะข้อความในเอกสาร • การกำหนดลักษณะข้อความ จะใส่เพิ่มในส่วนของแท็กเปิด ของแท็ก<font> เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก<font> • การกำหนดรูปแบบตัวอักษร ใช้คำสั่ง <font face = "MS Sans Serif"> ข้อความนี้กำหนดฟอนต์แบบ MS Sans Serif </font> • การกำหนดขนาดตัวอักษร ใช้คำสั่ง <font size = "2"> ข้อความนี้กำหนดขนาดเท่ากับ 2</font> • การกำหนดสีตัวอักษร ใช้คำสั่ง <font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br><font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> <br>

  9. การเว้นวรรค • คำสั่งที่ใช้ &nbsp; แทน 1 วรรค

  10. การขึ้นบรรทัดใหม่ • การขึ้นบรรทัดใหม่มี 2 ลักษณะ 1. การขึ้นบรรทัดใหม่ในย่อหน้าเดียวกัน (ช่องไฟระหว่างบรรทัดปกติ) ใช้คำสั่ง <br> ปิดท้ายบรรทัด เพื่อเป็นการแสดงการจบบรรทัดของย่อหน้านี้ 2. การขึ้นบรรทัดย่อหน้า(ช่องไฟระหว่างบรรทัด 1.5 ) ใช้คำสั่ง <p>…….text……. </p>

  11. การจัดรูปแบบตัวอักษร • การกำหนดแบบตัวหนา (Bold) ใช้คำสั่ง <b>หรือ<strong> <b><font size = "2"> ข้อความนี้กำหนดตัวหนา b</font></b><br> • การกำหนดแบบตัวเอียง (Italic) ใช้คำสั่ง <i><font size = "2"> ข้อความนี้กำหนดตัวเอียง i </font></i><br> • การกำหนดแบบตัวขีดเส้นใต้ (Underline) ใช้คำสั่ง <u><font size = "2"> ข้อความนี้กำหนดตัวขีดเส้นใต้ u </font></u><br> • การกำหนดแบบตัวขีดฆ่า (Strike) ใช้คำสั่ง <strike><font size = "2"> ข้อความนี้กำหนดตัวขีดฆ่า strike </font></strike><br>

  12. การจัดตำแหน่งข้อความ • การกำหนดให้อยู่ตำแหน่งกึ่งกลาง ใช้คำสั่ง <center>…ข้อความ…</center> • และการกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align ใช้คำสั่งดังนี้<p align = "ตำแหน่ง"> ...ข้อความ...</p> ตัวอย่าง <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br><p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br><p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br>

  13. การใส่รูปภาพ • การใส่รูปภาพ ใช้คำสั่ง <imgsrc =“ชื่อภาพ”> • ตัวอย่าง <imgsrc = "lilies.jpg">

  14. การใส่รูปภาพ • แท็กการใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้ไม่ว่าจะเป็นขนาดความกว้าง ความสูงของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูง ซึ่งหากไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้ • ความกว้าง width="ตัวเลขระบุความกว้าง"ความสูง height="ตัวเลขระบุความสูง" เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ“ตัวอย่าง <imgsrc = "lilies.jpg" width="200" height="150" border="1"> • จากตัวอย่าง จะแสดงภาพขนาด 200x150 px. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และมีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการให้ขอบมีความหนามาก ระบุตัวเลขให้มาก)

  15. การเชื่อมโยง (ลิงค์) • การเชื่อมโยงนี้ สามารถแบ่งได้ทั้ง 4 ประเภท คือ1. การเชื่อมโยงระหว่างเว็บเพจ<a href="ไฟล์เว็บเพจ”>...สิ่งที่จะลิงค์...</a> 2. การเชื่อมโยงนอกเว็บไซต์ <a href="URL">...สิ่งที่จะลิงค์...</a>3. การเชื่อมโยงภายในหน้าเว็บเพจ<a name="กำหนดชื่อปลายทาง”></a> และ <a href="#ชื่อปลายทาง”>..สิ่งที่จะลิงค์...</a>4. การเชื่อมโยงแบบอีเมล์ <a href="mailto: E-mail address ที่ต้องการส่งถึง”>..สิ่งที่จะลิงค์...</a>

  16. รูปแบบการเชื่อมโยง ต่อ-05/09/54 • รูปแบบการเชื่อมโยงระหว่างเว็บเพจ<a href="index.html">คลิ๊กที่นี้เพื่อกลับไปหน้าแรก</a><p> <!--ลิงค์โดยใช้ข้อความ -> <a href="index.html"><imgsrc="home.gif"></a> <!--ลิงค์โดยใช้รูปภาพ -> • รูปแบบการเชื่อมโยงนอกเว็บไซต์ <!--ลิงค์โดยใช้ข้อความ -><a href="http://www.xxx.com">ลิงค์มาที่เว็บไซต์ Nextstepdev.com</a><p><!--ลิงค์โดยใช้รูปภาพ -><a href="http://www.xxx.com"><img src="nextstpdev.gif"></a>

  17. การสร้างตาราง การสร้างตารางมี Tag ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้1. การสร้างตาราง <table> </table> 2. การสร้างแถวภายในตาราง <tr> </tr> แท็กนี้ต้องอยู่ภายในแท็ก <table> </table>3. การสร้างคอลัมน์ภายในแถวแต่ละแถว <td> </td> แท็กนี้ต้องอยู่ภายในแท็ก <tr> </tr>

  18. รูปแบบโครงสร้างตาราง <table> <tr> <td>...ข้อมูล....</td> </tr> </table> จากโครงสร้างจะเป็นการสร้างตารางแบบง่ายที่สุดคือ การสร้างตาราแบบ 1 แถว และ 1 คอลัมน์

  19. ตัวอย่างการสร้างตารางแบบ 2x3

  20. รูปแบบคำสั่งของโครงสร้างตาราง 2x3 • <table><!--เริ่มต้นแถวที่ 1 -> <tr> <td>...ข้อมูล....</td> <td>...ข้อมูล....</td> <td>...ข้อมูล....</td> </tr> <!--เริ่มต้นแถวที่ 2 -> <tr> <td>...ข้อมูล....</td> <td>...ข้อมูล....</td> <td>...ข้อมูล....</td> </tr> </table>

  21. การปรับแต่งตาราง • การใส่สีให้กรอบตาราง มีรูปแบบดังนี้ <table border="1" bordercolor="#FF0000" cellpadding="0" cellspacing="0" > <tr> <td>...ข้อมูล...</td> <td>...ข้อมูล...</td> </tr></table> • borderสำหรับกำหนดความหนาของกรอบตาราง • bordercolorสำหรับกำหนดสีของเส้นกรอบของตาราง • Cellspacingสำหรับกำหนดระยะห่างระหว่างเซลล์แต่ละเซลล์ • cellpaddingสำหรับกำหนดระยะห่างระหว่างขอบของเซลล์กับเนื้อหา

  22. การปรับแต่งตาราง • การใส่สีพื้นหลังให้กับตาราง มีรูปแบบดังนี้ <table bgcolor=“#0000ff” > <tr> <td>...ข้อมูล...</td> <td>...ข้อมูล...</td> </tr></table> • จากตัวอย่างเป็นการเพิ่ม attribute bgcolorสำหรับกำหนดสีพื้นหลังของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bgcolor = "green"> หรือ <table bgcolor = "#00ff00">

  23. การปรับแต่งตาราง • การใส่ภาพเป็นพื้นหลังให้กับตาราง มีรูปแบบดังนี้ <table background=“xxx.jpg”> <tr> <td>...ข้อมูล...</td> <td>...ข้อมูล...</td> </tr></table> • จากตัวอย่างเป็นการเพิ่ม attribute backgroundสำหรับกำหนดใส่รูปให้กับพื้นหลังของตาราง โดยมีรูปแบบดังนี้ <table backgound = "ชื่อรูป"> สำหรับการนำรูปมาใช้สามารถใช้ได้กับสกุล .gif .jpg .pngเป็นต้น

  24. การปรับแต่งตาราง • การปรับขนาดของตาราง มีรูปแบบดังนี้ <table width=“300” height=“500”> <tr> <td>...ข้อมูล...</td> <td>...ข้อมูล...</td> </tr></table> • จากตัวอย่างเป็นการเพิ่ม attribute widthและ height ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้ widthสำหรับกำหนดความกว้างของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table width = "150"> หรือ <table width = "50%"> heightสำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table hight = "150"> หรือ <table hight = "10%">

  25. การปรับแต่งตาราง • การปรับเปลี่ยนขนาดของคอลัมน์ มีรูปแบบดังนี้ <table border="1" cellpadding="0" cellspacing="0“ width=“400” hight=“200” > <tr> <td width=“20%”>...ข้อมูล...</td> <td width=“80%”>...ข้อมูล...</td> </tr></table> จากตัวอย่าง เป็นการกำหนดขนาดของความกว้างของคอลัมน์ จากตัวอย่างเป็นการกำหนดโดยใช้รูปแบบกำหนดเป็น % ซึ่งนอกจากยังสามารถกำหนดเป็นหน่วย Pixel ก็ได้เช่นกัน จากตัวอย่างนี้ การกำหนดความกว้างของคอลัมน์เป็น % จะเป็นการคำนวณจากค่าความกว้างทั้งหมดของตาราง โดย คอลัมน์แรกมีความกว้าง 20% ของความกว้างของตารางทั้งหมดที่ 400Pixel และส่วนคอลัมน์ที่ 2 มีความกว้าง 80 % ของพื้นที่ 400Pixel

  26. การปรับแต่งตาราง • การผสานเซลล์ในตาราง สามารถทำได้ 2 ลักษณะ คือ 1. การรวมแถวเข้าด้วยกันโดยใช้ Atrtibuterowspan = "จำนวนแถวที่รวมเซลล์“ 2. การรวมคอลัมน์เข้าด้วยกันโดยใช้ Attribute colspan = "จำนวนคอลัมน์ที่รวมเซลล์”

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

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

  29. การปรับแต่งตาราง • การจัดวางตำแหน่งของตาราง ในการสร้างตารางสามารถกำหนดการจัดวางตำแหน่งของตารางบนหน้าจอ โดยสามารถกำหนดเป็น left (ชิดซ้าย) right (ชิดขวา) และ center (ตำแหน่งกึ่งกลาง) โดยมีรูปแบบดังนี้ <table align = "left"> หรือ <table align = "right"> หรือ <table align = "center"> รูปแบบการเขียนโค้ดมีดังนี้ <table align="center" border="1" cellpadding="0" cellspacing="0"> <tr> <td>...ข้อมูล...</td> <td>...ข้อมูล...</td> </tr></table>

  30. คำถาม ?

More Related