Tải bản đầy đủ (.docx) (23 trang)
  1. Trang chủ
    2. >>
  2. Luận Văn - Báo Cáo
    3. >>
  3. Công nghệ thông tin

Tìm hiểu HTML5 và xây dựng một trang web đơn giản bằng HTML5

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (420.55 KB, 23 trang )

Đại Học Bách Khoa Hà Nội
Viện Công Nghệ Thông Tin Và Truyền Thông

Báo cáo bài tập lớn môn
MẠNG MÁY TÍNH
Đề số 4: Tìm hiểu HTML5 và xây dựng một trang web đơn
giản bằng HTML5

Giảng viên: ThS. Bùi Trọng Tùng
Hà Nội-2015


Mạng máy tính 2015

MỤC LỤC

1. HTML là gì?
1.1. Giới thiệu.
HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là “ngôn ngữ đánh
dấu siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế để tạo nên các trang web với
các mẩu thông tin được trình trên World Wide Web. HTML đã trở thành một chuẩn
Internet do tổ chức World Wide Web Consortium (W3C) duy trì.
Phiên bản chính thức mới nhất của HTML là 4.01 (1999). Sau đó các nhà phát triển đã
thay thế nó bằng XHTML. Hiện nay HTML đang được phát triển tiếp với phiên bản
HTML5 hứa hẹn mang lại diện mạo mới cho Web.

Trang 2


Mạng máy tính 2015


HTML không phải là một ngôn ngữ lập trình, nó là ngôn ngữ đánh dấu sử dụng các
thẻ HTML để biễu diễn trang web.
Mỗi tài liệu HTML (HTML document) là một trang web.
Các thẻ HTML còn được gọi là các phần tử HTML (hay HTML element)
1.2. Lịch sử.
Ngày nay, HTML đã trở thành ngôn ngữ chủ yếu để xây dựng, thiết kế các trang web.
HTML được tạo lần đầu tiên bởi Berners-Lee năm 1991 nhưng phiên bản “HTML 2.0” là
chuẩn HTML đầu tiên được công bố chính thức năm 1995. HTML 4.01 là một phiên bản
lớn của HTML được công bố năm 1999 và là phiên bản được sử dụng rộng rãi nhất cho
đến tận ngày nay. Hiện tại chúng ta có phiên bản HTML5 là một sự mở rộng của HTML
4.01 và đã được công bố chính thức vào năm 2012.

1.3. Cấu trúc tài liệu HTML
Một tài liệu HTML thường có cấu trúc như sau.

Trang 3


Mạng máy tính 2015

Một tài liệu HMTL phải bắt đầu bằng thẻ <html>, và thường được chia thành 2 phần
chính là phần đầu (header) và phần thân (body).
Phần header bao gồm các thông tin về tài liệu, như là bộ ký tự sử dụng, tiêu để của
trang web, những liên kết đến file được sử dụng trong tài liệu như CSS hoặc javascript…
Phần body trình bày nôi dung trang web.
1.4. HTML Tags
Như đã nói trước đó, HTML là một ngôn ngữ đánh dấu, sử dụng các thẻ khác nhau để
định đạng nội dung.
HTML tag là từ khóa (tag name) được bao quanh bởi cặp dấu mở (<) và đóng (>).


• HTML tag thường đi theo cặp
• Thẻ đầu tiên được gọi là thẻ bắt đầu (start tag) và thẻ thứ 2 được gọi là thẻ kết
thúc (end tag)
• Thẻ kết thúc được viết tương tự thẻ bắt đầu nhưng them đấu gạch chéo (/) trước
tên thẻ.

Trang 4


Mạng máy tính 2015

1.5. XHTML.
XHTML (viết tắt của tiếng Anh Extensible HyperText Markup, “ngôn ngữ đánh dấu
siêu văn bản mở rộng”) là một ngôn ngữ đánh dấu có cùng khả năng như HTML, nhưng
có cú pháp chặt chẽ hơn.
Nỗ lực tách phần nội dung ra khỏi phần hình thức trình bày của trang HTML đã đưa
đến sự xuất hiện của các chuẩn mới như XHTML. Các chuẩn này nhấn mạnh vào việc sử
dụng thẻ đánh dấu vào việc xác định cấu trúc tài liệu như phần đề mục, đoạn văn, khối
văn bản trích dẫn và các bảng chứ không khuyên dung các thẻ đánh dấu mang tính chất
trình bày trực quan như <font>, <b>. Những mã mang tính chất trình bày đó đã được loại
bỏ khỏi HMTL4.01 Strict và các đặc tả XHTML nhằm tạo điều kiện cho CSS. CSS cung
cấp một giải pháp nhằm giúp tách cấu trúc HTML ra khỏi phần trình bày nội dung của nó.
Một số điểm khác biệt giữa HTML và XHTML
• Các phần tử phải được lồng nhau đúng cách: Trong HTML các phần tử có
thể được lồng nhau không đúng thứ tự nhưng trong XHTML không cho phép
điều đó.
• Phải có đặt ở dạng chuẩn (well formed): Tất cả các phần tử XHTML phải
được đặt lồng bên trong phần tử gốc <html>. Tất cả các phần tử khác có thể có
các phần tử con. Các phần tử con phải đi theo cặp và phải được đặt lồng nhau
đúng cách bên trong phần tử mẹ.

• Tên gọi của thẻ đều phải viết thường: Do XHTML kế thừa cú pháp của XML
và mỗi trang XHTML có phần biệt chữ hoa chữ thường, điều này không có
trong HTML.
• Tất cả các phần tử phải được đóng: Trong HTML chấp nhận một số phần tử
không phải đóng nhưng XHTML yêu cầu tất cả các thẻ phải được đóng.
• Các giá trị của thuộc tính phải được đặt trong dấu nháy kép: HTML chấp
nhận một số thuộc tính có thể không đặt trong dấu nháy kép nhưng XHTML
yêu cầu phải thực hiện điều này.
• Việc tối giản thuộc tính là bị nghiêm cấm.
1.6. DHTML
HTML động hay DHTML (viết tắt tiếng Anh: Dynamic HTML) là một thể hiện của việc
tạo ra một trang Web bằng cách kết hợp các thành phần: ngôn ngữ đánh dấu HTML tĩnh,
ngôn ngữ kịch bản máy khách (như javascript) và ngôn ngữ trình diễn CSS và DOM.

Trang 5


Mạng máy tính 2015

2. HTML5.
2.1. Giới thiệu.
HTML5 là thế hệ thứ 5 của ngôn ngữ HTML, xuất hiện vào tháng 12 năm 2012, là
một ứng viên được giới thiệu bởi W3C. Mục tiêu cốt lõi khi thiết kế ngôn ngữ là cải thiện
khả năng hỗ trợ cho đa phương tiện mới nhất trong khi vẫn giữ nó dễ dàng đọc được bởi
con người và luôn hiểu được bởi các thiết bị và các chương trình máy tính như trình duyệt
web.
HTML vẫn giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi
trội của XHTML, DOM cấp 2, đặc biệt là JavaScript.
Là phiên bản tiếp sau của HTML 4.01, 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. Đây là một nỗ lực để
xác định một ngôn ngữ đánh dấu duy nhất có thể được viết bằng cú pháp HTML hoặc
XHTML. Nó bao gồm các mô hình xử lý chi tiết để tang tính tương thích, mở rộng, cải
thiện và chuẩn hóa các đánh dấu có sẵn cho tài liệu, và đưa ra các đánh dấu mới và giới
thiệu giao diện lập trình ứng dụng (API) để tạo ra các ứng dụng web phức tạp. Cùng một
lý do như vậy, HTML5 là một ứng viên tiềm năng cho nền tảng di động.
Đặc biệt HTML5 có thêm nhiều tính năng cú pháp mới. Chúng bao gồm các thẻ mới
như <video>, <audio> và các thành phần <canvas>, cũng như sự tích hợp các đồ họa
vector có khả năng mở rộng nội dung và MatML cho các công thức toán học. Những tính
năng này được thiết kế để làm cho nó dễ dàng bao quát, xử lý đa phương tiện và nội dung
đồ họa trên Web mà không cần phải dùng đến quền sở hữu bổ sung và APIs.
Các yếu tố mới khác như, <section>, <article>, <header>, <nav> được thiết kế để làm
phong phú thêm nội dung ngữ nghĩa của tài liệu. HTML5 cũng xác định cụ thể một số các
xử lý cần thiết cho các tài liệu không hợp lệ để các lỗi cú pháp sẽ được xử lý thống nhất
của tất cả các trình duyệt phù hợp và các tác nhân người dùng khác.
2.2.

Những điểm mới trong HTML5

2.2.1. Khai báo DOCTYPE trong HMTL5 là rất đơn giản.
Khai báo <!DOCTYPE> phải được đặt đầu tiên trong tài liệu HTML trước cả thẻ
<html>
Khai báo <!DOCTYPE> không phải là một thẻ HTML, nó là câu lệnh để trình duyệt
web biết về phiên bản HTML được sử dụng để viết tài liệu.
Trang 6


Mạng máy tính 2015


Trong HTML 4.01 khai báo <!DOCTYPE> tham chiếu đến DTD, bởi vì HTML 4.01
dựa trên SGML. DTD xác định những cú pháp, quy định cho ngôn ngữ đánh dấu, dựa vào
đó để trình duyệt sinh ra nội dung chính xác.
HTML5 không dựa trên SGML, do đó không yêu cầu tham chiếu đến DTD.
Khai báo <!DOCTYPE> trong HTML5

Khai báo <!DOCTYPE> trong HTML4.01 Strict

Khai báo <!DOCTYPE> trong XHTM1.1

2.2.2. Cấu trúc văn bản
HTML4
HTML4 sử dụng các thẻ div để cấu trúc văn bản.

HTML5
HTML5 sử dụng một bộ các thẻ để xác định rõ hơn các khối nội dung chính để cấu trúc
một văn bản.

Trang 7


Mạng máy tính 2015

Html5 sekleton

tag
<article>
<aside>
<dbi>

<details>
<dialog>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<menuitem>
<meter>
<nav>

<section>

description
Định nghĩa một mục nội dung trong tài liệu
Định nghĩa nội dung phần bên cạnh nội dung trang web
Định nghĩa một phần text có thể được định dạng khác hướng với
những text khác.
Định nghĩa một phần phụ thêm mà người dùng có thể hiển thị hoặc
ẩn.
Định nghĩa một hộp dialog hoặc cửa sổ
Định nghĩa tiêu đề của phần tử ảnh <figure>
Định nghĩa phần tử chứa ảnh, đồ thị…
Định nghĩa footer của văn bản hoặc một phần của văn bản
Định nghĩa header của văn bản hoặc một phần của văn bản
Định nghĩa nội dung chính của văn bản
Định nghĩa đoạn text được đánh dấu, nhấn mạnh, highlighted
Định nghĩa một menu item mà người dùng có thể gọi từ một pupup
menu

Định nghĩa tỷ lệ trong một phạm vi
Định nghĩa phần chứa các liên kết trong văn bản
Định nghĩa tiến trình của một nhiệm vụ
Định nghĩa một khu vực, một phần trong tài liệu
Trang 8


Mạng máy tính 2015

<summary>

Định nghĩa phần đầu nhìn thấy của thẻ <details>

2.2.3. New input types
HTML5 thêm nhiều thẻ định nghĩa kiểu input yêu cầu từ người dùng trong thẻ form. Ví
dụ nếu chúng ta thêm thuộc tính type = “email” vào thẻ input thì trình duyệt chỉ cho phép
user nhập vào định dạng hợp lệ của email.

Những kiểu input mới được giới thiệu trong HMTL5

Trang 9


Mạng máy tính 2015

2.2.4. New input attributes
HTML5 thêm nhiều thuộc tính mới của thẻ input, giúp người lập trình dễ dàng hiển thị
nội dung theo ý muốn.

Trang 10



Mạng máy tính 2015

Syntax
HTML5 cho phép 4 kiểu cú pháp khác nhau đối với sử dụng thuộc tính trong thẻ.
Ví dụ 4 kiểu cú pháp sử dụng thuộc tính trong thẻ input.

2.2.5. HTML5 Graphics
Canvas
Thẻ <canvas> được sử dụng để vẽ đồ họa trên trang web sử dụng javascript.
Canvas là một vùng hình chữ nhật trên trang web, mặc định sẽ không có viền (border) và
không có nội dung.
Cú pháp:

Canvas có một vài phương thức để vẽ đường thẳng, hình tròn, hình chữ nhật, text hoặc
thêm ảnh.
Ví dụ: vẽ một hình chữ nhật sử dụng javascript

HTML5 SVG
SVG là một ngôn ngữ để miêu tả 2D graphics trong XML.
SVG là dựa trên XML, nghĩa là mỗi phần tử là có sẵn bên trong SVG DOM, bạn có thể
đính kèm xử lý sự kiện javascript cho một thành phần.

Trang 11


Mạng máy tính 2015

Trong SVG, mỗi hình vẽ được nhớ như một đối tượng, nếu thuộc tính của một đối tượng

SVG thay đổi, trình duyệt sẽ tự động vẽ lại.
So sánh Canvas và SVG
Canvas
Phục thuộc vào độ phân giải
Không hỗ trợ xử lý sự kiện
Nghèo nàn khả năng hiển thị text
Bạn có thể lưu ảnh dưới dạng .png hoặc
.jpg
Phù hợp với game graphic

SVG
Không phụ thuộc vào độ phân giải
Hỗ trợ xử lý sự kiện
Phù hợp với các ứng dụng có vùng hiển thị
lớn(google map)
Sinh ra chậm nếu nó phức tạp
Không phù hợp với ứng dụng game

2.2.6. New media elements
Video
Trước HMTL5 không có chuẩn để trình diễn video trên web. Video chỉ có thể chạy được
bằng cách sử dụng plugin (giống như flash).
Phần tử <video> xác định chuẩn nhúng video vào trang web.
Cú pháp:

Thuộc tính controls thêm vào có thể điều khiển video như chạy, dừng và âm lượng.
Hiện tại có 3 định dạng video được hỗ trợ là: MP4, WebM và Ogg:

Trang 12



Mạng máy tính 2015

Adio
Trước HMTL5, không có chuẩn để trình diễn audio trên web. File Audio chỉ có thể trình
diễn sử dụng plug-in (như flash).
Phần tử <audio> xác định chuẩn nhúng audio vào trang web.
Cú pháp:

Hiện tại có 3 định dạng file audio được hỗ trợ cho phần tử <audio> là: Mp3, Wav, và
Ogg.

New Media Elemts

Trang 13


Mạng máy tính 2015

3. Xây dựng webside.
3.1. Cấu trúc trang web
Trang web được xây dựng dựa trên cấu trúc sau:

• Phần header: Thể hiện tiêu đề chính của trang web
• Phần nav: trình bày những liên kết tới các phần nội dung chính của trang web
là các article
• Phần section: gồm nhiều article nhỏ, là thân chính thể hiện nội dung của trang
web.
• Phần article: chứa những phần nội dung được chia nhỏ của trang web.
• Phần aside: chứa ảnh, nội dung phụ thêm của trang web.

• Phần footer: thể hiện footer của trang web.

Trang 14


Mạng máy tính 2015

3.2.

Giao diện trang web.

3.3. HTML5 new input types and attributes
Giao diện

Trang 15


Mạng máy tính 2015

Code:
<article id = "NewInputTypes">
<header>


new input types and attributes


</header>
<form autocomplete="on">


First name:
<input type="text" name="firstname" required="">




Last name:
<input type="text" name="lastname" required="">



Email:
required="">



Phone Number:
<input type="tel" name="tel">



Trang 16


Mạng máy tính 2015


Birthday:
<input type="date" name="birthday">



<input type="submit" value="Submit">
<input type="reset" value="Clear">


</form>
</article>


3.4. HTML5 Graphics
Giao diện

Code
<article id = "Graphics">
<header>
Trang 17


Mạng máy tính 2015

HTML5 Graphics


</header>


<b>Canvas Example</b>
<button id="drawLineButton">
Draw Line
</button>
<button id="drawCircleButton">
Draw Circle
</button>
<button id="drawTextButton">
Draw Text
</button>
<button id="clearButton">
Clear
</button>





</canvas>


<script>

Trang 18


Mạng máy tính 2015

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var drawCircleButton = document.getElementById("drawCircleButton");
drawCircleButton.addEventListener("click", drawCircle);

var drawTextButton = document.getElementById("drawTextButton");
drawTextButton.addEventListener("click", drawText);

var drawLineButton = document.getElementById("drawLineButton");
drawLineButton.addEventListener("click", drawLine);

var clearButton = document.getElementById("clearButton");
clearButton.addEventListener("click", clear);

function drawCircle() {
ctx.beginPath();

ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
}

function drawLine() {

ctx.moveTo(0, 0);
Trang 19


Mạng máy tính 2015

ctx.lineTo(200, 100);
ctx.stroke();
}

function drawText() {

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText("Hello World", 10, 50);
}

function clear() {
ctx.clearRect(0, 0, c.width, c.height);
}
</script>
</article>

3.5. HTML5 Media

Giao diện

Trang 20


Mạng máy tính 2015

Code
<article id = "Media">
<header>


HTML5 Media


</header>
<body>


Trước HTML5, không có chuẩn để trình diễn video và audio trên web

Trang 21


Mạng máy tính 2015

video và audio chỉ có thể được trình diễn sử dụng plugin (như flahs)




<b>Video</b>



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


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>



<b>Audio</b>



<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>


</body>
</article>
Trang 22


Mạng máy tính 2015

Tài liệu tham khảo.
• Internet & world wide web how to program, 5th, Paul Deitel, Harvey Deitel,
Abbey Deitel.
• Css3 the missing manual, 3th, David Sawyer McFarland
• />• />• />•

Trang 23




Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×