introduction to web html, css

150
WWW course 1 st day BKITAtom, Nov 2011 Hieu Le Trung

Upload: university-of-technology

Post on 27-Jan-2015

122 views

Category:

Technology


4 download

Tags:

DESCRIPTION

This course is an introduction to WEB world.

TRANSCRIPT

Page 1: Introduction to WEB HTML, CSS

WWW course 1st day

BKITAtom, Nov 2011

Hieu Le Trung

Page 2: Introduction to WEB HTML, CSS

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

Page 3: Introduction to WEB HTML, CSS

Web & web programming Web in English language and web in our daily talks

World Wide Web and internet

3

Page 4: Introduction to WEB HTML, CSS

Web & web programming cont. Web programming, huh?

For front-end developer: the war between browsers

4

Page 5: Introduction to WEB HTML, CSS

Website and webpage

5

website

Multiple webpage

Under one domain

Page 6: Introduction to WEB HTML, CSS

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

Page 7: Introduction to WEB HTML, 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

Page 8: Introduction to WEB HTML, CSS

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

Page 9: Introduction to WEB HTML, CSS

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

Page 10: Introduction to WEB HTML, CSS

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

Page 11: Introduction to WEB HTML, CSS

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

Page 12: Introduction to WEB HTML, CSS

HTML charater reference See the HTML Character Entity Reference.html

12

Page 13: Introduction to WEB HTML, CSS

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

Page 14: Introduction to WEB HTML, CSS

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,

Page 15: Introduction to WEB HTML, CSS

Today tags <title>

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

<div>, <p>

<blockquote>, <q>

<hr>, <br>

<b>, <i>

<span>

15

Page 16: Introduction to WEB HTML, CSS

<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>

Page 17: Introduction to WEB HTML, CSS

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>

Page 18: Introduction to WEB HTML, CSS

<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>

Page 19: Introduction to WEB HTML, CSS

<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>

Page 20: Introduction to WEB HTML, CSS

<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>

Page 21: Introduction to WEB HTML, CSS

<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>

Page 22: Introduction to WEB HTML, CSS

<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>

Page 23: Introduction to WEB HTML, CSS

<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>

Page 24: Introduction to WEB HTML, CSS

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>

Page 25: Introduction to WEB HTML, CSS

<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>

Page 26: Introduction to WEB HTML, CSS

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

Page 27: Introduction to WEB HTML, CSS

WWW course 2nd day

BKITAtom, Nov 2011

Hieu Le Trung

Page 28: Introduction to WEB HTML, CSS

Today target HTML tags

Link

Image

List

Table

Iframe

Link, script and style

2

Page 29: Introduction to WEB HTML, CSS

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

Page 30: Introduction to WEB HTML, CSS

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

Page 31: Introduction to WEB HTML, CSS

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

Page 32: Introduction to WEB HTML, CSS

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

Page 33: Introduction to WEB HTML, CSS

URL Review

http://mydomain.com

index.html animal

cats.html

dogs.html

plants

flowers

roses.html

trees.html

7

Page 34: Introduction to WEB HTML, CSS

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

Page 35: Introduction to WEB HTML, CSS

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

Page 36: Introduction to WEB HTML, CSS

HTML table – simple table 10

A simple table structure with spanning cell

Cell merged

horizontally

Cell merged

vertically

Use <td> attributes: colspan and rowspan

Page 37: Introduction to WEB HTML, CSS

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

Page 38: Introduction to WEB HTML, CSS

Use HTML table in layout Years ago, the story begins …

12

Now, we use CSS instead!

Page 39: Introduction to WEB HTML, CSS

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

Page 40: Introduction to WEB HTML, CSS

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.

Page 41: Introduction to WEB HTML, CSS

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.

Page 42: Introduction to WEB HTML, CSS

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

Page 43: Introduction to WEB HTML, CSS

<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

Page 44: Introduction to WEB HTML, CSS

<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

Page 45: Introduction to WEB HTML, CSS

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

Page 46: Introduction to WEB HTML, CSS

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

Page 47: Introduction to WEB HTML, CSS

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

Page 48: Introduction to WEB HTML, CSS

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

Page 49: Introduction to WEB HTML, CSS

Cascading Style Sheet

Next subject

23

Page 50: Introduction to WEB HTML, CSS

WWW course

3rd day

BKITAtom, Nov 2011

Hieu Le Trung

Page 51: Introduction to WEB HTML, CSS

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

Page 52: Introduction to WEB HTML, CSS

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

Page 53: Introduction to WEB HTML, CSS

CSS – WHAT IS IT

4

CSS stands for “Cascading Style Sheet”

It’s a W3C recommendation

CSS defines how to display HTML elements

Page 54: Introduction to WEB HTML, CSS

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”);

Page 55: Introduction to WEB HTML, CSS

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>

Page 56: Introduction to WEB HTML, CSS

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

Page 57: Introduction to WEB HTML, CSS

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

Page 58: Introduction to WEB HTML, CSS

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

Page 59: Introduction to WEB HTML, CSS

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

Page 60: Introduction to WEB HTML, CSS

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 { … }

Page 61: Introduction to WEB HTML, CSS

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

Page 62: Introduction to WEB HTML, CSS

CSS PROPERTIES : WIDTH and HEIGHT

13

ELEMENT

width

height

Page 63: Introduction to WEB HTML, CSS

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

Page 64: Introduction to WEB HTML, CSS

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

Page 65: Introduction to WEB HTML, CSS

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: %

Page 66: Introduction to WEB HTML, CSS

MORE ABOUT DIMENSION …

17

max-width

min-width

max-height

min-height

Page 67: Introduction to WEB HTML, CSS

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

Page 68: Introduction to WEB HTML, CSS

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

Page 69: Introduction to WEB HTML, CSS

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.

Page 70: Introduction to WEB HTML, CSS

CSS COLOR

21

RGB color model

HSL color model (CSS3 – advanced)

Page 71: Introduction to WEB HTML, CSS

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/

Page 72: Introduction to WEB HTML, CSS

ACTION

Do more, get more …

23

Page 73: Introduction to WEB HTML, CSS

FIREFOX EXTENSIONS

24

Firebug

Rainbow color tool

Page 74: Introduction to WEB HTML, CSS

YOUR TASK

25

Improve your previous website by applying the new CSS

rules

Page 75: Introduction to WEB HTML, CSS

Next subject

CSS text formation (cont.), CSS font and CSS box model

26

Page 76: Introduction to WEB HTML, CSS

WWW course

4th day

BKITAtom, Dec 2011

Hieu Le Trung

Page 77: Introduction to WEB HTML, CSS

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

Page 78: Introduction to WEB HTML, CSS

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

Page 79: Introduction to WEB HTML, CSS

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

Page 80: Introduction to WEB HTML, CSS

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.

Page 81: Introduction to WEB HTML, CSS

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

Page 82: Introduction to WEB HTML, CSS

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

Page 83: Introduction to WEB HTML, CSS

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

Page 84: Introduction to WEB HTML, CSS

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.

Page 85: Introduction to WEB HTML, CSS

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

Page 86: Introduction to WEB HTML, CSS

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

Page 87: Introduction to WEB HTML, CSS

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

Page 88: Introduction to WEB HTML, CSS

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

Page 89: Introduction to WEB HTML, CSS

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!

Page 90: Introduction to WEB HTML, CSS

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

Page 91: Introduction to WEB HTML, CSS

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

Page 92: Introduction to WEB HTML, CSS

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

Page 93: Introduction to WEB HTML, CSS

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

Page 94: Introduction to WEB HTML, CSS

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

Page 95: Introduction to WEB HTML, CSS

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

Page 96: Introduction to WEB HTML, CSS

CSS PROPERTIES: BACKGROUND-POSITION

21

background-position: sets the starting position of a

background image.

Page 97: Introduction to WEB HTML, CSS

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

Page 98: Introduction to WEB HTML, CSS

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

Page 99: Introduction to WEB HTML, CSS

ACTION

Do more, get more …

24

Page 100: Introduction to WEB HTML, CSS

YOUR TASK

25

Improve your previous website by applying the new CSS

rules

Page 101: Introduction to WEB HTML, CSS

Next subject

CSS box model

26

Page 102: Introduction to WEB HTML, CSS

WWW course

5th day

BKITAtom, Dec 2011

Hieu Le Trung

Page 103: Introduction to WEB HTML, CSS

TODAY TARGET

Box model

Border

Margin

Padding

Float and clear

Float

Clear

Display and Position

Display

Position

2

Page 104: Introduction to WEB HTML, CSS

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

Page 105: Introduction to WEB HTML, CSS

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

Page 106: Introduction to WEB HTML, CSS

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

Page 107: Introduction to WEB HTML, CSS

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

Page 108: Introduction to WEB HTML, CSS

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

Page 109: Introduction to WEB HTML, CSS

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

Page 110: Introduction to WEB HTML, CSS

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

Page 111: Introduction to WEB HTML, CSS

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

Page 112: Introduction to WEB HTML, CSS

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

Page 113: Introduction to WEB HTML, CSS

TODAY TARGET

Box model

Border

Margin

Padding

Float and clear

Float

Clear

Display and Position

Display

Position

12

Page 114: Introduction to WEB HTML, CSS

CSS FLOATING

13

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~

~~~~~~~~

Without floating The block element is floating

A floating element allows other elements

wrap around it if there is a space

Page 115: Introduction to WEB HTML, CSS

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.

Page 116: Introduction to WEB HTML, CSS

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

Page 117: Introduction to WEB HTML, CSS

TODAY TARGET

Box model

Border

Margin

Padding

Float and clear

Float

Clear

Display and Position

Display

Position

16

Page 118: Introduction to WEB HTML, CSS

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

Page 119: Introduction to WEB HTML, CSS

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)

Page 120: Introduction to WEB HTML, CSS

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>)

Page 121: Introduction to WEB HTML, CSS

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

Page 122: Introduction to WEB HTML, CSS

ACTION

Do more, get more …

21

Page 123: Introduction to WEB HTML, CSS

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.

Page 124: Introduction to WEB HTML, CSS

WWW course

6th day

BKITAtom, Dec 2011

Hieu Le Trung

Page 125: Introduction to WEB HTML, CSS

TODAY TARGET

List formating

List style

List style image

List style position

List style type

Table formating

Link formating

“lovehate” rule

2

Page 126: Introduction to WEB HTML, CSS

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

Page 127: Introduction to WEB HTML, CSS

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

Page 128: Introduction to WEB HTML, CSS

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

Page 129: Introduction to WEB HTML, CSS

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.)

Page 131: Introduction to WEB HTML, CSS

TODAY TARGET

List formating

List style

List style image

List style position

List style type

Table formating

Link formating

“lovehate” rule

8

Page 132: Introduction to WEB HTML, CSS

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

Page 133: Introduction to WEB HTML, CSS

SAMPLE CUSTOM TABLE

10

How do you

do it in CSS?

Page 134: Introduction to WEB HTML, CSS

TODAY TARGET

List formating

List style

List style image

List style position

List style type

Table formating

Link formating

“lovehate” rule

11

Page 135: Introduction to WEB HTML, CSS

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!

Page 136: Introduction to WEB HTML, CSS

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.

Page 137: Introduction to WEB HTML, CSS

ACTION

Do more, get more …

14

Page 138: Introduction to WEB HTML, CSS

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.

Page 139: Introduction to WEB HTML, CSS

WWW course

7th day

BKITAtom, Dec 2011

Hieu Le Trung

Page 140: Introduction to WEB HTML, CSS

TODAY TARGET

CSS 3 new features

Border-radius

Box-shadow

Opacity

CSS media type

CSS selector review

Assignment discuss

2

Page 141: Introduction to WEB HTML, CSS

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+

Page 142: Introduction to WEB HTML, CSS

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+

Page 143: Introduction to WEB HTML, CSS

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

Page 144: Introduction to WEB HTML, CSS

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

Page 145: Introduction to WEB HTML, CSS

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-

Page 146: Introduction to WEB HTML, CSS

TODAY TARGET

CSS 3 new features

Border-radius

Box-shadow

Opacity

CSS media type

CSS selector review

Assignment discuss

8

Page 147: Introduction to WEB HTML, CSS

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

Page 148: Introduction to WEB HTML, CSS

CSS MEDIATYPE

10

When linking to the HTML document

<link href=“…” type=“…” rel=“…” media=“…” />

In CSS declarations

@media …

{

// CSS rules

}

Page 149: Introduction to WEB HTML, CSS

ACTION

Do more, get more …

11

Page 150: Introduction to WEB HTML, CSS

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.