Tạo menu Html và các bước cần quan tâm

Tạo menu Html và cá bước cần quan tâm

Chúng ta sẽ đi vào việc tạo menu Html cơ bản thông qua các phần tử html và các bước cần quan tâm trong việc tạo menu Html nha!

I. Tạo danh sách thô

Trước tiên chúng phải có danh sách thô các thành phần cần có trong menu.

<ul>

<li> Xã hội </li>

<li> Kinh tế </li>

<li> Công nghệ </li>

</ul>

Tạo danh sách bằng phần tử ul trong html cơ bản1
Tạo danh sách bằng phần tử ul trong html cơ bản1
  • Ở đây mình thêm các thuộc tính màu để ta dễ hình dung khoản không mà các phần từ chiếm hữu.
  • Các bạn chú ý thấy có các chấm đen ở đầu không, đó là do mặc định của phần tử ul.

II. Thêm liên kết cho từng thành phần menu

Ta đã nói menu thật ra chỉ là một danh sách có chứa các liên kết đên nội dung khác. Vậy để  thêm các liên kết cho các thành phần trong danh sách trên (Xã hội, Kinh tế, Công nghệ) thì ta sử dụng phần tử a và thuộc tính href của nó.

<a href= ”  …  ”>…..</a>

Ta sẽ chèn phần tử a này vào trong phần tử li

<li><a href=” đường dẫn”> Xã hội </a></li>

Xem thêm:  Bên trong phần tử Head của HTML là gì?
Tạo menu bằng Html cơ bản: Thêm liên kết vào menu
Tạo menu bằng Html cơ bản: Thêm liên kết vào menu
  • Ở đây mình đã ẩn các thuộc tính màu nền để các bạn dễ thấy là ở mõi thành phần thêm liên kết điều có dấu gạch bên dưới. Đó là mặc định của phần tử liên kết a
  • Ngoài thuộc tính href phần tử a còn có thuộc tính target để điều chỉnh nội dung liên kết sẽ được hiện tại của sổ hiện tại hay cửa sổ mới. Thương thì với menu ta sẽ để cho nội dung liên kết mở ở cửa sổ hiện tại nên không cần thêm thuộc tính target

III. Xử lý các vấn đề của menu thô

Ta thấy menu thô của chúng ta có 3 phần tử ul, li, a. Chúng ta sẽ xử lý từng phần từ. Bằng cách thêm bớt các thuộc tính

1. Xử lý phần tử ul trong menu html

a. Xóa các dấu châm đầu thành phần danh sách

Để xóa nó ta chuyên thuộc tính list-style-type và chọn giá trị nó là none

 ul { list-style-type:none}

b. Thêm thuộc tính Css trang trí

Các thuộc tính màu và khoảng cách giữa khung do phần từ ul tạo với mọi thứ xung quanh: thì ta dùng các thuộc tính Css như background, padding, margin để thiết lặp, đê menu thêm đẹp

2. Xử lý phần tử li trong menu html

Ta biết phần từ li là phần từ dạng Block. Nghĩa là mõi phần tử sẽ nằm trên 1 hàng. Nên nếu muốn tạo menu ngang thì chúng ta cần phải chuyển các phần tử Bllock kia nằm trên cùng 1 hàng

Xem thêm:  Phần tử Fieldset và Legend trong Form Html

Bạn có thể chọn 2 cách sau để thực hiện việc đó

a. Sử dụng thuộc tính display:

 li {display:inline-block;} 

Ở đây chúng ta sử dụng inline-block thay vì inline là do: Chúng ta cần chuyển các phần tử li về cùng 1 hàng (dùng inline), đồng thời muốn thay đổi các thuộc tính kích thướt của nó (block).

b. Sử dụng thuộc tính float:

li {float:left;}

Nhưng khi sử dụng float chúng ta phải clear float thông qua thuôc tính overflow:hidden. Chú ý thuộc tính css này phải được để vào phần tử bao bọc các thẻ cần float(  trường hợp này ta đang float thẻ li và bao bộc nó chính là ul).

ul {overflow:hidden;}

3. Xử lý phân tử a trong meun html

a. Xóa gạch chân

Ta thấy các nội dung bên trong phần tử a sẽ có dấu gạch chân. Chúng ta phải cần phải xóa nó, để cũng được nhưng xóa nó sẽ đẹp hơn.Ta xóa gạch chân như sau

li a {text-decoration:none}

b. Chuyển các phần từ a về dạng lock

Để nó nằm trọn trong vùng của thẻ li, và ta có thể thay đổi được các thuộc tính kích thướt của nó

a { display:block}

c.Tạo hiệu ứng chuyển màu

Để khi người khác ghê chuột vào thì các thành phần sẽ chuyển sang màu khác. Bạn có cói thể chọn chuển màu text hoặc chuyển màu nền.

li a:hover{color:red}

Menu sao khi các phần tử được xử lý và thêm Css cơ bản6
Menu sao khi các phần tử được xử lý và thêm Css cơ bản

Chú ý ở đây mình chọn cách thêm css vào Htlm thông qua phần tử style. Ngoài ra ta có thể viết trực tiếp vào phần tử. Hay viết ở 1 file css riêng và chèn vào Html thông qua phần tử list

Xem thêm:  Những việc phải biết làm khi học HTML

Hi vọng bài viết hữu ích với bạn!

Thuộc tính Type của phần tử Input trong Form
Tthuộc tính Type của phần từ Input trong Form Html cơ bản

Chúng ta đã nói về phần tử input, chúng ta cũng biết type là thuộc tính của phần từ input. Nó quy Chi tiết

Thuộc tính trong HTML là gì? Điều cần biết về thuộc tính trong Html
Thuộc tính trong HTML

Chúng ta biết cấu trúc Html được tạo thành bởi các phần tử Html. Mỗi phần tử Htlm lại có Chi tiết

Tạo menu Html và các bước cần quan tâm
Tạo menu Html và cá bước cần quan tâm

Chúng ta sẽ đi vào việc tạo menu Html cơ bản thông qua các phần tử html và các bước Chi tiết

Tạo Form đăng ký: Phần tử input người tiếp nhận hồ sơ
Phần tử Input trong Form Html cơ bản

Form nhập liệu thì ắt phải có dữ liệu được nhập vào. Vậy dữ liệu được nhập vào tại đâu? Chi tiết