Apache_HTML - www.PowerCam.cc

Download Report

Transcript Apache_HTML - www.PowerCam.cc 

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，為網際網路的前身。
 1974年，TCP/IP通訊協定被提出，解決了不同電腦系統
間的連線問題，並成為ARPANET上主要的通訊協定。
 1986年，NSF (National Science Foundation)出資建立美
國研發網路骨幹系統(NSFNET)，提供高速之資料傳輸
能力。
 1995年12月，可連線電腦僅有1600萬，到了2009年12月
，則成長到18億。
3
Internet vs. WWW
 Internet (網際網路)
 基本網路通訊架構，電腦間的網路資料傳送都是在此
架構上來運作
 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 Apache
 On Linux (CentOS):
 yum install httpd mysql-server php php-devel phpmysql (need root)
 On Windows:
 Download AppServ
 AppServ is a full-featured of Apache, MySQL, PHP
7
Startup Apache
 Command:
 /etc/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
 HTML (超文字標示語言)
 全名為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：<…/>
 <element
attribute1=“value1”
attribute2=“value2”
…>
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>
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 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
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
 □ = &nbsp;
 ＜ = &lt;
 ＞ = &gt;
 ＆ = &amp;
 “ = &quot;
 “a>b”□&□”a<b”
= &quot;a&gt;b&quot;
&nbsp;&amp;&nbsp;
&quot;a&lt;b&quot;
16
Text – Horizontal Line
 <hr/> =
 Separating Content
 It is a new paragraph after <hr/>
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
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
List
 Unordered List
 ●
 ○
 ■
 Ordered List
 1, 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” />
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
<input
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
</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 - 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
HTML5
 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
http://slides.html5rocks.com/#slide3
38
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
http://slides.html5rocks.com/#slide21
40
http://slides.html5rocks.com/#slide22
41
http://slides.html5rocks.com/#slide23
42
http://slides.html5rocks.com/#slide26
43
Development tools
 On Linux:
 vi, vim, …
 Aptana Studio
 On Windows:
 Notepad
 Dreamweaver
 Aptana 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_%28
HTML5%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