RSS
Facebook
Twitter

วันเสาร์ที่ 1 มิถุนายน พ.ศ. 2556

การทำเว็บแบบง่ายๆ

Posted by Unknown on 10:20 with No comments


    บทความนี้เราจะมาลองทำเว็บไซต์กัน โดยการทำเว็บไซต์ในบทความนี้จะเป็นแบบพื้นฐานเพื่อให้คุณได้เข้าใจถึงการทำงานของเว็บไซต์ ซึ่งเราจะใช้โปรแกรม notepad ซึ่งจะมีอยู่ในทุกเครื่องที่ใช้ระบบ window 
    โปรแกรม notepad เป็นโปรแกรมที่อยู่ในประเภท Text editor ใช้ในการแก้ไขข้อความ มีความสำคัญมากในการทำเว็บไซต์ เพราะจริงๆแล้วเว็บไซต์ที่เราเห็นว่ามีหน้าตาสวยงาม มีรูปภาพ หรือมีการเคลื่อนไหวต่างๆ ซึ่งจริงๆแล้วตัวเว็บไซต์นั้นก็ประกอบด้วย ตัวหนังสือมากมายรวมกันอยู่เป็นไฟล์(เราจะเรียกว่าเว็บเพจ) แต่มีการถูกแปลงที่เครื่องของคุณให้เป็นรูป หรือหน้าตาตามที่เราเห็น 
ซึ่งในบทนี้เรามาลองทำเว็บเพจดู ขั้นตอนตามนี้ 

1.ให้คุณเปิดโปรแกรม Notepad ขึ้นมา โดยไปที่ All programs > Accessories > Notepad 



ซึ่งโปรแกรม notepad จะมีหน้าตาแบบนี้ 

 

2. ให้คุณพิมพ์ข้อความต่อไปนี้ ใน notepad 


<html>
    <head>
        <title>ทดลองทำเว็บไซต์แบบง่ายๆ</title>
    </head>
    <body>
             Hellomyweb นี่คือเว็บไซต์แรกของฉัน
    </body>
</html>


ข้อความที่คุณพิมพ์ไปนั้นเราเรียกว่า SOURCE CODE เป็นภาษาคอมพิวเตอร์ เรียกว่าภาษา HTML ซึ่งใช้ในการจัดหน้าของเว็บเพจ คุณสามารถศึกษารายละเอียดของภาษา html ได้ที่หัวข้อของ html เมื่อพิมพ์เสร็จแล้วให้เราเลือก save as จะมีหน้าต่างออกมา ให้เราใส่ชื่อไฟล์เป็น index.html และเลือกชนิดไฟล์ (save as type) เป็นแบบ All files จากนั้นก็ save ไฟล์ 



เราจะได้ไฟล์มาดังรูปข้างล่าง ให้เราคลิกเพื่อเปิดไฟล์ index.html เราก็จะเห็นเว็บไซต์แรกของเรา ซึ่งจะถูกเปิดโดยโปรแกรม internet explorer (ต่อไปนี้เราจะเรียกว่า Web Browser) 



จากรูปจะบรรยายการทำงานของ html ที่เขียนเอาไว้ ซึ่งจะเห็นว่าตัวหนังสือที่อยู่ใน <title>....</title> จะแสดงที่ส่วนหัวของโปรแกรม internet explorer และในส่วนของ <body>....</body> จะแสดงในส่วนแสดงผลของโปรแกรม 

เราก็ได้เห็นเว็บไซต์ที่เราทำเองไปแล้ว ซึ่งในบางเครื่องที่ลองทำเว็บอาจมีปัญหาได้ เราจะมาลองดูว่าจะแก้ปัญหาอย่างไร 

1.เปิดไฟล์ไม่ได้    ให้เราลองเปิดโดยวิธีนี้แทน 

เปิดโปรแกรม internet explorer ไปที่ file > open > browse เลือกไฟล์ที่ เรา save และกดที่ open 



2.เปิดแล้วเป็นภาษาต่างดาว อ่านไม่ออก     จากรูปให้เราไปที่ file > view > encoding > thai 



หลังจากที่เราลองเขียน sorce code ไปแล้ว เราจะลองไปดูเว็บไซต์อื่นกันบ้างว่าเค้าเขียน source code กันอย่างไร ซึ่งการดู sorce code ของเว็บไซต์อื่นก็ทำได้โดย คลิกขวาที่เว็บที่เรากำลังดูอยู่ เลือก view soure 

 

เราอาจจะเห็นว่าทำไมเว็บอื่น soure code เยอะมาก ซึ่งเราก็ไม่ต้องตกใจครับจริงแล้ว source code พวกนี้เราไม่ได้ใช้ notepad เขียน เพราะจะลำบากในการเขียนมากแต่ที่ในบทความนี้ให้ใช้ notepad เพราะเป็นโปรแกรมที่มีอยู่ในเครื่อง จริงแล้วเราจะใช้โปรแกรมช่วยเขียน เช่น DREAMWEAVER , HTML - KIT , EDIT PLUS เป็นต้น ซึ่งในบทความต่อไปจะเป็นการลองใส่รูปในเว็บไซต์เพื่อเพิ่มสีสันในเว็บของเรา

HTML เบื้องต้น

Posted by Unknown on 08:27 with No comments

โครงสร้างของภาษา HTML

โครงสร้างของ ภาษา HTML นั้น ประกอบไปด้วยส่วนต่าง ๆ ที่สำคัญดังนี้ คือ

<html>
<head>
<title>การกำหนด background</title>
</head>
<body bgcolor="color">
</body>
</html>
โดยแต่และส่วนสามารถอธิบายความหมายได้ดังนี้
<html> และ </html> เป็น tag ที่ใช้เพื่อกำหนดว่าเอกสารต่อไปนี้เป็นเอกสารที่ใช้ภาษา HTML เป็น Markup Language และจะไม่ปรากฏในโปรแกรม Web Browser
<head> และ </head> เป็น tag ที่ใช้กำหนดส่วนหัวของเอกสาร Head ไม่ได้เป็นส่วนของเอกสารภายใน แต่จะให้ข้อมูลเกี่ยวกับเอกสารฉบับนี้
<title> และ </title> เป็นการระบุข้อความที่ต้องการให้เป็นส่วนหัวของเอกสาร Title จะเป็นส่วนหนึ่งของ Head โดยข้อความที่อยู่ใน Title จะไปปรากฏอยู่ที่ส่วนบนสุดของ Web Browser
<body> และ </body> เป็น tag ที่บอกถึงลักษณะต่าง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body จะมี Attributes ต่าง ๆ ได้แก่ BGCOLOR (หมายถึงกากำหนดสีพื้นด้านหลังของเอกสาร) , TEXT (หมายถึงการกำหนดสีของตัวอักษรในเอกสาร) เป็นต้น
หมายเหตุ : <คำสั่ง> เรียกว่า tag เปิด </คำสั่ง> เรียกว่า Tag ปิด

 Background

การกำหนด Background

<html>
<head>
<title>การกำหนด background</title>
</head><body bgcolor="color">
</body>
</html>
เราสามารถกำหนดสีของ background ได้โดยการเพิ่มคำสั่ง bgcolor ลงใน tag <body> (ตัวอย่างด้านบน) ส่วนคำว่า color นั้น หมายถึง ชื่อสีหรือ code สีที่ใช้กำหนดสีของ background
ตัวอย่างของชื่อสี เช่น black white blue green red ฯลฯ
ส่วน Code ของสี คือเลขฐาน16 คือ(0-9,A-F) ซึ่งจะมีทั้งหมาด 6 ตัว โดยจะแทนค่าในสีต่าง ๆ ดังนี้ 2 ตัวแรกจะแทนค่าสีแดง(R) 2 ตัวกลางจะแทนค่าสีเขียว(G ) ส่วน 2 ตัวสุดท้ายจะแทนค่าสีน้ำเงิน(B)
 
การใช้ภาพเป็น Background

<html>
<head>
<title>การกำหนด background </title>
</head><body background="URL">
</body>
</html>
การใช้รูปภาพเป็น background คือการแทรกคำสั่งเข้าไปใน <body> เช่นเดียวกับการกำหนดสี background ตัวแปร URL คือ path ของ file รูปภาพเช่น http://www.sambaweb/thai-dev.com/46860banner03.gif หรือถ้าหาก อยู่ใน directory เดียวกัน สามารถกำหนดเป็น ชื่อ file ได้เลยเช่น <body background="bg02.gif">
และถ้าหากต้องการกำหนดทั้งสีและภาพ ที่เป็น background สามารถทำได้ดังตัวอย่าง ดังนี้

ข้อควรจำ : 
<body bgcolor="color" background="URL"> จะต้องมีเพียง หนึ่งเดียว ในแต่ละเพจ ไม่สามารถใช้ทั้ง <body bgcolor> และ <body background>ในเพจเดียวกัน เพราะว่า ภาษา html จะเลือก body เพียงอันเดียวเท่านั้น ซึ่งจะ ทำให้การตีความของ ภาษา HTML ผิดพลาด

 
Music Background

<html>
<head>
<title>การกำหนด music background</title>
</head>
<body><bgsound src="URL" loop="จำนวนรอบ"> </body>
</html>
การกำหนด music background ทำได้โดยการ tag คำสั่ง <bgsound> ลงใน โฮมเพจ ดังตัวอย่างด้านบน URL คือที่อยู่ของ file เช่น http://www.sambaweb.com/thai-dev หรือ ถ้าอยู่ใน Directory เดียวกัน สามารถกำหนดเป็นชื่อ file ได้เลยเช่น <body bgsound="song.mid">
สำหรับตัวแปร จำนวนรอบ คือจำนวนรอบของการวนเพลง หากต้องการให้วนไปเรื่อยๆ ให้ใช้คำสั่ง <bgsound src="URL" loop="INFINITE">หรือ ใช้ -1 แทน INFINITE ก็ได้

ใส่ข้อความ

ใส่ข้อความลงในโฮมเพจ

<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>ข้อความที่ต้องการ
</body>
</html>
การใส่ข้อความลงในโฮมเพจสามารถใส่ลงไประหว่าง <body> .... </body> ได้เลย ดังตัวอย่างด้านบน แต่โปรแกรม webbrowser จะไม่สามารถอ่านการเว้นวรรคของเราได้ เช่น ถ้าคุณพิมพ์ว่า
 
<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>HTML คือภาษาที่ใช้เขียนโฮมเพจ
</body>
</html>
กับ 

<html>
<head>
<title>การใส่ข้อความลงในโฮมเพจ</title>
</head>
<body>HTML
คือภาษาที่ใช้เขียนโฮมเพจ
</body>
</html>
ผลที่ได้ก็คือ ข้อความดังกล่าวจะเป็นบรรทัดเดียวกัน

 
การขึ้นบรรทัดใหม่

<html>
<head>
<title>คำสั่งขึ้นบรรทัดใหม่</title>
</head>
<body>
HTML<br>
DHTML<br>
Java script<br>
Java applet<br>
</body>
</html>
คำสั่งสำหรับขึ้นบรรทัดใหม่ใช้คำสั่ง <br> วางไว้ท้ายข้อความที่ต้องการ Webrowser จะแสดงผลข้อความต่อจากนั้นในบรรทัดต่อไป 

การขึ้นย่อหน้าใหม่

การขึ้นย่อหน้าใหม่

<html>
<head>
<title>คำสั่งขึ้นย่อหน้าใหม่</title>
</head>
<body>
<p>HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator</p>
<p>ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้</p>
</body>
</html>
<p>......</p>คือคำสั่งที่ใช้สำหรับย่อหน้าใหม่
คำสั่งสำหรับจัดตำแหน่งของย่อหน้า <p align="ตำแหน่ง">
 
<html>
<head>
<title>คำสั่งขึ้นย่อหน้าใหม่</title>
</head>
<body><p align="right">HTML คือภาษาที่ใช้ในการเขียน โฮมเพจ ย่อมาจากคำว่า Hyper Text Makeup Language ซึ่งพัฒนามาจากภาษา SGML ซึ่งสามารถอ่านได้ด้วยโปรแกรม Web browser อย่างเช่น Internet Explorer หรือ Netscape Navigator</p>
<p align="center">ในเพจนี้จะสอนการสร้าง โฮมเพจด้วย ภาษา HTML โดยใช้โปรแกรม Text Editer ใดก็ได้ เช่น Notepad , Wordpad , Microsoft Word หรือแม้แต่โปรแกรม Edit ของ DOS ก็สามารถสร้าง file HTML ขึ้นได้ ใน windows นิยม save เป็น file.html ส่วนใน dos นั้นนิยม save เป็น file.htm เพราะว่าใน dos นั้นไม่สามารถ save นามสกุล file เกิน 3 ตัวอักษรได้ </p>
</body>
</html>
การกำหนดตำแหน่งของย่อหน้าทำได้โดยการเพิ่มคำสั่งลงใน <p> ดังตัวอย่าง ตัวแปร ตำแหน่ง คือ ตำแหน่งที่ต้องการ มีอยู่ 3 อย่างคือ
left = ชิดขอบซ้าย
right = ชิดขอบขวา
center = กลางหน้ากระดาษ


คลิก theme+blogger

Posted by Unknown on 01:36 with No comments

 คลิก theme+blogger

  วิธีโหลดแม่แบบธีม

  1.   (1) เลือกสีที่ชอบ         (2) เลือกแบบแนวที่ชอบ
    สามารถคลิกดูแม่แบบได้ก่อนดาวโหลด
    ทำการดาวโหลดแม่แบบไว้ในตัวเครื่อง


   2. ทำการแตกไฟล์ที่โหลดมาที่เซฟไว้ในเคื่อง ทำการคลิกขวาที่ไฟล์ แล้วมาที่ Extract Here ตามรูปด้านล่าง



3. เสร็จแล้วเข้ามาที่หน้าแก้ไขเว็บบล็อกของเราตามรูป  แล้วไปที่แม่แบบตามรูปด้านล่าง


4.คลิกที่ สำรอง/กู้คืน 


5. คลิกที่ดาวโหลดเทมเพลดแบบเต็ม  (เพื่อสำรองแม่แบบเดิมของเราไว้ในเครื่อง)


6.คลิกที่ choose file เพื่ออัพแม่แบบของเราที่แตกไฟล์ไว้ในขั้นตอนที่ 2


7.เข้าไปโฟนเดอร์ที่ไฟล์ที่เราทำการแตกไฟล์ไว้เรียบร้อยแล้ว เลือกที่ไฟล์ที่มีรูปร่างลักษณะเหมือนรูปด้านล่างแล้วคลิก open


9.คลิกที่อัปโหลด



10.เสร็จแล้วคลิกที่ ดูบล็อกเพื่อดูหน้าเว็บบล็อกของเราในแม่แบบที่อัปลง



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

วิธีทำให้บทความที่ต้องการอยู่หน้าแรกเสมอ

Posted by Unknown on 00:12 with No comments
บทความนี้ก็เป็นเทคนิคเล็กๆ น้อยๆ แต่มีประโยชน์มากสำหรับใครที่อยากให้บทความสำคัญ หรือที่บทความที่ตนเองชื่นชอบอยู่หน้าแรกสุดเสมอ ด้วยวิธีการง่ายๆ ดังนี้ครับ
ขั้นที่ 1 ไปที่แผงควบคุม >> แก้ไขบทความ แล้วเลือกแก้ไขบทความที่ต้องการ 

สอนทำบล็อก

ขั้นที่ 2  ให้สังเกตเมนูด้านล่างของการเขียน/แก้ไขบทความ  จะมีเมนูชื่อว่า ตัวเลือกของบทความ  

ขั้นที่ 3 ให้แก้วันที่ของบทความที่ต้องการแสดงในหน้าแรก เป็นวันที่หลังจากวันที่ของบทความสุดท้าย (ถ้าอยากให้อยู่หน้าแรกเสมอจริงๆ ก็แก้ คศ. ให้เป็นปีหน้าเลยก็ได้ครับ)

สอนแต่ง blogger

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