1 / 30

Apache & HTML

Apache & HTML. Speaker: Hsiang-Ting Fang Date: 2012/07/12. Outline. Introduction Web Server Setup apache HTML Text Form New standard – HTML5 Development tools References. 2. Web Server. 在 WWW 的服務上，提供使用者所要求網頁內容的伺服器 提供的網頁內容又可分為靜態網頁跟動態網頁

thea
Télécharger la présentation

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: Hsiang-Ting Fang Date: 2012/07/12

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

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

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

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

  6. Configuration • 設定檔路徑:/etc/httpd/conf/httpd.conf • DocumentRoot "/var/www/html“ • <IfModule mod_userdir.c> UserDir www</IfModule> • DirectoryIndex index.html index.html.var index.htm index.php • AddDefaultCharset UTF-8 • <VirtualHost *:80 > ServerAdmin dmcverdan@gmail.com DocumentRoot /var/www/html/mrtg ServerName mrtg.dvc.ncnu.info ErrorLog logs/error.mrtg.ncnu.info</VirtualHost>

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

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

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

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

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

  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> 12

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

  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 14

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

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

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

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

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

  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> 20

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

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

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

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

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

  26. 26 http://slides.html5rocks.com/#slide21

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

  28. Development tools • On Linux: • vi, vim, … • Blue fish • On Windows: • Notepad • Dreamweaver • Blue fish 28

  29. References • 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/ • HTML5ROCKS (Made by Google) • http://www.html5rocks.com/ • http://voip.com.ncnu.edu.tw/Summer2010/Apache_HTML.ppt 29

  30. Exercise • 安裝Apach並啟動它 • 將網頁個人目錄對應到的路徑改成public_html • 將往頁的index頁面指向index.happy並在個人網頁目錄建制一個index.happy檔案

More Related