HTML

Download Report

Transcript HTML 

HTML
Principle of Programming
 Interface with PC
Compiler / Interpreter
English
C++
Machine
Code
Japanese
Chinese
Perl
Assembler
Machine Code
2
WEB FOUNDATION
3
World Wide Web
 WWW comprises software (Web server and
browser) and data (Web sites)
HTML, XML, ...
Client Side
Server Side
JavaScript
VBScript
DHTML
Java Applets
CGI
ASP
Java Servlets
4
HyperText Markup Language
 Markup Language: to format text and information for
display by a Web browser
 Vs. C, C++: procedural language, for performing actions
 Main Components of HTML
 Tags
 Text and information
<p><font size="20">Bioinformatics</font></p>
<p><strong>Bioinformatics</strong></p>
<p><em>Bioinformatics</em></p>
<blockquote>
<p>Bioinformatics</p>
</blockquote>
<ol>
<li>Bioinformatics</li>
</ol>
<ul>
<li>Bioinformatics</li>
</ul>
5
How HTML is Displayed
Http protocol
(HyperText Transfer Protocol)
Browser Command
HTML
URL:http://www.google.com
HTML Display
render
Text & binary data
6
How HTML is Displayed – from remote
site
HTML
CGI
ASP
PHP
…
http request
Browser Command
URL:http://www.yahoo.com
User
http response
DB
HTML Display
Remote
Web Server
Client Site
7
How HTML is Displayed – from client
site
HTML
Browser Command
URL:c:\my_page.html
User
HTML Display
Client Site
8
HTTP: Hypertext Transfer Protocol
 HTTP is behind every request for a web
document or graph, every click of a
hypertext link, and every submission of a
form
 HTTP specifies how clients request data, and
how servers respond to these requests.
See also, http://www.w3.org/Protocols/
9
Why study HTTP ?
 Understand the interaction between web clients
(browsers, robots, search engines, etc.) and web
servers.
 Manually query web servers and receive low-level
information that typical web browsers hide from the user.
 can better understand the configuration and capabilities of a
particular server
 debug configuration errors with the server or programming
errors in programs invoked by the web server.
 Hacking !
 Streamline web services to make better use of the
protocol.
10
HTTP Transactions
 Requests
 Given the following URL: http://www.google.com:80/ the browser
interprets the URL as follows:
 http://
 Use HTTP, the Hypertext Transfer Protocol.
 www.google.com
 Contact a computer over the network with the hostname
of www.google.com.
 :80
 Connect to the computer at port 80. The port number can
be any legitimate IP port number: 1 through 65535,
 /
 Anything after the hostname and optional port number is
regarded as a document path. In this example, the
document path is /.
11
Tools
 Server platform
 Apache
 Dynamic program
 PHP
 Database
 MySQL
 HTML editor
 Macromedia Dreamweaver 8
12
Introduction for Appserv
 http://www.appservnetwork.com/
 AppServ 2.5.9




Apache 2.2.4
PHP 5.2.3
MySQL 5.0.45
phpMyAdmin-2.10.2
 http://vawidea.org/php%20bible/
 http://www.jollen.org/php/
13
Mapping
 c:\appserv\www\ is the document of the
apache server platform.
 This document can map to then URL:
 http://localhost/webpage/ 
c:\appserv\www\webpage\
 http://192.168.0.121/webpage/
 http://127.0.0.1/webpage/
HTML file structure

<html>
<head>
<title>web page title</title>
</head>
<body>
statement
…….
</body>
</html>

Practice
Output: hello world!
http://localhost/html_practice/helloworld.html
15
CSS(Cascading Style Sheet )
 Focus on formatting and presenting
information
 Specifying the presentation of a Web page
 Fonts, spacing, margins, …
 Simplifying the maintenance and modifying
cost of a document’s layout
16
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Inline stylesheet
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.1: inline.html -->
<!-- Using inline styles
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
The style attribute specifies the style for an
<title>Inline Styles</title>
</head>
element. Some style properties are font-size and
color.
<body>
<p>This text does not have any style applied to it.</p>
<!-- The style attribute allows you to declare
<!-- inline styles. Separate multiple styles
<!-- with a semicolon.
<p style = "font-size: 20pt">This text has the
<em>font-size</em> style applied to it, making
</p>
-->
-->
-->
it 20pt.
<p style = "font-size: 20pt; color: #0000ff">
This text has the <em>font-size</em> and
<em>color</em> styles applied to it, making it
20pt. and blue.</p>
</body>
</html>
17
Inline stylesheet
output
18
CSS
 Inline stylesheet
 Embedded stylesheet
 <style type="text/css">
<!-body{color: #000;}
-->
</style>
 Imported stylesheet
 Linked stylesheet
 You need to construct a CSS file first
 <link rel=stylesheet type="text/css" href="style.css">
 Let us discuss the CSS by Dreamweaver!
19