Tôi có thể học HTML cho người mới bắt đầu ở đâu?

Chào mừng bạn đến với Học HTML, cách dễ nhất để học HTML & CSS. Tìm hiểu HTML cung cấp hướng dẫn tương tác giải thích cách xây dựng trang web HTML & CSS từng bước

Hướng dẫn cơ bản sẽ hướng dẫn bạn tạo một trang bằng cách sử dụng khung CSS Bootstrap

Các hướng dẫn nâng cao sẽ hướng dẫn bạn tất cả những gì cần biết về HTML & CSS

Bắt đầu với HTML & CSS

Các yếu tố Bootstrap

Hướng dẫn HTML nâng cao

Hướng dẫn CSS nâng cao

Hướng dẫn CSS của chuyên gia

Tài nguyên

  • startbootstrap. com - Danh sách các mẫu bootstrap miễn phí để bắt đầu

Đóng góp hướng dẫn

Đọc thêm tại đây. Đóng góp hướng dẫn

HTML là xương sống của mọi trang web trên internet. Nếu bạn muốn tham gia phát triển web, học HTML là nơi bắt đầu

Chúng tôi vừa xuất bản khóa học video HTML dành cho người mới bắt đầu trên freeCodeCamp. tổ chức kênh YouTube. (Và chúng tôi vẫn cung cấp khóa học HTML tương tác miễn phí. )

Dave Grey đã tạo khóa học này. Dave là giảng viên đại học, người tạo khóa học và giáo viên xuất sắc

Khóa học HTML5 đầy đủ này là một nơi tuyệt vời để bắt đầu hành trình học phát triển web của bạn. Hãy coi khóa học này giống như một cuốn sách giáo khoa bằng video với 10 chương được xác định rõ ràng

Tôi có thể học HTML cho người mới bắt đầu ở đâu?
HTML tạo cấu trúc của một trang web

Đây là những phần được đề cập trong khóa học này

  • Bắt đầu
  • Phần tử đầu
  • Khái niệm cơ bản về văn bản
  • Danh sách các loại
  • Thêm liên kết
  • Thêm hình ảnh
  • Thẻ ngữ nghĩa
  • Tạo bảng
  • Biểu mẫu và Đầu vào
  • Dự án HTML

Xem toàn bộ khóa học bên dưới hoặc trên freeCodeCamp. org Kênh YouTube (4 giờ xem)

QUẢNG CÁO

QUẢNG CÁO


Tôi có thể học HTML cho người mới bắt đầu ở đâu?
Beau Carnes

Tôi là giáo viên và nhà phát triển với freeCodeCamp. tổ chức. Tôi chạy freeCodeCamp. tổ chức kênh YouTube


Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Trong bài viết này, chúng ta sẽ tìm hiểu những kiến ​​thức cơ bản về HTML. Cuối cùng, chúng ta sẽ xây dựng một trang web cơ bản chỉ sử dụng HTML

Đây là một video bạn có thể xem nếu bạn muốn bổ sung cho bài viết này

Nếu bạn thích video, bạn có thể xem nó ở đây

HTML là gì?

HTML, viết tắt của Hypertext Markup Language, là một ngôn ngữ khá đơn giản. Nó bao gồm các yếu tố khác nhau mà chúng tôi sử dụng để cấu trúc một trang web

Tôi có thể học HTML cho người mới bắt đầu ở đâu?
HTML là gì?

Các phần tử HTML là gì?

Tôi có thể học HTML cho người mới bắt đầu ở đâu?
phần tử HTML

Phần tử thường bắt đầu bằng thẻ mở, bao gồm tên của phần tử. Nó được bọc trong các dấu ngoặc góc mở và đóng. Thẻ mở cho biết phần tử bắt đầu từ đâu

Tương tự như thẻ mở, thẻ đóng cũng được bao trong cặp ngoặc nhọn mở và đóng. Nhưng nó cũng bao gồm một dấu gạch chéo trước tên của phần tử

Mọi thứ bên trong thẻ mở và thẻ đóng là nội dung

Nhưng không phải tất cả các yếu tố theo mô hình này. Chúng tôi gọi những thứ không có phần tử trống. Chúng chỉ bao gồm một thẻ duy nhất hoặc thẻ mở không thể có bất kỳ nội dung nào. Các phần tử này thường được sử dụng để chèn hoặc nhúng nội dung nào đó vào tài liệu

Ví dụ: phần tử

1 được sử dụng để nhúng tệp hình ảnh hoặc phần tử
2 được sử dụng để chèn đầu vào vào trang

Trong ví dụ trên, phần tử

1 chỉ bao gồm một thẻ không có bất kỳ nội dung nào. Phần tử này được sử dụng để chèn tệp hình ảnh từ Unsplash vào tài liệu

Cách lồng các phần tử HTML

My list:

  • Apple
  • Orange
  • Banana

Các phần tử có thể được đặt bên trong các phần tử khác. Điều này được gọi là làm tổ. Trong ví dụ trên, bên trong phần tử

4 chúng ta có phần tử
5 và phần tử danh sách không có thứ tự
6. Và tương tự bên trong phần tử ________ 06 có 3 phần tử ________ 08 hoặc list item

Nesting cơ bản khá dễ hiểu. Nhưng khi trang trở nên lớn hơn, việc lồng ghép có thể trở nên phức tạp

Do đó, trước khi làm việc với HTML, hãy nghĩ về cấu trúc bố cục mà bạn muốn có. Bạn có thể vẽ nó ra một tờ giấy hoặc trong tâm trí của bạn. nó sẽ giúp rất nhiều

Tôi có thể học HTML cho người mới bắt đầu ở đâu?

Thuộc tính HTML là gì?

Các phần tử cũng có các thuộc tính chứa thông tin bổ sung về phần tử sẽ không xuất hiện trong nội dung

Trong ví dụ trên, phần tử

1 có 2 thuộc tính.
20 hoặc nguồn để chỉ định đường dẫn của hình ảnh và
21 để chỉ định chiều rộng của hình ảnh tính bằng pixel

Tôi có thể học HTML cho người mới bắt đầu ở đâu?

Với ví dụ này, bạn có thể thấy các đặc điểm sau của thuộc tính

  • Có khoảng cách giữa các thuộc tính và tên phần tử
  • Các thuộc tính được thêm vào thẻ mở
  • Các phần tử có thể có nhiều thuộc tính
  • Các thuộc tính thường có tên và giá trị. tên=“giá trị”

Nhưng không phải mọi thuộc tính đều có cùng một mẫu. Một số có thể tồn tại mà không có giá trị và chúng tôi gọi chúng là Thuộc tính Boolean

2

Trong ví dụ này, nếu chúng ta muốn tắt nút, tất cả những gì chúng ta phải làm là chuyển thuộc tính

22 mà không có bất kỳ giá trị nào. Điều này có nghĩa là sự hiện diện của thuộc tính đại diện cho giá trị thực, ngược lại, sự vắng mặt đại diện cho giá trị sai

Các phần tử HTML phổ biến

Có tổng cộng hơn 100 yếu tố. Nhưng 90% thời gian bạn sẽ chỉ sử dụng khoảng 20 cách phổ biến nhất. Tôi đã đặt chúng thành 5 nhóm

yếu tố phần

6

Các yếu tố này được sử dụng để tổ chức nội dung thành các phần khác nhau. Chúng thường tự giải thích, ví dụ:

23 thường đại diện cho một nhóm phần giới thiệu và điều hướng,
24 đại diện cho phần có chứa các liên kết điều hướng, v.v.

nội dung văn bản

9

Các yếu tố này được sử dụng để sắp xếp nội dung hoặc khối văn bản. Chúng rất quan trọng đối với khả năng tiếp cận và SEO. Chúng cho trình duyệt biết mục đích hoặc cấu trúc của nội dung

Các hình thức

0

Các yếu tố này có thể được sử dụng cùng nhau để tạo các biểu mẫu mà người dùng có thể điền và gửi. Biểu mẫu có thể là phần phức tạp nhất của HTML

Hình ảnh và Liên kết

1

Các phần tử này được sử dụng để chèn hình ảnh hoặc tạo siêu liên kết

Người khác

2

Các yếu tố này được sử dụng để thêm dấu ngắt vào trang web

Bạn có thể tìm thấy tất cả các yếu tố trên nhà phát triển. mozilla. tổ chức. Nhưng đối với người mới bắt đầu, bạn chỉ cần biết những cái phổ biến nhất

Các phần tử HTML cấp khối so với nội tuyến

Theo mặc định, một phần tử có thể ở cấp độ khối hoặc phần tử nội tuyến

Các phần tử cấp khối là các phần tử luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn

Các phần tử nội tuyến là các phần tử không bắt đầu trên một dòng mới và nó chỉ chiếm nhiều chiều rộng khi cần thiết

Tôi có thể học HTML cho người mới bắt đầu ở đâu?
Cấp khối so với. Các phần tử HTML nội tuyến

Hai phần tử đại diện cho các phần tử cấp khối và nội tuyến, tương ứng, là

4 và
26. Trong ví dụ này, bạn có thể thấy phần tử
4 chiếm 3 dòng, trong khi phần tử
26 chỉ chiếm 1 dòng

Nhưng câu hỏi là. làm cách nào để chúng tôi biết phần tử nào là phần tử cấp khối và phần tử nào là phần tử nội tuyến? . Cách dễ nhất là nhớ đâu là phần tử nội tuyến – và phần còn lại là phần tử khối

Nếu chúng ta nhìn lại các phần tử HTML phổ biến nhất, các phần tử nội tuyến bao gồm.

29

Cách bình luận trong HTML

8

Mục đích của nhận xét là bao gồm các ghi chú trong mã để giải thích logic của bạn hoặc đơn giản là để sắp xếp mã của bạn

Nhận xét HTML được bao bọc trong các điểm đánh dấu đặc biệt.

60 và chúng bị bỏ qua trong trình duyệt

Cách sử dụng các thực thể HTML

Nếu bạn muốn hiển thị văn bản.

61, nhưng trình duyệt hiểu
62 là thẻ mở cho phần tử mới?

My list:

  • Apple
  • Orange
  • Banana
0

Cách sử dụng biểu tượng cảm xúc trong HTML

Trong web hiện đại, chúng ta có thể hiển thị biểu tượng cảm xúc trong HTML khá dễ dàng, như thế này. 👻

My list:

  • Apple
  • Orange
  • Banana
1

Những lỗi phổ biến dành cho người mới bắt đầu trong HTML

1. Thẻ/Tên phần tử

Thẻ/Tên phần tử là cAse-inSensitive. Điều này có nghĩa là chúng có thể được viết bằng chữ thường hoặc chữ hoa, nhưng bạn nên viết mọi thứ bằng chữ thường.

63 không phải
64

2. thẻ đóng

Không bao gồm thẻ đóng là một lỗi phổ biến cho người mới bắt đầu. Do đó, bất cứ khi nào bạn tạo thẻ mở, hãy đặt ngay thẻ đóng.

3. làm tổ

Cái này sai

My list:

  • Apple
  • Orange
  • Banana
2

Các thẻ phải mở và đóng theo cách chúng ở bên trong hoặc bên ngoài nhau

4. Dấu ngoặc đơn và dấu ngoặc kép

Cái này sai

My list:

  • Apple
  • Orange
  • Banana
3

Bạn không thể trộn dấu ngoặc đơn và dấu ngoặc kép. Bạn phải luôn sử dụng dấu ngoặc kép và sử dụng các thực thể HTML nếu cần

Cách xây dựng một trang web đơn giản với HTML

Các phần tử HTML riêng lẻ không đủ để tạo một trang web. Vì vậy, hãy xem chúng ta cần thêm những gì để xây dựng một trang web đơn giản từ đầu

Cách tạo một tài liệu HTML

Trước tiên, hãy mở Visual Studio Code (hoặc trình chỉnh sửa mã yêu thích của bạn). Trong thư mục bạn chọn, tạo một tệp mới và đặt tên là chỉ mục. html

trong chỉ mục. tệp html, gõ. (dấu chấm than) và nhấn enter. Bạn sẽ thấy một cái gì đó như thế này

My list:

  • Apple
  • Orange
  • Banana
4

Đây là mã tối thiểu mà một tài liệu HTML phải có để tạo nên một trang web. Và ở đây chúng ta có

  1. 65. Đầu tiên chúng ta có Doctype. Vì một số lý do lịch sử kỳ lạ trong HTML, chúng tôi phải bao gồm loại tài liệu để mọi thứ hoạt động chính xác
  2. 66. Phần tử
    67 bao bọc tất cả nội dung trên trang, còn được gọi là phần tử gốc. Và chúng ta nên luôn thêm thuộc tính
    68 để khai báo ngôn ngữ của trang
  3. 69. Phần tử
    90 là vùng chứa mọi thứ bạn muốn đưa vào, nhưng không chứa nội dung mà bạn hiển thị cho người dùng của mình
  4. 91. Phần tử meta đầu tiên được sử dụng để đặt bộ ký tự thành UTF-8, bao gồm hầu hết các ký tự từ các ngôn ngữ viết
  5. 92. Phần tử meta thứ hai chỉ định chế độ xem của trình duyệt. Cài đặt này dành cho trang web được tối ưu hóa cho thiết bị di động
  6. 93. Đây là phần tử
    94. Nó đặt tiêu đề của trang
  7. 95. Phần tử
    96 chứa tất cả nội dung trên trang

Cách xây dựng một trang công thức bánh kếp

Được rồi, bây giờ chúng ta đã có mã khởi động, hãy xây dựng một trang công thức làm bánh kếp. Chúng tôi sẽ sử dụng nội dung từ Trang AllRecipes này

Đầu tiên, hãy cung cấp nội dung phần tử

94 của công thức làm bánh kếp. Bạn sẽ thấy văn bản trên tab trang web thay đổi. Trong phần tử
96, hãy tạo 3 phần tử.
23,
00 và
01 đại diện cho 3 phần

1. Xây dựng phần tiêu đề

Trong tiêu đề, chúng tôi muốn có logo và điều hướng. Do đó, hãy tạo một

02 với nội dung
03 cho logo

Để điều hướng, hãy sử dụng phần tử

24. Trong phần tử
24, chúng ta có thể sử dụng
6 để tạo danh sách không có thứ tự. Chúng tôi muốn có 3 yếu tố
8 cho 3 liên kết. Thành phần, bước và đăng ký. Mã tiêu đề trông như thế này

My list:

  • Apple
  • Orange
  • Banana
5

2. Xây dựng phần chính

Trong phần chính, đầu tiên, chúng tôi muốn có một tiêu đề và một hình ảnh. Chúng tôi có thể sử dụng

08 cho tiêu đề và
1 cho hình ảnh (chúng tôi có thể sử dụng hình ảnh từ Unsplash miễn phí)

My list:

  • Apple
  • Orange
  • Banana
6

Tiếp theo, chúng tôi muốn liệt kê tất cả các thành phần. Chúng ta có thể sử dụng

10 để tạo danh sách có thứ tự và
11 để tạo hộp kiểm

Nhưng trước đó, chúng ta có thể sử dụng

12 để bắt đầu một khối nội dung mới. Chúng tôi cũng muốn thêm thuộc tính
13 cho
12 để liên kết trong điều hướng biết đi đâu

My list:

  • Apple
  • Orange
  • Banana
7

Sau các thành phần, chúng tôi muốn liệt kê tất cả các bước. Chúng ta có thể sử dụng

5 cho tiêu đề bước và
62 cho nội dung bước

My list:

  • Apple
  • Orange
  • Banana
8

Được rồi, bây giờ chúng ta đã hoàn thành phần chính, hãy chuyển sang phần chân trang

3. Xây dựng phần Footer

Ở chân trang, chúng tôi muốn có một biểu mẫu đăng ký và văn bản bản quyền

Đối với biểu mẫu đăng ký, chúng tôi có thể sử dụng phần tử

17. Bên trong nó, chúng ta có thể có một
18 để nhập văn bản và một
63 cho nút gửi

Đối với văn bản bản quyền, chúng tôi chỉ cần sử dụng một

4. Lưu ý ở đây, chúng ta có thể sử dụng thực thể HTML
21 cho biểu tượng bản quyền

Chúng tôi có thể thêm

22 để thêm khoảng cách giữa biểu mẫu đăng ký và văn bản bản quyền

My list:

  • Apple
  • Orange
  • Banana
9

được rồi bây giờ chúng ta đã hoàn thành. Đây là mã đầy đủ để tham khảo

0

Phần kết luận

Bạn có thể xây dựng một trang web đơn giản chỉ với HTML. Nhưng để có thể xây dựng các trang web đẹp và đầy đủ chức năng, bạn cần học CSS và JavaScript

Bạn có thể theo dõi tôi trên phương tiện truyền thông xã hội hoặc Youtube để cập nhật trong tương lai về các chủ đề này. Nhưng trong khi chờ đợi, bạn có thể xem Giáo trình freeCodeCamp để thực hành HTML bằng cách giải quyết các nhiệm vụ nhỏ

Nếu không, hãy viết mã vui vẻ và hẹn gặp lại bạn trong các bài viết sau 👋.

__________ 🐣 Giới thiệu về tôi __________

  • Tôi là người sáng lập DevChallenges
  • Đăng ký kênh của tôi
  • Theo dõi Twitter của tôi
  • tham gia bất hòa

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Tôi có thể học HTML cho người mới bắt đầu ở đâu?
Thủ Nghiêm

Người tạo thử thách phát triển. io


Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm thế nào để học HTML cho người mới bắt đầu?

Hướng dẫn HTML .
Học dễ dàng với HTML "Tự mình thử" Với trình chỉnh sửa "Tự mình thử" của chúng tôi, bạn có thể chỉnh sửa mã HTML và xem kết quả. .
Ví dụ HTML. Trong hướng dẫn HTML này, bạn sẽ tìm thấy hơn 200 ví dụ. .
bài tập HTML. Hướng dẫn HTML này cũng chứa gần 100 bài tập HTML. .
Kiểm tra bài kiểm tra HTML. .
Tài liệu tham khảo HTML

Học HTML có tốt cho người mới bắt đầu không?

HTML có lẽ là một trong những ngôn ngữ lập trình giao diện người dùng dễ thành thạo nhất . Vì vậy, nếu bạn muốn học HTML, hãy học nó. Với sự kiên nhẫn và thực hành, bạn sẽ học cách tận dụng tối đa ngôn ngữ phổ biến này.

Tôi có thể học HTML trong 7 ngày không?

Bạn sẽ mất từ một đến hai tuần để nắm được toàn bộ ý chính của HTML và khoảng một tháng thực hành để làm quen với . Điều quan trọng là áp dụng việc học của bạn bằng cách làm việc trên các dự án.

Tôi có thể học HTML trong 3 tháng không?

bạn có thể học html+css một cách nhanh chóng, thậm chí trong vòng chưa đầy 3 tuần . nhưng js sẽ cần hơn 3 tháng. học không phải là loại động từ "tôi đã hoàn thành 100% việc này". Sau 3 tháng bạn có thể giỏi nhưng vẫn phải học.