And Then There’s HTML5

As useful as all these additions to the web standards became, they were not enough for ever
more ambitious developers. For example, there was still no simple way to manipulate
graphics in a web browser without resorting to plug-ins such as Flash. And the same went
for inserting audio and video into web pages. Plus, several annoy‐ ing inconsistencies had
crept into HTML during its evolution.
So, to clear all this up and take the Internet beyond Web 2.0 and into its next itera‐ tion, a
new standard for HTML was created to address all these shortcomings. It was called
HTML5 and it began development as long ago as 2004, when the first draft was drawn up
by the Mozilla Foundation and Opera Software (developers of two popular web browsers).
But it wasn’t until the start of 2013 that the final draft was submitted to the World Wide
Web Consortium (W3C), the international governing body for web standards.
With nine years for it to develop, you might think that would be the end of the speci‐
fication, but that’s not how things work on the Internet. Although websites come and go at
great speed, the underlying software is developed slowly and carefully, and so the stable
recommendation for HTML5 is expected only after this edition of the book has been
published—in late 2014. And then guess what? Work will move on to ver‐ sions 5.1 and
higher, beginning in 2015. It’s a never-ending cycle of development.
However, while HTML5.1 is planned to bring some handy improvements (mainly to the
canvas), basic HTML5 is the new standard web developers now need to work to, and it
will remain in place for many years to come. So learning everything you can about it now
will stand you in very good stead.
 <style>
p{
text-align:justify;
font-family:Helvetica;
}
</style>
Các quy tắc này sẽ thay đổi căn chỉnh văn bản mặc định của thẻ <p> để các đoạn văn trong
thẻ được căn chỉnh hoàn toàn và sẽ sử dụng phông chữ Helvetica.
Như bạn sẽ tìm hiểu trong Chương 18, có nhiều cách khác nhau để bạn có thể đặt ra các
quy tắc CSS và bạn cũng có thể sử dụng hỗn hợp chúng trực tiếp trong các thẻ hoặc lưu
một bộ quy tắc vào một tệp bên ngoài để tải riêng. Tính linh hoạt này không chỉ cho phép
bạn tạo kiểu chính xác cho HTML của mình mà còn có thể (ví dụ) cung cấp chức năng di
chuột tích hợp để tạo hoạt ảnh cho các đối tượng khi con chuột lướt qua chúng. Bạn cũng
sẽ học cách truy cập tất cả các thuộc tính CSS của một phần tử từ JavaScript cũng như
HTML.

HTML5
Khi tất cả những bổ sung này trở nên hữu ích cho các tiêu chuẩn web, chúng dường như là
không đủ cho các nhà phát triển. Ví dụ, vẫn không có cách nào đơn giản để thao tác đồ họa
trong trình duyệt web mà không cần đến các trình cắm thêm như Flash. Và việc chèn âm
thanh và video vào các trang web cũng vậy. Ngoài ra cũng đã có một số mâu thuẫn đã xuất
hiện trên HTML trong quá trình phát triển của nó.
Vì vậy, để xóa tất cả những điều này và đưa Internet vượt ra ngoài Web 2.0 và trong lần
lặp lại tiếp theo của nó, một tiêu chuẩn mới cho HTML đã được tạo ra để giải quyết tất cả
những thiếu sót này. Nó được gọi là HTML5 và bắt đầu được phát triển từ khoảng năm
2004, khi bản thảo đầu tiên được soạn thảo bởi Mozilla Foundation và Opera Software (nhà
phát triển của hai trình duyệt web phổ biến). Nhưng phải đến đầu năm 2013, bản dự thảo
cuối cùng mới được đệ trình lên cơ quan quản lý quốc tế về các tiêu chuẩn web - World
Wide Web Consortium (W3C).
Với chín năm phát triển, bạn có thể nghĩ rằng đó sẽ là phần cuối của thông số kỹ
thuật, nhưng đó không phải là cách mọi thứ hoạt động trên Internet. Mặc dù các
trang web được truy cập và rời đi với tốc độ nhanh, phần mềm cơ bản được phát
triển một cách chậm rãi và cẩn thận. Và do đó, đề xuất ổn định cho HTML5 chỉ được
mong đợi sau khi ấn bản này của cuốn sách được xuất bản vào cuối năm 2014. Và
sau đó công việc sẽ chuyển sang phiên bản 5.1 trở lên, bắt đầu từ năm 2015. Đó là
một chu kỳ phát triển không bao giờ kết thúc.
Tuy nhiên, trong khi HTML5.1 được lên kế hoạch để mang lại một số cải tiến hữu
ích (chủ yếu cho canvas), thì HTML5 cơ bản là tiêu chuẩn mới mà các nhà phát triển
web hiện nay cần phải làm việc và nó sẽ vẫn tồn tại trong nhiều năm tới. Vì vậy, tìm
hiểu về nó ngay bây giờ sẽ giúp bạn có được vị thế rất tốt.
There’s actually a great deal of new stuff in HTML (and quite a few things that have been
changed or removed), but in summary, here’s what you get:
Markup
Including new elements such as <nav> and <footer>, and deprecated elements like
<font> and <center>.
New APIs
Such as the <canvas> element for writing and drawing on a graphics canvas, <audio>
and <video> elements, offline web applications, microdata, and local storage.
Applications
Including two new rendering technologies: MathML (Math Markup Language) for
displaying mathematical formulae and SVG (Scalable Vector Graphics) for creating
graphical elements outside of the new <canvas> element. However, MathML and SVG are
somewhat specialist, and are so feature-packed they would need a book of their own, so I
don’t cover them here.
All these things (and more) are covered in detail starting in Chapter 22.
One of the little things I like about the HTML5 specification is that
XHTML syntax is no longer required for self-closing elements. In the past,
you could display a line break using the <br> element. Then, to ensure
future compatibility with XHTML (the planned replacement for HTML
that never happened), this was changed to <br />, in which a closing /
character was added (since all ele‐ ments were expected to include a closing
tag featuring this character). But now things have gone full circle, and you can
use either version of these types of element. So, for the sake of brevity and
fewer keystrokes, in this book I have reverted to the former style of <br>,
<hr>, and so on.

The Apache Web Server

In addition to PHP, MySQL, JavaScript, CSS, and HTML5, there’s a sixth hero in the
dynamic Web: the web server. In the case of this book, that means the Apache web server.
We’ve discussed a little of what a web server does during the HTTP server/ client
exchange, but it does much more behind the scenes.
For example, Apache doesn’t serve up just HTML files—it handles a wide range of files
from images and Flash files to MP3 audio files, RSS (Really Simple Syndication) feeds,
and so on. To do this, each element a web client encounters in an HTML page is also
requested from the server, which then serves it up.
But these objects don’t have to be static files such as GIF images. They can all be gen‐
erated by programs such as PHP scripts. That’s right: PHP can even create images and
other files for you, either on the fly or in advance to serve up later.
Trên thực tế, có rất nhiều thứ mới trong HTML (và khá nhiều thứ đã được thay đổi hoặc
xóa), nhưng tóm lại, đây là những gì bạn nhận được:
Đánh dấu
Bao gồm các phần tử mới như <nav> và <footer> và các phần tử không dùng nữa như <font>
và <center>.
API mới
Chẳng hạn như phần tử <canvas> để viết và vẽ trên canvas đồ họa, phần tử <audio> và
<video>, ứng dụng web ngoại tuyến, vi dữ liệu và bộ nhớ cục bộ.
Các ứng dụng
Bao gồm hai công nghệ kết xuất mới: MathML - Math Markup Language (Ngôn ngữ đánh
dấu toán học) để hiển thị các công thức toán học và SVG - Scalable Vector Graphics (Đồ
họa Véc tơ có thể mở rộng) để tạo các phần tử đồ họa bên ngoài phần tử <canvas> mới.
Tuy nhiên, MathML và SVG có phần chuyên biệt và có nhiều tính năng nên sẽ cần một
cuốn sách của riêng, vì vậy tôi sẽ không trình bày ở đây.
Tất cả những điều này (và nhiều phần khác) sẽ được đề cập chi tiết bắt đầu từ Chương 22.
Một trong những điều tôi thích về đặc tả HTML5 là cú pháp XHTML không
còn bắt buộc đối với các phần tử tự đóng. Trước đây, bạn có thể hiển thị ngắt
dòng bằng phần tử <br>. Sau đó, để đảm bảo khả năng tương thích trong tương
lai với XHTML (sự thay thế theo kế hoạch cho HTML chưa từng xảy ra), điều
này đã được thay đổi thành <br />, trong đó một ký tự đóng / được thêm vào
(vì tất cả các phần tử đều được mong đợi bao gồm một thẻ đóng có ký tự này
). Nhưng bây giờ mọi thứ đã đi đầy đủ và bạn có thể sử dụng một trong hai
phiên bản của các loại phần tử này. Vì vậy, vì mục đích ngắn gọn và ít lần gõ
phím hơn, trong cuốn sách này, tôi đã hoàn nguyên về kiểu cũ là <br>, <hr>,
v.v.

Máy chủ Web Apache

Ngoài PHP, MySQL, JavaScript, CSS và HTML5, còn có một anh hùng thứ sáu trong Web
động: máy chủ web. Trong cuốn sách này, nó là máy chủ web Apache. Chúng ta đã thảo
luận một chút về những gì một máy chủ web thực hiện trong quá trình trao đổi máy chủ/máy
khách HTTP, nhưng nó còn làm được nhiều điều hơn ở phía sau.
Ví dụ, Apache không chỉ cung cấp các tệp HTML — nó xử lý nhiều loại tệp từ hình ảnh
và tệp Flash đến tệp âm thanh MP3, nguồn cấp dữ liệu RSS (nguồn cấp dữ liệu thực sự đơn
giản - Really Simple Syndication), v.v. Để thực hiện điều này, mỗi phần tử mà ứng dụng
khách web gặp trong một trang HTML cũng được yêu cầu từ máy chủ, sau đó máy chủ sẽ
phục vụ nó.
Nhưng những đối tượng này không nhất thiết phải là tệp tĩnh, chẳng hạn như ảnh GIF. Tất
cả chúng đều có thể được tạo bởi các chương trình như tập lệnh PHP. PHP thậm chí có thể
tạo hình ảnh và các tệp khác cho bạn, ngay lập tức hoặc trước để phân phát sau.
To do this, you normally have modules either precompiled into Apache or PHP or
called up at runtime. One such module is the GD (Graphics Draw) library, which PHP
uses to create and handle graphics.
Apache also supports a huge range of modules of its own. In addition to the PHP module,
the most important for your purposes as a web programmer are the modules that handle
security. Other examples are the Rewrite module, which enables the web server to handle
a varying range of URL types and rewrite them to its own internal requirements, and the
Proxy module, which you can use to serve up often-requested pages from a cache to ease
the load on the server.
Later in the book, you’ll see how to use some of these modules to enhance the fea‐ tures
provided by the three core technologies.

About Open Source

Whether or not being open source is the reason these technologies are so popular has often
been debated, but PHP, MySQL, and Apache are the three most commonly used tools in
their categories. What can be said definitively, though, is that their being open source
means that they have been developed in the community by teams of pro‐ grammers writing
the features they themselves want and need, with the original code available for all to see
and change. Bugs can be found and security breaches can be prevented before they happen.
There’s another benefit: all these programs are free to use. There’s no worrying about
having to purchase additional licenses if you have to scale up your website and add more
servers. And you don’t need to check the budget before deciding whether to upgrade to the
latest versions of these products.

Bringing It All Together

The real beauty of PHP, MySQL, JavaScript (sometimes aided by jQuery or other
frameworks), CSS, and HTML5 is the wonderful way in which they all work together to
produce dynamic web content: PHP handles all the main work on the web server, MySQL
manages all the data, and the combination of CSS and JavaScript looks after web page
presentation. JavaScript can also talk with your PHP code on the web server whenever it
needs to update something (either on the server or on the web page). And with the powerful
new features in HTML5, such as the canvas, audio and video, and geolocation, you can
make your web pages highly dynamic, interactive, and multimedia-packed.
Without using program code, let’s summarize the contents of this chapter by looking at the
process of combining some of these technologies into an everyday Ajax feature that many
websites use:

Để làm điều này, bạn thường có các mô-đun được biên dịch sẵn thành Apache hoặc PHP
hoặc được gọi trong thời gian chạy. Một trong những mô-đun như vậy là thư viện GD
(Graphics Draw), mà PHP sử dụng để tạo và xử lý đồ họa.
Apache cũng hỗ trợ một loạt các mô-đun của riêng nó. Ngoài mô-đun PHP, điều quan trọng
nhất cho mục đích của bạn với tư cách là một lập trình viên web là các mô-đun xử lý bảo
mật. Các ví dụ khác là mô-đun viết lại (Rewrite module), cho phép máy chủ web xử lý
nhiều loại URL khác nhau và viết lại chúng theo các yêu cầu nội bộ của riêng nó và mô-
đun Proxy (Proxy module), bạn có thể sử dụng để phân phát các trang thường được yêu
cầu từ bộ nhớ cache để dễ dàng tải trên máy chủ.
Ở phần sau của cuốn sách, bạn sẽ thấy cách sử dụng một số mô-đun này để nâng cao các
tính năng được cung cấp bởi ba công nghệ cốt lõi.

Giới thiệu về mã nguồn mở

Người ta thường tranh luận về lý do khiến những công nghệ này trở nên phổ biến. Việc có
phải là mã nguồn mở hay không là một trong số các lý do đó. Nhưng PHP, MySQL và
Apache là ba công cụ được sử dụng phổ biến nhất trong danh mục của chúng. Tuy nhiên,
điều có thể nói rằng chúng là mã nguồn mở đồng nghĩa với việc chúng đã được phát triển
trong cộng đồng bởi các nhóm lập trình viên viết ra các tính năng mà bản thân họ muốn và
cần, với mã gốc có sẵn cho tất cả mọi người xem và thay đổi. Các lỗi có thể được tìm thấy
và các vi phạm bảo mật có thể được ngăn chặn trước khi chúng xảy ra.
Ngoài ra, tất cả các chương trình này đều được sử dụng miễn phí. Không cần lo lắng về
việc phải mua thêm giấy phép nếu bạn phải mở rộng quy mô trang web của mình và thêm
nhiều máy chủ hơn. Và bạn không cần phải kiểm tra ngân sách trước khi quyết định có
nâng cấp lên phiên bản mới nhất của những sản phẩm này hay không.

Gắn kết
Vẻ đẹp thực sự của PHP, MySQL, JavaScript (đôi khi được hỗ trợ bởi jQuery hoặc các
khung khác), CSS và HTML5 là cách tuyệt vời mà tất cả chúng làm việc cùng nhau để tạo
ra nội dung web động: PHP xử lý tất cả công việc chính trên máy chủ web, MySQL quản
lý tất cả dữ liệu và sự kết hợp của CSS và JavaScript sẽ giúp bạn trình bày trang web.
JavaScript cũng có thể nói chuyện với mã PHP của bạn trên máy chủ web bất cứ khi nào
nó cần cập nhật thứ gì đó (trên máy chủ hoặc trên trang web). Và với các tính năng mới
mạnh mẽ trong HTML5, chẳng hạn như canvas, âm thanh và video và vị trí địa lý, bạn có
thể làm cho các trang web của mình trở nên động, tương tác và đa phương tiện cao.
Không sử dụng mã chương trình, hãy tóm tắt nội dung của chương này bằng cách xem xét
quá trình kết hợp một số công nghệ này vào một tính năng Ajax hàng ngày mà nhiều trang
web sử dụng: