HTML cơ bản: Giới thiệu về HTML
Mấy tuần trước có một bạn gửi mail cho mình và muốn mình hướng dẫn qua một chút về thiết kế web cơ bản. Mặc dù đã có nhiều link hướng dẫn và tài liệu để học nhưng nhiều chỗ vẫn còn khó hiểu nên mình quyết định làm một series ngắn để giới thiệu cơ bản về thiết kế web: HTML cơ bản, CSS cơ bản, Javascript cơ bản. Các bài trong series mình sẽ làm ngắn gọn, cơ bản, chú trọng và một số điểm chính vì các tài liệu cơ bản cũng nhiều nhưng diễn giải khá nan man.
HTML là nền tảng cơ bản nhất mà bạn cần phải nắm được trước khi học thiết kế web. Nó là một ngôn ngữ lập trình web tĩnh cơ bản. HTML là viết tắt của Hyper Text Markup Language(ngôn ngữ đánh dấu siêu văn bản). Ngôn ngữ này sử dụng các tag(thẻ) để mô tả trang web. Có khá nhiều những phần mềm html editor giúp bạn có thể lập trình được html thậm chí dùng notepad cũng có thể làm được(nhưng khá cùi ;)) ). Bạn hãy chọn một phần mềm nào đó, ở đây mình giới thiệu một phần mềm đó là Dreamweaver. Đây là một editor rất tốt được hỗ trợ nhiều và có thể lập trình nhiều ngôn ngữ web khác như ASP, ASP.NET, PHP...
1. Cấu trúc tài liệu HTML.
Cấu trúc của một tài liệu HTML
<html><head><title></title></head><body>các thẻ trình bày nội dung khác trong đây.</body></html>
- Tài liệu luôn bắt đầu bằng thẻ <html> và kết thúc bằng </html>. Bạn lưu ý, mỗi thẻ mở đều có một thẻ đóng tương ứng đi kèm.
- Trong một số trường hợp không cần thẻ đóng như các thẻ <p>. Và trong các trường hợp khác thiếu thẻ đóng trình duyệt vẫn hiển thị bình thường. Nhưng điều này là không tốt và nên tránh.
-Trong thẻ html sẽ có <head></head>, thẻ này là thẻ không bắt buộc nhưng nên có, và thẻ <body></body> đây là thẻ bắt buộc và nó là phần chính của tài liệu html.
- Để khai báo việc tài liệu hợp chuẩn theo tiêu chuẩn của w3c thì chúng ta có dòng khai báo thẻ doctype trên cùng của tài liệu html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. Thành phần thẻ head
- Trong thẻ head có chứa các thẻ meta dùng để mô tả về nội dung tổng quan của tài liệu. Ví dụ:
<meta content='description about page' name='description'/><meta content='keyword' name='keywords'/><meta content='index, follow' name='robots'/><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
- Thẻ title được nằm trong thẻ head và chứa title của trang đó. Thẻ title khá quan trọng trong việc SEO nên thẻ này các bạn đừng quên nha.
<title>welcome to webzoomz.info </title>
- Thẻ script: việc ứng dụng các script : javascript, jquery...vào trang web hiện nay là rất cần thiết và để có thẻ sử dụng chúng thì chúng ta có thể khai báo trong thẻ head (điều này không bắt buộc, chúng ta có thể khai báo trong body cũng được).
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
- Thẻ style: để làm cho trang web trở lên sinh động hơn thì việc ứng dụng CSS là không thể thiếu. Thẻ này tương tự với thẻ script, có thể khai báo trong thẻ head hoặc trong body đều được.
<style type="text/css">p{ color: #3e4ede};</style>
- Thẻ link: thẻ link là một liên kết tới một file bên ngoài.
<link type='text/css' rel='stylesheet' href='bundle.css' />
3. Body.
Thẻ body chứa các thành phần chính của trang web. Có rất nhiều thẻ được ứng dụng trong body để thể hiện nội dung trang web như <div>, <p>, <a>....
4. Các thành phần khác.
Trong một tài liệu HTML có thể có rất nhiều những tag và nội dung. Để ghi nhớ và phân biệt nội dung trong các code html đó chúng ta cần đến những thẻ comment(chú thích).
<!-- comment content in many lines -->// comment on one line
0 nhận xét:
Đăng nhận xét