Krit Th.
20+ yrs in programming professional markets, FMCG researchers, system analyst, university lecturers, broadcasting expert, and so on.
หลักการเขียนโปรแกรม
Website
bb4jmtg
Assignment 1 (มอบหมาย 7-Nov-2023)
-
หา IP Address จากอุปกรณ์เชื่อมต่ออินเตอร์เน็ทของตนเอง
-
หาเว็บไซต์ภายในประเทศไทยที่ชื่นชอบ และหาว่า 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
เอกสารเว็บเพจ
-
กำเนิดในปี 1980 โดย Tim Berner Lee ใช้ในงานวิจัย
-
1990 ถูกนำใช้งานบน Server ผ่าน Web Browser
-
HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ
-
HTML ย่อมาจาก Hypertext Markup Language โดย
-
Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง
-
ใช้ Tag ในการกำหนดการแสดงผล
-
ปัจจุบัน 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
PHP Website 20231114
By Krit Th.
