Tin tức

Thiết kế web: Lập trình HTML5 với JavaScrript và CSS3 - phần 1

28/06/2013

 Tổng quan:
• Trong phần này bạn sẽ tìm hiểu tổng quan về HTML trong việc thiết kế web.
• Tổng quan về CSS trong việc thiết kế web.
• Tạo một ứng dụng Web sử dụng Visual Studio 2012.
Hầu hết việc thiết kế web hiện đại nhất được xây dựng trên nền tảng của các trang HTML mô tả nội dung mà người dùng đọc và tương tác, các bảng kiểu (style sheet) giúp cho nội dung trực quan, và mã JavaScript để cung cấp một mức độ tương tác giữa người dùng và trang, và trang web và máy chủ . Trình duyệt web sử dụng mã đánh dấu HTTML và các bảng kiều  để tạo ra nội dung, và chạy mã JavaScript để thực hiện các hành vi của các ứng dụng. Phần này này giới thiệu cơ bản về HTML và CSS, và các công cụ mà khóa học thiết kế web với html5 sử dụng javascrip và css3 để tạo ra các trang HTML và style sheets.

Mục tiêu:
Sau khi hoàn thành bài học này, bạn có thể:
- Giải thích cách sử dụng các thẻ html và các thuộc tính để xây dựng bố cục trang web.
- Giải thích cách sử dụng CSS để áp dụng các kiểu cơ bản cho trang web.
- Mô tả các công cụ mà Microsoft Visual Studio cung cấp để thực hiện thiết kế web và xây dựng các ứng dụng web

Bài học 1: Tổng quan về HTML
HTML là ngông ngữ web xuất bản từ năm 1992. Trong bài học này, bạn sẽ tìm hiểu các nguyên tắc cơ bản của HTML, các trang HTML được cấu trúc như thế nào, và một số tính năng cơ bản có thể được thêm vào một trang HTML.

Mục tiêu bài học:
Sau khi hoàn thành bài học này, bạn sẽ có thể:
- Mô tả cấu trúc của một trang HTML.
- Giải thích các phần tử HTML cơ bản và các thuộc tính.
- Tạo và đánh dấu một trang HTML có chứa yếu tố văn bản một cách chính xác.
- Hiển thị đồ họa trong một trang HTML sử dụng các yếu tố hình ảnh, và các trang liên kết với nhau bằng cách sử dụng các yếu tố neo (anchor).
- Tạo trang một trang biểu mẫu HTML.
- Tích hợp JavaScript coode vào một trang HTTML.
HTML là viết tắt của Hypper Text Markkup Language. Nó là một ngôn ngữ tĩnh xác định cấu trúc và ngữ nghĩa của một trang web. Bạn sử dụng HTML để tạo nội dung và siêu dữ liệu mà các trình duyệt sử dụng để tạo và hiển thị thông tin. Nội dung HTML có thể bao gồm văn bản, hình ảnh, âm thanh, video, biểu mẫu, danh sách, bảng biểu, và nhiều mục tin khác. Một trang HTML cũng có thể chứa siêu liên kết, trong đó kết nối các trang với nhau và với các trang web và các nguồn tài nguyên ở những nơi khác trên Internet.

Mỗi trang HTML có cùng cấu trúc cơ bản: 
•  Một khai báo DOCTYPE chỉ ra phiên bản của HTML mà trang sử dụng. 
• Một phần html chứ các thành phần sau: 
               + Phần tiêu đề (header) chứa thông tin về trang cho trình duyệt. Bao gồm ngôn ngôn ngữ chính (English, Chinese, French,.v.v),,  tập các ký tự,  kết hợp với các tệp style sheet  và script, thông tin tác giả, các từ khóa cho bộ máy tìm kiếm.
               +  Phần thân (body) chứa tất cả nội dung của trang có thể xem. 
Điều này đúng cho tất cả các phiên bản của HTML và bao gồm cả HTML5.
Một trang web HTML5 nên bao gồm một khai báo DOCTYPE, và một thẻ <html> lần lượt có chứa một phần tử <head> bao gồm tiêu đề và ký tự của trang và thẻ <body> chứa nội dung.
Cấu trúc tối thiểu của một trang
           
<!DOCTYPE html>
           <html lang=”en”>
             <head>
                <meta charset=utf-8 />
                <title>The Smallest Page</title>
             </head>
             <body>
             </body>
           </html>
Mã ví dụ trên sử dụng khai báo DOCTYPPE cho HTML5
Bạn nên viết tất cả các trang web mới bằng cách sử dụng HTML5, nhưng bạn muốn xem các trang web được viết  bằng phiên bản HTML 4.01 hoặc trước nữa. Nhìn chung các trang không viết dựa trên HTML5 thường sử dụng một trong các lớp sau đây của DOCTYPE:
• Transitional DOCTYPEs, cho phép sử dụng các yếu tố phản ánh,  liên quan đến trình bày từ phiên bản trước của HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"      "http://www.w3.org/TR/html4/loose.dtd>
     
• Frameset DOCTYPEs, cho phép sử dụng các khung bổ sung cho các yếu tố được phép bởi DOCTYPE. 
       
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"        "http://www.w3.org/TR/html4/frameset.dtd">
• Strict DOCTYPEs, Không cho phép sử dụng các khung  hoặc các yếu tố được phản ánh từ phiên bản trước của HTML. 
       
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd">


Tóm lại, nếu bạn không thể sử dụng DOCTYPE HTML5 bạn nên sử dụng chặt chẽ DOCTYPE HTML 4.01. Nếu một tập tin HTML không có DOCTYPE, các trình duyệt có thể sử dụng giá trị riêng của nó và có thể làm cho trang web của bạn không nhất quán, vì vậy điều quan trọng là bao gồm DOCTYPE.

Hết phần 1

Quý khách có nhu cầu Đào tạo ASP.NETThiết kế web, Lập trình web , học thiết kế web hãy liên hệ với chúng tôi để được tư vấn và hỗ trợ thông tin đào tạo một cách tốt nhất!
Email: dungdq@esvn.com.vn
ĐT: 098-953.2900

Công ty Cổ phần Eastern Sun Việt Nam