Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
HTML Cơ Bản Cho Người Mới Bắt Đầu

HTML Cơ Bản Cho Người Mới Bắt Đầu


Ngày 30 Tháng 8 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu HTML là gì và cách sử dụng các thẻ HTML cơ bản vào trong quá trình lập trình và phát triển website nha.

HTML Gì?

HTML được viết tắt từ Hyper Text Markup Language(Ngôn ngữ đánh dấu siêu văn bản) giúp chúng ta tạo ra cấu trúc và nội dung cho trang web. Nó được phát triển bởi ông Tim Berners-Lee năm 1990 và ông cũng được biết đến là người sáng lập của World Wide Web luôn các bạn nhé! Sau đó thì đến năm 1996 W3C(World Wide Web Consortium) là cơ quan chính thống duy trì và phát triển HTML. Tới bây giờ thì chúng mình đang sử dụng phiên bản HTML5 giúp tiếp cận nhanh và mạnh mẽ hơn với sự phát triển của web!

Các Công Cụ Soạn Thảo Cho HTML

Visual Studio Code

Visual Studio Code là một mã nguồn mở và được phát triển bởi Microsoft nên các bạn cứ yên tâm sử dụng vì nó hoàn toàn miễn phí và luôn được cập nhật những phiên bản mới nhất. Không chỉ vậy nó còn rất thích hợp cho việc phát triển các dự án lớn, phức tạp ngoài ra còn hỗ trợ việc tích hợp Git. Công cụ này còn cung cấp các phần mở rộng(extension) giúp chúng ta có thể code một cách nhanh hơn, quản lý file hiệu quả... Mình sẽ làm một bài chi tiết về các phần mở rộng giúp chúng ta code một cách tốt hơn nhé!

Visual Studio Code

Nguồn

Atom

Atom là mã nguồn mở và được phát triển bởi github và miễn phí. Cung cấp những tiện ích giúp chúng ta làm việc với git và github dễ dàng hơn. Nó cũng cung cấp các những tiện ích mở rộng, được hỗ trợ bởi cộng đồng github nên mình thấy ở những bản cập nhật sau này thì có cải thiện về hiệu suất hơn trước. Điểm đặc biệt nữa là cho phép chúng ta tùy chỉnh giao diện theo sở thích của mình!

Atom

Nguồn

Notepad++

Notepad++ là một mã nguồn mở miễn phí và được cấp phép bởi GPL. theo mình thấy đây là một trình soạn thảo tuyệt vời và đơn giản và dễ dàng sử dụng đối với mọi cấp độ phát triển đặc biệt là người mới bắt đầu. Nó hỗ trợ nhiều loại ngôn ngữ khác nhau và được coi là phần mềm chuyên trình soạn thảo văn bản HTML. Khởi động và hiệu suất đạt mức tốt, cung cấp những phần tiện tích bên ngoài, tự động thay đổi màu sắc tùy vào thẻ mà ta sử dụng trong HTML!

 Notepad++

Nguồn

Nếu bạn muốn tìm hiểu thêm các chương trình soạn thảo code thì có thể truy cập ở đây nhé!

Các Trình Duyệt Chạy HTML

Google Chrome

Google Chrome

Nguồn

Mozilla Firefox

Mozilla Firefox

Nguồn

Microsoft Edge

Microsoft Edge

Nguồn

Cách Tạo Một File HTML

Để tạo một file HTML thì bạn sẽ chỉ cần viết tên mình muốn + đuôi mở rộng của file .html là được nha.

Cấu Trúc Của File HTML

Thông thường một cấu trúc HTML sẽ đươc cấu tạo như sau:

  • !Doctype: Xác định cho trình duyệt biết phiên bản HTML mà bạn đang sử dụng.
  • html: xác định đây là cấu trúc HTML. Mọi thẻ đều phải được chứa trong thẻ này nhé.
  • head: Nơi chứa các thông tin về website và không hiển thị trong nội dung trang web. Ví dụ như là thẻ metadata, title, css...
  • body: Chứa tất cả nội dung mà bạn muốn hiển thị cho người dùng xem như là văn bản, hình ảnh...
Cấu Trúc Của Môt File HTML

Cú Pháp Tag Trong HTML

Các bạn có thể hình dung cấu trúc HTML như một căn nhà thì các thẻ HTML đóng vai trò như là những viên gạch góp phần tạo nên căn nhà. Do vậy chúng ta cùng nhau đi tìm hiểu thành phần cấu tạo của một thẻ HTML:

Cú Pháp Tag Trong HTML

Đa số các thẻ trong HTML thì sẽ có cấu tạo như hình trên nhưng còn một số thẻ đặc biệt không theo định dạng này như là thẻ hình ảnh (img)... và cũng có những thẻ không cần có nội dung chứa bên trong nó như thẻ nhập liệu (input)... thì mình sẽ nói sau.
Tên thẻ thì không phân biệt chữ hoa và chữ thường vì vậy dù mình có ghi là <img>, <Img>, <IMG> thì trình duyệt đều có thể hiểu được. Nhưng các bạn nên dùng chữ thường cho tất cả tên thẻ như là html, img, p... để tạo tính nhất quán cho trang web của bạn.

Heading Tag HTML

Heading theo mình hiểu là những từ ngắn gọn giúp khái quát ý nghĩa mà mình muốn nói đến. Khi người dùng đọc tiêu đề thì họ có thể hiểu được mình sẽ nói về nội dung gì. Các máy chủ tìm kiếm như Google thì nó sẽ dùng thuật toán để tìm kiếm, theo mình biết thì nó cũng đánh giá mức độ liên quan của tiêu đề trang web với những tìm kiếm mà người dùng nhập vào.Trong HTML cung cấp cho mình 6 loại tiêu đề đi từ lớn tới nhỏ theo bảng dưới đây:

Paragraph Tag HTML

Trong HTML thì mình sẽ sử dụng thẻ p để xác định đó là một đoạn văn. Nếu các bạn để ý thì thông thường tên của một thẻ HTML thì sẽ là từ viết tắt liên quan đến chức năng của nó. Ví dụ như là thẻ p là viết tắt của từ paragraph. Khi ta dùng thẻ này thì nó sẽ tự động xuống dòng.

Thẻ br và hr

Nó giúp định dạng đoạn văn một cách tốt hơn với br giúp tạo chức năng xuống hàng trong văn bản và hr có nhiệm vụ ngăn cách văn bản bằng đường thẳng. Lưu ý nó không có thẻ đóng nha.

Các Thẻ In Đậm, In Nghiêng và Gạch Chân Trong HTML

  • Thẻ b có tác dụng giúp in đậm chữ.
  • Thẻ i có tác dụng giúp in nghiêng chữ.
  • Thẻ s có tác dụng giúp gạch ngang chữ.
  • Thẻ u có tác dụng giúp gạch dưới chữ
  • Thẻ small có tác dụng giúp làm nhỏ chữ

Thêm Symbol Trong HTML

Thật sự là khi code HTML thì chúng ta sẽ gặp những kí tự mà không thể ghi bằng cách thông thường được. Ví dụ bạn sử dụng dấu < hoặc > thì trình duyệt sẽ tự hiểu là nó là những thẻ đóng hoặc thẻ mở nhiều khi sinh ra những lỗi không mong muốn cho nội dung trang web của chúng ta hay không thẻ chèn hai hay nhiều khoảng trắng cùng một lúc trong nội dung của thẻ HTML.Do đó trong phần này mình sẽ cung cấp cho các bạn một số kí tự hay dùng và chèn nó vào mã HTML:

Symbol HTML

Bây giờ chúng ta sẽ đi vào thêm khoảng trắng vào nội dung của website nhé!

Image Trong HTML

Hình ảnh được xem như là nội dung phổ biến trong web nó xuất hiện hầu như ở mọi trang web. Các bạn hãy hình dung một trang web toàn chữ thì thật không bắt mắt và cũng như không có gì minh họa cho những nội dung của chúng ta. Theo mình được biết thì ngày nay các trang web hầu như sử dụng hình ảnh để làm nội dung và chữ thì sẽ càng ít càng tốt do cuộc sống ngày nay bận rộn nên hầu như mọi người xem web chỉ chú ý những ý chính và thường không xem chữ nhiều.

Thẻ hình ảnh được tạo bởi thẻ img. Đây là thẻ không có thẻ đóng nhé các bạn. Để mà hiển thị được hình ảnh thì chúng ta bắt buộc phải gán thuộc tính src và cộng thêm thuộc tính alt cho thẻ.

Image HTML

Như các bạn thấy thì thẻ hình ảnh có thuộc tính src để xác định nơi mà chúng ta chứa hình ảnh (Có thể là trên web hoặc có thể trên máy tính của mình). Thuộc tính alt thì xác định thêm thông tin về hình ảnh (Nếu như hình ảnh không hiện thị thì những dòng chữ trong thuộc tính này sẽ xuất hiện)

Để giúp bạn dễ hình dung thì bây giờ chúng ta hãy đi vào ví dụ chi tiết nha.

Còn đây là dự án thực tế nhé!

See the Pen Thẻ hình ảnh với chiều cao va chieu dài by haycuoilennao19 (@haycuoilennao19) on CodePen.

Một số lưu ý khi sử dụng hình ảnh trong HTML:

  • Đa số những web thông dụng thì thường lưu hình ảnh dưới dạng là jpeg , gif, png và svg. Các bạn cũng thể chọn những định dạng khác nhưng như vậy nhiều khi sẽ làm kích thước hình ảnh của chúng ta lớn làm ảnh hưởng đến quá trình tải trang.
  • Dùng thuộc tính alt trong thẻ hình ảnh sẽ giúp cho trang web của các bạn được Goole dễ tìm thấy hơn. Nhưng đừng vì vậy mà ghi dài dòng nhằm để SEO tốt hơn. Hình ảnh với miêu tả như vậy sẽ bị cho là đánh giá không tốt. Các bạn cứ nhớ khi dùng thẻ img thì luôn kèm theo thuộc tính alt với miêu tả ngắn gọn xúc tích.
  • Khi sử dụng hình ảnh các bạn nên cân nhắc bản quyền. Nhiều hình ảnh phải có quyền thì mình mới sử dụng được, nên mình sẽ giới thiệu các bạn một số trang giúp sử dụng hình ảnh chất lượng cao miễn phí như là:
    • Pexels: cung cấp kho ảnh chất lượng cao và hoàn toàn miễn phí có giấy phép Pexels.
    • Pixabay: Cung cấp những hình ảnh chất lượng với nhiều dạng định dạng khác nhau.
    • Unsplash: Cung cấp nhiều hình ảnh miễn phí chất lượng tốt.
    • Freepik: Cung cấp những hình ảnh định svg chất lượng cao. (Các bạn có thể dùng miễn phí hoặc trả phí)
  • Các bạn nên giảm kích thước hình ảnh để giúp trang web có thể tải và chạy nhanh hơn với một số trang web sau đây:

Sử Dụng Attribute Trong HTML

Hầu như các thẻ thì đều có thuộc tính nhưng sẽ có những thuộc tính đặc biệt chỉ dành cho một số thẻ HTML nhất định. Thuộc tính sẽ luôn nằm trong thẻ mở với tên thuộc tính giúp chúng ta xác định loại thông tin về nội dung của thẻ HTML và giá trị thuộc tính là thông tin của thuộc tính đó. Giá trị thuộc tính tùy vào tên thuộc tính mà có thể là chữ, số, url... Và các bạn nhớ là luôn có dấu = ngăn cách giữa tên thuộc tính và giá trị thuộc tính nhé!

Attribute Trong HTML

Để giúp bạn dễ hình dung thì bây giờ chúng ta hãy đi vào ví dụ chi tiết nha.

Như các bạn thấy thì thuộc tính style giúp chúng ta hiện thị chữ màu đỏ với giá trị thuộc tính "color:red".

Sử Dụng liên kết HTML

Chúng ta có thể viết những đường dẫn tới những trang web khác hoặc một phần nội dung trong trang web bằng thẻ a. Thuộc tính href với giá trị thuộc tính dùng để xác định đường dẫn mà chúng ta muốn hướng tới. Chữ nội dung nằm giữa thẻ a là nơi mà người dùng nhấp vào để chuyển tiếp đến trang web khác

Link HTML

Bây giờ chúng ta sẽ đi vào ví dụ chi tiết nhé!

Nếu bạn muốn tham khảo thêm các đường dẫn đẹp cho website thì truy cập Hiệu Ứng Hover CSS Đẹp Cho Đường Dẫn nha.

Thẻ Danh Sách HTML

Đối với mội người thì danh sách có vẻ quá quen thuộc rồi nhỉ như là mục lục của một quyển sách, danh sách học sinh, danh sách các loại rau quả ... Trong HTML có cung cấp chúng ta 3 loại thẻ mô tả những loại danh sách khác nhau là:

Thẻ danh sách không theo thứ tự:

Thẻ danh sách không theo thứ tự này thì được dùng bởi thẻ ul. Khi đã tạo danh sách thì ta cần một thẻ là li để tạo những chỉ mục trong danh sách. Trong một danh sách thì ta có thể một hay nhiều chỉ mục. Và các bạn tuyệt đối nhớ là khi có thẻ ul thì luôn đi kèm với thẻ li.

Như các bạn thấy thì trước mỗi chỉ mục danh sách thì chúng ta có những kí hiệu để giúp mình xác định từng chỉ mục trong danh sách. Chúng ta có thể thay đổi những kí hiệu mà chúng ta muốn như hình tròn, hình vuông... bằng cách sử dụng thuộc tính style. Giá trị thuộc tính của nó đa số đều thuộc CSS nên các bạn cứ làm theo sau này mình sẽ đi vào sâu hơn. Ta sẽ sử dụng giá trị thuộc tính là list-style-type để thay đổi:

  • style="list-style-type:disc": Sử dụng cho kí hiệu mặc định
  • style="list-style-type:circle": Sử dụng cho kí hiệu hình tròn
  • style="list-style-type:quare": Sử dụng cho kí hiệu hình vuông
  • style="list-style-type:none": Không sử dụng cho kí hiệu nào cho các chỉ mục

Thẻ danh sách theo theo thứ tự:

Cũng giống như các yếu tố của thẻ danh sách không theo thứ tự nhưng thẻ danh sách thứ tự thì được tạo bởi thẻ ol.

Nếu bạn muốn tham khảo thêm các thẻ danh sách đẹp cho website thì truy cập Thiết Lập Style Danh Sách Bằng CSS Cho Website nha.

Bảng Trong HTML

Bảng được tạo thành bằng cách sắp xếp dữ liệu theo hàng và cột giúp chúng ta tra cứu giá trị một cách nhanh chóng hoặc so sánh giá trị của nhiều dạng dữ liệu khác nhau... Bảng được tạo bởi thẻ table trong HTML với dữ liệu dòng được tạo bởi thẻ tr, dữ liệu trong ô được tạo bởi thẻ td và ô tiêu đề được tạo bởi thẻ th. Ở đây mình lưu ý đến những từ viết tắt tiếng anh trong tên thẻ của bảng giúp các bạn dễ nhớ hơn:

  • Thẻ <tr>: Đây là từ viết tắt của table row có nghĩa là dòng trong bảng
  • Thẻ <td>: Đây là từ viết tắt của table data có nghĩa là dữ liệu trong bảng
  • Thẻ <th>: Đây là từ viết tắt của table headers có nghĩa là tiêu đề trong bảng

Như các bạn thấy thì bên trong thẻ table thì sẽ chứa thẻ con là tr là để hiện thị số hàng có trong bảng và td hiển thị số ô có trong một dòng. Để cho do hiểu thì chúng mình hãy cùng nhau đi vào chi tiết cấu trúc một bảng nhé:

Các thuộc tính như vậy trong bảng HTML thì không khuyến khích sử dụng vì bây giờ thì nó không được hỗ trợ trong HTML5. Nên chúng ta phải dùng giá trị thuộc tính CSS để xét đường viền cho bảng. Cũng có các thuộc tính khác mà cũng không được sử dụng trong bảng nữa là align, bgcolor, cellpadding, cellspacing, width... Các thuộc tính này nếu các bạn muốn tìm hiểu để đọc và hiểu các thuộc tính bảng trong HTML cũ thì có thế truy cập vào đây xem nhé Thuộc tính cũ trong table.

Nếu bạn muốn tham khảo thêm các table đẹp cho website thì truy cập Table Responvise Đẹp nha.

Form HTML

Để dễ gọi hơn mình sẽ dùng từ form nhé! Thì mục đích của form là giúp chúng ta tạo sự tương tác giữa người dùng với trang web. Nó cho phép người dùng nhập và gửi dữ liệu đến web server (theo mình hiểu thì đây là nơi mà nó lưu trữ trang web và xử lý thông tin). Form được sử dụng rất là nhiều trong các trang web như đăng kí thành viên, tìm kiếm, người dùng đăng nhập... Để dễ hiểu thì các bạn xem một form ở dưới đây nhé!

Form HTML

Như các bạn thấy khi người dùng nhập thông tin và nhấp vào đăng ký thì dữ liệu sẽ được gửi đến Web Server để xử lý với thông tin là yêu cầu đăng kí của người dùng. Sau khi xử lý xong, sẽ trả về một thông báo bằng HTML để cho người dùng biết là mình đã đăng ký thành công và tùy vào những mục đích khác nhau thì ta sẽ có những form tương ứng. Bây giờ chúng ta hãy tìm hiểu cấu trúc của thẻ form qua hình ảnh sau đây:

Example Form HTML

Do chúng ta mới chỉ học HTML nên mình không cần ghi hai thuộc tính này nhé! Nhưng giúp các bạn hiểu thêm để sau này có học về Web Back-End thì cũng dễ hình dung hơn. Các bạn để ý thuộc tính action="/dangky.php" thì đuôi .php ở đây chính là ngôn ngữ PHP dùng để xử lý thông thông tin người dùng gửi đến Web Server. Và khi xây dựng web thì các bạn có thể dùng những ngôn ngữ khác để xử lý. Ở đây mình có liệt kê qua một vài ngôn ngữ để các bạn có thể tham khảo:

TênThông Tin Thêm
PHPĐây có thể được xem là ngôn ngữ phổ biến và được sử dụng rộng rải trong lập trình web. Nó có những framwork nổi tiếng xây dựng website dễ dàng như Wordpress... để xem thêm chi tiết các bạn xem ở đây nhé : PHP
Node JSNgôn ngữ này cho phép chúng ta viết ở phía Front-End và cả Back-End. Cái này rất thích hợp cho những trang web thời gian thực như là trò chuyện trực tuyến, livestream ... để xem thêm chi tiết các bạn xem ở đây nhé : Node JS
JavaĐây là ngôn ngữ được phát triển lâu đời và có cộng động lớn hỗ trợ. Các website lớn hay ngân hàng thường sử dụng vì vấn đề bảo mật tốt của ngôn ngữ này, để xem thêm chi tiết các bạn xem ở đây nhé : Java
RubyNgôn ngữ này theo mình thấy thì thường dùng cho những ứng dụng web nhỏ với thời gian phát triển sản phẩm khá là nhanh. Để xem thêm chi tiết các bạn xem ở đây nhé : Ruby
PythonNgôn ngữ này theo mình thấy khá là dễ học với những cú pháp đơn giản. Ngoài việc phát triển trong trí tuệ nhân tạo thì ngôn ngữ còn được sử dụng vào việc làm web. Để xem thêm chi tiết các bạn xem ở đây nhé : Python

Ở đây thì mình không sắp xếp theo thứ tự phổ biến và cũng còn rất nhiều ngôn ngữ tốt khác nữa nên khi các bạn chọn ngôn ngữ lập trình Web thì điều quan trọng là cảm thấy thích với cú pháp, cách sử dụng, cách xử lý logic của ngôn ngữ và phải phù hợp với nhu cầu của dự án web.

Thuộc tính method="POST" là phương pháp gửi dữ liệu bảo mật lên Web server thường dùng chủ yếu trong form. Còn một phương thức nữa nhưng kém bảo mật và an toàn là phương thức GET vì nó sẽ hiện thông tin dữ liệu lên trang URL. Khi lập trình thì mình khuyến khích các bạn nên sử dụng POST để cho an toàn nhé!

Thẻ Input Text:

Đây là thẻ được dùng với một hay nhiều chữ trên một dòng giúp các bạn có thể nhập chữ như tên, tên đăng nhập, sở thích... và thường được sử dụng nhiều nhất trong form.

Input Text HTML

Bây giờ chúng ta sẽ đi vào ví dụ nha!

See the Pen input type html by haycuoilennao19 (@haycuoilennao19) on CodePen.

Một số thuộc tính khác cho thẻ input:

  • type="text": Thuộc tính xác định dữ liệu người dùng nhập vào luôn là chuỗi.
  • name="soThich": Thuộc tính này giúp xác định tên của ô nhập khi gửi dữ liệu từ form tới Web Server.
  • maxlength="10": Thuộc tính này giới hạn người dùng nhập kí tự vào ô nhập chữ. (Ở ví dụ là giới hạn 10 kí tự nhé!)
  • Thẻ <label>: Dùng để miêu tả ô nhập chữ giúp người dùng biết mình cần nhập dữ liệu nào vào từng ô cho chính xác.

Nếu bạn muốn tham khảo thêm các thẻ input đẹp cho website thì truy cập Input CSS Javascript Đẹp Cho Website nha.

Thẻ Input Password:

Để bảo vệ tài khoản của các bạn thì người ta tạo ra một giá trị thuộc tính tên là password trong thuộc tính type giúp các bạn khi nhập mật khẩu hay những thông tin bí mật, riêng tư của mình ở nơi công cộng thì sẽ chỉ hiện **** hoặc ••••, những người xung quanh dù có xem điện thoại của bạn thì cũng không thể biết được mật khẩu hay thông tin riêng tư ở trong đó.

Input Password HTML

Bây giờ chúng ta sẽ đi vào tìm hiểu ví dụ nha.

See the Pen input password HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thẻ Textarea:

Thẻ này giúp người dùng có thể nhập nhiều thông tin mà họ mong muốn như là bình luận trên Facebook, miêu tả về sản phẩm, nêu cảm nghĩ...

Textarea HTML

Việc điều chỉnh kích thước của thẻ này sẽ theo số cột và số dòng ví dụ cho các bạn dễ hiểu thì mình đặt giá trị thuộc tính như sau: cols="40" rows="5" thì số 5 là miêu tả số dòng (xác định chiều cao của thẻ) và 40 là số cột tương đương với chiều dài của thẻ sẽ là 40 kí tự cho một dòng. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé!

See the Pen textarea html by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thẻ Radio:

Thẻ này giúp chúng ta chọn một trong nhiều lựa chọn như là giới tính, sở thích ... Đi với ô này thì chúng ta có hai thuộc tính bắt buộc là name và value để xác định tên và giá trị để gửi từ form đến server. Và Thông thường thì các bạn sẽ thấy là những ô này sẽ đi cùng với nhau theo một nhóm (ul, ol...)

Radio HTML

Bây giờ chúng ta sẽ đi vào tìm hiểu ví dụ nha!

See the Pen radio html by haycuoilennao19 (@haycuoilennao19) on CodePen.

Các bạn có thể thấy là ở đây mình đặt thuộc tính là style="list-style-type: none;" ngăn cho HTML tạo ra những kí hiệu mặc định trong thẻ danh sách làm cho form của chúng ta dễ nhìn và đơn giản hơn. Thuộc tính checked đặt một lựa chọn làm mặc định giúp cho thông tin từ form gửi lên server sẽ không bị thiếu làm ảnh hưởng đến việc xử lý thông tin nếu người dùng không chọn. Và mình có thể thêm bao nhiêu lựa chọn tùy ý nhưng các bạn chỉ có thể chọn một thôi nhé!

Nếu bạn muốn tham khảo thêm các thẻ input radio đẹp cho website thì truy cập 24 Radio Button Đẹp Cho Thiết Kế Web nha.

Input Checkbox HTML:

Cũng có những dữ liệu chúng ta cần thu thập nhiều thông tin từ người dùng như là màu yêu thích, loại nhạc bạn thích nghe, Sở thích... Nó cũng giống như ô radio là cần hai thuộc tính bắt buộc là name và value.

Checkbox HTML

Còn dưới đây là ví dụ thực tế về checkbox nha.

See the Pen checkbox html by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm các thẻ input checkbox đẹp cho website thì truy cập Checkbox Button Đẹp Cho Trang Web nha.

Select HTML:

Nó cũng giống ô chọn một trong nhiều lựa chọn mà mình đã học ở trên nhưng điểm khác nhau ở đây là nó không hiển thị trực tiếp mà chỉ khi ta nhấp chuột vào thì nó mới hiện danh sách cho chúng ta chọn. Trong thẻ select thì mình có các thẻ con là option dùng để hiện thị các lựa chọn mà chúng ta muốn người dùng chọn. Và nó phải có thuộc tính bắt buộc là value.

Select HTML

Còn dưới đây là ví dụ chi tiết nha.

See the Pen Select HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm các thẻ select đẹp cho website thì truy cập Select HTML5 CSS3 nha.

Input Type Submit HTML:

Đây là ô mà khi người dùng đã nhập xong hết dữ liệu có trong form thì nút này dùng để gửi form lên Web Server để xử lý thông tin. Đa số trong form thì cũng phải có nút này và thuộc tính bắt buộc trong thẻ là value. Và thẻ này thường được đặt dưới cùng của form để tiện cho người dùng nhấp vào.

Input Type Submit HTML

Còn dưới đây là ví dụ chi tiết nha.

See the Pen input type submit by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm cách tạo form đẹp cho website thì truy cập Tạo Form Bằng CSS HTML nha.

Cách Chèn CSS Vào HTML

Trong phần này mình sẽ hướng dẫn cách bạn có thể thiết lập các thuộc tính CSS trong trang HTML bằng cách thêm thẻ style trong thẻ head nha.

CSS In HTML

Và dưới đây là dự án thực tế nhé!

See the Pen CSS In HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn học và hiểu đươc HTML cơ bản cho phát triển web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.