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 Show
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 & CSSCác yếu tố BootstrapHướng dẫn HTML nâng caoHướng dẫn CSS nâng caoHướng dẫn CSS của chuyên giaTài nguyên
Đó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 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
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 HTML là gì?Các phần tử HTML là gì?phần tử HTMLPhầ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
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
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ếnCó 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ếnTheo 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ể HTMLNế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? 0Cách sử dụng biểu tượng cảm xúc trong HTMLTrong 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. 👻 1Những lỗi phổ biến dành cho người mới bắt đầu trong HTML1. 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ẻ đóngKhô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 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épCái này sai 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 HTMLCá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 HTMLTrướ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 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ó
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 52. Xây dựng phần chínhTrong 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í) 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 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 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 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ậnBạ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 👋.
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 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. |