Embed Size (px)
DESCRIPTION
Citation preview
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> !<li><h3>Subject2</h3></li> !
<li><h4>Subject3</h4></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;float:leT;">
<b>Menu</b><br> HTML<br>CSS<br>JavaScript</div>
<div id="content" style="background-‐color:#EEEEEE;height:200px;width:400px;float:leT;">
Content goes here</div>
<div id="footer" style="background-‐color:#FFA500;clear:both;text-‐align:center;">
Copyright © W3Schools.com</div></div></body>
</html>
Try it yourself !
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
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 ------สงงานภายในชั่วโมง---------!
!
