โครงสร้างพื้นฐาน HTML
HTML (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) คือภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) สำหรับภาษา SGML ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน
ใช้อะไรในการเขียน HTML
การสร้างไฟล์ HTML เราสามารถสร้างจาก Text Editor เช่นจาก Notepad หรือ Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่ " ชื่อไฟล์ . html " ซึ่งถ้าหากคุณไม่ใส่ " " จะ กลายเป็นไฟล์ .TXT แทน ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html เช่นโปรแกรม Macromedia Dreamweaver ปัจจุบันเวอร์ชั่น CS4 แล้ว มีความง่ายและสะดวกในการสร้าง html ขึ้นมา ด้วย Tool ต่าง ๆ ของโปรแกรมครับ
Text Editor
คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่างๆ ปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย
ในบทเรียนชุดนี้ จะใช้โปรแกรม Notepad ในการสร้างเว็บเพจด้วยภาษา HTML
การเขียน HTML
รูปแบบคำสั่ง <HEAD>..........</HEAD> คำสั่ง <HEAD> เป็นคำสั่งที่ใช้ในการกำหนดข้อความส่วนที่เป็นชื่อเรื่องซึ่งภายใต้ของคำสั่งนี้จะมีคำสั่งย่อย อีกคำสั่งหนึ่งคือ คำสั่ง <TITLE>........</TITLE>
รูปแบบคำสั่ง <TITLE>.........</TITLE>
คำสั่ง <TITLE>.....</TITLE> จะเป็นส่วนของการแสดงชื่อของเอกสาร จะปรากฎในขณะที่ไฟล์ HTML ทำงานการแสดงผลจะแสดงในส่วนของไตเติลบาร์ ( Title Bar )
ส่วนโครงสร้างภายในจะประกอบด้วยส่วนหลักๆดังนี้
Headers <h1>,<h2>
Paragraph <p>
Lists <ul><li>,<ol><li>,<dl><dt><dd>
Tables <table>
Media เช่น images <img src=”"? alt=”">
Links <a href=”"? title=”">
Form <form>
Header
คือหัวข้อเรื่องเพื่อบ่งบอกว่า หน้า page นั้น เกี่ยวกับเรื่องอะไร ลำดับความสำคัญสูงสุด คือ <h1> เราควรจะมี <h1> เพียงอันเดียว ต่อ 1 หน้า ส่วน <h2> <h3> มีได้หลายๆอัน เลือกใช้ตามลำดับความสำคัญของหัวเรื่อง
*** ไม่ควรใช้ เกินกว่า <h6>
Paragraph
ใช้ <p> ครอบส่วนที่เป็นเนื้อหา text ไม่ควรมีสิ่งที่เป็นบล็อกอยู่ภายใน เช่น table, div, header และควรรปิดแท็ก </p> เสมอ
List
ใช้ในลักษณะที่มี text เป็นข้อๆ เช่น ส่วนเมนู เนวิเกชั่น ต่างๆ มี 3 รูปแบบให้เลือกใช้Unorder list <ul><li></li></ul>
Order list <ol><li></li></ol>
Definition list <dl><dt></dt><dd></dd></dl>
Table
อย่ารู้สึกผิดครับ เมื่อจะใช้ table มันไม่ใช่ของต้องห้ามสำหรับ css และ เราก็จะไม่เถียงกันว่าอันไหนดีกว่ากันระหว่างเว็บใช้ div กับเว็บใช้ table เพียงแต่เราคือ webdesign ที่นอกจากจะดีไซน์ หน้าตาให้ถูกใจผู้ชมแล้ว เรายังดีไซน์โค้ดได้ถูกต้อง เบราเซอร์ชอบ search engine ชอบ และวางตำแหน่งโค้ดส่วนต่างๆได้อย่างถูกต้อง (อันนี้โปรแกรมเมอร์ที่เอางานไปทำต่อ คงจะชอบ เพราะโค้ดไม่มั่ว จะลูป ตรงไหน ครอบได้ดั่งใจ)
Media
รูปใน img จะต้องมี alt=”คำบรรยาย” เสมอ ถ้าเป็นไอคอนเล็กๆหรือ ขอบโค้ง หรืออะไรก็ตาม ถ้าไม่มีความหมาย ให้ใส่ alt=”" เปล่าๆไว้
Link
ลิ้งค์นั้น ให้ใช้ title=”" ในลิ้งค์ ที่อธิบายไม่ชัดเจน
Form
tag ที่จะต้องมี สำหรับ form คือ
<fieldset> ใช้เพื่อรวมกลุ่ม label ในกลุ่มเดียวกัน
<legend> ใช้เพื่อบรรยาย fieldset
<label> ใช้เพื่อบรรยาย input
รูปแบบโค้ด
<B>WebThaiDD.COM</B> //โค้ดกำหนดตัวอักษรให้หนา
<I>WebThaiDD.COM</I> //โค้ดกำหนดตัวอักษรให้เอียง
<U>WebThaiDD.COM</U> //โค้ดกำหนดตัวอักษรให้ขีดเส้นใต้
<STRIKE>WebThaiDD.COM</STRIKE> //โค้ดกำหนดตัวอักษรให้ขีดฆ่าตัวอักษร
รูปแบบอื่นๆ
<BLINK>...</BLINK>//กำหนดให้ตัวอักษรกระพริบ
<BIG>...</BIG>//กำหนดให้ตัวอักษรใหญ่ขึ้นกว่าปกติ
<SMALL>...</SMALL>//กำหนดให้ตัวอักษรเล็กลงกว่าปกติ
<SUB>...</SUB>//กำหนดให้ตัวอักษรเป็นตัวห้อย
<SUP>...</SUP>//กำหนดให้ตัวอักษรเป็นตัวยกกำลัง
http://www.webthaidd.com/html/webthaidd_article_290_.html
http://school.obec.go.th/pp_school/html/editor.html
http://www.divland.com/blog/2007/05/01/html-coding-standards/
http://www.mindphp.com/modules.php?name=News&file=article&sid=84
http://www.xvlnw.com/knowledge-readknowledge-id40.html
ลงวันที่ :
23 มิถุนายน 2555
ขอบคุณครับ!!! :))
ไม่มีความคิดเห็น:
แสดงความคิดเห็น