การสร้างเว็บเพจด้วยภาษา HTML

การสร้างเว็บเพจ ง 22201

คำสั่งสำหรับสร้างตารางประกอบด้วยคำสั่งดังต่อไปนี้

Attributes	คำอธิบาย
Align	กำหนดการวางตำแหน่งภายในตารางมี 3 ลักษณะ Left กำหนดจัดวางชิดซ้าย(ค่าเป็น deflaut) Right กำหนดจัดวางชิดขวา Center กำหนดจัดวางก่ำกลาง
Border	กำหนดแสดงความหนาของเส้นตรง มีหน่วยเป็น Pixel
Height	กำหนดความสูงของตาราง มีหน่วยเป็น Pixel และ Percent
Width	กำหนดความกว้างของตาราง มีหน่วยเป็น Pixel และPercent
CellSpacing	กำหนดช่องว่างระหว่างตาราง
CellPadding	กำหนดช่องว่าระหว่างบรรทัดของตาราง

Tag	คำอธิบาย
<TABLE>…</TABLE>	คำสั่งในการสร้างตาราง
<CAPION>…</CAPION>	คำสั่งในการกำหนดข้อความกำกับตาราง
<TR>…</TR>	คำสั่งในการกำหนดแถวของตาราง 1 แถว
<TH>…</TH>	คำสั่งในการกำหนดส่วนหัวของตารางแถวแรก
<TD>…</TD>	คำสั่งในการกำหนดส่วนของข้อมูลในแถว

คำสั่งผสานเซลล์

Colspan เป็นการผสานเซลล์ทางด้าน คอลัมน์

Rowspan เป็นการผสานเซลล์ทางด้าน แถว

การเชื่อมโยงเอกสาร HTML

การเชื่อมโยงเอกสารภายในหน้าเดียวกัน

<A HREF= "#Link_name" >ข้อความ,หรือ ภาพ ที่บ่งบอกถึงจุดหมายปลายทาง</A>	ข้อความที่ต้องการให้ link
<A NAME= "Link_name" >ข้อความ,หรือ ภาพ ในตำแหน่งที่ต้องการไปถึง</A>	ใช้สำหรับกำหนดชื่อของตำแหน่งเป้าหมาย

การเชื่อมโยงไปยังเว็บเพจอื่น

<A HREF = " URL "> ข้อความ </A>

การกำหนดจุดเชื่อมโยงโดยใช้ข้อความ

<A HREF = " URL "><IMG SRC = "ชื่อไฟล์ภาพ"></A>

การกำหนดจุดเชื่อมโยงโดยใช้รูปภาพ

<A HREF="URL" Target="_BLANK"> ข้อความหรือรูปภาพ</A>

การกำหนดการเชื่อมโยงเพื่อขึ้นหน้าใหม่

การกำหนดหัวข้อเรื่องและตำแหน่งของข้อความ

<head>

<title>การกำหนดหัวข้อเรื่องและตำแหน่งของข้อความ</title>

</head>

<h1>หัวข้อระดับ1</h1>

<h2>หัวข้อระดับ2</h2>

<h3>หัวข้อระดับ3</h3>

<h4>หัวข้อระดับ4</h4>

<h5>หัวข้อระดับ5</h5>

<h6>หัวข้อระดับ6</h6>

<p align='center'>ข้อความกึ่งกลาง</p>

<p align='right'>ข้อความชิดขวา</p>

<p align='left'>ข้อความชิดซ้าย</p>

<b>ข้อความตัวหนา</b><br>

<i>ข้อความตัวเอียง</i><br>

<u>ข้อความขีดเส้นใต้</u><br>

<b><i><u>ข้อความทั้ง3แบบ</b></i></u><br>

<font face='Comic Sans MS'>ตัวอักษรแบบComic Sans MS</font><br>

<font face='Bookman Old Style'>ตัวอักษรแบบBookman Old Style</font><br><br>

<font size='1'>ข้อความระดับ1</font><br>

<font size='2'>ข้อความระดับ2</font><br>

<font size='3'>ข้อความระดับ3</font><br>

<font size='4'>ข้อความระดับ4</font><br>

<font size='5'>ข้อความระดับ5</font><br>

<font size='6'>ข้อความระดับ6</font><br>

<font size='7' color='blue'>ข้อความระดับ7</font><br>

<font size='8'>ข้อความระดับ8</font><br>

<font color='#ffa500'>โรงเรียนเลยพิทยาคม</font>

</body>

</html>

การแทรกรูปภาพ

<HTML>

<HEAD><TITLE> Image </TITLE></HEAD>

<BODY>

</CENTER>

</BODY>

</HTML>

การสร้างตาราง

<head>

<title>การสร้างตาราง</title>

</head>

<body>

<center><h1>ข้อมูลนักเรียนโรงเรียนเลยพิทยาคม</h1>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></center>

</body>

</html>

การเชื่อมโยงเอกสาร

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การเชื่อมโยงเอกสาร</title>
</head>
<body>
<a href="#html1">เอกสารhtml1</a>
<a href="#html2">เอกสารhtml2</a>
<a href="#html3">เอกสารhtml3</a>
<br><br><br><br><br>
<a name="html1">เอกสารhtml1</a><br>
บทที่1<br>
บทที่2<br>
บทที่3<br>
<br><br><br><br><br>
<a name="html2">เอกสารhtml2</a><br>
บทที่4<br>
บทที่5<br>
บทที่6<br>
<br><br><br><br><br>
<a name="html3">เอกสารhtml3</a><br>
บทที่7<br>
บทที่8<br>
บทที่9<br>
<br><br><br><br><br>
<h1>เว็บไซต์ที่สนใจ</h1>
<a href="http://www.youtube.com" target="_blank">Youtube</a>
<a href="http://www.google.com" target="_blank"><img src="11.jpg" width="100" height="100"></a>
</body>
</html>

หลังกลางภาค

การสร้างฟอร์ม

ประเภทของคำสั่งในการสร้างขอบเขตของแบบฟอร์มสอบถามแบ่งออกเป็น 3 ประเภท

- <TEXTAREA> เป็นคำสั่งที่ใช้สำหรับกรอบป้อนข้อมูล สามารถป้อนข้อมูลได้หลายบรรทัด

- <SELECT> เป็นคำสั่งที่ใช้สำหรับสร้างตัวเลือกที่อยู่ในกรอบตัวเลือก

- <INPUT> เป็นคำสั่งที่ใช้ในการสร้างกรอบป้อนข้อความบรรทัดเดียว ปุ่มแบบวิทยุ(Radio button) ช่องทำเครื่องหมาย(Check box) ปุ่มยืนยันข้อมูลที่ป้อน(Submit button) ปุ่มยกเลิกข้อมูลที่ป้อน (Reset button)

คำสั่งในการสร้างแบบฟอร์ม

..............................

Control ต่างๆ

..............................

</FORM>

METHOD เป็นรูปแบบของวิธีในการส่งข้อมูล ซึ่งจะประกอบด้วย

- GET เป็นตัวรับ – ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร

- POST เป็นตัวรับ – ส่ง ข้อมูลไม่จำกัดจาก Server

ACTION คือ ตำแหน่งของไฟล์ หรือ URL ของ CGI Script ที่วางไว้ที่ Server ที่กำหนดใน Domain ต่างๆหรือใช้ค่า mailto: ก็ได้

การกำหนดกรอบป้อนข้อมูลแบบ TEXT BOX

<FORM>

</FORM>

- SIZE เป็นการกำหนดความกว้างของ Textbox

- MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล

คำสั่งการแสดงผลนั้นจะมีลักษณะการแสดงผลแบบบรรทัดเดียว เพื่อให้ป้อนข้อมูลที่เป็นเลข หรือตัวอักษร

การแสดงผลแบบ PASSWORD

<FORM>

</FORM>

การแสดงผลแบบ CHECKBOX

<FORM>

</FORM>

การแสดงผลแบบ RADIO

<FORM>

</FORM>

การส่งแบบฟอร์มแบบ SUBMIT

<FORM>

</FORM>

การส่งแบบฟอร์มแบบ RESET

<FORM>

</FORM>

การสร้างกรอบป้อนข้อมูลแบบหลายบรรทัด

<FORM>

<TEXTAREA NAME="ชื่อของข้อมูล TEXTAREA" ROWS="ค่าตัวเลข" COLS="ค่าตัวเลข">.....ข้อมูลที่ต้องการป้อนในกรอบข้อมูล.....</TEXTAREA>

</FORM>

กำหนดความกว้าง และความสูงของกรอบป้อนข้อความคือ

- ROWS เป็นการกำหนดจำนวนแถวที่ใช้ในการป้อนข้อมูลต่างๆลงในกรอบป้อนข้อความ

- COLS เป็นการกำหนดจำนวนคอลัมน์ที่เหมาะสมที่สุดจะมีค่าตัวเลขเท่ากับ 80 Characters

การสร้างตัวเลือก

<FORM>

<OPTION VALUE="ชื่อย่อของตัวเลือก">ตัวเลือกที่ต้องการแสดง

</SELECT>

</FORM>

คุณสมบัติ SIZE เป็นตัวกำหนดซึ่งสามารถกำหนดได้ 2 แบบคือ

- SIZE="ค่าตัวเลข" เป็นการกำหนดการแสดงผลตามค่าตัวเลขที่ได้ระบุไป

SIZE="MULTIPLE" เป็นการกำหนดการแสดงผลตัวเลือกทั้งหมดที่มีอยู่ โดยจะแสดงเรียงต่อกันตามบรรทัดในแต่ละตัวเลือก <OPTION>

งาน ex5 การสร้างฟอร์ม
<html>
<head>
<title>การสร้างฟอร์ม</title>
</head>
<body>
<form method="post" action="file">
<h2><center>สมัครสมาชิก</center></h2>
<table border="1" bgcolor="#FF3300">
<tr>
<td>ชื่อ-สกุล</td>
<td><input type="text" name="name" maxlength="10">
</td>
</tr>
<tr>
<td>รหัสผ่าน</td>
<td><input type="password" name="pass" maxlength="10"></td>
</tr>
<tr>
<td>ที่อยู่จังหวัด</td>
<td><select name="province">
<option>เลือกจังหวัด
<option>จังหวัดอุดรธานี
<option>จังหวัดเลย
<option>จังหวัดร้อยเอ็ด
<option>จังหวัดหนองบัวลำภู
<option>จังหวัดหนองคาย
</td>
</tr>
<tr>
<td>เลือกเพศ</td>
<td><input type='radio' name="sex">เพศชาย
<input type='radio' name="sex">เพศหญิง</td>
</tr>
<tr>
<td>วิชาที่ชอบ</td>
<td>
<input type='checkbox' name="check">วิชาภาษาไทย<br>
<input type='checkbox' name="check">วิชาภาษาอังกฤษ<br>
<input type='checkbox' name="check">วิชาคณิตศาสตร์ <br>
</td>
</tr>
<tr>
<td>กรอกรายละเอียดเพิ่มเติม</td>
<td><textarea name="area" rows="20" cols="25"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type='submit' value="บันทึก">
<input type='reset' value="ยกเลิก"></td>
</tr>
</table>
</form>
</body>

</html>

การแบ่งพื้นที่ของจอภาพ (Frame)

<HTML>

<HEAD>

<TITLE> Frame </TITLE>

</HEAD>

</FRAMESET>

</HTML>

ข้อสังเกต จะเห็นได้ว่าในการกำหนดการแบ่งหน้าจอภาพนั้นจะกำหนดคำสั่ง <FRAMESET>........</FRAMESET> แทนที่คำสั่ง <BODY>………..</BODY> เพื่อเป็นตัวกำหนดการแสดงผลในโปรแกรมเว็บบราวเซอร์

การแบ่งพื้นที่ของจอภาพตามแนวนอนและแนวตั้ง

<HTML>

<HEAD>

<TITLE> Frame </TITLE>

</HEAD>

</FRAMESET>

</HTML>

คำสั่งนี้จะเป็นการกำหนดหน้าจอภาพตามแนวโดยมีคำสั่ง <FRAME SRC="..">เป็นตัวกำหนดให้แสดงผลไฟล์ HTML หรือรูปภาพ

ในการแบ่งพื้นที่ของจอภาพทางแนวนอน จะกำหนดแอดทริบิวเป็น ROWS แต่ถ้าต้องแบ่งจอภาพทางแนวตั้ง จะกำหนดแอดทริบิวเป็น COLS

ตัวอย่างข้างล่างนี้เป็นตัวอย่างการแบ่งหน้าจอทางแนวนอนโดยใช้แอดทริบิว ROWS

วันพุธที่ 1 กรกฎาคม พ.ศ. 2558

การสร้างเว็บเพจ ง 22201

คำสั่งสำหรับสร้างตารางประกอบด้วยคำสั่งดังต่อไปนี้

คำสั่งผสานเซลล์

การเชื่อมโยงเอกสาร HTML

การกำหนดหัวข้อเรื่องและตำแหน่งของข้อความ

การแทรกรูปภาพ

การเชื่อมโยงเอกสาร

หลังกลางภาค

การแบ่งพื้นที่ของจอภาพ (Frame)