Home-theater-designers
Mặc dù các trang web hiện đại thường được xây dựng với giao diện thân thiện với người dùng, nhưng sẽ rất hữu ích nếu bạn biết một số HTML cơ bản. Nếu bạn biết 17 thẻ mẫu HTML sau đây (và một số thẻ bổ sung), bạn sẽ có thể tạo một trang web cơ bản từ đầu hoặc chỉnh sửa mã được tạo bởi một ứng dụng như WordPress.
Chúng tôi đã cung cấp các ví dụ về mã HTML với đầu ra cho hầu hết các thẻ. Nếu bạn muốn xem chúng hoạt động, hãy tải xuống tệp HTML mẫu ở cuối bài viết. Bạn có thể chơi với nó trong trình soạn thảo văn bản và tải nó lên trong trình duyệt để xem những thay đổi của bạn có tác dụng gì.
1.
Bạn sẽ cần thẻ này ở đầu mỗi tài liệu HTML mà bạn tạo. Nó đảm bảo rằng một trình duyệt biết rằng nó đang đọc HTML và nó mong đợi HTML5, phiên bản mới nhất.
Mặc dù đây thực sự không phải là một thẻ HTML, nó vẫn là một thẻ tốt cần biết.
2.
Đây là một thẻ khác cho trình duyệt biết rằng nó đang đọc HTML. Thẻ nằm ngay sau thẻ DOCTYPE và bạn đóng thẻ bằng một thẻ ngay ở cuối tệp của mình. Mọi thứ khác trong tài liệu của bạn nằm giữa các thẻ này.
3.
Thẻ bắt đầu phần tiêu đề của tệp của bạn. Nội dung ở đây không xuất hiện trên trang web của bạn. Thay vào đó, nó chứa siêu dữ liệu cho các công cụ tìm kiếm và thông tin cho trình duyệt của bạn.
Đối với các trang cơ bản, thẻ sẽ chứa tiêu đề của bạn và đó là về nó. Nhưng có một số thứ khác mà bạn có thể bao gồm, chúng ta sẽ xem xét kỹ hơn trong giây lát.
Bốn.
Thẻ này đặt tiêu đề cho trang của bạn. Tất cả những gì bạn cần làm là đặt tiêu đề của bạn vào thẻ và đóng nó, như thế này (tôi cũng đã bao gồm các thẻ tiêu đề, để hiển thị ngữ cảnh):
My Website
Đó là tên sẽ được hiển thị dưới dạng tiêu đề tab khi nó được mở trong trình duyệt.
5.
Giống như thẻ tiêu đề, siêu dữ liệu được đưa vào vùng tiêu đề của trang của bạn. Siêu dữ liệu chủ yếu được sử dụng bởi các công cụ tìm kiếm và là thông tin về những gì trên trang của bạn. Có một số trường meta khác nhau, nhưng đây là một số trường được sử dụng phổ biến nhất:
- sự mô tả : Mô tả cơ bản về trang của bạn.
- từ khóa : Một lựa chọn các từ khóa áp dụng cho trang của bạn.
- tác giả : Tác giả của trang của bạn.
- khung nhìn : Một thẻ để đảm bảo rằng trang của bạn trông đẹp trên tất cả các thiết bị.
Đây là một ví dụ có thể áp dụng cho trang này:
Thẻ 'viewport' phải luôn có 'width = device-width, initial-scale = 1.0' làm nội dung để đảm bảo trang của bạn hiển thị tốt trên thiết bị di động và máy tính để bàn.
6.
Sau khi bạn đóng phần tiêu đề, bạn sẽ đến phần nội dung. Bạn mở cái này bằng thẻ và đóng bằng thẻ. Điều đó nằm ngay ở cuối tệp của bạn, ngay trước thẻ.
Tất cả nội dung của trang web của bạn nằm giữa các thẻ này. Nó đơn giản như nó nghe:
Everything you want displayed on your page.
7.
Tiêu đề nhỏ hơn một chút
Tiêu đề phụ
Kết quả:
Như bạn có thể thấy, chúng nhỏ dần ở mỗi cấp độ.
số 8.
Thẻ đoạn văn bắt đầu một đoạn văn mới. Điều này thường chèn hai ngắt dòng.
Ví dụ, hãy nhìn vào dấu ngắt giữa dòng trước và dòng này. Đó là những gì một
thẻ sẽ làm.
Your first paragraph.
Your second paragraph.
Kết quả:
Đoạn đầu tiên của bạn.
Đoạn văn thứ hai của bạn.
Bạn cũng có thể sử dụng các kiểu CSS trong các thẻ đoạn văn của bạn, như thẻ này thay đổi kích thước văn bản:
This is 50% larger text.
Kết quả:
9.
Thẻ ngắt dòng chèn một ngắt dòng:
The first line.
The second line (close to the first one).
Kết quả:
Làm việc theo cách tương tự là
nhãn. Thao tác này vẽ một đường ngang trên trang của bạn và rất tốt để tách các phần văn bản.
10.
Thẻ này xác định văn bản quan trọng. Nói chung, điều đó có nghĩa là nó sẽ được in đậm. Tuy nhiên, có thể sử dụng CSS để tạo hiển thị văn bản khác nhau.
cách dừng thông báo qua email trên windows 10
Tuy nhiên, bạn có thể yên tâm sử dụng để in đậm văn bản.
Very important things you want to say. Kết quả:
Những điều rất quan trọng bạn muốn nói.
Nếu bạn quen thuộc với để in đậm văn bản, bạn vẫn có thể sử dụng nó. Không có gì đảm bảo rằng nó sẽ tiếp tục hoạt động trong các phiên bản HTML trong tương lai, nhưng hiện tại, nó đã hoạt động.
mười một.
Như và , và có liên quan. Các thẻ xác định văn bản được nhấn mạnh, thường có nghĩa là nó sẽ được in nghiêng. Một lần nữa, có khả năng CSS sẽ hiển thị văn bản được nhấn mạnh theo cách khác.
An emphasized line. Kết quả:
Một dòng nhấn mạnh.
Các thẻ vẫn hoạt động, nhưng một lần nữa, có thể thẻ sẽ không được dùng nữa trong các phiên bản HTML trong tương lai.
12.
Các hoặc anchor, tag cho phép bạn tạo liên kết. Một liên kết đơn giản trông như thế này:
Đi đến MUO Thuộc tính 'href' xác định đích của liên kết. Trong nhiều trường hợp, đây sẽ là một trang web khác. Nó cũng có thể là một tệp, như hình ảnh hoặc PDF.
Các thuộc tính hữu ích khác bao gồm 'target' và 'title.' Thuộc tính target hầu như chỉ được sử dụng để mở liên kết trong tab hoặc cửa sổ mới, như sau:
Go to MUO in a new tab Kết quả:
Thuộc tính 'title' [tiêu đề] tạo ra một chú giải công cụ. Di chuột qua liên kết bên dưới để xem nó hoạt động như thế nào:
Hover over this to see the tool tip Kết quả:
Di chuột qua phần này để xem mẹo công cụ
13. ![]()
Nếu bạn muốn nhúng hình ảnh vào trang của mình, bạn sẽ cần sử dụng thẻ hình ảnh. Thông thường, bạn sẽ sử dụng nó cùng với thuộc tính 'src'. Điều này chỉ định nguồn của hình ảnh, như thế này:
Kết quả:
phim hù dọa nhảy hay nhất trên Netflix
Các thuộc tính khác có sẵn, chẳng hạn như 'chiều cao,' 'chiều rộng' và 'alt.' Đây là cách nó có thể trông như thế nào:
Như bạn có thể mong đợi, thuộc tính 'height' và 'width' đặt chiều cao và chiều rộng của hình ảnh. Nói chung, bạn chỉ nên đặt một trong số chúng để hình ảnh chia tỷ lệ chính xác. Nếu bạn sử dụng cả hai, bạn có thể kết thúc với một hình ảnh bị kéo căng hoặc nhăn nheo.
Thẻ 'alt' cho trình duyệt biết văn bản nào sẽ hiển thị nếu hình ảnh không thể được hiển thị và bạn nên đưa vào bất kỳ hình ảnh nào. Nếu ai đó có kết nối đặc biệt chậm hoặc trình duyệt cũ, họ vẫn có thể biết những gì sẽ có trên trang của bạn.
14.
Thẻ danh sách có thứ tự cho phép bạn tạo một danh sách có thứ tự. Nói chung, điều đó có nghĩa là bạn sẽ nhận được một danh sách được đánh số. Mỗi mục trong danh sách cần một thẻ mục trong danh sách (
), vì vậy danh sách của bạn sẽ giống như sau:
- First thing
- Second thing
- Third thing
Kết quả:
- Điều đầu tiên
- Điều thứ hai
- Điều thứ ba
Trong HTML5, bạn có thể sử dụng
để đảo ngược thứ tự của các số. Và bạn có thể đặt giá trị bắt đầu bằng thuộc tính start. Thuộc tính 'type' cho phép bạn cho trình duyệt biết loại ký hiệu nào sẽ sử dụng cho các mục danh sách. Nó có thể được đặt thành '1,' 'A,' 'a,' 'I' hoặc 'i', đặt danh sách hiển thị với biểu tượng được chỉ định như sau:
mười lăm.
Danh sách không có thứ tự đơn giản hơn nhiều so với bản sao có thứ tự của nó. Nó chỉ đơn giản là một danh sách có dấu đầu dòng.
- First item
- Second item
- Third item
Kết quả:
- Mục đầu tiên
- Mặt hàng thứ hai
- Mặt hàng thứ ba
Danh sách không có thứ tự cũng có thuộc tính 'loại' và bạn có thể đặt nó thành 'đĩa', 'hình tròn' hoặc 'hình vuông'.
16.
Mặc dù việc sử dụng bảng để định dạng còn nhiều khó khăn, nhưng có nhiều lúc bạn sẽ muốn sử dụng các hàng và cột để phân đoạn thông tin trên trang của mình. Cần có một số thẻ để bảng hoạt động. Đây là mã HTML mẫu:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
Các
và
thẻ chỉ định đầu và cuối của bảng. Cácthẻ chứa tất cả nội dung bảng. Mỗi hàng của bảng được bao trong một
nhãn. Mỗi ô trong mỗi hàng được bao bọc trong một trong haithẻ cho tiêu đề cột hoặc thẻ cho dữ liệu cột. Bạn cần một trong những thứ này cho mỗi cột trên mỗi hàng. Kết quả:
Cột đầu tiên Cột thứ 2 Hàng 1, cột 1 Hàng 1, cột 2 Hàng 2, cột 1 Hàng 2, cột 2
17.
Khi bạn đang trích dẫn một trang web hoặc một người khác và bạn muốn đặt câu trích dẫn khác với phần còn lại của tài liệu, hãy sử dụng thẻ blockquote. Tất cả những gì bạn cần làm là đặt đoạn trích dẫn vào mở và đóng các thẻ blockquote:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Kết quả:
Web như tôi đã hình dung, chúng tôi vẫn chưa nhìn thấy nó. Tương lai vẫn lớn hơn quá khứ rất nhiều.
Định dạng chính xác được sử dụng có thể phụ thuộc vào trình duyệt bạn đang sử dụng hoặc CSS của trang web của bạn. Nhưng thẻ vẫn giữ nguyên.
Mẫu mã HTML
Với 17 ví dụ HTML này, bạn sẽ có thể tạo một trang web đơn giản. Bạn có thể kiểm tra tất cả chúng ngay bây giờ trong một trình soạn thảo văn bản trực tuyến để cảm nhận cách chúng hoạt động.
Để có các bài học ngắn gọn hơn về HTML, hãy thử một số ứng dụng microlearning để viết mã. Họ sẽ giúp bạn bắt kịp tốc độ ngay lập tức.
Đăng lại Đăng lại tiếng riu ríu E-mail Bạn muốn học lập trình cơ bản? Hãy thử 5 ứng dụng mã hóa kích thước theo từng mảnh trong thời gian rảnh rỗi của bạn Bạn muốn học viết mã cơ bản nhưng có ít thời gian? Các ứng dụng mã hóa kích thước nhỏ này sẽ chỉ chiếm vài phút trong ngày bận rộn của bạn.
Đọc tiếp Chủ đề liên quan - Lập trình
- Wordpress
- HTML
- Phát triển web
- Hướng dẫn viết mã
Giới thiệu về tác giả Andy Betts(221 bài báo đã xuất bản) Andy là một cựu nhà báo báo in và biên tập viên tạp chí, người đã viết về công nghệ trong 15 năm. Trong thời gian đó, anh ấy đã đóng góp cho vô số ấn phẩm và sản xuất công việc viết bài quảng cáo cho các công ty công nghệ lớn. Ông cũng đã đưa ra bình luận chuyên môn cho các phương tiện truyền thông và tổ chức các hội thảo tại các sự kiện trong ngành.
Xem thêm từ Andy BettsTheo 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ý