HTML

Website Development

ผู้ให้บริการเว็บไซต์ 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

แอททริบิวท์

โครงสร้างของไฟล์ 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>

คลิ้กดูตัวอย่าง

Replit.com

สมัครสมาชิก และเข้าร่วมทีม

  1. ระบบ คลาวด์ เซิร์ฟเวอร์ให้บริการ Web App Services

  2. สมัครสมาชิก replit.com ด้วย @swkmail.com

  3. เมื่อสมัครสมาชิกเรียบร้อยแล้ว ให้ Login เข้าระบบ และเข้าร่วมทีมวิชา อ.กฤษณ์ ท. ที่ http://bit.ly/3A6LkHl

WORKSHOP 1

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

หน้าแรก

แสดงข้อมูล

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

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

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

หน้าติดต่อ

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

index.html

profile.html

contact.html

วิธีส่งงานใน Replit.com

1

2

  1. เลือกเมนู Teams

  2. เลือกรายการ วิชาที่ต้องการส่งงาน

1

  1. เลือก Continue working ในแถวรายการที่ต้องการส่งงาน

1

  1. เลือก Submit เพื่อส่งงาน
    * แน่ใจว่าได้ทำงานเสร็จทั้งหมดแล้ว ก่อนกดปุ่ม

1

  1. เลือก Submit (ยืนยัน) เพื่อส่งงาน

Aj. Krit Th.

https://www.kritth.com

20204-2008 HTML 1

By Krit Th.

20204-2008 HTML 1

  • 201

More from Krit Th.