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
Đâ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 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
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
Các phần tử HTML là gì?
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ệuCá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 itemNesting 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
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 pixelVớ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
2Trong 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ị saiCá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
6Cá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
9Cá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
0Cá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
1Cá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
2Cá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
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òngNhư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.
29Cách bình luận trong HTML
8Mụ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ệtCá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
0Cá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
1Nhữ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
642. 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
2Cá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
3Bạ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ó
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
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
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
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
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
93. Đây là phần tử
94. Nó đặt tiêu đề của trang
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ần1. 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
52. 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
6Tiế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ểmNhư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
7Sau 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ềnChú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
0Phầ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
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