Cách sử dụng các thuộc tính 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.
Các thuộc tính HTML được dùng để thay đổi màu sắc, kích thước và các tính năng khác của các phần tử HTML. Ví dụ: bạn có thể sử dụng một thuộc tính để thay đổi màu sắc hoặc kích thước của phông chữ cho phần tử văn bản hoặc chiều rộng và chiều cao cho phần tử hình ảnh. Trong hướng dẫn này, ta sẽ học cách sử dụng các thuộc tính HTML để đặt giá trị cho các thuộc tính kích thước và màu sắc của các phần tử văn bản HTML.
Thuộc tính HTML được đặt trong thẻ mở như sau:
<element attribute=”property:value;”>
Một thuộc tính phổ biến là style , cho phép bạn thêm các thuộc tính style vào một phần tử HTML. Mặc dù việc sử dụng một biểu định kiểu riêng để xác định kiểu của trang HTML phổ biến hơn, nhưng ta sẽ sử dụng thuộc tính style trong trang HTML cho hướng dẫn này.
Sử dụng thuộc tính kiểu
Ta có thể thay đổi nhiều thuộc tính của phần tử <h1> bằng thuộc tính style. Xóa file “index.html” của bạn và dán mã bên dưới vào trình duyệt của bạn. (Nếu bạn chưa theo dõi loạt bài hướng dẫn, bạn có thể xem lại hướng dẫn cài đặt index.html trong hướng dẫn Cài đặt Dự án HTML của bạn của ta .
<h1 style=”font-size:40px;color:green;”> This text is 40 pixels and green.</h1>
Trước khi ta tải file trong trình duyệt của bạn , hãy xem xét từng phần của phần tử HTML này:
-
h1là tên của thẻ. Nó đề cập đến phần tử Tiêu đề có kích thước lớn nhất. -
stylelà thuộc tính. Thuộc tính này có thể có nhiều thuộc tính khác nhau. -
font-sizelà thuộc tính đầu tiên ta đặt cho thuộc tínhstyle. -
40px;là giá trị chofont-size, đặt nội dung văn bản của phần tử thành 40 pixel. -
colorlà thuộc tính thứ hai mà ta đang đặt cho thuộc tínhstyle. -
greenlà giá trị củacolorthuộc tính, đặt màu nội dung văn bản thành màu xanh lục
Lưu ý các thuộc tính và giá trị được chứa trong dấu ngoặc kép và mỗi cặp thuộc property:value kết thúc bằng dấu chấm phẩy ; .
Lưu file và reload trong trình duyệt của bạn. (Để biết hướng dẫn về cách tải file trong trình duyệt của bạn, hãy xem hướng dẫn của ta tại đây .) Bạn sẽ nhận được thông tin như sau:
Văn bản này là 40 pixel và màu xanh lá cây.
Đến đây bạn đã học cách sử dụng thuộc tính style để thay đổi kích thước phông chữ và màu phông chữ của phần tử văn bản. Lưu ý một số phần tử nhất định yêu cầu thuộc tính, chẳng hạn như phần tử <a> cho phép bạn thêm liên kết vào văn bản hoặc hình ảnh và phần tử <img> , cho phép bạn thêm hình ảnh vào tài liệu. Ta sẽ đề cập đến hai yếu tố đó trong các hướng dẫn tiếp theo và tìm hiểu về cách sử dụng thuộc tính bổ sung cho containers <div> và các phần tử HTML khác trong loạt bài hướng dẫn sau.
Các tin liên quan
Cách thêm một Favicon vào trang web của bạn bằng HTML2020-08-26
Tạo phần trên cùng của trang chủ của bạn bằng HTML
2020-08-26
Cách thêm siêu liên kết trong HTML
2020-08-26
Cách sửa đổi màu của các phần tử HTML
2020-08-26
Cách lồng các phần tử HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách viết HTML nhanh chóng bằng Emmet
2019-07-02
Sử dụng vue-template-loader với Vue.js để biên dịch các mẫu HTML
2018-01-18
Nhận và thiết lập thẻ meta HTML trong Angular
2017-11-27
