Upload
university-of-technology
View
141
Download
4
Tags:
Embed Size (px)
DESCRIPTION
This course is an introduction to WEB world.
Citation preview
WWW course 1st day
BKITAtom, Nov 2011
Hieu Le Trung
Today target Web and relative terms
Web and web programming
Website vs. webpage, domain vs. URL
Course introduction
Objective
Content
Useful tools
HTML basic
2
Web & web programming Web in English language and web in our daily talks
World Wide Web and internet
3
Web & web programming cont. Web programming, huh?
For front-end developer: the war between browsers
4
Website and webpage
5
website
Multiple webpage
Under one domain
Domain vs. URL Domain
www.bkitclub.net
google.com
my.opera.com
URL
Absolute
http://www.bkitclub.net/forum
http://my.opera.com/vietnamese
6
• 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.
7
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)
8
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
9
HTML Stand for Hypertext Markup Language
A markup language, not a programming language
An HTML document is eq. to a webpage
Its brother: XHTML
10
HTML Element
<a href=“page1.html”>Click here</a>
11
<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
HTML charater reference See the HTML Character Entity Reference.html
12
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.
13
HTML document structure
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
14
Meta data: keywords, script, style sheet,
favicon…
The content of your page: headings,
divisions, paragraphs, images, hyper links,
…
Today tags <title>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<div>, <p>
<blockquote>, <q>
<hr>, <br>
<b>, <i>
<span>
15
<title> Tags: opening and closing tag
Set the page title
Attributes: none
Examples:
16
<html> <head> <title>HTML introduction</title> </head> <body> The content of the document...... </body> </html>
Heading tags (<h1> - <h6>)
Tags: opening and closing tag
Set the HTML headings
Attributes: global attributes and event attributes
Level: block
Examples:
17
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
<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:
18
<div> <h3>This is a heading</h3> <p>This is a paragraph.</p> <a href=“/some/where”>This is a link.</a> </div>
<p> Tags: opening and closing tag
Define a paragraph.
Attributes: global attributes and event attributes
Level: block
Examples:
19
<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>
<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:
20
<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world’s 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>
<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:
21
<p>WWF's goal is to: <q>build a future where people live in harmony with nature</q>. We hope they succeed.</p>
<hr /> Tags: opening and self-closing tag
Creates a horizontal line in an HTML page.
Attributes: global attributes and event attributes
Level: block
Examples:
22
<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>
<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:
23
<p>This text contains<br />a line break.</p>
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:
24
<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>
<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:
25
<p>My mother has <span style="color:lightblue">light blue</span> eyes.</p>
Yêu cầu Hiện thực một HTML document theo yêu cầu sau:
Trên trình duyệt hiển thị tiêu đề của trang web là Cửa hàng
hoa <tên cửa hàng>
Có sử dụng <hr /> và quotation
Có ít nhất hai đoạn, mỗi đoạn có ít nhất một heading
Giới thiệu về cửa hàng
Giới thiệu về chủ cửa hàng (có thể về bạn)
Các nội dụng thêm
Chú ý: tệp tin có phần mở rộng là .html hoặc .htm
26
WWW course 2nd day
BKITAtom, Nov 2011
Hieu Le Trung
Today target HTML tags
Link
Image
List
Table
Iframe
Link, script and style
2
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
3
Hyper link <a> 4
Attribute Description
href The URL of the page link goes to
hreflang The language of the linked document
rel The relationship between the current document and
the linked document
target How to open the linked document
Attributes http://www.w3schools.com/html5/tag_a.asp
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
5
Image <img> 6
Attribute Description
src The URL of the image
alt The alternate text for an image
width The width of the image
height The height of the image
Attributes http://www.w3schools.com/html5/tag_img.asp
URL Review
http://mydomain.com
index.html animal
cats.html
dogs.html
plants
flowers
roses.html
trees.html
7
HTML table 8
Attribute Description
src The URL of the image
alt The alternate text for an image
width The width of the image
height The height of the image
What is a table?
Table rows
Table columns
Table header
HTML table – simple table 9
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 10
A simple table structure with spanning cell
Cell merged
horizontally
Cell merged
vertically
Use <td> attributes: colspan and rowspan
HTML table – more semantic 11
Additional elements: <th>, <thead>, <tbody> and <tfoot> and <caption>
<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
Use HTML table in layout Years ago, the story begins …
12
Now, we use CSS instead!
HTML list 13
We use <ul> or <ol> with the help of <li> tags to define unordered (or ordered) list in HTML
• The first item
• The second item
• The third item
1. The first item
2. The second item
3. The third item
An unordered list An ordered list
HTML list 14
The list is no longer styled by HTML code in HTML5, we format
our lists by CSS.
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
An unordered list An ordered list
The ordered list has the start attribute to set the initial value
for the first item of the list.
HTML form 15
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.
HTML form elements 16
<input /> Defines an input control (textbox, password box,
submit and cancel button, radio, checkbox)
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button
http://www.w3schools.com/html/html_forms.asp
<pre> 17
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
<script> 18
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
The browser ignores these comment when rendering the
HTML document.
Usage:
<!-- The comment -->
Use comments to quickly view your changes in a “safety”
way or in debugging process.
19
HTML comments
And more HTML tags … 20
Tag Description
<style> Define an internal style for the HTML
document
<base> Set the base URL for all relative URL in the
HTML document
<link> Define the relationship between a document
and a external source (especially a style
sheet)
<meta> Provide metadata for the document
<object> Embed an object to the HTML document
(usually a shockwave flash object)
Even more in http://www.w3schools.com/html5/html5_reference.asp
Internal frame <iframe> 21
Even more in http://www.w3schools.com/html5/html5_reference.asp
Tags: opening and closing tag
Embed an external HTML document in to this document.
Attributes: src global attributes and event attributes
Level: block
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
22
You can use images in the /action/imgs folder
Cascading Style Sheet
Next subject
23
WWW course
3rd day
BKITAtom, Nov 2011
Hieu Le Trung
TODAY TARGET
Introduction
Content and style
CSS and CSS attachment
HTML class and id
Cascading Style Sheet
Syntax
The “cascading”
CSS selector (simple)
CSS width, height
Length and percentage
Width and height
2
Text formation
Text align
Color and text color
CONTENT AND STYLE
3
Any document has two aspects: content and style
What is
presented?
How is it
presented? CSS
HTML
You understand
You see
Information
CSS – WHAT IS IT
4
CSS stands for “Cascading Style Sheet”
It’s a W3C recommendation
CSS defines how to display HTML elements
ATTACH THE CSS STYLE TO A PAGE
5
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
6
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
Content and style
CSS and CSS attachment
HTML class and id
Cascading Style Sheet
The “cascading”
CSS Syntax
CSS selector (simple)
CSS width, height
Length and percentage
Width and height
7
Text formation
Text align
Color and text color
THE SIMPLE “CASCADING”
8
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
CSS SYNTAX
9
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
10
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 { ... }
Selectors can be grouped
h1, h2, .post, #wrap { ... }
See more at http://www.w3.org/TR/CSS2/selector.html
THE CSS SIMPLE SELECTORS (cont.)
11
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 { … }
TODAY TARGET
Introduction
Content and style
CSS and CSS attachment
HTML class and id
Cascading Style Sheet
The “cascading”
CSS Syntax
CSS selector (simple)
CSS width, height
Width and height
Length and percentage
12
Text formation
Text align
Color and text color
CSS PROPERTIES : WIDTH and HEIGHT
13
ELEMENT
width
height
CSS PROPERTIES : WIDTH and HEIGHT
14
width: set the width of an element
Value Description
auto The browser calculates the width. This is default
length 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
CSS PROPERTIES : WIDTH and HEIGHT
15
height: set the height of an element
Value Description
auto The browser calculates the height. This is default
length 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
CSS LENGTH and PERCENTAGE
16
Length: px, em, mm, cm, in, pt
Notation Meaning
px One pixel in normal screen display
em The font height
pt 1/72 inch
mm, cm, in millimeters, centimeters, inches
Percentage: %
MORE ABOUT DIMENSION …
17
max-width
min-width
max-height
min-height
TODAY TARGET
Introduction
Content and style
CSS and CSS attachment
HTML class and id
Cascading Style Sheet
The “cascading”
CSS Syntax
CSS selector (simple)
CSS width, height
Width and height
Length and percentage
18
Text formation
Text align
Color and text color
CSS PROPERTIES: TEXT-ALIGN
19
Specifies the horizontal alignment of text in an element.
Value Description
left Aligns the text to the left (default if ltr)
right Aligns the text to the right (default if rtl)
center Centers the text
justify Stretches the lines so that each line has equal width
(like in newspapers and magazines)
inherit 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
CSS PROPERTIES: COLOR
20
Specifies the color of text (foreground color)
Value Description
color Specifies the text color. Look at CSS Color Values for a
complete list of possible color values.
inherit
Specifies that the color should be inherited from the parent
element. IE8 requires !DOCTYPE, IE9 and above support this
value.
CSS COLOR
21
RGB color model
HSL color model (CSS3 – advanced)
CSS COLOR VALUES
22
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/
ACTION
Do more, get more …
23
FIREFOX EXTENSIONS
24
Firebug
Rainbow color tool
YOUR TASK
25
Improve your previous website by applying the new CSS
rules
Next subject
CSS text formation (cont.), CSS font and CSS box model
26
WWW course
4th day
BKITAtom, Dec 2011
Hieu Le Trung
TODAY TARGET
Text formation (cont)
Text decoration
Text Transformation
Text-indent
Font properties
Font families
Font size and line height
Font style
Font weight
Font variation
2
Background
Image and color
Position and repeat and
attachment
CSS PROPERTIES : TEXT-DECORATION
3
text-decoration: set the width of an element
Value Description
none Defines a normal text. This is default
underline Defines a line below the text
overline Defines a line above the text
line-through Defines a line through the text
blink Defines a blinking text
inherit 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
CSS PROPERTIES : TEXT-TRANSFORM
4
text-transform: controls the capitalization of text.
Value Description
none No capitalization. The text renders as it is. This is default
capitalize Transforms the first character of each word to uppercase
uppercase Transforms all characters to uppercase
lowercase Transforms all characters to lowercase
inherit Specifies that the value of the text-transform property
should be inherited from the parent element
CSS PROPERTIES : TEXT-IDENT
5
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
6
Value Description
length Defines a fixed indentation in px, pt, cm, em, etc.
% Defines the indentation in % of the width of the parent
element
inherit 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
Text formation (cont)
Text decoration
Text Transformation
Text-indent
Font properties
Font families
Font size and line height
Font style
Font weight
Font variation
7
Background
Image and color
Position and repeat and
attachment
CSS FONTS – SERIF AND SANS-SERIF
8
Serif and Sans-serif fonts
Monospace fonts Courier New, Lucida Console, Consolas, Ubuntu Mono
Times New Roman,
Georgia Arial, Tahoma, Verdana,
Segoe UI, Ubuntu
CSS PROPERTIES : FONT-FAMILY
9
font-family: set font of the element
Value Description
family-name generic-family
A prioritized list of font family names
and/or generic family names
inherit 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
10
font-size: set size of a font
Value Description
xx-small, x-small, small, medium, large, x-large, xx-large
Sets the font-size to a certain size
smaller Sets the font-size to a smaller size than the
parent element
larger Sets the font-size to a larger size than the
parent element
length 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
inherit Specifies that the font size should be inherited
from the parent element
CSS PROPERTIES : LINE-HEIGHT
11
line-height: specifies the line height.
Value Description
normal A normal line height. This is default
number A number that will be multiplied with the current font
size to set the line height
length A fixed line height in px, pt, cm, etc.
% A line height in percent of the current font size
inherit Specifies that the value of the line-height property should
be inherited from the parent element
CSS PROPERTIES : FONT-WEIGHT
12
font-weight: sets how thick or thin characters in text
should be displayed.
Value Description
normal Defines normal characters. This is default
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100, 200, 300, 400, 500, 600, 700, 800, 900
Defines from thin to thick characters. 400 is
the same as normal, and 700 is the same as
bold
inherit Specifies that the font weight should be
inherited from the parent element
CSS PROPERTIES : FONT-STYLE
13
font-style: set the font style of the text
Value Description
normal The browser displays a normal font style. This is
default
italic The browser displays an italic font style
oblique The browser displays an oblique font style
inherit Specifies that the font style should be inherited
from the parent element
http://www.w3schools.com/cssref/pr_font_font-variant.asp
CSS PROPERTIES : FONT-VARIATION
14
Font-variation: decide whether this text appears in
the small-cap format.
Value Description
normal The browser displays a normal font. This is default
small-caps The browser displays a small-caps font
inherit Specifies that the font variant should be inherited
from the parent element
A SMALL-CAP FONT IS DISPLAYED LIKE THIS, JOHN!
CSS PROPERTIES : FONT
15
font: sets all the font properties in one declaration.
Value Description
font-style Specifies the font style. See font-style for possible values
font-variant Specifies the font variant. See font-variant for possible
values
font-weight Specifies the font weight. See font-weight for possible
values
font-size/line-height
Specifies the font size and the line-height. See font-size
and line-height for possible values
font-family Specifies the font family. See font-family for possible values
TODAY TARGET
Text formation (cont)
Text decoration
Text Transformation
Text-indent
Font properties
Font families
Font size and line height
Font style
Font weight
Font variation
16
Background
Image and color
Position and repeat and
attachment
CSS PROPERTIES : BACKGROUND-COLOR
17
background-color: sets the background color of an element.
Include padding and border, not margin (read more in the 5th day)
Value Description
color 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
inherit Specifies that the background color should be inherited
from the parent element
CSS PROPERTIES : BACKGROUND-IMAGE
18
background-image: sets the background image for an
element.
Value Description
url('URL') The URL to the image
none No background image will be displayed. This is default
inherit Specifies that the background image should be inherited from
the parent element
CSS PROPERTIES : BACKGROUND-REPEAT
19
background-repeat: sets if/how a background image
will be repeated.
Value Description
repeat The background image will be repeated both vertically and
horizontally. This is default
repeat-x The background image will be repeated only horizontally
repeat-y The background image will be repeated only vertically
no-repeat The background-image will not be repeated
inherit Specifies that the setting of the background-repeat property
should be inherited from the parent element
CSS PROPERTIES : BACKGROUND-ATTACHMENT
20
ackground-attachment: sets whether a background
image is fixed or scrolls with the rest of the page.
Value Description
scroll The background image scrolls with the rest of the page. This is
default
fixed The background image is fixed
inherit Specifies that the setting of the background-attachment property
should be inherited from the parent element
CSS PROPERTIES: BACKGROUND-POSITION
21
background-position: sets the starting position of a
background image.
CSS PROPERTIES: BACKGROUND-POSITION
22
Value Description
left top left center left bottom right top right center right bottom center top center center center bottom
If you only specify one keyword, the other value will be "center"
x% y% 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%
xpos ypos
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
inherit Specifies that the setting of the background-position property should be
inherited from the parent element
CSS PROPERTIES : BACKGROUND
23
background: sets all the background properties in one
declaration.
Value Description
background-color Specifies the background color to be used
background-position
Specifies the position of the background images
background-repeat Specifies how to repeat the background images
background-attachment
Specifies whether the background images are fixed or
scrolls with the rest of the page
background-image Specifies ONE or MORE background images to be used
ACTION
Do more, get more …
24
YOUR TASK
25
Improve your previous website by applying the new CSS
rules
Next subject
CSS box model
26
WWW course
5th day
BKITAtom, Dec 2011
Hieu Le Trung
TODAY TARGET
Box model
Border
Margin
Padding
Float and clear
Float
Clear
Display and Position
Display
Position
2
CSS BOX MODEL
3
Every element can be considered as a box
http://www.w3schools.com/cssref/pr_text_text-decoration.asp
border
margin
padding
content
CSS 4-D SHORTAND
4
For border, margin, padding, we have 4 sub-
elements 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)
5
The PROP property can also be written in a shortand
way using one of the following:
PROP: VALUE PROP: VALUE VALUE VALUE VALUE
PROP: VALUE VALUE PROP: VALUE VALUE VALUE
Defines the top , right, bottom,
left value of the PROP Defines value for all four side of the
formated PROP property
Defines the top , left and right,
bottom value of the PROP
Defines the top and bottom, left
and right value of the PROP
CSS BORDER
6
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
7
border-width: sets the width of the border of an
element
Value Description
thin Specifies a thin border
medium Specifies a medium border. This is default
thick Specifies a thick border
length Allows you to define the thickness of the border
inherit Specifies that the border width should be inherited
from the parent element
CSS PROPERTIES : BORDER-STYLE
8
border-style: sets the style of the border of an
element
http://www.w3schools.com/cssref/pr_border-style.asp
CSS PROPERTIES : BORDER-COLOR
9
border-color: sets the style of the border of an
element
Value Description
color Specifies the background color. Look at CSS Color Values
for a complete list of possible color values
transparent Specifies that the border color should be transparent. This
is default
inherit Specifies that the border color should be inherited from
the parent element
CSS PROPERTIES : MARGIN
10
Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing
element
inherit Specifies that the margin should be inherited from the parent
element
Margin
CSS PROPERTIES : PADDING
11
Value Description
length Specifies the padding in px, pt, cm, etc. Default value is 0px
% Specifies the padding in percent of the width of the containing element
inherit Specifies that the padding should be inherited from the parent element
padding
TODAY TARGET
Box model
Border
Margin
Padding
Float and clear
Float
Clear
Display and Position
Display
Position
12
CSS FLOATING
13
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~
Without floating The block element is floating
A floating element allows other elements
wrap around it if there is a space
CSS PROPERTIES : FLOAT
14
Value Description
left The element floats to the left
right The element floats the right
none 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
float: specifies whether or not a box (an element)
should float.
CSS PROPERTIES : CLEAR
15
clear: specifies which sides of an element where other
floating elements are not allowed.
Value Description
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
none Default. Allows floating elements on both sides
inherit Specifies that the value of the clear property should be inherited from
the parent element
TODAY TARGET
Box model
Border
Margin
Padding
Float and clear
Float
Clear
Display and Position
Display
Position
16
CSS PROPERTIES : POSITION
17
position: specifies the type of positioning method used
for an element (static, relative, absolute or fixed).
Value Description
static Elements renders in order, as they appear in the document flow. This is
default.
absolute The element is positioned relative to its first positioned (not static)
ancestor element
fixed The element is positioned relative to the browser window
relative The element is positioned relative to its normal position, so "left:20" adds
20 pixels to the element's LEFT position
inherit The value of the position property is inherited from the parent element
CSS PROPERTIES : DISPLAY
18
display: specifies the type of box an element should
generate.
Value Description
none The element will generate no box at all
block The element will generate a block box (a line break before and after
the element)
inline The element will generate an inline box (no line break before or
after the element). This is default
inline-block The element will generate a block box, laid out as an inline box
inline-table The element will generate an inline box (like <table>, with no line
break before or after)
CSS PROPERTIES : DISPLAY
19
Value Description
list-item The element will generate a block box, and an inline box for
the list marker
run-in The element will generate a block or inline box, depending on
context
table The element will behave like a table (like <table>, with a line
break before and after)
table-caption The element will behave like a table caption (like <caption>)
table-cell The element will behave like a table cell
table-column The element will behave like a table column
table-column-group
The element will behave like a table column group (like
<colgroup>)
CSS PROPERTIES : DISPLAY
20
Value Description
table-footer-group
The element will behave like a table footer row group
table-header-group
The element will behave like a table header row group
table-row The element will behave like a table row
table-row-group The element will behave like a table row group
inherit Specifies that the value of the display property should be
inherited from the parent element
ACTION
Do more, get more …
21
YOUR TASK
22
Improve your previous website by applying the new CSS
rules. You should re-layout it without using table int the
main layout.
WWW course
6th day
BKITAtom, Dec 2011
Hieu Le Trung
TODAY TARGET
List formating
List style
List style image
List style position
List style type
Table formating
Link formating
“lovehate” rule
2
LIST FORMATION LIST-STYLE-IMAGE
3
replaces the list-item marker with an image. replaces the
list-item marker with an image.
Value Description
url The path to the image to be used as a list-item marker
none
No image will be displayed. Instead, the list-style-type
property will define what type of list marker will be
rendered. This is default
inherit Specifies that the value of the list-style-image property
should be inherited from the parent element
LIST FORMATION LIST-STYLE-POSITION
4
specifies if the list-item markers should appear inside or
outside the content flow.
Value Description
inside Indents the marker and the text. The bullets appear inside the
content flow
outside Keeps the marker to the left of the text. The bullets appears
outside the content flow. This is default
inherit Specifies that the value of the list-style-position property
should be inherited from the parent element
LIST FORMATION LIST-STYLE-TYPE
5
specifies the type of list-item marker in a list.
Value Description
armenian The marker is traditional Armenian numbering
circle The marker is a circle
cjk-ideographic The marker is plain ideographic numbers
decimal The marker is a number. This is default for <ol>
decimal-leading-
zero
The marker is a number with leading zeros (01, 02, 03,
etc.)
disc The marker is a filled circle. This is default for <ul>
georgian The marker is traditional Georgian numbering
hebrew The marker is traditional Hebrew numbering
LIST FORMATION LIST-STYLE-TYPE
6
inherit The value of the listStyleType property is inherited from
parent element
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
none No marker is shown
square The marker is a square
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
LIST FORMATION LIST-STYLE
7
sets all the list properties in one declaration.
Value Description
list-style-type Specifies the type of list-item marker. See list-style-type for possible
values
list-style-
position
Specifies where to place the list-item marker. See list-style-position
for possible values
list-style-image Specifies the type of list-item marker. See list-style-image for possible
values
inherit Specifies that the value of the list-style property should be inherited
from the parent element
TODAY TARGET
List formating
List style
List style image
List style position
List style type
Table formating
Link formating
“lovehate” rule
8
SAMPLE CUSTOM TABLE
9
Column 1 Column 2 Column 3
Lorem Novoire idimu $ 5,000
Ispum Sactum liner practist $13,000
Consepti Echemica sisto $ 25,300
Lavarine Clarif Woodi $11,000
Outes Sentia Cloro Sacture $ 8,700
SAMPLE CUSTOM TABLE
10
How do you
do it in CSS?
TODAY TARGET
List formating
List style
List style image
List style position
List style type
Table formating
Link formating
“lovehate” rule
11
HYPERLINK FORMATING (ANCHOR)
12
What is a hyperlink?
Its default display.
Link
• Normal apperance
Visited
• A link have been visited
Hover
• Your mouse is over the anchor.
Active
• You’re pressing the left mouse button!
ANCHOR PSEUDO ELEMENTS
13
: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.
ACTION
Do more, get more …
14
YOUR TASK
15
Improve your previous website by applying the new CSS
rules. You should re-layout it without using table int the
main layout.
WWW course
7th day
BKITAtom, Dec 2011
Hieu Le Trung
TODAY TARGET
CSS 3 new features
Border-radius
Box-shadow
Opacity
CSS media type
CSS selector review
Assignment discuss
2
CSS 3: BORDER-RADIUS
3
Add rounded borders to elements!
border-radius: 1-4 length|% / 1-4 length|%;
Horizontal radius/ Vertical radius
top-left -> top-right -> bottom-right -> bottom-left
IE9+ Firefox 4+ Chrome 14+ Opera Safari 4+
CSS 3: BOX-SHADOW
4
Attaches one or more drop-shadows to the box.
box-shadow: h-shadow v-shadow blur spread color inset;
IE9+ Firefox 4+ Chrome 14+ Opera Safari 5.1.1+
CSS 3: BOX-SHADOW
5
Attaches one or more drop-shadows to the box.
Value Description
h-shadow Required. The position of the horizontal shadow. Negative
values are allowed
v-shadow Required. The position of the vertical shadow. Negative values
are allowed
blur Optional. The blur distance
spread Optional. The size of shadow
color Optional. The color of the shadow. Look at CSS Color Values
for a complete list of possible color values
inset Optional. Changes the shadow from an outer shadow (outset)
to an inner shadow
CSS 3: OPACITY
6
Sets the opacity level for an element.
Value Description
value Specifies the opacity. From 0.0 (fully transparent) to
1.0 (fully opaque)
inherit The value of the opacity property should be
inherited from the parent element
CSS BROWSER ALTERNATIVE
PROPERTIES
7
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
8
CSS MEDIA TYPE
9
Media Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like
teletypes and terminals
tv Used for television-type devices
CSS MEDIATYPE
10
When linking to the HTML document
<link href=“…” type=“…” rel=“…” media=“…” />
In CSS declarations
@media …
{
// CSS rules
}
ACTION
Do more, get more …
11
YOUR TASK
12
Improve your previous website by applying the new CSS
rules. You should re-layout it without using table int the
main layout.