HTML cho người mới bắt đầu:

Dòng thời gian của công nghệ web


2009

2005

2002

2000

1998

1997

1996

1994

1991

HTML5

AJAX

Thiết kế web không cần bàn

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

Giới thiệu

Nếu bạn muốn trở thành một quản trị trang web và tìm hiểu cách tạo một trang web, bạn có thể thấy triển vọng của việc nắm bắt với HTML khá khó khăn.

Tuy nhiên, đây là điều không thể tránh được vì phần lớn các trang đích mà bạn truy cập sẽ được viết và cấu trúc bằng các yếu tố HTML. Thực tế, HTML bây giờ được sử dụng bởi hơn 74% của tất cả các trang web được biết đến, trong khi ngôn ngữ này cũng giúp nâng cao mọi thứ, từ thiết kế trang web của bạn đến chất lượng nội dung mà nó có.

Trong hướng dẫn này, chúng tôi sẽ tìm hiểu các nguyên tắc cơ bản của HTML và các ứng dụng tiềm năng của nó, trước khi xem các ví dụ về các yếu tố riêng lẻ mà bạn sử dụng khi mã hóa trang web của mình.

HTML là gì?

Tỷ lệ trang web sử dụng các danh mục con khác nhau của HTML

các danh mục con khác nhau của tỷ lệ phần trăm HTML

Nói một cách đơn giản, HTML đại diện cho ngôn ngữ đánh dấu tiêu chuẩn để tạo các trang web trực tuyến. Nó là viết tắt của Hyper Text Markup Language, và chức năng chính nhất của nó là thiết lập cấu trúc, bố cục và trình bày của các trang đích riêng lẻ. Mặc dù các trình duyệt web không trực tiếp hiển thị ngôn ngữ HTML, nhưng nó đóng vai trò then chốt trong việc giúp tạo một trang web hiển thị, dễ truy cập và dễ sử dụng.

HTML cũng được củng cố bởi một số yếu tố riêng lẻ, dần dần xây dựng các trang web, cấu trúc việc trình bày nội dung và đưa trang web của bạn vào cuộc sống. Các yếu tố này được tạo và chứa trong ‘thẻ, trong đó xác định các phần nội dung thay thế như tiêu đề, đoạn văn và các ví dụ tương tự.

Chúng tôi sẽ khám phá các yếu tố này và cấu trúc của chúng một cách chi tiết hơn dưới đây, đồng thời xem xét cách chúng có thể được cá nhân hóa để giới thiệu màu sắc, liên kết và kiểu chữ biến đổi cho trang web của bạn.


HTML được sử dụng ở đâu?

Các trang web phổ biến sử dụng HTML

HTML được sử dụng ở đâu

Như chúng ta có thể thấy, ứng dụng phổ biến nhất cho HTML là thiết kế các trang đích riêng lẻ tạo nên trang web của bạn. Đây không phải là ứng dụng duy nhất của công cụ mã hóa phổ biến, tuy nhiên, hiểu được cách sử dụng bổ sung của nó sẽ giúp bạn tận dụng tối đa ngôn ngữ như một quản trị trang web mới. Vì vậy, đây là một số cách khác để áp dụng HTML:

  • Tạo các yếu tố có thể tùy chỉnh trong một trang hiện có

    Nếu bạn có ý định cho phép bình luận bài đăng trên blog hoặc nội dung do người dùng tạo ra trên trang web của bạn, bạn có thể sử dụng các đoạn mã HTML để kích hoạt điều này. Các yếu tố này sẽ cho phép người dùng nhấn mạnh từ khóa, liên kết nhúng và định dạng nhận xét tùy thuộc vào các hạn chế mà bạn đặt ở vị trí điều hành.

  • Tạo nội dung bổ sung cho email

    Email cũng sử dụng HTML làm ngôn ngữ cho các tin nhắn văn bản phong phú, có tính năng liên kết, văn bản và một loạt các yếu tố khác không thể được nêu trong văn bản đơn thuần. Vì vậy, nếu bạn đang muốn chia sẻ một ebook liên quan đến trang web của bạn thông qua email, bạn có thể sử dụng HTML để tối ưu hóa tác động của tin nhắn của bạn.

  • Hiểu tài liệu trợ giúp ngoại tuyến được cài đặt trên máy tính của bạn

    Thật thú vị, HTML được sử dụng làm định dạng cho các tài liệu trợ giúp dựa trên máy tính có thể truy cập ngoại tuyến. Do đó, kiến ​​thức cơ bản về HTML có thể giúp bạn hiểu các vấn đề với phần cứng của bạn và giải quyết chúng nhanh hơn, điều này có thể đảm bảo rằng bạn có thể khôi phục trang web của mình nhanh hơn trong các trường hợp khi nó ngoại tuyến.

HTML & CSS
Xem HTML & CSS [Bảng cheat]

Cấu trúc trang HTML

</strong><br/> <strong>
Nội dung trang

Các phần tử html, phần đầu và phần thân là một phần của đặc tả HTML từ giữa những năm 1990 và cho đến một vài năm trước, chúng là các phần tử chính được sử dụng để tạo cấu trúc cho các tài liệu HTML.
Tuy nhiên, tình hình đã thay đổi đáng kể trong vài năm qua khi HTML5 đã thêm một loạt các thẻ mới có thể được sử dụng để thêm ý nghĩa ngữ nghĩa phong phú vào cấu trúc của tài liệu HTML.

Các tài liệu HTML được yêu cầu để bắt đầu với Tuyên bố loại tài liệu (không chính thức, một văn bản doctype). Trong các trình duyệt, doctype giúp xác định chế độ kết xuất. HTML5 không định nghĩa một DTD; do đó, trong HTML5, khai báo doctype đơn giản và ngắn gọn hơn.


Trước khi bạn có thể xây dựng một trang html, bạn cần có những điều cơ bản.

Thông thường, một trang sẽ được tạo thành từ ba yếu tố cấu trúc:

1. Tiêu đề: Tiêu đề chứa nội dung có liên quan đến tất cả các trang trên trang web của bạn, chẳng hạn như logo hoặc tên trang web và hệ thống điều hướng. Tiêu đề được nhìn thấy trên mỗi trang.

2. Cơ thể chính: Điều này chiếm diện tích lớn nhất trên một trang web. Nó chứa nội dung cụ thể cho trang đang xem.

3. Chân trang: Nội dung chân trang thường bao gồm thông tin liên lạc, địa chỉ giao hàng hoặc thông báo pháp lý. Giống như tiêu đề, chân trang xuất hiện trên mọi trang, nhưng nó được định vị ở phía dưới.

Đây là những gì các yếu tố cấu trúc cơ bản trông giống như khi chúng kết hợp với nhau:


Bạn có thể đặt văn bản hoặc mã ở đây, như một
Mã theo dõi Google Analytics cho
thí dụ.

Phần chính của trang của bạn đi
đây. Điền nó với văn bản và hình ảnh!

Ở đây, một ví dụ khác, sử dụng thẻ tiêu đề và thẻ đoạn để cấu trúc nội dung một cách thẩm mỹ. Thêm vào đó, chúng tôi đã ném vào thẻ chân trang cho nội dung bên dưới phần chính của trang:


Bạn có thể đặt văn bản hoặc mã ở đây, như một
Mã theo dõi Google Analytics cho
thí dụ.

Tiêu đề đầu tiên của tôi

Chào mừng đến trang web của tôi!

thông tin liên lạc có thể vào đây


Thẻ HTML

Thẻ HTML

Điểm khởi đầu cho bất kỳ mã HTML nào là các thẻ riêng lẻ, có thể được sử dụng để tạo tất cả các yếu tố quan trọng và giúp cấu trúc các trang web của bạn. Dưới đây, chúng tôi sẽ xem xét các thẻ phổ biến nhất trước khi chúng tôi khám phá cách chúng có thể được tận dụng để tạo các yếu tố cụ thể, trên trang:

Thẻ tiêu đề

Tất cả các tài liệu trực tuyến, bao gồm các trang web, bắt đầu với một tiêu đề. Chúng được xây dựng bằng các thẻ HTML, với ngôn ngữ hiện cho phép tối đa sáu yếu tố có kích thước thay đổi cũng cho phép bạn cấu trúc nội dung của mình với các tiêu đề, phụ đề và dòng văn bản được tô đậm. Để bắt đầu tiêu đề của bạn, bạn chỉ cần tiền tố văn bản có liên quan với

,

,

,

,

hoặc là
thẻ tùy thuộc vào kích thước mong muốn.
Sau đó, bạn phải áp dụng thẻ đóng ở cuối tiêu đề để đóng gói văn bản và sẽ được hiển thị như sau ở định dạng HTML:

Đây là nhóm 1

Đây là nhóm 2

Đây là nhóm 3

Đây là nhóm 4

Đây là nhóm 5

Đây là nhóm 6

Các công nghệ thẻ HTML hàng đầu
chia sẻ trên web

0,27%

HTML5
Thẻ vải

0,29%

HTML5
Thẻ âm thanh

0,69%

HTML5
Thẻ video

3,1%

HTML5
Thẻ SVG

6,54%

HTML5
Thẻ nhúng


Sau khi xác nhận, điều này sẽ chuyển thành thẩm mỹ sau trên trang web của bạn’trang đích:

Đây là nhóm 1

Đây là nhóm 2

Đây là nhóm 3

Đây là nhóm 4

Đây là nhóm 5

Đây là nhóm 6

Ở đây, các kích thước khác nhau của các tiêu đề biến đổi là rõ ràng, như thực tế là trình duyệt thêm một dòng trước và sau tiêu đề. Bạn cũng sẽ nhận thấy rằng thẻ đóng ở cuối văn bản tiêu đề có tính thẩm mỹ hơi khác, nhưng sẽ đề cập đến điều này trong chương sau khi chúng tôi tìm cách sử dụng thẻ để xác định các yếu tố cụ thể.

Thẻ đoạn văn

Hỗ trợ video và âm thanh
Hãy quên Flash Player và các trình phát phương tiện của bên thứ ba khác, làm cho video và âm thanh của bạn thực sự có thể truy cập được bằng HTML5 mới

Một nguyên tắc tương tự được áp dụng để bắt đầu thẻ đoạn, được mô tả bởi

. Điều này cho phép bạn cấu trúc nội dung của mình và chia nó thành các đoạn có liên quan, từ đó chuyển thành trải nghiệm đọc dễ dàng và liền mạch hơn. Một lần nữa,

thẻ nên được đặt ở đầu văn bản có liên quan, trước khi thẻ đóng thay thế được áp dụng ở cuối để hoàn thành hiệu ứng. Tuy nhiên, không giống như thẻ tiêu đề, không có nhiều loại số có thể thay đổi kích thước của văn bản được nêu trong đoạn văn. Ví dụ:

Đoạn đầu tiên của bạn

Đoạn thứ hai của bạn

Đoạn thứ ba của bạn

Sử dụng thẻ video HTML5 của các trang web trên toàn cầu

Quốc gia
Số lượng trang web
Hoa Kỳ
140.008
Nga
87,508
nước Đức
34,519
Vương quốc Anh
26.609
Pháp
25.697
Nhật Bản
23,578
Đài Loan
19.798
Ukraine
19.204
Brazil
16.773
Trung Quốc
16,523
Phần còn lại của thế giới
265.371

Ngoài định dạng HTML, điều này sẽ phá vỡ văn bản như sau trên trang web đã hoàn thành của bạn:

Đoạn đầu tiên của bạn

Đoạn thứ hai của bạn

Đoạn thứ ba của bạn

Thẻ ngắt dòng

Các ví dụ đầu tiên đại diện cho các thẻ HTML cơ bản nhất, nhưng có những ví dụ khác sử dụng một định dạng khác và việc đóng thay thế mất. Lấy các ngắt dòng, ví dụ, tạo ra sự khác biệt tại đó các dòng văn bản bị phá vỡ và tiếp tục trên dòng sau. Có một sự khác biệt cốt lõi giữa ngắt dòng và đoạn văn trong lĩnh vực HTML, vì trong khi phần sau là phần tử khối tiêu chuẩn có chứa văn bản, phần trước tạo ra sự tách biệt trong phần hiện có

thành phần.

Do đó, ngắt dòng đại diện cho một yếu tố trống trong HTML và do đó không được xác định bởi các thẻ mở hoặc đóng. Thay vào đó, chúng được miêu tả bởi
thẻ, có thể được chèn vào hiện có

các yếu tố để phá vỡ văn bản và có khả năng làm nổi bật các phần thông tin quan trọng. Khoảng trống đơn giữa ký tự br và dấu gạch chéo về phía trước là rất quan trọng, vì nếu không thì thẻ không thể nhận dạng được ở định dạng HTML.

Đây là một ví dụ:

là thẻ vẽ HTML5 vẽ cho phép bạn sử dụng nhiều khả năng tương tác web và hoạt hình web hơn các nền tảng ứng dụng internet phong phú trước đây như Flash.
Bạn thậm chí có thể phát triển trò chơi bằng HTML5 HTML5 nhãn. HTML5 cung cấp một cách tuyệt vời, thân thiện với thiết bị di động để phát triển trò chơi tương tác thú vị

Buổi sáng tốt lành

Rất cám ơn cho câu hỏi của bạn, chúng tôi sẽ liên lạc với bạn nếu chúng tôi yêu cầu bất cứ điều gì khác.

Trân trọng

Ông Jones

Sau khi áp dụng, điều này sẽ phá vỡ văn bản như sau:

Buổi sáng tốt lành,

Rất cám ơn cho câu hỏi của bạn, chúng tôi sẽ liên lạc với bạn nếu chúng tôi yêu cầu bất cứ điều gì khác.

Trân trọng

Ông Jones

Như bạn có thể thấy, bạn có thể áp dụng ngắt dòng bao nhiêu lần tùy thích trong một phần tử đoạn hiện có, miễn là chúng thêm giá trị và làm cho thông tin dễ tiêu hóa hơn. Bạn cũng sẽ thấy rằng các thẻ đoạn mở và đóng vẫn không thay đổi, với các thẻ ngắt dòng được sử dụng để sửa đổi bố cục của văn bản có trong.

Đây là một trong những ví dụ về cách sử dụng thẻ HTML để thay đổi các yếu tố hiện có, đóng vai trò chính trong việc xác định bố cục trực quan của các trang web và nội dung của bạn.

Đường ngang

Các danh mục trang web nơi Thẻ Canvas HTML5 đang được sử dụng

Các danh mục trang web nơi Thẻ Canvas HTML5 đang được sử dụng

Tương tự, có các thẻ khác có thể được sử dụng trong

phần tử hoặc để tách các phần văn bản khác trên trang web của bạn. Một trong những sử dụng rộng rãi nhất là


thẻ, giúp tạo ra một yếu tố trống để vẽ một đường ngang, trực quan giữa các phần thay thế của một tài liệu trực tuyến. Bạn có thể muốn định vị một dòng giữa hai phần văn bản, ví dụ, để tập trung người đọc hoặc chỉ đơn giản là giới thiệu yếu tố hình ảnh mới. Đây là cách bạn tạo ra một sự phá vỡ như vậy trong HTML:

Đoạn đầu tiên của bạn


Đoạn thứ hai của bạn

Ở đây, việc ngắt giữa các ký tự hr và dấu gạch chéo về phía trước làm nổi bật việc xây dựng một phần tử trống, trong khi một lần nữa, không cần thẻ đóng để hoàn thành hiệu ứng. Điều này sẽ tạo ra hình ảnh sau đây:

Đoạn đầu tiên của bạn
Giới thiệu

Đoạn thứ hai của bạn

Đoạn đầu tiên của bạn
Ngày mai

Đoạn thứ hai của bạn

Các trình duyệt di động đã áp dụng đầy đủ HTML5, do đó, việc tạo các dự án sẵn sàng cho thiết bị di động cũng dễ dàng như thiết kế và xây dựng cho màn hình cảm ứng nhỏ hơn của chúng – do đó là sự phổ biến của Thiết kế đáp ứng. Có một số thẻ meta tuyệt vời cũng cho phép bạn tối ưu hóa cho thiết bị di động
78% các nhà phát triển nội dung đồng ý rằng cấu trúc này phù hợp để tạo ứng dụng di động và 68% cho rằng nó phù hợp để thiết kế bất kỳ và tất cả các loại ứng dụng


Thẻ hình ảnh

Thẻ hình ảnh cũng đại diện cho các yếu tố trống trong HTML, một lần nữa có nghĩa là chúng không có thẻ đóng. Vì chúng chỉ chứa các thuộc tính liên quan đến URL của hình ảnh mà bạn đang nhúng vào trang web, chúng được xác định đơn giản bởi thẻ ở đầu phần tử. Chúng có thể được đặt ở bất cứ đâu trên trang web của bạn, mặc dù việc đưa chúng vào các yếu tố hiện có như đoạn văn hoặc tiêu đề là điều bất thường. Đây là cách một thẻ hình ảnh HTML điển hình sẽ hiển thị:

một số tiếp theo

Bạn cũng nên cung cấp văn bản thay thế cho hình ảnh của mình, giúp mọi người xem nó trong trường hợp thời gian tải chậm hoặc sử dụng trình đọc màn hình. Bằng cách này, nếu trình duyệt không thể tìm thấy hình ảnh, nó sẽ hiển thị giá trị của thuộc tính thay thế cho người xem. Điều này một lần nữa sử dụng thẻ hình ảnh, nhưng bao gồm một tập các thuộc tính khác nhau:

 HTML5 Icon

Các yếu tố HTML

yếu tố html

Trước đây, chúng tôi đã xem xét cách các thẻ HTML đơn giản được sử dụng để xác định các thành phần trên trang, đồng thời khám phá cách chúng có thể được tùy chỉnh thêm bằng cách sử dụng các thành phần trống có chứa thẻ ngắt hình ảnh và dòng. Điều này giúp chúng tôi hiểu mối quan hệ tồn tại giữa các thẻ và thành phần và cách chúng có thể được sử dụng để xác định các loại nội dung khác nhau trên trang web của bạn.

Mặc dù tất cả các khía cạnh của ngôn ngữ HTML được thể hiện bằng một thẻ, ví dụ, một yếu tố được xác định bao gồm nội dung phải có cả thẻ bắt đầu và thẻ đóng. Vì vậy, các tiêu đề và đoạn văn là các yếu tố HTML vì chúng sử dụng các thẻ bắt đầu và đóng để đóng gói và gia tăng văn bản có liên quan. Ngược lại, các phần tử trống chứa các thuộc tính hoặc hoàn toàn không có nội dung, cho phép chúng được sử dụng trong các phần tử hiện có mà không cần thẻ đóng.

Xác định các thành phần HTML

HTML5 không đi đâu cả và càng nhiều yếu tố được chấp nhận, ngày càng nhiều công ty sẽ bắt đầu phát triển trong HTML5

Khi sử dụng các ví dụ như tiêu đề và đoạn văn, việc áp dụng chính xác các thẻ bắt đầu và đóng là rất quan trọng. Đây là thẻ bắt đầu (chẳng hạn như

hoặc là

) xác định thành phần được đề cập, ví dụ, trong khi thẻ đóng đảm bảo rằng phần tử này không được tiếp tục trên phần còn lại của trang web. Nếu bạn không sử dụng đóng ở cuối đoạn văn mong muốn, ví dụ, văn bản sẽ xuất hiện trong một khối duy nhất khó nhìn và cực kỳ khó đọc.

Tất cả các thẻ đóng giống hệt với các thẻ bắt đầu ngoài thực tế là tính năng trước đó là dấu gạch chéo về phía trước trước các ký tự có liên quan. Vì vậy, trong trường hợp của một

tiêu đề, thẻ đóng sẽ là , trong khi đối với các đoạn bạn sẽ luôn sử dụng để xác định sự phá vỡ trong văn bản. Điều này đòi hỏi phải chú ý đến chi tiết trong khi mã hóa và điều quan trọng cần lưu ý khi các tiêu đề lập trình rằng số bạn sử dụng (như h1 hoặc h2) được áp dụng trong cả thẻ bắt đầu và thẻ đóng.

Tần suất sử dụng của các yếu tố HTML khác nhau

Tên thành phần XHTML
cái đầu
tiêu đề
html
thân hình
một
meta
img
bàn
td
tr
br
p
kịch bản
nét chữ
div
b
liên kết
trung tâm
khoảng
hình thức
đầu vào
Phong cách
giờ
mạnh
Tôi
hl
li
bản thảo
bản đồ
khu vực
ul
lựa chọn
Lựa chọn
h3
h2
khung
bộ khung
thông số
nhúng
em
bạn
vật
blockquote
Không
khung
tbody
iframe
nhỏ
h4
căn cứ
nord





























0
10
20
30
40
50
60
70
80
90
100

Sử dụng các phần tử HTML lồng nhau

Ở giai đoạn này, rõ ràng để thấy rằng các tài liệu và trang web HTML được hình thành bởi một cây gồm nhiều yếu tố khác nhau, đóng vai trò là các khối xây dựng cho một mảng các tài sản. Chúng tôi cũng đã xem xét làm thế nào các yếu tố này có thể được hình thành và sử dụng để cấu trúc nội dung trực tuyến và chúng tôi sẽ tiếp tục điều này ngay bây giờ bằng cách xem xét các yếu tố HTML lồng nhau.

Cũng như các phần tử trống và các thẻ độc lập (như
có thể được kết hợp vào các phần tử HTML đã xác định, cái gọi là các phần tử lồng nhau cũng có thể được đặt trong nội dung như tiêu đề và đoạn văn. Chúng bao gồm các ví dụ như chữ in đậm và in nghiêng và văn bản được gạch chân, trong khi chúng có thể được áp dụng để thêm cá tính vào nội dung của bạn và thu hút mắt người đọc đến các điểm quan tâm cụ thể.

Chữ in đậm, in nghiêng và gạch chân trong HTML

Để cho’s nói rằng bạn muốn làm nổi bật một từ trong phần tử đoạn hiện có. Bạn có thể đạt được điều này bằng cách làm cho nó đậm, sử dụng các thẻ đơn giản trong tiêu chuẩn

thành phần. Sử dụng HTML, bạn sẽ lập trình điều này như sau:

tôi muốn điều này từ in đậm.


Ở đây, phần tử lồng nhau có cả thẻ bắt đầu và đóng, mỗi thẻ theo một định dạng tương tự như các phần tử được liên kết với các tiêu đề và đoạn văn. Chúng có thể được sử dụng liền mạch trong các phần tử hiện có và trong trường hợp này, nó sẽ tạo ra các kết quả sau:

tôi muốn điều này từ in đậm.

Bây giờ, hãy để’s nói rằng bạn cũng muốn thay đổi kiểu chữ của từ này để nó cũng in nghiêng. Điều này có thể đạt được chỉ bằng cách thêm một phần tử lồng nhau khác, được mã hóa như thế này:

tôi muốn điều này từ in đậm.

Như bạn có thể thấy, các thẻ in nghiêng bắt đầu và đóng đơn giản đã được tích hợp vào

thành phần. Điều này bây giờ sẽ chuyển đổi nội dung trong phần tử để nó xuất hiện như sau:

Các tiêu đề HTML luôn luôn và vẫn là tín hiệu HTML quan trọng nhất mà các công cụ tìm kiếm sử dụng để hiểu nội dung của trang. Trên thực tế, nếu tiêu đề HTML của bạn bị coi là xấu hoặc không mô tả, Google sẽ thay đổi chúng
tôi muốn điều này từ in đậm.

Tất nhiên, bạn có thể quyết định rằng bạn muốn làm nổi bật từ này theo một cách khác. Do đó, bạn có thể sử dụng một yếu tố lồng nhau thay thế, chẳng hạn như gạch chân (được đại diện bởi thẻ. Các thẻ này có thể được áp dụng theo cùng một cách trong

phần tử, xuất hiện như sau trong HTML:

tôi muốn điều này từ được gạch chân.

Trong trường hợp này, văn bản sẽ xuất hiện như sau trên tài liệu hoặc trang đích của bạn:

Các yếu tố ngữ nghĩa mới mà HTML5 giới thiệu sẽ giúp đọc dễ dàng hơn nhiều cho các nhà phát triển vừa chớm nở. Thay vì nhìn thấy dòng sau dòng
các phần tử, các thẻ được xác định rõ hơn như
,
tôi muốn điều này từ được gạch chân.

Điều này cung cấp cái nhìn sâu sắc về các yếu tố có thể được hình thành bởi các thẻ, từ đó xác định cấu trúc của các trang web của bạn và nội dung mà chúng có. Không chỉ điều này, mà các yếu tố trống và lồng nhau cũng có thể được sử dụng để xác định thêm nội dung của bạn.

Thuộc tính HTML

Thuộc tính toàn cầu là thuộc tính phổ biến cho tất cả các yếu tố HTML; chúng có thể được sử dụng trên tất cả các phần tử, mặc dù các thuộc tính có thể không có tác dụng đối với một số phần tử. Các thuộc tính toàn cầu có thể được chỉ định trên tất cả các thành phần HTML, ngay cả những thuộc tính không được chỉ định trong tiêu chuẩn


Nếu các thẻ là các khối xây dựng để xây dựng và xác định các thành phần, thì các thuộc tính HTML có thể được sử dụng để tùy chỉnh các đặc điểm của chúng (chẳng hạn như kiểu dáng, màu sắc và ngôn ngữ. Tất cả các thành phần HTML có các thuộc tính cốt lõi, cung cấp thông tin cốt lõi và luôn được chỉ định trong thẻ stat Chúng có xu hướng đi theo cặp, vì vậy sẽ thường xuất hiện ở định dạng sau: name =”giá trị.“

Nói một cách đơn giản, tên đại diện cho thuộc tính mà bạn muốn đặt, trong khi giá trị liên quan đến các tiêu chí cụ thể mà bạn muốn kết hợp.

Có một số lượng lớn các thuộc tính có thể được áp dụng cho các thành phần HTML của bạn, nhưng các thuộc tính phù hợp nhất với các quản trị web còn non trẻ là:

Thuộc tính ‘Lang Hiện

Thuộc tính cơ bản nhất, điều này xác định ngôn ngữ của tài liệu và các yếu tố của nó. Nó được tuyên bố bằng cách sử dụng ‘lang’ và trong khi dễ bị bỏ qua, nó có lợi ích làm cho nội dung dễ truy cập hơn đối với trình đọc màn hình và công cụ tìm kiếm. Nó thường sẽ được trình bày ở phần đầu của tài liệu theo định dạng sau:

Một số loại thuộc tính cơ bản đã được công nhận, bao gồm:

thuộc tính bắt buộc, cần thiết bởi một loại phần tử cụ thể để loại phần tử đó hoạt động chính xác

thuộc tính tùy chọn, được sử dụng để sửa đổi chức năng mặc định của loại phần tử

thuộc tính tiêu chuẩn, được hỗ trợ bởi một số lượng lớn các loại phần tử

thuộc tính sự kiện, được sử dụng để gây ra các loại phần tử để chỉ định các tập lệnh được chạy trong các trường hợp cụ thể


Theo thuộc tính lang, hai chữ cái đầu tiên chỉ định ngôn ngữ (trong tiếng Anh là ví dụ này). Sau dấu gạch nối, hai chữ cái tiếp theo thiết lập phương ngữ, mặc dù điều này sẽ không có mặt cho mọi ngôn ngữ. Điều quan trọng là bạn có được thuộc tính này ngay nếu bạn tiếp cận thành công đối tượng của mình.

Thuộc tính Al Align

Chúng tôi đã chạm vào định dạng của các thuộc tính HTML (name =”giá trị) và phương án tốt nhất của điều này xảy ra khi bạn cố gắng căn chỉnh nội dung trong các yếu tố của mình. Bạn có thể quyết định căn giữa tất cả các đoạn trên một trang cụ thể, ví dụ, với căn chỉnh là thuộc tính mà bạn muốn đặt. Sau đó, ’trung tâm’ là giá trị của thuộc tính, mặc dù bạn có thể chọn căn chỉnh văn bản của mình ở bên trái hoặc bên phải. Ví dụ:

Văn bản này được căn giữa

Các loại ứng dụng được xây dựng bằng HTML5

Năng suất
54%
Tiện ích
38%
Khách hàng
35%
LOB
22%
Mạng xã hội
18%
Sự giải trí
17%
Cách sống
12%
Du lịch
9%
Trò chơi
số 8%
Khác
13%

Điều này sẽ căn chỉnh của bạn

các yếu tố ở trung tâm của trang và tạo bố cục thống nhất cho phù hợp với tính chất cụ thể của trang web của bạn (xem bên dưới):

Văn bản này được căn giữa
Văn bản này được căn giữa
Văn bản này được căn giữa

Thuộc tính ‘Href

HTML5 cũng đi kèm với một loạt các API tuyệt vời cho phép bạn xây dựng trải nghiệm người dùng tốt hơn và ứng dụng web linh hoạt hơn, mạnh mẽ hơn – tại đây, một danh sách nhanh các API gốc:
  • Kéo và thả (Ddo)
  • Cơ sở dữ liệu lưu trữ ngoại tuyến
  • Quản lý lịch sử trình duyệt
  • Chỉnh sửa tài liệu
  • Thời gian phát lại phương tiện truyền thông

Nếu bạn định xây dựng một trang web hiển thị, điều quan trọng là bạn phải kết hợp cả liên kết trong và ngoài nước. Xây dựng danh mục đầu tư liên kết bao gồm các liên kết ngược đến các trang đích nội bộ cũng là một chiến lược khả thi, vì vậy bạn sẽ cần học cách viết mã này trong HTML.

Liên kết HTML được định nghĩa với thẻ, bao gồm liên kết đích cùng với văn bản neo được liên kết sẽ chứa URL. Nó là ‘href ’ thuộc tính chỉ định địa chỉ trang web, tuy nhiên, điều này được kết hợp như một phần của thẻ bắt đầu. Nó được mã hóa bằng HTML như sau:

Google

Điều này làm nổi bật sự khác biệt giữa thẻ bắt đầu và thẻ đóng và sẽ dịch như sau trên trang đích của bạn:

HTML5 được kiểm soát bởi một công ty. Một trong những tính năng tốt nhất của nó nằm ở chỗ nó là một tiêu chuẩn mở. Các nhà phát triển có quyền tự do để cho sự sáng tạo của họ tuôn trào và thêm nhiều chức năng và tính năng nhất có thể


Thuộc tính ‘Màu sắc

Đây là một thuộc tính quan trọng khác, vì việc sử dụng màu sắc có thể thổi hồn vào trang web của bạn trong khi giúp tạo ra sự tương phản quan trọng và thiết kế thẩm mỹ mạnh mẽ. Trong HTML, màu sắc có thể được chỉ định bằng cách sử dụng tên của nó, mặc dù cũng có thể sử dụng giá trị RGB hoặc HEX để đạt được mục tiêu này. Tuy nhiên, tùy chọn trước đây là dễ theo dõi nhất, tuy nhiên, trong khi nó cũng có thể được áp dụng cho các tiêu đề, đoạn văn và các yếu tố khác trên trang của bạn.

Canvas HTML5
Xem Canvas HTML5 [Cheat Sheet]

Đây là một thuộc tính kiểu, với sự lựa chọn màu sắc của bạn đại diện cho giá trị mà bạn muốn đặt. Ví dụ, khi áp dụng màu đỏ cho tiêu đề chính, nó sẽ trông như thế này:

Đặt màu nền bằng cách sử dụng màu đỏ

Sau khi áp dụng, yếu tố này sẽ xuất hiện như sau trên trang web của bạn:

Đặt màu nền bằng cách sử dụng màu đỏ
So với các trình duyệt khác, mọi bản cập nhật Google Chrome đảm bảo bao gồm hỗ trợ cho HTML5. Ngoài ra, trình phát mặc định YouTube YouTube hiện là HTML5 và quảng cáo Google Flash Flash hiện đang được chuyển đổi thành HTML5


Một lần nữa, có một sự phân biệt rõ ràng giữa các thẻ bắt đầu và đóng xác định thành phần, trong khi đây là một trong những thuộc tính dễ áp ​​dụng nhất trong HTML. Nó cũng làm nổi bật thêm tên =”định dạng giá trị của các thuộc tính HTML, làm cho quá trình học và áp dụng chúng dễ dàng hơn trên khắp trang web của bạn.

Tự kiểm tra

Với sự hiểu biết cơ bản về HTML và các yếu tố riêng lẻ của nó, bước tiếp theo là thực hiện một số dự án đơn giản và áp dụng kiến ​​thức lý thuyết của bạn để giải quyết các thách thức thực tế.

Các ứng dụng dựa trên trình duyệt chạy HTML5 sẽ không gặp vấn đề gì khi sử dụng định vị địa lý

Trong bài tập chi tiết dưới đây, chúng tôi đã nêu một văn bản ngoại trừ và được yêu cầu định dạng các khía cạnh khác nhau bằng HTML. Sử dụng hướng dẫn và tất cả những gì bạn đã học cho đến nay để hoàn thành thử thách khi bạn chuẩn bị viết mã trang web của riêng mình.
Giới thiệu

Tiêu đề chính

Chào mừng đến với trang web của chúng tôi, example.com! Chúng tôi hy vọng bạn thích đọc nội dung của chúng tôi, hãy liên hệ với chúng tôi.

Cảm ơn đã ghé thăm!

Tìm hiểu thêm.

Việc sử dụng HTML5 của các nhà phát triển
(theo vùng)

Bắc và Mỹ Latinh
70%
Nam Mỹ
61%
ASPAC
60%
Châu Úc
60%
Châu Âu
59%
Châu phi
50%

Giới thiệu

Câu hỏi:

  1. Hoàn thành phần tử tiêu đề với thẻ đóng chính xác.
  2. Làm đậm tiêu đề.
  3. Chèn một đường ngang dưới tiêu đề.
  4. Sử dụng thuộc tính màu và sắc thái ‘Cảm ơn đã ghé thăm’ màu xanh lá cây
  5. Chèn siêu liên kết này (https://www.w3schools.com/html/) vào văn bản neo “Học hỏi
    hơn.”
  6. Ở đầu trang, sử dụng tên =”định dạng giá trị để căn lề trái các đoạn văn


Phần kết luận

Mặc dù HTML chỉ được tạo ra gần đây vào năm 1991 (với phiên bản đầu tiên của ngôn ngữ mã hóa được ra mắt vào năm 1995), nó đã nhanh chóng trở thành một công cụ tinh túy trong thiết kế các trang web hấp dẫn và trực quan. Mức độ ảnh hưởng của HTML HTML cũng đang tiếp tục phát triển, với lần lặp mới nhất (HTML5) được áp dụng bởi số lượng trang web ngày càng tăng trên toàn cầu.

Về mặt này, tìm hiểu các yếu tố cơ bản của HTML và cách áp dụng chúng là bước quan trọng nhất bạn sẽ thực hiện để thiết lập một trang web thành công, có thể nhìn thấy và cuối cùng là cạnh tranh.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map