RSS
Facebook
Twitter

วันเสาร์ที่ 1 มิถุนายน พ.ศ. 2556

HTML เบื้องต้น

Posted by Unknown on 08:27 with No comments

โครงสร้างของภาษา HTML

โครงสร้างของ ภาษา HTML นั้น ประกอบไปด้วยส่วนต่าง ๆ ที่สำคัญดังนี้ คือ

<html>
<head>
<title>การกำหนด background</title>
</head>
<body bgcolor="color">
</body>
</html>
โดยแต่และส่วนสามารถอธิบายความหมายได้ดังนี้
<html> และ </html> เป็น tag ที่ใช้เพื่อกำหนดว่าเอกสารต่อไปนี้เป็นเอกสารที่ใช้ภาษา HTML เป็น Markup Language และจะไม่ปรากฏในโปรแกรม Web Browser
<head> และ </head> เป็น tag ที่ใช้กำหนดส่วนหัวของเอกสาร Head ไม่ได้เป็นส่วนของเอกสารภายใน แต่จะให้ข้อมูลเกี่ยวกับเอกสารฉบับนี้
<title> และ </title> เป็นการระบุข้อความที่ต้องการให้เป็นส่วนหัวของเอกสาร Title จะเป็นส่วนหนึ่งของ Head โดยข้อความที่อยู่ใน Title จะไปปรากฏอยู่ที่ส่วนบนสุดของ Web Browser
<body> และ </body> เป็น tag ที่บอกถึงลักษณะต่าง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body จะมี Attributes ต่าง ๆ ได้แก่ BGCOLOR (หมายถึงกากำหนดสีพื้นด้านหลังของเอกสาร) , TEXT (หมายถึงการกำหนดสีของตัวอักษรในเอกสาร) เป็นต้น
หมายเหตุ : <คำสั่ง> เรียกว่า tag เปิด </คำสั่ง> เรียกว่า Tag ปิด

 Background

การกำหนด Background

<html>
<head>
<title>การกำหนด background</title>
</head><body bgcolor="color">
</body>
</html>
เราสามารถกำหนดสีของ background ได้โดยการเพิ่มคำสั่ง bgcolor ลงใน tag <body> (ตัวอย่างด้านบน) ส่วนคำว่า color นั้น หมายถึง ชื่อสีหรือ code สีที่ใช้กำหนดสีของ background
ตัวอย่างของชื่อสี เช่น black white blue green red ฯลฯ
ส่วน Code ของสี คือเลขฐาน16 คือ(0-9,A-F) ซึ่งจะมีทั้งหมาด 6 ตัว โดยจะแทนค่าในสีต่าง ๆ ดังนี้ 2 ตัวแรกจะแทนค่าสีแดง(R) 2 ตัวกลางจะแทนค่าสีเขียว(G ) ส่วน 2 ตัวสุดท้ายจะแทนค่าสีน้ำเงิน(B)
 
การใช้ภาพเป็น Background

<html>
<head>
<title>การกำหนด background </title>
</head><body background="URL">
</body>
</html>
การใช้รูปภาพเป็น background คือการแทรกคำสั่งเข้าไปใน <body> เช่นเดียวกับการกำหนดสี background ตัวแปร URL คือ path ของ file รูปภาพเช่น http://www.sambaweb/thai-dev.com/46860banner03.gif หรือถ้าหาก อยู่ใน directory เดียวกัน สามารถกำหนดเป็น ชื่อ file ได้เลยเช่น <body background="bg02.gif">
และถ้าหากต้องการกำหนดทั้งสีและภาพ ที่เป็น background สามารถทำได้ดังตัวอย่าง ดังนี้

ข้อควรจำ : 
<body bgcolor="color" background="URL"> จะต้องมีเพียง หนึ่งเดียว ในแต่ละเพจ ไม่สามารถใช้ทั้ง <body bgcolor> และ <body background>ในเพจเดียวกัน เพราะว่า ภาษา html จะเลือก body เพียงอันเดียวเท่านั้น ซึ่งจะ ทำให้การตีความของ ภาษา HTML ผิดพลาด

 
Music Background

<html>
<head>
<title>การกำหนด music background</title>
</head>
<body><bgsound src="URL" loop="จำนวนรอบ"> </body>
</html>
การกำหนด music background ทำได้โดยการ tag คำสั่ง <bgsound> ลงใน โฮมเพจ ดังตัวอย่างด้านบน URL คือที่อยู่ของ file เช่น http://www.sambaweb.com/thai-dev หรือ ถ้าอยู่ใน Directory เดียวกัน สามารถกำหนดเป็นชื่อ file ได้เลยเช่น <body bgsound="song.mid">
สำหรับตัวแปร จำนวนรอบ คือจำนวนรอบของการวนเพลง หากต้องการให้วนไปเรื่อยๆ ให้ใช้คำสั่ง <bgsound src="URL" loop="INFINITE">หรือ ใช้ -1 แทน INFINITE ก็ได้

ใส่ข้อความ

ใส่ข้อความลงในโฮมเพจ

<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>ข้อความที่ต้องการ
</body>
</html>
การใส่ข้อความลงในโฮมเพจสามารถใส่ลงไประหว่าง <body> .... </body> ได้เลย ดังตัวอย่างด้านบน แต่โปรแกรม webbrowser จะไม่สามารถอ่านการเว้นวรรคของเราได้ เช่น ถ้าคุณพิมพ์ว่า
 
<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>HTML คือภาษาที่ใช้เขียนโฮมเพจ
</body>
</html>
กับ 

<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>HTML
คือภาษาที่ใช้เขียนโฮมเพจ
</body>
</html>
ผลที่ได้ก็คือ ข้อความดังกล่าวจะเป็นบรรทัดเดียวกัน

 
การขึ้นบรรทัดใหม่

<html>
<head>
<title>คำสั่งขึ้นบรรทัดใหม่</title>
</head>
<body>
HTML<br>
DHTML<br>
Java script<br>
Java applet<br>
</body>
</html>
คำสั่งสำหรับขึ้นบรรทัดใหม่ใช้คำสั่ง <br> วางไว้ท้ายข้อความที่ต้องการ Webrowser จะแสดงผลข้อความต่อจากนั้นในบรรทัดต่อไป 

การขึ้นย่อหน้าใหม่

การขึ้นย่อหน้าใหม่

<html>
<head>
<title>คำสั่งขึ้นย่อหน้าใหม่</title>
</head>
<body>
<p>HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator</p>
<p>ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้</p>
</body>
</html>
<p>......</p>คือคำสั่งที่ใช้สำหรับย่อหน้าใหม่
คำสั่งสำหรับจัดตำแหน่งของย่อหน้า <p align="ตำแหน่ง">
 
<html>
<head>
<title>คำสั่งขึ้นย่อหน้าใหม่</title>
</head>
<body><p align="right">HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator</p>
<p align="center">ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้ </p>
</body>
</html>
การกำหนดตำแหน่งของย่อหน้าทำได้โดยการเพิ่มคำสั่งลงใน <p> ดังตัวอย่าง ตัวแปร ตำแหน่ง คือ ตำแหน่งที่ต้องการ มีอยู่ 3 อย่างคือ
left = ชิดขอบซ้าย
right = ชิดขอบขวา
center = กลางหน้ากระดาษ


Categories:

0 ความคิดเห็น:

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

สมัครสมาชิก: ส่งความคิดเห็น (Atom)