การสร้าง Links

การสร้าง Links
บทนี้จะสอนเกี่ยวกับ Link
Link คือการเชื่อมต่อไปยังไปยังปลายทาง ลักษณะ Link บนเว็บไซท์การที่จะ Link ไปยังปลายทางได้ จะต้องเกิดการคลิก Link นั้นๆก่อน
การสร้าง Link นั้นใช้ <a href="URL">……</a>
Example 1:
การ Link ไปยังเว็บไซท์ภายนอก จะต้องระบุ URL เต็ม
<a href="http://www.ohocode.com">การ Link ไปยังเว็บไซท์ภายนอก (ohocode.com)</a>

Example 2:
การ Link ไปยังเว็บเพจต่างๆภายในเว็บไซท์ปัจจุบัน ซึ่งไฟล์นั้นๆอยู่ใน Path เดียวกัน
เช่น ปัจจุบันอยู่ใน http://www.ohocode.com หากจะ Link ไปยังhttp://www.ohocode.com/link.html
หรือ ปัจจุบันอยู่ใน http://www.ohocode.com/folder หากจะ Link ไปยัง http://www.ohocode.com/folder/link.html 
<a href="link.html">Link ไปยังเว็บเพจ link.html </a>

Example 3:
การ Link ไปยังเว็บเพจต่างๆภายในเว็บไซท์ปัจจุบัน ซึ่งไฟล์นั้นๆ อยู่ในโฟลเดอร์ถัดไป หรือลึกเข้าไป
วิธีการคือ ให้ระบุโฟลเดอร์ลงไปด้วยแล้วตามด้วยชื่อไฟล์
เช่น ปัจจุบันอยู่ http://www.ohocode.com/link2.html หากต้องการ Link ไปยังhttp://www.ohocode.com/folder1/link1.html ดังภาพ

<a href="folder1/link1.html">Click here to go to folder1/link1.html</a> Example 4: หากปัจจุบันอยู่ใน folder1/link1.html จะ Link ไป link2.html ที่อยู่นอก folder1 เช่น ปัจจุบันอยู่ http://www.ohocode.com/folder/link1.html หากต้องการ Link ไปยังhttp://www.ohocode.com/link2.html ดังภาพ <a href="../link2.html">A link to link2.html</a> <a> นั้น มี Attribute อีกตัวนึง คือ title  ตัวอย่าง <a href="http://www.ohocode.com" title="Free source code – สอน javascript css html php asp">Link to ohocode.com</a> เมื่อนำเมาส์ไปวางบน Link จะมีข้อความขึ้นมาว่า Free source code – สอน javascript css html php asp เปรียบเสมือนการอธิบายเกี่ยวกับ Link นี้ ในส่วน title นี้ ควรต้องใส่ไว้ เพราะจะส่งผลให้ Search engine เข้ามาอ่านและเก็บ keyword ไปได้ ขอบคุณข้อมูลจาก : OHOCode

Attributes

Attributes
Attributes คือ คุณลักษณะหรือคุณสมบัติของ Elements
เช่น
<font color="#FFFFFF">….</font>
color เป็น Attribute ของ font

<a href="http://ohocode.com">…..</a>
href เป็น Attribute ของ a

ฯลฯ

ฉะนั้น Attribute ต่างๆนั้นเปรียบเสมือนคำสั่งย่อยๆของ Element นั้น แต่ละ Attribute ต้องการข้อมูลที่ต่างกัน เช่น href="URL Path" , color="ค่าสีเลขฐาน16" , title="ข้อความ" ฯลฯ



Attribute ที่สามารถใช้ได้กับหลาย Element
เช่น
<a title="ข้อความ">………..</a>

<img title="ข้อความ" />

ฯลฯ

แต่บาง Attribute ใช้เฉพาะบาง Element เท่านั้น
เช่น
<form method="post">…………..</form>

<input type="submit" />

ฯลฯ

ส่วน Element กับ Attribute อื่นๆนั้น ยังมีอีกมากมายซึ่งคงไม่ขอกล่าวถึงครับ หากต้องการศึกษาในส่วนนี้เพิ่มเติม ผมแนะนำว่า ศึกษาจากการ คลิกขวา -> View source เว็บหน้าเว็บไซท์ต่างๆ หรือหากใช้ Dream Weaver เป็นจะเป็นการดีมากครับ เพราะโปรแกรมตัวนี้เราสามารถดู code ของเว็บเพจได้ ประกอบกับได้เห็นหน้า Design ไปด้วย

ขอบคุณข้อมูลจาก : OHOCode

Elements พื้นฐานต่างๆ

Elements พื้นฐานต่างๆ
บทนี้จะยกตัวอย่าง Element พื้นฐานต่างๆ แล้วอธิบายประกอบนะครับ

Elements ที่เป็น Tag คู่

Example 1: ตัวอักษรหนา

<strong>Stronger emphasis.</strong>

ผลลัพธ์:
Stronger emphasis.



Example 2: ตัวอักษรเล็ก

<small>This should be in small.</small>

ผลลัพธ์:
This should be in small.



Example 3: ตัวอักษรเอียง

<em>This should be in Emphasise.</em>

ผลลัพธ์:
This should be in Emphasise.



Example 4: ตัวอักษรเอียงและเล็ก
หากต้องการใช้ทั้ง 2 Elements (ที่ต้องการ Tag ปิด) ต้องเปิดปิด Tag ก่อนหลังให้ถูกต้อง <คู่ที่1><คู่ที่2> ข้อความ </คู่ที่2></คู่ที่1>


<em><small>Emphasised small text</small></em>

Emphasised small text



Example 5: <ul> คือชุดรายการ  <li> คือรายการ

<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>

ผลลัพธ์:

A list item
Another list item
Example 6:

<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>

ผลลัพธ์:

First list item
Second list item


Elements ที่เป็น Tag เดียว

Example 1: ขึ้นบรรทัดใหม่

Some text<br /> and some more text in a new line

ผลลัพธ์:
Some text
and some more text in a new line



Example 2: ขีดเส้นคั่นบรรทัด

<hr />

ผลลัพธ์:

ขอบคุณข้อมูลจาก : OHOCode

เริ่มสร้างเว็บเพจด้วย NotePad

เริ่มสร้างเว็บเพจ
เริ่มสร้างเว็บเพจด้วย NotePad

การสร้างเอกสาร HTML หรือเว็บเพจ เป็นเรื่องที่ง่ายและสะดวก เพียงแต่เปิดโปรแกรม NotePad  Start >Program >Accessories >NotePad  หรือกดปุ่ม winlogo + R แล้วพิมพ์ notepad ตามด้วย Enter เมื่อเปิด Notepad แล้วพิมพ์คำสั่ง HTML ลงไป จากนั้นก็ทำการจัดเก็บไฟล์โดยตั้งชื่อเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก และกำหนดนามสกุลเป็น .html (ในตอนพิมพ์ชื่อไฟล์ แนะนำให้พิมพ์ชื่อและนามสกุลของไฟล์ไว้ในเครื่องหมายคำพูด เพื่อป้องกันมิให้โปรแกรม NotePad เติมนามสกุล .txt ต่อท้าย) จากนั้นก็เปิดโปรแกรมเบราเซอร์ เช่น IE หรือ Netscape แล้วเปิดไฟล์เอกสารเว็บที่สร้าง เพื่อดูผล

<HTML>
<HEAD>
<TITLE>...............</TITLE>
</HEAD>
<BODY>
...............
...............
</BODY>
</HTML>


คำสั่งในการเริ่มต้นในการสร้างเว็บเพจ
คำสั่งเริ่มต้น

<HTML>..........</HTML>

คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML


ส่วนหัวของเว็บเพจ

<HEAD>..........</HEAD>

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

กำหนดข้อความในส่วนหัวของเว็บเพจหรือไตเติลบาร์

<TITLE>..........</TITLE >

คำสั่ง <TITLE> เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML ซึ่งข้อความภายในคำสั่งจะปรากฎหรือแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บเบราเซอร์ แต่จะไม่แสดงในส่วนของการแสดงผลในโปรแกรมเว็บเบราเซอร์


ส่วนเนื้อหาของเว็บเพจ

<BODY>..........</BODY>

คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บเบราเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่างๆ

ขอบคุณข้อมูลจาก : OHOCode

โครงสร้างเอกสาร HTML

โครงสร้างเอกสาร HTML

ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่ายๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag <HTML>?</HTML>


โครงสร้างไฟล์ HTML

ส่วนหัวเรื่องเอกสารเว็บ (Head Section)

Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ

<HEAD>
<TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=TIS-620">
<META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ">
<META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2, ?">
</HEAD>


ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี และควรใช้เฉพาะภาษาอังกฤษที่มีความหมายครอบคลุมถึงเนื้อหาของเอกสารเว็บ หรือมีลักษณะเป็นคำสำคัญในการค้นหา (Keyword)

การแสดงผลจาก Tag TITLE บนเบราเซอร์จะปรากฏข้อความที่กำกับด้วย Tag TITLE ในส่วนบนสุดของกรอบหน้าต่าง (ใน Title Bar ของ Window นั่นเอง)

Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการทำคลังบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine) และค่าอื่นๆ ของการแปลความหมาย

การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง


ส่วนเนื้อหาเอกสารเว็บ (Body Section)

Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ

ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> ? </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้

กลุ่มคำสั่งเกี่ยวกับการจัดการพารากราฟ

กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร

กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)

กลุ่มคำสั่งเกี่ยวกับการทำลิงค์

กลุ่มคำสั่งจัดการรูปภาพ

กลุ่มคำสั่งจัดการตาราง (Table)

กลุ่มคำสั่งควบคุมเฟรม

ขอบคุณข้อมูลจาก : OHOCode