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属性添加样式】
- body section
- HTML style attribute
- apply only to the specific element
- Embedded Styles【嵌入式样式表(内部样式表):在style标签内添加(加在head标签内部】
- head secdtion
- HTML style element
- apply to the entire web page document
- External Styles【外部样式表:将css样式编写在扩展名为.css的文件中,再导入样式,导入在(head标签内部)】
- Separate text file with .css file extension
- Associate with a HTML link element in the head section of a web page
- Imported Styles【@import可以用来导入其他css文件。就相当于原来的css文件中包含被导入的css文件中的样式】
- Similar to External Styles
- 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:
- If the style may apply to more than one element on a page
- Use the . (dot) notation in the style sheet.
- Use the class attribute in the HTML.
- Configure an id:
- If the style is specific to only one element on a page
- Use the # notation in the style sheet.
- 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