มุมรางวัล และคนเก่ง
ดาวน์โหลด
โปรแกรม Filezilla Client
Program Photoshop CS5
Program DreamwerCS5
Program Dreamweaver
Dreamweaver CS6
DreamweaverCS3
Sketup 2014
โปรแกรม corel
โปรแกรมการจับภาพ
โปรแกรม Camtasia Studio
:: ขั้นตอนการเขียน ภาษา HTML ( อ่าน 636)
ขั้นตอนการเขียนโปรแกรมด้วยภาษา HTML เบื้องต้น

1. กำหนดพื้นที่ที่จะใช้จัดเก็บเอกสารทั้งหมด


1.1   สร้างโฟลเดอร์ (folder) ไว้ที่ My Document โดยตั้งชื่อเป็นชื่อของนักเรียน (เป็นภาษาอังกฤษ) เช่น My Documnents/shanikarn


1.2   ภายในโฟลเดอร์ shanikarn ให้สร้างโฟลเดอร์ย่อยที่ใช้ในการจัดเก็บภาพต่างๆ ที่จะนำมาแสดงในเว็บเพจ โดยตั้งชื่อว่า images เช่น My Documents/shanikarn/images


top


  2. เปิดโปรแกรม Notepad


2 .1   คลิกที่ Start


2.2   คลิกที่ Program


2.3   คลิกที่ Accessories


2.4   คลิกที่ Notepad

top


  3.  พิมพ์คำสั่งภาษา HTML
เมื่อเปิดโปรแกรม Notepad แล้วให้พิมพ์คำสั่งต่างๆ ดังต่อไปนี้ 



ภาพที่ 4-1   แสดงตัวอย่างการเขียนโปรแกรมภาษา HTML ด้วย Notepad


top


  4. บันทึกเอกสาร HTML


4.1   หลังจากพิมพ์ข้อมูลต่างๆ เสร็จ ให้จัดเก็บข้อมูลโดยคลิกที่เมนู File แล้วเลือก save



ภาพที่ 4-2  แสดงตัวอย่างวิธีการจัดเก็บเอกสาร


4.2  ในการจัดเก็บครั้งแรก โปรแกรมจะขึ้นกรอบมาให้ตั้งชื่อให้กับเอกสาร ดังตัวอย่างในภาพที่ 3-3



ภาพที่ 4-3  แสดงวิธีการตั้งชื่อให้กับเอกสาร HTML





ให้เลือกเก็บข้อมูลดังต่อไปนี้



-   ข้อมูลในช่อง Save in : ให้เลือกไปที่โฟลเดอร์ที่เราสร้างไว้ในตอนแรก (shanikarn)



-   ข้อมูลในช่อง File name:  ให้ตั้งชื่อว่า test.html



-   ข้อมูลในช่อง Save as type :  ให้เลือกเป็น All Files
- -เปลี่ยนชนิดของ ไฟล์ จาก Encoding จากเดิม ANSI เป็น UTF-8 เพื่อรองรับ ภาษไทย ในบาง browser



-   จากนั้นให้คลิกที่ปุ่ม Save

top


  5. เรียกดูผลลัพธ์ที่เว็บบราวเซอร์


5.1 เปิดโปรแกรม Internet Explorer




5.2 คลิกที่เมนู File เลือก Open ดังภาพด้านล่าง




5.3 จากข้อ 5.2 จะปรากฏหน้าจอดังภาพด้านล่าง ให้คลิกที่ปุ่ม Browse...




5.4 จากข้อ 5.3 จะปรากฏหน้าจอดังภาพด้านล่าง ให้ทำการเลือกเปิดเอกสารที่ได้ทำการ save เอาไว้ในข้อ 4 (test.htm)







 6. การ Upload ไฟล์
6.1 ให้ทำการ Downlaod โปรแกรม Filezilla Client เพื่อทำการติดตั้ง
6.2 ให้ทำการ Upload ไปที่เว็บเพื่อการ แสดงผล ตามที่ได้กำหนดโดยใหสร้าง เป็น folder


อ้างอิง http://www.chonkanya.ac.th/index.htm


Post Date : 5 มกราคม 2556
ปฏิทินกิจกรรม
Learn On Moodle
Google Online
สื่อการเรียนรู้ ICT
เผยแพร่ผลงาน
ลิ้งค์น่าสนใจ
โรงเรียนสุรวิทยาคาร
© copyright@2012 All rights reserved. Power by : admin