สอนภาษาhtml: 2014

วันจันทร์ที่ 8 กันยายน พ.ศ. 2557

HTML tag พื้นฐาน

HTML

HTML ย่อมาจาก Hypertext Markup Language

Text Editor

Text Editor คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่างๆ ปัจจุบันมีโปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย

Web browser

Web browser คือ เว็บเบราว์เซอร์ (web browser) เบราว์เซอร์ หรือ โปรแกรมดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ เช่น Internet Explorer,Mozilla Firefox,Google Chrome,Safari

องค์ประกอบของเอกสาร html

รูปแบบของโครงสร้างพื้นฐานของไฟล์ HTML จะประกอบไปด้วยส่วนที่สำคัญ 2 ส่วนคือ

1. ส่วนของหัวโปรแกรม (HEAD) เป็นการกำหนดข้อความในส่วนที่เป็นชื่อเรื่องซึ่งจะปรากฎอยู่บนไตเติลบาร์ของโปรแกรมเว็บบราวเซอร์เท่านั้น

2. ส่วนเนื้อหาของโปรแกรม (BODY) เป็นส่วนที่สำคัญที่สุดในการแสดงผลทั้งหมด ไม่ว่าจะเป็นหัวเรื่อง เนื้อหาต่าง ๆ การนำรูปภาพต่าง ๆ ลงในเว็บเพจ การนำเสียงเพื่อทำให้เว็บเพจที่น่าสนใจยิ่งขึ้น

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

<head> คือ คำสั่ง < HEAD > เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่องของไฟล์ HTML

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

<body> คือ ส่วนที่มีไว้สำหรับให้ผู้เขียนเว็บเพจใส่คำสั่งหรือแท็กต่าง ๆ บางครั้งอาจเรียกว่า "โค้ด" (Code) เช่น คำสั่งแสดงรูปภาพ, การกำหนดสีตัวอักษร, การทำอักษรวิ่ง, การสร้างตาราง, การทำชุดเชื่อมโยง เป็นต้น

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

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

การตกแต่งตัวอักษร

การตกแต่งตัวอักษร

รูปแบบแท็ก Code และการแสดงผล

1.การกำหนดแบบอักษร

 …  การกำหนดรูปแบบของตัวอักษรในเว็บเพจที่เราต้องการให้แสดงออกบนเว็บ
ตัวอย่างการใช้คำสั่ง

<html>

<head>

<title>การกำหนดขนาดตัวอักษร</title>

</head>

<body>

HTML

HTML

HTML

HTML

</body>

</html>

ผลลัพธ์
HTML
HTML
HTML
HTML

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

เราสามารถกำหนดขนาดของตัวอักษรได้ 2 วิธี

1. ในกรณีที่เป็นหัวข้อ (Heading) สามารถใช้คำสั่งต่อไปนี้

<H1>ขนาดใหญ่สุด</H1>
<H2>ขนาดใหญ่</H2>
<H3>ขนาดกลาง</H3>
<H4>ขนาดปกติ</H4>
<H5>ขนาดเล็ก</H5>
<H6>ขนาดเล็กสุด<H6>

2. ในกรณีทั่วไป จะใช้คำสั่ง เช่น

ตัวอักษรขนาด 3 หรือ
ตัวอักษรขนาด 5

ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
<TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY >
Computer
Computer
Computer
Computer
Computer
Computer
Computer
</BODY>
</HTML>

ผลลัพธ์
Computer Computer Computer Computer Computer
ComputerComputer

3.สีตัวอักษร

สีของตัวอักษร
สีของตัวอักษร สามารถกำหนดได้ 2 แนวทางคือ

1. ใช้คำสั่ง เช่น
ตัวอักษรสีแดง หรือ
ตัวอักษรสีเขียว

2. ใช้คำสั่ง เช่น
ตัวอักษรสีชมพู หรือ
ตัวอักษรสีน้ำเงิน

ตัวอย่างการใช้คำสั่ง

<html>
<head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
<body> ข้อความนี้กำหนดให้เป็นสีแดง 

 ข้อความนี้กำหนดให้เป็นสีน้ำเงิน  

</body>
</html>

4.ตัวเอียง ตัวหนา ตัวขีดเส้นใต้

คำสั่งจะแบ่งได้เป็น 2 พวกดังนี้

1.แบ่งตามลักษณะที่ปรากฏ เช่น ตัวเอียง ตัวหนา

ตัวอักษรแบบตัวหนา (bold)

ตัวอักษรแบบตัวเอน (italic)

ตัวอักษรแบบขีดเส้นใต้ (underline)

2.แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก

<Stong> <Ins> <Del> <Code> <Address> ใช้เน้นข้อความ คำพูดหรือวลี (emphasized) ใช้เน้นข้อความที่สำคัญมากๆ (strong) ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted) ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted) ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code) ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)

5.ตัวขีดฆ่า ตัวยก ตัวห้อย

1. <s>...</s> ใช้แสดงข้อความแบบขีดฆ่าตัวอักษร ทั้งนี้เพื่อเน้นข้อความเปรียบเทียบหรือต้องการในประโยคนั้น

ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
<TITLE> การกำหนดอักษรขีดเส้นใต้ </TITLE>
</HEAD>
<BODY>
กำหนดอักษรขีดเส้นใต้

<S>Microsoft Windows 7</S>

</BODY>
</HTML>

ผลลัพธ์
กำหนดอักษรขีดเส้นใต้
~~Microsoft Windows 7~~

2.  … และ  … การกำหนดแบบอักษรตัวห้อยและแบบอักษรตัวยกในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้ดังนี้

ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
<TITLE>แบบอักษรตัวห้อยและแบบอักษรตัวยก </TITLE>
</HEAD>
<BODY >

Computer2

H2O

</BODY>
</HTML>

ผลลัพธ์
Computer²
H₂O

6.ตัวอักษณวิ่ง ตัวอักษรกระพริบ

1. <MARQUEE> .......... </MARQUEE>ใช้สำหรับแสดงข้อความแบบเคลื่อนที่ไปยังทิศทางที่เราต้องการ มีรูปแบบการใช้ดังน <marquee scrolldelay="ความเร็ว"

direction="ทิศทางวิ่ง">ข้อความ</marquee> - scrolldelay ให้แทนค่าด้วยความเร็วเป็น ตัวเลข ส่วน direction ใส่ได้เฉพาะ Up,Down,Left และ Right

ตัวอย่างการใช้คำสั่ง

<html>
<head>
<title>marque</title>
</head>
<body>
<center>
<marquee scrolldelay="100" direction="Right">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Left">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Up">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Down">WEBTHAIDD</marquee>
</body>
</html>

2.<blink>...</blink> ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป

ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
<TITLE>กำหนดอักษรตัวกระพริบ </TITLE>
</HEAD>
<BODY>
การกำหนดอักษรตัวกระพริบ

<Blink>COMPUTER</Blink>

</BODY>
</HTML>

7.การจัดตำแหน่งข้อความ

1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ...</center>
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก โดยใช้ Attribute align รูปแบบดังนี้ ...ข้อความ...
ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

วันจันทร์ที่ 1 กันยายน พ.ศ. 2557

ข้อสอบ HTML

วันจันทร์ที่ 23 มิถุนายน พ.ศ. 2557

คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บ

Internet

อินเทอร์เน็ต หมายถึง เครือข่ายคอมพิวเตอร์นานาชาติที่มีสายตรงต่อไปยังสถาบันหรือหน่วยงานต่าง ๆ เพื่ออำนวยความสะดวกให้แก่ผู้ใช้รายใหญ่ทั่วโลก ผ่านโมเด็ม (modem) คล้ายกับ Compuserve ผู้ใช้เครือข่ายนี้สามารถสื่อสารถึงกันได้ทางไปรษณีย์อิเล็กทรอนิกส์ (e-mail) สามารถสืบค้นข้อมูลและสารสนเทศ รวมทั้งคัดลอกแฟ้มข้อมูล และโปรแกรมบางโปรแกรมมาใช้ได้ อย่างไรก็ตาม มีผู้เปรียบเทียบว่า อินเทอร์เน็ตเป็นเหมือนทางหลวงระหว่างประเทศ แต่ละประเทศจะต้องมีถนนเข้ามาเชื่อมต่อเข้าไปในประเทศ กล่าวคือ จะต้องมีเครือข่ายภายในรับช่วงต่ออีกทอดหนึ่ง (เช่น ไทยมี Chulanet, KSC , Infonews เป็นต้น ) มิฉะนั้นก็จะใช้ไม่ได้ผล

W.W.W.

w.w.w.(world wide web) อ่านว่า เวิลด์ไวด์เว็บ หมายถึง สถานที่รวมของกลุ่มคอมพิว เตอร์ที่มีข้อมูลเตรียมพร้อมไว้ให้ผู้คนอ่านผ่านทางอินเทอร์เน็ต (Internet) โดยใช้ภาษา เอชทีทีพี (HTTP หรือ Hypertext Tranfer Protocol) ทุกหน้าจะมีทั้งเนื้อหาเรื่องราวต่าง ๆ มีเมนูพร้อมที่จะให้เราสั่งงาน มีคำหลายคำที่มีแถบสีซึ่งเราสามารถกดเมาส์ถามหารายละเอียดต่าง ๆ ในเรื่องนั้นต่อ ซึ่งอาจเป็นการเรียกหาจากแหล่งเดียวกัน หรือจากแหล่งคอมพิวเตอร์อื่นได้ทั่วโลก ดู internet, HTML, ประกอบ

Webpage

เว็บเพจ (Web Page) หมายถึง หน้าเอกสารของบริการ WWW ซึ่งตามปกติจะถูกเก็บอยู่ในรูปแบบไฟล์ HTML (Hyper Text Markup Language) โดยไฟล์ HTML 1 ไฟล์ก็คือเว็บเพจ 1 หน้านั่นเอง ภายในเว็บเพจอาจประกอบไปด้วยข้อความ ภาพ เสียง วิดีโอ และภาพเคลื่อนไหวแบบมัลติมีเดีย นอกจากนี้เว็บเพจแต่ละหน้าจะมีการเชื่อมโยงหรือ “ลิงค์” (Link) กัน เพื่อให้ผู้ชมเรียกดูเอกสารหน้าอื่นๆ ที่เกี่ยวข้องได้สะดวกอีกด้วย

Website

เว็บไซต์ (อังกฤษ: website, web site, Web site) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์จำเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล ในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่างๆ ผู้ทำเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สำหรับธุรกิจหรือองค์กรต่างๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของ เว็บเบราว์เซอร์

Homepage

โฮมเพจ (Home Page) คือเว็บเพจหน้าแรกซึ่งเป็นทางเข้าหลักของเว็บไซต์ ปกติเว็บเพจทุกๆ หน้าในเว็บไซท์จะถูกลิงค์ (โดยตรงหรือโดยอ้อมก็ตาม) มาจากโฮมเพจ ดังนั้นบางครั้งจึงมีผู้ใช้คำว่าโฮมเพจโดยหมายถึงเว็บไซท์ทั้งหมด แต่ความจริงแล้วโฮมเพจหมายถึงหน้าแรกเท่านั้น ถ้าเปรียบกับร้านค้า โฮมเพจก็เป็นเสมือนหน้าร้านนั่นเอง ดังนั้นจึงมักถูกออกแบบให้โดดเด่นและน่าสนใจมากที่สุด

Web browser

เว็บเบราว์เซอร์ (web browser) เบราว์เซอร์ หรือ โปรแกรมดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ เช่น Internet Explorer,Mozilla Firefox,Google Chrome,Safari

HTML

HTML คือ ภาษาที่ใช้ในการเขียนเว็บเพจ ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ในการเขียนข้อความ ลงบนเอกสารที่ต่างก็เชื่อมถึงกันใน cyberspace ผ่าน Hyperlink นั่นเอง

URL

URL คือ ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต ถูกย่อมาจากคำว่า Uniform Resource Locator เป็นเสมือนที่อยู่ (Address) เพื่อการระบุตำแหน่งของเอกสารข้อมูลต่างๆ สำหรับเข้าถึงที่ตั้งทรัพยากร ไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต (Internet) เหล่านั้น ซึ่งไฟล์ข้อมูลแต่ละอันจะมี URL เป็นของตัวเอง โดยแต่ละส่วนของ URL จะเป็นสิ่งที่ใช้ระบุข้อมูลเกี่ยวกับที่ตั้งของเอกสารนั้น

แหล่งที่มา :

http://dictionary.sanook.com/search/dict-computer/internet

http://dictionary.sanook.com/search/dict-computer/www

http://www.thaigoodview.com/library/contest2553/type2/tech04/25/chapter_3.html

http://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/66-server-hosting/1849-web-browser-%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B8%96%E0%B8%B6%E0%B8%87%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-web-browser-%E0%B8%84%E0%B8%B7%E0%B8%AD.html

http://www.codingbasic.com/html

http://guru.google.co.th/guru/thread?tid=068037b012a3d15b

วันที่ : 19 มิถุนายน 2557