HTML5
• HTML5 là gì?
• Tác dụng của HTML5
THÀNH PHẦN MỚI
Các thành phần mới:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer> …
THÀNH PHẦN MỚI
Thẻ : <video>, <Audio>
- Autoplay
- Control
- Poster
- width, height
- Audio
- Loop
- Preload
THÀNH PHẦN MỚI
<video width="500" height="375" controls autoplay poster='poster854.jpg‘ >
<source src="media/sample_video.mp4" type="video/mp4" />
</video>
THÀNH PHẦN MỚI
WEB FORM:
• Type: email, number, date…
• Attribute:required, maxlength, minlength, max, min, pattern …
Một số thành phần mới của CSS3
• Border-radius
.boxA{
border:2px solid #0C0; border-radius:6px;
}
Một số thành phần mới của CSS3
• Border- image
.boxB{
border-image-source: url(media/border.png); border-image-slice: 30;
border-image-width: 10px 20px;
border-image-outset: 0 10px 10px 30px; border-image-repeat: round;
}
Một số thành phần mới của CSS3
• Gradient
background: -moz-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%);
.boxC{
background-color: #cc0000;
background: -moz-linear-gradient(bottom, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(bottom, #cc0000 30%, #330000 70%);
}
Một số thành phần mới của CSS3
• Transform
.boxD{
margin-top:2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(-45deg); transform:rotate(-45deg); border:2px solid #0C0;
}
Một số thành phần mới của CSS3
• Transition
. boxE{
background: #cc0000; transition: height 2s;
-moz-transition: height 2s; height: 23px; width: 120px;
}
. boxE{ height: 100px;}
Một số thành phần mới của CSS3
• Animation
@keyframes myAnimation {
from {left: 0px;} to {left: 200px;}
}
.boxF{
border: 1px solid red; width: 100px; position: relative;
animation: myAnimation 5s ease-out infinite;
}
Một số thành phần mới của CSS3
• Front web
@font-face{
font-family: Sigmar;
src: url('SigmarOne.otf');
}
h2{
font-family: Sigmar, Georgia, Palatino, Times New Roman, serif;
}
Thành phần mở rộng của CSS3
• CSS3 media queries
• CSS3 layout
• CSS3 User Interface
• CSS3 media queries
• Type: braille, handheld, print, projection, screen,tty, tv
• Dimensisions:
- Browser:min-width, max-width, min-height, max- height.
- Device: min-device-width, max-device-width, min- device-height, max-device-height.
• Orientation: portrait, landscape
CSS3 media queries:
@media all and (max-width: 1000px){
body{ width: 100%;
background-color: yellow;
}
}
@media all and (min-width: 800px) and (max-width: 1000px){
body{ width: 100%;
background-color: blue;
}
}
CSS3 layout
#column{
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-rule: 1px dashed #cc0000;
-moz-column-rule: 1px dashed #cc0000;
-webkit-column-rule: 1px dashed #cc0000;
}
CSS3 User Interface
#boxflex{
width:600px; height:150px; border:1px solid red; display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;-moz-box-orient: horizontal
}
Contents
3.8.
GIÁO TRÌNH HTML5 – CSS3
I. HTML5
1. Giới thiệu HTML5
- HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa .
- Là phiên bản tiếp sau của HTML 4.01 và XHTML 1.1, HTML5 phản ánh thực tế rằng HTML và XHTML được sử dụng phổ biến trên World Wide Web là một hỗn hợp các tính năng với các thông số kĩ thuật khác nhau, được giới thiệu bởi nhiều nhà sản xuất phần mềm, cùng với các sản phẩm phần mềm được giới thiệu như trình duyệt web, những người thành lập phổ biến thực tế và có quá nhiều lỗi cú pháp trong các văn bản web
- Ngôn ngữ HTML5 giới thiệu một số thẻ/ thành phần mới giúp cấu trúc trang web được logic thiết thực hơn
- Tên của thành phần mới dựa theo tên các thành phần thông dụng được sử dụng trong phần bố cục trang web hiện nay (div id=”footer”,divid=”nav”,…).
- Tác dụng của các thành phần mới trong HTML5:
Giảm bớt sự phụ thuộc vào thẻ <div>
Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn
- HTML5 không thay thế bất kỳ cú pháp HTML nào mà chỉ bổ sung thêm các thành phần (thẻ) mới vào danh sách hiện có.
2. Khởi tạo làm việc với HTML5
2.1. Ngôn ngữ đánh dấu HTML5
- Không phân biệt kiểu chữ in hoa, in thường
<h1> Đoạn tiêu đề </h1>
- Các phần tử không bắt buộc phải có thẻ đón
<p> Đoạn văn bản cho phần nội dung
- Không bắt buộc phải có dấu nháy kép cho thuộc tính
<img src=imageone.jpg alt=landscape>
2.2. Cấu trúc file mã HTML5
DOCTYPE được sử dụng để kiểm tra hợp lệ các tài liệu
Vùng mã nội dung của HTML5 (content)
2.2.1. Vùng metadata :
- Thiết lập các tài liệu liên quan
- thiết lập từ khóa
- được đặt trong thẻ <head>
2.2.2. Vùng flow :
- Đại diện cho các phần tử được coi là nội dung của trang web
- Các thẻ đánh dấu nội dung đều thuộc vùng này
- Những phần tử được thêm mới trong HTML5 : <article>, <aside>, <audio>,
<canvas> …
2.2.3. Vùng sesioning
- Là vùng nội dung mới của HTML5
- Bao gồm 4 phần tử : <article>, <aside>, <nav>, <section>
2.2.4. Vùng Heading
- Chứa tất cả các phần tử tiêu đề chuẩn hiện đang được sử dụng trong HTML 4.0 bao gồm <h1>, <h2> …
- HTML5 bổ sung thêm phần từ <hgroup>
2.2.5. Vùng parsing
- Là văn bản của tài liệu bao gồm các phần tử đánh dấu văn bản bên trong một đoạn văn
- Là tập con của vùng flow
2.2.6. Vùng Embedded
- Là nội dung nhập một tài nguyên khác nhưu hình ảnh hay video trong tài liệu
2.2.7. Vùng Interactive
- Là những phần tử được sử dụng để tương tác với người dùng
3. Các thành phần mới trong HTML5
3.1. Phần tử <header>
- Đại diện cho một nhóm hỗ trợ giới thiệu hoặc định hướng.
- Có thể chứa các phần tử tiêu đề <h1> , …, <h6>, <hgroup>, bảng chứa nội dung, form tìm kiếm ..
- Trong html5 có thể sử dụng phần tử này nhiều lần.
3.2. Phần tử <nav>
- Thường để chứa các thành phần điều hướng cho web
3.3. Phần tử <section>
- Biểu diễn một vùng chung của tài liệu hoặc ứng dụng.
- Nên sử dụng môt sesion khi muốn phân chia nội dung như văn bản và hình ảnh thành các vùng.
3.4. Phần tử <article>
- Là thành phần tự chứa trong một tài liệu, một ứng dụng hoặc site
- Có thể lồng phần tử <article> vào trong phần tử <section>
- Là lựa chọn tối ưu để chứa nội dung sẽ được đăng tải trong những ngữ cảnh khác nhau.
- Phần tử article có thể chứa phần tử <header>, <footer>.
3.5. Phần tử <aside>
- Sử dụng cho vùng sidebar của website
- Sử dụng cho một vùng nội dung liên quan bên trong phần tử <section>
3.6. Phần tử <footer>
- Không thuộc lớp các phần tử chia đoạn
- Có thể có nhiều footer trên một trang web.
3.7. Thẻ <video>
Cho phép nhúng video vào trang web mà không cần sử dung plugin của trình duyệt.
<video width="500" height="375" controls autoplay poster='poster854.jpg' >
<source src="media/sample_video.mp4" type="video/mp4" />
</video>
- autoplay: thuộc tính quy định với trình duyệt đoạn video sẽ được chơi ngay khi trang được load
- control: cung cấp trình điều khiển video trên các trình duyệt khác nhau
- Poster: thuộc tính chỉ định cho trình duyệt load hình ảnh ban đầu của video
- width, height: thuộc tính chỉ định kích thước của video
- audio: thuộc tính này cho phép tắt tiếng của video, giá trị ‘muted‘
- loop: thuộc tính này sẽ kích hoạt đoạn video phát lại
- preload: cho phép tải đoạn video ngay khi tải trang web, giảm thời gian tải video Thêm các thuộc tính để video được hỗ trợ trên nhiều trình duyệt:
- Có nhiều định dạng, codec cho video nhưng không phải lúc nào cũng hỗ trợ HTML5
video hiển thị trên các trình duyệt
- Định dạng ogg:
+ Định dạng theo chuẩn mã nguồn mở
+ Được hỗ trợ bởi các trình duyệt Chrome, Firefox, Opera
- Định dạng mp4:
+ Sử dụng codec H.264 và âm thanh sử dụng codec AAC
+ Được hỗ trợ bởi IE, Safari, iOS và Android
- Để đoạn video ở cả 2 định dạng ogg và mp4 sẽ giúp hiển thị tốt trên các trình duyệt và thiết bị
- Thêm thuộc tính type, codecs: mô tả cấu trúc kiểu của file ogg, mp4
3.8. Thẻ <Audio>
Cho phép nhúng âm thanh vào trang web mà không cần sử dụng plugin của trình duyệt.
3.9. Thẻ <canvas>
Canvas là hàm API vẽ 2 chiều của HTML5 Hình vẽ sử dụng canvas:
- Cập nhật được trong thời gian thực
- Lưu lại dưới định dạng .png
Sử dụng các thành phần canvas để xác định bề mặt vẽ nhưng phải xác định hướng vẽ và dòng kết quả, hình dạng, màu sắc với javascript
Canvas luôn làm việc cùng với javascript
Khi vẽ các hình cơ bản với canvas cần chú ý: tọa độ vẽ, kích thước và hàm tính đặc biệt (chu vi hình tròn)
· Các bước làm việc với Canvas:
- Định nghĩa thành phần canvas trong HTML
- Tham chiếu bối cảnh vẽ cho các phần tử đó như 1 biến trong javascript
· Khởi tạo:
- Lệnh canvas:
- Kết hợp vẽ với javascript:
var ctx=c.getContext("2d");
Đối tượng getContext(“2d”) là đối tượng HTML5 chứa các phương thức vẽ đường path, hình hộp, hình tròn, character, hình ảnh, …
ctx.fillStyle="FF0000";
Định nghĩa kiểu màu tô là màu đỏ ctx.fillRect(0,0,150,75);
Định nghĩa vẽ 1 hình chữ nhật kích thước 150×75, bắt đầu từ góc trên bên trái (0,0)
· Ưu điểm của thành phần canvas:
- Cho phép tạo graphic, hình động (animation), gradient, các đối tượng đồ họa khác bằng mã
- Đã được trình duyệt phổ biến hỗ trợ
- Khả năng mạnh mẽ: làm game, animation, chart, graph, vector, …
- Không phải sử dụng thêm plug-in
· Vẽ đường path:
Đường path: tạo nên các hình dạng cơ sở
· Vẽ hình chữ nhật:
x, y: tọa độ vẽ hình
width, height: kích thước hình
Tọa độ x, y trên màn hình
}
· Vẽ đường thẳng:
moveTo(x,y): tạo ra 1 đường path phụ với tọa độ xác định
lineTo(x,y): thêm điểm point mới, kết nối với điểm trước đó bằng đường thẳng
· Vẽ đường tròn:
·Vẽ đường cong:
· Vẽ text:
·Tô màu gradient:
Phương thức xác định màu sắc và vị trí của đối tượng gradient thường được sử dụng cùng createLinearGradient() và createRadialGradient()
· Chèn thêm hình ảnh:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
·Sử dụng biến đổi:
- Sử dụng kết hợp với khung hình vẽ sẽ tạo ra hình ảnh đẹp hơn
- 3 loại biến đổi: scaling, rotating, translating
- Sử dụng kết hợp với hàm: save, restore
· Vẽ hình chuyển động lặp (loop):
Kết hợp sử dụng với hàm javascript (setInterval) sẽ tạo ra được những chuyển động lặp
3.10. Web form
4.Tổng quan về HTML5 API
4.1. API geolocation
Chia sẻ thông tin vị trí địa lý của trình duyệt web
Thông tin này được sử dụng để gửi dữ liệu liên quan đến vị trí địa lý API geolocation được kích hoạt trên một số trình duyệt hiện đại
II. CSS3
1. Giới thiệu CSS3
CSS3 không phải là 1 thành phần của HTML5 nhưng lại có mối liên quan mật thiết với HTML5
CSS3 được phát triển song song với HTML5
CSS3 là tiêu chuẩn mới nhất của CSS
Hoàn toàn tương thích với các phiên bản trước
CSS3 được chia thành các module, các thành phần cũ được chia nhỏ và bổ sung các thành phần mới
2. Một số module quan trọng trong CSS3
- Selectors
- Box model
- Backgrounds and Border
- Text Effects
- 2D/3D Transformations
- Multiple Column Layout
- User Interface
3. Một số thành phần CSS3 mới
3.1. Border-radius
border-radius: tạo ra 4 góc bo tròn cho đường viền
-webkit-border-radius: giúp IE9+ hỗ trợ
-moz-border-radius: giúp Firefox hỗ trợ 3.2.Border- image
Trong đó:
- -moz-animation hỗ trợ cho firefox.
- -webkit-animation hỗ trợ cho Google Chrome và Safari.
- -ms-animation hỗ trợ cho Internet Explorer.
- -o-animation hỗ trợ cho Opera.
#bannerimg{
border: 20px #773636 solid;
-webkit-border-image: url("images/border-bg.png") 33% repeat;
-moz-border-image: url("images/border-bg.png") 33% repeat; border-image: url("images/border-bg.png") 33% repeat;
}
3.3. CSS3 Gradient
Gradient là thành phần phổ biến trên trang web
Gradient trong CSS giống với gradient được tạo ra trong các chương trình đồ họa Gradient thường bao gồm:
- 2 điểm dừng màu (color stop)
- 1 điểm chuyển màu
Có thể tạo được nhiều điểm dừng màu và điểm chuyển màu để gradient phong phú hơn Trước khi có CSS3:
Trong đó:
- vị-trí: được xác định theo bảng giá trị bên dưới.
- mã-màu: giá trị màu.
- n: độ tràn màu (hay độ trộn lẫn).
Tính theo % : đối với -moz-, -o-, -ms-.
Tính theo giá trị thập phân (từ 0 - 1) : đối với -webkit-.
Tạo gradient với CSS3:
Thêm góc độ và nhiều điểm dừng:
Mục đích: tăng thêm sự đa dạng của gradient và kiểm soát tốt hơn
Lặp lại gradient:
Sử dụng hệ màu RGBA để định nghĩa gradient:
3.4.Transform
Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang
3.5. Transition
Sử dụng link để thực hiện transition
transition-duration: quy định thời gian chuyển đổi
transition-timing-function: xác định tốc độ đường cong của hiệu ứng chuyển tiếp Một số giá trị của transition-timing-function:
3.6.CSS animation
3.7.Front web
@font-face:
- Cho phép nhúng font chữ vào trang bằng cách khai báo font đó và đặt font chữ trên web server
- Là giải pháp khắc phục việc phải cài đặt font chữ trên máy tính
3.8.Hình nền với CSS3
- Thực hiện chèn 3 hình ảnh làm nền cho web
- Chèn nhiều hình nền với vị trí chính xác:
Sử dụng giá trị vị trí: top, left, right, bottom để điều chỉnh chính xác nhiều hình nền trong CSS
5. Làm việc với thành phần mở rộng của CSS3
5.1. CSS3 media queries
- Có thể nhận biết được thiết bị : braille, handheld, print, projection, screen,tty, tv
- Có thể nhận biết kích thước trình duyệt, thiết bị:
Với trình duyệt: min-width, max-width, min-height, max-height.
Với thiết bị: min-device-width, max-device-width, min-device-height, max-device- height.
- có thể kiểm tra màn hình đang ở chế độ thẳng đứng hay nằm nghiêng từ đó chúng ta có thể đưa ra các định dạng, kích thước phù hợp: portrait, landscape
Ví dụ:
- Màn hình kích thước tối đa 1000px thì có background-color: yellow;
- Màn hình kích thước tối đa 1000px thì có background-color: red;
- Màn hình kích thước tối đa 1000px thì có background-color: blue;
- Màn hình ở chế độ nghiêng
- Màn hình ở chế độ thẳng đứng
5.2. CSS3 layout
5.2.1. Layout nhiều cột
Sử dung CSS3 cung cấp các thuộc tính để thuận tiện cho việc thiết kế layout dạng nhiều cột.
5.3. CSS3 User Interface (giao diện người dùng)
CSS3 cung cấp một tính năng về phía người dùng:
- Thay đổi kích thước thành phần trên trang
- Thay đổi kích thước hộp
- Phác thảo
- offset
5.3.1. resize:
- Thuộc tính resize định dạng cho vùng nội dung mà người dùng có thể thay đổi được kích thước.
5.3.2. CSS3 box:
Thuộc tính box trong css3 dùng để hiển thị vị trí, định dạng lại vùng không gian, hiển thị độ bóng (shadow) cho thành phần.
CSS3 outline offset:
- Quy định một đường biên bao phía bên ngoài đường biên mặc định
- 2 cách tạo outline: không mất không gian, không phải dạng hình chữ nhật
>>Xem bài trước: Bài 10 - giới thiệu thẻ div
>>Xem bài tiếp theo: Bài 12 cắt giao diện web bằng photoshop phần 1 - chuyển psd sang html và css
No comments:
Post a Comment