Speaker: Wei-Lin Chen Date: 2010/07/13 Apache & HTML Speaker: Wei-Lin Chen Date: 2010/07/13
Outline 2 Introduction Web Server HTML New standard – HTML5 Setup apache HTML Text Form New standard – HTML5 Development tools References 2
History of the Internet 1969年，美國國防部制定出NCP (Network Control Protocol)來達到電腦間的設備連線，此網路稱為ARPANET，為網際網路的前身。 1974年，TCP/IP通訊協定被提出，解決了不同電腦系統間的連線問題，並成為ARPANET上主要的通訊協定。 1986年，NSF (National Science Foundation)出資建立美國研發網路骨幹系統(NSFNET)，提供高速之資料傳輸能力。 1995年12月，可連線電腦僅有1600萬，到了2009年12月，則成長到18億。 3
Internet vs. WWW 4 Internet (網際網路) WWW (全球資訊網) 基本網路通訊架構，電腦間的網路資料傳送都是在此架構上來運作 WWW (全球資訊網) 全名為World Wide Web 只是網際網路架構中的其中一個服務，由許多資源所組成的系統，像是文字、圖像或是影片 4
Web Server 5 在WWW的服務上，提供使用者所要求網頁內容的伺服器 提供的網頁內容又可分為靜態網頁跟動態網頁 根據Netcraft在2010年1月所發表的調查結果，使用Apache的比例最高，為54%，其次為Microsoft的IIS，為24% Vendor Product Percent Apache 53.84% Microsoft IIS 24.08% lgor Sysoev nginx 7.53% Google GWS 7.04% lighttpd Lighttpd 0.46% 5 http://news.netcraft.com/archives/2010/01/
Apache HTTP server project 由Apache Software Foundation所維護的開源網頁伺服器專案。 支援Unix、Linux、Windows 能提供靜態、動態的網頁服務，如要達到動態網頁服務，可以安裝PHP搭配上MySQL來完成，如果是安裝在Linux的平台上，通常稱為LAMP (Linux + Apache + MySQL + PHP) 6
Install Apache 7 On Linux (CentOS): On Windows: yum install httpd mysql-server php php-devel php-mysql (need root) On Windows: Download AppServ AppServ is a full-featured of Apache, MySQL, PHP 7
Startup Apache 8 Command: Apache test page: /et c/init.d/httpd start|stop|restart chkconfig httpd on|off netstat –nlpt file dictionary: /var/www/ Apache test page: http://localhost http://127.0.0.1 http://your_IP_address 8
HTML 9 HTML (超文字標示語言) 全名為HyperText Markup Language 具有超文字(HyperText)、超連結(HyperLink)、超媒體(HyperMedia)的特性，透過HTTP通訊協定，便能夠透過WWW的架構做交流 超文字是藉由一些特殊標籤的協助，用來組織文件內容 標示(Markup)是透過在文件中插入標籤(tag)來賦予文字一些特性 9
HTML basic format 10 <html> </html> <head> <title> 網頁的標題 </title> </head> <body> 網頁的內容 </body> </html> 不會顯示的內容 會顯示的內容 10
HTML Tags 11 <…> <element …> Paired Tags：<…> … </…> Single Tag：<…/> <element attribute1=“value1” attribute2=“value2” …> 11
Text - Headings 12 Headings <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 13 <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 Breaks How 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 <b>Bold</b> = Bold <i>Italic</i> = Italic <u> Underline</u> = Underline <del>Delete</del> = Delete X<sup>2</sup> = X2 X<sub>2</sub> = X2 15
Text – Special Characters □ = ＜ = < ＞ = > ＆ = & “ = " “a>b”□&□”a<b” = "a>b" & "a<b" 16
Text – Horizontal Line 17 <hr/> = Separating Content It is a new paragraph after <hr/> 17
Hyperlink 18 Anchor <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 19 <img src=“URL of Image” alt=“An alternate Text for Image” title=“Image Description for Mouse” border=“pixels” height=“pixels/%” width=“pixels/%” /> 19
List Unordered List ● ○ ■ Ordered List 1, 2, 3, … A, B, C, … 20
List – Unordered List 21 <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 22 <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 23 <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) 25 <input type=“text” size=“The width displayed for users” maxlength=“The width limitation of input text” name=“DefaultName” value=“DefaultValue” /> 25
Form – input (password) type=“password” size=“The width displayed for users” maxlength=“The width limitation of input text” name=“DefaultName” value=“DefaultValue” /> 26
Form – input (submit) 27 <input type=“submit” value=“A content for submit button” /> Button size will change automatically 27
Form – input (reset) 28 <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) 30 For users to upload a file to web server type=“file” name=“TheNameForProgramToHandle” /> Combined with <form method=“post” enctype=“multipart/form-data” action=“URLofProgramToHandle” > 30
Form – input (radio) 31 Single selection among one or multiple choices type=“radio” name=“alphabet” value=“A” /> A type=“radio” name=“alphabet” value=“B” /> B Only 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 type=“checkbox” name=“animal” value=“cat” /> cat All 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 </select> 33
Form - select 34 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 </select> 34
Form - textarea 35 For 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
HTML5 36 HTML5是一個新的網路標準，目標在於取代現有的HTML標準 HTML5 ~= HTML + CSS* + JavaScript APIs 需要瀏覽器的支援 *CSS = Cascading Style Sheets 36
Apple CEO Steve Jobs says Sometimes 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
38 http://slides.html5rocks.com/#slide3
HTML5 – HTML features Semantics (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
40 http://slides.html5rocks.com/#slide21
41 http://slides.html5rocks.com/#slide22
42 http://slides.html5rocks.com/#slide23
43 http://slides.html5rocks.com/#slide26
Development tools 44 On Linux: On Windows: vi, vim, … Aptana Studio Notepad Dreamweaver 44
IE6 MUST DIE! 45
References 46 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 47 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