Session5 module16 17 HTML5 and CSS3 elements

Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở điVà kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này

Session 5

Module 16: HTML5 Elements

Module 17: Introduction to CSS3

Session 6 – Objectives (1)

Evolution of Web

Technologies

Introduction to HTML5 (1)

Introduction to HTML5 (2)

XHTML, and the HTML DOM

most modern browsers have some HTML5 support

New HTML5 Elements

playback

footer, header, nav, section

email, url, search

Layout Tags (1)

Layout Tags (1)

Layout Tags Demo

HTML5 Forms Elements (1)

HTML5 Forms Elements (2)

HTML5 Forms Elements Demo

E-mail: <input type="email" name="user_email" autofocus required /> Homepage: <input type="url" name="user_url" />

Points: <input type="number" name="points" min="1" max="10" />

Points:<input type="range" name="points_range" min="1" max="10" /> Date: <input type="date" name="user_date" />

E-mail: <input type="email" name="user_email" autofocus required /> Homepage: <input type="url" name="user_url" />

Points: <input type="number" name="points" min="1" max="10" />

Points:<input type="range" name="points_range" min="1" max="10" /> Date: <input type="date" name="user_date" />

Output on Opera

Video on Web (1)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

width="425" height="344"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0">

<param name="allowFullScreen" value="true" />

<param name="allowscriptaccess" value="always" />

<param name=“src” value=“http://www.youtube.com/v/oHg5SJYRHA0 &hl=en&fs=1&" />

<param name="allowfullscreen" value="true" />

<param name="allowFullScreen" value="true" />

<param name="allowscriptaccess" value="always" />

<param name=“src” value=“http://www.youtube.com/v/oHg5SJYRHA0 &hl=en&fs=1&" />

<param name="allowfullscreen" value="true" />

<audio src="song.mp3" controls="controls"></audio>

<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" />

<source src="movie.mp4" type="video/mp4" />

<source src="movie.webm" type="video/webm" />

</video

<audio src="song.mp3" controls="controls"></audio>

<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" />

<source src="movie.mp4" type="video/mp4" />

<source src="movie.webm" type="video/webm" />

</video

HTML5 Audio and Video

Look, so easy, so simple

Look, so easy, so simple

Video Element Attributes

HTML 5 Video Format

for the video element:

o Ogg = Ogg files with Thedora video codec

o Vorbis audio codecMPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec.

2D and 3D Drawing

Canvas Element

draw graphics on a Web page

every pixel of it

draw graphics on a web page

Canvas Element Demo

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;”>Your browser does not support the canvas element.

Introduction to CSS3

 CSS is used to control the style and layout of Web pages

W3C CSS specification, from currently supported visual effects to the most cutting-edge animation techniques

CSS3-Vendor Specific Extensions(1)

implement extensions to the CSS specifications that, in most cases, are proprietary to their browser

as adding new features for users, or for experiments and debugging

 In order to accommodate the release of specific extensions, the CSS specifications define a specific format that vendors should follow:

vendor-o '-' + vendor specific identifier + '-' + attribute

o '_' + vendor specific identifier + '-' + attribute

Prefix Organisation

-ms- Microsoft

mso- Microsoft Office

-moz- Mozilla Foundation (Gecko-based browsers) -o- Opera Software

-atsc- Advanced Television Standards Committee

-wap- The WAP Forum

-webkit- Safari (and other WebKit-based browsers)

CSS3-Vendor Specific Extensions(3)

CSS3 – Borders (1)

add shadow to boxes, and use an image as a border - without using a design program, like Photoshop

o border-radius

o box-shadow

o border-image

CSS3 – Borders (1)

CSS3 - Border Images

/* CSS */

#round

{

border-width:15px; width:250px; padding:10px 20px;

-moz-border-image:url(border.png) 30 30 round; /* Firefox */

-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */

border-width:15px; width:250px; padding:10px 20px;

-moz-border-image:url(border.png) 30 30 round; /* Firefox */

-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */

CSS3 - Web Fonts

that were already installed on the user's computer

using CSS3 @font-face rule

CSS3 - Web Fonts Demo

CSS3 Text Shadow Demo

CSS3 Word Wrapping Demo

gword The long word will brake

and wrap to the next line.</p>

gword The long word will brake

and wrap to the next line.</p>

Output

CSS3 - Multiple Columns

columns for laying out text - like in newspapers

o column-count

o column-gap

o column-rule

CSS3 - Multiple Columns Demo

Output

CSS3 - Transformations

move, scale, turn, spin, and stretch elements

The translate() Method

from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position

the element 50 pixels from the left, and 100 pixels from the top

The translate() Method Demo

The rotate() Method

clockwise at a given degree Negative values are allowed and rotates the element counter-clockwise

element clockwise 30 degrees

The rotate() Method Demo

/* CSS */

div

{

margin:10px; width:100px; height:75px;

background:lavender; border:1px solid black;

margin:10px; width:100px; height:75px;

background:lavender; border:1px solid black;

The scale() Method

decreases the size of an element

be twice its original size, and the height 4 times its original size

The scale() Method Demo

The skew() Method

angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines

element 30 degrees around the X-axis, and 20 degrees around the Y-axis

The skew() Method Demo

CSS3 - Animations (1)

can replace animated images, Flash animations, and JavaScripts in many web pages

appearance of an element in the browser by translating, rotating or other means

animation

CSS3 - Animations (2)

CSS3 - Animations Demo

/* CSS in Safari and Chrome */

@-webkit-keyframes myfirst {

from {background: red;}

to {background: yellow;}

}

#box {

width:100px; height:100px; background:red;

from {background: red;}

to {background: yellow;}

}

#box {

width:100px; height:100px; background:red;

Session 5 - Summary (1)

XHTML, and the HTML DOM

o Semantics (Layout tags, Link Relations…)

o Web Forms 2.0 (Input Fields)

o Multimedia (Audio Tag, Video Tag)

Session 5 - Summary (2)

W3C CSS specification with new visual effects and animation techniques