Thứ hai, 14/09/2020 | 00:00 GMT+7

Cách thêm và tạo kiểu tiêu đề cho trang web của bạn bằng HTML

Một phần của loạt bài: Cách xây dựng trang web bằng HTML

Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.

Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.

Trong hướng dẫn này, ta sẽ thêm và tạo kiểu tiêu đề và phụ đề cho trang chủ của ta . Đối với trang trình diễn , ta đang sử dụng tên của Sammy và chức danh nghề nghiệp của Sammy, nhưng bạn có thể thêm bất kỳ nội dung nào vào đây bạn muốn . Đối với nội dung này, ta sẽ sử dụng phần tử tiêu đề <h1> , phần tử đoạn văn bản <p> phần tử <em> nhấn mạnh.

Dán đoạn mã được đánh dấu sau vào sau phần tử <img> profile của bạn và trước thẻ đóng </div> :

... <img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00; padding-top:80px;"> <h1>Sammy the Shark</h1> <p><em>Senior Selachimorpha at DigitalOcean</em></p> </div>

Đảm bảo thay đổi văn bản bằng thông tin của bạn .

Lưu file và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Tiêu đề và phụ đề

Các phần tử được sử dụng trong đoạn mã này áp dụng một số kiểu nhẹ nhàng cho tiêu đề và phụ đề của ta . Tuy nhiên, ta cần thêm các giá trị kiểu bổ sung nếu ta muốn kiểu tiêu đề và phụ đề của bạn phù hợp với kiểu của trang trình diễn.

Để thực hiện các sửa đổi này, ta sẽ thêm thuộc tính style vào các phần tử này để đặt các thuộc tính bổ sung. Thêm các thuộc tính được đánh dấu vào các phần tử <h1> và <p> như được minh họa trong đoạn mã sau:

<h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>  <p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>

Lưu file của bạn và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Tiêu đề theo kiểu

Các thuộc tính kiểu này điều chỉnh kích thước phông chữ thành 30 pixel và thay đổi màu phông chữ thành màu trắng. Ta cũng đã thêm lề 10 pixel vào phần tử <h1> .

Đến đây bạn sẽ biết cách thêm và tạo kiểu tiêu đề và phụ đề cho trang web của bạn bằng HTML. Trong hướng dẫn tiếp theo, ta sẽ tìm hiểu cách tạo và liên kết đến một trang web bổ sung trên trang web .

Tags:

Các tin liên quan

, Phần tử Phân chia Nội dung HTML
2020-08-27