พื้นฐานในการทำเว็บไซต์
| Home | Frees | Download | Tips |
ภาษา HTML พื้นฐา่น
รูปแบบคำสั่ง HTML

<tag เปิด> ข้อความ </tag ปิด>
<html>
<head>
<title>Title of page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
</head>
<body>
ข้อความแรกของฉัน
</body>
</html>


การใส่สีพื้นหลังเว็บ
<body bgcolor="yellow">


คำสั่งขึ้นบรรทัดใหม่ (Line Breaks)

<br> or <br />

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

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

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


คำสั่งย่อหน้าใหม่ (Paragraphs)

<p> ข้อความข้อความ
<p> ข้อความข้อความ
หรือ
<p> ข้อความข้อความ </p>


คำสั่งขึ้นบรรทัดใหม่
<hr>
<hr color="red" width="20%" align="center">


การใส่หมายเหตุใน HTML (Comment)
<!----- ข้อความหมายเหตุ -------->


การกำหนดหัวข้อเอกสาร (Header) h1 = ใหญ่สุด, h6 = เล็กสุด
<h1> หัวข้อเอกสาร 1</h1>
<h2> หัวข้อเอกสาร 2</h2>
<h3> หัวข้อเอกสาร 3</h3>
<h4> หัวข้อเอกสาร 4</h4>
<h5> หัวข้อเอกสาร 5</h5>
<h6> หัวข้อเอกสาร 6</h6>

คำสั่งแสดงตัวอักษร (Font)
<font face="MS Sans Serif, Tahoma" size="+2" color="red">


กำหนดข้อความแบบตายตัว (preformat)
<pre> ข้อความข้อความข้อความ </pre>



การใส่รูปภาพในเอกสาร (images)
นามสกุลรูปที่ใช้ในเว็บไซต์ .gif, .jpg, .png
<img src="logo.gif" alt="NBC">
<img src="logo.gif" alt="NBC" width="30%" height="40%" >
<img src="http://www.arnut.com/images/arnut88x31.gif" alt="Arnut Logo">


การใส่ภาพพื้นหลัง (Background)
<body background="bg1.gif">
<body background="http://www.arnut.com/bg1.gif">


การใส่ลิงค์แบบต่างๆ (Link)
<a href="http://www.arnut.com/"> A.Arnut </a>
<a href="http://www.arnut.com/"><img src="http://www.arnut.com/images/arnut88x31.gif" alt="Arnut Blog" target="_blank"></a>
<a href="mailto:arnut@northbkk.ac.th">Send e-mail</a>

ลิงค์ในหน้าเดียวกัน :
<a href="#tips"> จุดลิงค์ที่ต้องการ </a>
<a name="tips"> จุดที่ต้องการเชื่อมโยงไป </a>


แสดงข้อความแบบรายการแบบจุดวงกลม (Unordered list)
<ul>
<li> รายการที่ 1 </li>
<li> รายการที่ 2 </li>
</ul>


แสดงข้อความแบบรายการแบบเลขลำดับ (Ordered list)
<ol>
<li> รายการที่ 1 </li>
<li> รายการที่ 2 </li>
</ol>


แสดงรายการแบบย่อหน้า (Definition list)
<dl>
<dt> บทที่ 1 </dt>
<dd> รายละเอียด </dd>
<dt> บทที่ 2 </dt>
<dd> รายละเอียด </dd>
</dl>


การสร้างตาราง (Table)
แบบที่ 1
<table border="1">
<tr>
    <th> row 1, cell 1 </th>
    <th> row 1, cell 2 </th>
</tr>
<tr>
    <td> row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>
</table>

แบบที่ 2
<table border="1">
<tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>
</table>


ตัวอักขระพิเศษ
&copy; = ©
&reg; = ®
&#8482; = ™
&#8226; = •
&lt; = <
&gt; = >
&amp; = &
&times; = ×
&divide; = ÷
&nbsp; = เว้นวรรค


คำสั่งเลื่อนข้อความ (Marquee Tag)
เลื่อนข้อความจากขวามาซ้าย
<marquee> ข้อความ </marquee>

ใส่กรอบให้ข้อความขณะวิ่ง
<marquee style="border:RED 2px SOLID"> ข้อความ </marquee>

เลื่อนข้อความจากซ้ายมาขวา
<marquee direction="right"> ข้อความ </marquee>

ข้อความเด้งไปเด้งมา ซ้ายขวา ซ้ายขวา
<marquee behavior="alternate"> ข้อความ </marquee>
.
ข้อความเลื่อนจากล่างขึ้นบนเหมือนตอนจบภาพยนต์
<marquee direction="up"> ข้อความ </marquee>

ข้อความเลื่อนจากบนลงล่าง
<marquee direction="down"> ข้อความ </marquee>

ข้อความเลื่อนจากบนล่งล่าง ล่างขึ้นบน
<marquee direction="up" behavior="alternate"> ข้อความ </marquee>

ข้อความเด้งจากมุมซ้ายล่างบึ้นบน แล้วตกลงมามุมขวา
<marquee behavior="alternate" direction="up" width="80%">
<marquee direction="right"> ข้อความ </marquee></marquee>

ข้อความเด้งจากมุมขวาล่างขึ้นบน แล้วตกที่มุมซ้ายล่าง
<marquee behavior="alternate" direction="up" width="80%">
<marquee direction="right" behavior="alternate"> ข้อความ </marquee></marquee>



การฝังไฟล์เสียงด้านหลังเว็บ
นามสกุลไฟล์ เสียง เช่น *.wav, *.mid, *.mp3, *.swf
<bgsound src = “nbc.mid”>
<bgsound src = “nbc.mid” loop= “2”>
<bgsound src = “http://www.arnut.com/nbc.mid” loop= “2”>
<bgsound src = “nbc.wav” loop= “2”>
<bgsound src = “nbc.au” loop= “2”>


การแทรกไฟล์เสียงบนหน้าเว็บ
<embed src="nbc.mid"></embed>
<embed src="nbc.mid" autoplay="false"></embed>
Autoplay=true/false

<embed align="center" src="nbc.wav" height="60" width="280" autostart="false" volume="50%" mastersound></embed>

<embed align="center" hidden="true" src="nbc.wav" height="60" width="280" autostart="true" volume="50%" mastersound></embed>

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="nbc.wav" width="1" height="1" type="application/x-shockwave-flash" quality="high"></embed>



การแทรกไฟล์วีดีโอบนหน้าเว็บ (Video)
นามสกุลไฟล์วีดีโอ เช่น *.avi, *.swf
<embed align="center" src="nbc.avi" height="60" width="280" autostart="false" volume="50%" mastersound></embed>

การเรียกใช้งานไฟล์ CSS
<link rel="stylesheet" type="text/css" href="nbc.css">

ตัวอย่างไฟล์ CSS (nbc.css)
Resource

HTML Tutorial
- http://www.w3.org
- http://www.w3schools.com
- http://www.htmlhelp.com
- http://www.immigration-usa.com/html_colors.html
- http://www.w3schools.com/html/html_colors.asp
- http://www.zspc.com/color/index-e.html


Free RSS Feed
- http://www.rssthai.com

Free Stat
- http://www.statcounter.com
- http://www.stat08.com
- http://www.onlinewebstats.com
- http://webstats.motigo.com

Free Board
- http://www.thaifreeboard.net
- http://www.bbznet.com
- http://www.scriptsby.com
- http://board.dserver.org
- http://www.buildboard.com
- http://www.bbsthai.com
- http://www.212cafe.com/freewebboard/
- http://www.thaimisc.com/freewebboard/

Free Hosting
- http://www.jaakfreehosting.com
- http://www.icspace.net
- http://www.saiyaithai.org
- http://www.t35.com
- http://www.myfreewebs.net
- http://www.myfreewebs.net