นัฏพัฒน เเซ่อึ้ง: การเขียนเว็บด้วยภาษา Html เบื้องต้น

เริ่มต้น พื้นฐาน HTML

ภาษาคอมพิวเตอร์ทุก ๆ ภาษาจะมีโครงสร้างเฉพาะ ภาษา HTML ก็เช่นกัน โครงสร้างของภาษา HTML นั้นเป็นโครงสร้างที่ใช้งานง่าย และเข้าใจได้ไม่ยากนัก รูปแบบโครงสร้างของภาษา HTML มีดังนี้

รูปแบบโครงสร้าง HTML

  <html>
  <head><title> ....ตรงนี้คือส่วนของข้อความที่จะปรากฏที่ Title Bar ของ Browser....</title></head>
       <body>
         ....ตรงนี้คือ ส่วนข้อความหรือเนื้อหา รายละเอียดที่ต้องการให้ปรากฏที่ Web browser ....       </body>
  </html>

HTML มีองค์ประกอบ 2 ส่วน คือ ส่วนที่เป็นเนื้อหา และส่วนที่เป็นคำสั่งหรือแท็กรูปแบบโครงสร้างของเอกสาร HTML จะเป็นดังนี้

<HTML>........</HTML>	เป็นคำสั่งเริ่มต้นและสิ้นสุดเอกสาร HTML
<HEAD>.......</HEAD>	ส่วนของ HEAD ของเอกสาร HTML เป็นส่วนที่เราจะสามารถใส่คำอธิบายเว็บเพจ เช่น Title หรือชื่อเรื่องของเอกสาร, Keyword สำหรับการค้นหา ซึ่งเราจะเขียน TAG ในกลุ่มของ HEAD ไว้ภายใน TAG <HEAD> …… </HEAD>
<TITLE>........</TITLE>	เป็นส่วนแสดงชื่ออกสารโดยจะแสดงที่ไตเติล บาร์ของ วินโดว์ที่ เปิดเอกสารนี้อยู่เท่านั้น
<BODY>.......</BODY>	เป็นส่วนที่จะแสดงผลออกไปยังหน้า Web Browser เช่น การแสดงผลรูปภาพ การแสดงผล Contents การสร้างจุดเชื่อมโยง ซึ่งเราจะเขียน TAG ในกลุ่มของ Body ไว้ภายใน TAG <BODY> ….. </BODY>

เมื่อลอง สังเกตดูเราจะพบสัญลักษณ์ <...> และ </...> เป็นคู่ จากโครงสร้างจะมี <...> 4ตำแหน่ง และ </...>อีก 4 ตำแหน่ง ซึ่งลักษณะการเขียน HTML จะมีลักษณะแบบนี้ สัญลักษณ์ <...> เราเรียกว่าการเปิด Tag ส่วน</...> คือการปิด Tag นั้นเอง โดยส่วนใหญ่รูปแบบของการเขียน HTML จะมีการเปิดและปิด Tag แต่ก็มียกเว้นบ้าง สำหรับแท็กบางแท็ก ที่ไม่จำเป็นต้องมีการปิดแท็ก

ตารางแสดงตัวอย่าง Tag และคำอธิบาย

<html>...</html>	= Tag เปิด เป็นจุดเริ่มต้นและสิ้นสุดของเอกสาร
<head>...</head>	= เป็น Tag ที่กำหนดชื่อเรื่อง
<title>...</title>	= เป็น Tag ที่ใช้แสดงชื่อเอกสารที่ Title Bar ของ Windows ที่เปิดอยู่
<body>...</body>	= Tag เปิด เป็นจุดเริ่มต้นและสิ้นสุด เนื้อหาของเอกสาร

<br>	= เป็น Tag สำหรับขึ้นบรรทัด ใหม่
<hr>	= เป็น Tag กำหนดให้เขียนเส้น ใน Web Page

<b>...</b>	= เป็น Tag สำหรับทำตัวอักษร ให้หนา
<I>...</I>	= เป็น Tag สำหรับทำตัวอักษร ให้เอียง
<u>...</u>	= เป็น Tag สำหรับทำตัวอักษร มีขีดเส้นใต้

<a>...</a>	= เป็น Tag กำหนดการเชื่อมโยง
<img>...</img>	= เป็น Tag กำหนดการเชื่อมโยง ด้วยรูปภาพ
<table>...</table>	= เป็น Tag สำหรับการสร้าง ตาราง
<td>...</td>	= เป็น Tag สำหรับกำหนด คอลัมน์
<form>...</form>	= เป็น Tag สำหรับสร้าง Form
<input>...</input>	= เป็น Tag สำหรับกำหนด input ใน Form
<frame>...</frame>	= เป็น Tag สำหรับสร้าง Frame
<h1>...</h1>	= เป็น Tag สำหรับกำหนดขนาดตัวอักษร ซึ่งมีค่าถึง 6 ขนาด เวลาเปลี่ยนขนาดก็แค่เปลี่ยนตัวเลขครับ

คำสั่งกำหนดขนาดตัวอักษร

คำสั่งขีดเส้น คั่น<HR>เช่นเส้นใต้บรรทัดนี้ไงใช้โดยไม่ ต้องมี</HR> มาปิดท้าย

<HR WIDTH=50%> เมื่อต้องการปรับขนาดเส้นให้ยาว 50 % ของหน้าต่าง
<HR WIDTH=200> เมื่อต้องการปรับขนาดเส้นให้ยาว 200 พิกเซล
<HR SIZE=10> เมื่อต้องการปรับความหนาของเส้นให้เท่ากับ 10 พิกเซล
<HR ALIGN=RIGHT width=50%> เมื่อต้องการกำหนดให้เส้นชิดขวา และมีความยาว 50 %
<HR NOSHADE> เพื่อแสดงเส้นที่ไม่มีเฉดสี เป็นเส้นทึบไปเลย

ตาราง

นิยมใช้ การจัดรูปแบบต่างๆ เพื่อความเป็นระเบีบยและง่ายต่อการมองดูข้อมูลประเภทรูปภาพที่สัมพันธ์กัน

<TABLE>...</TABLE> เปิดรูปแบบตาราง-ปิดตาราง

<TABLE BORDER>...</TABLE> ตารางแบบมีเส้นขอบ

<TABLE WIDTH=100%>...</TABLE> ตารางมีขนาดเต็มหน้าต่าง100%
<TR>ส่วนคอลัมน์</TR> ครอบส่วนที่เป็นแถวเดียวกัน

<TD>เนื้อหาในแต่ละคอลัมน์</TD> ครอบในแต่ละกรอบคอลัมน์

<TD COLSPAN=2>...</TD> กำหนดให้กรอบนั้นยาวเท่ากับ2 คอลัมน์ในแถวถัดไป

<TD ROWSPAN=2>...</TD> กำหนดให้กรอบนั้นกว้างเท่ากับ 2 แถว

การจัดวางข้อความในตาราง

<table BORDER COLS=1 WIDTH="100%">
<tr><td ALIGN=CENTER>กึ่งกลาง</td></tr> กึ่งกลาง

<tr><td ALIGN=LEFT>ชิดซ้าย</td></tr> ชิดซ้าย

<tr><td ALIGN=RIGHT>ชิดขวา</div></td></tr> ชิดขวา

</table>

การปรับแนววาง ข้อมูลบนตาราง

<table BORDER COLS=3 WIDTH="100%"><tr>
<td VALIGN=TOP>ชิดบน<br><br></td> ชิดบน
<td VALIGN=CENTER>กึ่งกลาง</td> กึ่งกลาง
<td VALIGN=BOTTOM>ชิดล่าง</td> ชิดล่าง
</tr>
</table>

การปรับแต่งตารางนั้น เราสามารถทำได้โดยเิพิ่มคุณสมบัติของตารางหรือ การกำหนด attribute ของตาราง เพิ่มเติมเข้าไปในแท็กต่าง ๆ ไม่ว่าจะเป็นการเพิ่มในส่วนของ แท็ก <table> แท็ก <tr> และ แท็ก <td> เป็นต้น เราลองมาดูตัวอย่างต่าง ๆ ดังต่อไปนี้

การใส่สี ให้กรอบตาราง

ในการใส่สีให้กับกรอบตาราง นั้นมีข้อควรระวัง โดยต้องตรวจสอบกรอบของตารางด้วยว่าไม่ได้กำหนดเป็น 0 border="0" เพราะหากกำหนดเป็น 0 จะทำให้ไม่เห็นเส้นขอบ ในตัวอย่างนี้ก็มี attribute ต่าง ๆ เกี่ยวกับแท็ก <table> อยู่หลาย ๆ attribute ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้

border สำหรับกำหนดความหนาของกรอบตาราง โดยการกำหนดขนาดด้วยหน่วยของ Pixel โดยมีรูปแบบดังนี้ <table border = "0"> กรณีไม่ต้องการให้มีกรอบ หรือ <table border = "1"> ค่าตัวเลขมากกรอบจะมีความหนา

bordercolor สำหรับกำหนดสีของเส้นกรอบของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bordercolor = "red"> หรือ <tablebordercolor = "#ff0000">

cellspacing สำหรับกำหนดระยะห่างระหว่างเซลล์แต่ละเซลล์ โดยจะใช้ค่าเดียวกันทุกเซลล์ทั้งตาราง โดยมีรูปแบบดังนี้ <table cellspacing = "0"> หรือ <table cellspacing = "3">

cellpadding สำหรับกำหนดระยะห่างระหว่างขอบของเซลล์กับเนื้อหา (อาจเป็นข้อความหรือรูปภาพ) ที่อยู่ภายในเซลล์นั้น ระยะห่างในที่นี้หมายถึงระยะห่างจากขอบของเซลล์ทั้ง 4 ด้าน โดยมีรูปแบบดังนี้ <table cellpadding = "0"> หรือ <table cellpadding = "3">

การใส่สีพื้นหลังให้กับตาราง

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

การใส่ ภาพเป็นพื้นหลังให้กับตาราง

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

การปรับ ขนาดของตาราง

จากตัวอย่างเป็นการเพิ่ม attribute width และ height ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้

width สำหรับกำหนดความกว้างของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table width = "150"> หรือ <table width = "50%">

height สำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table hight = "150"> หรือ <table hight = "10%">

Tip HTML

การเพิ่ม Attribute ในแท็กต่าง ๆ ของภาษา HTMLการเพิ่ม Attribute ในแท็กต่าง ๆ เราสามารถพิ่มเข้ามาได้เรื่อย ๆ โดยไม่จำเป็นจะต้องเรียงลำดับว่า Attribute ใดจะต้องเขียนก่อนหรือหลัง โดยการเพิ่ม Attribute เข้าไปสามารถทำได้ง่าย ๆ เพียงใช้ Space หรือช่องว่างเป็นตัวแบ่งระหว่าง Attribute แต่ล่ะตัว

การใส่ภาพในเอกสาร HTMLในบทความตอนนี้มีส่วนที่เกี่ยวข้องกับการใช้ภาพ ดังนี้จึงขอให้ความรู้เกี่ยวกับเรื่องของภาพที่จะนำมาใช้ทำเว็บกันซะเลย ซึ่งไฟล์ภาพที่เป็นมาตรฐานที่สามารถนำำมาใส่ในเว็บมีอยู่ด้วยกัน 3 ชนิด โดยแต่ละภาพก็มีลักษณะการนำมาใช้ที่แตกต่างกัน ดังนี้

1. GIF (Graphic Intechange Format)
ไฟล์ภาพชนิดนี้ นิยมใช้สำหรับภาพกราฟิคที่เป็นลักษณะลายเล้น ข้อความตัวอักษร หรือภาพการ์ตูนต่าง ๆ ซึ่งมีสีไม่มากนัก เพราะไฟล์ GIF มีค่าสีสูงสุดเพียง 256 สี ดังนั้นทำให้ภาพกราฟิคที่เราเซฟเป็นไฟล์ประเภท GIF เป็นภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก แต่ข้อดีของไฟล์ประเภทนี้คือ เราสามารถสร้างและเซฟภาพประเภทนี้ให้มีลักษณะพื้นหลังโปร่งใส (Transparent) ซึ่งสามารถนำภาพเหล่านี้ไปใช้กับพื้นหลังสีอะไรก็ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .gif

2. JPG (Joint Photographic Expert Group)

ไฟล์ประเภทนี้สามารถแสดงผลของสีได้สูงสุดถึง16.7 ล้านสี ดังนั้นจึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายต่าง ๆ หรือภาพอื่น ๆ ที่มีสีเยอะ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง และไฟล์ประเภทนี้ไม่สามารถทำเป็นแบบพื้นหลังโปร่งใส่ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .jpg และ .jpeg

3. PNG (Portable Network Graphic)
ไฟล์ประเภทนี้จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง 16.7 ล้านสีเหมือนไฟล์ JPG นอกจากนี้ยังสามารถทำเป็นภาพพื้นหลังโปร่งใส เหมือนกับ GIF ได้ด้วย แต่ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็ก ๆ แต่มีการใช้สีมาก เช่น ภาพไอคอน ต่าง ๆ ไฟล์ประเภทนี้มีนามสกุล .png

การวางภาพ

<P> ขึ้นย่อหน้าใหม่ โดยจะเว้นบรรทัดให้หนึ่งบรรทัด
<BR> ขึ้นบรรทัดใหม่

<CENTER> อะไรก็ได้</CENTER> จัดให้อยู่กึ่งกลางของหน้าต่าง

รูปภาพและการ จัดวาง

ชื่อรูปภาพ ต้องระบุพาธและชื่อไฟล์.สกุล(jpg หรือ gif) ควรเป็นตัวเลขทั้งหมดเพื่อจะได้ไม่เป็นปัญหาในภายหลัง

ชื่อแสดง จะปรากฏในกรณีเล่นโหมด Text หรือรูปภาพยังโหลดขึ้นมาไม่สมบูรณ์

ระดับภาพ มี (Top,Middle,Bottom) จะกำหนดระดับภาพเมื่อวางติดกับข้อความ

ระบุเป็นพิกเซล เช่น <IMG SRC="DookDik_016_onion.gif" WIDTH="64" HEIGHT="64">

วันพฤหัสบดีที่ 5 พฤศจิกายน พ.ศ. 2558

การเขียนเว็บด้วยภาษา Html เบื้องต้น

ไม่มีความคิดเห็น:

แสดงความคิดเห็น