Chào mừng đến với Chiến Binh Full Stack

Giới thiệu HTML, CSS và Javascript

Bộ 3 ngôn ngữ HTML, CSS và Javascript đóng vai trò vô cùng quan trọng trong việc thiết kế website. Do vậy, mọi lập trình viên đều cần phải hiểu rõ về chúng.

HTML, CSS và Javascript được xem là bộ ba ngôn ngữ rất cần thiết đối với mọi lập trình viên web. Dù cho bạn muốn xây dựng nên một sản phẩm đơn giản hay phức tạp thì cũng đều không thể thiếu đi sự "góp mặt" của chúng.

Bài viết này sẽ cung cấp đến bạn những kiến thức cơ bản và cần thiết nhất trên con đường trở thành một lập trình viên web chuyên nghiệp.

Giới thiệu về HTML

HTML là gì?

HTML là chữ viết gọn của cụm từ "Hypertext Markup Language". Nó giúp người dùng tạo ra và cấu trúc những thành phần có trong website...

Đây không phải là một ngôn ngữ lập trình. Điều này cũng đồng nghĩa với việc HTML không có khả năng tạo ra những chức năng "động". Nó giống như Microsoft Word, chỉ được dùng để bố cục và định dạng website.

Xuất bản lần đầu tiên vào năm 1991 bởi Tim Berners-Lee, HTML đã nhanh chóng phổ biến trên toàn thế giới với tốc độ chóng mặt. Tính cho đến thời điểm hiện nay, HTML được xem như một chuẩn mực của công việc thiết kế website.

Giới thiệu HTML, CSS và Javascript

HTML hoạt động như thế nào?

HTML documents là toàn bộ tệp được kết thúc với đuôi ".html" hay ".htm", bạn có thể xem chúng thông qua bất kỳ trình duyệt nào hiện nay như Safari, Google Chrome...

Và trình duyệt sẽ đọc toàn bộ tệp HTML documents này, sau đó thì xuất bản nội dung lên nền tảng Internet sao cho người dùng có thể xem được nó.

Mỗi trang HTML chứa một bộ tag (element). Bạn có thể xem đó như là việc xây dựng từng khối cho một website. Nó tạo thành cấu trúc cây thư mục bao gồm section, paragraph, heading và những phần nội dung khác...

Các tag thông dụng của HTML

HTML tag bao gồm 02 loại chính là block-level và inline, trong đó:

  • Element block-level sẽ sử dụng toàn bộ không gian của trang web. 
  • Element inline chỉ chiếm một phần nhỏ trong toàn bộ không gian của trang web. Chúng thường được dùng để định dạng nội dung bên trong block-level. 

Block-Level Tag

03 block-level tag của mỗi trang HTML cần có là <html>, <head><body>:

  • <html></html> là element cao nhất, dùng để đóng gói mỗi trang HTML.
  • <head></head> chứa những thông tin meta như tiêu đề trang và charset...
  • <body></body> dùng để đóng gói tất cả nội dung sẽ hiện trên trang web.

Có tất cả 06 cấp độ trong HMTL, trải dài theo chiều trái qua phải lần lượt từ <h1></h1> tới <h6></h6>. Trong đó, h1 là cấp heading cao nhất và h6 là cấp heading thấp nhất.

Division là những khu vực lớn, chứa nhiều paragraph, image, blockquote và một số yếu tố khác. Chúng ta có thể đánh dấu chúng thông qua việc sử dụng <div></div>

Ngoài ra, bạn cũng có thể sử dụng <ol></ol> cho danh sách theo thứ tự, <ul></ul> cho danh sách không theo thứ tự và chúng đều cần phải được được đặt bên trong <li></liv>.

    Inline Tag

    Có rất nhiều inline tag được dùng để định dạng văn bản, ví dụ như:

    • <b></b> để định dạng chữ in đậm.
    • <i></i> để định dạng chữ in nghiêng.
    • <u></u> để định dạng chữ gạch chân.

    Bên cạnh đó, ảnh cũng được xem là inline tag. Bạn có thể chèn thông qua việc sử dụng mà không cần thẻ đóng, nhưng sẽ cần dùng đến attribute src để xác định nguồn.

    HTML5 - Phiên bản mới nhất của HTML

    Ngay từ phiên bản đầu tiên, HTML đã được đánh giá như là một phát minh vượt cả thời đại. 

    Chỉ tính cho đến thời điểm hiện tại, phiên bản mới và lớn nhất của HTML chính là HTML5, được phát hành vào năm 2014. Nó sở hữu nhiều tính năng hiện đại cực kỳ quan trọng.

    Một trong số những tính năng hấp dẫn nhất của HTML5 là có hỗ trợ audio và video.

    Thay vì sử dụng Flash Player, giờ đây, với HTML5, bạn chỉ cần nhúng video files và audio files vào trong trang web thông qua việc sử dụng cặp thẻ <video></video> hoặc <audio></audio>.

    Ngoài ra, nó cũng hỗ trợ thêm những tính năng mặc định như Scalable Vector Graphics (SVG) và MathML cho những công thức toán học...

    HTML5 có rất nhiều cải thiện về mặt ngôn ngữ. Những tags mới sẽ giới thiệu cho trình duyệt biết về mục đích chính của nội dung trong website là gì. Việc này có lợi cho cả người đọc và Search Engine.

    So với HTML, HTML5 có những ưu điểm nổi bật hơn như sau:

    • Hỗ trợ được nhiều ứng dụng hơn.
    • Sở hữu tính năng lưu dữ liệu tạm nhờ sử dụng web SQL databases, application cache. 
    • Hỗ trợ Javaccript vận hành mượt mà trên web browser.
    • Không bị phụ thuộc vào SGML. Nhờ vậy mà sản phẩm lập trình có độ tương thích cao hơn.
    • Cho phép sử dụng MathML và SVG cho văn bản.
    • Có tích hợp một số elements mới mẻ và quan trọng như summary, time, audio, command, data, datalist, details, canvas, mark, video…
    • Loại bỏ bớt một số elements lỗi thời trong phiên bản cũ.

    Giới thiệu HTML, CSS và Javascript

    Ưu điểm của HTML

    • Sở hữu nguồn tài nguyên vô cùng rộng lớn và cộng đồng hỗ trợ cực kỳ "hùng hậu".
    • Sử dụng mượt mà trên hầu hết mọi trình duyệt.
    • Vô cùng đơn giản và dễ học ngay cả với những người mới.
    • Là mã nguồn mở và hoàn toàn miễn phí.
    • Có markup gọn gàng và đồng nhất.
    • Được vận hành bởi World Wide Web Consortium (W3C).
    • Tích hợp được với nhiều ngôn ngữ backend như PHP một cách dễ dàng.

    Nhược điểm của HTML

    • Chỉ được dùng chủ yếu trong việc thiết kế website tĩnh. Để có thể phát triển nên những tính năng động, bạn cần sử dụng Javaccript hoặc ngôn ngữ backend bên thứ 3 như PHP.
    • Một số trình duyệt hiện nay còn chậm hỗ trợ tính năng mới.
    • Dường như rất khó kiểm soát cảnh thực thi của trình duyệt.

    Giới thiệu về CSS

    CSS là gì?

    CSS là chữ viết gọn của cụm từ "Cascading Style Sheet Language" - ngôn ngữ tạo phong cách cho website.

    Nó được dùng để tạo phong cách và định kiểu cho những yếu tố viết dưới dạng ngôn ngữ đánh dấu, mà phổ biến nhất vẫn là HTML.

    Đồng thời, CSS còn có thể điều khiển định dạng của nhiều trang web cùng một lúc, giúp tiết kiệm công sức cho những nhà phát triển. 

    CSS cũng được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996 với một lý do hết sức đơn giản, là vì HTML không được thiết kế để thêm tag giúp định dạng trang web, bạn chỉ có thể dùng nó để "đánh dấu" mà thôi.

    Những thẻ như <font> xuất hiện trong HTML phiên bản 3.2 đã gây ra rất nhiều phiền phức cho lập trình viên. Vì website có bố cục, màu nền và phong cách khác nhau nên để viết lại code cho trang là cả một quá trình dài đầy cực nhọc. Do vậy mà CSS được W3C tạo ra để giải quyết vấn đề trên.

    Mối quan hệ giữa HTML và CSS là vô cùng mật thiết. Chúng bổ trợ cho nhau và không thể tách rời.

    Xét về mặt lý thuyết thì không có CSS cũng vẫn được. Nhưng khi đó, website của bạn sẽ chỉ đơn thuần là một trang trống chứa đầy văn bản vô cùng nhàm chán mà thôi!

    Giới thiệu HTML, CSS và Javascript

    CSS hoạt động như thế nào?

    CSS sử dụng cấu trúc tiếng Anh đơn giản để tạo ra một bộ những quy tắc mà bạn có thể tận dụng.

    Syntax của CSS rất đơn giản, bao gồm phần "block chọn" và "block khai báo". Lúc này, bạn chỉ cần chọn một yếu tố và khai báo sẽ làm gì với nó là xong!

    Tuy nhiên, bạn cũng cần phải ghi nhớ một số lưu ý dưới đây:

    • Selector sẽ trỏ về yếu tố HTML mà bạn muốn tạo phong cách.
    • Block khai báo được đặt trong ngoặc nhọn, sẽ bao gồm một hoặc nhiều lệnh được viết cách nhau bởi dấu chấm phẩy.
    • Mỗi khai báo bao gồm tên CSS và giá trị, cách nhau bởi dấu hai chấm.
    • Trong CSS, khai báo luôn kết thúc với dấu chấm phẩy.

    Các style thông dụng của CSS

    Internal Style

    Được tải lên mỗi khi trang web reload. Chính vì vậy, nó làm tăng thời gian thực hiện quá trình này, khiến trải nghiệm người dùng trở nên tệ hơn.

    Ngoài ra, bạn sẽ không được phép dùng một kiểu CSS cho nhiều trang vì nó chỉ áp dụng cho từng lần code duy nhất.

    External Style

    External Style được đánh giá là phương pháp thuận tiên nhất.

    Mọi thứ đều sẽ được lưu trữ trong file ".css". Điều này nghĩa là bạn có thể tạo phong cách ở một tệp khác và áp dụng CSS vào trang mình muốn.

    Nó sẽ giúp cải thiện thời gian tải trang rất nhiều so với Internal Style.

    Inline Style

    Nó hoạt động với một yếu tố nhất định có tag <style>. Mỗi thành phần sẽ đều cần phải tạo phong cách riêng khác nhau. Chính vì vậy, đây không hẵn là sự lựa chọn tốt và dễ nhất để xử lý CSS.

    Nhưng nó khá tiện lợi trong trường hợp chỉ muốn thay đổi một yếu tố duy nhất. Lúc này, bạn có thể nhanh chóng xem trước mà không cần truy cập trực tiếp vào file CSS để chỉnh sửa.

    CSS3 - Phiên bản mới nhất của CSS

    Đây là bản nâng cấp mới nhất của CSS tính cho đến thời điểm hiện tại, với mục đích mở rộng CSS2.1.

    CSS3 bổ sung, cũng như mang đến nhiều tính năng mới cho người dùng như bo tròn góc, tạo độ bóng, gradient, transition, animation và một số bố cục có thể kể đến multiple-column, flexbox, grid layout...

    Giới thiệu HTML, CSS và Javascript

    Ưu điểm của CSS

    • Giúp tiết kiệm thời gian xây dựng và phát triển website cho các lập trình viên.
    • Có tốc độ tải trang nhanh chóng, vì quá trình sử dụng CSS sẽ tốn ít mã hơn.
    • Dễ bảo trì vì bạn chỉ cần thay đổi kiểu và tất cả những thành phần trong toàn bộ website thì nó sẽ tự động được cập nhập.
    • CSS có những thuộc tính rộng hơn so với HTML. 
    • Có khả năng tương thích với nhiều thiết bị khác nhau.

    Nhược điểm của CSS

    • CSS hoạt động khác nhau trên từng trình duyệt riêng biệt. Chính vì vậy, sau khi thay đổi những yếu tố ban đầu trên một website, bạn cần phải tốn thời gian để kiểm tra và  xác nhận tính tương thích của nó.
    • Dễ gây nhầm lẫn do có nhiều cấp độ.
    • CSS dễ truy cập do hệ thống dựa trên văn bản mở. Tuy nhiên, định dạng của toàn bộ website sẽ bị gián đoạn nếu một "tai nạn" nào đó vô tình xảy ra với các tệp. 

    Giới thiệu về Javascript

    Javascript là gì?

    Javascript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua.

    Nó cũng là một trong số 3 ngôn ngữ chính của giới lập trình web:

    • HTML: Giúp thêm nội dung cho trang web.
    • CSS: Giúp định dạng thiết kế, bố cục, phong cách, canh lề... cho trang web.
    • Javascript: Giúp cải thiện cách hoạt động cho trang web.

    Javascript sẽ được tích hợp và nhúng trong HTML, giúp website trở nên sống động hơn.

    Nó cho phép kiểm soát những hành vi của website tốt hơn so với khi chỉ sử dụng mỗi HTML.

    Bạn có thể học Javascript một cách nhanh chóng và dễ dàng áp dụng nó cho rất nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game... 

    Giới thiệu HTML, CSS và Javascript

    Javascript hoạt động như thế nào?

    Javascript thường được nhúng trực tiếp vào một trang web hoặc tham chiếu qua file ".js" riêng.

    Nó là ngôn ngữ thuộc phía client, tức script được tải về máy của khách truy cập và xử lý ngay tại đó thay vì trên server.

    Ưu điểm của Javascript

    • Bạn không cần một compiler vì web browser có thể biên dịch nó thông qua HTML.
    • Dễ học hơn so với các ngôn ngữ lập trình khác.
    • Lỗi trong Javascript sẽ dễ phát hiện hơn.
    • Có khả năng hoạt động tốt trên nhiều trình duyệt và nền tảng... khác nhau.
    • Bạn có thể sử dụng Javascript để kiểm tra input và giảm thiểu việc test thủ công khi truy xuất qua database.
    • Giúp website tương tác tốt hơn với khách truy cập.
    • Nó nhanh và nhẹ hơn các ngôn ngữ lập trình khác.

    Nhược điểm của Javascript

    • Rất dễ bị khai thác.
    • Có thể được sử dụng để thực thi mã độc trên máy tính của người dùng.
    • Có nhiều lúc không được hỗ trợ trên mọi trình duyệt.
    • Có thể được triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất.

    Mối quan hệ giữa HTML, CSS và Javascript

    Bộ 3 ngôn ngữ HTML, CSS và Javascript có mối quan hệ mật thiết với nhau, dường như không thể tách rời:

    • Tệp HTML chứa cấu trúc của trang web.
    • Tệp CSS chứa kiểu dáng của trang web. Nó cho phép bạn thay đổi tông màu, định vị và nhiều hơn thế nữa... 
    • Tệp Javascript xác định những yếu tố động và tính tương tác của trang web. Nó xác định điều gì sẽ xảy ra khi người dùng thực hiện thao tác nhấp, di chuyển chuột hoặc nhập trong một phần tử nhất định. 

    Mặc dù HTML là ngôn ngữ mạnh mẽ, nhưng nó vẫn không đủ tính năng để xây dựng nên một website chuyên nghiệp và hoàn toàn Responsive.

    Chúng ta chỉ có thể dùng HTML để thêm element dạng văn bản và tạo ra giao diện cấu trúc cho nội dung.

    Tuy nhiên, HTML tương thích hoàn toàn với hai ngôn ngữ frontend là CSS và Javascript. Cùng với nhau, chúng có thể kết hợp lại để góp phần làm tăng trải nghiệm người dùng, cũng như thiết lập những chức năng cao cấp khác.

    Giới thiệu HTML, CSS và Javascript

    Bài viết này đã giới thiệu đến bạn một số kiến thức cơ bản về bộ 3 ngôn ngữ HTML, CSS và Javascript. Hãy xem thêm một số tài liệu được đính kèm ngay bên dưới đây để có thể hiểu rõ hơn về chúng!

    >> >> Link tải slide bài giảng dạng PDF.

    >> >> Video bài giảng giới thiệu HTML, CSS và Javascript.