• Trang chủ
  • Khoá học
    • Lập trình trẻ em (từ 8 – 15 tuổi)
      • Lập trình Scratch Cơ bản
      • Lập trình Scratch Nâng cao
      • Robotics Cơ bản
      • Robotics Nâng cao
      • Lập trình Python Cơ bản
    • Lập trình viên chuyên nghiệp (từ 12 tuổi trở lên)
      • Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool
      • Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)
      • Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool
    • Đại học trực tuyến FUNiX (FPT)
      • Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)
  • Sự kiện
  • BLOG
  • Hoạt động
  • Liên hệ
Hotline
0355 00 77 38
quangphuong@sogo.edu.vn
SOGOSOGO
  • Trang chủ
  • Khoá học
    • Lập trình trẻ em (từ 8 – 15 tuổi)
      • Lập trình Scratch Cơ bản
      • Lập trình Scratch Nâng cao
      • Robotics Cơ bản
      • Robotics Nâng cao
      • Lập trình Python Cơ bản
    • Lập trình viên chuyên nghiệp (từ 12 tuổi trở lên)
      • Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool
      • Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)
      • Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool
    • Đại học trực tuyến FUNiX (FPT)
      • Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)
  • Sự kiện
  • BLOG
  • Hoạt động
  • Liên hệ

    Lập trình Web

    • Trang chủ
    • Blog
    • Lập trình Web
    • Bài 2 | HTML element – Các thành phần cơ bản của HTML – SOGO xSchool

    Bài 2 | HTML element – Các thành phần cơ bản của HTML – SOGO xSchool

    • Mục Lập trình Web
    • Date 03/07/2019
    • Ý kiến Chưa có ý kiến nào
    HTML-element

    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.

    <tên thẻ>Nội dung…</tên thẻ>

    Thí dụ:

    <p>My first paragraph.</p>
    Trong đó thẻ <p> định nghĩa cho đoạn văn. Bắt đầu bằng thẻ <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-structure-1

    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):

    html-tieu-de-heading

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-tieu-de-headings

    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):

    code--html-paragraph-doan-van

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-doan-van-paragraph

    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):

    code-html-chen-link-href

     

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-link-href

    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):

    code-html-hinh-anh-image

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    hinh-anh-chen-trang-web

     

    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):

    code-html-nut-click-button

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-nut-click-button

    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):

    code-html-unorder-order-list-danh-sach

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web html unordered ordered list danh sach

    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):

    code-html-horizontal-rules

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-horizontal-rules

    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):code-html-line-break

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-line-break

    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):

    code-html-display

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-display

    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):

    code-html-style

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-style

    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):

    code-html-title-paragraph-doan-van

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-title-paragraph-doan-van

    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):

    code-html-single-double-quote

    Website (file “index.html” được mở bằng trình duyệt Chrome):

    web-html-double-quote

    web-html-sinlge-quote

     

    Nguồn tham khảo: w3school

    *************

    Xem thêm:

    1. Lập trình web là gì?
    2. HTML là gì?
    3. Học lập trình web bắt đầu như thế nào?
    4. 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

    • Chia sẻ:
    admin

    Bài trước

    Bài 1 | Xây dựng website đơn giản với HTML - SOGO xSchool
    03/07/2019

    Bài sau

    Bài 3 | HTML style – Định dạng nội dung trang web – SOGO xSchool
    08/07/2019

    Bạn cũng có thể thích

    json-la-gi
    Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
    23 Tháng Mười Một, 2019
    javascript-dom-la-gi
    Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
    23 Tháng Mười Một, 2019
    javascript-if-else
    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    9 Tháng Mười Một, 2019

    Ý kiến Hủy

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Tìm kiếm

    Chuyên mục

    • Học tiếng Anh (1)
    • Lập trình Android (1)
    • Lập trình Java (2)
    • Lập trình trẻ em (13)
    • Lập trình viên chuyên nghiệp (18)
    • Lập trình Web (37)
    • Tin tức (15)
    • Uncategorized (2)

    CÁC KHÓA HỌC

    Lập trình Python Cơ bản

    Lập trình Python Cơ bản

    2.800.000₫ 2.600.000₫
    Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool

    Lập trình viên Blockchain (Blockchain Developer) – SOGO xSchool

    Free
    Robotics Nâng cao

    Robotics Nâng cao

    2.800.000₫ 2.600.000₫
    Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)

    Lập trình viên ứng dụng Ô tô (Học 6 tháng đến 1 năm – Đi làm ngay)

    Free
    Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)

    Kỹ sư phần mềm (Cử nhân) – Học trực tuyến (Online)

    Free
    Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool

    Lập trình viên Java Developer (Học 6 tháng – 1 năm – Đi làm ngay) – SOGO xSchool

    Free
    Robotics Cơ bản

    Robotics Cơ bản

    2.800.000₫ 2.600.000₫
    Lập trình Scratch Nâng cao

    Lập trình Scratch Nâng cao

    2.800.000₫ 2.600.000₫
    Lập trình Scratch Cơ bản

    Lập trình Scratch Cơ bản

    2.800.000₫ 2.600.000₫

    BÀI VIẾT MỚI NHẤT

    Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
    23Th112019
    Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
    23Th112019
    Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO
    09Th112019
    Bài 31 | Javascript Object – Javascript cơ bản (Phần 7) – SOGO
    09Th112019
    Bài 30 | Javascript Array – Javascript cơ bản (Phần 6) – SOGO
    05Th102019
    logo-sogo

    0937117714 (Ms. Hương)

    0935710181 (Mr. Quang)

    info@sogo.edu.vn

    SoGo

    • Về chúng tôi
    • Bài viết
    • Liên hệ
    • Tuyển dụng

    Links

    • Khoá học
    • Sự kiện
    • Hoạt động
    • FAQs

    Education Website by QuangPhuong. Powered by SOGO.