Khám phá HTML5: Hướng dẫn cơ bản về HTML5

Diem Do

 

Tôi luôn thích các phát triển ứng dụng web theo như quan điểm của một người chơi game, nhưng tôi không giỏi như ngôn ngữ C++. Vấn đề là ở đây là do “JavaScript”.

 

Thành thật mà nói, tôi đã làm việc với JavaScript trong nhiều nhiều năm trước đây, và nó cũng đã cảm thấy khiếp sợ tôi, tôi không thể quen với việc không có các con trỏ và các biến chứa một tập các thiết lập giữa những thứ khác. Tuy nhiên với tôi vấn đề chính là tốc độ, nếu tôi tạo ra một game thì tôi muốn đem đến một trải nghiệm tương tác tốt mà tốc độ tải không chậm trễ, tốc độ  frame không chậm và không truy cập một cách tinh ranh đến những thứ khác giống như việc phát lại và đưa vào các audio. Vì thế, trong nhiều năm, tôi tránh các mảng liên quan tới JavaScript và DOM từ khách hàng và đến với  Java Applets thì dường như là một trải nghiệm vô cùng tuyệt vời, cùng với tốc độ frame nhanh chóng và mượt mà có thể tiến hành trên 2D và 3D, có thể truy cập đến chế độ nhập xuất v.v… Nhưng theo như tôi nhớ thì có những vấn đề bảo mật trình duyệt, nó đột nhập hoặc là bỏ qua để tải về thông qua các phiên bản trình duyệt khác.

 

Sau một thời gian làm việc với applet, tôi đã chuyển sang Microsoft Silverlight trong vài năm, thực hiện một số việc tốt đẹp với nó nhưng sau đó Microsoft bỏ đi các hỗ trợ có lợi của HTM5! (Tôi có thể tha thứ cho Microsoft như thế nào !) Bây giờ tất cả mọi người dường như hướng tới HTML5 để hỗ trợ nó, vì vậy tôi cảm thấy đó là thời gian hạnh phúc tôi tiếp cận được công nghệ mới mẻ này và nhìn thấy những gì tôi làm với nó.

 

Blog này sẽ tổng quát những cố gắng của tôi để học cách sử dụng HTML5/JavaScript cùng với một ít ngôn ngữ PHP. Ở cuối một loạt các diễn đàn, tôi sẽ xem xét lại các bài viết và sắp xếp gọn gàng để tôi có thể đánh lừa một số nhà phát triển các ứng dụng nếu có thể.

 

Đó là một câu chuyện dài với những điều bổ ích.

 

HTML5 là gì?

 

Tôi vừa mới mua được rất nhiều cuốn sách về HTML5 khác nhau và bắt đầu đọc chúng, đã bổ sung những thiếu sót của tôi về C++ và Marmalade SDK. Qua những gì tôi tìm hiểu và đúc kết được thì với tôi HTML5 là:

 

– Nó sử dụng HTML5 mark-up để bắt đầu với một số “tag” mới được thêm vào để cung cấp việc truy cập đến các công cụ như việc phát lại một hình ảnh và video.

– CSS3 đó là một ngôn ngữ mà bạn sử dụng để thêm vào cac kiểu cho các trang HTML5 khác nhau.

– JavaScript là một ngôn ngữ được dùng để thao tác trong các trang HTML5 hoặc các yếu tố khác.

 

Tôi có thể tạo một trang HTML5 bằng cách nào?

 

Đơn giản chỉ là tạo một tập tin văn bản sử dụng bất kỳ các trình soạn thảo văn bản cũ nào (tôi sử dụng Notepad++ làm nổi bật các cú pháp trong HTML, CSS và JavaScript) và tôi gọi nó là html. Bạn có thể mở các tập tin trong trình duyệt để xem các trang dễ dàng như bà Brown cho biết.

 

Đây là một trang ví dụ về HTML5 :

 

 

Tất cả những nội dung này có nghĩa là gì? Bạn hãy nhìn vào các thành phần trong đó.Dòng

 

Dòng 1: Cho chúng ta biết đây là một tài liệu HTML5

 

Dòng 2: Thẻ <html> trong trình duyệt là thành phần gồm các đoạn mã chứa HTML

 

Dòng 3: Thẻ <head> là thẻ chứa chủ đề của trang như là các script và các kiểu định dạng

 

Dòng 4: Thẻ <meta> mô tả các siêu dữ liệu chẳng hạn như  các kí tự được thiết lập trong tài liệu

 

Dòng 5: Thẻ <title> là thẻ chứa chủ đề của trang, đây thường được hiển thị thường xuyên trong các thanh tiêu đề của trình duyệt

 

Dòng 6: Đóng thẻ <head>

 

Dòng 7: Thẻ <body> chứa các thành phần chính của tài liệu, cơ bản là tất các văn bản, hình ảnh v.v.

 

Dòng 8: Thẻ <h1> chỉ định bất cứ nội dung gì bên trong thẻ h1 là một tiêu đề cấp 1 và sẽ có kiểu như thẻ h1, thường thì có kích thước lớn và bôi đậm mà không được xác định lại kiểu chữ.

 

Dòng 9: Thẻ <p> thì bắt đầu lại một đoạn văn bản mới trong trang

 

Dòng 10: Nội dung được hiển thị bên trong đoạn văn

 

Dòng 11: Kết thúc đoạn văn bằng thẻ </p>

 

Dòng 12: Kết thúc phần thân chính của tài liệu </body>

 

Dòng 13: Kết thúc tài liệu html </html>

 

Tôi thêm một số kiểu định dạng cho trang web của tôi như thế nào ?

 

Để bắt đầu chúng tôi sẽ thêm vào một số kiểu cho ví dụ bên trên để hiểu dễ dàng hơn. Khi bạn rảnh rỗi thì hãy tạo một kiểu định dạng và liên kết nó cho tài liệu của bạn. Hãy xem xét một ví dụ dưới đây:

 

 

Nếu bạn tinh ý bạn có thể chú ý là có hai dòng trong đoạn code có thay đổi:

 

Dòng 8: Chúng tôi thêm vào một kiểu thuộc tính được bỏ trong dấu ngoặc kép. Về cơ bản, chúng tôi muốn thay đổi màu sắc cho văn bản trong thẻ <h1> thành màu xanh lá

 

Dòng 9: Chúng tôi cũng thêm vào một kiểu thuộc tính ở đây nhưng chuyển sang màu xanh dương

 

Thay vì đặt các kiểu định dạng trong một dòng thì phong các sử dụng của CSS của tôi là như thế nào ?

 

Hầu hết các các nhà phát triển phần mềm thích sử dụng kiểu định dạng để định dạng cho các phần tử trong trang web của mình, tôi nghĩ khi mà trang web của tôi trở nên cồng kềnh đến đáng sợ sẽ làm cho tôi thay cách nhìn đối với trang web của mình, tôi có cách làm việc mà không cần phải đến từng chỗ mỗi kiểu định dạng để thay đổi những gì tôi đã thiết lập. Một kiểu định dạng cơ bản là một tập tin .css mở rộng của văn bản trong tài liệu. Một kiểu định dạng có thể giống như thế này:

 

 

Trong kiểu định dạng trên, chúng tôi đặt trong thẻ tag <h1> và sau đó đặt một loạt các thuộc tính mà chúng tôi muốn xác định lại các giá trị được ngăn cách bởi dấu hai chấm trong dấu móc ngoặc. Nội dung trong tất cả các thẻ <h1> và <p> được thay đổi màu sắc trong trang, điều này thật tuyệt vời nếu đó là những gì mà bạn muốn nhưng sẽ không hay nếu bạn không muốn có nó.

 

Để thực hiện những việc này, bạn có thể đặt tên cho các phần tử của bạn và sau đó đơn giản là xác định kiểu định dạng cho các thẻ được đặt tên. Hãy xem một ví dụ:

 

 

Chúng tôi đặt tên thẻ <h1> đầu tiên là header1 sử dụng id của thuộc tính. Chúng ta có thể dựa vào các phần tử được đặt tên trong tập tin CSS bằng cách đặt một dấu thăng phía trước của tên.

 

Theo như tôi được biết bạn có thể làm việc với CSS bằng rất nhiều các công cụ, nhưng nếu tôi không đủ khéo léo để thực hiện những điều này bây giờ thì có thể tôi sẽ giới thiệu kĩ hơn trong bài báo sau.

 

Cách để tôi đưa các đoạn mã JavaScript vào trong trang web của tôi là như thế nào?

 

Có hai cách, bạn có thể sử dụng JavaScript bên trong, có nghĩa là các đoạn mã bạn viết trực tiếp trong tài liệu html, làm như vậy thì có thể bạn sẽ thấy lộn xộn, khó nhìn. Cũng có cách gọn gàng hơn và thân thiện hơn với người dùng thì bạn hãy để một tập tin JavaScript vào trong tài liệu giống như bạn làm với các kiểu định dạng. Đầu tiên bạn hãy nhìn vào đoạn JavaScript bên trong này. Chạy tập tin html sau:

 

 

Tại dòng 12-14 chúng ta chèn vào một thẻ <script> có một dòng script duy nhất. Đoạn script đó tìm kiếm phần tử được gọi là ‘header1’ và sau đó thay đổi thuộc tính màu sắc thành màu xanh dương.

 

Bây giờ chúng ta hãy xem một ví dụ mà chúng tôi thường hay sử dụng và quyết định đặt các đoạn code trong một tập tin riêng biệt. Tạo ra hai tập tin sau ( test.html và code.js ), sau đó mở tập tin html ra:

 

 

Tại dòng 12 của tập tin html chúng ta vẫn có một thẻ <script>, nhưng thay vì được chuỗi script của bạn bên trong thẻ <script> , thì chúng ta di chuyển đến một tập tin riêng của chính nó và lồng tập tin script vào tài liệu html.

Chia sẻ bài viết ngay

Nguồn bài viết : developer-tech.com