Cơ bản Html5 và Css3

Cơ bản Html5 và Css3

Khái niệm

Html 5 và CSS3 là version mới được nâng cấp từ html và Css với nhiều tính năng mới và dĩ nhiên nó là công nghệ của tương lai.
Các tính năng video của HTML5 – cho phép đơn giản hoá việc thêm một video vào trang Web - đã được nhận được nhiều sự chú ý, không những thế HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như các nhà phát triển Web.

TML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như Flash hoặc Silverlight.

Vậy thì những gì là lợi ích lớn với tính năng video của HTML5 là gì? Thứ nhất, nó là miễn phí và không cần phần mềm Adobe Flash plugin. Thứ hai, Flash có thể làm chậm máy tính của bạn (mặc dù phần mềm tăng tốc phần cứng hardware-accelerated Flash 10.1 - đang trong phiên bản beta – có thể giúp giải quyết vấn đề này). Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống. Với HTML5, tính năng video đã được xây dựng sẵn trong đó.

Một điều quan trọng cần lưu ý về HTML5 video là nó vẫn còn thay đổi. Ví dụ, Safari, Chrome, và sắp tới là Internet Exporer 9 sẽ hỗ trợ HTML5 video sử dụng định dạng H.264. Firefox, mặt khác, hiện thời chỉ hỗ trợ HTML5 video sử dụng định dạng Ogg Vorbis, nhiều người sau khi dùng Firefox cho rằng mã nguồn đóng của H.264 có thể gây ra vấn đề về bản quyền trong tương lai, do đó nó có thể sẽ còn phải thay đổi.

Khả năng tương thích HTML5

- Mặc dù HTML5 và CSS3 vẫn chưa được hoàn tất, nhưng chúng đã làm thay đổi bộ mặt của trang Web. Một số trình duyệt - như các phiên bản hiện hành của Safari và Chrome - đã thực hiện một số tính năng từ các phiên bản dự thảo của HTML5 và CSS3. Và với việc sử dụng những trình duyệt này bạn có thể xem nhiều trang web mà trong đó cũng sử dụng HTML5 và CSS3 như CNN.com, The New York Times, YouTube (trong phiên bản beta).

- Phiên bản hiện tại của Internet Explorer, trình duyệt IE 8, hỗ trợ HTML5 rất hạn chế, tuy nhiên, IE 9 sẽ hỗ trợ H264 video, âm thanh nhúng, đồ họa vector tỷ lệ và CSS3.

- Không kể HTML5 vẫn còn đang trong giai đoạn "thử nghiệm" mà ngay cả một số công nghệ đang được áp dụng cho các trình duyệt và các trang Wed hiện nay vẫn chưa phải là đã kết thúc về mặt kỹ thuật.

- HTML5 và CSS3 – được kết hợp với các công nghệ Web khác như JavaScript - có thể rất hữu ích cho phong cách, định dạng và tốc độ hoạt động của bất kỳ trang web nếu được sử dụng đúng. Hai ngôn ngữ sẽ cách mạng hóa cách chúng ta lập trình và xem internet với các tính năng cải tiến all-in-one, có thể loại bỏ việc phải sử dụng nhiều ứng dụng của bên thứ ba (ví dụ như Flash).

- Trên đây chỉ là một phần nhỏ của những gì mà HTML5 và CSS3 cung cấp. Để tìm hiểu thêm bạn có thể xem thêm các thông tin kỹ thuật chi tiết về HTML5 và CSS3.

- CSS 3 được xây dựng dựa trên các nguồn gốc của các style, selectors và cascade dựa trên phiên bản cũ của CSS 2.0 trước đó. Nó cho phép thực thi thêm 1 số tính năng mới, bao gồm cả mới selectors, pseudo-class và các properties. Bằng cách sử dụng các tính năng mới này, việc thiết kế trình bày template của bạn sẽ trở nên dễ dàng hơn rất nhiều.
Một số thẻ HTML5

Chèn nhạc mp3 thay cho Flash

Chèn video mp4 không cần dùng Flash

Kiểm tra thuộc tính form bằng html5 không dung Javascript

Kiểm tra email

Kiểm tra số nhập

Kiểm tra URL

Tham khảo thêm: http://w3schools.com/html5/

Ví dụ CSS3

Demo

Trước khi đi vào phân tích cấu trúc template demo, các bạn xem hình phân tích cụ thể cấu trúc của trang:

Read More

Phân loại CSS

Có 3 loại CSS

• CSS Tag
• CSS Class
• Css Advance

a. Css Tag:

> Quy định thuộc tính cho các thẻ HTML thay cho thuộc tính mặc định

Ví dụ:

Quy định văn bản và màu nền cho thẻ body (Toàn tài liệu)

body { 

background-color:#FFFF99; 

color:#3333CC;

}

Để quy định các thẻ h1 và h3 có màu xanh lá thay cho màu mặc định là màu đen thì bạn sử dụng code css như sau:
h1, h3 { 

color:#00CC33;

} 

Hoặc bạn muốn quy định mọi hình ảnh đều canh trái

img { float:left;}

b. Css Class 

> Quy định thuộc tính cho các đối tượng có gán tên class="ten"

Ví dụ: bạn có code html như sau

<h2 class="tieude">Tiêu đề</h2>

<p class="tieude">Nội  dung</p>

Thì Code Css quy định  cho 2 đối tượng gán class="tieude" là:

.tieude { 

font-size:18px; 

color:#F00;

}

/* Quy định canh phải và kích thước cho đối tượng có class="hinh"*/

.hinh { 

float:right; 

width:200px; 

height:200px;

}

c. Css Advance

> Là sự kết hợp giữa class + tag để quy định thuộc tính cho từng vùng đối tượng được đặt tên.

Ví dụ: bạn muốn Quy định hình trong menutop có kích thước 40x40px > code css:

.menutop img {

width:40px; 

height:40px;

}

Quy định link trong menutop

.menutop a {

color:#FF0000; 

text-decoration:none;

}

Read More

Phần 1: Thiết kế giao diện web bằng photoshop

Việc thiết kế giao diện web (Xây dựng web tĩnh) phải qua nhiều bước khá phức tạp, trong bài viết này tôi sẽ giới thiệu đến các bạn chi tiết các bước thiết kế một trang web tĩnh. Bắt đầu với việc thiết kế giao diện từ photoshop đến cắt giao diện và cuối cùng là trình bày trang web bằng ngôn ngữ HTML và CSS. Việc thiết kế giao diện web được chia làm 3 phần như sau

 
Phần 1: Thiết kế giao diện web bằng photoshop

Phần 2: Cắt giao diện cho web

Phần 3: Layout web với HTML & CSS

Các bước chuẩn bị cho bài thực hành

Download các file trong forder Source để lấy hình và mẫu thiết kế.

File thiết kế bằng photoshop phải giữ nguyên Layer để cắt giao diện cho web.

Phần mềm sử dụng:

1.     Photoshop > vẽ và cắt giao diện

2.     Dreamweaver > Layout HTML & CSS

Bây giờ hãy bắt tay ngay vào công việc

Phần 1: Thiết kế giao diện bằng photoshop

Hình bên dưới minh họa sản phẩm hoàn thành sau khi thiết kế bằng photoshop, bạn có thể thay đổi theo ý tưởng của riêng mình.

Hãy bắt đầu theo các bước thực hiện 
B1. Tạo file mới
Tạo file mới có kích thước 1000x1100px, resolution: 72, mode màu: RGB color

B2. Tạo các đường hướng dẫn
Nhấn Ctrl + R > Click phải trên thước > chọn Pixel

Kéo từ thước ngang và dọc các đường hướng dẫn cho file thiết kế

Copy hình người mẫu sang file thiết kế à Nhấn phím Ctrl+T à thu nhỏ hình cho phù hợp với kích thước trang web để tạo hình nền cho ảnh.

Bước 3:
Trên layer ảnh vừa copy à chọn Add new Layer Mask à Tô màu đen lên layer mask để che nền của ảnh.

Bước 4: Tạo nền trong suốt trên ảnh nền
Tạo vùng chọn hình chử nhật (85% trang thiết kế).
Tạo layer mới, chọn màu tím cho forground à nhấn Alt + Delete à tô màu tím trong vùng chọn.
Giảm Opacity còn 25 đến 35 % để có nền trong suốt như hình.

Bước 5: Tạo menu left
Vẽ vùng chọn HCN > tạo layer mới > tô màu trắng > giảm Opacity: 70%

Thêm text cho menu

Bước 6: tạo menu top
Vẽ vùng chọn HCN > tạo layer mới > tô màu đen
Copy layer màu đen tô màu đỏ > nhấn Ctrl + [ > chuyển layer xuống dưới
Thêm text cho menu

Thêm ngôn ngữ, giỏ hàng

Bước 7: Thêm quảng cáo, sản phẩm
Thêm hình quảng cáo vào file thiết kế

Mở các file hoa mẫu

Chọn công cụ Crop tool > set thuộc tính như hình > Crop các sản phẩm có cùng kích thước với nhau

Vẽ vùng chọn Cắt ảnh > Enter

Copy các hình đã Crop sang file thiết kế > so thẳng hàng và cách đều

Thêm tên sản phẩm, giá bán, giỏ hàng

Copy cho các sản phẩm còn lại > đổi nội dung

Tương tự cho các sản phẩm

B8. Thêm form tìm sản phẩm
Chọn công cụ vẽ vùng chọn HCN có bo góc > chọn màu trắng > vẽ

Thêm nút tìm kiếm và text

B9. Thêm phần Footer

 Đã xong phần thiết kế giao diện trong chủ, nhấn Ctrl + 0 để xem kết quả. 

 

Bạn có thể Seve As thành các trang như gioithieu.psd, dichvu.psd, chitietsp.psd, lienhe.psd,… và thay đổi nội dung ở cột trái để hoàn thành bườc thiết kế giao diện bằng photoshop.

Trong phạm vi bài viết này tôi chỉ minh họa cho các bạn trang index, còn các trang còn lại các bạn thực hiện tương tự nhé.

Read More

Phần 2: Cắt giao diện cho web

Việc biến một giao diện được thiết kế trong Photoshop thành HTML là một phần rất quan trọng trong thiết kế web. Sau này nếu bạn muốn tự tạo giao diện cho trang web của mình cho dù nó động hay là web tĩnh, thì việc chuyển một thiết kế từ PSD sang HTML là việc đầu tiên bạn phải làm.
Trong phần 1 tôi đã hướng dẫn bạn cách thiết kế giao diện trang web shop hoa tươi bằng photoshop. Trong phần này, chúng ta sẽ sử dụng một giao diện đã thiết kế ở phần 1 để thực hiện cắt lấy hình ảnh đưa lên tài liệu html.
Cắt giao diện web là cắt lấy hình ảnh cho tài liệu html, còn phần văn bản và phần lặp lại các bạn sẽ bỏ đi. (Phần văn bản cho web các bạn sẽ xử lý ở phần lập trình và lấy từ database).

Nguyên tắt cơ bản:
Mỗi sản phẩm > 1 file hình.
Hình nền hay màu chuyển sắc > lấy đúng bước lặp lại và lưu thành 1 file hình.
Sử dụng các định dạng hình cho web: *.jpg, *.png, *.gif.
Công cụ sử dụng:

 Slice tool > vẽ vùng chọn cho hình, mỗi vùng chọn > tạo thành 1 file
Slice Select Tool > chỉnh vùng chọn của Slice tool
Bước 1:
Trước tiên các bạn nên phẩn tích giao diện để có được cái nhìn tổng thể nhất về giao diện mình sẽ cắt css. Từ đó bạn sẽ xác định được phần ảnh cần lưu lại và phần ảnh cần bỏ đi. Với giao diện này tôi chi làm 4 phần: Header: gồm logo, ngôn ngữ và menu top. Phần menu-left, cột phải: gồm các sản phẩm và phần footer.
Bây giờ chúng ta sẽ bắt đầu cắt giao diện theo phân chi ở trên, bắt đầu với phần header của mẫu thiết kế.

Với phần này bạn sẽ lấy logo, giỏ hàng, 2 lá cờ, phần menu và nền bỏ qua.
Sử dụng Slice tool > vẽ các vùng chọn và đặt tên tương ứng. bắt đầu cho logo

 Tương tự cho các phần còn lại như hình bên dưới

Bước 2:
Cắt hình các sản phẩm và banner quảng cáo
Dùng Slice tool > vẽ vùng chọn cho sản phẩm 1 > double click đặt tên sp1.

Dùng công cụ Slice Select Tool > chọn copy vùng chọn Slice của sản phẩm 1 cho các sản phẩm còn lại > đạt tên tương ứng: sp2, sp3, sp4,...
Tương tự bạn chon cho banner quảng cáo và đặt tên banner.
Trường hợp có 9 nút giỏ hàng cho 9 sản phẩm giống nhau nên bạn chỉ cần lưu đúng 1 giỏ hàng.

Bước 3:
Tiếp theo bạn sẽ lưu hình ảnh cho web
Chọn File / Save for web and Devices... (Ctrl + Shift + Alt + S), chọn định dạng file cho từng vùng chọn tương ứng như sau
Các sản phẩm, banner > *.jpg
Logo, các button > *.png-8

Click Save > chọn folder mới để lưu với file name: zzzzz, Save as Type: Images Only > chọn Save.
Bây giờ các bạn đã có các hình ảnh trong folder images, hãy chọn các file ảnh bạn đã đặt tên và lưu lại, các file có tên là zzzz... bạn hãy xóa bỏ.

Bước 4:
Tiếp theo là cắt lấy nền trong suốt và ảnh nền.
Dùng Slice vẽ vùng chọn hình vuông nhỏ khoản 2x2pixel > double click > đặt tên nts

Để có nền trong suốt bạn phải ẩn hình nền và background màu trắng > chọn File / Seve for Web and Devices... > chọn định dạng hình là: png-24 > Save

Tiếp theo bạn sẽ ẩn hình sản phẩm, menu, logo để lấy hình nền (nếu tinh ý bạn có thể chuyển hình nền lên trên cùng sẽ nhanh hơn). > Vẽ vùng chọn bằng Slice tool cho hình nền và đặt tên là bg.
Chọn Save for web and Devices > chọn định dạng file *.jpg > Save.

Bây giờ bạn hãy lưu các hình đã cắt vào folder images trong website.
Bạn thấy việc cắt giao diện web cũng khá đơn giản và lý thú, tuy nhiên đây là giao diện khá đơn giản. Trong thực tế giao diện sẽ khó hơn nhiều, vì thế bạn phải luyện thật cẩn thận cho trường hợp này trước đã. Ở phần tiếp theo tôi sẽ hướng dẫn các bạn cách layout giao diện bằng html và css.
Cảm ơn các bạn đã quan tâm đến bài viết này, hãy nhận xét, đánh giá và góp ý cho bài viết để chúng tôi phục vụ các bạn đọc tốt hơn. Vui lòng dùng tiếng Việt có dấu, chúng tôi sẽ phản hồi lại ngay khi Online.
 
Mọi thắc mắc các bạn cứ Comment tại đây nhé, hoặc tham gia Nhóm Học và tuyển dụng chuyên ngành Đồ họa và Dựng phim
http://facebook.com/dohoadungphim
http://facebook.com/groups/dohoa247
http://youtube.com/dohoa247
Ad: Lâm Văn Tư - 090 885 0697 

Read More

Phần 3: Layout web với HTML & CSS

Ở phần 2 bạn đã cắt giao diện chọ web và kết quả thu được là chỉ là 1 folder hình. ở phần này, tôi sẽ trình bày cách chuyển hình ảnh thành trang web tĩnh sử dụng ngôn ngữ HTML và CSS với phần mềm hỗ trợ thiết kế là Adobe Dreamweaver. Sau khi hoàn thành bước này bạn sẽ có được một trang web tĩnh hoàn chỉnh để Upload lên hosting của mình.
Để chuẩn bị cho phần thực hành này bạn phải chuẩn bị folder site_shop_hoatuoi và tạo site trong dreamweaver.

Bước 1:
Tạo site Shop_hoatuoi
Trước hết bạn khởi động Adobe Dreamweaver > chọn site / new site > đặt tên cho site như hình > click next.

Check chọn No, … như hình > next

Ở bảng này bạn chọn Edit local copies… và chọn folder site_shop_hoatuoi > next

Tiếp theo bạn chọn None / next > nhấn Done để tạo Site.

Trong site bạn tạo 2 file: index.html và myCSS.css để định dạng tài liệu.

Bước 2:
Trình bày layout chính cho trang index
Để xây dựng trang web, trước tiên ở trang index bạn cần tạo ra các khung div để chứa các thành phần của trang. Với layout như phần thiết kế trên PSD, tôi sẽ tạo các khung div chính như sau:
Index.html

Trong đó:
# main - giữ tất cả các nội dung của trang
.top - chứa logo, ngôn ngữ
.menu – chứa menu top
.left – giữ menu left
.right – chứa sản phẩm, banner quảng cáo
.footer – lưu nội dung footer
myCSS.css

Kết quả layout trang index.html như hình

 Bước 3:

Trình bày phần header (top)

Html phần top

Css phần top

Phần menu top
Html cho menu top

CSS cho menu top

 


Nhấn F12 > xem kết quả

Bước 4:
Trình bày các sản phẩm và banner quảng cáo ở cột phải.
Html cho banner quảng cáo và sản phẩm

Css cho phần sản phẩm

Nhấn F12 để xem kết quả

Bước 5:
Trình bày menu left
Tương tự phần html cho menu left như sau:

Css cho menu left

Thêm form đăng nhập cho ở menu left

Phần footer bạn thực hiện tương tự

Bây giờ bạn hãy nhấn F12 để xem kết quả trên trình duyệt web

Cảm ơn các bạn đã quan tâm đến bài viết này, hãy nhận xét, đánh giá và góp ý cho bài viết để chúng tôi phục vụ các bạn đọc tốt hơn. Vui lòng dùng tiếng Việt có dấu, chúng tôi sẽ phản hồi lại ngay khi Online.
Mọi thắc mắc các bạn cứ Comment tại đây nhé, hoặc tham gia Nhóm Học và tuyển dụng chuyên ngành Đồ họa và Dựng phim
http://facebook.com/dohoadungphim
http://facebook.com/groups/dohoa247
http://youtube.com/dohoa247
Ad: Lâm Văn Tư - 090 885 0697

Read More