Làm thế nào để học HTML từng bước?

Học lập trình web chưa bao giờ dễ dàng đến thế. Hiểu các khái niệm về Phát triển Web từ gốc rễ của nó là điều quan trọng nhất. Một khái niệm được chấp nhận rộng rãi rằng HTML & CSS là hạt nhân của Phát triển Web. Chúng tôi cung cấp cho bạn những tài nguyên đáng tin cậy nhất để bạn hiểu ngay từ cơ bản đến nâng cao về HTML & CSS

Bước 1 — Tìm hiểu kiến ​​thức cơ bản về HTML và CSS (Người mới bắt đầu)

Tài liệu này cung cấp cho bạn đủ kiến ​​thức cơ bản về HTML và CSS. Để đánh giá cá nhân, bạn có thể thử các câu đố. Có đủ ví dụ để thực hành và bạn cũng có thể thử nghiệm với các mã trong trình chỉnh sửa của nó

• http. //www. w3schools. com/html/mặc định. asp
• http. //www. w3schools. com/css/

Bước 2 — Học bằng cách làm (Người mới bắt đầu)

Bạn muốn trải nghiệm học bằng cách viết mã?

• https. //www. học viện mật mã. com/học/web

Bước 3 — Hiểu bố cục HTML (Nâng cao)

Xây dựng một ngôi nhà và xây dựng một ngôi nhà được quy hoạch tốt là hai việc khác nhau, bây giờ chúng ta đã có nền tảng vững chắc, chúng ta đã sẵn sàng để trở thành nhà sáng tạo, nhà thiết kế hay chưa?. Bài viết này giúp bạn tìm ra các kỹ thuật tạo bố cục đẹp. Bố cục đóng một vai trò rất quan trọng đối với bất kỳ trang web nào

• https. //www. người viết mật mã. io/css/tutorial/4-different-layout-techniques-create-single-page
• http. //học bố cục. com/

Bước 4 - Hiểu các biểu mẫu HTML (Nâng cao)

Điều rất quan trọng là bạn không kiểm tra sự kiên nhẫn của người dùng khi yêu cầu đầu vào, vì vậy các biểu mẫu rất quan trọng đối với bất kỳ ứng dụng web nào. Đăng ký, đăng nhập, phản hồi, Bình luận. tất cả cần được trình bày cho người dùng với phong cách rõ ràng và súc tích. Đi và chơi với các hình thức. Đừng quên. - Thực hành làm cho con người hoàn thiện

• http. //học. sà lan. com/html-css/hình thức tòa nhà/
• http. //www. trình mã hóa javascript. com/html-form/html-form-tutorial-p1. phtml

Bước 5 — Hiểu Định vị CSS (Nâng cao)

Ngôi nhà sạch sẽ có những thứ được đặt đúng chỗ — thiết kế nội thất. , khi xây dựng website yếu tố định vị rất quan trọng và cần đặc biệt chú ý. Không ESCAPE khỏi mã hóa. mã nó. học nó

• https. //www. học viện mật mã. com/các khóa học/nâng cao-css-định vị/0/1
• http. //học. sà lan. com/advanced-html-css/detailed-css-positioning/

Bước 6 — Xây dựng dự án bằng HTML và CSS (Trung cấp)

Thực hành nhiều hơn bằng cách xây dựng một dự án -

• http. //www. dự án odin. com/các khóa học/web-phát triển-101/bài học/html-css

Bước 7 — Tìm hiểu về Responsive (Trung cấp)

Di động, Máy tính bảng, Máy tính để bàn — thiết bị có nhiều kích cỡ màn hình. Ahhh. trang web của tôi chỉ hoạt động trên máy tính để bàn, tôi có cần tạo các trang web riêng biệt cho thiết bị di động và máy tính bảng không. Đợi, đợi, đợi. Chúng tôi có một khái niệm thiết kế web đáp ứng. hãy khám phá chúng và làm cho trang web của bạn hoạt động linh hoạt trên mọi thiết bị

• http. //www. w3schools. com/css/css_rwd_grid. asp

Bước 8 — Các phương pháp hay nhất (Nâng cao)

Khi bạn viết mã, bạn không muốn phạm sai lầm. Để viết mã rõ ràng và không có lỗi, cần tuân theo một số quy trình được các nhà phát triển trên toàn thế giới chấp nhận. Dưới đây là một số tài nguyên để viết mã thích hợp mà không có bất kỳ lỗi nào

• http. //học. sà lan. com/html-css/viết-mã-tốt-nhất-của-bạn/
• https. //mã số. tutplus. com/tutorials/30-css-thực tiễn tốt nhất cho người mới bắt đầu--net-6741

Bước 9 — Thời gian thử nghiệm — Bài tập (Lối tắt dẫn đến Thành công)

Việc học không hiệu quả khi bạn chưa kiểm tra những gì bạn đã học. Để việc học HTML & CSS của bạn hiệu quả, bạn nên thử sức mình với một số bài tập. Dưới đây là một số bài tập để bạn thực hành

Và rồi nó bắt đầu. Bạn đã chọn thực hiện những bước đầu tiên để trở thành nhà phát triển web – yay you. Và cột mốc đầu tiên của bạn. học HTML. Trong phần này, chúng ta sẽ xem HTML là gì, nó làm gì và những gì bạn cần biết khi bắt đầu. Trong một bài viết tiếp theo (sắp tới), tôi sẽ tóm tắt nó với các khái niệm nâng cao hơn, để cuối cùng, bạn có thể có bức tranh toàn cảnh

Bạn có nhớ Lộ trình để bắt đầu phát triển web không? . HTML

Vì vậy, HTML là gì và tại sao học nó là bước đầu tiên trong hành trình phát triển web của bạn?

Như đã đề cập trong Lộ trình – HTML (Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ đánh dấu được tiêu chuẩn hóa để tạo trang web. Bạn có thể sử dụng nó để tạo xương sống của trang web và thêm nội dung (văn bản, hình ảnh, âm thanh và video). HTML đánh dấu những thứ này để trình duyệt có thể diễn giải và hiển thị chúng một cách chính xác Như bạn sẽ thấy trong các bước sau, CSS sau đó sẽ xuất hiện để tạo kiểu cho trang của bạn – để làm cho trang trông giống như một trang web chứ không phải một tài liệu thuần túy

Tóm lại, bằng cách sử dụng HTML, bạn có thể đặt nền móng cho trang web của mình. Bạn thêm tất cả văn bản của mình, tạo cấu trúc của bạn (tiêu đề, đoạn văn, danh sách, bảng), bạn thêm liên kết đến các trang, hình ảnh, âm thanh, video khác. Sau đó, HTML đánh dấu những thứ này (rốt cuộc đó là ngôn ngữ đánh dấu) để chỉ rõ cho trình duyệt biết mỗi phần nội dung của bạn là gì để trình duyệt có thể diễn giải và hiển thị nội dung đó một cách chính xác

Tôi cần những gì để bắt đầu học HTML?

Chà, trước hết, một chiếc máy tính, rõ ràng là. Tin tốt?

Tiếp theo, bạn sẽ cần một trình soạn thảo mã – và không, Word sẽ không làm được. Ở mức tối thiểu, bạn sẽ sử dụng trình soạn thảo văn bản mặc định như Notepad nếu bạn đang sử dụng máy Windows; . Chúng được cài đặt sẵn trên máy của bạn, bạn chỉ cần khai thác chúng. Nếu bạn đang sử dụng Linux, bạn sẽ cần cài đặt trình chỉnh sửa mã – bạn có thể đọc bài viết này để biết cách chọn một trình chỉnh sửa mã. Trên thực tế, bạn nên tiếp tục đọc bài viết và cài đặt một chương trình chuyên dụng vì chúng có đầy đủ các tính năng sẽ tạo điều kiện thuận lợi cho việc học của bạn (chẳng hạn như đánh dấu cú pháp, lỗi tín hiệu, v.v. )

Cuối cùng, bạn sẽ cần một trình duyệt web – bất kỳ trình duyệt hiện đại nào cũng được – Chrome, Firefox, Safari nếu bạn đang sử dụng máy Mac. Tất nhiên, vì bạn sẽ học bằng các tài nguyên trực tuyến nên bạn sẽ cần có kết nối internet

Bạn đã sẵn sàng

OK, tôi đang nhìn chằm chằm vào trình chỉnh sửa mã, bây giờ thì sao?

Bây giờ bạn tạo một tài liệu mới – bạn biết Tệp, Mới… và sau đó bạn lưu nó vào một thư mục nhỏ xinh xắn mà lẽ ra bạn đã tạo cho việc học của mình. Đặt cho nó bất kỳ tên nào bạn muốn nhưng hãy chắc chắn rằng bạn lưu nó dưới dạng. tài liệu html (với một. phần mở rộng html)

Đây là những gì bạn cần học để bắt đầu

• Loại tài liệu
• Cấu tạo (đầu, thân)
• Thẻ
• yếu tố
• tiêu đề
• đoạn văn
• Bình luận
• liên kết
• Hình ảnh
• danh sách
• Các lớp học
• ID
• phong cách
• Các hình thức
• Div
• báo giá
• Cấp khối so với. nội tuyến
• iframe
• Ngữ nghĩa (tiêu đề, điều hướng, phần, bài viết, sang một bên, chân trang)
• thực thể
• Thẩm định
• Nội dung nhúng (âm thanh, video, v.v. )
• khả năng đáp ứng

VẬY, bây giờ bạn đã có danh sách kiểm tra để bắt đầu với HTML. Bạn có thể đánh dấu chúng ở đây (chúng sẽ vẫn được đánh dấu). Đây là nơi bạn có thể đến để bắt đầu học

Đợi đã - bạn biết gì không?

…có thể xem video HTML là gì của Jeremie Patonnier. Nó thân thiện với người mới bắt đầu, khiến bạn đi đúng hướng và anh ấy có giọng Pháp đáng yêu này. Trên thực tế, để đảm bảo bạn làm được, nó đây, được nhúng ngay tại đây

tài nguyên học tập HTML

Được rồi, NGAY BÂY GIỜ vào danh sách tài nguyên (không theo thứ tự cụ thể nào – cứ thử từng thứ một – sự lặp lại là mẹ của việc học, như bạn đã biết)

FreeCodeCamp (miễn phí)

FreeCodeCamp, không còn nghi ngờ gì nữa, là một trong những tài nguyên học tập tốt nhất hiện có. Nó giúp bạn bắt đầu ngay từ đầu (hoàn toàn mới làm quen) và di chuyển bạn một cách liền mạch qua hàng tấn thông tin mà bạn không hề nhận ra. Để đảm bảo rằng tất cả đều phù hợp, nó cung cấp nhiều dự án thực tế và để giúp ích cho khả năng được tuyển dụng của bạn, sẽ có các chứng chỉ trong quá trình thực hiện. Không chỉ vậy mà còn có một cộng đồng vững chắc trên toàn thế giới gồm những người cùng chí hướng. Thực hành, thực tế và cung cấp thông tin cùng một lúc, bạn có thể học bằng cách thực hành và nhận được phản hồi ngay lập tức, điều này luôn hữu ích khi bạn đang học. Bạn cũng có thể sớm gỡ lỗi mã của mình – một bổ sung hữu ích khác. Đơn giản là bạn không thể mắc sai lầm với chúng nhưng, được cảnh báo trước, nó rất dễ gây nghiện;

Mạng nhà phát triển Mozilla (MDN) (miễn phí)

Bất kể trình duyệt bạn chọn sử dụng là gì, bạn hoàn toàn nên xem trang tài liệu web của Mạng lưới nhà phát triển Mozilla. Bạn tìm thấy ở đây phần giới thiệu về việc học HTML (không rõ ràng, nếu không thì tôi sẽ không có nó trong danh sách) nhưng RẤT NHIỀU HƠN THẾ. Như trường hợp trước đây, bạn sẽ có thể tìm thấy nhiều tài nguyên hơn khi bạn tiến bộ trên con đường của mình. Hoàn thành với các ví dụ về mã. Thoải mái đi lang thang khắp nơi - họ có rất nhiều món quà ở bất cứ đâu bạn nhìn. Tôi nghĩ bạn sẽ đánh dấu trang này rất nhanh

W3Schools (miễn phí)

W3Schools. W3C là tập đoàn thực sự quản lý HTML – vì vậy có nghĩa là họ là một nguồn tốt để học. Họ đã trình bày nội dung của mình theo cách rất rõ ràng, đơn giản, với cấu trúc tốt, rõ ràng, nội dung ngắn gọn, một số phương pháp được đề xuất rất hữu ích, ví dụ về mã trong thực tế và nhiều danh sách rất đầy đủ. Họ cũng cung cấp nhiều ví dụ và cơ hội để tự mình thử và bạn có thể thấy từng tính năng đang hoạt động. Khi bạn tiến bộ, bạn có thể kiểm tra kiến ​​thức của mình bằng các bài tập và bài kiểm tra của họ và thậm chí bạn có thể nhận được một chút chứng nhận khi bạn làm việc đó (mặc dù ban giám khảo vẫn chưa đánh giá được tính hữu ích / mức độ phù hợp của nó; tôi muốn nói rằng đó là một danh mục đầu tư tốt

Học viện Khan (luôn miễn phí)

Trang web học tập khác mà tôi sẽ thề bất cứ ngày nào là Khan Academy. Các khóa học của họ, bao gồm Giới thiệu về HTML&CSS – tạo trang web, có mọi thứ – cấu trúc, video, ví dụ, thách thức, Nhưng trên hết – có một tab với tài liệu, tóm tắt những điều cần thiết, Bạn có thể thực hành trên chúng . Ồ, và có nhiều phiên bản ngôn ngữ, trong trường hợp tiếng Anh không phải của bạn

EdX (miễn phí)

trang web THỰC SỰ tuyệt vời với một số khóa học xuất sắc (tôi sẽ nói với bạn nhiều hơn trong một bài viết khác); . Hãy xem Nguyên tắc cơ bản về HTML5&CSS của W3C và Microsoft trên edx. tổ chức – với 300. 000 người đăng ký. Đối với phiên bản miễn phí, hãy đăng ký tài khoản, đăng ký và chọn Kiểm tra khóa học này. Nó mang đến cho bạn sự kết hợp của video, thông tin cơ bản, câu đố nhanh, khám phá độc lập, v.v.

Cuối cùng – LinkedIn Learning và Pluralsight. một số tùy chọn trả phí (giá trị tuyệt vời với chi phí tương đối nhỏ)

Mặc dù không miễn phí – LinkedIn Learning (trước đây là Lynda. com) là mục tiêu tuyệt đối của tôi cho hầu hết quá trình học tập của tôi. KHÔNG CÓ GÌ họ không có – và điều này đặc biệt đúng khi học HTML. Hãy tiếp tục và tận dụng tháng dùng thử miễn phí của họ và thử một khóa học (hoặc năm. )) ra khỏi danh mục khoảng 220 khóa học liên quan đến HTML. Bạn có thể thử khóa đào tạo Cơ bản về HTML và có thể xem tất cả khớp với nhau như thế nào bằng cách tham gia khóa đào tạo cơ bản về lập trình Web. Các khóa học, hoàn toàn là tất cả, đều được thực hiện cực kỳ tốt – không chỉ về nội dung mà còn về cách trình bày và tài nguyên học tập. Vì các khóa học của họ đều là video có kích thước vừa phải – bạn có thể xem, dừng, suy nghĩ, thực hiện, tua lại, v.v. – điều này rất thiết thực, đặc biệt là khi mức độ khó (cuối cùng) tăng đột biến. Một lời cảnh báo mặc dù. bạn sẽ bị cuốn hút

Điều tương tự cũng có thể xảy ra đối với Pluralsight – các khóa học chất lượng cao, được phân phối tốt do đội ngũ khoảng 1500 tác giả chuyên gia của họ tạo ra. Sự khác biệt duy nhất là Pluralsight dường như chủ yếu dành cho các chuyên gia – nhưng điều đó không có nghĩa là họ không có một số khóa học dành cho người mới bắt đầu tốt. Lấy cái này làm ví dụ. Nguyên tắc cơ bản về HTML – có thể tận dụng bản dùng thử 10 ngày của họ để kiểm tra

Một số tài nguyên khác mà tôi thấy thực sự hữu ích và được thực hiện tốt

• Học viết mã HTML&CSS của Shay Howe
• Hướng dẫn HTML cho người mới bắt đầu bởi WebsiteSetup
• Khái niệm cơ bản về HTML – các khái niệm và nguyên tắc chính được giải thích bởi BitDegree
• Thực hành phát triển web bằng DevPractical (cơ bản tuyệt đối)
• Hướng dẫn HTML bằng HTML. net
• Hướng dẫn HTML của Landofcode. com
• Hướng dẫn HTML5 của Duncan Aitken
• Hướng dẫn HTML5 của TutorialBrain
• HTML&CSS khó (nhưng không nhất thiết phải thế) bởi Oliver James tại Internet khó
• Khóa học HTML Crash dành cho người mới bắt đầu tuyệt đối của Brad Traversy
• HTML cho người mới bắt đầu một cách dễ dàng bằng html. com
• Cần một thiết lập cơ bản để làm việc với? . Bây giờ, nó nói là HTML – nhưng nó phức tạp hơn thế nhiều. Trên thực tế, khi bạn lần đầu tiên nhìn vào nó, nó sẽ trông phức tạp hơn rất nhiều vì không chỉ có HTML ở đó – nhưng hãy mày mò và dần dần mọi thứ sẽ bắt đầu có ý nghĩa. Và nó sẽ giúp bạn có một khởi đầu thuận lợi cho bước tiếp theo – CSS

Dù bạn chọn cách nào để bắt đầu học HTML, điều QUAN TRỌNG là không chỉ đọc đi đọc lại; . Hãy chắc chắn thực hành từng khái niệm mới, tự mình thử nó – đó thực sự là cách duy nhất để thực sự tiến bộ

Điểm dừng tiếp theo. khi bạn đã hoàn tất và cảm thấy sẵn sàng tiếp tục, hãy xem Tìm hiểu CSS – hoặc, nếu bạn cần xem bức tranh toàn cảnh, hãy xem Lộ trình đến với nhà phát triển web

Tất cả đã được làm xong. Hãy bắt tay vào làm và cho tôi biết những cách này phù hợp với bạn như thế nào và nếu có các tài nguyên khác mà bạn nghĩ nên đưa vào bài viết này – hãy để lại một dòng trong phần bình luận bên dưới

Làm thế nào để học HTML một cách dễ dàng?

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

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

Học HTML có đơn giản không?