แสดงบทความที่มีป้ายกำกับ html แสดงบทความทั้งหมด

สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 5 Tag h (ส่วนหัวเรื่อง)


ในบทนี้เราจะมาทำความรู้จัก Tag H กัน Tag H เป็นคำสั่ง เพื่อบอกให้ทราบว่าข้อความที่อยู่ในแท็กนี้นั้นคือหัวเรื่อง Tag H  จะถูกใช้งานภายใต้ Tag body นอกจากนี้ Tag H ยังมีผลต่อการทำSEO Onpage ด้วย( การทำSEO onpage) สำหรับคำสั่งTag H นั้นจะมีตั้งแต่ <h1> ไปจนถึง <h6> โดย  <h1> จะมีขนาดและความสำคัญที่สุด เราลองมาดูการนำไปใช้งานกันครับ

<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

จะได้ผลลัพธ์คือ 

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
ส่วนการนำ คำสั่งTag H ไปใช้นั้นก็ขึ้นอยู่กับเนื้อหาของเราว่าต้องการเน้นย้ำความสำคัญแค่ไหนครับ โดยปกติแล้ว <h1> มักใช้สำหรับหัวเรื่องที่มีความสำคัญที่สุด

Read More »

สอนสร้างเว็บไซต์ด้วยภาษา html ตอนที่ 4 รู้จัก Attributes(แอทริบิวต์)


Attributes(แอทริบิวต์) คือ คุณสมบัติหรือคุณลักษณะเพิ่มเติมของ Tag นั้นๆ จะมีลักษณะ คำสั่ง="ค่า" เช่น

<html lang="en-US">
<body>

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

</body>
</html>

จากตัวอย่างคำสั่งที่เป็น สีแดง จะบ่งบอกถึงคุณสมบัติ Attributes(แอทริบิวต์)  ที่มักพบได้บ่อย เช่น

คำสั่งกำหนดขนาดของรูปภาพ
<img width="104" height="142">

คำสั่งจัดการตัวอักษร
<font color="red" size="20">ทดสอบ</font>

คำสั่งเชื่อมโยงเว็บไซต์
<a href="http://smileandsbyeseo.blogspot.com/">ทดสอบ</a>

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






Read More »

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


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


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



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

Read More »

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

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

test

test

test

test
test
3.คำสั่งเพื่อกำหนดบรรทัดหรือย่อหน้า <p>
<p>test</p>
<p>test</p>
<p>test</p>
เมื่อนำไปใช้จะมีลักษณะดังนี้
test
test
test

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

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

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

ทดสอบ


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

<img src="seo.jpg">

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


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

Read More »

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

คำสั่งพื้นฐานที่ใช้งานบ่อยและควรต้องรู้ในภาษา 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 ได้ด้วยนะครับ ^_^




Read More »

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

โครงสร้างและคำสั่งต่างๆในภาษา 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 คงไม่ยากจนเกินไปนะครับ ^_^






Read More »

ทำความรู้จัก html ก่อนเริ่มต้นสร้างเว็บไซต์



HTML: (Hypertext Markup Language) หรือเรียกว่า เอชทีเอ็มแอล คือ ภาาษที่ใช้ในการสร้างเว็บเพจ(หน้าเว็บ 1 หน้าเรียก เพจ หน้าเว็บหลายเพจรวมกันเรียกว่า เว็บไซต์) โดยปกติแล้วหน้าเว็บเหล่านี้จะถูกเปิดโดยเว็บบราวเซอร์ เช่น IE, firefox, googlechrom เป็นต้น

ภาษา HTML มีการจัดทำเป็นมาตรฐานโดยมี World Wide Web Consortium (W3C) เป็นผู้ดูแล ปัจจุบันภาษา HTML ได้พัฒนามาสู่ยุคที่เรียกว่า HTML5 ความสามารถของ HTML5 นั้นมีมากมายเหลือเกินซึ่งยังไม่ขอกล่าวถึงเพราะจะหนักสมองปล่าวๆ 555+

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

Read More »