HTML là gì? Mối quan hệ giữa HTML, CSS và JavaScript

Chắc hẳn, câu hỏi HTML là gì ? đã không còn lạ lẫm so với những ai yêu quý lập trình. Tuy nhiên, so với những newbie, có lẽ rằng nó vẫn còn mơ hồ hoặc chưa hiểu sâu hơn về HTML. Bài viết này sẽ lý giải “ tất tần tật ” về HTML và mối quan hệ của nó với CSS, JavaScript .
HTML là viết tắt của Hypertext Markup Language. HTML giúp người dùng thiết kế xây dựng và cấu trúc thành phần trong một ứng dụng hoặc một website ; phân loại đoạn, Heading, Links và Blockquotes …
HTML không phải là một ngôn từ lập trình ; vì vậy, nó không hề tạo ra tính năng “ động ”. Nó không hề xử lý những yếu tố như phương trình toán học, những thao tác dữ liệu hay vận động và di chuyển … Giống với Microsoft word, nó dùng để định dạng và bố cục tổng quan website ; chịu nghĩa vụ và trách nhiệm cho việc hiển thị văn bản như kiểu in nghiêng, in đậm, thêm hình ảnh hay link đến những trang khác … Bạn hoàn toàn có thể nhấp chuột phải vào website và chọn Xem nguồn trang để xem code HTML của trang web mình đang đọc .

Lịch sử của HTML                         

HTML được tạo ra bởi Tim Berners-Lee. Ông là một nhà vật lý học của TTNC Cern tại Thụy Sĩ.

HTML là một ngôn từ lưu lại rất tăng trưởng và đã tăng trưởng với nhiều phiên bản update. Rất lâu trước khi những tiêu chuẩn và thông số kỹ thuật kỹ thuật sửa đổi của nó được vận dụng, mỗi phiên bản đã được cho phép người dùng tạo những website theo cách thuận tiện hơn, đẹp hơn và làm cho những website hoạt động giải trí rất hiệu suất cao .

  • HTML 1.0 được phát hành vào năm 1993 với mục đích chia sẻ thông tin có thể đọc và truy cập được thông qua trình duyệt web. Nhưng không có nhiều nhà phát triển tham gia vào việc tạo trang web. Vì vậy, ngôn ngữ cũng không phát triển.
  • Sau đó là HTML 2.0, xuất bản năm 1995; chứa tất cả các tính năng của HTML 1.0 cùng với một số tính năng bổ sung; mà vẫn là ngôn ngữ đánh dấu tiêu chuẩn để thiết kế và tạo trang web cho đến tháng 1 năm 1997 và tinh chỉnh các tính năng cốt lõi khác nhau của HTML.
  • Sau đó là HTML 3.0, nơi Dave Raggett, người đã giới thiệu một bài báo hoặc bản nháp mới về HTML. Nó bao gồm các tính năng mới được cải tiến của HTML, mang lại các đặc tính mạnh mẽ hơn cho quản trị viên web trong việc thiết kế các trang web. Nhưng những tính năng mạnh mẽ này của HTML mới đã làm chậm trình duyệt áp dụng các cải tiến hơn nữa.
  • Sau đó, HTML 4.01 được sử dụng rộng rãi và là phiên bản thành công của HTML trước HTML 5.0, hiện được phát hành và sử dụng trên toàn thế giới. HTML 5 có thể nói là một phiên bản mở rộng của HTML 4.01 được xuất bản vào năm 2012.

HTML phiên bản tiên phong gồm có 18 tag. Theo Mozilla Developer Network : HTML Element Reference hiện tại có hơn 140 HTML tags, mặc dầu một vài trong số chúng đã bị tạm ngưng .
HTML được tăng trưởng và sử dụng phổ cập. Ngày nay, nó được xem như thể một chuẩn mực của website. Các thiết lập và câú trúc của nó được quản lý và vận hành và tăng trưởng bởi World Wide Web Consortium ( W3C ) .

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

HTML là viết tắt của HyperText Markup Language. “ Markup Language ” có nghĩa là thay vì sử dụng ngôn từ lập trình để triển khai những tính năng, HTML sử dụng những thẻ tag để xác lập những loại nội dung khác nhau và mục tiêu mà chúng Giao hàng cho website .
Hãy tưởng tượng có một đoạn nội dung trong word : Có tiêu đề ở trên cùng, sau đó là tiêu đề phụ bên dưới, văn bản nội dung và 1 số ít hình ảnh ở dưới cùng, tiếp theo là thêm vài bit văn bản. Nếu tôi nhu yếu bạn gắn nhãn những loại nội dung trên trang, rất dễ đúng không nào ?
Các ngôn từ lưu lại hoạt động giải trí giống như cách bạn vừa làm khi bạn gắn nhãn những loại nội dung đó, ngoại trừ việc chúng sử dụng code để làm điều đó – đơn cử là chúng sử dụng thẻ HTML, còn được gọi là “ elements ”. Các thẻ này có tên khá trực quan : Thẻ tiêu đề, thẻ đoạn văn, thẻ hình ảnh, v.v.
Mỗi website được tạo thành từ một loạt những thẻ HTML này biểu lộ từng loại nội dung trên trang. Mỗi loại nội dung trên trang được “ bảo phủ ”, tức là được bao quanh bởi những thẻ HTML .
Ví dụ, những từ bạn đang đọc ngay giờ đây là một phần của một đoạn văn. Nếu tôi mã hóa trang web này từ đầu ( thay vì sử dụng trình soạn thảo WYSIWG trong CMS của HubSpot ), tôi sẽ khởi đầu đoạn này bằng thẻ đoạn khởi đầu :
Phần “ thẻ ” được bộc lộ bằng dấu ngoặc mở và vần âm “ p ” cho máy tính biết rằng tất cả chúng ta đang mở một đoạn văn thay vì một số ít loại nội dung khác .
Khi một thẻ đã được mở, tổng thể nội dung theo sau được coi là một phần của thẻ đó cho đến khi bạn “ đóng ” thẻ. Khi đoạn văn kết thúc, tôi sẽ đặt một thẻ đóng đoạn văn. Lưu ý rằng thẻ đóng trông giống hệt như thẻ mở, ngoại trừ có một dấu gạch chéo phía sau dấu ngoặc nhọn bên trái .

Ví dụ:

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

  • Element ở ngoài cùng là bộ tag division

    , dùng để mark up phần nội dung lớn.

  • Tag tiêu đề

    , tag subheading

    , 2 văn bản và tag hình

  • Đoạn thứ hai chứa tag chứa link với attribute href chứa địa chỉ url đích.
  • Tag hình ảnh cũng có 2 attribute là src cho ảnh và alt cho mô tả hình ảnh.

Sử dụng HTML, bạn hoàn toàn có thể thêm tiêu đề, định dạng đoạn văn, tinh chỉnh và điều khiển ngắt dòng, tạo list, nhấn mạnh vấn đề văn bản, tạo ký tự đặc biệt quan trọng, chèn hình ảnh, tạo link, tạo bảng, trấn áp một số ít kiểu và hơn thế nữa .

Tổng quan của các tag thông dụng nhất của HTML

Có 2 loại chính, đó là: block-level và inline tags.

  • Block level sử dụng toàn không gian của trang web; ví dụ như Headings và paragraph.
  • Inline tags chỉ chiếm một phần nhỏ không gian web. Chúng thường dùng cho việc định dạng nội dung bên trong của block elements. Ví dụ như links và những tag nhấn mạnh.

Block – Level

3 block level tags của mỗi trang HTML cần có những tag như là , và .

  • Tag là element cao nhất; có chức năng đóng gói mỗi trang HTML.
  • Tag chứa thông tin meta như tiêu đề, charset.
  • Tag dùng để đóng gói tất cả nội dung sẽ hiển thị trên trang.

Block – Level

  • 6 cấp độ trong HTML, từ

    tới

, blockquotes đặt trong

.

  • Divisions là những khu vực lớn; chứa nhiều paragraph, images, blockquotes và các yếu tố khác. Chúng ta có thể đánh dấu bằng cách sử dụng

    .

  • Dùng tag

      cho danh sách theo thứ tự và

        cho danh sách không theo thứ tự; danh sách dùng tag

      • .

        Ví dụ:

        Block – Level

        Inline tags

        Inline được sử dụng chủ yếu để định dạng văn bản, ví dụ như in đậm, in nghiêng, hyperlinkss hay ảnh cũng là một element inline.

        Tag định dạng in đậm, tag định dạng in nghiêng

        Hyperlinks cũng là một yếu tố element cần tag và attributes href xác lập link đơn cử .
        Inline tags

        Ảnh có thể được thêm bằng cách sử dụng tag mà không cần đóng tag như những tag khác. Thay vào đó, bạn phải cần sử dụng attribute src để xác định được nguồn ảnh.

        Inline tags

        Sự phát triển của HTML. Có gì khác biệt giữa HTML và HTML5?

        Một điều thiết yếu trong nghành nghề dịch vụ công nghệ tiên tiến, đó là luôn luôn biến hóa và update. Không ngôn từ nào hoàn toàn có thể sống sót mãi mãi mà không có phiên bản mới ; và HTML cũng vậy. HTML5 được phát hành vào năm năm trước, với mục tiêu chính là cải tổ thưởng thức của người dùng World Wide Web .

        Từ khi ra mắt đến giờ, HTML vẫn luôn là một phát minh vượt thời đại. HTML 4 được phát hành vào năm 1999, trong khi đó, phiên bản mới nhất là HTML 5 thì được phát hành vào năm 2014. HTML5 đã được bổ sung nhiều tính năng mới quan trọng. Một trong các tính năng hấp dẫn nhất là khả năng hỗ trợ audio và video. Thay vì sử dụng Flash Player, với HTML5, chúng ta chỉ cần nhúng videos và audio files vào trang web bằng thẻ tag  hoặc .

        Thêm một sự độc lạ nữa của HTML5, đó là tương hỗ SVG, canvas và những hình dạng vecto ; trong khi HTML muốn sử dụng hình vector thì chỉ hoàn toàn có thể dùng trong một công nghệ tiên tiến khác như Flash, VML hay silver light .
        HTML5 sử dụng SQL database, application cache để tàng trữ tài liệu tạm nhưng HTML chỉ có cache trình duyệt. HTML không được cho phép JavaScript chạy trong web browser ( mà nó chạy trong interface thread của browser ) ; trong khi đó HZTML5 tương hỗ JavaScript chạy nên nhờ vào JS web worker API của HTML5 .
        So với HTML, HTML5 có nhiều nâng cấp cải tiến về mặt ngôn từ. Các thẻ tag mới ra mắt cho trình duyệt biết được mục tiêu chính của nội dung trong website là gì. Điều này có lợi cho cả người đọc và Search engine .
        Trong HTML5, inline MathML và SVG hoàn toàn có thể được dùng trong văn bản nơi mà không được tương hỗ trong HTML .
        Một số element lỗi thời bị vô hiệu trọn vẹn khỏi phiên bản HTML5 là : acronym, applet, basefont, dir, font, frame, isindex, noframes, frameset, big, center, strike, …
        HTML5 tương hỗ những tính năng tinh chỉnh và điều khiển form, như ngày giờ, URL, tìm kiếm, email, số lượng, khoảng chừng, số điện thoại thông minh, … .
        Có nhiều element được ra mắt trong HTML5. Chẳng hạn : summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video .

        Ưu và nhược điểm của HTML

        Ưu điểm

        • HTML có nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn.
        • Sử dụng mượt mà trên hầu hết các trình duyệt.
        • Mã nguồn mở và hoàn toàn miễn phí.
        • Markup gọn gàng và đồng nhất.
        • Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C).
        • Dễ dàng tích hợp với các ngôn ngữ back-end như PHP và Node.js.

        Khuyết điểm:

        • Được dùng chủ yếu cho web tĩnh. Đối với các tính năng “động”, phải sử dụng JavaScript hoặc ngôn ngữ back-end bên thứ 3 như là PHP.
        • Nó thực thi một số logic nhất định cho người dùng. Vì vậy, hầu hết các trang web đều cần được tạo một cách riêng biệt, kể cả khi sử dụng cùng các yếu tố, như là headers hay footers.
        • Một số trình duyệt chậm hỗ trợ tính năng mới.
        • Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ không render được tag mới).

        HTML, CSS, và JavaScript liên quan với nhau như thế nào?

        Hãy tưởng tượng rằng bạn chịu trách nhiệm lập kế hoạch bố trí khu dân cư mới trong thành phố. Khu phố này sẽ có một số tòa nhà dân cư, một số quán ăn, một chi nhánh ngân hàng và một trung tâm mua sắm.

        HTML, CSS, và JavaScript liên quan với nhau như thế nào?

        Điều này có vẻ là một chiều. Nói cách khác, mỗi tòa nhà chỉ là một điểm trên bản đồ, không có sắc thái. Nhưng khi bạn đào sâu hơn một chút, bạn có thể thấy rằng mỗi tòa nhà thực sự có ba phần mà bạn có thể thay đổi:

        • Cấu trúc của chính tòa nhà
        • Trang trí bên trong và bên ngoài của tòa nhà
        • Các chức năng thực tế mà du khách có thể thực hiện trong mỗi tòa nhà

        Điều này tương ứng với ba loại tệp khác nhau mà bạn có thể sử dụng trong trang web đầu tiên của mình.

        • Tệp HTML chứa cấu trúc của chính trang đó. Nó giống như cấu trúc của tòa nhà.
        • Tệp CSS chứa kiểu dáng của trang. Nó cho phép bạn thay đổi màu sắc, định vị và hơn thế nữa. Nó giống như thiết kế của chính tòa nhà.
        • Tệp JavaScript xác định các yếu tố động và tương tác trên trang. Nó xác định điều gì sẽ xảy ra khi người dùng nhấp, di chuột hoặc nhập trong các phần tử nhất định. Đây giống như chức năng của tòa nhà.
        Hãy lấy ví dụ về một trong những ngôi nhà:

        Một ngôi nhà có 2 phòng ngủ, 2 Tolet và 2 tầng. Đó là HTML của tòa nhà. Nó được làm bằng gạch và có một cửa gỗ chắc như đinh. Điều đó tương ứng với CSS của tòa nhà. Bạn hoàn toàn có thể làm gì trong nhà ? Bạn hoàn toàn có thể ăn … ngủ … làm bữa ăn … bất kỳ điều gì bạn làm ở nhà ! Đó là JavaScript của tòa nhà .
        HTML, CSS, và JavaScript liên quan với nhau như thế nào?
        HTML, CSS, và JavaScript liên quan với nhau như thế nào?
        Mặc dù HTML là một ngôn từ can đảm và mạnh mẽ, nó vẫn không đủ tính năng để kiến thiết xây dựng một website chuyên nghiệp và trọn vẹn responsive. Chúng ta chỉ hoàn toàn 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 2 ngôn ngữ frontend là: CSS (Cascading Style Sheets), và JavaScript. Cùng với nhau, những ngôn ngữ này có thể kết hợp với nhau để tăng trải nghiệm người dùng và thiết lập các chức năng cao cấp khác:

        • CSS chịu trách nhiệm cho việc thiết kế, tạo kiểu cho backgrounds, màu sắc, bố cục, phân cách và hiệu ứng.
        • JavaScript giúp bạn tạo ra những chức năng động như: slider, pop-up và thư viện ảnh.
        Hãy xem HTML giống như là một con người, CSS là quần áo,; và JavaScript là cách ứng xử và hành vi của người đó.

        Vậy…HTML là gì?

        Tóm lại, bài viết trên đã trình diễn khá rất đầy đủ những nội dung mà bạn cần biết về HTML rồi. Vậy HTML là gì ? Hi vọng qua bài viết trên bạn hoàn toàn có thể vấn đáp được câu hỏi này .
        HTML là ngôn từ markup của quốc tế web. Ngôn ngữ markup là loại ngôn từ dùng để phong cách thiết kế và sắp xếp nội dung, hình ảnh, và những yếu tố khác trên website. Nó chạy trên bất kể trình duyệt nào và được quản trị bởi World Wide Web Consortium W3C .
        Bạn hoàn toàn có thể dùng nó để cấu trúc nội dung của website hay ứng dụng web. Nó là lớp thấp nhất trong những lớp giải quyết và xử lý ở frontend, đảm nhiệm việc tạo phong thái cơ bản nhất cho website, và phối hợp với CSS để làm đẹp cho website hơn và tích hợp với JavaScript để tăng tính năng cho website .