Khoảng trống trong HTML sau đoạn văn. Thẻ đoạn văn. Bài học thứ tư. Đoạn văn trong HTML

Gởi bạn đọc! Tôi biết rằng có rất nhiều người muốn cài đặt các tiện ích thông tin trên trang chính Yandex của họ. Bởi vì chúng ta đã quen với nó. Bởi vì làm việc trên Internet bắt đầu bằng việc mở trang chính. Bởi vì mỗi người dùng có thể tùy ý thêm và định cấu hình các tiện ích với thông tin mà cá nhân họ quan tâm. Bởi vì trong một phút, bạn có thể đánh giá bức tranh thời gian qua và rút ra kết luận, hoặc đơn giản là đọc một câu chuyện cười mới hoặc xem dự báo thời tiết. Thật tiện lợi.

Tôi biết rằng bây giờ thay vào đó là những hàng biểu ngữ, hình ảnh, bộ sưu tập dài hàng km rất khó hiểu...

Chúng tôi rất thất vọng khi danh mục tiện ích không còn tồn tại và các tiện ích mới không thể cài đặt được nữa, nhưng chúng tôi vẫn có thể xem xét các tiện ích đã cài đặt trước đó. Bạn có thể đọc thông tin chính thức trên trang này hoặc chỉ nhìn vào ảnh chụp màn hình.

Thưa các chủ sở hữu trang web và blog, bạn có biết rằng giờ đây bạn có cơ hội thêm trang web của mình vào trang chủ Yandex. Tiện ích trang web trên Yandex - thật dễ dàng!

Đối với nhiều người trong chúng tôi, Yandex là trang bắt đầu của chúng tôi. Mỗi khi mở trình duyệt, chúng ta chỉ thấy những thông tin thú vị và cần thiết nhất. Hầu như không có hai trang bắt đầu giống hệt nhau - mọi người đều tùy chỉnh nó theo sở thích riêng của mình: thêm các tiện ích dự báo thời tiết, tỷ giá hối đoái, cung cấp tin tức, video, truyện cười, v.v. Xét cho cùng, widget là một khối thông tin chứa thông tin bạn cần. Vì vậy, bạn sẽ lựa chọn theo ý mình.

Bạn cần chọn những gì bạn thích trong danh mục widget. Thật dễ dàng để điều hướng đến đó và nếu cần, bạn có thể thay thế tiện ích này bằng một tiện ích khác thú vị hơn.

Tiện ích trang web trên Yandex là một cách tuyệt vời để quảng cáo!

Có lẽ mọi người đều biết rằng Yandex là công cụ tìm kiếm hàng đầu trên Runet và tỷ lệ khách truy cập đến các trang web của chúng tôi từ Yandex là rất lớn. Xét rằng hàng triệu người dùng Internet bắt đầu ngày làm việc với công cụ tìm kiếm Yandex, không nên bỏ qua cơ hội vào trang chính Yandex.

Làm cách nào để tạo một tiện ích?

Tạo widget của riêng bạn không khó chút nào. Để thực hiện việc này, trên trang chính Yandex, ở trên cùng, hãy nhấp vào “Cài đặt cá nhân” và chọn “Thêm tiện ích” trong menu mở ra.

Trên trang tiếp theo, trong cột “Tất cả các tiện ích”, hãy nhấp vào liên kết “Cách tạo tiện ích”. Tiếp theo, bạn sẽ được cung cấp hướng dẫn chi tiết về cách tạo widget theo nhiều cách khác nhau. Đi tới “Tài khoản nhà phát triển” bằng liên kết và chọn phương pháp bạn cần. Tôi đã chọn “RSS widget”; phương pháp này có vẻ dễ dàng nhất đối với tôi.

Khi bạn đã nhập thông tin cần thiết để tạo tiện ích mới, bạn có thể thêm mã vào trang web của mình. Lúc đầu, tôi đặt tiện ích này vào thanh bên, nhưng một lúc sau tôi đã chọn một bài viết cho mục đích này. Bây giờ ở cuối mỗi bài viết, bên cạnh các nút mạng xã hội, có một khối tiện ích với lời mời thêm tiện ích của tôi vào Yandex.

Thêm tiện ích vào Yandex

Tiện ích có thể được tùy chỉnh theo ý muốn: để thực hiện việc này, hãy nhấp vào “Thêm” ở góc trên bên phải của tiện ích và điều chỉnh cài đặt.

Sẽ rất hữu ích nếu chủ sở hữu trang web biết rằng sau khi kiểm duyệt một tiện ích, tiện ích đó có thể được thêm vào chương trình khu vực và Danh mục tiện ích Yandex. Như chính Yandex đã viết, trong Danh mục, người dùng sẽ có thể tìm hiểu về tiện ích của bạn và chọn nó. Nhưng bước này đòi hỏi một số công việc: tiện ích của bạn cần được trung bình 150 người truy cập mỗi ngày. Nếu bạn để ý, trong ảnh chụp màn hình của tôi, đối diện với số lượng người dùng trung bình, vẫn còn một con số khiêm tốn: tiện ích dành cho trẻ sơ sinh chỉ mới được một ngày tuổi.

Do đó, các phương pháp thông thường mà chúng tôi sử dụng để quảng cáo trang web hoặc blog của mình đều phù hợp để quảng cáo tiện ích. Mời bạn bè thêm tiện ích của bạn vào trang chủ Yandex của họ và hỗ trợ dự án của bạn. Hãy cho chúng tôi biết về tiện ích mới trong bản tin email của bạn và cung cấp liên kết tới tiện ích đó. Xin lưu ý rằng bạn có thể cài đặt tiện ích này chỉ bằng hai lần nhấp chuột: bằng cách nhấp vào “Để lại tiện ích con”

Tất nhiên, tiện ích trang web trên trang chủ Yandex là một nguồn lưu lượng truy cập khác và lượng khách truy cập tự phát nếu mọi thứ được thực hiện chính xác. Nếu tiện ích của bạn được đưa vào Danh mục Yandex, lượng khách truy cập sẽ lên tới hàng nghìn. Đã có những ví dụ như vậy.

Tất cả những gì bạn cần làm là lặp lại các bước đơn giản của những người đã sử dụng thành công nhiều trang web khác nhau của họ. Điều quan trọng là đừng quên rằng để tiện ích của chúng tôi trở nên phổ biến, nó phải giải quyết được các vấn đề của khách hàng của bạn. Đây là nhiệm vụ quan trọng nhất.

Theo quy định, các khối văn bản được phân tách bằng các đoạn văn (paragraph). Theo mặc định, có một khoảng trống nhỏ theo chiều dọc giữa các đoạn văn, được gọi là khoảng trắng. Cú pháp tạo đoạn văn như sau.

Đoạn 1

Đoạn văn bản 2

Mỗi đoạn bắt đầu bằng một thẻ

Và kết thúc bằng thẻ đóng tùy chọn

Trong bất kỳ cuốn sách nào, phần thụt dòng đầu tiên, còn được gọi là “đường màu đỏ”, được dùng để làm nổi bật đoạn tiếp theo. Điều này cho phép người đọc dễ dàng tìm kiếm dòng mới và do đó làm tăng khả năng đọc của văn bản. Trên một trang web, kỹ thuật này thường không được sử dụng nhưng phần đệm được sử dụng để phân tách các đoạn văn.

Ví dụ 7.1 cho thấy việc sử dụng các đoạn văn để tạo ra sự thụt lề giữa các dòng.

Ví dụ 7.1. Sử dụng đoạn văn

Ở một số nơi vẫn là tháng Hai, ở những nơi khác đã là tháng Tư.

Thời gian trôi qua, đếm mãi: năm này qua năm khác, thế kỷ này qua thế kỷ khác...

Trong mọi thứ - tốc độ không vội vã, cách chạy tối đen như mực của anh ấy.

Một năm có hai mươi lăm tuần vui buồn.

Tôi còn 25 tuần nữa là vào tháng Hai và 25 tuần là vào tháng Tư.

Trong 25 tuần, nhiều thế kỷ chìm vào sương mù.

Trò hề bi thảm của tôi đang bay đâu đó về phía những đám mây.

M. Shcherbkov

Kết quả của ví dụ này được hiển thị trong Hình. 7.1.

Cơm. 7.1. Thụt lề trên trang web khi sử dụng đoạn văn

Như có thể thấy trên hình, khi sử dụng thẻ

Có quá nhiều khoảng cách giữa các đoạn văn. Bạn có thể loại bỏ chúng nếu bạn thêm thẻ vào lúc ngắt dòng:
. Không giống như một đoạn văn, thẻ ngắt dòng
không tạo thêm khoảng trống dọc giữa các dòng và có thể được sử dụng trong hầu hết mọi văn bản.

Do đó, văn bản của ví dụ 7.1, có tính đến ngắt dòng, sẽ được chuyển đổi như sau (ví dụ 7.2).

Ví dụ 7.2. Nhãn

Cây hạnh nhân đang nở hoa ở một số khu vườn, trong khi những cơn bão tuyết đang thổi vào những khu vườn khác.
Ở một số nơi vẫn là tháng Hai, ở những nơi khác đã là tháng Tư.
Thời gian trôi qua, đếm mãi: năm này qua năm khác, thế kỷ này qua thế kỷ khác...
Trong mọi thứ - tốc độ không vội vã, cách chạy tối đen như mực của anh ấy.
Một năm có hai mươi lăm tuần vui buồn.
Tôi còn 25 tuần nữa là vào tháng Hai và 25 tuần là vào tháng Tư.
Trong 25 tuần, nhiều thế kỷ chìm vào sương mù.
Trò hề bi thảm của tôi đang bay đâu đó về phía những đám mây.

M. Shcherbkov

Kết quả của ví dụ được hiển thị trong Hình. 7.2. Có thể thấy rằng khoảng cách giữa các dòng văn bản đã giảm xuống và nó có vẻ ngoài gọn gàng hơn.

Chúng ta đã được giới thiệu một phần về tiêu đề trang H1 và đoạn P trong bài học đầu tiên về cấu trúc của một tài liệu HTML. Bây giờ chúng ta hãy xem xét các thẻ đánh dấu logic: tiêu đề, đoạn văn, danh sách, các phần tử hiển thị của phần tử Nội dung và các thẻ định dạng vật lý một cách chi tiết hơn. Để thực hiện việc này, hãy thay đổi một chút trang ví dụ của chúng tôi hoặc nhập lại:

Trong trang html đào tạo của chúng tôi, chúng tôi đã thêm (được đánh dấu bằng mũi tên, một lần): tiêu đề cấp 2 - thẻ H2, hai tiêu đề cấp 3 - thẻ H3, một đoạn khác - thẻ P, danh sách có dấu đầu dòng - Ul và một số thẻ định dạng vật lý . Hãy mở trang trong trình duyệt:

Thẻ H1-H3 biểu thị các tiêu đề ở các cấp độ khác nhau - có sáu trong số đó. Tiêu đề của cấp độ thấp nhất theo đó là H6. Các tiêu đề phải được sử dụng một cách hợp lý và tiêu đề H1 cấp cao nhất chỉ xuất hiện một lần trên trang. Tiêu đề H1 được trình duyệt hiển thị bằng phông chữ lớn và kích thước phông chữ trong tiêu đề của các cấp độ tiếp theo sẽ giảm tương ứng.

Các bot tìm kiếm rất coi trọng nội dung của các tiêu đề cấp cao nhất. Và người dùng sẽ dễ dàng điều hướng hơn trên một trang có các tiêu đề được xây dựng chính xác một cách hợp lý.

Thẻ định dạng vật lý

Có một thanh ngang hiển thị trên trang sau đoạn thứ hai - nó được tạo bởi phần tử Hr, không có thẻ đóng. Thẻ Br có nghĩa là một dòng mới; nó cũng không được ghép nối - không có thẻ đóng. Khi định dạng văn bản, bạn có thể sử dụng một số phần tử Br liên tiếp - mỗi phần tử tiếp theo sẽ thêm một dòng trống mới.

Bây giờ chúng ta hãy chú ý đến từ “nội dung” trong đoạn thứ hai, được đặt trong thẻ B ghép nối, làm cho từ này được in đậm. Và cụm từ “văn bản định dạng” được hiển thị bằng chữ in nghiêng - điều này đạt được bằng cách sử dụng thẻ I. Thẻ U thiết lập phần gạch chân (nó không có trong ví dụ của chúng tôi).

Ngoài các thẻ này làm nổi bật các đoạn văn bản, còn có thẻ Strong trong HTML - nó làm nổi bật một đoạn có ý nghĩa quan trọng (in đậm). Và thẻ Em ít quan trọng hơn một chút (in nghiêng). Các bot tìm kiếm chú ý hơn đến hai thẻ này, chúng cho biết các cụm từ quan trọng theo ý nghĩa logic của chúng. Nên đưa từ khóa vào nhưng không nên lạm dụng quá. Điều tương tự cũng áp dụng cho các tiêu đề.

Dưới đây là một số thẻ định dạng văn bản vật lý khác: Q - Đánh dấu một trích dẫn trong một dòng. Phần tử khối blockquote - thẻ này có thể chứa nhiều đoạn văn.

Thẻ Code được sử dụng để đánh dấu các đoạn mã; nó phải được sử dụng với dấu ngắt dòng Br và dấu cách không ngắt: các ký hiệu đặc biệt được sử dụng để biểu thị chúng. ký hiệu (ký tự đầu tiên - dấu và: phím 7 với phím Shift được giữ trong bố cục tiếng Anh). Nhưng thẻ Pre hiển thị mã chương trình như cũ, có khoảng trắng và nhiều dòng như có trong mã.

Đây là những thành phần được sử dụng phổ biến nhất trong thiết kế văn bản; đối với các thẻ định dạng và ký tự đặc biệt khác, hãy xem Tài liệu tham khảo HTML, nằm trên cùng một trang - nó có điều hướng thuận tiện theo thứ tự bảng chữ cái.

Tạo danh sách html

Vẫn còn phải xem xét việc tạo danh sách, chúng tôi đã đánh dấu và chỉ định nó bằng thẻ ghép nối Ul và các thành phần hoặc mục của nó bằng thẻ Li (ảnh chụp màn hình thứ nhất). Sử dụng thuộc tính type, đối với cả thẻ Ul và Li, chúng ta có thể thay đổi loại điểm đánh dấu. Theo mặc định, tức là nếu thuộc tính không được chỉ định, giá trị của nó là "đĩa" - một vòng tròn. Bạn có thể đặt thuộc tính loại với giá trị “vòng tròn” - vòng tròn. Hoặc như thế này:

- chúng ta sẽ nhận được một danh sách có dấu vuông.

Trên thực tế, tôi sẽ không tập trung vào các thuộc tính thẻ ngoài những thuộc tính bắt buộc và một vài ví dụ để hiểu chung. Để đặt kiểu, tốt hơn là sử dụng các thuộc tính CSS - chúng tôi sẽ tìm hiểu chúng và bạn sẽ tìm thấy các thuộc tính trong sách tham khảo.

Ngoài các danh sách có dấu đầu dòng, còn có các danh sách được đánh số, được chỉ định bằng thẻ Ol và liệt kê các phần tử, như danh sách có dấu đầu dòng, bằng thẻ Li. Ngoài ra, đối với cả hai loại danh sách bạn có thể tạo danh sách lồng nhau. Hãy làm phức tạp nhiệm vụ và thay đổi danh sách của chúng tôi trong trang ví dụ thành như sau:



Hãy mở trang trong trình duyệt và chúng ta có thể thấy rõ: một danh sách được đánh số với một danh sách có dấu đầu dòng được lồng trong đó, trong đó giá trị “vuông” của thuộc tính loại chỉ định các điểm đánh dấu hình vuông.

Loại: . Chưa có bình luận nào Ngày phát hành: 17/05/2012.

Xin chào, hôm nay chúng ta sẽ xem xét một chủ đề rất cần thiết, chẳng hạn như cấu trúc văn bản trong HTML và sau khi đọc bài viết này, chúng ta sẽ có thể cấu trúc văn bản trên trang web của chúng ta một cách chính xác và đẹp mắt. Trong bài viết, tôi sẽ kể cho bạn và tất nhiên là chỉ cho bạn các ví dụ về cách tạo đoạn văn cho trang, tạo tiêu đề ở các cấp độ khác nhau và cũng có thể thêm một số loại danh sách. Bây giờ chúng ta hãy đi vào quá trình cấu trúc văn bản.

Nếu không có thẻ đoạn văn, văn bản của chúng ta trên trang sẽ trông giống như một đoạn văn bản lớn không thuận tiện cho khách truy cập đọc, vì vậy một thẻ đã được tạo để tạo ra đoạn văn trong html và nhờ đó bạn có thể chia văn bản lớn thành các phần hợp lý. Thẻ này trông như thế này: giữa hai thẻ này phải có văn bản, sau đó sẽ được tách ra khỏi văn bản chính.

Hãy xem thẻ đoạn văn bằng một ví dụ. Tôi đã chuẩn bị sẵn một đoạn văn bản lớn cho việc này mà chúng ta sẽ cấu trúc. Mở tài liệu trong chương trình chỉnh sửa, bạn có thể sử dụng notepad hoặc notepad++. Chúng ta mở tài liệu và thấy rằng chúng ta chỉ có một đoạn văn bản lớn, không có bất kỳ sự phân chia nào.



Bây giờ, hãy đặt thẻ của chúng ta vào tài liệu cứ sau bốn đến năm dòng văn bản.



Và bây giờ hãy lưu tệp và mở nó trong bất kỳ trình duyệt nào.



Bây giờ chúng ta thấy rằng văn bản của chúng ta được chia thành nhiều phần hợp lý và văn bản giờ đây đã trở nên thuận tiện hơn rất nhiều để đọc. Tôi hy vọng rằng bạn hiểu cách chia văn bản thành các phần (đoạn) hợp lý và sẽ thuận tiện hơn nhiều cho khách truy cập khi đọc bài viết.

Mỗi văn bản không thể thiếu các tiêu đề và tiêu đề phụ, chúng khác nhau về ý nghĩa và tầm quan trọng. Thẻ h1-h6 chịu trách nhiệm về các tiêu đề trong html và tùy thuộc vào số lượng mà kích thước của tiêu đề được xác định; Hãy xem xét việc sử dụng các tiêu đề bằng một ví dụ.



Tất cả các tiêu đề này trên trang web sẽ trông như thế này:



Để tối ưu hóa các trang trên website, bạn cần sử dụng các tiêu đề thật cẩn thận, đặc biệt là thẻ h1 và h2. Chỉ nên có một tiêu đề h1 trên trang, đây phải là tiêu đề chính của trang và tất cả các tiêu đề còn lại là tiêu đề phụ. Sử dụng h2 một hoặc hai lần, không thường xuyên hơn và bạn có thể sử dụng tất cả các tiêu đề khác trung bình từ năm đến sáu lần và điều này có thể có tác động tích cực đến việc tối ưu hóa.

Danh sách trong HTML.

Trong HTML chúng ta cũng có thể tạo danh sách trên một trang, danh sách rất hữu ích cho việc cung cấp thông tin trên một trang web. Danh sách cũng rất hữu ích khi tạo mẫu cho trang web và chúng ta sẽ hiểu tất cả những điều này sau. Chà, bây giờ chúng ta sẽ chuyển sang xem xét tất cả các tùy chọn danh sách như danh sách được đánh số, danh sách có dấu đầu dòng.

Danh sách được đánh số trong HTML.

Chúng ta sẽ bắt đầu thảo luận về chủ đề danh sách trong HTML bằng danh sách được đánh số trong HTML và bây giờ chúng ta có thể bắt đầu nghiên cứu một cách an toàn. Điều đầu tiên chúng ta sẽ làm là chuẩn bị một danh sách để thể hiện khả năng của danh sách đánh số trong HTML. Hãy lấy một ví dụ từ cuộc sống và viết danh sách đi siêu thị.

Sốt cà chua
mayonaise
Muối
Hạt tiêu
rau thì là
Cà tím
Cà chua

Bây giờ danh sách đã được biên soạn và chúng tôi đang bắt đầu định dạng nó. Danh sách được đánh số trong HTMLđược chỉ định bằng cách sử dụng thẻ ghép nối và bây giờ, bằng ví dụ, chúng ta sẽ xem xét quá trình tạo danh sách được đánh số.

Đầu tiên, chúng ta cần đưa tất cả các mục danh sách vào một thẻ.