Lab#2

322432
Web
design
Technology

Lab#2 Overview of Web design Technology !
Lab
– Introduction to HTML!
–  HTML คือ ภาษาที่ใชในการเขียนเว็บเพจ ยอมาจากคำวา Hypertext Markup Language!
–  โครงสรางพื้นฐานของ HTML !
โครงสรางของ HTML จะประกอบไปดวยสวนของคำสั่ง 2 สวน คือ สวนที่เปน สวนหัว
(Head) และสวนที่เปนเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้!
<HTML>!
<HEAD>!
<TITLE> สวนหัว </TITLE>!
</HEAD>!
<BODY>!
คำสั่งหรือขอความที่ตองการใหแสดง!
</BODY>!
</HTML> !

การสรางเอกสาร HTML Basic !
Meta element!
Open tag! close tag!
Element content!
Empty element!
Attribute!

การเชื่อมโยง Link!
– Link ไปยังเว็บอื่น!
<a href="url">Link text</a>!
<a href="http://www.google.com/">Google</a> ไปยังเว็บ Google โดยอยู
หนาตางเดิม!
<a href="http://www.google.com/" target="_blank">Google</a> ไปยังเว็บ !
Google โดยเปดหนาตางใหม!
– Link ในหนาเดียวกัน!
1. เพิ่มจุด Link <a id=“linking">Go to link</a>!
2. สราง Link ไปสวนนั้น <a href="#linking">Go to link</a> หรือ !
<a href="http://www.kku.ac.th"> Go to KKU web</a>!

การสรางตาราง HTML!
รูปแบบคำสั่ง !
<table> !
<tr> // Row !
<td> text </td> //Column !
<tr>!
</table> !
!
ตัวอยาง!
<table width="150" border="1">!
<tr> !
<td>Number</td>!
<td>Name</td>!
</tr>!
<tr>!
<td>1</td>!
<td>Fang </td>!
</tr>!
<tr>!
<td>2</td>!
<td>Nance</td>!
</tr>!
</table>!

การสรางรายการ HTML!
คำสั่ง !
<ul>รายการใชจุดกำกับ </ul> !
<ol> รายการแบบตัวเลขกำกับ </ol>!
<li> สมาชิกของรายการตองใชอยูภายใน ul or ol </li>!
<ol>!
<h1>Head of title</h1>!
<li><h2>Subject1</h2></li>!
</ol>!

HTML <div> and <span>!
Tag Description
<div> ใชแบงเอกสารเปนสวนยอยๆ (block-level)!
<span> ใชแบงเอกสารเปนสวนยอยๆ (inline)!
HTML Grouping Tags!
!
•  ใชกำหนดขอบเขตรูปแบบที่กำหนดดวย CSS !
•  สามารถใช JavaScript จัดการคุณสมบัติตางๆภายใน Element ได !
•  Div!
This is<div style="color:red">red</div>color!
•  Span!
This is <span style="color:red">red</span> color !
!

Tag Layout!
Tag! Description! Example!
<p>…</p>! จัดยอหนาใหกับขอความ ! <p>message</p>!
<p align=“value”>…!
</p>!
ใช left, center, right, justify ! <p align=“value>message</p>!
</br>! ใชขึ้นบรรทัดใหม ! One</br> Two</br> Three</br>!
<br clear=“value”/>! •  All ขึ้นบรรทัดใหมในกรณีที่ดานซาย ขวา
ไมมีวัตถุใดอยู !
•  Left ขึ้นบรรทัดใหมกรณี ดานซายไมมี
วัตถุใดอยู !
•  Right ขึ้นบรรทัดใหมกรณี ดานขวาไมมี
วัตถุใด!
•  None(default) การไมกำหนด attribute
clear โดยจะขึ้นบรรทัดใหมโดยไมมี
เงื่อนไข !
<br clear=“all” /> !
Tags !
!

Example
<html>

<body>

<div
id="container"
style="width:500px”>

<div
id="header"
style="background-‐color:#FFA500;">

<h1
style="margin-‐boLom:0;">Main
Title
of
Web
Page</h1></div>

<div
id="menu"
style="background-‐color:#FFD700;height:200px;width:
100px;ﬂoat:leT;">

<b>Menu</b><br>
HTML<br>CSS<br>JavaScript</div>

<div
id="content"
style="background-‐color:#EEEEEE;height:200px;width:
400px;ﬂoat:leT;">

Content
goes
here</div>

<div
id="footer"
style="background-‐color:#FFA500;clear:both;text-‐align:center;">

Copyright
©
W3Schools.com</div></div></body>

</html>

XHTML!
XHTML (ยอมาจาก Extensible Hyper Text Markup Language) !
XHTML เปนภาษาประเภท Markup Language ที่เกิดจากการนำ XML และ HTML มารวม
กัน กลายเปนมาตรฐานใหมของ HTML คำสั่งตางๆนั้นก็ยังเหมือนกับ HTML แตจะมี
ความเขมงวดในเรื่องโครงสรางภาษามากกวา และมีการตัด tag และ attribute ที่ลาสมัยออก
ไป จากขอเสียของ HTML ที่เมื่อแสดงผลผานเบราเซอรของคายตางๆ เชน Internet
Explorer, Firefox, Netscape, Opera และอื่นๆ ไดผลที่แตกตางกัน เว็บเพจที่ออกแบบมา
อยางดีของเรา อาจดูสวยงามถูกตองใน IE แตกลับผิดเพี้ยนไปเมื่อดูดวย Firefox!
XHTML ตางจาก HTML อยางไร? มีความเขมงวดเรื่องการใช syntax มากกวา HTML !
HTML : <b><i>ขอความนี้เปนตัวหนา และตัวเอียง</b></i>!
XHTML : <b><i>ขอความนี้เปนตัวหนา และตัวเอียง</b></i>!
!
!

XHTML Example!
<?xml version="1.0" encoding="UTF-8"?> !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> !
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> !
<head>!
<title> Strict DTD XHTML Example !
</title>!
</head> !
<body> !
<p> Please Choose a Day: <br /><br /> <select name="day"> !
<option selected="selected">Monday</option> <option>Tuesday</option> !
<option>Wednesday</option> </select> !
</p>!
</body>!
</html> !

HTML5 !
– (เอชทีเอ็มแอล 5) เปนมาตรฐานตัวตอไปของ HTML ที่อยูในระหวางการ
พัฒนา โดยมีลักษณะเหมือนมาตรฐานตัวกอนหนาทั้ง HTML 4.01 และ
XHTML 1.1 ที่ใชในการจัดโครงสรางและการแสดงผลของเนื้อหาสำหรับ
เวิลดไวดเว็บ มาตรฐานใหมจะมีคุณลักษณะเดนที่สำคัญไดแก การใชงาน
วิดีโอ การแสดงตำแหนงทางภูมิศาสตร!
– การเก็บไฟลในลักษณะออฟไลน การแสดงกราฟกส!
– input types แบบใหม เชน search, number, range, color, tel, url, email,
date, month, week, time, datetime, datetime-local โดยคุณสมบัติเดน
หลายอยางไมจำเปนตองติดตั้งซอฟตแวรเพิ่ม เชน เกียรส แฟลช หรือ
ซิลเวอรไลต เหมือนที่ผานมาในการใชงาน HTML4!
!
!

HTML5 (Cont.)!
– (เอชทีเอ็มแอล 5) เปนมาตรฐานตัวตอไปของ HTML ที่อยูในระหวางการ
พัฒนา โดยมีลักษณะเหมือนมาตรฐานตัวกอนหนาทั้ง HTML 4.01 และ
XHTML 1.1 ที่ใชในการจัดโครงสรางและการแสดงผลของเนื้อหาสำหรับ
เวิลดไวดเว็บ มาตรฐานใหมจะมีคุณลักษณะเดนที่สำคัญไดแก การใชงาน
วิดีโอ การแสดงตำแหนงทางภูมิศาสตร!
– การเก็บไฟลในลักษณะออฟไลน การแสดงกราฟกส!
– input types แบบใหม เชน search, number, range, color, tel, url, email,
date, month, week, time, datetime, datetime-local โดยคุณสมบัติเดน
หลายอยางไมจำเปนตองติดตั้งซอฟตแวรเพิ่ม เชน เกียรส แฟลช หรือ
ซิลเวอรไลต เหมือนที่ผานมาในการใชงาน HTML4!
!
!

คำสั่ง LAB#2!
ใหนักศึกษาเขียนเว็บเพจตามรูปแบบที่ให ในเว็บเพจตองมีการเชื่อมโยงนอก
เว็บเพจไปที่ www.google.com จัดขนาดกวาง 900 px!
โดยใชเครื่องมือ editplus or notepad ------สงงานภายในชั่วโมง---------!
!

Lab#2

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Viewers also liked

Viewers also liked (20)

Similar to Lab#2

Similar to Lab#2 (20)

More from palm2816

More from palm2816 (13)

Lab#2