HTML Brief Course

最新推荐文章于 2024-09-18 23:11:57 发布

J2虾虾

最新推荐文章于 2024-09-18 23:11:57 发布

阅读量309

点赞数

分类专栏： WEB编程文章标签： php java 网络

WEB编程专栏收录该内容

115 篇文章 0 订阅

订阅专栏

Goals

1. HTML course provides students with the skills to build web pages using the W3C (World Wide Web Consortium)standard.

2. A brief introduction to the leading Web development technologies

Overview

1.Creating static web pages:

Basic HTML Tags
HTML Text Formatting
HTML Links
HTML Lists
HTML Tables
HTML Frames
HTML Forms and Input

2.Developing dynamic web pages:

CGI(PERL)
PHP
ASP
Servlet
JSP

Objectives

Understand and create HTML web pages
Use HTML <Form> to interact with backend resouces
Have a knowlegde of web application architectures

Module 1:Basic HTML Tags

HTML Structure

A Simple HelloWorld.html Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Hello world!Test</title> </head> <body>Hello world!</body> </html>

the sample contains

1. A line containing HTML version information

2. a declarative header section

3. a body containing the document's actual content. The body may be implements by the <body> element or the <frameset> element.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

declares the 4.01 version of HTML is used in the document

the document type declaration names the document type definition(DTD) in use for the document."strict.dtd"is the default DTD.

"EN"indicates the language in the DTD is English

<head>

the <head> element contains information about the current document,such as its title,keywords that may be useful to search engines, and other data that is not considered document content.

<meta>

Meta Names are used to communicate informaction about the web page rather than document content.

They are designed to help search engines index documens

<title>

<title> is what will be used by the browser to display at the top of the browser window

1. Basic HTML Tags

1. Headings:

2.Paragraghs

<p>This is a paragraph</p>

<p>This is another paragraph</p>

3.Line Breaks

<p>This <br> is <br> a para <br>graph with line breaks</p>

4.Comments in HTML

2. HTML Text Formatting

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

3. HTML Lists

1.Unordered Lists (没有顺序的编号)

<ul><li>Coffee</li><li>Milk</li></ul>

2. Ordered Lists

<ol><li>Coffee</li><li>Milk</li></ol>

3. Definition List （定义列表）

<dl><dt>Coffee</dt><dd>Black Hot Drink</dd>

<dt>Milk</dt><dd>White cold drink</dd></dl>

4. HTML Tables

Table

<table> <tr><td>采购订单编号</td><td>客户名称</td><td>备注</td></tr> <tr><td>K1100008</td><td>华诚电子</td><td>一家销售电子产品的企业</td></tr> </table>

Headings in a Table

<table> <tr><th>采购订单编号</th><th>客户名称</th><th>备注</th></tr> <tr><td>K1100008</td><td>华诚电子</td><td>一家销售电子产品的企业</td></tr> </table>

Empty Cells in a Table

<table> <tr><th>软件名称</th><th>出品公司</th><th>备注</th></tr> <tr><td>红色警戒2尤里的复仇</td><td>WESTWOOD</td><td> </td></tr> </table>

5. HTML Frames

1. Frames

<frameset>Defines a set of frames

<frame> Defines a sub window( a frame)

<noframes> Defines a noframe section for browsers that do not handle frames

2.Navigation frame

tryhtml_contents.htm code snippet

<a href="tryhtml_frame_a.htm" target="showframe">Frame a</a><br> <a href="tryhtml_frame_b.htm" target="showframe">Frame b</a><br> <a href="tryhtml_frame_c.htm" target="showframe">Frame c</a><br>

6. HTML Forms and Input

Forms : In general, you need a CGI script,PHP,ASP or JSP in order to use HTML form to invocate（调用，相当于invoke） a server side programming.

<form>

<input>

</form>

Form Format : <form action="......" method = "..."></form>

-action: for server side programming. For Example,action="Hello.jsp"

-method: Get, Post

Get:

clients request the form data are encoded into the URL. The web server

uses the environment variables to retrieve these data.One example is as below:

http://www.baidu.com/s?bs=html&f=8&rsv_bp=1&wd=html&inputT=0 (可以在百度上搜索html)

Post:

the request contains both headers and a body.(This is just like the response from the server.) The body is then the form data encoded just like they would be on the URL if one had used GET.

The GET method is suitable for the data are less than 256 characters, and the request is for the purpose of "search".
The POST method should be used when the request causes a permanent changes of state on the server(such as adding to a data list).

HTML Forms and Input

Input Types

Text Fields : <input type="text" name="firstname">

Password : <input type="password" name="pwd" size="10" maxlength=8>

Radio Buttons: <input type="radio" name="sex" value="male">Male

Checkboxes: <input type="checkbox" name="bike">Bike

Buttons: <input type="button" value="Hello world!">

Drop-down box :

<option value="volvo">Volvo

<option value="saab">Saab

<option value="fiat">Fiat

<option value="audi">Audi

</select>

Textarea: <textarea rows="10" cols="30"></textarea>

HTML Forms and Input

Form's Action and the submit, reset buttons

HTML Forms and Input

Forms's Action and the submit, reset buttons

Send e-mail from a form

HTML Images

Images

Background Images

Link an image

</a>

HTML Multimedia

Audiovisual or audio playing

</embed>

Background Music

Java Applet

Embed a java applet in HTML

HTML 4.01 Features

All features we indroduced above comply with W3C HTML Version 3.2

In HTML Version 4.01, there are some new attributes are introduced,such as Cascading Style Sheet(CSS)for separating the presentation of the document from its structure.

<style> tag: Internal Style Sheet example

<head>

body{background-color:red}

p{margin-left:20px}

h1{color:white}

h3{color:blue}

</style>

</head>

<link>tag:External Style Sheet example

Inline Styles

This is a paragraph

</p>

CSS Syntax

The CSS syntax is made up of three parts: a selector,a property and a value.

selector{property:value}

examples:

body{color:black} p{font-family:"sans serif"} p{text-align:center;color:black;font-family:arial} h1,h2,h3,h4,h5,h6{color:green}

Seletor:class,id

Class Attribute:

p.right{text-align:right} // defining class "right"

p.center{text-align:center} // defining class "center"

This paragraph will be right-alignd.</p>

This paragraph will be center-alignd.</p>

Id Attribute

#wer345{color:green} // declare an id

<span> and <div>:define content to be inline(<span>) or block-level(<div>) to achieve the desired structural and presentational effects.

<DIV class="client"> <P><SPAN class="title">Client Information:</SPAN> <TABLE> <TR><TH>Last Name</TH><TD>Boyera</TD></TR> <TR><TH>First Name</TH><TD>Stephane</TD></TR> <TR><TH>TEL</TH><TD>13715776073</TD></TR> <TR><TH>Email:</TH><TD>shin@163.com</TD></TR> </TABLE> </P>Information is over </DIV>

CSS Font

Font Text

<head> <style type="text/css"> h3{font-family:times} p{font-family:courier} </style> </head>

Font Size

Font Style

<head> <style type="text/css"> h1{font-style:italic} h2{font-style:normal} p{font-style:oblique} </style> </head>

CSS List

Set an image as the list-item marker

<head>
<style>
ul{
list-style-image:url("/images/arrow.gif")
}
</style>
</head>

CSS List Application Example

<body>
<p><b>Note:</b>Netscape 4 does not support the "list-style-image" property.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

CSS Positioning

Aligning images

<head>
<style>
img.top{vertical-align:text-top}
img.bottom{vertical-align:text-bottom}
</style>
</head>

Aligning images example:

<body>
<p>This is an 
     <img class="top" src="/images/alert_red_bg.gif">
image inside a paragraph</p>
<p>This is an 
     <img class="bottom" src="/images/alert_red_bg.gif">
image inside a paragraph</p>
</body>

Module 2:Web Development Introduction

How the web works

Web server:

A web server is a just a computer program that listens for rquests from browsers and then execute them. For example, Apache web server, Microsoft IIS Server.

Request :

Client use HTTP protocol to request a web server to retrieve a document stored in the server side. The communication protocol between a client and a server uses TCP/IP(or FTP etc) protocal

Response: When the server receives the HTTP request it locates the appropriate document and returns it . example of Ht is abelow:

HTTP/1.1 200 OK

Server:Internet Explorer 5.5

Date:Tuesday,25-Nov-01 01:22:04 GMT

Last Modified:Thursday,20-Nov-01 10:44:53 GMT

Content-length:6372

Content-type:text/html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Web Archiecture Diagram