Embed Size (px)
Citation preview
HTMLHTML
Principle of Programming
Interface with PC
2
English
Japanese
Chinese
Machine Code
Compiler / Interpreter
C++
Perl
Assembler
Machine Code
3
World Wide Web
WWW comprises software (Web server and browser) and data (Web sites)
4
Client Side
JavaScriptVBScriptDHTML
Java Applets
Server Side
CGIASP
Java Servlets
HTML, XML, ...
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
5
<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>
How HTML is Displayed
6
Browser Command
HTML Display
Http protocol(HyperText Transfer Protocol)
Text & binary data
render
HTML URL:http://www.google.com
How HTML is Displayed – from remote site
7
HTML Display
User Browser Command
URL:http://www.yahoo.com
RemoteRemoteWeb ServerWeb Server
Client SiteClient Site
DBDB
HTMLCGIASPPHP…
http request
http response
How HTML is Displayed – from client site
8
HTML Browser Command
URL:c:\my_page.html
HTML Display
User
Client Site
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.
9
See also, http://www.w3.org/Protocols/
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>
15
PracticePracticeOutput: hello world!
http://localhost/html_practice/helloworld.html
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 Inline stylesheet
17
1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 <!-- Fig. 6.1: inline.html -->6 <!-- Using inline styles -->7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Inline Styles</title>11 </head>12 13 <body>14 15 <p>This text does not have any style applied to it.</p>16 17 <!-- The style attribute allows you to declare -->18 <!-- inline styles. Separate multiple styles -->19 <!-- with a semicolon. -->20 <p style = "font-size: 20pt">This text has the 21 <em>font-size</em> style applied to it, making it 20pt.22 </p>23 24 <p style = "font-size: 20pt; color: #0000ff">25 This text has the <em>font-size</em> and 26 <em>color</em> styles applied to it, making it27 20pt. and blue.</p>28 29 </body>30 </html>
The style attribute specifies the style for an element. Some style properties are font-size and
color.
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
