HTML简介-Web制作初级教程

AirJD

没有录音文件

00:00/00:00

加收藏

HTML简介-Web制作初级教程

发布者 weber

发布于 1453339833656 浏览 5958 关键词 English, 前端, CSS, JavaScript

分享到

第1页

HTML (Hypertext MarkUP Language)

HTML is the lingua franca for publishing hypertext on the World Wide Web
Define tags <html><body> <head>….etc
Allow to embed other scripting languages to manipulate design layout, text and graphics
Platform independent
Current version is 4.x and in February W3C released the first draft of a test suite 4.01
For more info: http://www.w3.org/MarkUp/

第2页

HTML (Hypertext Markup Language)

Example HTML code:
<HTML>
<head>
<title>Hello World</title>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff”>
<H1>Hello World</H1>
</font>
</body>
</HTML>

第3页

HTML (Hypertext Markup Language)

第4页

HTML (Hypertext Markup Language)

Common features
Tables
Frame
Form
Image map
Character Set
Meta tags
Images, Hyperlink, etc…

第5页

HTML (Hypertext Markup Language)

File Extensions:
HTML, HTM
Recent recommendation of W3C is XHTML 1.0 combines the strength of HTML 4 with the power of XML.
XHTML 1.0 is the first major change to HTML since HTML 4.0 was released in 1997
More info: http://www.w3.org/TR/xhtml1/

第6页

CSS (Cascading Style Sheet)

Simple mechanism for adding style to web page
Code be embedded into the HTML file
HTML tag:
<style type=“text/css”>CODE</style>
Also be in a separate file FILENAME.css
HTML tag:
<link rel=“stylesheet” href=“scs.css” type=“text/css”>
Style types mainly include:
Font
Color
Spacing

第7页

CSS (Cascading Style Sheet)

Controls format:
Font, color, spacing
Alignment
User override of styles
Aural CSS (non sighted user and voice-browser)
Layers
Layout
User Interface

第8页

CSS (Cascading Style Sheet)

Client’s browser dependable
Example code:

p,h1,h2 {
margin-top:0px;
margin-bottom:100px;padding:20px 40px 0px 40px;
}
More info:
http://www.w3.org/Style/CSS/
http://www.w3schools.com/css/css_intro.asp

第9页

CSS (Cascading Style Sheet)

<HTML>
<head>
<title>Hello World</title>
<style type=“text/css”>
p,h1,h2 {
margin-top:0px;
margin-bottom:100px;padding:40px 40px 0px 40px;
}
</style>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff”>
<h1>Hello World<h1>
</font>
</body>
</HTML>

第10页

CSS (Cascading Style Sheet)

第11页

HTML without CSS

第12页

JavaScript

Compact object-based scripting language
Code be embedded into HTML file
HTML tag
<script language=“javascript”>CODE</script>
Also be in a separate file FILENAME.js
HTML tag
<SCRIPT LANGUAGE="JavaScript" SRC=“FILENAME.js"></SCRIPT>

第13页

JavaScript

Main objectives:
User interface, CGI capabilities without involving server
Client side compilation
Server provides no support
Security hazard for client’s computer
SCS websites JavaScript's Examples
http://www.cs.cmu.edu

第14页

VBScripts

Microsoft’s share of scripting language
Similar objectives as JavaScript and any other scripting language
Similar to Visual Basic
<SCRIPT LANGUAGE="VBScript">CODE</script>
VBScript is integrated with WWW and web browsers
Other Microsoft developer tools

第15页

PHP (Hypertext Preprocessor)

PHP- HTML-embedded scripting language
Syntax looks like C, JAVA, and PERL
File extension: FILENAME.php
Main Objective:
Generate Dynamic content
User Interface
Server side loadable module
Server side execution
Current version and release: 4.3.x
More info: http://www.php.net

第16页

PHP (Hypertext Preprocessor)

Sample Code
<HTML>
<head><title>
PHP Sample Code</title></head>
<body bgcolor = "#000000">
<font color = "#ffffff"><h1>
This is a PHP TEST</h1>
<p>
<?php
$cnt=0;
while($cnt <= 4)
{   $cnt++;
  echo "Hello World<P>"; }
?>
</body></HTML>

第17页

PHP (Hypertext Preprocessor)

第18页

PHP (Hypertext Preprocessor)

PHP is getting really popular in the web developers community
ODBC support
PHP developer community think this is the web future
SCS Undergraduate sites; done in PHP:
http://www.ugrad.cs.cmu.edu/
Drawback:
Security
Easy manipulation of code for hackers

第19页

CGI (Common Gateway Interface)

Standard for external gateway programs to interface with information servers such as HTTP servers
Real-time execution
Main Objective:
Dynamic Content
User Interface
Current version 1.1

第20页

CGI (Common Gateway Interface)

Various choice in Programming language selections
C, C++, PERL, Python
PERL; most popular and widely used
Server side execution
Script runs as a stand alone process unlike PHP
Basic difference with PHP is the execution approach

第21页

PERL (Practical Extraction and Report Language)

Commonly used PERL Libraries (Modules):
CGI.pm
DB.pm
DBI.pm
CPAN.pm
Mysql.pm
More on PERL Libraries:
http://www.perl.com/CPAN-local/README.html
http://www.perl.com
http://www.perl.org

第22页

PERL (Practical Extraction and Report Language)

Sample PERL code:
#!/usr/local/bin/perl5.6.1
##  printenv -- demo CGI program which just prints its environment
##
print "Content-type: text/plain\n\n";
foreach $var (sort(keys(%ENV))) {
    $val = $ENV{$var};
    $val =~ s|\n|\\n|g;
    $val =~ s|"|\\"|g;
    print "${var}=\"${val}\"\n";
}
https://superman.web.cs.cmu.edu/cgi-bin/printenv

第23页

PERL (Practical Extraction and Report Language)

More Example of PERL CGI Scripts:
http://calendar.cs.cmu.edu/scsEvents/submit.html
http://calendar.cs.cmu.edu/scs/additionalSearch
Drawback:
Security
Easy manipulation of code for hackers

第24页

Mod_PERL (PERL Module for Apache)

Module that brings together the power of PERL and Apache HTTP server
PERL interpreter embedded in Web Server
Can provide 100x speedups for CGI scripts execution due to Apache::Registry module
Reduce load on server
Less coordination of server process
More info:
http://perl.apache.org/
http://www.modssl.org/docs/2.8/ssl_intro.html

第25页

Secured Web Server (HTTPS, MOD_SSL)

Provide strong cryptography for web server
Mod_ssl is the module for Apache to enable encrypted web connection
Use Secured Socket Layer (SSL v2/v3) and Transport Layer Security
Two categories of cryptographic algorithms
Conventional (Symmetric)
Public Key (Asymmetric)

第26页

Secured Web Server (HTTPS, MOD_SSL)

Conventional or Symmetric
Sender and Receiver share a key
Public key or Asymmetric
Solve the key exchange issue
Certificate
A certificate associates a public key with the real identity of an individual, server
Includes the identification and signature of the Certificate Authority that issued the certificate

第27页

Secured Web Server (HTTPS, MOD_SSL)

第28页

WebISO (Initial Sign-on and Pubcookie)

One time authentication process
Typically username/password-based central authentication
Use standard web browser
Eventually the session time-out
Commonly uses double encryption

第29页

WebISO (Initial Sign-on and Pubcookie)

Pubcookie
Main Model:

User-Agent: Web browsers
Authentication Service:
Kerberos, LDAP, NIS
Example: https://wonderwoman.web.cs.cmu.edu/Reports

第30页

WebISO (Initial Sign-on and Pubcookie)

第31页

Web cookies are simply bits of software placed on your computer when you browse websites
WebISO (Pubcookie) use cookie implementation to keep track of a user
Drawback:
Security

第32页

Kerberos

Network authentication protocal
Developed in MIT
Strong cryptography
Private (shared) key
Use ticket to authenticate
Never sends password over the network
Single sign-on approach for network authentication

第33页

Database Technology (MYSQL)

Database driven backend infrastructure
Content is independent from design
CGI and PHP are widely used
Provide the flexibility of data storage
Popular database for web systems:
MYSQL, MSQL, Cold Fusion, MS-ACCESS, ORACLE
SCS database driven sites USE MYSQL
Example of SCS database driven sites

第34页

Database Technology (MYSQL)

Great database package for handling text
Drawback
View
Multi-master replication
Locking
Support for sub quires
Character set handling
More info: http://www.mysql.com

第35页

XML XSLT (Extensible Stylesheet Language Transformations)

XSLT is designed for use as part of XSL
Stylesheet language for XML
XSLT is also designed to be used independently of XSL
Work under the umbrella of XML
Example:
http://wonderwoman.web.cs.cmu.edu:8888/xml/

第36页

JAVA Applets

Precompiled code
Included in HTML page
HTML tag:
<applet code=FILENAME.class>LIST OF PARAMETER</applet>
The class is executed by clients browser’s JVM (Java Virtual Machine)
JAR (Java Archive) Bundle multiple files into a single archive file
More info: http://java.sun.com/applets/

第37页

Flash

Multimedia web development
Audio, video, animation really flashy web content
3D graphics
More info:
http://www.macromedia.com/devnet/mx/flash/
SCS Web site (Flash):
http://www.cs.cmu.edu/fla/
Performance on low bandwidth is an issue

第38页

Server, Web Server, Load balancing

Servers
SUN, High-end INTEL
Operating Systems:
Solrais, Linux, Windows
Web Server
Apache, IIS, Enterprise, SUN ONE
Load Balancing
Commercial vs Non-commercial product

第39页

VoiceXML (Voice Extensible Markup Language)

Designed for creating
Audio Dialog that feature synthesized speech
Digitized audio
Recognition of spoken and DTMF(Dual-tone-multi-frequency) key input
Recording of spoken input
Telephony
Mixed initiative conversation
http://www.w3.org/TR/voicexml20/
http://www.voicexml.org/

第40页

List of Useful Links

http://www.w3.org/MarkUp/
http://www.w3.org/Style/CSS/
http://www.w3schools.com/css/css_intro.asp
http://www.php.net
http://www.perl.com/
http://www.perl.org
http://www.perl.com/CPAN-local/README.html
http://perl.apache.org
http://www.modssl.org/docs/2.8/ssl_intro.html
http://web.mit.edu/kerberos/www/
http://www.mysql.com
http://www.w3.org/TR/xslt
http://www.xml.com/pub/a/2000/08/holman/s1.html?page=2
http://java.sun.com/applets
http://www.macromedia.com/devnet/mx/flash/
http://www.w3.org/TR/voicexml20/
http://www.voicexml.org/
http://www.w3.org/TR/xhtml1/