Apache & HTML

Apache & Apache & HTMLHTML

Speaker: Hsiang-Ting FangDate: 2012/07/12

OutlineOutline• Introduction• Web Server

o Setup apache

• HTMLo Texto Form

• New standard – HTML5• Development tools• References

2

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

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

Apache 的比例最高，為 64.36% ，其次為 Microsoft的 IIS ，為 14.99%

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

3

DeveloperJanuary

2012Percent

Apache 640,547 64.36%Microsoft 149,209 14.99%nginx 84,541 8.49%Google 23,894 2.40%

Apache HTTP server Apache HTTP server projectproject

• 由 Apache Software Foundation 所維護的開源網頁伺服器專案。

• 支援 Unix 、 Linux 、 Windows• 能提供靜態、動態的網頁服務，如要達到動態網頁服務，

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

4

Install ApacheInstall Apache• On Linux (CentOS):

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

• On Windows:o Download AppServo AppServ is a full-featured of Apache, MySQL, PHP

5

ConfigurationConfiguration• 設定檔路徑 : /etc/httpd/conf/httpd.conf

o DocumentRoot "/var/www/html“o <IfModule mod_userdir.c>

UserDir www</IfModule>

o DirectoryIndex index.html index.html.var index.htm index.phpo AddDefaultCharset UTF-8o <VirtualHost *:80 >

ServerAdmin [email protected] DocumentRoot /var/www/html/mrtg ServerName mrtg.dvc.ncnu.info ErrorLog logs/error.mrtg.ncnu.info</VirtualHost>

6

Startup ApacheStartup Apache• Command:

o /et c/init.d/httpd start|stop|restarto chkconfig httpd on|offo netstat –nlpto file dictionary: /var/www/

• Apache test page:o http://localhosto http://127.0.0.1o http://your_IP_address

7

HTMLHTML• HTML ( 超文字標示語言 )

o 全名為 HyperText Markup Languageo 具有超文字 (HyperText) 、超連結 (HyperLink) 、超媒體 (HyperMedia) 的特

性，透過 HTTP 通訊協定，便能夠透過 WWW 的架構做交流o 超文字是藉由一些特殊標籤的協助，用來組織文件內容o 標示 (Markup) 是透過在文件中插入標籤 (tag) 來賦予文字一些特性

8

HTML basic formatHTML basic format• <html>

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

</head> <body>

網頁的內容 </body>

</html>

不會顯示的內容

會顯示的內容

9

HTML TagsHTML Tags• <…>

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

• <elementattribute1=“value1”attribute2=“value2”

…>

10

Text - HeadingsText - Headings• Headings

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

11

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

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

12

Text – Space and Line Text – Space and Line BreaksBreaks

• How to create multiple spaces?o □ = o Linux□□Group = Linux Group

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

13

Test – Some Common Test – Some Common EffectsEffects

14

Text – Special Text – Special CharactersCharacters

• □ = • ＜ = <• ＞ = >• ＆ = &• “ = "• “a>b”□&□”a<b” = "a>b" & "a<b"

15

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

16

HyperlinkHyperlink• Anchor

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

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

o 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

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

18

ListList• Unordered List

o ●o ○o ■

• Ordered Listo 1, 2, 3, …o A, B, C, …

19

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

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

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

20

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

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

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

21

FormForm• <form action=“” method=“” enctype=“” > <input…/>… <select…>…</select>… <textarea>…</textarea>… </form>

22

Form - inputForm - input• <input

type=“text/radio/checkbox/button/file/password/ submit/reset/…” name=“InputName” value=“InputValue” />

23

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

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

*CSS = Cascading Style Sheets 24

HTML5 – HTML HTML5 – HTML featuresfeatures

• 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

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

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

Development toolsDevelopment tools• On Linux:

o vi, vim, …o Blue fish

• On Windows:o Notepado Dreamweavero Blue fish

28

ReferencesReferences• Apache HTTP Server Project

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

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

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

o http://www.w3.org/

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

• http://voip.com.ncnu.edu.tw/Summer2010/Apache_HTML.ppt

29

ExerciseExercise1. 安裝 Apach 並啟動它2. 將網頁個人目錄對應到的路徑改成 public_html3. 將往頁的 index 頁面指向 index.happy 並在個人網頁

目錄建制一個 index.happy 檔案

30

Documents

Apache & HTML