Home-theater-designers
HTML là một phần quan trọng của web như chúng ta biết. Và trong khi một số nhà thiết kế web tạo các trang bằng cách nhập HTML theo cách thủ công, vẫn rất hữu ích nếu bạn biết một chút về nó.
Chúng ta sẽ xem xét một số khái niệm cơ bản của ngôn ngữ, bao gồm HTML thực sự là gì, một số khái niệm cơ bản và cách nó tương tác với các ngôn ngữ khác. Hãy coi đây là một khóa học về lỗi 'HTML cho hình nộm'.
Khái niệm cơ bản về HTML: HTML là gì?
HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản . Và mặc dù đôi khi nó được gộp chung với các ngôn ngữ lập trình, nhưng điều này không chính xác.
Như một ngôn ngữ đánh dấu , HTML chỉ cho phép bạn tạo bố cục hiển thị của các trang. Một sự thật ngôn ngữ lập trình , như Java hoặc C ++, chứa logic và các lệnh được thực hiện.
Mặc dù nó đơn giản nhưng HTML là xương sống của mọi trang trên web. Nó chịu trách nhiệm về những gì văn bản hiển thị là in đậm, thêm hình ảnh và liên kết đến các trang khác. Chúng tôi có Câu hỏi thường gặp về HTML giải thích thêm.
Bạn có thể nhấp chuột phải vào hầu hết các trang web trong trình duyệt của mình và chọn Xem nguồn trang hoặc tương tự để xem HTML đằng sau chúng. Điều này có thể cũng sẽ chứa nhiều mã không phải là HTML, nhưng bạn có thể sàng lọc qua.
Ngay cả khi bạn không có kinh nghiệm về đánh dấu hoặc ngôn ngữ lập trình, học một chút về HTML sẽ giúp bạn trở thành người dùng web có hiểu biết hơn. Hãy xem qua năm bước cơ bản để giúp bạn hiểu cách thức hoạt động của HTML. Chúng tôi sẽ cung cấp các ví dụ trong quá trình thực hiện.
Bước 1: Hiểu khái niệm về thẻ
HTML sử dụng một hệ thống thẻ để phân loại các phần tử khác nhau của tài liệu.
Hầu hết các thẻ đi theo cặp để bọc văn bản bị ảnh hưởng bên trong chúng. Đây là một ví dụ đơn giản (
thẻ tạo văn bản in đậm ; chúng ta sẽ thảo luận thêm về vấn đề này trong giây lát.)
This is some bold text .Lưu ý cách thẻ đóng bắt đầu bằng dấu gạch chéo (/). Điều này biểu thị một thẻ đóng, điều này rất quan trọng. Nếu bạn không đóng thẻ, mọi thứ từ đầu trở đi sẽ có thuộc tính đó.
tôi có thể đi in cái gì đó ở đâu
Tuy nhiên, không phải tất cả các thẻ đều có một cặp. Một số phần tử HTML, được gọi là phần tử trống , không có nội dung và tự tồn tại. Một ví dụ là
, là một dấu ngắt dòng. Bạn có thể 'đóng' các thẻ như vậy bằng cách thêm dấu gạch chéo (chẳng hạn như
) nhưng nó không hoàn toàn cần thiết.
Bước 2: Bố cục Skeleton HTML
Một tài liệu HTML thích hợp phải có các thẻ nhất định được xác định để nó được trình bày một cách chính xác. Đây là những phần thiết yếu:
- Mọi tài liệu HTML phải bắt đầu bằng
để tuyên bố chính nó như vậy. Do đó, thẻ đóng của nó,, là mục cuối cùng trong tệp HTML. - Tiếp theo, dấu
phần bao gồm thông tin như tiêu đề trang, các tập lệnh khác nhau chạy trên trang và các thông tin tương tự. Như tên cho thấy, điều này thường xuất hiện ngay sau dấu đầunhãn. Người dùng cuối không nhìn thấy nhiều nội dung trong các thẻ này. - Cuối cùng, dấu
thẻ giữ văn bản của trang mà người đọc nhìn thấy (cộng với nhiều nội dung khác). Tại đây, bạn sẽ tìm thấy hình ảnh, liên kết và hơn thế nữa.
Kể từ khi
phần tạo nên phần lớn tài liệu HTML, phần còn lại của hướng dẫn của chúng tôi xem xét các yếu tố liên quan đến nó.
Bước 3: Các thẻ HTML cơ bản để định dạng
Tiếp theo, chúng ta hãy xem xét một số thẻ phổ biến tạo nên tài liệu HTML. Tất nhiên, không thể bao gồm tất cả các yếu tố, vì vậy chúng tôi sẽ xem xét một số yếu tố quan trọng nhất. Chúng tôi đã bảo hiểm nhiều ví dụ HTML khác nếu những điều này không làm bạn hài lòng.
Nếu những thẻ này có vẻ khá cơ bản, hãy nhớ rằng HTML đã được tạo ra từ năm 1993. Hồi đó web dựa trên rất nhiều văn bản trong giai đoạn đầu của nó.
Định dạng văn bản đơn giản
HTML hỗ trợ các kiểu văn bản cơ bản như bạn tìm thấy trong Microsoft Word:
HTML cũng hỗ trợ
thẻ in đậm và
cho chữ in nghiêng. Tuy nhiên, tốt hơn là sử dụng những cái trên.
Nói ngắn gọn,
và
hiển thị cách hiểu điều gì đó, trong khi các thẻ sau chỉ cho bạn biết nó sẽ trông như thế nào. Những thẻ trước đây này dễ tiếp cận hơn đối với trình đọc màn hình được người khiếm thị sử dụng.
Đoạn văn và các phần khác
HTML của
cho phép bạn xác định một phần của tài liệu. Thông thường, phần này được ghép nối với CSS (xem bên dưới) để định dạng một phần theo một cách nhất định.
Các
thẻ cho phép bạn chia văn bản thành các đoạn văn. Trình duyệt sẽ tự động đặt một số khoảng trắng trước và sau những khoảng trắng này, cho phép bạn chia nhỏ văn bản một cách tự nhiên.
Bạn có thể thêm tiêu đề vào tài liệu của mình và giúp dễ theo dõi hơn bằng cách sử dụng
xuyên qua
các thẻ. H1 là tiêu đề quan trọng nhất, trong khi H6 ít quan trọng nhất. Gần như mọi bài báo MakeUseOf đều sử dụng tiêu đề H2 và H3 để sắp xếp thông tin.
Đánh Vào để thêm ngắt dòng trong tài liệu HTML của bạn sẽ không thực sự hiển thị chúng. Thay vào đó, bạn có thể sử dụng
để thêm dấu ngắt dòng.
Dưới đây là một ví dụ sử dụng tất cả những điều này:
Example Heading
This is one paragraph.
This is a second
paragraph split between two lines.
Bước 4: Chèn hình ảnh
Hình ảnh là một phần quan trọng của hầu hết các trang web. Bạn có thể thêm chúng dễ dàng bằng HTML và thậm chí đặt các thuộc tính khác nhau cho chúng.
Bạn chèn một hình ảnh bằng cách sử dụng
![]()
nhãn. Kết hợp điều này với
làm thế nào để thoát khỏi ios beta
srccho phép bạn chỉ định nơi bạn muốn tải hình ảnh từ đó.
Một thuộc tính quan trọng khác của
![]()
thẻ là
alt. Văn bản thay thế cho phép bạn mô tả hình ảnh cho trình đọc màn hình hoặc trong trường hợp hình ảnh không tải đúng cách. Bạn có thể di chuột qua một hình ảnh để xem văn bản thay thế của nó.
Sử dụng
widthvà
heightđể xác định số lượng pixel mà hình ảnh xuất hiện.
Đặt tất cả lại với nhau và một thẻ hình ảnh trông như thế này:
Bước 5: Thêm liên kết
World Wide Web sẽ không phải là một trang web không có liên kết đến các trang khác. Sử dụng
, bạn có thể liên kết đến các trang khác trên bất kỳ văn bản nào.
Bên trong
thẻ,
hrefthuộc tính cho biết bạn đang liên kết ở đâu. Chỉ cần dán URL sẽ hoạt động tốt. Bạn có thể dùng
titleđể thêm một chút văn bản xuất hiện khi ai đó di chuột qua liên kết.
Một liên kết cơ bản trông như thế này:
Visit Google Các
thẻ có nhiều yếu tố có thể có khác, nhưng chúng tôi sẽ không đi sâu vào chúng ở đây.
Cách HTML kết nối với CSS và JavaScript
Chúng tôi đã xem xét cơ bản về HTML và cách nó thiết lập một trang web. Nhưng như bạn có thể tưởng tượng, HTML không thôi không phù hợp với web hiện đại. Các trang web HTML đơn giản rất phổ biến trong thời 'Web 1.0', khi hầu hết các trang web không có gì khác hơn là văn bản tĩnh.
Nhưng bây giờ, chúng tôi có rất nhiều thứ khác. CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để mô tả văn bản bạn chuẩn bị trong HTML sẽ trông như thế nào. Nhớ cái gì đó
tag chúng ta đã thảo luận? Bên trong thẻ này (và các thẻ khác), bạn có thể xác định một
classthuộc tính. Sau đó, trong tài liệu CSS đi kèm, bạn có thể viết hướng dẫn về cách
classnên nhìn.
Bạn có thể xác định nội tuyến các phần tử kiểu này trong mã HTML của mình, nhưng đây được coi là phương pháp kém vì nó khó duy trì hơn nhiều. Tìm hiểu thêm với những ví dụ CSS đơn giản này . Cũng kiểm tra cách tối ưu hóa các tệp CSS của bạn .
JavaScript
Chúng ta đã thấy rằng HTML xác định nội dung và CSS xác định hình thức. JavaScript, thành viên cuối cùng của bộ ba quan trọng đối với web, cho phép các trang web phản hồi hành động của mọi người mà không cần tải trang mới mỗi lần.
Ví dụ: JavaScript cho phép một trang web cảnh báo bạn rằng mật khẩu bạn đã nhập không đáp ứng các yêu cầu của nó trước khi bạn cố gắng gửi nó. Một nhà thiết kế web có thể sử dụng JavaScript để duyệt qua các hình ảnh trong trình chiếu hoặc nhắc người dùng nhập liệu.
Đây chỉ là một vài ví dụ cơ bản. JavaScript là một ngôn ngữ kịch bản có khả năng làm được nhiều việc và tương đối phức tạp hơn nhiều so với HTML và CSS. Nhìn thấy tổng quan của chúng tôi về JavaScript cho nhiều hơn nữa.
Xem xét phạm vi hoàn chỉnh của thiết kế web nằm ngoài phạm vi của bài viết này, nhưng đủ để nói rằng HTML tương tác với các ngôn ngữ khác để tạo ra các trang web mà chúng ta biết ngày nay.
Sự phát triển của HTML
Điều quan trọng cần lưu ý là HTML không phải là tĩnh. HTML đã trải qua một số lần sửa đổi, gần đây nhất là HTML 5. Đáng chú ý, tiêu chuẩn này hỗ trợ nhúng video gốc thay vì dựa vào các định dạng độc quyền như Adobe Flash.
Các lần lặp lại mới của HTML cũng khai báo một số thẻ cổ xưa nhất định đôi khi không được dùng nữa. Chúng bao gồm các thẻ khủng khiếp như
và
(văn bản cuộn và văn bản flash tương ứng) thường thấy trong thiết kế trang web những năm 1990. Vì vậy, hãy nhớ rằng các tiêu chuẩn thay đổi theo thời gian.
Một chút kiến thức HTML sẽ đi được một chặng đường dài
Chúng tôi đã giới thiệu sơ qua về cách hoạt động của một tài liệu HTML. Bây giờ bạn đã biết các nguyên tắc cơ bản về cách các trang web được cấu trúc. Ngay cả khi bạn không tiếp tục xây dựng các trang web, bạn cũng sẽ hiểu hơn một chút về trang web mà bạn sử dụng hàng ngày.
tại sao tôi không thể nhấp vào bất kỳ thứ gì trên thanh tác vụ của mình
Để tìm hiểu thêm, hãy nâng cấp kỹ năng phát triển web của bạn bằng các công cụ thiết yếu và sau đó xem hướng dẫn của chúng tôi về cách thiết kế trang web đầu tiên của bạn .
Tín dụng hình ảnh: Belyaevskiy / Tiền gửi
Đăng lại Đăng lại tiếng riu ríu E-mail 5 mẹo để nạp đầy năng lượng cho máy VirtualBox Linux của bạnBạn mệt mỏi với hiệu suất kém do các máy ảo cung cấp? Đây là những gì bạn nên làm để tăng hiệu suất VirtualBox của mình.
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML
- Phát triển web
- JavaScript
- Công cụ quản trị trang web
- Lập trình
- HTML5
Ben là Phó biên tập viên và Giám đốc giới thiệu tại MakeUseOf. Anh ấy đã rời bỏ công việc CNTT của mình để viết toàn thời gian vào năm 2016 và chưa bao giờ nhìn lại. Anh ấy đã bao gồm các hướng dẫn công nghệ, đề xuất trò chơi điện tử và hơn thế nữa với tư cách là một nhà văn chuyên nghiệp trong hơn bảy năm.
Xem thêm từ Ben StegnerTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký