Hướng dẫn HTML cơ bản cho người giả

Cập nhật lần cuối vào ngày 05 tháng 2020 năm XNUMX


Hai mươi năm trước, ngay cả khi bạn chỉ là một blogger có sở thích, bạn phải biết một số mã hóa web để bảo vệ bản thân hoặc để thêm một chức năng đơn giản vào trang web của mình. Nhưng bây giờ có rất nhiều trình chỉnh sửa và bổ sung có sẵn, thậm chí biết những điều cơ bản về HTML không còn cần thiết nữa.

Vấn đề với điều này là nếu bạn không biết một vài điều cơ bản, bạn có thể dễ dàng gặp rắc rối thực sự trong blog của mình và phải thuê một nhà phát triển đắt tiền để khắc phục những vấn đề có thể là một vấn đề nhỏ. Không chỉ vậy, việc tạo ra các thay đổi cho blog của bạn chẳng hạn như thêm một widget văn bản tùy chỉnh đòi hỏi một chút kiến ​​thức.

Mã HTML.
HTML "mã".

Và nếu bạn đang gặp phải bố cục nội dung không đúng, kiến ​​thức HTML có thể giúp bạn quay trở lại đúng hướng.

Dưới đây là một số phiên bản hướng dẫn HTML của chúng tôi dành cho các blogger và chủ doanh nghiệp trực tuyến không phải là công nghệ cao.

HTML là xương sống của internet ngày nay. Hàng triệu trang web cùng nhau tạo thành internet. Trong đó HTML là khối xây dựng của tất cả các trang web này.

Trước khi chúng ta bắt đầu…

1. HTML là gì?

HTML là tên viết tắt của Hyper Text MArkupe Language. Đây là ngôn ngữ chuẩn để gắn thẻ nội dung cho trình duyệt web.

HTML được đại diện bởi "Phần tử". Các phần tử còn được gọi là "Thẻ".

2. Tại sao cần có HTML?

Trình duyệt web chỉ có thể hiển thị trang web khi được viết bằng ngôn ngữ được hỗ trợ của chúng. HTML là ngôn ngữ đánh dấu phổ biến nhất và có sự chấp nhận cao nhất đối với các trình duyệt web.

Đó là lý do tại sao bạn cần HTML.

3. HTML có phân biệt chữ hoa chữ thường không?

HTML không phân biệt chữ hoa chữ thường. Nhưng cách tốt nhất là viết HTML với các trường hợp thích hợp.

Các bước để tạo tệp HTML đầu tiên của bạn

Bạn có thể tạo một tệp HTML cơ bản bằng Notepad trên máy tính của bạn. Nhưng sẽ rất đau khi viết nhiều dòng mã.

Bạn cần một Trình soạn thảo mã. Một trình soạn thảo mã tốt sẽ giúp viết và sắp xếp các mã lớn dễ dàng hơn.

Tôi sử dụng và giới thiệu Notepad + + (miễn phí và mã nguồn mở) để viết các ngôn ngữ web. Có các trình chỉnh sửa khác mà bạn có thể sử dụng như Sublvăn bản ime, Nguyên tử và vv

Dưới đây là những gì bạn cần làm:

  1. Cài đặt trình chỉnh sửa mã
  2. Mở nó ra
  3. Tạo một tệp mới
  4. Lưu tệp dưới dạng tệp .html

Bạn đã sẵn sàng để đi!

Ví dụ về trình soạn thảo mã Atom
Trình chỉnh sửa mã - Atom

1. Xin chào Thế giới!

Sao chép và dán mã sau đây vào tệp HTML mới của bạn và lưu nó. Bây giờ hãy chạy nó trên trình duyệt web của bạn.

Mã số:

Trang web đầu tiên của tôi Chào thế giới!

Đầu ra:

Chúc mừng! Bạn đã tạo tệp HTML đầu tiên của mình. Bạn không cần phải hiểu nó vào thời điểm này. Chúng tôi sẽ bao gồm nó trong thời gian ngắn.

Hiểu cấu trúc HTML

Mỗi tệp HTML có cấu trúc thông thường. Đây là nơi mọi thứ bắt đầu. Và mọi trang mã lớn sẽ đến cấu trúc này sau khi cắt bớt.

Vì vậy, chúng ta hãy cố gắng hiểu nó từ "Hello World!" mã. Các phần tử sau là phần bắt buộc đối với mọi tệp HTML.

  • = Nó là một tuyên bố với trình duyệt rằng đây là một tệp HTML. Bạn phải chỉ định nó trước nhãn.
  • = Đây là phần tử gốc của tệp HTML. Mọi thứ bạn viết đều đi giữa và .
  • = Đây là phần thông tin meta cho trình duyệt. Các mã bên trong thẻ này không có đầu ra trực quan.
  • = Đây là phần mà trình duyệt web hiển thị. Chính xác những gì bạn thấy trên một trang web là sự hiển thị các mã giữa và .

2. Thẻ HTML

HTML là sự cộng tác của hàng trăm thẻ khác nhau. Bạn cần phải học cách họ làm việc. Bạn cũng phải đảm bảo rằng họ đã sử dụng chúng đúng cách.

Các thẻ HTML thường có một thẻ mở và một thẻ đóng. Thẻ mở có từ khóa được bao quanh bởi dấu nhỏ hơn (<) và lớn hơn (>). Thẻ đóng có mọi thứ giống nhau nhưng có thêm dấu gạch chéo (/) sau dấu nhỏ hơn (<).

(Đầu thẻ 2a)

Tất cả các thẻ head đi giữa và . Chúng chứa thông tin meta cho trình duyệt web và công cụ tìm kiếm. Về cơ bản chúng không có đầu ra trực quan.

Thẻ tiêu đề xác định tiêu đề của trang web hiển thị trên tab trình duyệt. Thông tin này được sử dụng bởi các chương trình web và công cụ tìm kiếm. Bạn có thể có một tiêu đề cao nhất cho mỗi tệp HTML.

Mã số:

Trang web đầu tiên của tôi
Thẻ tiêu đề - Mẫu HTML
Thẻ tiêu đề xuất hiện ở đầu trình duyệt của bạn.

Thẻ liên kết liên kết trang HTML của bạn với các tài nguyên bên ngoài. Công dụng chính của nó là liên kết trang HTML với CSS stylesheet. Đây là một thẻ tự đóng và không cần kết thúc . Ở đây rel là viết tắt của mối quan hệ với tệp và src có nghĩa là nguồn.

Mã số:

Meta là một thẻ tự đóng khác cung cấp thông tin meta của một tệp html. Các công cụ tìm kiếm và các dịch vụ web khác sử dụng những thông tin này. Thẻ meta là phải nếu bạn muốn tối ưu hóa trang của mình cho công cụ tìm kiếm.

Mã số:

<meta name="description" content="This is the short description that search engines show"

Thẻ tập lệnh được sử dụng để bao gồm tập lệnh phía máy chủ hoặc tạo liên kết tới tệp tập lệnh bên ngoài. Nó có thể có hai thuộc tính trong thẻ mở. Một là loại và một là nguồn (src).

Mã số:

Thẻ Noscript hoạt động khi tập lệnh bị vô hiệu hóa trong trình duyệt web. Nó làm cho một trang tương thích với những người không cho phép các tập lệnh trong trình duyệt web của họ.

Mã số:

Chao ôi! Tập lệnh bị vô hiệu hóa.

(2b) Thẻ nội dung

Tất cả các thẻ body đều nằm giữa và . Họ có đầu ra trực quan. Đây là nơi nhiều công việc được thực hiện nhất. Bạn phải sử dụng các thẻ này để cấu trúc nội dung trang chính của mình.

đến

Đây là các thẻ tiêu đề. Tiêu đề quan trọng nhất được gắn thẻ và ít quan trọng nhất với . Bạn nên sử dụng chúng theo thứ bậc chính xác.

Mã số:

Đây là tiêu đề h1 Đây là tiêu đề h1 Đây là tiêu đề h1 Đây là tiêu đề h2 Đây là tiêu đề h2 Đây là tiêu đề h2

Đầu ra:

Thẻ định dạng

Văn bản trong một tập tin html có thể được định dạng bằng cách sử dụng nhiều thẻ định dạng. Nó sẽ là cần thiết khi bạn muốn làm nổi bật một từ hoặc dòng từ nội dung của bạn.

Mã số:

Bạn có thể đánh dấu văn bản của mình theo nhiều cách. Bạn có thể in đậm , gạch chân , in nghiêng , dấu , chỉ số dưới , chỉ số trên và hơn thế nữa!

Đầu ra:

Bạn có thể làm lệch một số mã từ việc tăng dần bằng cách sử dụng thẻ nhận xét. Mã sẽ hiển thị trong mã nguồn nhưng sẽ không được hiển thị. Việc sử dụng chính của thẻ này là để tạo tài liệu của các tệp html để tham khảo trong tương lai.

Ví dụ:

You can comment out any code by surrounding them in this way -->

(2c) Các thẻ HTML quan trọng khác

Neo là một thẻ vô giá được sử dụng gần như ở khắp mọi nơi. Bạn sẽ không thấy bất kỳ trang web nào trực tuyến mà không có ít nhất một liên kết anchor.

Cấu trúc giống nhau. Nó có một phần mở và một phần kết thúc . Văn bản bạn muốn neo nằm giữa và .

Có một số thuộc tính xác định vị trí và cách người dùng truy cập sau khi nhấp vào nó.

  • ahref = ”“ = Nó xác định liên kết đích. Liên kết đi giữa các dấu ngoặc kép.
  • target = ”“ = Nó xác định xem URL sẽ mở trong một tab trình duyệt mới hay trong cùng một tab. target = ”_ blank” dành cho tab mới và target = ”_ self” là để mở trong cùng một tab.
  • rel = ”“ = Nó xác định mối quan hệ của trang hiện tại với trang được liên kết. Nếu bạn không tin tưởng trang được liên kết, bạn có thể xác định rel = ”nofollow”.

Mã số:

Bấm vào đây để truy cập Google. Nó sẽ mở trong một tab mới. Bấm vào đây . Nó cũng sẽ đưa bạn đến Google nhưng sẽ mở trong tab hiện tại.

Đầu ra:

Thẻ hình ảnh là một thẻ quan trọng khác mà bạn không thể tưởng tượng ra nhiều trang web dựa trên hình ảnh.

là một thẻ tự đóng. Nó không cần cách đóng cửa truyền thống như . Có một số thuộc tính bạn cần biết trước khi có thể sử dụng nó một cách chính xác.

  • src = ”“ = Đây là để xác định liên kết nguồn của hình ảnh. Đặt liên kết ngay giữa dấu ngoặc kép.
  • alt = ”“ = Nó là viết tắt của văn bản thay thế. Khi hình ảnh của bạn không tải, văn bản này sẽ cung cấp cho người dùng ý tưởng về hình ảnh bị thiếu.
  • chiều rộng = ”“ = Nó xác định chiều rộng của một hình ảnh tính bằng pixel.
  • Chiều cao = ”“ = Nó xác định chiều cao của một hình ảnh tính bằng pixel.

Ví dụ:

Đây là Googleplex vào tháng 2014 năm 500. Hình ảnh này có chiều rộng là 375 pixel và chiều cao là 0 pixel.

Đầu ra:

Mẹo: Bạn muốn chèn một hình ảnh có thể nhấp vào? Bao bọc mã hình ảnh bằng một thẻ. Xem nó như thế nào.

hoặc là

Thẻ danh sách dùng để tạo danh sách các mục. là viết tắt của danh sách có thứ tự (danh sách được đánh số) và là viết tắt của danh sách không có thứ tự (dấu đầu dòng).

Danh sách các mục bên trong hoặc là được gắn thẻ với . li là viết tắt của danh sách. Bạn có thể có bao nhiêu như bạn muốn bên trong cha mẹ hoặc là nhãn.

Mã số:

Đây là danh sách có thứ tự: Mục 1 Khoản 2 Mặt hàng 3 Đây là danh sách không có thứ tự: Mục 1 Khoản 2 Mặt hàng 3

Đầu ra:

Thẻ bảng là để tạo bảng dữ liệu. Có một vài thẻ cấp bên trong xác định tiêu đề bảng, hàng và cột.

là mã mẹ bên ngoài. Trong thẻ này, là viết tắt của hàng bảng, là viết tắt của cột bảng và viết tắt của tiêu đề bảng.

Mã số:

Tên Tuổi tác Nghề nghiệp Jo 27 Doanh nhân Carol 26 Y tá Simone 39 Giáo sư

Đầu ra:

Lưu ý: Các giá trị bên trong đầu tiên là các đề mục. Vì vậy, chúng tôi đã sử dụng áp dụng hiệu ứng chữ đậm cho văn bản.

Nhóm bảng

Bạn có thể mở rộng chức năng của một bảng bằng cách sử dụng các phần tử nhóm bảng. Sẽ có những lúc bạn cần tạo các bảng lớn được chia thành nhiều trang.

Nhóm dữ liệu bảng của bạn vào phần đầu, phần thân và chân trang, bạn có thể cho phép cuộn độc lập. Phần tiêu đề và phần nội dung sẽ in ra mọi trang nơi bảng của bạn đã mở rộng.

Các thẻ nhóm bảng là:

  • = Để gói các đầu đề của một bảng. Nó in ra mọi trang phân chia của bảng.
  • = Để gói dữ liệu chính của một bảng. Bạn có thể có bao nhiêu như bạn cần. A thẻ có nghĩa là một nhóm dữ liệu riêng biệt.
  • = Để gói thông tin chân trang của bảng. Nó in ra mọi trang phân chia của bảng.

Xin lưu ý rằng không bắt buộc phải sử dụng nhóm. Bạn có thể sử dụng nó để làm cho các bảng lớn hơn dễ đọc hơn. Trong khi một số nhà phát triển đặc biệt sử dụng rõ ràng các thẻ này dưới dạng Bộ chọn CSS.

Đây là cách chúng ta có thể nhóm bảng mẫu của mình thành , và :

Mã số:

Tên Tuổi tác Nghề nghiệp John 27 Doanh nhân Carol 26 Y tá Simone 39 Giáo sư Tổng số người: 3

Đầu ra:

Phần tử biểu mẫu được sử dụng để tạo biểu mẫu tương tác cho các trang web. Một biểu mẫu HTML chứa nhiều phần tử liên tiếp. Ví dụ:, , Vân vân.

Thuộc tính action trong form là rất quan trọng. Nó trỏ đến trang phía máy chủ hoặc trang của bên thứ ba để xử lý thông tin. Để xử lý, trước tiên bạn cần xác định phương thức.

Bạn có thể sử dụng một trong hai phương pháp, nhận hoặc đăng. Nhận tất cả thông tin ở định dạng URL trong đó Đăng gửi thông tin trong nội dung thư.

Có nhiều loại đầu vào cho các biểu mẫu. Kiểu đầu vào rất cơ bản là văn bản. Nó được viết là . Các loại cũng có thể là radio, hộp kiểm, email, v.v. Phải có đầu vào loại gửi ở dưới cùng để tạo nút gửi.

được sử dụng để tạo nhãn và liên kết chúng với đầu vào. Quy tắc liên kết nhãn với các đầu vào là có cùng giá trị trong thuộc tính for = ”” của thuộc tính label và id = ”” của thuộc tính đầu vào.

Mã số:

Tên đầu tiên: Họ: Tiểu sử ngắn gọn: Giới tính: Nam giới Giống cái

Đầu ra:

Lưu ý: Tôi đã chỉ hành động đến một giá trị null vì nó không được kết nối với bất kỳ máy chủ nào để xử lý thông tin.

3. Thuộc tính HTML

Thuộc tính là một loại công cụ sửa đổi cho thẻ HTML. Họ thêm cấu hình mới vào thẻ HTML.

Một thuộc tính giống như thuộc tính = ”” và nằm trong thẻ HTML mở. Giá trị của thuộc tính nằm giữa dấu ngoặc kép.

id = ”” và class = ””

id và class là số nhận dạng của các thẻ HTML. Các tên khác nhau được chỉ định cho các phần tử HTML khác nhau bằng cách sử dụng số nhận dạng. Bạn có thể sử dụng một định danh lớp cho nhiều phần tử. Nhưng bạn không thể sử dụng một định danh id cho nhiều phần tử.

Mã số:

Đây là tiêu đề chính

href = ””

href là viết tắt của Hypertext Reference. Họ hướng người dùng đến các liên kết tham chiếu. Thẻ neo sử dụng href để đưa người dùng đến URL đích.

Mã số:

Google

src = ””

src là viết tắt của nguồn. Nó định nghĩa nguồn của phương tiện hoặc tài nguyên bạn đang sử dụng trong tệp HTML. Nguồn có thể là URL của địa phương hoặc bên thứ ba.

Mã số:

alt = ””

alt là viết tắt của thay thế. Nó là một văn bản dự phòng được sử dụng khi một phần tử HTML không thể tải.

Mã số:

style = ””

thuộc tính style thường được sử dụng trong các thẻ HTML. Nó thực hiện công việc của CSS trong thẻ HTML. Thuộc tính tạo kiểu của bạn đi giữa dấu ngoặc kép.

Mã số:

Đây là một tiêu đề khác

4. Hiển thị mã: Chặn so với Nội tuyến

Một số phần tử luôn bắt đầu trên một dòng mới và lấy toàn bộ chiều rộng có sẵn. Đây là các phần tử "Block".

Ví dụ: , , - , biểu mẫu, v.v.

Một số phần tử chỉ chiếm không gian bắt buộc và không bắt đầu trên một dòng mới. Đây là các phần tử "Nội tuyến".

Ví dụ: ,, , Vân vân.

Bạn sẽ cần phải phân biệt các phần tử khối từ nội tuyến khi bạn sẽ sử dụng các kiểu CSS. Trong hướng dẫn HTML này, nó không phải là rất cần thiết.

Mã số:

Trang web đầu tiên của tôi Đây là một tiêu đề H2. Nó có hiển thị Block. Đây là một tiêu đề H2 khác . Ở đây thẻ gạch chân có hiển thị Inline.

Đầu ra:

5. Trích dẫn kép và trích dẫn đơn trong HTML

Câu hỏi này rất rõ ràng. Bạn nên sử dụng gì trong HTML? Trích dẫn đơn hoặc trích dẫn kép? Mọi người dường như sử dụng cả hai, nhưng cái nào là đúng?

Trong HTML, trích dẫn đơn và trích dẫn kép là như nhau. Họ không làm cho bất kỳ sự khác biệt trong đầu ra.

Bạn có thể sử dụng bất cứ ai bạn thích. Nhưng trộn lẫn cả hai trong một trang mã được coi là một thực tế xấu. Bạn nên nhất quán với bất kỳ một trong số họ.

6. HTML ngữ nghĩa và HTML không ngữ nghĩa

HTML ngữ nghĩa là phiên bản HTML mới nhất, còn được gọi là HTML5. Nó là phiên bản phát triển của HTML và XHTML không ngữ nghĩa.

Tại sao HTML5 lại tốt hơn? Trong các phiên bản trước, các phần tử HTML được xác định bằng tên id / class. Ví dụ: đã được coi là một bài báo.

Trong HTML5, thẻ tự thể hiện như một bài viết mà không cần bất kỳ mã định danh id / class nào.

Vì lợi ích của HTML5, hiện tại các công cụ tìm kiếm và các ứng dụng web khác có thể hiểu rõ hơn về một trang web. Các trang web ngữ nghĩa đã được chứng minh là làm tốt hơn cho SEO.

Dưới đây là danh sách một số thẻ HTML5 phổ biến:

  • = Đây là để gói nội dung chính mà bạn muốn hiển thị cho người xem của mình.
  • = Đây là để đánh dấu phần tiêu đề của một nội dung như tiêu đề hoặc meta tác giả.
  • = Nó chỉ định nội dung do người dùng xác định hoặc độc lập cho người xem của bạn.
  • = Nó có thể nhóm bất kỳ mã nào như đầu trang, chân trang hoặc thanh bên. Bạn có thể nói, nó là dạng ngữ nghĩa của một div.
  • = Đây là nơi nội dung chân trang của bạn, tuyên bố từ chối trách nhiệm hoặc văn bản bản quyền thuộc về.
  • = Nó cho phép bạn chèn các tập tin âm thanh mà không gặp bất kỳ vấn đề nào về plugin.
  • = Thích , bạn có thể chèn video bằng thẻ này mà không gặp sự cố với plugin.

Một cấu trúc HTML5 đơn giản sẽ trông như sau:

Trang web đầu tiên của tôi Thực đơn 8 Menu 1 Đây là tiêu đề của bài báo Đăng bởi John Doe Nội dung bài viết tại đây Bản quyền 2 John Doe

7. Xác thực HTML

Hầu hết các chuyên gia web xác nhận mã của họ sau khi hoàn thành nó. Tại sao cần phải xác nhận mã khi nó hoạt động tốt?

Có hai lý do có thể để xác thực mã của bạn:

  1. Nó sẽ giúp bạn làm cho mã của bạn qua trình duyệt và cross-nền tảng tương thích. Mã có thể không hiển thị bất kỳ lỗi nào trong trình duyệt hiện tại của bạn, nhưng nó có thể xuất hiện trong một mã khác. Mã xác nhận sẽ sửa chữa nó lên.
  2. Công cụ tìm kiếm và các chương trình web khác có thể ngừng thu thập dữ liệu trang của bạn nếu bạn có lỗi trong đó. Bạn có thể xác nhận thông qua xác nhận rằng bạn không có bất kỳ lỗi lớn nào.

Xác nhận W3C là dịch vụ phổ biến nhất để xác thực mã. Họ có một số phương pháp để xác thực mã. Bạn có thể tải lên tệp hoặc nhập trực tiếp mã trong công cụ xác thực của mình.

8. Các tài nguyên hữu ích khác

HTML là một chủ đề luôn học hỏi. Các phiên bản cập nhật khác của HTML có thể sớm hơn. Vì vậy, bạn phải luôn cập nhật và tiếp tục luyện tập. Thực hành là những gì aces HTML.

Dưới đây là một số tài nguyên hữu ích cho bạn: