1 / 47

Apache & HTML

Apache & HTML. Speaker: Wei-Lin Chen Date: 2010/07/13. Outline. Introduction Web Server Setup apache HTML Text Form New standard – HTML5 Development tools References. 2. History of the Internet. 1969 年，美國國防部制定出 NCP (Network Control Protocol) 來達到電腦間的設備連線，此網路稱為 ARPANET ，為網際網路的前身。

hespinosa
Download Presentation

Apache & HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Apache & HTML Speaker: Wei-Lin Chen Date: 2010/07/13

  2. Outline • Introduction • Web Server • Setup apache • HTML • Text • Form • New standard – HTML5 • Development tools • References 2

  3. 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

  4. Internet vs. WWW • Internet (網際網路) • 基本網路通訊架構，電腦間的網路資料傳送都是在此架構上來運作 • WWW (全球資訊網) • 全名為World Wide Web • 只是網際網路架構中的其中一個服務，由許多資源所組成的系統，像是文字、圖像或是影片 4

  5. Web Server • 在WWW的服務上，提供使用者所要求網頁內容的伺服器 • 提供的網頁內容又可分為靜態網頁跟動態網頁 • 根據Netcraft在2010年1月所發表的調查結果，使用Apache的比例最高，為54%，其次為Microsoft的IIS，為24% 5 http://news.netcraft.com/archives/2010/01/

  6. Apache HTTP server project • 由Apache Software Foundation所維護的開源網頁伺服器專案。 • 支援Unix、Linux、Windows • 能提供靜態、動態的網頁服務，如要達到動態網頁服務，可以安裝PHP搭配上MySQL來完成，如果是安裝在Linux的平台上，通常稱為LAMP (Linux + Apache + MySQL + PHP) 6

  7. Install Apache • On Linux (CentOS): • 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

  8. Startup Apache • Command: • /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

  9. HTML • HTML (超文字標示語言) • 全名為HyperText Markup Language • 具有超文字(HyperText)、超連結(HyperLink)、超媒體(HyperMedia)的特性，透過HTTP通訊協定，便能夠透過WWW的架構做交流 • 超文字是藉由一些特殊標籤的協助，用來組織文件內容 • 標示(Markup)是透過在文件中插入標籤(tag)來賦予文字一些特性 9

  10. HTML basic format • <html> <head> <title> 網頁的標題 </title> </head> <body> 網頁的內容 </body> </html> 不會顯示的內容 會顯示的內容 10

  11. HTML Tags • <…> • Paired Tags：<…> … </…> • Single Tag：<…/> • <element attribute1=“value1” attribute2=“value2” …> 11

  12. Text - Headings • 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

  13. 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

  14. Text – Space and Line Breaks • How to create multiple spaces? • □ = &nbsp; • Linux□□Group = Linux&nbsp;&nbsp;Group • How to break lines? • Hello ┘ Linux Group ┘ • Hello<br/>Linux Group<br/> 14

  15. 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

  16. Text – Special Characters • □ = &nbsp; • ＜ = &lt; • ＞ = &gt; • ＆ = &amp; • “ = &quot; • “a>b”□&□”a<b” = &quot;a&gt;b&quot; &nbsp;&amp;&nbsp; &quot;a&lt;b&quot; 16

  17. Text – Horizontal Line • <hr/> = • Separating Content • It is a new paragraph after <hr/> 17

  18. Hyperlink • 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

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

  20. List • Unordered List • ● • ○ • ■ • Ordered List • 1, 2, 3, … • A, B, C, … 20

  21. 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

  22. 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

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

  24. Form - input • <input type=“text/radio/checkbox/button/file/password/ submit/reset/…” name=“InputName” value=“InputValue” /> 24

  25. Form – input (text) • <input type=“text” size=“The width displayed for users” maxlength=“The width limitation of input text” name=“DefaultName” value=“DefaultValue” /> 25

  26. Form – input (password) • <input type=“password” size=“The width displayed for users” maxlength=“The width limitation of input text” name=“DefaultName” value=“DefaultValue” /> 26

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

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

  29. 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

  30. 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

  31. 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” /> B • Only one of all inputs with the same name can be chosen 31

  32. 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” /> cat • All checked inputs are submitted with the same name 32

  33. 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

  34. 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

  35. Form - textarea • 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

  36. HTML5 • HTML5是一個新的網路標準，目標在於取代現有的HTML標準 • HTML5 ~= HTML + CSS* + JavaScript APIs • 需要瀏覽器的支援 *CSS = Cascading Style Sheets 36

  37. 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. 37 http://www.readwriteweb.com/archives/steve_jobs_at_d8.php

  38. 38 http://slides.html5rocks.com/#slide3

  39. 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. 40 http://slides.html5rocks.com/#slide21

  41. 41 http://slides.html5rocks.com/#slide22

  42. 42 http://slides.html5rocks.com/#slide23

  43. 43 http://slides.html5rocks.com/#slide26

  44. Development tools • On Linux: • vi, vim, … • Aptana Studio • On Windows: • Notepad • Dreamweaver • Aptana Studio 44

  45. IE6 MUST DIE! 45

  46. 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

  47. 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

More Related