HTML ban đầu được thiết kế cho các tài liệu tĩnh đơn giản, và phát triển khi World Wide Web được coi là 1 hệ thống truy xuất tài liệu. Hiện tại, hầu hết mọi trang web đều sử dụng HTML và nó đã trở thành ngôn ngữ của Web.
Bài viết này sẽ xác định những điều cơ bản để tạo 1 website HTML đơn giản.
CONTENTS:
Tại sao bạn nên học HTML?
Thông thường, mọi người sẽ thêm plugins, modules hoặc extension đến một CMS như WordPress , Drupal , Joomla , vv để mở rộng nó với tính năng đơn giản mà dễ đạt được với một vài dòng của HTML.
Việc học HTML khá dễ dàng và có thể rất thú vị, bởi vì bạn sẽ có kết quả ngay lập tức, không giống như ngôn ngữ lập trình nơi bạn phải biên dịch mã bạn đã viết. Bạn đã có tất cả các công cụ cần thiết để bắt đầu học HTML, bạn có trình duyệt web và bạn chắc chắn có 1 trình tạo văn bản đơn giản như notepad. Các ứng dụng như Microsoft Word sẽ không làm điều đó, bạn sẽ cần 1 trình tạo văn bản cơ bản: notepad, notepad ++. IDE (Môi trường phát triển tích hợp), sẽ giúp bạn viết HTML với các tính năng như tô sáng cú pháp hoặc tự động hoàn thành.
Bạn có thể lấy 1 trình tạo văn bản free như Notepad ++ hoặc Sublime Text Editor và khởi động nó. Lưu tập tin trống vào máy tính để bàn của bạn như là hello.html . Điều này sẽ thay đổi trình soạn thảo trong chế độ HTML, vì vậy bạn có thể tận hưởng những lợi ích của IDE. Bây giờ hãy tiếp tục và nhập văn bản sau vào nó:
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Lưu tệp, rồi mở nó lên bằng trình duyệt web của bạn. Tiếp theo, bạn được tiếp tục sửa đổi tệp, lưu tệp và làm mới trang trong trình duyệt của mình và bạn sẽ thấy tất cả các thay đổi mà bạn đã thực hiện.
Khái niệm cơ bản về HTML và 101
HTML bao gồm các thẻ và văn bản. Thẻ HTML có ý nghĩa đặc biệt đối với trình duyệt, về cơ bản đây là phương pháp đánh dấu tài liệu. 1 số thẻ có thể chứa các thẻ khác trong đó, ví dụ như thẻ <ul> có thể chứa các mục danh sách <li> trong đó. Thẻ đoạn <p> có thể chứa thẻ dòng mới <br>, thẻ neo <a>, in đậm <b>, in nghiêng <i>, v.v.
Trong ví dụ của chúng tôi, thẻ HTML chính chứa thẻ head và thẻ body. Trong thẻ head, chúng tôi có thể chỉ định tiêu đề của tài liệu, sẽ được hiển thị trong tiêu đề tab trình duyệt. Trong phần thân, chúng ta có thẻ H1 hoặc thẻ Heading 1.
Các thẻ HTML có các thuộc tính có thể thay đổi hành vi của thẻ, ví dụ: chúng ta có thể thêm một yếu tố vào H1 để biết kiểu của nó. Nếu chúng ta thêm kiểu = Màu sắc: màu đỏ, thì nó sẽ trở thành <h1 style = Màu sắc: màu đỏ> Xin chào thế giới! </ H1> chúng ta có thể thay đổi màu của nó từ màu đen mặc định sang màu đỏ. Tất nhiên, trong 1 website lớn hơn, việc tạo kiểu cho từng yếu tố của chúng ta có thể trở thành vấn đề và nó sẽ làm lộn xộn HTML của chúng ta. Cách tốt hơn sẽ là thêm cho phần tử 1 thuộc tính lớp hoặc id và sau đó chỉ định kiểu của nó theo lớp hoặc id đó.
Có rất nhiều hướng dẫn và tài nguyên về HTML trên internet, bạn có thể xem hướng dẫn trên YouTube hoặc The Great Curses Plus hoặc đọc một trong hàng ngàn bài viết trên internet về HTML.
Một điều cần lưu ý là, cho dù bạn có đọc hay xem bao nhiêu đi chăng nữa, bạn sẽ cần phải hành động và bắt đầu viết HTML. Đó là cách duy nhất để bạn học, bởi vì ngay khi bạn bắt đầu viết, bạn sẽ có nhiều câu hỏi hơn và bạn phải trả lời chúng, nhờ đó mà bạn thông thạo HTML.
Tạo kiểu và viết kịch bản
Một website HTML thuần túy là tĩnh. Điều này có nghĩa là nó không thể chứa các bộ phận thay đổi linh hoạt, chẳng hạn, tin tức mới nhất của chúng tôi. Nếu bạn tạo một website có phần tin tức liên tục được cập nhật, thì chỉ cần tạo các bài viết, sau đó cập nhật các tài liệu tham khảo đến nó nhưng đây sẽ là công việc khá khó khăn.
Mặt khác, nếu bạn tạo danh thiếp hoặc loại trang web bằng HTML, không thay đổi thường xuyên, thì một trang web HTML tĩnh là lựa chọn phù hợp. Bởi vì nó không có các bộ phận di chuyển trên mạng, như dữ liệu, xử lý phía máy chủ ( PHP, Python , Ruby , v.v.) nên có ít lỗi hơn và nó cũng rất nhanh.
Bạn dễ dàng tạo 1 trang tĩnh động bằng cách thêm JavaScript ( chính xác là ECMA Script ) vào đó, đây là ngôn ngữ lập trình tập lệnh. Với JavaScript, bạn dễ trả lời đầu vào của người dùng bằng cách ẩn hoặc hiển thị 1 số phần của HTML, bạn cũng có thể thay đổi giao diện của web. Với AJAX , bạn có thể yêu cầu thêm tài nguyên từ website của mình, như trang phụ, biểu mẫu liên hệ hoặc Tweets mới nhất của bạn và bạn có thể kết hợp chúng vào trang web của mình.
Các kiểu HTML mặc định khá nhàm chán, đó là văn bản màu đen trên nền trắng. Bạn dễ dàng chỉnh sửa kiểu của bất kỳ thành phần HTML nào bằng CSS (Cascading Style Sheets). Trong HTML, bạn không có quyền quản lý cách hiển thị tài liệu của mình, đây là một tính năng của HTML. Với CSS, bạn có thể quản lý nhiều hơn HTML, nhưng bạn vẫn không thể kiểm soát được 100%. Phiên bản CSS hiện tại, được hỗ trợ bởi mọi trình duyệt chính là CSS3 và có rất nhiều tính năng hữu ích mà tiêu chuẩn trước đó thiếu.
Với CSS, bạn nên bắt đầu với mô hình hộp, nó sẽ giúp bạn tiết kiệm rất nhiều thời gian, công sức và điều quan trọng là bạn phải hiểu sự khác biệt giữa đường viền, phần đệm, lề, v.v. CSS khá dễ học và giống như với HTML, bạn sẽ thấy ngay những thay đổi mà bạn đã thực hiện. Như đã đề cập, bạn sẽ thêm 1 thành phần id hoặc lớp vào bất kỳ thẻ HTML nào và dễ dàng viết các quy tắc CSS cho các id và lớp đó.
<style>
body {
Background-color: blue;
}
</style>
Lưu ý với CSS là có rất nhiều thẻ cụ thể của trình duyệt, vì vậy hãy đảm bảo rằng bạn đã kiểm tra trang web của mình bằng các trình duyệt khác nhau.
Phần kết luận
Học HTML và CSS dễ dàng hơn nhiều so với hầu hết các ngôn ngữ lập trình khác. Với HTML, bạn dễ dàng tạo các trang web chính xác như ý bạn muốn. Xây dựng trang web HTML sẽ cho phép bạn lưu trữ chúng ở bất cứ đâu và chúng sẽ tải cực kỳ nhanh.
Xem thêm: Tạo Website miễn phí
Ngay cả với sự xuất hiện của các loại trình tạo website kéo và thả DIY, nhưng HTML vẫn không lỗi thời. Nó giúp bạn xây dựng 1 website chuyên nghiệp mà không cần bất kỳ kiến thức mã hóa nào.
Biết cơ bản về HTML sẽ là một kỹ năng tốt cho tất cả mọi người đặc biệt là những người làm việc với nội dung web, tiếp thị trực tuyến, dịch thuật.