การเขียนโปรแกรมภาษาคอมพิวเตอร์

Website

oauqyjj

Assignment 1 (มอบหมาย 7-Nov-2023)

  1. หา IP Address จากอุปกรณ์เชื่อมต่ออินเตอร์เน็ทของตนเอง

  2. หาเว็บไซต์ภายในประเทศไทยที่ชื่นชอบ และหาว่า IP Address ของเครื่อง Server ที่ให้บริการเว็บไซต์ดังกล่าว

ผู้ให้บริการเว็บไซต์ SERVER

www.google.com

ผู้ใช้อินเตอร์เน็ท

CLIENT IP: 49.228.189.62

ISP

ผู้ให้บริการอินเตอร์เน็ท

ชุมสายอินเตอร์เน็ท

INTERNET BACKBONE

ผู้ให้บริการเว็บไซต์ SERVER

Ex: www.google.com

ผู้ใช้อินเตอร์เน็ท CLIENT

HTML (เอชทีเอมแอล) อย่างเดียว

HTML + CSS (ซีเอสเอส)

HTML + CSS + JAVA (จาวา)

คลิ้ก, แสดงความคิดเห็น ไม่ได้

รูปแบบ การพัฒนาเว็บไซต์

เขียนโค้ด พัฒนาเว็บไซต์ด้วยตนเองมากกว่า 70% ด้วยภาษา HTML, CSS, และ JAVA เช่น Codepen.io

ใช้โปรแกรม อำนวยความสะดวกในการสร้างเนื้อหา โค้ดภาษา HTML, CSS, และ JAVA จะถูกสร้างแบบกึ่งอัตโนมัติ จากโปรแกรม/ระบบ

เว็บสำเร็จรูป ในการบริหารข้อมูลและปรับแต่งรูปแบบให้เข้ากับรูปแบบเว็บที่นักพัฒนาต้องการ CMS

ภาษา HTML

เอกสารเว็บเพจ

  1. กำเนิดในปี 1980 โดย Tim Berner Lee ใช้ในงานวิจัย

  2. 1990 ถูกนำใช้งานบน Server ผ่าน Web Browser

  3. HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ

  4. HTML ย่อมาจาก Hypertext Markup Language โดย

  5. Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง

  6. ใช้ Tag ในการกำหนดการแสดงผล

  7. ปัจจุบัน HTML พัฒนาในรุ่นที่ 5 คือ HTML5 (2014)

เป็นไฟล์ที่สร้างง่าย ๆ ด้วย Text Editor

มีนามสกุลคือ html

(ชื่อไฟล์.html)

รูปแบบโครงสร้างภายในเขียนด้วย TAG (แท็ก)

HTML สามารถนำไปเปิดด้วยเว็บบราวเซอร์

1 เว็บไซต์ ประกอบด้วยไฟล์ HTML หลายไฟล์ ประกอบกัน

โครงสร้าง HTML

TAG (แท็ก) แบบเปิดและปิด - คร่อม ข้อความ/ข้อมูล

<b>วิทยาลัยเทคโนโลยีศรีวรการ</b>

แสดงข้อความ วิทยาลัยเทคโนโลยีศรีวรการ ด้วยตัวหนังสือแบบหนา

<i>วิทยาลัยเทคโนโลยีศรีวรการ</i>

แสดงข้อความ วิทยาลัยเทคโนโลยีศรีวรการ ด้วยตัวหนังสือเอียง

<b><i>วิทยาลัยเทคโนโลยีศรีวรการ</i></b>

แสดงข้อความ วิทยาลัยเทคโนโลยีศรีวรการ ด้วยตัวหนังสือหนาเอียง

วิทยาลัยเทคโนโลยีศรีวรการ

แสดงข้อความปกติ วิทยาลัยเทคโนโลยีศรีวรการ

โครงสร้าง HTML

TAG (แท็ก) แบบ จบด้วยตัวเอง

<img src="swk.png" width=500 />

แสดงข้อมูลไฟล์รูปภาพ swk.png โดยกำหนดขนาดรูปกว้าง 500 px

ไฟล์ swk.png อยู่ในโฟลเดอร์เดียวกันกับไฟล์ HTML

<img src="images/swk.png" width=500 />

แสดงรูปภาพ swk.png ไฟล์ดังกล่าวอยู่ในโฟลเดอร์ชื่อ images จากตำแหน่งโฟลเดอร์ในไฟล์ HTML

<a href="https://www.google.com">ไปยังเว็บไซต์กูเกิ้ล</a>

สร้างการเชื่อมโยง (ลิ้งค์|HyperLink) ไปยัง www.google.com

TAG สรุป

<แท็กเปิด>ข้อมูล</แท็กปิด>
<img src="swk_logo.png" width=1920 height=1080 />

Tag

แท็ก

Tag

แท็ก

Tag

แท็ก

Element

อิลิเมนท์

แท็ก แบบที่ 1

แท็กเปิดและปิดจะแยกกันโดยคร่อมอิลิเมนท์

แท็ก แบบที่ 2

เปิด-ปิด ในตัวเอง หลัก ๆ จะมีข้อมูลแอททริบิวท์

Attribute

แอททริบิวท์

https://www.w3schools.com/html/default.asp

โครงสร้างของไฟล์ HTML

ไฟล์ HTML แรกของนักศึกษา

<!DOCTYPE html>
<html lang="th">
<head>
  <title>ชื่อเรียกเว็บเพจ</title>
</head>
<body>

<h1>หัวข้อความ</h1>
<p>ข้อมูลย่อหน้า 1</p>

</body>
</html>

สร้างไฟล์ดังกล่าวด้วย Text Editor ตั้งชื่อว่า index.html

การแสดงผลข้อความ

TAG

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

การจัดกลุ่มข้อความ Paragraph

TAG

<!DOCTYPE html>
<html>
<body>

<p>
พารากราฟ 1
contains a lot of lines
</p>

<p>
พารากราฟ 2
contains      a lot of spaces
in the source     code,
</p>

</body>
</html>

รูปภาพ - Images

TAG

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>
  
<p>Here we specify the width and height of an image with the width and height attributes:</p>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

</body>
</html>

ลิ้งค์เชื่อมโยง - Anchors

TAG

<!DOCTYPE html>
<html>
<body>

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>
</html>

พิมพ์เขียว เว็บไซต์ไดอะแกรม

หน้าแรก

แสดงข้อมูล

ชื่อและนามสกุลของนักศึกษา

หน้าข้อมูลส่วนตัว

แสดงข้อมูลส่วนตัว พร้อมรูปภาพ

หน้าติดต่อ

แสดงข้อมูลการติดต่อนักศึกษา อีเมล์ เบอร์ติดต่อ ฯลฯ

index.html

profile.html

contact.html

Aj. Krit Th.

https://www.kritth.com