Assignment 1: Basic Python & HTMLโจทย์กำหนด
- ใช้ภาษา python สั่ง print ประวัติส่วนตัว
- ให้ใช้ภาษา
HTML สร้าง page แสดงประวัติส่วนตัว บน
browser
- ให้ page มีการ link กันได้
- ใช้ภาษา python
สั่ง print ประวัติส่วนตัว
ขั้นตอนการทำงาน
1. สร้าง File
Text เพื่อจัดเก็บข้อมูลส่วนตัว ดังรูป
2. สร้าง file .py แล้วเขียน โค้ด เพื่อให้ อ่านข้อมูลจากใน Text File แล้ว print ข้อมูลออกมา ซึ่งหลักการทำงานของ
Code คือ มีการใช้ คำสั่ง open เพื่อ เปิด file text จากนั้นให้มีการ วน loop for เพื่อให้
อ่านไฟล์ทุกบรรทัด โดยคำสั่ง readlines() และใช้คำสั่ง print
3.จะได้ output ออกมาดังรูป
ขั้นตอนการทำงาน
1. สร้าง File Text เพื่อจัดเก็บข้อมูลส่วนตัว ดังรูป
- ให้ใช้ภาษา HTML
สร้าง page แสดงประวัติส่วนตัว บน browser
ขั้นตอนการทำงาน
1. สร้าง file
HTML เพื่อเขียนแสดงข้อมูลส่วนตัวบน web pageขั้นตอนการทำงาน
หลักการทำงานของ code
1.คำสั่งเริ่มต้น
รูปแบบ <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal
2.คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE --> ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
3.ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
4.กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
5.ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ
6.การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
7.ย่อหน้าใหม่
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P> ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>
รูปแบบ <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal
2.คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE --> ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
3.ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
4.กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
5.ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ
6.การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
7.ย่อหน้าใหม่
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P> ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>
2.จะได้ output ออกมาดังรูป
3.และเมื่อ click ไปยังข้อความที่ทำให้เป็น link ก็จะนำไปยังรูปภาพที่มีอยู่บนเครื่อง
computer โดยการกำหนด path
- ให้ page มีการ link กันได้
ขั้นตอนการทำงาน
1. สร้าง file HTML เพื่อกำหนดให้มีหน้า home page โดยที่ link ที่จะ click นั้น มีการกำหนด path ไปยัง html อีกไฟล์หนึ่ง
2.หน้า page ของ ไฟล์ html นี้
เมื่อทำการ click ตรงข้อความ Visit My Profile
ก็จะนำไปสู่หน้า My Profile หรือ ไฟล์
html อีกไฟล์หนึ่ง
ขั้นตอนการทำงาน
1. สร้าง file HTML เพื่อกำหนดให้มีหน้า home page โดยที่ link ที่จะ click นั้น มีการกำหนด path ไปยัง html อีกไฟล์หนึ่ง
3. เมื่อทำการ click ตรงข้อความ Visit My Profile ก็จะนำไปสู่หน้า My Profile
ไม่มีความคิดเห็น:
แสดงความคิดเห็น