Introduction to HTMLXHTML YenCheng Chen National Chi Nan

  • Slides: 19
Download presentation
Introduction to HTML/XHTML Yen-Cheng Chen National Chi Nan University ycchen@ncnu. edu. tw

Introduction to HTML/XHTML Yen-Cheng Chen National Chi Nan University ycchen@ncnu. edu. tw

Introduction n WWW model q n Server q q n Apache IIS Browser q

Introduction n WWW model q n Server q q n Apache IIS Browser q q n http: //www. im. ncnu. edu. tw/~ycchen/wwwm. html Firefox Internet Explorer (6. 0, or 7. 0) URI (Uniform Resource Identifier) or URL q http: //www. im. ncnu. edu. tw/~ycchen/www/url-example. html

HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ex 1 -1</title> </head> <body> <p>這是一份HTML文件</p> </body>

HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ex 1 -1</title> </head> <body> <p>這是一份HTML文件</p> </body> </html>

XHTML <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w

XHTML <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ex 1 -2</title> </head> <body> <p>這是一份XHTML文件</p> </body> </html>

CSS (Cascading Style Sheets) <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN"

CSS (Cascading Style Sheets) <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title>ex 1 -3</title> <meta http-equiv="Content-Type" content="text/html; charset=big 5" /> <style type="text/css"> p {border: dashed 2 pt red}. pclass { text-align: right; background-color: #ffff 00 } </style> </head> <body> <p>這是一份XHTML文件</p> <p style="font-size: 32 px; font-weight: bold; "> 這是一份XHTML文件</p> <p class="pclass">這是一份XHTML文件</p> </body> </html>

3 Layers of Web Page Design n Structural Layer q n Presentation Layer q

3 Layers of Web Page Design n Structural Layer q n Presentation Layer q n HTML/XHTML CSS Behavior Layer q q q Java. Script http: //www. im. ncnu. edu. tw/~ycchen/www 2009/npm. html http: //www. im. ncnu. edu. tw/~ycchen/www/216 Color. html

HTML元素與屬性 n <element>contents</element> q n <element /> q q n n <p>This is the

HTML元素與屬性 n <element>contents</element> q n <element /> q q n n <p>This is the first paragraph</p> <img src=“img 1. png" /> <element attribute="value" …> q <div id="banner"> q <a href="http: //www. ncnu. edu. tw/" target="new">NCNU</a> 元素與屬性名稱請使用小寫字

HTML網頁結構 <html> <head> <title> Page Title</title> </head> <body> <h 1>Heading level 1</h 1> <p>The

HTML網頁結構 <html> <head> <title> Page Title</title> </head> <body> <h 1>Heading level 1</h 1> <p>The first paragraph is here. </p> </body> </html>

空白與換行 <p> It is a feature of HTML that all white space is treated

空白與換行 <p> It is a feature of HTML that all white space is treated identically. Any sequence of white-space characters is treated as a single space. </p>

HTML Comments <!-- This is a comment. --> <!-- This is another comment. 2

HTML Comments <!-- This is a comment. --> <!-- This is another comment. 2 nd line 3 rd line <h 1>Heading level 1</h 1> -->

XHTML n XML (Extensible Markup Language) <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this

XHTML n XML (Extensible Markup Language) <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> n DTD(Document Type Definition) q 定義XML文件之結構(元素與屬性)

Differences Between XHTML And HTML n XHTML elements must be properly nested q q

Differences Between XHTML And HTML n XHTML elements must be properly nested q q n XHTML elements must always be closed q n XHTML elements must be in lowercase q n <b><i>This text is bold and italic</b></i> <b><i>This text is bold and italic</i></b> <BODY> <body> XHTML documents must have one root element q <html>…</html>

Some More XHTML Syntax Rules n Attribute names must be in lower case q

Some More XHTML Syntax Rules n Attribute names must be in lower case q n Attribute values must be quoted q n n <p align=right> <p align="right"> Attribute minimization is forbidden q n <a HREF=". . . "> <a href=". . . "> <input checked> <input checked="checked"> The id attribute replaces the name attribute The XHTML DTD defines mandatory elements

The XHTML DTD defines mandatory elements <!DOCTYPE Doctype goes here> <html xmlns="http: //www. w

The XHTML DTD defines mandatory elements <!DOCTYPE Doctype goes here> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> </html>

Three XHTML DTDs n XHTML 1. 0 Strict <!DOCTYPE html PUBLIC "-//W 3 C//DTD

Three XHTML DTDs n XHTML 1. 0 Strict <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> n XHTML 1. 0 Transitional <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> n XHTML 1. 0 Frameset <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -frameset. dtd">

XHTML Validation & Modularization n XHTML Validation q http: //validator. w 3. org/ n

XHTML Validation & Modularization n XHTML Validation q http: //validator. w 3. org/ n XHTML Modularization q 28 modules: q http: //www. w 3 schools. com/xhtml_modules. asp

Example: <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w

Example: <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title>Yen-Cheng Chen (陳彥錚)</title> <meta http-equiv="Content-Type" content="text/html; charset=big 5" /> <meta name="keywords" content="Yen-Cheng Chen, 陳彥錚, network management, wireless networks" /> <meta name="description" content="Yen-Cheng Chen's web site, including tech and teaching materials. " /> <link rel="shortcut icon" href="favicon. ico" type="image/x-icon" /> </head> <body> <!-- Yen-Cheng Chen's web page goes here… --> </body> </html>

meta and HTTP headers <meta http-equiv="Content-Type" content="text/html; charset=big 5" /> <meta http-equiv="Refresh" content ="300">

meta and HTTP headers <meta http-equiv="Content-Type" content="text/html; charset=big 5" /> <meta http-equiv="Refresh" content ="300"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content ="Tue, 02 Mar 2010 01: 47: 40 GMT"> <meta http-equiv="Date" content ="Tue, 02 Mar 2010 01: 47: 40 GMT"> http: //en. wikipedia. org/wiki/Meta_element

meta and Search Engines <meta name="keywords" content="購物, NB, 筆記型電腦, LV, PC, 手機, 相 機,

meta and Search Engines <meta name="keywords" content="購物, NB, 筆記型電腦, LV, PC, 手機, 相 機, mp 3, Gucci, Coach, psp, Wii, i. Pod" /> <meta name="description" content="PChome線上購物提供 30萬件以上 商品供您挑選，網路價保證便宜，更提供分期 0利率、退貨免費到府收件， 還有24 h保證到貨服務。" /> <meta name="robots" content="index, follow" /> http: //www. im. ncnu. edu. tw/robots. txt

Introduction to TMN Telecommunications Management Network YenCheng ChenIntroduction to TMN Telecommunications Management Network YenCheng Chen
Introduction to Java YinHsong Hsu and YenCheng ChenIntroduction to Java YinHsong Hsu and YenCheng Chen
National Chi Nan University A Brief Introduction toNational Chi Nan University A Brief Introduction to
PHP SNMP Windows YenCheng Chen Department of InformationPHP SNMP Windows YenCheng Chen Department of Information
SNMPv 3 YenCheng Chen Department of Information ManagementSNMPv 3 YenCheng Chen Department of Information Management
Chapter 8 RMON Remote Monitoring YenCheng Chen IMChapter 8 RMON Remote Monitoring YenCheng Chen IM
Host Resources MIB RFC 2790 YenCheng Chen IMHost Resources MIB RFC 2790 YenCheng Chen IM
YenCheng Chen ycchenncnu edu tw http www ncnuYenCheng Chen ycchenncnu edu tw http www ncnu
Web Application Security Vulnerabilities YenCheng Chen Department ofWeb Application Security Vulnerabilities YenCheng Chen Department of
Wireless LAN Security YenCheng Chen Department of InformationWireless LAN Security YenCheng Chen Department of Information
YenCheng Chen IM NCNU http w 3 schoolsYenCheng Chen IM NCNU http w 3 schools
Active Data Object YenCheng Chen Department of InformationActive Data Object YenCheng Chen Department of Information
Advanced Computer Networking YenCheng Chen http ycchen imAdvanced Computer Networking YenCheng Chen http ycchen im
Relational Database Essentials YenCheng Chen ycchenncnu edu twRelational Database Essentials YenCheng Chen ycchenncnu edu tw
Network Management Overview YenCheng Chen Network Management NMNetwork Management Overview YenCheng Chen Network Management NM
Computer Networking YenCheng Chen http www im ncnuComputer Networking YenCheng Chen http www im ncnu
CHI KUADRAT Chi kuadrat 2 l Chi KuadratCHI KUADRAT Chi kuadrat 2 l Chi Kuadrat
CHI SQUARE USES OF CHI SQUARE Chi SquareCHI SQUARE USES OF CHI SQUARE Chi Square