วันจันทร์ที่ 15 พฤศจิกายน พ.ศ. 2564
✔dedicated hosting CloudHosting ราคาถูก Cloud VPS Server ฟรีSSL Email Hosting ไม่ล่ม✔
CloudHosting ราคาถูก ฟรีSSL CloudVPS เสถียร ไม่ล่ม
วันอังคารที่ 19 ตุลาคม พ.ศ. 2564
เปลี่ยน og:image ไปแล้ว แต่ทำไมตอนแชร์บน Facebook ถึงขึ้นรูปเดิม?
บ่อยครั้งในการทำเว็บ เราจะกำหนด meta tag og:image เพื่อให้ตอนที่เรานำบทความหรือเว็บไซต์ไปแชร์ลง Facebook แล้วมันจะโชว์ภาพที่เราตั้งไว้
แต่หลายๆครั้งรูปภาพที่เราตั้งไว้มันไม่ถูกใจเรา แล้วเราต้องการเปลี่ยน og:image หลังจากเปลี่ยนแล้ว เรานำลิงก์เดิมไปแชร์บน Facebook แต่เอ๊ะ! ทำไมรูปไม่เปลี่ยนล่ะ?
นั่นเป็นเพราะเฟสบุ๊คได้จำรูปที่เราเคยแชร์เอาไว้ตั้งแต่ครั้งแรกเอาไว้แล้ว เพื่อความรวดเร็วในการแสดงผล เรียกง่ายๆว่า “แคช (cache)” นั่นแหละ
อ่าว! แล้วทีนี้จะเคลียร์แคช Facebook share ยังไงล่ะ?
วิธีง่ายๆเลย คือให้เราทำตามนี้
1.ไปที่ https://developers.facebook.com/tools/debug
2.นำลิงก์เว็บไซต์ที่ต้องการเปลี่ยนรูปไปวางในช่อง URL
3.กด Debug – มันก็จะโชว์ข้อมูลที่มันแคชไว้มาโชว์
4.จากนั้นให้เรากดปุ่ม Scrape Again ก็เป็นอันเสร็จเรียบร้อย!
วันศุกร์ที่ 17 กันยายน พ.ศ. 2564
Code PHP ในการสร้างโปรแกรมเครื่องคิดเลข
<?php
<table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#0000FF"
style="border-color:black" onClick="previouskey=event.srcElement.innerText">
<tr>
<td width="100%" bgcolor="#FFFFFF" id="result"
style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
</tr>
<tr>
<td width="100%" valign="middle" align="center"><table border="0" width="100%"
cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
<tr>
<td width="80%" align="center"><table border="1" width="100%" cellspacing="0"
cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white"
onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'"
onMouseout="event.srcElement.style.color='white'" onselectStart="return false"
onClick="calculate()" height="82">
<tr>
<td width="25%" align="center" height="17">7</td>
<td width="25%" align="center" height="17">8</td>
<td width="25%" align="center" height="17">9</td>
<td width="25%" align="center" height="17">/</td>
</tr>
<tr>
<td width="25%" align="center" height="19">4</td>
<td width="25%" align="center" height="19">5</td>
<td width="25%" align="center" height="19">6</td>
<td width="25%" align="center" height="19">*</td>
</tr>
<tr>
<td width="25%" align="center" height="19">1</td>
<td width="25%" align="center" height="19">2</td>
<td width="25%" align="center" height="19">3</td>
<td width="25%" align="center" height="19">-</td>
</tr>
<tr>
<td width="25%" align="center" height="19">0</td>
<td width="25%" align="center" height="19"
onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
<td width="25%" align="center" height="19">.</td>
<td width="25%" align="center" height="19">+</td>
</tr>
</table>
</td>
<td width="20%"><div align="left"><table border="1" width="100%" cellspacing="0"
cellpadding="0">
<tr>
<td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center"
onClick="result.innerText=0;results=''">C</td>
</tr>
</table>
</div><div align="left"><table border="1" width="100%" cellspacing="0" cellpadding="0"
height="81">
<tr>
<td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center"
onMouseover="event.srcElement.style.color='yellow'"
onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td>
</tr>
</table>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
<script language="JavaScript1.2">
/*
DHTML Calculator Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
var results=''
var previouskey=''
var re=/(\/|\*|\+|-)/
var re2=/(\/|\*|\+|-){2}$/
var re3=/.+(\/|\*|\+|-).+/
var re4=/\d|\./
var re5=/^[^\/\*\+].+\d$/
var re6=/\./
function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)
result.innerText=results
}
}
function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}
</script>
?>
ติดอันดับการสืบค้น
หากคุณต้องการทำให้เว็บของคุณ อยู่ในกลุ่มของการค้นหาข้อมูลจากผู้ให้บริการสืบค้นข้อมูลอัตโนมัติ (Search Engine) อย่าลืมกำหนด Title ของเอกสารเว็บนั้นๆ โดยควรเป็นข้อความภาษาอังกฤษ มีความหมายกระชับถึงเรื่องที่นำเสนอ แต่มีความยาวไม่เกิน 64 ตัวอักษร (ปัจจุบันสามารถใช้ภาษาไทยได้ แต่แนะนำให้ใช้ร่วมกัน หรือผสมกัน) ซึ่งข้อความในส่วนนี้จะปรากฏในส่วนบนสุดของหน้าต่างเบราเซอร์ (Title Bar)
<HEAD>
<TITLE>webthaidd</TITLE>
</HEAD>
นอกจากนี้ สามารถกำหนดค่าเพิ่มเติมเกี่ยวกับคำสำคัญ หรือ Keyword ของเอกสารเว็บ เพื่อช่วยให้การสืบค้น ได้ผลดีขึ้น อาศัยแท็กคำสั่ง
<META NAME="Keywords" CONTENT="คำที่ 1, คำที่ 2, …">
ซึ่งกำหนดแท็กนี้ในส่วน Head Section ของเอกสารเว็บ
ตัวอย่างการลงรหัสเพื่อกำหนด TITLE และ META Tag
<HEAD>
<TITLE>webthaidd</TITLE>
<META NAME="Keywords" CONTENT="Introduction, HTML, HyperText Markup Language">
</HEAD>
ทั้งนี้ยังมีแท็ก Meta อีก 2 รูปแบบที่ควรนำมาประกอบด้วย คือ
<META NAME="Description" CONTENT="ข้อความอธิบายเว็บไซต์"> และ
<META NAME="Robots" CONTENT="all/none/index/noindex/follow/nofollow">
โดย Description จะเป็นการใส่คำอธิบายให้กับเว็บไซต์ และ Robots เป็นการบอกให้กับ Spider หรือ Robot (โปรแกรมของ Search Engine ที่ทำหน้าที่ค้นหาข้อมูลของเว็บไซต์ต่างๆ) ว่าควรจัดการหน้าเว็บต่างๆ ในเว็บไซต์อย่างไร เช่น ถ้าต้องการให้เก็บข้อมูลทุกหน้า ก็กำหนด Contect="All" หรือไม่ต้องการให้เก็บข้อมูลหน้าใด ก็กำหนด Contect="noindex" หรือให้เก็บเฉพาะหน้าที่ระบุ ไม่ต้องเก็บหน้าอื่นๆ ก็ใช้ Contect="NoFollow" เป็นต้น อย่างไรก็ตามแท็กชุดนี้ไม่ใช่แท็กมาตรฐาน ดังนั้นผู้พัฒนาเว็บ ควรให้ความสำคัญของ Title มากที่สุด
<HEAD>
<TITLE>webthaidd</TITLE>
<META NAME="Keywords" CONTENT="Introduction, HTML, HyperText Markup Language">
<META NAME="Description" CONTENT="Introduction to HTML and Web Design for All">
<META NAME="Robots" CONTENT="All">
</HEAD>
นอกจากแท็กที่ได้แนะนำ ก็กำหนดข้อความอธิบายรูปภาพด้วย Attribute ALT ของแท็ก IMG ก็เป็นจุดที่น่าสนใจ โดย Spider บาง Search Engine จะสนใจคำอธิบายชุดนี้ด้วยเช่นกัน อย่างไรก็ตาม คำอธิบายชุดนี้ก็มีประโยชน์มาก สำหรับคนพิการทางสายตา เพราะสามารถรู้ความหมายของรูปภาพที่มองไม่เห็นได้จากคำอธิบาย ที่อ่านด้วยเบราเซอร์ เฉพาะของคนพิการทางตา ดังนั้นผู้พัฒนา ควรให้ความสำคัญของการใส่คำอธิบายรูปภาพกับรูปภาพทุกภาพด้วย
<IMG SRC="test.jpg" ALT"ทดสอบการใส่คำอธิบาย">
ข้อมูลจาก http://www.nectec.or.th
การใช้ PHP ทำเครื่องคิดเลขอย่างง่าย
1. สร้าง From ขึ้นมาก่อน ฟอร์ม ที่เีีราต้องากาขึ้นมาซึ่งประกอบด้วย Text Field 2 อันหน้าและหลีง และมี List/menu อยู่ตรงกลาง และ Button เพื่อการ ส่งค่า
2. ใส่ เครื่องหมายทางคณิตศาสตร์ ใน List/menu
3. จากนั้นอย่าืลืมกำหนด action ให้ ฟอร์ม ด้วยละครับ ตย. ของผมกำหนดให้ไปที่ calcu.php method="post"(ผมทำเครื่องคิดเลขแบบแสดงผลในหนาเดียว นะครับ เพราะ ฉะนั้น หน้านี้จึงมี ชื่อว่าcalcu.php เช่นกัน)
4. จากนั้นกำหนดชื่อ ของ Text Field 2 ทั้ง 2 อัน และ List/menu โดย Text Field อันแรก ผมให้ใช้ชื่อว่า num 1 และ Text Field อันที่ 2 ก็ชื่อให้ชื่อ num 2 List/menu ให้ชื่อว่า operator
รูปแบบนี้ถ้าเขียนโดยไม่ใช้ ตัวช่วยของ Dreamweaver ก็จะได้ว่า
<form name="form1" method="post" action="calcu.php">
<input type="text" name="num1">
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="num2">
<input type="submit" name="Submit" value="Submit">
</form>
จากนั้นเิริ่ม เปิด แท็ก php ได้เลยครับ
<?
}
$num1 = $_POST['num1']; //รับ num 1 แบบ post
$operator = $_POST['operator']; //รับ operator แบบ post
$num2 = $_POST['num2']; //รับ num 1 แบบ post
}
?>
พิมพ์ ข้่อความ ด้านบน นี้เพื่อ การ รับ ข้อมูลตัวแปล
จากนั้นนำ ข้อมูลตัวแปล นั้นมา ใช้ งานด้วยการ นำ code ต่อจากนี้ ไปวางในล่าง (แต่ยังอยู่ใน ปีกกา เปิดปีด นะครับ)
if($operator == "+") // ถ้า operator คือ +
echo "$num1 + $num2 = ".($num1+$num2); // แสดงผล num1 + num2
elseif($operator == "-") // แสดง ผล คำตอบ ถ้า เป็น -
echo "$num1 - $num2 = ".($num1-$num2); // แสดงผล num1 - num2
elseif($operator == "*") // แสดง ผล คำตอบ ถ้า เป็น *
echo "$num1 * $num2 = ".($num1*$num2); // แสดงผล num1 - num2
elseif($operator == "/") // แสดง ผล คำตอบ ถ้า เป็น /
echo "$num1 / $num2 = ".($num1/$num2); // แสดง ผล คำตอบ
รูปแบบ Code ทั้งหมด
<form name="form1" method="post" action="calcu.php">
<input type="text" name="num1">
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="num2">
<input type="submit" name="Submit" value="Submit">
</form>
<?
{
$num1 = $_POST['num1'];
$operator = $_POST['operator'];
$num2 = $_POST['num2'];
if($operator == "+")
echo "$num1 + $num2 = ".($num1+$num2);
elseif($operator == "-")
echo "$num1 - $num2 = ".($num1-$num2);
elseif($operator == "*")
echo "$num1 * $num2 = ".($num1*$num2);
elseif($operator == "/")
echo "$num1 / $num2 = ".($num1/$num2);
}
?>
แสดงผล
>>>
แต่ โค้ด นี้ยังมีปัญหา อยู่ คือถ้าไม่ พิมพ์ อะไรเลย แล้วกด submit จะได้
เพราะ ฉะนั้น เรามาเขียน เช็ค ตัวแปล และ ค่้าว่าง เพื่อ กัน กรณี ที่มีคน มักง่าย ไม่ใส่อะไรเลยแล้วกด submit กันมีกว่า ครับ
if(isset($_POST['num1']) && !empty($_POST['num1']) && !empty($_POST['num2']))
แค่นี้ก็จะไม่เกิดเหตุการนั้นแล้วล่ะครับ
ลอง copy code นี้ไป ลองเล่นดูได้เลยครับ
<form name="form1" method="post" action="calcu.php">
<input type="text" name="num1">
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="num2">
<input type="submit" name="Submit" value="Submit">
</form>
<?
if(isset($_POST['num1']) && !empty($_POST['num1']) && !empty($_POST['num2']))
{
$num1 = $_POST['num1'];
$operator = $_POST['operator'];
$num2 = $_POST['num2'];
if($operator == "+")
echo "$num1 + $num2 = ".($num1+$num2);
elseif($operator == "-")
echo "$num1 - $num2 = ".($num1-$num2);
elseif($operator == "*")
echo "$num1 * $num2 = ".($num1*$num2);
elseif($operator == "/")
echo "$num1 / $num2 = ".($num1/$num2);
}
?>
วันเสาร์ที่ 12 มิถุนายน พ.ศ. 2564
เรื่อง การจัดและตกแต่งข้อความ
การจัดและตกแต่งข้อความ
1. การขึ้นบรรทัดใหม่
การแสดงข้อความในบราวเซอร์จะถูกตัดคำขึ้นบรรทัดใหม่เมื่อข้อความนั้นเลยขอบขวา และบางครั้งคำสั่งที่บราวเซอร์ตัดขึ้นบรรทัดใหม่นั้นอาจดูแล้วไม่ต่อเนื่อง ดังนั้นจึงให้ แท็ก <br>
ตัวอย่างการใช้งาน
2. การตัดคำขึ้นย่อหน้าใหม่
เมื่อต้องการจัดข้อความขึ้นบรรทัดใหม่ และเว้นบรรทัดให้อีกหนึ่งบรรทัด แท็กที่ใช้ควบคุมการทำงานในลักษณะนี้คือ แท็ก <p> รูปแบบ <p> ข้อความที่ต้องการขึ้นย่อหน้าใหม่
ตัวอย่างการใช้งาน ดังนี้
3. การวางตำแหน่งข้อความในย่อหน้า
สามารถจัดเรียงข้อความในแต่ละย่อหน้าของเพจได้ โดยการกำหนดตำแหน่งในแอตทริบิวต์ align <Alignment> ของแท็ก<p>
รูปแบบ <p align="ตำแหน่ง"> ข้อความ </p>
4. การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ
การจัดให้ข้อมูลที่เป็นข้อความ หรือ รูปภาพ ให้อยู่ตำแหน่งตรงกลางจอภาพ โดยใช้แท็ก<center>
รูปแบบ <center> ข้อความ </center>
5. การสร้างเส้นคั่น
ต้องการแบ่งข้อความบนจอภาพ โดยใช้เส้นคั่นทางแนวนอน สามารถกำหนดตำแหน่ง สี ขนาดความหนา ความยาว หรือกำหนดเป็นเส้นทึบได้โดยใช้แท็ก <hr >
รูปแบบ <hr >
ตัวอย่างการใช้งาน ดังนี้
6. การกำหนดรูปแบบอักษร
การกำหนดอักษรตัวหนา คือ แท็ก <b> รูปแบบ <b> ข้อความ </b>
การกำหนดอักษรตัวเอียง คือ แท็ก <i> รูปแบบ <i> ข้อความ </i>
การกำหนดอักษรตัวขีดเส้นใต้ คือ แท็ก <u> รูปแบบ <u> ข้อความ </u>
การกำหนดอักษรตัวพิมพ์ดีด คือ แท็ก <tt> รูปแบบ <tt> ข้อความ </tt>
การกำหนดอักษรตัวขีดฆ่า คือ แท็ก <s> รูปแบบ <s> ข้อความ </s>
การกำหนดอักษรตัวยกขึ้น คือ แท็ก <sup> รูปแบบ <sup> ข้อความ </sup>
การกำหนดอักษรห้อยลง คือ แท็ก <sub> รูปแบบ <sub> ข้อความ </sub>
ตัวอย่างการใช้งาน ดังนี้
7. การกำหนดตัวอักษรเคลื่อนที่
แท็ก <marquee> เป็นคำสั่งการแสดงข้อความให้มีการเคลื่อนที่ของตัวอักษรโดยปกติทิศทางการเคลื่อนที่จะเคลื่อนจากขวาไปซ้าย
รูปแบบ <marquee>ข้อความ</marquee>
- กำหนดความเร็วในการเคลื่อนที่ ด้วยการกำหนดแอตทริบิวต์ scolldelay
รูปแบบ <marquee scolldelay ="เวลา">ข้อความ / รูปภาพ</marquee>
- กำหนดทิศทางการเคลื่อนที่ ด้วยการกำหนดแอตทริบิวต์ direction
รูปแบบ <marquee direction ="ทิศทาง">ข้อความ / รูปภาพ</marquee>
ทิศทางที่สามารถกำหนดให้กับข้อความ / รูปภาพ คือ
up ข้อความ เลื่อนขึ้น down ข้อความ เลื่อนลง
left ข้อความ เลื่อนจากขวามาซ้าย right ข้อความ เลื่อนจากซ้ายมาขวา
- กำหนดรูปแบบการเคลื่อนที่ คำสั่งแอตทริบิวต์การเคลื่อนที่ คือ behavior
รูปแบบ <marquee behavior ="รูปแบบการเคลื่อนที่">ข้อความ</marquee>
การกำหนดรูปแบบการเคลื่อนที่ของข้อความ กำหนดได้ 3 รูปแบบคือ
scroll หมายถึง การเคลื่อนที่หายไปจากขอบ แล้วไปปรากฏที่ขอบอีกด้านแล้วทำซ้ำเรื่อยๆ
slide หมายถึง การเคลื่อนที่ไปแล้วหยุดที่ขอบ
alternate หมายถึง การเคลื่อนที่ไปกระทบขอบแล้วดึงไปอีกทางกลับไปกลับมา
ตัวอย่างการใช้งาน ดังนี้
8. การกำหนดลักษณะของตัวอักษร
การกำหนดลักษณะของตัวอักษรที่แสดงผลบนเว็บบราวเซอร์ เช่น สีของตัวอักษร รูปแบบของตัวอักษร ขนาดตัวอักษร สามารถกำหนดด้วยคำสั่งแอตทริบิวต์ต่างๆ ที่แท็กเปิดของแท็ก<font>
- การกำหนดฟอนต์ของตัวอักษร คำสั่งแอตทริบิวต์ คือ face การระบุชื่อของฟอนต์ที่ต้องการเช่น
"Ms Sans Serif" , "AngsanaUPC"
รูปแบบ <font face="ชื่อของฟอนต์" >ข้อความ<font>
ตัวอย่างการใช้งานดังนี้
- การกำหนดสีของตัวอักษร การกำหนดสีตัวอักษรเพื่อทำให้เอกสารเว็บเพจสวยงาม น่าสนใจมากยิ่งขึ้นโดยใช้คำสั่งแอตทริบิวต์ คือ color
รูปแบบ <font color="ชื่อสี หรือ รหัสสี">ข้อความ</font>
ตัวอย่างชื่อสี
ตัวอย่างการใช้งาน ดังนี้
- การกำหนดขนาดของตัวอักษร การกำหนดขนาดตัวอักษรภายในเอกสารเว็บเพจด้วยการกำหนดแอตทริบิวต์ size
รูปแบบ <font size="ตัวเลข(1ถึง7)" >ข้อความ</font>
การกำหนดขนาดของตัวเลขในเว็บเพจนั้น กำหนดขนาดของตัวอักษรได้2 รูปแบบคือ
1. การระบุตัวเลข โดยจะมีค่าตั้งแต่ง 1 – 7 ซึ่งขนาดมาตรฐานจะมีค่าอยู่ที่ 3 โดยค่าตัวเลข 1 และ2 จะเป็นการย่อขนาดของตัวอักษร ส่วนค่า4-7 จะเป็นการขยายขนาดตัวอักษร
2. การระบุเครื่องหมายบวกและเครื่องหมายลบ แล้วตามด้วยตัวเลขขนาดของตัวอักษรที่ต้องการเปลี่ยนขนาด ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน-2 กาขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งไม่เกิน +4
ตัวอย่างการใช้งาน การระบุตัวเลข
การพิมพ์ข้อมูลในเอกสาร HTML การเว้นช่องว่างไว้มากขนาดไหนก็ตามเมื่อทดสอบผลลัพธ์บนเว็บบราวเซอร์ ได้เป็นช่องว่า 1 อักขระ ถ้าต้องการเว้นช่องว่างความต้องการใช้แท็ก  
รูปแบบ ข้อความ   ข้อความ (แทนการเว้นช่องว่าง1 อักขระ)
เรื่อง การเริ่มต้นกับ HTML
การเริ่มต้นกับ HTML
1. ความรู้เบื้องต้นภาษา HTML
การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทำได้โดยการใช้โปรแกรม Text Editor ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น Notepad, WordPad นอกจากนี้ยังสามารถที่จะใช้งานโปรแกรมประเภท Word หรือโปรแกรมที่ใช้ในการจัดสิ่งพิมพ์ในการเขียนไฟล์ HTML ได้อีกด้วย เมื่อเขียนคำสั่งเสร็จแล้วให้ทำการบันทึกไฟล์ให้มีนามสกุล .html (ชื่อไฟล์.html)
HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์ ที่แสดงผลในลักษณะของเว็บเพจ ซึ่งสามารถแสดงผลได้ในรูปแบบต่างๆ ไม่ว่าเป็นภาพกราฟิก ภาพนิ่ง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซต์อื่นๆ
ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด คือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี้(ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ จึงสามารถกำหนดรูปแบบโครงสร้างได้ง่าย
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket (<) และ greater-than bracket (>) โดยที่ Tag HTML คือ1. Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>(Tag กำหนดเส้นคั่น),<br>(Tagกำหนดขึ้นบันทัดใหม่)
2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag
2. โครงสร้างของภาษา HTML
การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ2 ส่วน ดังนี้
1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง(Title) ของหน้าต่างการทำงานในระบบ Windows
2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้
คำสั่งเริ่มต้นของเอกสาร HTML
1. <HTML>..........</HTML>
<HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง
</HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ
2. <HEAD>..........</HEAD>
เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>
3. เริ่มต้นกับภาษา HTML ด้วย Notepad
คลิกที่ Start --> เลือก Programs -->เลือก Accessories --> เลือก Notepad
ทดสอบการใช้โปรแกรม Notepad โดยพิมพ์คำสั่งพื้นฐานของภาษา HTML ดังนี้
การบันทึกไฟล์โปรแกรม Notepad ให้เป็นไฟล์ HTML
หลังจากใส่คำสั่งพื้นฐานของภาษา HTML ลงใน Notepad ให้ Save เป็น file นามสกุล ดอท.html ดังนี้
คลิก File --> เลือก save ในช่อง File name ให้พิมพ์ชื่อ File ที่ต้องการลงไป
เช่น test.html (test.html อ่านว่า เทส ดอท เอช ที เอ็ม แอล)
จะได้ File 1 File ที่เขียนด้วยภาษา HTML ชื่อ test.html จะเปิดโปรแกรม Internet Explorer (IE)
หมายเหตุ เมื่อทำการ save file เป็น file HTML แล้ว ถ้าต้องการแก้ไขเอกสาร HTMLที่เปิดดูด้วยโปรแกรม Internet Explorer เลือก view ที่ menu bar >> เลือก source จะปรากฏข้อมูลที่เขียนด้วยภาษา HTML ในโปรแกรม notepad
สมัครสมาชิก:
บทความ (Atom)