Học HTML cơ bản là việc bạn cần làm khi muốn thiết kế webiste dù là chuyên nghiệp hay nghiệp dư bởi HTML là một trong hai nền tảng quan trọng nhất cho việc xây dựng website, HTML có một vai trò quan trọng giúp bạn hiểu khái quát về một website và bạn có thể tự tùy biến giao diện trong việc thiết kếweb. Trọng serie học HTML cơ bản này tôi sẽ giới thiệu về HTML đến bạn một cách chi tiết nhất và giúp bạn nhanh chóng nắm bắt được nó thông qua các ví dụ cụ thể.
NỘI DUNG
HTML hay còn gọi là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo nên website, trên một website sẽ có nhiều trang và mỗi trang sẽ được đánh dấu là 1 tập tin HTML.
Một tài liệu hay tập tin HTML được tạo nên bởi các phần tử HTML được quy định bằng các cặp thẻ tag, các cặp thẻ này nằm trong cặp dấu ngoặc nhọn (ví dụ: <html>) và thường khai báo thành một cặp gồm thẻ mở và thẻ đóng (<strong> Xin chào các bạn </strong>) nhưng một số thẻ lại không có thẻ đóng và dữ liệu được khai báo nằm trong các thuộc tính ( ví du: <img>)
Sau khi một tập tin HTML được hình thành từ các phần tử HTML thì trình duyệt web sẽ đảm nhận việc xử lý nó. Trình duyệt web sẽ đọc hiểu nội dung HTML từ các thẻ bên trong và chuyển nó thành dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu.
HTML sẽ được khai báo bằng các phần tử bởi các từ khóa. Nội dung nằm trong cặp từ khóa là nội dung bạn muốn định dạng với HTML. Ví dụ:
1 | <p> serie học HTML cơ bản </p> |
Ngoài ra, trong các thẻ còn có các thuộc tính và thuộc tính sẽ được đặt trong thẻ mở đầu, giá trị của mỗi thuộc tính sẽ được đặt trong dấu ngoặc kép và cách tên thuộc tính bởi dấu (=). Ví dụ:
1 | <form action= "https://acuong.com"></form> |
HTML là một tập tin siêu văn bản nên bạn có thể sử dụng các chương trình soạn thảo văn bản không có chức năng định dạng văn bản để tạo ra tập tin HTML và sau đó lưu tập tin thành đuôi .html để trình duyệt web có thể đọc nó. Ví dụ trong Window bạn có thể sử dụng Notepad:
Nhưng tôi khuyên các bạn không nên sử dụng Notepad sửa tập tin HTML vì dễ bị lỗi hiển thị ký tự tiếng Việt. Các bạn có thể sử dụng rất nhiều các chương trình soạn thảo tương tự khác để soạn thảo tập HTML.
HTML là ngôn ngữ đánh dấu siêu văn bản nên vai trò của HTML trong website là xây dựng cấu trúc siêu văn bản cho website hoặc khai báo các tập tin hình ảnh, video, nhạc…
Điều đó không có nghĩa là HTML có thể tạo nên một website mà nó chỉ đóng vài trò hình thành cấu trúc trên website. Ví dụ webstie acuong.com được hình thành bởi:
HTML: Xây dựng cấu trúc và định dạnh siêu văn bản
CSS: Định dạng siêu văn bản thô tạo ra từ HTML thành bố cục website có màu sắc, ảnh nền…
PHP: Ngôn ngữ lập trình dùng để xử lý và trao đổi dữ liệu giữa máy chủ với trình duyệt
My SQL: Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc
Javascript: Tạo ra sự kiện tương tác với hành vi của người dùng
Trong serie học HTML cơ bản này, bạn chỉ cần hiểu đơn giản HTML giống như một bộ khung của website. Vì vậy dù là loại website gì, sử dụng ngôn ngữ lập trình gì để xử lý dữ liệu thì vẫn cần HTML để hiển thị nội dung ra cho người xem truy cập.
Phần tiếp theo của serie học HTML cơ bản, tôi sẽ giới thiệu tới bạn phần mềm Sublime Text dùng để soạn thảo văn bản HTML vì nó hỗ trợ soạn thảo các loại văn bản đơn giản cho đến các đoạn code phức tạp. Ngoài ra thì chương trình này khá là nhẹ, nhìn đẹp mắt và chuyên nghiệp.
Đầu tiên bạn mở Sublime Text lên và gõ vào một đoạn nội dung đơn giản như sau:
Sau đó bạn lưu lại tập tin này với đuôi .html và dùng trình duyệt để hiển thị, kết quả sẽ như sau:
Bạn sẽ thấy văn bản hiển thị ra trên trình duyệt không xuống dòng giống như trong văn bản được soạn thảo. Lí do ở đây là trình duyệt chỉ đọc hiểu các văn bản ở định dạng HTML và nó chỉ hiểu rằng đó một đoạn văn bản thô mà thôi.
Giờ bạn thử đặt các đoạn văn bản vào cặp thẻ <p></p> như thế này xem.
Bạn lưu lại và mở trình duyệt lên sẽ thấy nó hiển thị khác.
Bây giờ trình duyệt đã tự chuyển đổi các thẻ HTML sang định dạng siêu văn bản để hiển thị giống như khi soạn thảo rồi đó.
Giải thích thêm:
Thẻ <p> là thẻ Paragraph dùng để xác định một đoạn văn bản. Mỗi đoạn văn bản đặt trong cặp thẻ <p></p> được xem như là một dòng, mỗi dòng sẽ có những khoảng cách với nhau.
Một tài liệu web bằng HTML sẽ bao gồm những yếu tố sau:
Trong phần đầu tiên của tài liệu, bạn cần phải có một thẻ khai báo loại tập tin cho nó và ở đây tôi sẽ khai báo đây là tập tin HTML.
1 | <!DOCTYPE html> |
Trong thẻ <!DOCTYPE> ở đây tôi có một tham số là html, có nghĩa là tôi đã khai báo với trình duyệt rằng đây là tài liệu HTML. Ngoài ra bạn có thể tham khảo thêm một vài tham số khác tại đây.
Tiếp theo là cặp thẻ <html></html> với nhiệm vụ khai báo cho trình duyệt biết những nội dung bên trong cặp thẻ này là HTML. Bạn cũng có thể thêm một thuộc tính tên là cuong với giá trị là vi (<html cuong ="vi">
). Với thuộc tính tức là bạn đã khai báo cho trình duyệt biết ngôn ngữ mà bạn sử dụng cho website là tiếng Việt, bạn có thể tham khảo thêm các mã ngôn ngữ khác tại đây.
Các thông tin khai báo về webstie sẽ được đặt trong cặp thẻ <head></head>. Nội dung trong thẻ này sẽ bao gồm các thẻ cho khai báo thông tin website (meta), tên website (title), khai báo CSS (style), khai báo các đoạn Javascript (script) và một vài thông tin khác. Thông thường các thông tin được khai báo trong thẻ này sẽ không hiển thị thành dạng siêu văn bản trên web mà nó sẽ chứa những thông tin quan trọng về website.
Phần nội dung của bạn sẽ được đặt trong cặp thẻ <body></body>. Với cặp thẻ này thì trình duyệt có thể xác định được đây là phần thân của website, là nơi chứa toàn bộ nội dung siêu văn bản và media mà bạn muốn hiển thị lên website.
Như tôi đã giới thiệu trong serie học HTML cơ bản này, cặp thẻ khai báo thông tin website là cặp thẻ <head> sẽ có nhiệm vụ khai báo thông tin tài liệu website như tên tài liệu, tên tác giả, mô tả, khai báo CSS, khai báo Javascript,…
Ví dụ, bạn viết một tài liệu HTML như sau:
Thẻ <title></title> có chức năng khai báo tên tài liệu web mà bạn đang soạn thảo. Nó giúp trình duyệt hiển thị tên tài liệu web khi mở lên và các công cụ tìm kiếm như Google cũng hiển thị nội dung với cặp thẻ này để lấy tên tài liệu.
Ví dụ trong đoạn HTML trên tôi đã thiết lập tên tài liệu là Sy Cuong Blog – www.acuong.com, bạn lưu lại và mở trình duyệt lên nó sẽ hiển thị như sau:
Thẻ <meta> không có thẻ đóng giống như những thẻ khác mà có dấu / ở đằng trướ c ký tự > cuối cùng. Thẻ này có nhiệm vụ khai báo các dữ liệu trong tài liệu web như mô tả, từ khóa, tên tác giả, bảng mã ký tự sử dụng,…
Thẻ <meta> luôn khai báo kèm theo ít nhất một thuộc tính và mỗi thuộc tính phải có giá trị. Ví dụ:
1 | <meta charset="utf-8" /> |
Trong đó charset là tên thuộc tính và utf-8 là giá trị thuộc tính.
Trong thẻ <meta> thì thuộc tính charset có nhiệm vụ khai báo cho trình duyệt biết bảng mã ký tự siệu văn bản bên trong tài liệu là gì và thường là bảng mã UTF-8 cho tất cả các ngôn ngữ.
Nếu là thuộc tính name thì thẻ <meta> phải có thêm thuộc tính content và thuộc tính content dùng đê thiết lập nội dung cho thuộc tính name. Ví dụ:
1 | <meta name="author" content="Sy Cuong" /> |
Trong đó, giá trị của thuộc tính name hỗ trợ một vài giá trị có sẵn như sau:
Tiếp tục với serie học HTML cơ bản, chúng ta sẽ làm việc trong cặp thẻ <body></body> trong tài tài liệu web HTML để viết nội dung hiển thị trên website còn thẻ <head></head> chỉ dùng đến khi khai báo thông tin của tài liệu thôi.
Và trong phần này tôi sẽ giới thiệu cho các bạn chi tiết về các thẻ HTML dùng cho mục đích định dạng chữ viết và văn bản trong website như tiêu đề văn bản, in nghiêng, in đậm…
Tiêu đề (Headline) và đoạn văn bản (Paragraph) là 2 thành phần của web bạn cần phân biệt đúng khi sử dụng. Trong HTML thẻ tiêu đề là cặp thẻ <hn> trong đó n là các số tự nhiên từ 1-6, số càng nhỏ thì cấp độ càng lớn.
Ví dụ:
Bạn sẽ thấy ở trên thẻ <h1> có kích thước lớn nhất và thẻ <h6> có kích thước nhỏ nhất.
Còn đoạn văn bản thì được khai báo bằng cặp thẻ <p></p>. Văn bản đặt trong cặp thẻ này được hiểu là đoạn văn bản, mỗi đoạn văn bản này sẽ xuống dòng và cách nhau với tỷ lệ nhất định. Ví dụ:
Thỉnh thoảng trong văn bản bạn sẽ cần định dạng chữ viết in đậm, in nghiêng,…Và sau đây tôi sẽ giới thiệu cho các bạn các thẻ HTML với từng chức năng đó. Ví dụ:
Thẻ trích dẫn là thẻ thường dùng nếu viết báo hay phóng sự với nhiệm vụ định dạng một câu nói như một câu trích dẫn và thêm tên người trích dẫn chuyên nghiệp hơn, thẻ trích là thẻ <quote> và tên tác giả trích dẫn quy định là <cite>. Ví dụ:
Chỉ nên đặt thẻ <cite> nằm trong thẻ <quote>. Trình duyệt sẽ mặc định nội dung nằm trong thẻ <cite> sẽ được in nghiêng.
Trong HTML có thẻ định dạng sẵn là thẻ <pre></pre>. Nó được gọi là thẻ định dạng sẵn bởi trình duyệt đã tự động định dạng về kích thước chữ, khoảng cách, kiểu chữ cho các nội dung nằm bên trong thẻ.
Ngoài ra, khi viết văn bản trong cặp thẻ <pre> thì sẽ tự động định dạng việc xuống hàng mà không cần phải dùng đến thẻ <p>.
Với văn bản HTML thông thường bạn vẫn có thể thêm màu sắc cho chữ viết bằng thuộc tính style mà không cần đến CSS. Thuộc tính style có thể đặt trong bất kì thẻ nào và giá trị của thuộc tính là các thuộc tính của CSS.
Cấu trúc viết thuộc tính này là <tên thẻ style=” tên thuộc tính: giá trị”>
Để thiết lập màu nền bạn sử dụng thuộc tính background-color. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.
1 | <span style="color: yellow; background-color: black">Chữ có nền màu đen và màu chữ là vàng</span> |
Để thiết lập màu chữ bạn sử dụng thuộc tính color. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.
1 | <span style="color: red">chữ màu vàng</span> |
Kích thước bạn có thể sử dùng thuộc tính font-size và giá trị là số đi kèm đơn vị như px, %, pt, em
1 | <span style="font-size: 20px">Chữ có kích thước 20px</span> |
Nếu bạn muốn dùng font chữ khác thì sử dụng thuộc tính font-family
1 | <span style="font-family: Time New Roman">Font chữ Time New Roman</span> |
Bạn cũng có thể thêm font chữ dự phòng bằng cách khai báo thêm tên font chữ khác và ngăn cách bởi dấu phẩy. Ví dụ:
1 | <span style="font-family: Time New Roman, Arial">Font chữ Arial</span> |
Có nghĩa là nếu máy bạn không có font Time New Roman thì nó sẽ sử dụng font Arial.
Để căn lề bạn sử dụng thuộc tính text-align với các giá trị thuộc tính là left, right, center hoặc justify.
1 | <span style="text-align: center">Wellcome to my blog</span> |
Danh sách được sử dụng rất nhiều trong website bằng HTML như menu, danh sách thông tin nào đó đều được tạo nên bởi các thẻ tạo danh sách trong HTML.
Trong HTML có 3 kiểu danh sách sau:
Để khai báo danh sách theo kiểu sắp xếp bạn sử dụng cặp thẻ <ol></ol>, danh sách các mục con sẽ nằm trong cặp thẻ này và mỗi mục con được đặt trong cặp thẻ <li></li>. Ví dụ:
Ngoài ra, thẻ <ol> còn hỗ trợ thêm thuộc tính type, thuộc tính này cho phép bạn định dạng kiểu sắp xếp cho các mục con trong danh sách. Giá trị của thuộc tính type là 1, i, I, A, a.
Để khai báo một danh sách theo kiểu không sắp xếp, bạn dùng cặp thẻ <ul></ul> và mỗi mục con trong danh sách sẽ được khai báo bằng cặp thẻ <li></li>. Ví dụ:
Bạn có thể hiển thị thẻ <ul> theo kiểu khác bằng cách thêm thuộc tính style với thuộc tính CSS là list-style-type với các giá trị nhứ disc, square, circle, none.
Với kiểu này thì danh sách sẽ nằm trong cặp thẻ <dl></dl>, mỗi mục con sẽ được đặt trong cặp thẻ <dt></dt> và mô tả của mỗi mục con sẽ được khai báo bằng cặp thẻ <dd></dd>. Ví dụ:
Tiếp theo trong serie học HTML cơ bản, tôi sẽ hướng dẫn các bạn cách tạo những đường liên kết (link) đến một tài liệu khác thông qua địa chỉ đường dẫn đến tài liệu hoặc địa chỉ website. Để tạo được đường dẫn liên kết trong HTML các bạn dùng cặp thẻ <a></a>. Ví dụ:
1 | <a href="http://acuong.com" title="Sy Cuong Blog" target="_blank">ấn vào đây</a> |
Thẻ <a> có rất nhiều thuộc tính, bạn có thể tham khảo thêm tại đây, trong phần này tôi chỉ giới thiệu những thuộc tính thường dùng nhất.
Ý nghĩa thuộc tính:
Ngoài ra, nội dung trong cặp thẻ <a> có thể là nội dung siêu văn bản bao gồm các thẻ tiêu đề, hình ảnh,…
Liên kết neo là liên kết trong siêu văn bản dẫn đến một vị trí nào đó trong cùng tài liệu mà không cần mở một tài liệu mới. Liên kết neo sẽ bao gồm 2 phần:
Khi nhấp vào liên kết “kiếm tiền online có thực sự dễ dàng?”thì tự động nó sẽ nhảy đến khu vực được gán thuộc tính id=”kiem-tien-online”.
Các tập tin kỹ thuật số mà tôi nói đến trong serie học HTML cơ bản này là các tập tin hình ảnh, âm thanh, video. Khi chèn các tập tin này lên website bạn phải chú ý rằng các tập tin được chèn phải có đường dẫn trực tiếp đến tập tin đó.
Ví dụ: http://domain.com/file/image.png
Bạn sử dụng thẻ <image> để chèn ảnh vào HTML với tham số bắt buộc và thẻ này không có thẻ đóng. Ví dụ:
Ý nghĩa các thuộc tính:
Ngoài ra có thể thêm thuộc tính width và height để điều chỉnh kích thước hiển thị cho hình ảnh.
Để chèn video vào HTML bạn dùng cặp thẻ <video></video> như sau:
Trong cặp thẻ <video></video> có thẻ <source> với thuộc tính khai báo đường dẫn đến tập tin video và loại tập tin. Bạn có thể tham khảo thêm các thuộc tính khác của thẻ <video> tại đây.
Để chèn âm thanh vào HTML bạn sử dụng thẻ <audio>.
Ngoài các thẻ đặc trưng cho từng đối tượng kỹ thuật số như trên, bạn cũng có một cách khác để chèn các đối tượng kỹ thuật số vào HTML là dùng thẻ <object>. Thẻ này giúp bạn chèn các đối tượng kỹ thuật số vào HTML như Flash, Java, Audio, Video, PDF, ActiveX. Bạn có thể tham khảo thêm các thuộc khác của thẻ này tại đây.
Nếu bạn muốn nhúng trực tiếp một trang nào đó lên tài liệu HTML của bạn thì có thể dùng thẻ <iframe>:
Trong đó, src đường dẫn của trang bạn muốn nhúng lên tài liệu HTML, width và height là kích thước của khung hiển thị.
Cũng có một cách khác để chèn liên kết và bắt nó mở bằng frame trên website bằng cách sử dụng thuộc tính name trong thẻ <iframe> và thuộc tính target trong thẻ <a>. Ví dụ:
Chú ý: giá trị của thuộc tính target trong thẻ <a> phải giống với giá trị của thuộc tính name trong thẻ <iframe>.
Form nhập liệu sử dụng khá phổ biến khi thiết kế web bằng HTML, đặc biệt khi học các ngôn ngữ như PHP. Tạo form nhập liệu bao gồm tạo form đăng nhập, form đăng dữ liệu lên website…
Để tạo form nhập liệu trong HTML, bạn sử dụng cặp thẻ <form></form>, thẻ này sẽ bao gồm một số thuộc tính quan trọng và nội dung trong cặp thẻ này là các thẻ <input> để khai báo trường nhập liệu. Ví dụ về form đăng nhập bằng HTML:
Ý nghĩa các thuộc tính trong thẻ <form>:
Ý nghĩa các thuộc tính trong thẻ <input>:
Thẻ này dùng để khai báo các trường nhập dữ liệu, mỗi thẻ là một trường nhập dữ liệu khác nhau, nhưng kiểu nhập liệu của mỗi thẻ sẽ khác nhau tùy vào thuộc tính type.
Danh sách các giá trị của thuộc tính type:
Trên đây có rất nhiều giá trị của thuộc tính type và kiểu giá trị sẽ sử dụng nhiều nhất là kiểu text (trường nhập liệu dạng số và chữ) password (trường nhập mật khẩu) submit (trường tạo nút gửi dữ liệu đi) textarea ( trường nhập liệu giống kiểu text nhưng có thể xuống hàng)
Bạn có thẻ đọc thêm về các thuộc tính của thẻ <input> tại đây.
Trong serie học HTML cơ bản này, các bạn đã hiểu được HTML là gì, vai trò của HTML và có thể dùng nó để soạn thảo những tài liệu HTML phục vụ việc thiết kế web. Hy vọng bạn sẽ thiết kế được một website như ý. Chúc bạn thành công!
VIP MEMBER Xin chào các bạn. Tôi là Hưng, tôi có niềm đam mê cháy bỏng với công việc kiếm tiền online và thế giới internet. Tôi khao khát học hỏi những kiến thức mỗi ngày và sẵn lòng chia sẻ những gì mà tôi biết. Xem thêm bài viết Theo dõi Hưng