สอนภาษาhtml: 2014

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

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

Internet

อินเทอร์เน็ต (อังกฤษ: Internet) หมายถึง เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ที่มีการเชื่อมต่อระหว่างเครือข่ายหลายๆ เครือข่ายทั่วโลก โดยใช้ภาษาที่ใช้สื่อสารกันระหว่างคอมพิวเตอร์ที่เรียกว่า โพรโทคอล (Protocol) ผู้ใช้เครือข่ายนี้สามารถสื่อสารถึงกันได้ในหลายๆ ทาง อาทิเช่น อีเมล เว็บบอร์ด และสามารถสืบค้นข้อมูลและข่าวสารต่างๆ รวมทั้งคัดลอกแฟ้มข้อมูลและโปรแกรมมาใช้ได้

WWW

เวิลด์ไวด์เว็บ (World Wide Web หรือ WWW หรือ W3 หรือ Web) คือ บริการค้นหรือเรียกดู ข้อมูลแบบหนึ่ง ในอินเทอร์เน็ต ข้อมูลในเวิลด์ไวด์เว็บ จะอยู่ในแบบสื่อผสม หรือมัลติมีเดีย (multimedia) ที่มีทั้งตัวอักษร รูปภาพ เสียง ภาพเคลื่อนไหวแบบวิดีโอข้อมูลจะถูกแบ่งเป็นหน้า ๆ แต่ละหน้าสามารถ เชื่อมโยงถึงกันได้เป็นแบบเครือข่ายคล้ายใยแมงมุม จากแหล่งต่าง ๆ ที่กระจายอยู่ทั่วโลก

Webpageเว็บเพจ (อังกฤษ: webpage, web page) หรือ หน้าเว็บ หมายถึง หน้าหนึ่ง ๆ ของเว็บไซต์ ที่เราเปิดขึ้นมาใช้งานโดยทั่วไป เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML หรือ XHTML (ซึ่งมักมีนามสกุลไฟล์เป็น htm หรือ html) มีลิงก์สำหรับเชื่อมโยงไปยังเว็บเพจหน้าอื่น ๆ สามารถใส่รูปภาพและรูปภาพยังสามารถเป็นลิงก์ กล่าวคือสามารถคลิกบนรูปเพื่อกระโดดไปหน้าอื่นได้ นอกจากนี้ยังสามารถใส่แอปเพล็ต (applet) ซึ่งเป็นโปรแกรมขนาดเล็กแสดงภาพเคลื่อนไหว มีปฏิสัมพันธ์กับผู้ใช้ หรือสร้างเสียง ได้อีกด้วย
โปรแกรมที่ใช้เปิดดูเว็บเพจ เรียกว่า เว็บเบราว์เซอร์ ตัวอย่างเว็บเบราว์เซอร์ที่เป็นที่นิยม เช่น อินเทอร์เน็ตเอกซ์พลอเรอร์, Netscape, มอซิลลา ไฟร์ฟอกซ์, และ ซาฟารี เป็นต้น
โปรแกรมสำหรับสร้างเว็บเพจ เช่น โปรแกรม Macromedia Dreamweaver , PHP & MySQL , Flash Professional เป็นต้น

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

Homepageโฮมเพจ คือคำที่ใช้เรียกหน้าแรกของเว็บไซต์ โดยเป็นทางเข้าหลักของเว็บไซต์ เมื่อเปิดเว็บไซต์นั้นขึ้นมา โฮมเพจ ก็จะเปรียบเสมือนกับเป็นสารบัญและคำนำที่เจ้าของเว็บไซต์นั้นได้สร้างขึ้น เพื่อใช้ประชาสัมพันธ์องค์กรของตน นอกจากนี้ ภายในโฮมเพจก็อาจมีเอกสารหรือข้อความที่เชื่อมโยงต่อไปยังเว็บเพจอื่นๆอีก ด้วย

Web Browser
เว็บเบราว์เซอร์ (web browser) เบราว์เซอร์ หรือ โปรแกรมดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่ สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่าย คอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ
ประโยชน์ของ Web Browser
สามารถดูเอกสารภายในเว็บเซิร์ฟเวอร์ได้ อย่างสวยงามมีการแสดงข้อมูลในรูปของ ข้อความ ภาพ และระบบมัลติมีเดียต่างๆ ทำให้การดูเอกสารบนเว็บมีความน่าสนใจมากขึ้น ส่งผลให้อินเตอร์เน็ตได้รับความนิยมเป็นอย่างมากเช่นในปัจจุบัน ปัจจุบัน web browser ส่วนใหญ่จะรองรับ html 5 และ อ่าน css เพื่อความสวยงามของหน้า web page

รายชื่อเว็บเบราว์เซอร์ (web browser) ที่เป็นที่นิยมอย่างแพร่หลาย

Internet Explorer
Mozilla Firefox
Google Chrome
Safari

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 จะเป็นแบบนี้ครับ

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

URL
URL (ยูอาร์แอล) ย่อมาจากคำว่า Uniform Resource Locator หมายถึง ตัวบ่งบอกข้อมูล หรือ ที่อยู่ (Address) ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต เช่น URL ของกูเกิลประเทศไทย คือ http://www.google.co.th

แหล่งอ้างอิงhttp://th.wikipedia.org/wiki/%E0%B8%AD%E0%B8%B4%E0%B8%99%E0%B9%80%E0%B8%97%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B9%80%E0%B8%99%E0%B9%87%E0%B8%95

http://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%80%E0%B8%9E%E0%B8%88

http://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C

http://www.google.co.th/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&sqi=2&ved=0CHAQFjAA&url=http%3A%2F%2Fwww.mindphp.com%2F%25E0%25B8%2584%25E0%25B8%25B9%25E0%25B9%2588%25E0%25B8%25A1%25E0%25B8%25B7%25E0%25B8%25AD%2F73-%25E0%25B8%2584%25E0%25B8%25B7%25E0%25B8%25AD%25E0%25B8%25AD%25E0%25B8%25B0%25E0%25B9%2584%25E0%25B8%25A3%2F2089-home-page-%25E0%25B8%2584%25E0%25B8%25B7%25E0%25B8%25AD%25E0%25B8%25AD%25E0%25B8%25B0%25E0%25B9%2584%25E0%25B8%25A3.html&ei=jWvRT9m5JYTJmAXE6uWFAw&usg=AFQjCNFHRQoXz6HZc9410zp2q2Brf3ECiw&sig2=5EEY-P4H70D_5Nhqga965Q

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.xvlnw.com/knowledge-readknowledge-id40.html

http://guru.google.co.th/guru/thread?tid=068037b012a3d15b&pli=1 /6 มิถุนายน 2555

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

การกำหนดเเบบอัษร

 ข้อความที่ต้องการ เพื่อ ทำให้ตัวหนังสือเป็นตัวหนา
 ข้อความที่ต้องการ เพื่อ ทำให้ตัวหนังสือเป็นตัวเอียง
 ข้อความที่ต้องการ เพื่อ ขีดเส้นใต้ ให้กับตัวหนังสือ
<s> ข้อความที่ต้องการ </s>เพื่อ ตัวอักษรที่มีเส้นขวางพาดทับ
<center> ข้อความที่ต้องการ </center>เพื่อ จัดตำแหน่งจัดกลางให้กับตัวอักษร

2. กำหนดรูปแบบตัวอักษรข้อความที่ต้องการ

อยากให้ข้อความที่เราเพิ่มเข้าไปเป็นตัวอักษรพิเศษ เราก็เอาชื่อของแบบตัวอักษร

แทนที่เข้าไปค่ะ อย่างตัวอย่างนี้ เราก็เปลี่ยนตรง AngsanaUPC เป็นชื่ออื่นแทน

ขนาดเเละสีตัวอักษร

สามาถรกำหนดได้ 2 วิธี

1.

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

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

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

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

สีของตัวอักษร

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

1. ใช้คำสั่ง เช่น

ตัวอักษรสีแดง หรือ

ตัวอักษรสีเขียว

2. ใช้คำสั่ง เช่น

ตัวอักษรสีชมพู หรือ

ตัวอักษรสีน้ำเงิน

ลักษณะของตัวอักษร

 ลักษณะของตัวอักษร สามารถกำหนดได้ 3 แบบคือ

 ตัวหนา

 ตัวเอียง

 ขีดเส้นใต้ตัวอักษร

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

รูปแบบคำสั่ง :...ข้อความ..... :คำสั่งตัวหนา

...ข้อความ..... :คำสั่งตัวเอียง...ข้อความ..... :คำสั่งขีดเส้นใต้

ทำตัวเอียงด้วยแทค i

<HTML>
<Head>
<Title> ดูผลลัพท์ตัวอย่าง </Title>
</Head>
<Body>
ข้อความตัวเอียง ข้อความตัวไม่เอียง
</Body>
</HTML>

4. ทำตัวขีดเส้นใต้ด้วยแทค U

<HTML>
<Head>
<Title> ดูผลลัพท์ตัวอย่าง</Title>
</Head>
<Body>
ข้อความตัวขีดเส้นใต้ ข้อความตัวไม่ขีดเส้นใต้
</Body>
</HTML>

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

รูปแบบ tag code คือ

ตัวขีดฆ่า<del> ข้อความที่ต้องการขีดฆ่า </del>

ตัวยก ข้อความหรือตัวเลขข้อความหรือตัวเลขที่ต้องการยก

ตัวห้อย ตัวอักษร,ตัวเลข,ข้อความตัวอักษร,ตัวเลขที่ต้องการห้อย

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

รูปแบบ tag code คือ

code ที่เขียนใน Notepad

<HTML>

<HEAD>

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

</HEAD>

<BODY> <BLINK>welcome</BLINK>

</BODY>

</HTML>

7. ตัวอักษรวิ่่ง

นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรง

นั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา

เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้าง

ล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์นำไปใช้ในการตกแต่งเวบเพจนำไปใช้ในการตกแต่ง

เว็บเพจ

รูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง

<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"

scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>

ทิศทาง
คำอธิบาย
UP
วิ่งจากด้านล่างขึ้นด้านบน
DOWN
วิ่งจากด้านบนลงด้านล่าง
LEFT
วิ่งจากด้านขวาไปด้านซ้าย
RIGHT
วิ่งจากด้านซ้ายไปด้านขวา
ตัวอย่างโปรแกรม <HTML>
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee>ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>

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

ในการกำหนดตำแหน่งในภาษา HTML สามารถกำหนดได้หลายรูปแบบค่ะ ทั้งแบบกำหนด

เป็นแท็ก และการกำหนดเป็น Attribute ของแท็กค่ะ โดยมีรูปแบบดังนี้ค่ะ

1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ... </center>

2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก โดยใช้ Attribute align

รูปแบบดังนี้

 ...ข้อความ...

ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

รูปแบบการจัดตำแหน่งข้อความ

<html>
<head><title> <head><title> <head><title> <head><title> <head><title>

....การจัดตำแหน่งข้อความ....</title></head>

<body>
<center> ข้อความนี้อยู่กึ่งกลาง</center> 

 ข้อความชิดซ้าย 

 ข้อความนี้อยู่กึ่งกลาง 

 ข้อความนี้ชิดขวา </body>

<body><center> ข้อความนี้อยู่กึ่งกลาง</center> 
 ข้อความชิดซ้าย 
 ข้อความนี้อยู่กึ่งกลาง 
 ข้อความนี้ชิดขวา </body>

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

ประวัติส่วนตัว

ชื่อ น.ส.วิราวัลย์ เเมมิ่ง

เลขที่26 ชั้นม.6/1

ชื่อเล่น ปอยย์

เกิดปี พ.ศ.2538

ชอบ วิชาคอมพิวเตอร์

งานอดิเรก ร้องเพลง เล่นกีต้าร์

ชอบสี สีฟ้า

อาหารที่ชอบ กะเพราไก่ไข่ดาว

นับถือศาสนา อิสลาม