WEB 【FINAL EXAM】

LEC3 - HTML BASICS

some element

<h1>  </h1> : the heading element

<p>  </p> : paragraph element

<br> or <br/> : line break element

<blockquote>  </blockquote> : blockquote element

【cite : the origin of the quote】

 

phase element

<b> : bold

<em> : emphasized

<i> : italics

<mark> : highlighted

<small> : small font-size

<sub> : displays a subscript as small text below the baseline

<sup> : displays a subscript as small text above the baseline

 

unordered list

 

ordered list 

 

description list

 

special charaters

 

div element

<div>  </div>

 

anchor elememt

<a href="contact.html">Contact Us</a>

• Absolute link【Link to other  websites】

               eg.     <a href="http://yahoo.com">Yahoo</a>

• Relative link【Link to pages on your own site】

              eg.    <a href="index.htm">Home</a>

 

table element

 

Associate table cell values with their corresponding headers

• <th> tag id attribute
• <td> tag headers attribute

valign : vertical-align

 

lec4 - Cascading Style Sheets(CSS)

• Inline Styles【内联样式(行间样式)：在标签的style属性添加样式】

1. body section
2. HTML style attribute
3. apply only to the specific element

• Embedded Styles【嵌入式样式表(内部样式表)：在style标签内添加(加在head标签内部】

1. head secdtion
2. HTML style element
3. apply to the entire web page document

• External Styles【外部样式表：将css样式编写在扩展名为.css的文件中，再导入样式，导入在(head标签内部)】

1. Separate text file with .css file extension
2. Associate with a HTML link element in the head section of a web page

• Imported Styles【@import可以用来导入其他css文件。就相当于原来的css文件中包含被导入的css文件中的样式】

1. Similar to External Styles
2. We’ll concentrate on the other three types of styles.

 

text-decoration

 

some website about color

• Color Chart

            http://webdevfoundations.net/color

• Monochromatic

            http://meyerweb.com/eric/tools/color-blend

• Choose from a photograph or other image

            http://www.colr.org

• Begin with a favorite color

            Use one of the sites below to choose other colors

                        http://colorsontheweb.com/colorwizard.asp

                        http://kuler.Adobe.com

                        http://colorschemedesigner.com/

 

CSS Selectors

• HTML element selector
• class selector 【.new / class="new"】
• id selector【#new / id="new"】

 

 

LEC5-Visual Elements And Graphics With css

Horizontal Rule Element

<hr/> or <hr>

 

CSS border Property

{border-width  border-style  border-color}

 

CSS Borders: Block / Inline Elements

 

Configuring Specific Sides of a Border

 

CSS padding Property Shorthand: two values

 

CSS padding Property Shorthand: four values

 

HTML Image Element

 

Image Links

 

Image Editing Tools:

• GIMP (free!)
• Adobe Fireworks
• Adobe Photoshop
• http://pixlr.com/editor (free!)

 

Figcaption Elements

 

Meter Element

 

Progress Element

 

Image  Map

jump  to---> 

 

Favorites Icon - favicon

 

Examples of Rounded Corners

 

CSS3  box-shadow Property（盒子阴影）

 

CSS3 text-shadow Property（字体阴影）

 

CSS3 opacity Property（透明度）

 

 

LEC6 - Page layout

Configure Margin/Padding with CSS

 

Normal Flow

Relative Positioning

Absolute Positioning

 

float Property

 

Display Property

 

Configure Hyperlinks in an Unordered List

 

Deciding to Configure a class or id

• Configure a class:

1. If the style may apply to more than one element on a page
2. Use the . (dot) notation in the style sheet.
3. Use the class attribute in the HTML.

• Configure an id:

1. If the style is specific to only one element on a page
2. Use the # notation in the style sheet.
3. Use the id attribute in the HTML.

 

HTML5 Structural Elements

 

 

LEC7 - Forms

<form>

 

<input>

【type=“submit” type=“reset” type=“password”

单选 [type=“radio”]

多选 [type=“checkbox”]

 

<textarea>

 

<button>

 

<select> / <option>

• <select> 元素用来创建下拉列表。
• <select> 元素中的 <option> 标签定义了列表中的可用选项。

 

 <fieldset>

 

<label>

 

Sources of Free Server-Side Processing

• http://formbuddy.com
• http://response-o-matic.com
• http://master.com
• http://www.formmail.com

http://wufoo.com

• http://icebrrg.com
• http://formassembly.com

 

Server-Side Scripting Technologies

• JavaServer Pages

               http://java.sun.com/products/jsp  

• Active Server Pages Visit

               http://msdn.microsoft.com and search for “Active Server Pages”  

• ColdFusion

               http://www.adobe.com/products/coldfusion  

• PHP

               http://www.php.net  

• Ruby on Rails

               http://www.rubyonrails.org or http://tryruby.hobix.com  

• Microsoft’s .NET Framework

               http://www.microsoft.com/net

 

HTML5: Slider Control

 

HTML5: SPINNER CONTROL

 

HTML5: Calendar Control