Định nghĩa và ứng dụng cơ bản về HTML và CSS là gì? HTML và CSS là bước đệm đầu tiên của mọi vấn đề liên quan đến web, cho dù bạn học ngành gì hay làm bất cứ công việc nào miễn là có ứng dụng tới quản trị web thì bắt buộc phải biết về HTML và CSS. Nếu mọi người có định hướng học tập và làm việc về lập trình web thì càng phải thông thạo hai cái này. Vậy để hiểu rõ hơn HTML là gì? CSS là gì? Hãy cùng WebNow tìm hiểu về định nghĩa và ứng dụng cơ bản về HTML và CSS nhé!
Tổng quan HTML và CSS – Hành trình khởi tạo trang web đầu tiên của bạn
Hãy tưởng tượng trước khi con người phát triển đến mức độ của thể phát minh ra Internet. Các trang web không tồn tại, thông tin được in trên giấy và sách là nguồn thông tin chính của mọi người. Vì vậy, những thông tin mọi người nhận được có thể không chính xác và không đúng tại thời điểm xảy ra khiến cho mọi người rất khó để có thể theo dõi được các thông tin mà họ cần.
Ngày nay, bạn có thể mở một trình duyệt web, chuyển qua công cụ tìm kiếm và chọn thì mọi thông tin bạn muốn đều có thể biết, nhưng thông tin này không những có độ chính xác cao mà còn đúng thời điểm.
Ở bài viết này, WebNow sẽ hướng dẫn cho các bạn bước đầu tiên vào hành trình xây dựng trang web bằng hai ngôn ngữ quyền lực nhất là HTML và CSS.
Trước khi bắt đầu hành trình tìm hiểu và xây dựng web bằng HTML và CSS, chúng ta phải hiểu rõ sự khác biệt giữa hai ngôn ngữ và một số cú pháp của từng ngôn ngữ cùng một số thuật ngữ phổ biến.
Định nghĩa và ứng dụng cơ bản về HTML và CSS
Đầu tiên, phải xác định rõ HTML và CSS là hai ngôn ngữ khác nhau về mặt cấu trúc. Sự khác nhau này có thể được phân biệt như sau:
- HTML (HyperText Markup Language): là khung xương của một trình duyệt website, nó cung cấp cấu trúc nội dung và ý nghĩa bằng cách xác định nội dung đó, ví dụ như tiêu đề, đoạn văn hoặc hình ảnh.
- CSS (Cascading Style Sheets): nếu HTML là khung xương thì CSS sẽ là da thịt đắp lên khung xương đó, được dùng để tạo kiểu cho sự xuất hiện của nội dung sử dụng, ví dụ như phông chữ hoặc màu sắc.
- HTML sẽ luôn đại diện cho nội dung và CSS sẽ luôn thể hiện sự xuất hiện của nội dung đó.
Ứng dụng cấu trúc cơ bản của HTML
Khi tìm hiểu về HTML và CSS, ta sẽ dễ dàng nhận ra rằng cấu trúc của HTML rất đơn giản và logic, bố cục từ trên xuống dưới, từ trái sang phải, với 2 phần chính HEAD và BODY. Một trang web được viết bằng HTML tuân theo cấu trúc cơ bản sau:
- Mỗi trang HTML phải khai báo một DOCTYPE (định nghĩa tiêu chuẩn của văn bản) bắt đầu từ dòng đầu tiên.
- Thẻ <html> cho trình duyệt biết nơi bắt đầu và kết thúc trang HTML.
- Thẻ <head> chứa thông tin tiêu đề và khai báo cũng như các thông tin ẩn khác.
- Thẻ <body> sẽ hiển thị nội dung của trang web. Đây là những gì người dùng sẽ thấy khi trình duyệt đọc mã HTML.
- Bất kỳ ký tự nào giữa <!– và –> sẽ được coi là thẻ nhận xét và sẽ bị trình duyệt bỏ qua, không xử lý và không hiển thị.
<!DOCTYPE html>
<html>
<head>
<title>Đây là chỗ đánh tiêu để của website</title>
<!– Comment: Các thông tin khai báo, các thông tin ẩn –>
</head>
<body>
<!– Comment: Nội dung trang web mà người dùng sẽ thấy –>
<b>Đây là dòng chữ in đậm</b>
<i>Đây là dòng chữ in nghiêng</i>
</body>
</html>
Lưu ý
- Sau khi thẻ được mở, hãy chắc chắn đóng nó lại. Điều này giúp hạn chế các lỗi không mong muốn khi hiển thị trên trình duyệt.
- Một số thẻ không có thẻ đóng, chẳng hạn như <br>, <img>, <input>, v.v.
- Đề phòng lỗi khi đóng tab và mở tab trong trường hợp nhiều tab lồng nhau.
[html]<p><h1>Tiêu đề</p></h1>[/html]
Các tag HTML cơ bản
Có 6 loại đề mục tất cả với mức độ nhấn mạnh giảm dần từ <h1> đến <h6>.
- <h1>Tiêu đề bài viết</h1>
- <h2>Phần 1</h2>
- <h3>Chương 1</h3>
- <h4>Mục 1</h4>
- <h5>Đề mục </h5>
- <h6>Đề mục con</h6>
Các định dạng TEXT
- <b>Tô đậm</b>
- <i>In nghiêng</i>
- <strong>Tô đậm theo chuẩn web ngữ nghĩa</strong>
- <em>In nghiêm theo chuẩn web ngữ nghĩa</em>
Phân đoạn
- Thẻ p dùng để đánh dấu đoạn văn,tách riêng với những đoạn text bình thường–> <p>Đoạn văn bản</p>
- br là thẻ đơn, nên bạn không cần thẻ đóng –> Xuống dòng với <br>
- Trích dẫn từ nguồn khác –> <blockquote>Trích dẫn</blockquote>
Liên kết
- <a href=”địa chỉ liên kết”>Đây là một liên kết</a>
Chèn ảnh
- <img src=”đường dẫn đến ảnh” alt=”chú thích cho ảnh”/>
Ứng dụng cú pháp cơ bản của CSS
Khi tìm hiểu về HTML và CSS, chúng ta cần hiểu được cú pháp cơ bản của CSS bao gồm 3 phần: vùng chọn (selector), thuộc tính (property) và giá trị (value).
SELECTOR
Sau khi thêm một phần tử vào trang web, nó có thể được tạo kiểu bằng CSS. Vùng chọn có thể được tạo nên dựa trên nhiều yếu tố như định danh (id), tên lớp (class), quan hệ cha – con – hậu duệ…. Selector chỉ định chính xác phần tử nào trong HTML sẽ nhắm mục tiêu và áp dụng kiểu (chẳng hạn như màu sắc, kích thước và vị trí) cho chúng.
PROPERTY
Là yếu tố bạn muốn thay đổi ở các thẻ HTML thuộc vùng chọn. Tên thuộc tính nằm sau selector, trong dấu ngoặc nhọn {} và ngay trước dấu hai chấm, :. Có rất nhiều thuộc tính chúng ta có thể sử dụng, chẳng hạn như background, color, font-size, height, và width, và các thuộc tính mới thường được thêm vào.
p {
color: …;
font-size: …;
}
VALUE
Mỗi property sẽ yêu cầu một value khác nhau. Đó có thể là 1 từ khóa định sẵn (none, block), một tên màu hay mã màu (blue, red, #333, v.v), hay một giá trị kích thước tính bằng px, em, rem, %.
p {
color: red;
font-size: 20px;
}
Tổng kết
Khi đọc tới đây chắc các bạn cũng đã hiểu thêm về hai ngôn ngữ lập trình cũng như sự khác biệt giữa HTML và CSS.
Như đã thấy, hai ngôn ngữ HTML và CSS căn bản rất dễ dàng để tiếp cận, khi bạn thường xuyên làm việc và thao tác với nó gián tiếp qua ứng dụng soạn thảo. Việc thuần thục HTML và CSS là không thành vấn đề khi bạn cố gắng.
Vậy là WebNow đã mang đến những định nghĩa cũng như các ứng dụng cơ bản của hai ngôn ngữ HTML và CSS đến cho mọi người. Hy vọng với bài viết này, WebNow đã cho bạn có thêm thông tin lẫn kiến thức về sự thực dụng của HTML và CSS khi học tập và làm việc có liên quan đến quản trị website.
Nếu bạn có nhu cầu thiết kế website chuẩn SEO, hãy liên hệ với WebNow nhé!
Giữa hàng nghìn đơn vị cung cấp dịch vụ thiết kế website, WebNow tự hào là đơn vị uy tín, chất lượng hàng đầu. Dưới đây là những lí do mà bạn nên sử dụng dịch vụ thiết kế website của WebNow:
Đội ngũ kĩ thuật viên với bề dày kinh nghiệm trong lĩnh vực thiết kế website sẽ cung cấp cho bạn một website với:
- Tích hợp đầy đủ tính năng, thân thiện với người dùng.
- Chứng chỉ bảo mật an toàn SSL và HTTPS được cung cấp đầy đủ.
- Giao diện hiện đại, độc đáo, chuẩn SEO.
- Tính năng quản lý sản phẩm thông minh, linh hoạt.
- Dễ dàng quản lý và vận hành trang web.
Ngoài ra, dịch vụ chăm sóc khách hàng 24/7 của WebNow luôn nhanh chóng tiếp nhận và giải quyết những thắc mắc, băn khoăn về website của quý khách. Bên cạnh đó, các chương trình khuyến mãi, chính sách ưu đãi luôn được áp dụng để chào đón khách hàng mới và tri ân khách hàng cũ.
WEBNOW - NAY CODE MAI GIAO
Hotline: 02862.722.577
Email: hi@webnow.vn
Địa chỉ: 123/18A Nguyễn Xí, Phường 26, Quận Bình Thạnh, TP. Hồ Chí Minh