Speaker: Wei-Lin Chen Date: 2010/07/13. Outline Introduction Web Server Setup apache HTML Text Form New standard – HTML5 Development tools References

Speaker: Wei-Lin ChenDate: 2010/07/13

OutlineIntroductionWeb Server

Setup apache HTML

TextForm

New standard – HTML5Development toolsReferences

2

History of the Internet1969 年，美國國防部制定出 NCP (Network

Control Protocol) 來達到電腦間的設備連線，此網路稱為 ARPANET ，為網際網路的前身。

1974 年， TCP/IP 通訊協定被提出，解決了不同電腦系統間的連線問題，並成為 ARPANET 上主要的通訊協定。

1986 年， NSF (National Science Foundation)出資建立美國研發網路骨幹系統 (NSFNET) ，提供高速之資料傳輸能力。

1995 年 12 月，可連線電腦僅有 1600 萬，到了2009 年 12 月，則成長到 18 億。 3

Internet vs. WWWInternet ( 網際網路 )

基本網路通訊架構，電腦間的網路資料傳送都是在此架構上來運作

WWW ( 全球資訊網 )全名為 World Wide Web只是網際網路架構中的其中一個服務，由許多資源所

組成的系統，像是文字、圖像或是影片

4

Web Server在 WWW 的服務上，提供使用者所要求網頁內容的

伺服器提供的網頁內容又可分為靜態網頁跟動態網頁根據 Netcraft 在 2010 年 1 月所發表的調查結果，

使用 Apache 的比例最高，為 54% ，其次為Microsoft 的 IIS ，為 24%Vendor Product Percent

Apache Apache 53.84%

Microsoft IIS 24.08%

lgor Sysoev nginx 7.53%

Google GWS 7.04%

lighttpd Lighttpd 0.46%

http://news.netcraft.com/archives/2010/01/

5

Apache HTTP server project由 Apache Software Foundation 所維護的開源網

頁伺服器專案。支援 Unix 、 Linux 、 Windows能提供靜態、動態的網頁服務，如要達到動態網頁服

務，可以安裝 PHP 搭配上 MySQL 來完成，如果是安裝在 Linux 的平台上，通常稱為 LAMP (Linux + Apache + MySQL + PHP)

6

Install ApacheOn Linux (CentOS):

yum install httpd mysql-server php php-devel php-mysql (need root)

On Windows:Download AppServAppServ is a full-featured of Apache, MySQL,

PHP

7

Startup ApacheCommand:

/et c/init.d/httpd start|stop|restartchkconfig httpd on|offnetstat –nlptfile dictionary: /var/www/

Apache test page:http://localhosthttp://127.0.0.1http://your_IP_address

8

HTMLHTML ( 超文字標示語言 )

全名為 HyperText Markup Language具有超文字 (HyperText) 、超連結 (HyperLink) 、

超媒體 (HyperMedia) 的特性，透過 HTTP 通訊協定，便能夠透過 WWW 的架構做交流

超文字是藉由一些特殊標籤的協助，用來組織文件內容

標示 (Markup) 是透過在文件中插入標籤 (tag) 來賦予文字一些特性

9

HTML basic format<html>

<head><title> 網頁的標題 </title>

</head> <body>

網頁的內容 </body>

</html>

不會顯示的內容

會顯示的內容

10

HTML Tags<…>

Paired Tags ： <…> … </…>Single Tag ： <…/>

<elementattribute1=“value1”attribute2=“value2”

…>

11

Text - HeadingsHeadings

<h1>The Main Title, Largest Headings</h1><h2>The Subtitle, Smaller than H1</h2><h3>The Sub-subtitle, Smaller than H2</h3><h4>…</h4><h5>…</h5><h6>The Smallest Title</h6>

12

Text - Paragraphs<p>…</p>Alignment – An Optional Attribute of <p>

<p align=“left”>ABC…</p><p align=“center”>DEF…</p><p align=“right”>GHI…</p><p align=“justify”>JKL…</p>

13

Text – Space and Line BreaksHow to create multiple spaces?

□ = Linux□□Group = Linux Group

How to break lines?Hello ┘ Linux Group ┘Hello<br/>Linux Group<br/>

14

Test – Some Common Effects

15

Text – Special Characters□ = ＜ = <＞ = >＆ = &“ = "“a>b”□&□”a<b” = "a>b" & "a<b" 16

Text – Horizontal Line<hr/> =Separating ContentIt is a new paragraph after <hr/>

17

HyperlinkAnchor

<a href = “URL”> Description for the link to some URL </a>FTP

<a href = “FTP_URL”>This is a FTP</a> Browser will open some directory or download the file

E-mail <a href = “mailto:MAIL_URL”>Send to me</a> Browser will start a program, like Outlook, for user to

compose e-mails 18

Image<img src=“URL of Image” alt=“An alternate Text for Image” title=“Image Description for Mouse” border=“pixels” height=“pixels/%” width=“pixels/%” />

19

ListUnordered List

●○■

Ordered List1, 2, 3, …A, B, C, …

20

List – Unordered List<ul> - Tag for Unordered List

Type=“…” disc - ● circle - ○ square - ■

<li> - Tag for a List Item<ul> <li>Linux</li> <li>Windows</li> </ul> 21

List – Ordered List<ol> - Tag for Ordered List

Type=“…” 1 – 1, 2, 3, … A – A, B, C, … I – Ⅰ, Ⅱ, Ⅲ, …

<ol type=“1”> <li>Linux</li> <li value=“5”>Windows</li> </ol>

22

Form<form action=“” method=“” enctype=“” > <input…/>… <select…>…</select>… <textarea>…</textarea>… </form> 23

Form - input<input

type=“text/radio/checkbox/button/file/password/

submit/reset/…” name=“InputName” value=“InputValue” />

24

Form – input (text)<input type=“text” size=“The width displayed for users” maxlength=“The width limitation of input

text” name=“DefaultName” value=“DefaultValue” />

25

Form – input (password)<input type=“password” size=“The width displayed for users” maxlength=“The width limitation of input

text” name=“DefaultName” value=“DefaultValue” />

26

Form – input (submit)<input type=“submit” value=“A content for submit button” />Button size will change automatically

27

Form – input (reset)<input type=“reset” value=“A content for reset button” />Button size will change automatically

28

Form – input (button)Default a clickable button, that does not do

anything<input type=“button” value=“A content for this button” onclick=“A JavaScript to be activated” />

29

Form – input (file) For users to upload a file to web server <input type=“file” name=“TheNameForProgramToHandle” /> Combined with <form method=“post” enctype=“multipart/form-data” action=“URLofProgramToHandle” > 30

Form – input (radio)Single selection among one or multiple choices<input type=“radio” name=“alphabet” value=“A” /> A <input type=“radio” name=“alphabet” value=“B” /> BOnly one of all inputs with the same name can be

chosen

31

Form – input (checkbox)One or more selection among one or multiple choices<input type=“checkbox” name=“animal” value=“dog” /> dog <input type=“checkbox” name=“animal” value=“cat” /> catAll checked inputs are submitted with the same name

32

Form - select The <select> tag is used to create a select list

(drop-down list) <select name=“country” size=“The number of

visible options”> <option value=“TW”> Taiwan </option> <option value=“JP”> Japan </option> </select> 33

Form - select How to enable multiple choices in <select>? <select name=“country” size=“The number of

visible options” multiple=“multiple”> <option value=“TW”> Taiwan </option> <option value=“JP”> Japan </option> </select>

34

Form - textareaFor input with text more than one line<textarea rows=“The height of the text area” cols=“The width of the text area” > Default Input Text </textarea>

35

HTML5HTML5 是一個新的網路標準，目標在於取代現有的

HTML 標準HTML5 ~= HTML + CSS* + JavaScript APIs需要瀏覽器的支援

*CSS = Cascading Style Sheets 36

Apple CEO Steve Jobs saysSometimes when we get rid of things, people

call us crazy... But sometimes you just have to pick the things that are going to be the right horse to ride forward... And Flash has had its day... but HTML5 is starting emerge.

http://www.readwriteweb.com/archives/steve_jobs_at_d8.php 37

http://slides.html5rocks.com/#slide338

HTML5 – HTML featuresSemantics (New tags, Link Relations,

Microdata)Accessibility (ARIA* roles)Web Forms 2.0 (Input Fields)Multimedia (Audio Tag, Video Tag)2D and 3D drawing (Canvas, WebGL, SVG*)

*ARIA = Accessible Rich Internet Applications*SVG = Scalable Vector Graphics 39





Development toolsOn Linux:

vi, vim, …Aptana Studio

On Windows:NotepadDreamweaverAptana Studio

44

IE6 MUST DIE!

45

References Internet vs. Web

http://en.wikipedia.org/wiki/Internet Apache HTTP Server Project

http://httpd.apache.org/ Appserv Open Project

http://www.appservnetwork.com/index.php WWW 伺服器 ( 鳥哥的 Linux 私房菜 )

http://linux.vbird.org/linux_server/0360apache.php World Wide Web Consortium (W3C)

http://www.w3.org/

46

References HTML & HTML5 Tutorial

http://www.w3schools.com/html/default.asp http://www.w3schools.com/html5/default.asp

HTML5ROCKS (Made by Google) http://www.html5rocks.com/

Comparison of layout engines (HTML5) http://en.wikipedia.org/wiki/Comparison_of_layout_engines_

%28HTML5%29 IE6 MUST DIE!

http://mashable.com/2009/07/16/ie6-must-die/ http://www.techbang.com.tw/posts/1251

Aptana Studio http://www.aptana.com/ 47

Documents

Speaker: Wei-Lin Chen Date: 2010/07/13. Outline Introduction Web Server Setup apache HTML Text Form New standard – HTML5 Development tools References