รวมหัวข้อ สอนสร้างเว็บไซต์ด้วยภาษา html

07:38

เพื่อให้ง่ายต่อการนำไปใช้งานและศึกษาผมได้รวบรวมหัวข้อต่างๆที่เกี่ยวกับสอนการสร้างเว็บไซต์ด้วยคำสั่ง html เบื้องต้นไว้ในหัวข้อนี้ครับ

ทำความรู้จัก html ก่อนเริ่มต้นสร้างเว็บไซต์
สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 1ทำความรู็จักและเกริ่นนำ
สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 2 โครงสร้างของ html
สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 3 คำสั่งเบื้องต้นที่ใช้งานบ่อย

สามารถหาความรู้เพิ่มเติมได้จาก >>>> http://www.w3schools.com/
Read More »

สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 3 คำสั่งเบื้องต้นที่ใช้งานบ่อย

07:28

tag และคำสั่งต่างๆที่จำเป็นต้องรู้ในการสร้างเว็บไซต์

ในหัวข้อ สอนสร้างเว็บไซต์ด้วยภาษา html เราพอจะทราบแล้วว่าการสร้างเว็บเพจให้เป็นเว็บไซต์ด้วยภาษา html มีโครงสร้างยังไง มีอะไรบ้าง ขอทบทวนซักนิดนะครับ เว็บเพจจะมีโครงสร้างหน้าเว็บดังนี้

<html>
<head>
<title>ส่วนหัว </title>
</head>
<body>
<h1>ตัวอย่าง</h1>
<p>ข้อมูลอันแรก</p>
</body>
</html>

โดย tag(แท็ก) คำสั่งดังตัวอย่างเรียกว่าแท็กคำสั่งแบบเปิดและปิด เช่น <title>..... </title> และอีกประเภทคือแบบเดี่ยวเช่น <br> เรามาดูซิว่าแท็กคำสั่งต่างๆในการทำเว็บไซต์มีอะไรบ้าง

1.คำสั่งหลักๆที่ใช้งานในการทำเว็บเพจ
<html>....</html> คือ คำสั่งสำหรับบอกว่านี้คือใสส่วนของเว็บไซต์ทั้งหมด
<head>...</head> คือ ส่วนสำหรับการใส่รายละเอียดข้อมูลของเว็บไซต์และการใช้ชุดคำสั่งบางประเภทเช่น javascript css เป็นต้น
<title>......</title> คือ คำสั่งสำหรับแสดงชื่อหน้าเว็บเพจนี้
<body>....</body> คือ คำสั่งสำหรับบอกว่านี้คือส่วนของเนื้อหาทั้งหมดที่ใช้แสดงบนเว็บเพจ

2.คำสั่งเพื่อกำหนดส่วนหัวของเรื่อง <h>

<h1>test</h1>
<h2>test</h2>
<h3>test</h3>
<h4>test</h4>
<h5>test</h5>

<h6>test</h6>

เมื่อนำไปใช้จะมีลักษณะดังนี้

test

3.คำสั่งเพื่อกำหนดบรรทัดหรือย่อหน้า <p>

<p>test</p>

เมื่อนำไปใช้จะมีลักษณะดังนี้

test

test

test

4.คำสั่งเพื่อกำหนดลิงค์ <a>

<a href="http://smileandsbyeseo.blogspot.com/">ทดสอบ</a>

เมื่อนำไปใช้จะมีลักษณะดังนี้

ทดสอบ

5.คำสั่งใส่รูปภาพ <img>

<img src="seo.jpg">

เมื่อนำไปใช้จะมีลักษณะดังนี้

สำหรับบทนี้ สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 3 ก็เป็นการเกริ่นนำสำหรับคำสั่งที่จำเป็นต้องรู้นะครับเนื่องจากใช้งานบ่อย บทต่อๆไปยังมีคำสั่งที่ต้องเรียนรู้อีกเยอะครับ ก็ค่อยๆนำไปใช้กันนะครับ

สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 2 โครงสร้างของ html

07:11

คำสั่งพื้นฐานที่ใช้งานบ่อยและควรต้องรู้ในภาษา html

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

ตัวอย่างโครงสร้างภาษา html

<html>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

ขอบคุณรูปภาพจาก http://www.w3schools.com/html/html_intro.asp

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

โดยปกติแล้วเว็บเพจจะมี tag อีกชุดหนึ่งสำหรับการบอกว่าหน้าเว็บนี้เกี่ยวกับอะไรและเป็นชุดคำสั่งสำหรับใช้งานโค้ดบางอย่างเช่น ชุคดำสั่งของ Javascript นะครับนั่นคือ <head>...</head> เช่น

<html>
<head>
<title>ส่วนหัว </title>
</head>
<body>
<h1>ตัวอย่าง</h1>
<p>ข้อมูลอันแรก</p>
</body>
</html>

ก็ขอจบเรื่อง สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 2 ไว้เท่านี้ก่อนนะครับ สามารถย้อนกลับไปดู สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 1 ได้ด้วยนะครับ ^_^

สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 1ทำความรู็จักและเกริ่นนำ

06:49

โครงสร้างและคำสั่งต่างๆในภาษา html เบื้องต้นที่ต้องรู้

ตอนนี้เราจะมาทำความรู้จักเกี่ยวกับ ภาษา html กันก่อนนะครับ เนื่องจากภาษา html เป็นภาษาพื้นฐานสำหรับการพัฒนาสร้างเว็บเพจให้กลายเป็นเว็บไซต์ เราต้องรู้จักองค์ประกอบของภาษา html ดังนี้ครับ

โครงสร้างของ ภาษา html
ภาษา html จะประกอบด้วยคำสั่งต่าง เรียกว่า tag จะมีลักษณะ <> เช่น

<html>
<head>
<title>ส่วนหัว </title>
</head>
<body>
<h1>ตัวอย่าง</h1>
<p>ข้อมูลอันแรก</p>
</body>
</html>

จากตัวอย่างจะเห็น tag คำสั่งที่สำคัญๆได้แก่ tag <html>, tag <body>, tag <h> , tag <p>,tag <head>, tag <title> เป็นต้น
โครงสร้างของ ภาษา html จะเริ่มด้วย tag <html> ตามด้วย tag <head> ตามด้วย tag <body>
คุณสามารถสร้าเว็บเพจได้โดยการก๊อปปี้โค้ดด้านบนลงโปรแกรม notepad แล้วเซฟไฟล์เป็นนามสกุล .html ลองดูวิธีทำตามรูปด้านล่างนี้ครับ

สร้าง text Document ขึ้นมาครับเพื่อจะเขียนโค้ดลงไป

ทำการดับเบิ้ลคลิ๊กเพื่อเปิดไฟล์ขึ้นมาครับ หรือ คลิ๊กเมาส์ขวา > open with > notepad ครับ แล้วทำการเพิ่มโค้ดลงไปดังตัวอย่างครับ

กดเลือก File > save as เพื่อบันทึกงานครับ

จะแสดงหน้าให้บันทึกไฟล์ครับ ตั้งชื่อว่า test.html ในช่อง Encoding ให้เลือกเป็น UTF-8 ครับเพื่อทำให้แสดงภาษาไทยได้ แล้วกด save ครับ

คลิ๊กขวาที่ไฟล์ชื่อ test.html ที่เราเพิ่งสร้างไปครับ > open with > google chrome(หรือเว็บบราวเซอร์อื่นเช่น IE, firefox ก็ได้ครับ)

จะแสดงหน้าเว็บแบบตัวอย่างครับ

หวังว่า สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 1 คงไม่ยากจนเกินไปนะครับ ^_^