WWW Course: Bkitatom, Nov 2011 Hieu Le Trung

BKITAtom, Nov 2011 Hieu Le Trung
WWW course
1st day
Today target
Web and relative terms
Web and web programming Website vs. webpage, domain vs. URL
Course introduction
Objective Content Useful tools
HTML basic
Web & web programming

Web in English language and web in our daily talks World Wide Web and internet
Web & web programming cont.

Web programming, huh? For front-end developer: the war between browsers
Website and webpage

Multiple webpage
Under one domain website
Domain vs. URL

Domain
www.bkitclub.net google.com my.opera.com
URL
Absolute
http://www.bkitclub.net/forum http://my.opera.com/vietnamese
Relative
/imgs/bg.png ../style/main.css
Course objective
Understand our web Have the ability to implement a static webpage (maybe a website) Have the background to study more about web development.
What will we do?

Get to know the face of our web (done before) Study the HTML language Study the CSS language Hum
Our case-study: a flower shop website Your assignment: blog theme building (just to be sure your effort is effectively)
Our friends
Some major browsers
IE 9 Firefox 6+ with firebug add-on Chrome 14+ Opera 11+
A text editor
Window notepad Notepad++, Gedit Netbeans, Eclipse
W3School at http://w3school.com , BkitClub forum
10
HTML
Stand for Hypertext Markup Language A markup language, not a programming language An HTML document is eq. to a webpage Its brother: XHTML
11
HTML Element
<a href=page1.html>Click here</a>
<img src=../image.jpg alt=hi! />

o Start/Opening tag
o End/Closing tag o Attribute: name=value

o Content: everything between the start and end tag
12
HTML charater reference

See the HTML Character Entity Reference.html
13
Document type declaration

One declaration for each HTML document Tell the browser how to render the HTML document and display it on the computer screen Keep your page being viewed as the same way in several browsers and system.
14
HTML document structure

<!DOCTYPE html> <html> <head>
Meta data: keywords, script, style sheet, favicon

</head> <body> The content of your page: headings, divisions, paragraphs, images, hyper links,
</body> </html>
15
Today tags
<title> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <div>, <p> <blockquote>, <q> <hr>, <br> <b>, <i> <span>
16
<title>
Tags: opening and closing tag Set the page title Attributes: none Examples:
<html> <head>
<title>HTML introduction</title> </head> <body> The content of the document...... </body> </html>
17
Heading tags (<h1> - <h6>)

Tags: opening and closing tag Set the HTML headings Attributes: global attributes and event attributes Level: block Examples:
<h1>This <h2>This <h3>This <h4>This <h5>This <h6>This
is is is is is is
heading heading heading heading heading heading
1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
18
<div>
Tags: opening and closing tag Define a division or a section. We usually use the <div> element to group HTML elements and format them with CSS. You can, but not recommended to, use <div> with text content Attributes: global attributes and event attributes Level: block Examples: <div> <h3>This is a heading</h3> <p>This is a paragraph.</p> <a href=/some/where>This is a link.</a> </div>
19
<p>
Tags: opening and closing tag Define a paragraph. Attributes: global attributes and event attributes Level: block Examples:
<p>This is some text in a paragraph.</p> <p>Lorem ipsum dolor sit amet <a href=/a/link>A link inside a paragraph</a></p>
20
<blockquote>
Tags: opening and closing tag The <blockquote> tag specifies a section that is quoted from another source. Attributes: cite, global attributes and event attributes
cite: Specifies the source of the quotation
Level: block Examples:
<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
21
<q>
Tags: opening and closing tag Define a short quotation Attributes: cite, global attributes and event attributes
cite: Specifies the source of the quotation
Level: text Examples:
<p>WWF's goal is to: <q>build a future where people live in harmony with nature</q>. We hope they succeed.</p>
22
<hr />
Tags: opening and self-closing tag Creates a horizontal line in an HTML page. Attributes: global attributes and event attributes Level: block Examples:
<h1>HTML</h1> <p>HTML is a language for describing web pages.</p> <hr />
<h1>CSS</h1> <p>CSS defines how to display HTML elements.</p>
23
<br />
Tags: opening and self-closing tag Inserts a single line break. We just use it to insert a line break, not to separate two paragraphs. Attributes: global attributes and event attributes Level: block Examples:
<p>This text contains<br />a line break.</p>
24
Bold and itatic text: <b> & <i>

Tags: opening and closing tag Specify a bold or itatic text. Attributes: global attributes and event attributes Level: text Examples:
<p>It was a <b>red</b> house with a <b>blue</b> door.</p> <p>He named his car <i>The lightning</i>, because it was very fast.</p>
25
<span>
Tags: opening and closing tag Provide localized formatting within documents. This tag is also used to group inline elements. Attributes: global attributes and event attributes Level: text Examples:
<p>My mother has <span style="color:lightblue">light blue</span> eyes.</p>
26
Yu cu
Hin thc mt HTML document theo yu cu sau: Trn trnh duyt hin th tiu ca trang web l Ca hng hoa <tn ca hng> C s dng <hr /> v quotation C t nht hai on, mi on c t nht mt heading
Gii thiu v ca hng Gii thiu v ch ca hng (c th v bn)
Cc ni dng thm Ch : tp tin c phn m rng l .html hoc .htm
WWW course
2nd day
Today target
HTML tags
Link Image List Table Iframe Link, script and style
Hyper link <a>

Tags: opening and closing tag Defines a hyperlink, which is used to link from one page to another. Attributes: href, hreflang, rel, target global attributes and event attributes Level: inline
Hyper link <a>

Attributes http://www.w3schools.com/html5/tag_a.asp Attribute
href hreflang
Description
The URL of the page link goes to The language of the linked document
rel target
The relationship between the current document and the linked document How to open the linked document
Image <img>
Tags: opening and self-closing tag Defines an image in an HTML page. Attributes: src, alt, height, width global attributes and event attributes Level: inline
Image <img>
Attributes http://www.w3schools.com/html5/tag_img.asp Attribute
src alt
Description
The URL of the image The alternate text for an image
width
height
The width of the image

The height of the image
URL Review
http://mydomain.com
index.html
animal
plants
cats.html
flowers
trees.html
dogs.html
roses.html
HTML table
What is a table?
Table header
Attribute Description src The URL of the image
alt
width height
The alternate text for an image

The width of the image The height of the image
Table rows
Table columns
HTML table simple table

A simple table structure <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
Define a row
Define a cell
HTML table simple table

A simple table structure with spanning cell
Cell merged horizontally
10
Cell merged vertically
Use <td> attributes: colspan and rowspan
HTML table more semantic

Additional elements: <th>, <thead>, <tbody> and <tfoot> and <caption>
11
<th>: define a header cell. It has the same attributes as the <td> element.
<thead> Define the table headers

<tbody> Define the table body <tfoot> Define the table footer
The table header, body and footer elements have no visual effect.
<caption> Define the caption of the table
12
Use HTML table in layout

Years ago, the story begins
Now, we use CSS instead!
HTML list
The first item The second item The third item
An unordered list
13
1. The first item 2. The second item 3. The third item

An ordered list
We use <ul> or <ol> with the help of <li> tags to define unordered (or ordered) list in HTML
HTML list
<ul> <ol>
14
<li></li> <li></li> </ul>

An unordered list
<li></li> <li></li> </ol>

An ordered list
The list is no longer styled by HTML code in HTML5, we format our lists by CSS. The ordered list has the start attribute to set the initial value for the first item of the list.
HTML form
HTML forms are used to pass data to a server. <form> tag defines a form. Its attributes: action: specifies where to send the data of the form
enctype: specifies how form-data should be encoded before sending it to the server. method: specifies how to send form data name: the name of the form Inside the <form> tag, we can define many elements.
15
HTML form elements

<input />
16
Defines an input control (textbox, password box, submit and cancel button, radio, checkbox) Defines a multi-line text input control
Defines a label for an input element Defines a border around elements in a form
<textarea>
<label> <fieldset>
<legend>
<select>
Defines a caption for a fieldset element

Defines a select list (drop-down list)
<optgroup>
<option> <button>
Defines a group of related options in a select list

Defines an option in a select list Defines a push button
http://www.w3schools.com/html/html_forms.asp
17
<pre>
Tags: opening and closing tag Defines preformatted text. This section is displayed in monospace font and it preserves both space and line break. Attributes: global attributes and event attributes Level: block
18
<script>
Tags: opening and closing tag Define a client-side script, such as a JavaScript. Attributes: src global attributes and event attributes
src the URL to the external script file
Level: none
19
HTML comments
The browser ignores these comment when rendering the HTML document. Usage:  Use comments to quickly view your changes in a safety way or in debugging process.
20
And more HTML tags

Tag
<style> <base> <link>
Description
Define an internal style for the HTML document Set the base URL for all relative URL in the HTML document Define the relationship between a document and a external source (especially a style sheet)
<meta>
<object>
Provide metadata for the document

Embed an object to the HTML document (usually a shockwave flash object)
Even more in http://www.w3schools.com/html5/html5_reference.asp
21
Internal frame <iframe>

Tags: opening and closing tag Embed an external HTML document in to this document. Attributes: src global attributes and event attributes Level: block
Even more in http://www.w3schools.com/html5/html5_reference.asp
22
Your task (30 min)

Improve your flower shop website. Be sure that you have at least 03 pages:
Home page: introduce your shop, the shop location, your slogan, what you sell Showcase page: introduce which flower you have in your store, their price, their description, . About page: introduce yourself
You can use images in the /action/imgs folder
23
Next subject
Cascading Style Sheet
WWW course
3rd day
TODAY TARGET
Introduction

Text formation

Content and style CSS and CSS attachment HTML class and id
Text align Color and text color

Syntax The cascading CSS selector (simple)

Length and percentage Width and height
CSS width, height
CONTENT AND STYLE
Any document has two aspects: content and style

You see
How is it presented?
Information
CSS
What is presented?
You understand
3
HTML
CSS WHAT IS IT

CSS stands for Cascading Style Sheet Its a W3C recommendation CSS defines how to display HTML elements
ATTACH THE CSS STYLE TO A PAGE

Define style of each element by its style attribute. Define style inside the <style></style> of the HTML document. Use <link> tag to define a link to an external style sheet.
<link rel=stylesheet href=url/to/the/css/file type=text/css />
Import external style to current style
/* CSS rule (in a CSS file or inside the <style> tag) */ @import url(url/to/the/css/file);
CLASS AND ID
Both of them are one of the HTML global element attributes An id should be unique in a HTML document. A class can be applied to many elements in a HTML document.
<div id=main class=doc-section> <h1 class=title>......</h1> <div class=post>
</div> </div>
TODAY TARGET
Introduction

Text formation


The cascading CSS Syntax CSS selector (simple)

Length and percentage Width and height
CSS width, height
THE SIMPLE CASCADING
The higher priority rules overrides the lower one
The style in style attribute (not recommended)
The style inside the <style> tag The style imported inside the <style> tag via @import
The external style sheet which is linked to by the <link> tag The style imported inside an external style sheet.
The default browser style
The style defined later overrides the previous one.

View more at http://www.w3.org/TR/CSS2/cascade.html
8
CSS SYNTAX

A set of rules A rules
One selector One or more declaration
Each declaration
A css property Its value: length, percent, color, url, constant
THE CSS SIMPLE SELECTORS

Define the elements this rule applies to A selector can be one or a sequence of
Universal selector * HTML element h1 { ... } Id definition #mainwrap { ... } Class definition .post { ... }
h1, h2, .post, #wrap { ... }
Selectors can be grouped
See more at http://www.w3.org/TR/CSS2/selector.html

10
THE CSS SIMPLE SELECTORS (cont.)
Any p element inside a blockquote element
blockquote p { }
Any h1 element inside a element which the id is sidebox
#sidebox h1 { }
Any p element have the class custom-para
p.custom-para { }
11
TODAY TARGET
Introduction

Text formation



Width and height Length and percentage
CSS width, height
12
CSS PROPERTIES : WIDTH and HEIGHT

width
ELEMENT
height
13
width: set the width of an element

Value
auto length %
Description
The browser calculates the width. This is default Defines the width in px, cm, etc. Defines the width in percent of the containing block
inherit
Specifies that the value of the width property should be inherited from the parent element
http://www.w3schools.com/cssref/pr_dim_width.asp
14
height: set the height of an element

Value
auto length %
Description
The browser calculates the height. This is default Defines the height in px, cm, etc. Defines the height in percent of the containing block
inherit
Specifies that the value of the height property should be inherited from the parent element
http://www.w3schools.com/cssref/pr_dim_width.asp
15
CSS LENGTH and PERCENTAGE
Length: px, em, mm, cm, in, pt

Notation px em Meaning One pixel in normal screen display The font height
pt mm, cm, in
1/72 inch millimeters, centimeters, inches
Percentage: %
16
MORE ABOUT DIMENSION

max-width min-width max-height min-height
17
TODAY TARGET
Introduction

Text formation



Width and height Length and percentage
CSS width, height
18
CSS PROPERTIES: TEXT-ALIGN
Specifies the horizontal alignment of text in an element.

Value
left
Description
Aligns the text to the left (default if ltr)
right center
justify inherit
Aligns the text to the right (default if rtl) Centers the text Stretches the lines so that each line has equal width (like in newspapers and magazines)
Specifies that the value of the text-align property should be inherited from the parent element
http://www.w3schools.com/cssref/pr_text_text-align.asp
19
CSS PROPERTIES: COLOR
Specifies the color of text (foreground color)

Description Specifies the text color. Look at CSS Color Values for a complete list of possible color values.
Value color
inherit
Specifies that the color should be inherited from the parent element. IE8 requires !DOCTYPE, IE9 and above support this value.
20
CSS COLOR

RGB color model HSL color model (CSS3 advanced)
21
CSS COLOR VALUES

CSS color name: red, white, navy, Numerical CSS color values:

RGB or RRGGBB values: #06f, #00ff27, RGBA values (CSS3): rgba(r, g, b, alpha) or rgba(r%, g%, b%, alpha)
transparent More at: http://www.w3.org/TR/css3-color/
22
ACTION
Do more, get more
23
FIREFOX EXTENSIONS
Firebug
Rainbow color tool
24
YOUR TASK
Improve your previous website by applying the new CSS rules
25
Next subject
CSS text formation (cont.), CSS font and CSS box model
26
BKITAtom, Dec 2011 Hieu Le Trung
WWW course
4th day
TODAY TARGET
Text formation (cont)

Background

Text decoration Text Transformation Text-indent
Image and color Position and repeat and attachment
Font properties

Font families Font size and line height Font style Font weight Font variation
CSS PROPERTIES : TEXT-DECORATION
text-decoration: set the width of an element

Description
Defines a normal text. This is default Defines a line below the text Defines a line above the text
Value
none underline overline
line-through blink
inherit
Defines a line through the text Defines a blinking text Specifies that the value of the text-decoration property should be inherited from the parent element
http://www.w3schools.com/cssref/pr_text_text-decoration.asp
3
CSS PROPERTIES : TEXT-TRANSFORM
text-transform: controls the capitalization of text.

Value
none
Description
No capitalization. The text renders as it is. This is default
capitalize
uppercase lowercase inherit
Transforms the first character of each word to uppercase

Transforms all characters to uppercase Transforms all characters to lowercase Specifies that the value of the text-transform property should be inherited from the parent element
CSS PROPERTIES : TEXT-IDENT
text-ident: specifies the indentation of the first line in a text-block.
Lorem ipsum dolor sit amet, lugens quia quod ait regem ut casus homini interimat potius accipiet. Rationem non potentiae Apollonium contigit cum obiectum dixit. Dionysiadis eum est se sed esse deprecor.
CSS PROPERTIES : TEXT-IDENT

Value length % inherit Description Defines a fixed indentation in px, pt, cm, em, etc. Defines the indentation in % of the width of the parent element Specifies that the value of the text-indent property should be inherited from the parent element
http://www.w3schools.com/cssref/pr_text_text-indent.asp
TODAY TARGET

Background

Font properties

CSS FONTS SERIF AND SANS-SERIF
Serif and Sans-serif fonts
Times New Roman, Georgia
Arial, Tahoma, Verdana, Segoe UI, Ubuntu
Monospace fonts
Courier New, Lucida Console, Consolas, Ubuntu Mono
CSS PROPERTIES : FONT-FAMILY
font-family: set font of the element

Value family-name genericfamily inherit Description A prioritized list of font family names and/or generic family names Specifies that the font family should be inherited from the parent element
http://www.w3schools.com/cssref/pr_font_font-family.asp
Try each font in the declared list until the browser finds this font in the local machine.
CSS PROPERTIES : FONT-SIZE
font-size: set size of a font

Description
Value
xx-small, x-small, small, medium, large, Sets the font-size to a certain size x-large, xx-large smaller
larger Sets the font-size to a smaller size than the parent element Sets the font-size to a larger size than the parent element Sets the font-size to a fixed size in px, cm, etc. Sets the font-size to a percent of the parent element's font size Specifies that the font size should be inherited from the parent element
length
%
inherit
10
CSS PROPERTIES : LINE-HEIGHT
line-height: specifies the line height.

Value
normal
Description
A normal line height. This is default A number that will be multiplied with the current font size to set the line height
number length
%
A fixed line height in px, pt, cm, etc.

A line height in percent of the current font size Specifies that the value of the line-height property should be inherited from the parent element
inherit
11
CSS PROPERTIES : FONT-WEIGHT
font-weight: sets how thick or thin characters in text should be displayed.

Value normal bold bolder lighter 100, 400, 700, 200, 500, 800, Description Defines normal characters. This is default Defines thick characters Defines thicker characters Defines lighter characters 300, Defines from thin to thick characters. 400 is 600, the same as normal, and 700 is the same as 900 bold Specifies that the font weight should be inherited from the parent element
inherit
12
CSS PROPERTIES : FONT-STYLE
font-style: set the font style of the text

Value normal italic oblique inherit Description
The browser displays a normal font style. This is default

The browser displays an italic font style The browser displays an oblique font style Specifies that the font style should be inherited from the parent element
http://www.w3schools.com/cssref/pr_font_font-variant.asp
13
CSS PROPERTIES : FONT-VARIATION
Font-variation: decide whether this text appears in the small-cap format.

Value normal small-caps inherit Description The browser displays a normal font. This is default The browser displays a small-caps font Specifies that the font variant should be inherited from the parent element
A SMALL-CAP FONT IS DISPLAYED LIKE THIS, JOHN!

14
CSS PROPERTIES : FONT
font: sets all the font properties in one declaration.

Description
Value
font-style
font-variant font-weight fontsize/lineheight font-family
15
Specifies the font style. See font-style for possible values

Specifies the font variant. See font-variant for possible values Specifies the font weight. See font-weight for possible values
Specifies the font size and the line-height. See font-size and line-height for possible values
Specifies the font family. See font-family for possible values
TODAY TARGET

Background

Font properties

16
CSS PROPERTIES : BACKGROUND-COLOR

background-color: sets the background color of an element. Include padding and border, not margin (read more in the 5th day)
Value color Description
Specifies the background color. Look at CSS Color Values for a complete list of possible color values.
transparent
Specifies that the background color should be transparent. This is default

Specifies that the background color should be inherited from the parent element
inherit
17
CSS PROPERTIES : BACKGROUND-IMAGE
background-image: sets the background image for an element.

Description
Value
url('URL') The URL to the image none inherit No background image will be displayed. This is default Specifies that the background image should be inherited from the parent element
18
CSS PROPERTIES : BACKGROUND-REPEAT
background-repeat: sets if/how a background image will be repeated.

Value Description The background image will be repeated both vertically and horizontally. This is default
The background image will be repeated only horizontally The background image will be repeated only vertically The background-image will not be repeated
repeat
repeat-x repeat-y no-repeat inherit
19
Specifies that the setting of the background-repeat property should be inherited from the parent element
CSS PROPERTIES : BACKGROUND-ATTACHMENT
ackground-attachment: sets whether a background image is fixed or scrolls with the rest of the page.
Description
Value scroll
The background image scrolls with the rest of the page. This is default The background image is fixed
Specifies that the setting of the background-attachment property should be inherited from the parent element
fixed
inherit
20
CSS PROPERTIES: BACKGROUND-POSITION
background-position: sets the starting position of a background image.
21
CSS PROPERTIES: BACKGROUND-POSITION

Value left top left center left bottom right top right center right bottom center top center center center bottom x% y% Description
If you only specify one keyword, the other value will be "center"
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0% The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%.You can mix % and positions Specifies that the setting of the background-position property should be inherited from the parent element
xpos ypos
inherit
22
CSS PROPERTIES : BACKGROUND
background: sets all the background properties in one declaration.

Description Specifies the background color to be used Specifies the position of the background images Specifies how to repeat the background images Specifies whether the background images are fixed or scrolls with the rest of the page Specifies ONE or MORE background images to be used
Value background-color backgroundposition background-repeat backgroundattachment background-image
23
ACTION
Do more, get more
24
YOUR TASK
Improve your previous website by applying the new CSS rules
25
Next subject
CSS box model
26
WWW course
5th day
TODAY TARGET
Box model

Border Margin Padding
Float and clear

Float Clear Display Position
Display and Position

CSS BOX MODEL
Every element can be considered as a box

margin padding content
border
http://www.w3schools.com/cssref/pr_text_text-decoration.asp
3
CSS 4-D SHORTAND
For border, margin, padding, we have 4 subelements in the top, right, bottom and left of the formated element. For a PROP property, we also have another 4 properties:
PROP-left: defines the left PROP property
PROP-right: defines the right PROP property PROP-top: defines the top PROP property
PROP-bottom: defines the bottom PROP property
CSS 4-D SHORTAND (cont)
The PROP property can also be written in a shortand way using one of the following:
PROP: VALUE VALUE VALUE VALUE Defines the top , right, bottom, left value of the PROP PROP: VALUE
Defines value for all four side of the formated PROP property
PROP: VALUE VALUE
PROP: VALUE VALUE VALUE
Defines the top and bottom, left and right value of the PROP
Defines the top , left and right, bottom value of the PROP
CSS BORDER
border: format the border of a element

Properties Description border-width The width of the border
border-style The style of the border border-color The color of the border border The shortand property
CSS PROPERTIES : BORDER-WIDTH
border-width: sets the width of the border of an element

Value thin Description Specifies a thin border
medium thick
length inherit
Specifies a medium border. This is default Specifies a thick border

Allows you to define the thickness of the border Specifies that the border width should be inherited from the parent element
CSS PROPERTIES : BORDER-STYLE
border-style: sets the style of the border of an element
http://www.w3schools.com/cssref/pr_border-style.asp
CSS PROPERTIES : BORDER-COLOR
border-color: sets the style of the border of an element

Value Description
color transparent
inherit
Specifies the background color. Look at CSS Color Values for a complete list of possible color values Specifies that the border color should be transparent. This is default Specifies that the border color should be inherited from the parent element
CSS PROPERTIES : MARGIN

Value auto Description The browser calculates a margin
length
% inherit
Specifies a margin in px, pt, cm, etc. Default value is 0px

Specifies a margin in percent of the width of the containing element Specifies that the margin should be inherited from the parent element
Margin
10
CSS PROPERTIES : PADDING

Value Description
length
% inherit
Specifies the padding in px, pt, cm, etc. Default value is 0px
Specifies the padding in percent of the width of the containing element Specifies that the padding should be inherited from the parent element
padding
11
TODAY TARGET
Box model

Float and clear


12
CSS FLOATING
~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~
~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~

Without floating
13
A floating element allows other elements wrap around it if there is a space

The block element is floating
CSS PROPERTIES : FLOAT
float: specifies whether or not a box (an element) should float.

Value
left
Description
The element floats to the left
right
none
The element floats the right

The element is not floated, and will be displayed just where it occurs in the text. This is default
inherit
Specifies that the value of the float property should be inherited from the parent element
14
CSS PROPERTIES : CLEAR
clear: specifies which sides of an element where other floating elements are not allowed.
Description
No floating elements allowed on the left side
No floating elements allowed on the right side No floating elements allowed on either the left or the right side
Value
left
right both
none
inherit
Default. Allows floating elements on both sides Specifies that the value of the clear property should be inherited from the parent element
15
TODAY TARGET
Box model

Float and clear


16
CSS PROPERTIES : POSITION
position: specifies the type of positioning method used for an element (static, relative, absolute or fixed).
Description Elements renders in order, as they appear in the document flow. This is default. The element is positioned relative to its first positioned (not static) ancestor element The element is positioned relative to the browser window The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
Value static absolute fixed
relative inherit
The value of the position property is inherited from the parent element
17
CSS PROPERTIES : DISPLAY
display: specifies the type of box an element should generate.

Description
Value
none block inline

inline-block inline-table
The element will generate no box at all The element will generate a block box (a line break before and after the element)
The element will generate an inline box (no line break before or after the element). This is default The element will generate a block box, laid out as an inline box The element will generate an inline box (like <table>, with no line break before or after)
18

Value list-item run-in table
table-caption table-cell table-column
Description The element will generate a block box, and an inline box for the list marker The element will generate a block or inline box, depending on context The element will behave like a table (like <table>, with a line break before and after)
The element will behave like a table caption (like <caption>) The element will behave like a table cell The element will behave like a table column
table-columngroup
19
The element will behave like a table column group (like <colgroup>)

Value table-footergroup table-headergroup
table-row table-row-group
Description The element will behave like a table footer row group The element will behave like a table header row group
The element will behave like a table row The element will behave like a table row group Specifies that the value of the display property should be inherited from the parent element
inherit
20
ACTION
Do more, get more
21
YOUR TASK
Improve your previous website by applying the new CSS rules. You should re-layout it without using table int the main layout.
22
WWW course
6th day
TODAY TARGET
List formating

List style List style image List style position List style type
Table formating Link formating
lovehate rule
LIST FORMATION LIST-STYLE-IMAGE
replaces the list-item marker with an image. replaces the list-item marker with an image.
Value url none inherit Description The path to the image to be used as a list-item marker No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered.This is default Specifies that the value of the list-style-image property should be inherited from the parent element
LIST FORMATION LIST-STYLE-POSITION
specifies if the list-item markers should appear inside or outside the content flow.
Value inside outside inherit Description Indents the marker and the text. The bullets appear inside the content flow Keeps the marker to the left of the text. The bullets appears outside the content flow. This is default Specifies that the value of the list-style-position property should be inherited from the parent element
LIST FORMATION LIST-STYLE-TYPE
specifies the type of list-item marker in a list.

Description The marker is traditional Armenian numbering The marker is a circle The marker is plain ideographic numbers The marker is a number.This is default for <ol> The marker is a number with leading zeros (01, 02, 03, etc.) The marker is a filled circle.This is default for <ul> The marker is traditional Georgian numbering The marker is traditional Hebrew numbering
Value armenian circle cjk-ideographic decimal decimal-leadingzero disc georgian hebrew
LIST FORMATION LIST-STYLE-TYPE

inherit lower-alpha lower-greek lower-latin lower-roman none square upper-alpha upper-latin upper-roman
The value of the listStyleType property is inherited from parent element The marker is lower-alpha (a, b, c, d, e, etc.) The marker is lower-greek The marker is lower-latin (a, b, c, d, e, etc.) The marker is lower-roman (i, ii, iii, iv, v, etc.) No marker is shown The marker is a square The marker is upper-alpha (A, B, C, D, E, etc.) The marker is upper-latin (A, B, C, D, E, etc.) The marker is upper-roman (I, II, III, IV,V, etc.)
LIST FORMATION LIST-STYLE
sets all the list properties in one declaration.

Description Specifies the type of list-item marker. See list-style-type for possible values Specifies where to place the list-item marker. See list-style-position for possible values Specifies the type of list-item marker. See list-style-image for possible values Specifies that the value of the list-style property should be inherited from the parent element
Value list-style-type list-styleposition list-style-image inherit
TODAY TARGET
List formating

lovehate rule
SAMPLE CUSTOM TABLE
Column 1 Lorem Ispum Consepti Lavarine Outes
Column 2 Novoire idimu Sactum liner practist Echemica sisto Clarif Woodi Sentia Cloro Sacture
Column 3 $ 5,000 $13,000 $ 25,300 $11,000 $ 8,700
SAMPLE CUSTOM TABLE
How do you do it in CSS?
10
TODAY TARGET
List formating

lovehate rule
11
HYPERLINK FORMATING (ANCHOR)

What is a hyperlink? Its default display.

Link Visited Hover Active
Normal apperance
A link have been visited
Your mouse is over the anchor.
Youre pressing the left mouse button!
12
ANCHOR PSEUDO ELEMENTS

:link :visited :hover :active So we have to defines these elements in a certain order call LoVeHAte Pseudo elements will be discussed more in the next class.
13
ACTION
Do more, get more
14
YOUR TASK
Improve your previous website by applying the new CSS rules.You should re-layout it without using table int the main layout.
15
WWW course
7th day
TODAY TARGET
CSS 3 new features

Border-radius Box-shadow Opacity
CSS media type CSS selector review Assignment discuss
CSS 3: BORDER-RADIUS
Add rounded borders to elements!
IE9+
Firefox 4+
Chrome 14+
Opera
Safari 4+
border-radius: 1-4 length|% / 1-4 length|%;
Horizontal radius/ Vertical radius top-left -> top-right -> bottom-right -> bottom-left
CSS 3: BOX-SHADOW
Attaches one or more drop-shadows to the box.
IE9+
Firefox 4+
Chrome 14+
Opera
Safari 5.1.1+
box-shadow: h-shadow v-shadow blur spread color inset;
CSS 3: BOX-SHADOW
Attaches one or more drop-shadows to the box.

Description Required. The position of the horizontal shadow. Negative values are allowed Required. The position of the vertical shadow. Negative values are allowed Optional. The blur distance Optional. The size of shadow Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
Value
h-shadow v-shadow blur spread color inset
CSS 3: OPACITY
Sets the opacity level for an element.
Value value inherit
Description Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) The value of the opacity property should be inherited from the parent element
CSS BROWSER ALTERNATIVE PROPERTIES

Before CSS3, there are many special properties which is not standard. When CSS3 is released, we need a period of time to implement all of its standards in ALL browser
filter
-moz-
-webkit-
-o-
-webkit-
TODAY TARGET
CSS 3 new features

Border-radius Box-shadow Opacity
CSS media type CSS selector review Assignment discuss
CSS MEDIA TYPE

Media Type all aural braille embossed handheld print screen tty tv
9
Description Used for all media type devices Used for speech and sound synthesizers Used for braille tactile feedback devices Used for paged braille printers Used for small or handheld devices Used for printers Used for computer screens Used for media using a fixed-pitch character grid, like teletypes and terminals Used for television-type devices
projection Used for projected presentations, like slides
CSS MEDIATYPE
When linking to the HTML document <link href= type= rel= media= />
In CSS declarations @media { // CSS rules }
10
ACTION
Do more, get more
11
YOUR TASK
Improve your previous website by applying the new CSS rules.You should re-layout it without using table int the main layout.
12

WWW Course: Bkitatom, Nov 2011 Hieu Le Trung

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WWW Course: Bkitatom, Nov 2011 Hieu Le Trung

Uploaded by

Copyright:

Available Formats

BKITAtom, Nov 2011 Hieu Le Trung

Web & web programming

Web & web programming cont.

Website and webpage

Under one domain website

Domain vs. URL

What will we do?

W3School at http://w3school.com , BkitClub forum

<img src=../image.jpg alt=hi! />

o End/Closing tag o Attribute: name=value

HTML charater reference

Document type declaration

HTML document structure

Meta data: keywords, script, style sheet, favicon

Heading tags (<h1> - <h6>)

<h1>This <h2>This <h3>This <h4>This <h5>This <h6>This

heading heading heading heading heading heading

1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>

Level: block Examples:

Level: text Examples:

<h1>CSS</h1> <p>CSS defines how to display HTML elements.</p>

<p>This text contains<br />a line break.</p>

Bold and itatic text: <b> & <i>

<p>My mother has <span style="color:lightblue">light blue</span> eyes.</p>

Cc ni dng thm Ch : tp tin c phn m rng l .html hoc .htm

BKITAtom, Nov 2011 Hieu Le Trung

Hyper link <a>

Hyper link <a>

The width of the image

Attribute Description src The URL of the image

The alternate text for an image

HTML table simple table

HTML table simple table

Cell merged vertically

Use <td> attributes: colspan and rowspan

HTML table more semantic

<thead> Define the table headers

Use HTML table in layout

Now, we use CSS instead!

1. The first item 2. The second item 3. The third item

<li></li> <li></li> </ul>

<li></li> <li></li> </ol>

HTML form elements

Defines a caption for a fieldset element

Defines a group of related options in a select list

And more HTML tags

Provide metadata for the document

Even more in http://www.w3schools.com/html5/html5_reference.asp

Internal frame <iframe>

Even more in http://www.w3schools.com/html5/html5_reference.asp

Your task (30 min)

You can use images in the /action/imgs folder

Cascading Style Sheet

BKITAtom, Nov 2011 Hieu Le Trung

Text align Color and text color

Cascading Style Sheet

Syntax The cascading CSS selector (simple)

CSS width, height

CONTENT AND STYLE

Any document has two aspects: content and style

ATTACH THE CSS STYLE TO A PAGE

<link rel=stylesheet href=url/to/the/css/file type=text/css />