The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Home Explore ใบงาน ที่ 2 การสร้างภาษา HTML
View in Fullscreen

ใบงาน ที่ 2 การสร้างภาษา HTML

Like this book? You can publish your book online for free in a few minutes!
Download PDF
Share

Related Publications

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by วิรยา สีขาว, 2019-06-05 03:33:12

ใบงาน ที่ 2 การสร้างภาษา HTML

ใบงาน ที่ 2 การสร้างภาษา HTML

ใบงานภาษา HTML

รายวิชา การออกแบบและพัฒนาเว็บไซต
ครวู ิรยา สีขาว

2562

ใบงานที่ 2 การเขยี นเวบ็ เพจดวยภาษา HTML เบื้องตน

วิชา การเขียนเว็บเพจดวยภาษา HTML รหัสวชิ า 3204-2202

ชื่อเร่ือง การเขียนเวบ็ เพจดวยภาษา HTML เวลา 4 ชั่วโมง

----------------------------------------------------------------------------------------------------------------------

คาํ สง่ั ใหน กั ศกึ ษาเขยี นเว็บดว ยภาษา HTML โดยใหเขยี นเวบ็ ไซตน าํ เสนอเกี่ยวกบั

เรื่อง รา นขายสนิ คา ออนไลน

ใหเ ลอื กสินคาทีส่ นใจขาย 1 เรื่อง โดยใหหาขอ มลู สินคา จากอินเตอรเ นต็ ขายสินคา จาํ นวน 5 ชิน้ โดยมเี นื้อหา

ดังน้ี
สรา งโฟลเดอรช อ่ื Product_Name (ตามดว ยชอื่ นักศกึ ษา) เพอื่ เกบ็ ไฟล Html ทีส่ รา งขึน้

สรางโฟลเดอรช ือ่ images (โฟลเดอรย อย Sub Folder ) เพอื่ ใชในการเกบ็ ภาพ

สรางโลโกร า นของนกั ศกึ ษา 1 รูป เพอื่ ใสใ นหนา เวบ็ ไซต ขนาด width =250 pixels height =250 pixels

1. หนาหลัก ตง้ั ชอื่ index.html

- มกี ารใชคําสง่ั Nav เพ่อื ทาํ ลง้ิ ไวด านบนตามตัวอยา ง โดย Link ไปยงั หนา ทีก่ าํ หนด

<nav>

<a href="ใสท อ่ี ยูเ อกสาร">รายการสนิ คา </a>|

<a href="ใสทอ่ี ยูเอกสาร">รายการสง่ั ซ้ือ</a>|

<a href="ใสท อ่ี ยเู อกสาร">การสง่ั ซ้ือสนิ คา <a>|

<a href="data03.html">ประวตั ิผจู ัดทาํ <a>|

</nav>

ใสพน้ื หลงั เปนสดี ว ยคาํ ส่ัง HTML5 สีขอ ความ ใหเ ปน หวั ขอ ระดบั ท่ี 1 ใสค ําสงั่ สี ชนดิ
ของ Font ดวยคําสง่ั Html5
ตวั อยาง
<h1 style="color:rgb(255,0,0); font-family:Angsana New; font-
size:40px;" >

หนาหลกั ประกอบไปดว ยเมนู (เมนหู ลงั ภาพ logo)

 รายการสินคา
 รายการสั่งซือ้
 การสั่งซ้ือสินคา
 ประวัตผิ จู ัดทาํ

มปี ุม Next , ปุม Home ปมุ Back ตามตัวอยางดังภาพ

2. หนา product.html หนารายการสนิ คา
- ใสพ น้ื หลังดวยคาํ สงั่ ในภาษา Html 5 และสรา งตารางสินคา ดงั ตอไปน้ี
มีปุม Next , ปุม Home ปุม Back ตามตัวอยางดงั ภาพ

ใสพ้นื หลังหนา ดวย HTML5 ตวั อยา งคําสั่ง
<body style="background-image:url('images/1087415-natural-scent.png');">
สรางสีและเสนขอบตารางดวยคาํ สงั่ HTML5
เชน <table style="background-color:white; border:5px solid orange">
คําส่งั หวั ขอตารางสนิ คา ใหใชก ารตกแตง HTML5 <h1 style="color:red; font-size:50px; font-
family:TH Sarabun New">ตารางสินคา </h1>

ลําดับ รายการสินคา ราคาตอหนว ย จํานวนสนิ คา รายละเอียดเพ่มิ เติม
1 รวมสนิ คา คลกิ
2 คลกิ
3 คลกิ
4 คลิก
5 คลิก

ตัวอยา งการทํา

3. หนา รายละเอยี ดสนิ คา ตั้งชอื่ เปน product-1.html ใสดว ยตาราง ใหมีท้ังหมด 5 สินคา แลว ตั้งช่อื
เรยี งไป 5 หนาแตง แนวเดียวกัน และ ใสพนื้ หลงั แตงเสนตางๆดว ยคําส่ัง HTML 5

4. การส่ังซ้อื สินคา หนา shopping.html ใหบอกวิธกี ารชาํ ระเงิน ผานชอ งทางตางๆ โดยใชค ําสง
Link ภายใน 3 เมนู ชาํ ระผานธนาคาร , ชําระผาน QR Code , ชาํ ระผา น Pay pal คลิกแลวลงไปยงั
เนื้อหาทที่ ําไว มีภาพประกอบ มีการแตงสี แตงขอ ความตางๆ ดว ยคาํ สง่ั HTML5

ใชคาํ ส่ังในการแตงหัวขอดงั น้ี
<h1 style="color:green; font-size:40px; font-family:TH Sarabun New;">การสง่ั ซ้ือสินคา
</h1>

แตงคําส่ังหัวขอ ยอยดงั น้ี
<h2><ul style="width:400px; background-color:#f1f1f1; list-style-type:none; margin:2;
padding:2; font-family:TH Sarabun New; font-size:40px;" >
<li><a href="#a01">ชาํ ระผา นธนาคาร</a></li>
<li><a href="#a02">ชําระผาน QR Code</a></li>
<li><a href="#a03">ชาํ ระผา น Pay Pal</a></li>

</ul></h2>

หนาที่ 5 ประวัตผิ จู ัดทําใหใสประวัติของนกั ศกึ ษา พรอมภาพประกอบ เขยี นการแตง ตา งๆดวย HTML5

เสรจ็ แลว Zip ไฟลสง อีเมลล [email protected] ภายในเวลา 12.00 น. ของวนั ศกุ ร

การ Zip ไฟล คลกิ ขวา เลอื ก Add to “product..” เลือกชอ่ื ไฟลท เ่ี ราสรางมนั จะมีนามสกุล rar หรอื
zip กรณไี มมีโปรแกรมใหโหลดโปรแกรม ใช keyword คือ winrar free download ลงมาทีเ่ คร่ือง
กอ น

รอผลการ
นําไฟลท่ไี ดน ามสกลุ rar หรอื zip


Click to View FlipBook Version