Tự học HTML: text

Tự học HTML: text

Rate this post

Khi tạo một trang web, bạn thêm các thẻ (được gọi là đánh dấu) cho nội dung của trang. Các thẻ này cung cấp thêm ý nghĩa và cho phép các trình duyệt hiển thị cho người dùng cấu trúc thích hợp cho trang.

Các bài viết liên quan:

Trong bài viết này, chúng tôi tập trung vào cách thêm đánh dấu vào văn bản xuất hiện trên các trang của bạn. Bạn sẽ tìm hiểu về:

  • Structural markup: các phần tử mà bạn có thể sử dụng để mô tả cả đề mục và đoạn văn
  • Semantic markup: cung cấp thêm thông tin; như là như nơi nhấn mạnh được đặt trong một câu, rằng một cái gì đó bạn đã viết là một trích dẫn (và ai đã nói nó), nghĩa của các từ viết tắt, v.v.

Heading

<h1><h2><h3><h4><h5><h6>

HTML có sáu “cấp độ” là heading:

<h1> được sử dụng cho các tiêu đề chính

<h2> được sử dụng cho các tiêu đề phụ 

Nếu có phần tiếp theo dưới các tiêu đề phụ, sau đó Phần tử <h3> được sử dụng và vì vậy trên…

Các trình duyệt hiển thị nội dung của các tiêu đề ở các kích cỡ khác nhau. Các nội dung của phần tử <h1> là lớn nhất và nội dung của một phần tử <h6> là nhỏ nhất.

Kích thước chính xác mà mỗi trình duyệt hiển thị các tiêu đề có thể thay đổi một chút. Người dùng cũng có thể điều chỉnh kích thước của văn bản trong trình duyệt. Bạn sẽ thấy làm thế nào để kiểm soát kích thước của văn bản, màu sắc của nó, và các phông chữ được sử dụng khi chúng tôi đến để xem CSS.

Paragraphs

Để tạo một đoạn văn, hãy bao quanh những từ tạo nên đoạn văn có mở đầu <p>

thẻ và thẻ đóng </p>.

Theo mặc định, một trình duyệt sẽ hiển thị mỗi đoạn trên một dòng mới với một số không gian giữa nó và bất kỳ đoạn nào tiếp theo.

Bolds và italic

Bằng cách bao gồm các từ trong thẻ <b> và </b> chúng tôi có thể thực hiện ký tự in đậm.

Phần tử <b> cũng đại diện cho một phần văn bản sẽ là được trình bày trong một hình ảnh khác cách (ví dụ: các từ khóa trong một đoạn văn) mặc dù việc sử dụng phần tử <b> không ngụ ý bất kỳ ý nghĩa bổ sung nào.

Bằng cách bao gồm các từ trong thẻ <i> và </i> chúng tôi có thể làm ký tự in nghiêng.

Phần tử <i> cũng đại diện cho một phần văn bản sẽ là nói theo một cách khác với nội dung xung quanh – chẳng hạn như thuật ngữ kỹ thuật, tên tàu, từ nước ngoài, suy nghĩ, hoặc khác các đoạn văn thường sẽ là in nghiêng.

Superscript & Subscript

Phần tử <sup> được sử dụng để chứa các ký tự nên viết trên như vậy như các hậu tố của ngày tháng hoặc các khái niệm toán học như nâng một con số lên lũy thừa.

<sub> Phần tử <sub> được sử dụng để chứa các ký tự nên là chỉ số dưới. Nó thường là được sử dụng với các nốt chân hoặc hóa chất công thức như H20.

Để làm cho mã dễ dàng hơn đọc, tác giả trang web thường xuyên thêm khoảng trắng hoặc bắt đầu một số các yếu tố trên dòng mới.

Khi trình duyệt bắt gặp hai hoặc nhiều khoảng trắng bên cạnh mỗi khác, nó chỉ hiển thị một không gian.

Tương tự nếu nó đi qua xuống dòng, nó coi đó là một không gian quá. Điều này được gọi là white space collapsing.

Bạn sẽ thường thấy trang web các tác giả tận dụng lợi thế của màu trắng không gian thu hẹp để thụt lề của họ mã để làm cho nó dễ dàng hơn để làm theo.

Line Breaks và Horizontal Rules

<br/> Như bạn đã thấy, trình duyệt sẽ tự động hiển thị mỗi đoạn hoặc tiêu đề mới trên một dòng mới. Nhưng nếu bạn muốn để thêm dấu ngắt dòng bên trong giữa một đoạn văn bạn có thể sử dụng thẻ ngắt dòng <br />.

<hr/> Để tạo khoảng nghỉ giữa chủ đề – chẳng hạn như sự thay đổi của chủ đề trong một cuốn sách hoặc một cảnh mới trong một vở kịch – bạn có thể thêm một quy tắc ngang giữa các phần bằng cách sử dụng thẻ <hr />.

Có một số yếu tố không có bất kỳ từ nào giữa thẻ mở và thẻ đóng. Họ được gọi là phần tử trống và chúng được viết khác nhau.

Một phần tử trống thường chỉ có một thẻ. Trước đóng ngoặc nhọn của một phần tử trống ở đó thường sẽ là một dấu cách và một dấu gạch chéo tính cách. Một số trang web tác giả bỏ lỡ điều này nhưng nó là một thói quen tốt để có được vào.

Trong phần còn lại của bài viết, bạn sẽ gặp một số yếu tố nữa điều đó sẽ giúp bạn khi bạn thêm văn bản vào các trang web. Vì ví dụ, bạn sẽ gặp phần tử <em> cho phép bạn chỉ ra nơi nhấn mạnh nên được đặt trên đã chọn từ và <blockquote> phần tử chỉ ra rằng một khối văn bản là một dấu ngoặc kép.

Các trình duyệt thường hiển thị nội dung của các yếu tố này trong một cách khác. Ví dụ,

nội dung của <em> phần tử được in nghiêng, và một <blockquote> thường là thụt vào trong. Nhưng bạn không nên sử dụng chúng để thay đổi cách thức văn bản của bạn trông; mục đích của họ là để mô tả nội dung của các trang web chính xác hơn.

Lý do sử dụng những yếu tố là các chương trình khác, chẳng hạn như trình đọc màn hình hoặc tìm kiếm động cơ, có thể sử dụng thêm thông tin. Ví dụ, giọng nói của trình đọc màn hình có thể thêm nhấn mạnh vào các từ bên trong phần tử <em> hoặc một tìm kiếm động cơ có thể đăng ký rằng trang có một trích dẫn nếu bạn sử dụng phần tử <blockquote>.

Strong và Emphasis

Việc sử dụng <strong> phần tử chỉ ra rằng nó nội dung có tầm quan trọng mạnh mẽ.

Ví dụ, các từ chứa trong phần tử này có thể được nhấn mạnh.

Theo mặc định, các trình duyệt sẽ hiển thị nội dung của một <strong> phần tử in đậm.

Phần tử <em> chỉ ra nhấn mạnh rằng thay đổi một cách tinh vi ý nghĩa của một câu.

Theo mặc định, các trình duyệt sẽ hiển thị nội dung của một phần tử <em> in nghiêng.

Quotations

Có hai yếu tố thường được sử dụng để đánh dấu trích dẫn:

Phần tử <blockquote> là được sử dụng cho các dấu ngoặc kép dài hơn mất lên toàn bộ một đoạn văn. Ghi chú phần tử <p> vẫn còn như thế nào được sử dụng bên trong <blockquote>

Các trình duyệt có xu hướng thụt lề nội dung của <blockquote> phần tử, tuy nhiên bạn không nên sử dụng phần tử này chỉ để thụt lề một đoạn văn bản – đúng hơn là bạn nên đạt được hiệu ứng này bằng cách sử dụng CSS.

Phần tử <q> được sử dụng cho trích dẫn ngắn hơn nằm trong một đoạn văn. Các trình duyệt là phải đặt dấu ngoặc kép phần tử <q>, tuy nhiên Internet Explorer không – do đó nhiều người tránh bằng cách sử dụng phần tử <q>. 

Cả hai yếu tố có thể sử dụng trích dẫn thuộc tính để chỉ ra nơi trích dẫn là từ. Giá trị của nó nên là một URL sẽ có nhiều hơn thông tin về nguồn của bảng báo giá.

Abbreviations và Acronyms

Nếu bạn sử dụng từ viết tắt hoặc một từ viết tắt, sau đó là <abbr> phần tử có thể được sử dụng. Một tiêu đề thuộc tính trên thẻ mở là được sử dụng để chỉ định thuật ngữ đầy đủ.

Trong HTML 4 có một phần tử <acronym> cho Các từ viết tắt. Để đánh vần đầy đủ hình thức của từ viết tắt, tiêu đề thuộc tính đã được sử dụng (như với phần tử <abbr> ở trên). HTML5 chỉ sử dụng phần tử <abbr> cho cả chữ viết tắt và Các từ viết tắt

Citations & Definitions

<cite> Khi bạn đang tham khảo một tác phẩm chẳng hạn như một cuốn sách, phim hoặc tài liệu nghiên cứu, Phần tử <cite> có thể được sử dụng để cho biết trích dẫn ở đâu từ.

Trong HTML5, <cite> không nên thực sự được sử dụng cho một người tên – nhưng nó đã được cho phép ở HTML 4, vì vậy hầu hết mọi người có khả năng tiếp tục sử dụng nó.

Các trình duyệt sẽ hiển thị nội dung của một phần tử <cite> in nghiêng.

<dfn> Lần đầu tiên bạn giải thích một số thuật ngữ mới (có lẽ là một khái niệm học thuật hoặc một số biệt ngữ) trong một tài liệu, nó là được gọi là cá thể xác định của nó.

Phần tử <dfn> được sử dụng để chỉ ra trường hợp xác định của một thuật ngữ mới.

Một số trình duyệt hiển thị nội dung của phần tử <dfn> trong chữ in nghiêng. Safari và Chrome không thay đổi diện mạo của nó.

Author Details

Phần tử <address> có một cách sử dụng khá cụ thể: để chứa chi tiết liên hệ với tác giả của trang.

Nó có thể chứa một địa chỉ thực, nhưng nó không nhất thiết phải như vậy. Vì ví dụ, nó cũng có thể chứa một số điện thoại hoặc địa chỉ email.

Các trình duyệt thường hiển thị nội dung của <address> phần tử in nghiêng.

Bạn cũng có thể quan tâm cái gì đó được gọi là hCard vi định dạng để thêm vật lý thông tin địa chỉ của bạn đánh dấu

Content thay đổi

Phần tử <ins> có thể được sử dụng để hiển thị nội dung đã được được chèn vào một tài liệu, trong khi phần tử <del> có thể hiển thị văn bản đã bị xóa khỏi nó.

Nội dung của phần tử <ins> thường được gạch dưới, trong khi nội dung của một phần tử <del> thường có một dòng xuyên qua nó.

Phần tử <s> chỉ ra cái gì đó không còn nữa chính xác hoặc có liên quan (nhưng điều đó không nên bị xóa). 

Trực quan nội dung của một <s> phần tử thường sẽ được hiển thị với một đường thẳng qua tâm.

Các phiên bản HTML cũ hơn có phần tử <u> cho nội dung đã được gạch chân, nhưng điều này đang được giảm dần.

Leave a Reply