คู่มอื การใช้โปรแกรมNotepad โครงสรา้ งภาษา HTML อยา่ งง่าย HTML คือภาษาประเภท Markup สาหรบั การการสรา้ งเว็บเพจ ตัวอยา่ งการเขยี นโค๊ด HTML <html> <body> <h1>ละครไทย</h1> <p>เรยา</p> </body> </html> ผลลัพธ์ทไี่ ด้คือ
วิธกี ารเขยี นภาษา HTML ปรแกรมทใ่ี ช้เขยี นคือ Notepad หรอื TextEdit นอกจากนย้ี งั มโี ปรแกรมตัวอ่ืนซงึ่ ทาใหเ้ ราสามารถสรา้ งเว็บเพจ จากภาษา HTML โดยไมต่ ้องมาน่ัง เขยี นโค๊ด HTML เอง เชน่ -Adobe Dreamweaver -Microsoft Expression Web -CoffeeCup HTML Editor วิธกี ารเขยี นภาษา HTML 1.เปิดโปรแกรม Notepad หรอื TextEdit Start> All Programs> Accessories> Notepad 2.พิมพโ์ ค๊ด HTML โดยยดึ รูปแบบโครงสรา้ งตาม โครงสรา้ งภาษา HTML 3. บันทึกโค๊ด HTML File> Save As> โดยบนั ทึกเป็นนามสกุล .html 4.รนั โค๊ด HTML โดย คลิกขวาทไี่ ฟล์ เลือก open with จากน้ัน ใหค้ ลิกเลือก Browser ทเ่ี ราต้องการรนั ไฟล์ เม่ือรนั แล้วจะได้ผลลัพธ์
ตัวอยา่ งการเขยี นภาษา HTML การทาขอ้ ความเปน็ ลิงค์ โค้ดสาหรบั สรา้ งลิงค์ และขอ้ ความ <!DOCTYPE html> <html> <body> <h1>หวั ขอ้ ใหญ่</h1> <h1>หวั ขอ้ ยอ่ ย1</h1> <h2>หวั ขอ้ ยอ่ ย2</h2> <h3>หวั ขอ้ ยอ่ ย3</h3> <p>ส่วนเน้ือหา</p> <p>เน้ือหาส่วนยอ่ ย</p> <a href=\"http://www.mindphp.com/\">ลิงค<์ /a> <img src=\"/w3schools.jpg\" width=\"104\" height=\"142\"> </body> </html> เม่ือรนั โค๊ดแล้วจะได้ผลลัพธ์ดังรูป
สว่ นประกอบสาคัญของภาษา HTML ภาษา HTML มโี ครงสรา้ งการเขยี น ทอี่ าศยั ตัวกากับ เรยี กว่า แท็ก (Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรอื วัตถุอ่ืนๆ ผา่ นโปรแกรม บราวเซอร์ (Browser) Tag Tag เป็นลักษณะเฉพาะของภาษา HTML ใชใ้ นการระบุรูปแบบคาส่งั หรอื การลงรหสั คาส่งั HTML ภายใน เคร่อื งหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบง่ ได้ 2 ลักษณะ คือ -Tag เดย่ี ว เป็น Tag ทไ่ี มต่ ้องมกี ารปิดรหสั เชน่ <P>, <HR> เปน็ ต้น -Tag เปิด/ปิด เปน็ Tag ทปี่ ระกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมเี คร่อื งหมาย slash (/) นาหน้าคาส่งั ใน Tag น้ันๆ เชน่ <B>?</B>, <P>?</P> เป็นต้น ตัวอยา่ ง Tag
Tag ขนึ ้ ต้น ความหมาย Tag จบ <p> เนือ้ เร่ือง ส่วนบรรยาย <a </p> href=\"/default.htm\"> ลิงค์ </a> <html> ขอบเขตเนือ้ หาทงั้ หมด จะอยู่ </html> <body> ในส่วนี ้จะสงั เกิดวา่ Tag นี ้เป็น Tag แรก และเป็น Tag สดุ ท้าย </body> เสมอ สว่ นเนือ้ หา ส่วนนีม้ กั อย่ถู ดั จาก Tag <html> ttributes Attribute เป็นสว่ นขยายใน tag ใชส้ าหรบั จัดรูปแบบเพิม่ เตมิ เช่น ขนาด สี ระยะห่าง เปน็ ต้น ค่าของ attribute จะอยูใ่ นเคร่อื งหมาย \"?\" เช่น align=\"center\">ข้อความในพารากราฟนจ้ี ัดวางอยูก่ ึ่งกลางหน้าจอ width=\"200\" color=\"red\" noshade> ใช้สรา้ งเสน้ ค่ันยาว 200 pixel สแี ดงทึบ โดยคาส่งั HTML แต่ละ คาส่งั จะมี Attribute แตกต่างกันไป และมจี านวนไมเ่ ท่ากัน การระบุ Attribute มากกว่า 1 Attribute ใหใ้ ช้ ชอ่ งว่างเป็นตัวค่ัน เชน่ Tag ควบคุมเกยี่ วกับรูปภาพ <IMG> มี Attributes ดังน้ี <IMG SRC=\"ชื่อไฟล.์ นามสกุล\" WIDTH=\"n\" HEIGHT=\"n\" ALT=\"text\" BORDER=\"n\">
โดย SRC เปน็ Attribute ควบคุมช่อื ไฟล์ภาพทจี่ ะนามาแสดงผล WIDTH เป็น Attribute ควบคมุ ความกว้างของภาพ HEIGHT เปน็ Attribute ควบคุมความสงู ของภาพ ALT เป็น Attribute ควบคุมคาอธิบายภาพ BORDER เป็น Attribute ควบคมุ ขนาดของเสน้ ขอบของภาพ ไฟล์เอกสาร HTML เป็นไฟล์ขอ้ ความรูปแบบหนึ่ง (Text File) ทเี่ ก็บชุดคาส่งั HTML ดังน้ัน การสรา้ งเอกสาร HTML จึงสามารถใช้ Text Editor ตัวใดก็ได้ เช่น NotePad หรอื TextEdit
HTML Heading Heading (คือการเน้นคาต่าง ๆ เชน่ การเน้นหวั เร่อื งเพ่อื ให้เป็นจุดสนใจของผชู้ ม เว็บเพจ) ก็เปน็ อกี สว่ นทม่ี คี วามสาคัญกับเอกสาร HTML โดยเราสามารถใช้ Tag เพ่ือทา heading ได้ <!DOCTYPE html> <<bh1ot.mdHly>>TML Heading หรือ ส่วนหวั เรื่อง ตวั อยา่ งเชน่ <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> ผลลัพธ์ทไ่ี ด้คือ ความสาคัญของ Heading เราควรจะใช้ HTML heading เพ่ือกาหนดหัวเร่อื งเพยี งอยา่ งเดยี ว อยา่ ใชใ้ นการสรา้ ง ข้อความหรอื เน้ือหาให้เปน็ ตัวใหญห่ รอื ตัวหนา เพราะว่า Search engines จะใช้ heading ของเราในการทาดัชนเี น้ือหา ของเว็บเพจของเรา
HTML images HTML images คือ การใสร่ ูปภาพในเอกสาร html 1.ใสร่ ูปภาพแบบปกติ ไมม่ กี ารกาหนดอะไร <img src=\"/ใส่ URL ของภาพ\" /> 2.ในกรณที ต่ี ้องการใสช่ ่อื ภาพ ซงึ่ อาจใชเ้ ป็นข้อความสารองในกรณที รี่ ูปภาพเกิดข้อผดิ พลาดไม่สามารถแสดงผลบน หน้าเว็บเพจได้ <img src=\"/url\" alt=\"ขอ้ ความอธิบายภาพสารอง\"/> 3.ใสข่ นาดของภาพ <img src=\"/URL ของภาพ\" alt=\"ขอ้ ความอธิบายภาพสารอง\" width=\"กรอกตวั เลขท่ีตอ้ งการ\" height=\"กรอกตวั เลขที่ตอ้ งการ\"/> โดยค่าตัวเลขทก่ี รอกมหี น่วยเปน็ pixels ตัวอยา่ ง <html> <body> <img border=\"0\" src=\"http://images.temppic.com/20-10- 2012 /images_vertis/1350706157_0.24874200.jpg\" alt=\"coala\" width=\"304\" height=\"228\"> </body> </html>
ผลัพธ์ทไ่ี ด้คือ ในการใสร่ ูปภาพในเอกสาร html นกี้ ารใสท่ อี่ ยู่ URL สาคัญมาก เพราะถ้าทอี่ ยูผ่ ดิ รูปจะไมแ่ สดง วิธกี ารหาทอ่ี ยู่ URL ของรูปภาพมี 2 วิธี ดังน้ี 1.การเอารูปจากเว็บไซต์ - เปิดเว็บไซต์น้ันขนึ้ มา หารูปทตี่ ้องการ - คลิกขวาทร่ี ูป เลือก view image info แล้ว copy ตัว URL ในสว่ น location ให้หมด - เม่อื ได้ URL ก็เอาไปใสใ่ นโค็ด html ได้เลย จะสงั เกตไุ ด้ว่า จะขนึ้ ด้วย http และจบด้วย นามสกลุ .jpg หรอื .gif 2.การเอารูปภาพจากคอมของเราเอง - หาเวปทใ่ี หบ้ รกิ ารอัพโหลดรูป เชน่ http://www.temppic.com - ทาการอัพโหลดรูป พอเสรจ็ แล้วเราจะได้ URL
HTML Iframes iframe คือแทก็ ท่ีใช้สาหรับดงึ หน้าเว็บทงั้ เว็บภายในซง่ึ เป็นเว็บของเราเอง และเว็บภายนอก หรือเว็บของคนอ่ืน โดยสามารถกาหนดได้ทงั้ ขนาดของกรอบท่ีจะแสดงว่า กว้าง / ยาวเทา่ ใหร่ ตวั อยา่ งการใช้งาน เชน่ ใช้ในการดงึ กรอบขา่ วสารจากเว็บอื่นๆมาแสดงที่เวบ็ ของตวั เอง การสร้าง iframe จะใช้โครงสร้าง <iframe src=\"/URL\"></iframe> ตวั อย่าง <html> <body> <iframe src=\"http://www.mindphp.com\"> </iframe> </body> </html> ผลลพั ธ์คือ
นอกจากนี้ แท็ก ifram ยงั สว่ นเพม่ิ เตืมอ่ืนอกี เชน่ 1. กาหนดความสงู และความกว้างของหน้าเว็บทเี่ ราดึงมาเเสดง height คือ ความสงู width คือ ความกว้าง มหี น่วยเปน็ pixel height=\"400\" width=\"500\" 2. ในสว่ นนคี้ ือกาหนดให้กรอบของเรามี scrollbar หรอื ไม่ โดยสามารถใสไ่ ด้ (auto | yes | no) scrolling=\"auto\" 3. กาหนดกรอบ frameborder=\"1\" 4. ระยะห่างจากขอบ มหี น่วยเป็น pixel marginheight=\" 10 px\" 5.สขี องเสน้ ขอบ กาหนดได้ท้ังแบบช่ือสี และรหสั สี bordercolor=\"yellow\" 6.จัดกลาง / ขวา / ซา้ ย align=\"left\"
ตัวอยา่ ง <html> <body> <iframe src=\"http://www.mindphp.com\"height=\"400“ width=\"500\"frameborder=\"0\"scrolling=\"auto\"align=\"right\"> </iframe> </body> </html> ผลลัพธ์คือ
ตัวอยา่ งรูปแบบในการสรา้ งเว็บโดย Notepad HTML
Search
Read the Text Version
- 1 - 13
Pages:
