Bài 2 | HTML element – Các thành phần cơ bản của HTML – SOGO xSchool
HTML element thông thường được bắt đầu bởi các opening tag và kết thúc bởi closing tag. HTML elements định nghĩa các thành phần nội dung thể hiện của web.
Thí dụ:
<p>My first paragraph.</p><p> và kết thúc bằng thẻ </p>.Cấu trúc HTML Documents
Tất cả các file HTML đều phải bắt đầu bằng khai báo version mà ngôn ngữ HTML đang được sử dụng: <!DOCTYPE html>.
Văn bản HTML được bắt đầu bằng thẻ <html> và kết thúc bằng thẻ </html>.
Thành phần (element) <head> chứa đựng metadata. HTML metadata là dữ liệu thông tin về văn bản HTML đang được soạn thảo. Metadata không được thể hiện trên trang web. Thí dụ như thẻ <title> dùng để định nghĩa tên (title) của trang web sẽ được đặt trong phần thẻ <head> này.
Nội dung của trang web chỉ được thể hiện trong phần bắt đầu từ thẻ <body> và kết thúc bằng thẻ </body>.
HTML Element – Headings
Thành phần tiêu đề (heading) bao gồm các thẻ từ <h1> đến <h6>. Trong đó <h1> là tiêu đề quan trọng nhất (kích cỡ chữ lớn nhất) và thẻ <h6> dành cho tiêu đề ít quan trọng nhất (kích cỡ chữ nhỏ nhất):
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
HTML Element – Paragraphs
Trong HTML các đoạn văn được định nghĩa bằng thẻ <p> .
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
HTML Element – Links
Trong HTML các đường link được định nghĩa bằng thẻ <a> kết hợp với thuộc tính (attribute) href .
Attributes được sử dụng để cung cấp thông tin bổ sung cho các thành phần (elements) trong HTML.
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
HTML Element – Images
Để chèn các hình ảnh vào trang web chúng ta sử dụng thẻ <img> .
kết hợp thông báo bổ sung các thuộc tính như: đường dẫn file hình (src), đoạn văn thay thế trong trường hợp không tìm được hình (alt), kích cỡ chiều rộng width, và chiều cao height của hình ảnh.
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
HTML Element – Buttons
Trong HTML button (nút bấm click) được định nghĩa bằng thẻ <button> :
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
HTML Element – Lists
Danh sách (list) trong HTML được định nghĩa bằng thẻ <ul> (unordered/không thứ tự) hoặc thẻ <ol> (ordered/có thứ tự), theo sau là các thẻ <li> :
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
HTML Horizontal Rules
Thẻ <hr> quy định đường gạch ngang trong trang HTML, được dùng để ngăn cách nội dung trong trang HTML.
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
HTML Line Break
Thành phần <br> dùng để ngắt dòng (xuống dòng) giữa đoạn văn.
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
HTML Display
Trong văn bản HTML, bạn không thể thêm các khoảng trắng giữa các câu chữ nội dung trong trang.
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
Style Attribute
Thuộc tính style được sử dụng để định dạng kiểu thể hiện của các thành phần HTML như: màu sắc, font chữ, kích cỡ, v.v…
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
Title Attribute
Thuộc tính title được thêm vào thành phần <p> (paragraph) để thể hiện thêm tựa đề của đoạn văn.
Ví dụ sau đây, khi người dùng di chuyển con trỏ chuột lên trên đoạn văn sau thì sẽ xuất hiện 1 khung nhỏ “I’m a tooltip” ngay phía dưới con trỏ.
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
Single Quote vs Double Quote
Nháy kép được sử dụng nhiều hơn nháy đơn trong HTML.
Một số trường hợp ta phải dung nháy đơn nếu trong nội dung văn bản có nháy kép, hoặc ngược lại.
Code (lưu file tên “index.html”, soạn thảo bằng phần mềm Sublime Text editor):
Website (file “index.html” được mở bằng trình duyệt Chrome):
Nguồn tham khảo: w3school
*************
Xem thêm:
- Lập trình web là gì?
- HTML là gì?
- Học lập trình web bắt đầu như thế nào?
- Bài 1 | Xây dựng trang web đơn giản với HTML
—————————————————————————————
SOGO – xSchool
Đối tác của trường Đại học trực tuyến FUNiX (thuộc khối giáo dục FPT Education).
SOGO hợp tác cùng FUNiX triển khai chương trình đào tạo Lập trình viên chuyên nghiệp – Java Developer dựa trên cơ sở hoàn thành 03 chứng chỉ đầu tiên của chương trình Cử nhân Đại học trực tuyến FUNiX (tổng cộng 8 Chứng chỉ để lấy bằng Đại học FPT).
Mục tiêu của chương trình này là giúp sinh viên có thể hoàn thành 3 chứng chỉ đầu trong thời gian từ 10 – 12 tháng và có thể đi làm ngay tại FPT Software với chức danh Java Developer Fresher.
Sau khi đi làm, sinh viên vẫn có thể tiếp tục học để hoàn thành 5 chứng chỉ còn lại của FUNiX và lấy bằng Đại học FPT (được Bộ giáo dục và đào tạo công nhận).
Chi tiết chương trình trở thành Java Developer chỉ trong 10 tháng.
Liên hệ ngay để biết thêm chi tiết đây:
Hotline: 0355 00 77 38
Facebook (SOGO xSchool): sogoxschool
Tag:chen hinh anh, chen link, double quote, heading, horizontal rule, href, html, html button, html display, html document, html element, html heading, html image, html line break, html link, html list, html paragraph, html style, html title, img, lap trinh html, lap trinh web, single quote, SOGO, sogo xschool, src, the tag, tieu de, trang web, web don gian
Bạn cũng có thể thích
Bài 10 | CSS là gì? Thiết kế web nâng cao bằng CSS – SOGO xSchool
Bài 9 | Tạo responsive web layout bằng HTML và CSS – SOGO xSchool
