ภาษา html

http://www.hellomyweb.com/index.php/main/tutorial/2/12

แก้ไขกรณี อ่านภาษาไทยไม่ได้

คัดลอกไปไว้ที่

<html>

<head>

</head>

Welcome to CAS

Chaivat Vallapa

ª×èÍàÅè¹ ¾ÃÔ¡¹éÍÂ

</body>

</html>

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

ทำความรู้จักHTML HTML คืออะไร ใช้อะไรในการเขียน HTML โครงสร้างพื้นฐาน HTML

HTML คืออะไร

HTML ย่อมาจากคำว่า Hyper Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้างโฮมเพจ

ใช้อะไรในการเขียน HTML

การสร้างไฟล์ HTML เราสามารถสร้างจาก Text Editor เช่นจาก Notepad หรือ Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่ " ชื่อไฟล์ . html " ซึ่งถ้าหากคุณไม่ใส่ " " จะ กลายเป็นไฟล์ .TXT แทน ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html เช่นโปรแกรม Macromedia Dreamweaver ปัจจุบันเวอร์ชั่น CS4 แล้ว มีความง่ายและสะดวกในการสร้าง html ขึ้นมา ด้วย Tool ต่าง ๆ ของโปรแกรมครับ

โครงสร้างพื้นฐาน HTML

โครงสร้าง HTML ประกอบด้วย 2 ส่วนสำคัญคือ

1. ส่วนหัว ( Head )

2. ส่วนเนื้อหา ( Body )

โดย CODE จะเป็นแบบนี้ครับ

1.

2.

3.

4.

5.

6.

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

คำสั่งหมายเหตุ !

รูปแบบคำสั่ง <!.........>

ในการเขียนโปรแกรมเราควรมีหมายเหตุ( Comment ) เอาไว้ กันความหลงลืมของเนื้อหาที่เราเขียนไว้ได้ ซึ่งข้อความที่อยู่ระหว่าง <!.และ..> ที่เราหมายเหตุไว้จะไม่มีการนำไปแสดงบนจอภาพแต่อย่างใด

คำสั่งเริ่มต้น

รูปแบบคำสั่ง <HTML>........</HTML> คำสั่ง <HTML> ซี่งจะถือเป็นคำสั่งเริ่มต้นของการเขียน HTML และคำสั่ง </HTML> จะเป็นส่วนของการจบ

การเขียน HTML

รูปแบบคำสั่ง <HEAD>..........</HEAD> คำสั่ง <HEAD> เป็นคำสั่งที่ใช้ในการกำหนดข้อความส่วนที่เป็นชื่อเรื่องซึ่งภายใต้ของคำสั่งนี้จะมีคำสั่งย่อย อีกคำสั่งหนึ่งคือ คำสั่ง <TITLE>........</TITLE>

รูปแบบคำสั่ง <TITLE>.........</TITLE>

คำสั่ง <TITLE>.....</TITLE> จะเป็นส่วนของการแสดงชื่อของเอกสาร จะปรากฎในขณะที่ไฟล์ HTML ทำงานการแสดงผลจะแสดงในส่วนของไตเติลบาร์ ( Title Bar )

การกำหนดสีของพื้นหลัง

การกำหนดสีจะมีการกำหนดให้มี แอตทริบริต์ BGCOLOR= # สีที่ต้องการ ซึ่งเป็นส่วนหนึ่งของ <BODY> เช่น

1.

<body bgcolor="#0099FF"> สำหรับแทรกสีพื้นหลัง

<body background="a.jpg"> สำหรับแทรกพื้นหลังด้วยรูปภาพ   (a.jpg คือชื่อรูปภาพ)

หรืออาจจะใช้ css ช่วยก็ได้ครับ โดยมี Code ดังนี้

1.

2.

3.

4.

5.

6.

7.

<style type="text/css">

<!--

body {

background-color: #0099FF;

-->

</style>

ส่วน CODE สีสามารถหาได้ตามเว็บทั่วไปครับ

ขนาดตัวอักษร

การกำหนดขนาดตัวอักษรคำสั่งที่ใช้ ....... การกำหนดขนาดตัวอักษรโดยทั่วไปมีด้วยกัน 7 ขนาดซึ่งตั้งแต่ -7 จนถึง +7 หรือจะกำหนดเป็น px ก็ได้ครับ

รูปแบบตัวอักษร

การกำหนดตัวอักษรให้เป็น ตัวหนา คำสั่งที่ใช้ ........

การกำหนดตัวอักษรให้เป็น ตัวเอน คำสั่งที่ใช้ .........

การกำหนดตัวอักษรให้เป็น ตัวขีดเส้นใต้ คำสั่งที่ใช้ <L>.........</L>

1.

2.

3.

4.

5.

6.

7.

8.

<HTML>

<HEAD><TITLE> รูปแบบตัวอักษร </TITLE > </HEAD>

<BODY>

<B>   รูปแบบตัวอักษร ตัวหนา </B>

<U>   รูปแบบตัวอักษร ตัวเอน </U>

<L>   รูปแบบตัวอักษร ตัวขีดเส้นใต้ </L>

</BODY>

</HTML>

ตัวอักษรพิเศษ

ตัวอักษรแบบพิเศษไม่ได้หมายถึงตัวอักษรที่ไม่มีบนแป้นพิมพ์แต่หมายถึงตัวอักษร ที่ไปตรงกับตัวกำหนดคำสั่ง เช่น <, >,",& เป็นต้น

ตัวอักษรพิเศษ แทนด้วย

< &lt ;

> &gt ;

& &amp ;

" &quot ;

คำสั่งแสดงภาพ

รูปแบบคำสั่ง <IMG SRC= "ไฟส์รูปภาพ" > ไฟล์รูปภาพส่วนใหญ่จะเป็นไฟล์ชนิด .GIF .JPG เพราะเว็ปเบราเซอร์ส่วนใหญ่สนับสนุนไฟล์ 2 ชนิดนี้

รูปแบบคำสั่ง <ALT="บอกรายละเอียด">

คำสั่ง ALT จะเขียนต่อจากการแสดงภาพซึ่งเราเขียนคำสั่ง ALT ต่อจากคำสั่งการแสดงภาพ โดยคำสั่งนี้ จะแสดงบอกรายละเอียดเมื่อเรานำเมาส์ไปชี้ที่ภาพ

รูปแบบคำสั่ง BORDER = N คำสั่ง BORDER จะเป็นการกำหนดเส้นกรอบของภาพที่แสดงซึ่ง N = 0 จะไม่มีการแสดงเส้นกรอบ ของภาพและหากมีการกำหนด N มากขึ้นความหนาของกรอบรูปก็จะมากขึ้นตาม

1.

2.

3.

4.

<BODY>

<IMG SRC="test1.jpg" > เมื่อไม่มีการใช้คำสั่ง ALT

<IMG SRC="test1.jpg" ALT="ทดสอบการแสดงภาพ">

</BODY>

การใช้ภาพเป็นตัวเชื่อมโยง

รูปแบบคำสั่ง <A HREF = "ชื่อไฟล์.HTML"> เช่นเราต้องการ Link ภาพ Button.jpg ไปยังหน้าแรกของการสร้างโฮมเพจโดย HTMLเราจะเขียนคำสั่งดังนี้

1.

2.

3.

4.

<BODY>

<A HREF="index.html" >

<IMG SRC"test1.jpg" ALT="ทดสอบการ Link" </A>

</BODY>

การทำตัวหนังสือให้เป็นลิ้งได้

การทำตัวหนังสือให้เป็นลิ้งได้ จะเป็นการเชื่อมต่อโดยตัวหนังสือไปยังอีกหน้าหนึ่่ง หรืออาจจะเป็นหน้าเดิมก็ได้ มีคำสั่งดังนี้

1.

2.

3.

<a href="index.html">ทดสอบระบบ</a> // เชื่อมไปยังหน้า index.html

<a href="mailto:admin@xvlnw.com">ส่งเมลล์</a> // ลิ้งเพื่อส่งเมลล์

<a href="#">ทดสอบลิ้ง</a> // เป็นลิ้งที่ไม่ได้เชื่อมต่อไปที่ใด

คำสั่งสร้างตาราง

ในการสร้างเว็บไซต์ต้องมีการสร้างตารางมาครอบไว้ เพื่อให้การแสดงผลดุดีนั่นเอง โดยคำสั่งในการสร้างตารางมีดังนี้

1.

2.

3.

4.

5.

<table width="500" border="0">

<tr>

<td>&nbsp;</td>

</tr>

</table>

บันทัดแรก คือคำสั่งเริ่มต้นการสร้างตาราง มีการกำหนดขนาดของตารางเป็น 500px และกรอบของตาราง ( border = 0) เป็น 0 คือไม่แสดง

บันทัดที่ 2 เป็นคำสั่งเริ่มต้นสร้างแถวในตาราง

บันทัดที่ 3 เป็นคำสั่งเริ่มต้นสร้างคอลัมน์ในตาราง โดยจะมีกี่คอลัมก็ได้ แล้วแต่ความต้องการของผุ้สร้าง

บันทัดที่ 4 เป็นบันทัดจบคำสั่งการสร้างแถวในตาราง

บันทัดที่ 5 เป็นการจบคำสั่งการสร้างตาราง

ถ้าต้องการ 2 คอลัมน์ก็ทำได้ดังนี้

1.

2.

3.

4.

5.

6.

<table width="500" border="0">

<tr>

<td>&nbsp;</td> // คอลัมน์ 1

<td>&nbsp;</td> // คอลัมน์ 2

</tr>

</table>

ถ้าต้องการ 2 แถว 2 คอลัมน์ สร้างดังนี้

01.

02.

03.

04.

05.

06.

07.

08.

09.

10.

<table width="500" border="0">

<tr> // แถว 1

<td>&nbsp;</td> // คอลัมน์ 1

<td>&nbsp;</td> // คอลัมน์ 2

</tr>

<tr>// แถว 2

<td>&nbsp;</td> // คอลัมน์ 1

<td>&nbsp;</td> // คอลัมน์ 2

</tr>

</table>

Google Sites

Report abuse