HTML là gì? Div là gì? Span là gì? Những điều cơ bản mà 1 nhà lập trình wed đều phải học qua

Để thiết kế xây dựng website, bạn nên biết về HTML – công nghệ tiên tiến cơ bản được sử dụng để xác lập cấu trúc của một website, điều này đặc biệt quan trọng quan trọng. HTML được sử dụng để chỉ định xem nội dung web của bạn có được nhận dạng là một đoạn văn, list, tiêu đề, link, hình ảnh, trình phát đa phương tiện, biểu mẫu hay một trong nhiều thành phần có sẵn khác hay thậm chí còn là một thành phần mới mà bạn xác lập hay không .

HTML là gì?

HTML ( viết tắt của từ Hypertext Markup Language, hay là “ Ngôn ngữ Đánh dấu Siêu văn bản ” ). HTML không phải là 1 ngôn từ lập trình .
Để hiểu rõ hơn về HTML ta nghiên cứu và phân tích từng từ của HTML .

Hypertext (siêu văn bản): Là loại văn bản tích hợp nhiều dạng dữ liệu khác nhau như: văn bản, âm thanh, hình ảnh, video,… và các siêu liên kết đến các siêu văn bản khác. Siêu văn bản là văn bản của một tài liệu có thể được truy tìm không theo tuần tự. Người đọc có thể tự do đuổi theo các dấu vết liên quan qua suốt tài liệu đó bằng các mối liên kết xác định sẵn do người sử dụng tự lập nên.

Markup: Ghi chú, đánh dấu.

Giống như việc bạn đọc 1 quyển sách và ghi chú hoặc lưu lại chúng lại .

Ví dụ: đây là markup

cấu tạo Markup
Các thành phần xung quanh nội dung “ đây là markup ” được gọi là markup .

Language: ngôn ngữ.

Các thành phần HTML cho trình duyệt biết cách hiển thị nội dung .
Các thành phần HTML gắn nhãn những phần nội dung như “ đây là một tiêu đề ”, “ đây là một đoạn văn ”, “ đây là một link ”, v.v.
Cấu tạo 1 thành phần HTML .
cấu tạo phần tử HTML

Opening tag: Thẻ mở, thẻ này bao gồm tên của phần tử, được bao bọc trong dấu ngoặc nhọn “”. Thẻ này đánh dấu nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực.

Content : Nội dung, là phần được viết sau thẻ opening tag, ở ví dụ này thì content chính là 1 đoạn văn bản .
Closing tag : Thẻ đóng, thẻ này được bảo phủ trong dấu ngoặc nhọn “

”  thẻ này có tác dụng đánh dấu nơi kết thúc hoặc nơi phần tử hết hiệu lực.

Khối phần tử (Block level element) và nội tuyến HTML.

Phần tử khối là bất kể thành phần nào khởi đầu một dòng mới ( ví dụ : đoạn văn ) và sử dụng hàng loạt chiều rộng của trang hoặc vùng chứa. Phần tử khối hoàn toàn có thể chiếm một dòng hoặc nhiều dòng và có dấu ngắt dòng trước và sau thành phần. Nói dễ hiểu hơn thành phần khối thường là những thành phần cấu trúc trên trang .
Ví dụ : 1 thành phần khối đại diện thay mặt hoàn toàn có thể đại diện thay mặt cho tiêu đề, đoạn văn, menu điều hướng, v.v. 1 thành phần khối sẽ không được lồng vào bên trong thành phần nội tuyến, nhưng những thành phần cấp khối hoàn toàn có thể lồng được vào nhau .
Phần tử nội tuyến là thành phần bên trong khối thành phần và thường được dùng để bao xung quanh 1 đoạn văn bản. Một thành phần nội tuyến không mở màn trên một dòng mới .
Một thành phần nội tuyến chỉ chiếm nhiều chiều rộng khi thiết yếu .

Thẻ Div trong html là gì?

Thẻ

trong HTML là từ viết tắt của division (nghĩa là khu), thẻ

nó không ảnh hưởng đến nội dung hoặc bố cục nó thường được sử dụng để nhóm các phần tử HTML, được sử dụng để tạo 1 khu vực kiểu block level element để tạo kiểu với CSS hoặc thao tác với các tập lệnh.

Thẻ Div

Span html là gì?

Thẻ Span trong HTML được coi là một thành phần nội tuyến, dùng để định dạng cho chữ hoặc một đoạn văn bản. Nó tựa như như thẻ div nhưng thẻ div được sử dụng cho những khối thành phần trong khi span được sử dụng cho những thành phần nội tuyến. Nó đa phần được sử dụng bất kể khi nào người dùng muốn nhóm những thành phần nội tuyến vào cấu trúc mã của họ .
Thẻ Span được sử dụng để tạo kiểu cho những nội dung đơn cử bằng cách sử dụng lớp thành phần hoặc thuộc tính id. Không thể tự triển khai đổi khác trực quan bằng cách sử dụng thẻ span trong tài liệu HTML. Việc sử dụng những thẻ span vào mã của bạn sẽ giúp giảm những thuộc tính mã và HTML .
Thẻ Span

Các yếu tố lồng vào nhau (Nesting elements).

Các phần tử có thẻ đặt bên trong các phần tử khác, có tác dụng như để nhấn mạnh 1 tạo sự chú ý đối với User.

Phần tử làm tổ
Phần tử lồng trên chrome

Trong ví dụ trên Isinhvien đã mở 1 phần tử

trước, sau đó mở phần tử , để thích hợp chúng ta có thể xem phần tử là 1 phần tử cấp của phần tử

nên khi đóng thẻ chúng ta phải đóng phần tử trước, rồi sau đấy đóng thẻ

. Phần tử “nóng” có tác dụng tô đậm từ “nóng” trong đoạn văn bản “thời tiết hôm nay thật nóng bức”.

Các phần tử rỗng (empty element).

Tuy nhiên, không phải toàn bộ những thành phần đều tuân theo thẻ mở và thẻ đóng, những thành phần chỉ này gọi là những thành phần rỗng ( empty element ) .
code phần tử rỗng
Điều này sẽ xuất ra như sau :
tôi thích ăn kem

: thẻ được sử dụng để xác định văn bản nhấn mạnh. Nội dung bên trong thường được hiển thị bằng chữ nghiêng.

Attributes .

Attributes là 1 thuộc tính của thẻ html, chúng bổ trợ thuộc tính cho chính thẻ đó, ví dụ : địa chỉ ID, khoảng cách, v.v.
Thuộc tính
Như ta thấy trong thẻ opening tag có địa chỉ “ id = ” menu ” ” id chính là attribute name ( tên của attribute ), menu chính là attribute value ( giá trị, tên của attribute ) ở đây chính là tên của địa chỉ ID .
Một thuộc tính phải có :

  • Khoảng trắng giữa nó và tên phần tử. (Đối với một phần tử có nhiều thuộc tính, các thuộc tính cũng phải được phân tách bằng dấu cách.).
  • Tên thuộc tính, theo sau là một dấu bằng.
  • Một giá trị thuộc tính, được bao bọc bằng dấu ngoặc kép mở và đóng.

Chèn thuộc tính vào 1 phần tử HTML.

Isinhvien sẽ lấy 1 ví dụ đơn cử để đi sâu vào lý giải quy trình chèn thuộc tính vào 1 phần từ HTML .
Ví dụ chèn thuộc tính
Thẻ chính là thẻ thành phần của html chứa những thuộc tính href, title, target .
href : là đường link ( URL ) dẫn tới website đích .
title : là tiêu đề cho đường link .
target : là những tùy chọn .
_blank : chuyển link sang 1 tab mới .
_self : chuyển link trên tab hiện tại .

_parent: mở tab cha của tb hiện tại.

_top : thì nó sẽ nhảy tới tab hiện tại và thường dùng trong iframe khi muốn thoát khỏi iframe và chạy tới trang gốc .

Kết luận

Vậy là các bạn đã cùng Isinhvien tìm hiểu HTML và những điều liên quan cần học. Nếu thấy bài này đáp ứng đủ những gì bạn cần tìm, hãy cho isinhvien một like, share hoặc comment để chúng mình có thêm động lực tổng hợp nhiều kiến thức hay hơn nữa nhé!