Tự học lập trình web front-end - Tập 1. HTML căn bản

253 5 0
Tự học lập trình web front-end - Tập 1. HTML căn bản

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Tự học HTML căn bản. Nội dung của cuốn sách này:– Giới thiệu một số chủ đề về chọn nghề, học làm nghề và phương pháp học– Kiến thức căn bản về web, trình duyệt, URL, siêu liên kết, siêu văn bản– Kiến thức tổng quan về HTML– Cách hiển thị văn bản– Tìm hiểu về liên kết– Hiển thị hình ảnh– Thiết kế form– Nhúng nội dung vào trang web– Các chủ đề mở rộng liên quan đến HTML– Tập làm dự án

TỰ HỌC LÀM WEB Tập – HTML Lê Gia Công Phiên 2023 Tự học làm web – Tập HTML Mục lục Lời nói đầu Nghề làm web 1.1 Áp dụng “Nụ cười Stan Shih” vào nghề Công nghệ thông tin 1.2 Muốn theo nghề lập trình đâu? 10 1.2.1 Học theo chương trình quy 11 1.2.2 Học theo chương trình tự chế 14 1.3 Làm web làm gì? 16 1.3.1 Các công đoạn để làm web 16 1.3.2 Một số vị trí nấc thang nghề nghiệp 16 1.3.3 Tham khảo quy trình để làm sản phẩm phần mềm 18 1.4 Muốn làm web cần học 20 1.5 Xem đọc thêm 22 1.6 Bài tập thực hành 23 Cách học 23 2.1 Học Hành 23 2.2 Thang đo Bloom 24 2.3 Tháp học tập 28 2.4 Chu trình học tập Kolb 29 2.5 Mơ hình Dreyfus 32 2.6 Xem đọc thêm 34 2.7 Bài tập thực hành 35 Lộ trình học web front-end 36 Web 40 4.1 Web 40 4.1.1 Web gì? 40 4.1.2 Nội dung web 41 4.1.3 Xem đọc thêm 42 4.1.4 Bài tập thực hành 42 Tự học làm web – Tập 4.1.5 4.2 Câu hỏi ôn tập 43 Trình duyệt web 44 4.2.1 Trình duyệt web gì? 44 4.2.2 Quá trình hiển thị trang web trình duyệt 48 4.2.3 Xem đọc thêm 49 4.2.4 Bài tập thực hành 50 4.2.5 Câu hỏi ôn tập 51 4.3 HTML URL, siêu liên kết siêu văn 52 4.3.1 URL gì? 52 4.3.2 Giao thức File 54 4.3.3 Siêu liên kết 55 4.3.4 Siêu văn 55 4.3.5 Xem đọc thêm 56 4.3.6 Bài tập thực hành 56 4.3.7 Câu hỏi ôn tập 58 HTML .59 5.1 Tạo trang web đơn giản 59 5.1.1 Trang web tĩnh gì? 59 5.1.2 Chuẩn bị nội dung cho trang web 60 5.1.3 Cấu trúc tài liệu HTML 61 5.1.4 Thêm cấu trúc ngữ nghĩa cho nội dung 65 5.1.5 Phần tử kiểu block inline 67 5.1.6 Xem đọc thêm 69 5.1.7 Bài tập thực hành 69 5.1.8 Câu hỏi ôn tập 73 5.2 Hoàn thiện trang web đơn giản 74 5.2.1 Phần tử rỗng 74 5.2.2 Thuộc tính 75 5.2.3 Hiển thị tiếng Việt 77 5.2.4 Thêm CSS cho trang web 78 5.2.5 Kiểm tra tính hợp lệ mã HTML 79 5.2.6 Xem đọc thêm 81 Tự học làm web – Tập HTML 5.2.7 Bài tập thực hành 81 5.2.8 Câu hỏi ôn tập 86 5.3 Hiển thị văn 87 5.3.1 Đoạn văn đề mục 87 5.3.2 Danh sách 90 5.3.3 Một số phần tử hiển thị nội dung khác 94 5.3.4 Xem đọc thêm 97 5.3.5 Bài tập thực hành 97 5.3.6 Câu hỏi ôn tập 100 5.4 Bố cục trang web 100 5.4.1 Các phần tử tạo bố cục trang web 101 5.4.2 Xem đọc thêm 110 5.4.3 Bài tập thực hành 111 5.4.4 Câu hỏi ôn tập 116 5.5 Phần mềm lập trình web 117 5.5.1 Phân loại phần mềm lập trình 117 5.5.2 Sử dụng phần mềm lập trình 120 5.5.3 Xem đọc thêm 120 5.5.4 Bài tập thực hành 120 5.5.5 Câu hỏi ôn tập 122 5.6 Một số phần tử HTML khác 123 5.6.1 Các phần tử inline 123 5.6.2 Div span 125 5.6.3 Cải thiện khả tiếp cận với ARIA 128 5.6.4 Hiển thị kí tự đặc biệt 129 5.6.5 Xem đọc thêm 130 5.6.6 Bài tập thực hành 131 5.6.7 Câu hỏi ôn tập 137 5.7 Liên kết trang web 138 5.7.1 Trang web, website, ứng dụng web 138 5.7.2 Tạo liên kết 140 5.7.3 Liên kết 141 Tự học làm web – Tập HTML 5.7.4 Liên kết website 142 5.7.5 Liên kết trang web 149 5.7.6 Liên kết đến phân đoạn trang khác 152 5.7.7 Hiển thị trang đích 152 5.7.8 Gửi email, gọi điện thoại liên kết 153 5.7.9 Tải tập tin liên kết 154 5.7.10 Xem đọc thêm 154 5.7.11 Bài tập thực hành 154 5.7.12 Câu hỏi ôn tập 160 5.8 Hình ảnh 161 5.8.1 Phần tử img 161 5.8.2 Ảnh SVG 165 5.8.3 Hiển thị ảnh linh hoạt 168 5.8.4 Xem đọc thêm 176 5.8.5 Bài tập thực hành 176 5.8.6 Câu hỏi ôn tập 181 5.9 Bảng 182 5.9.1 Hiển thị liệu dạng bảng 182 5.9.2 Gộp ô 185 5.9.3 Thêm ngữ nghĩa cho bảng 188 5.9.4 Bài tập thực hành 192 5.9.5 Xem đọc thêm 193 5.9.6 Câu hỏi ôn tập 193 5.10 Form 194 5.10.1 Tổng quan Form 194 5.10.2 Các control phổ biến 199 5.10.3 Tăng tính ngữ nghĩa cho form 207 5.10.4 Tạo bố cục thiết kế form 208 5.10.5 Bài tập thực hành 209 5.10.6 Xem đọc thêm 218 5.10.7 Câu hỏi ôn tập 218 5.11 Các thành phần nhúng 219 Tự học làm web – Tập HTML 5.11.1 Iframe 220 5.11.2 Object Embed 221 5.11.3 Video Audio 222 5.11.4 Canvas 224 5.11.5 Bài tập thực hành 226 5.11.6 Xem đọc thêm 228 5.11.7 Câu hỏi ôn tập 229 5.12 Một số chủ đề khác 229 5.12.1 HTML không ngôn ngữ đánh dấu 229 5.12.2 Cách tìm sửa lỗi HTML 230 5.12.3 Chú thích 232 5.12.4 Bài tập thực hành 235 5.12.5 Xem đọc thêm 235 5.13 Tập làm dự án 235 5.13.1 Dự án 235 5.13.2 Dự án 253 Tự học làm web – Tập HTML Lời nói đầu Câu hỏi xuất đầu, bạn thực muốn bước chân vào lĩnh vực làm web “muốn theo nghề làm web đâu?” Thực tế, bạn bắt đầu theo nhiều cách, ví dụ: – Cách một, học theo chương trình trường đại học, cao đẳng, hay trung tâm (tạm gọi chương trình quy) – Cách hai, tự học cách kết hợp dẫn, học nhiều thầy cô, anh chị mạng; với khóa học trực tuyến cơng ty, tổ chức, cá nhân Tạm gọi cách học thứ hai học theo chương trình tự chế ––tự bạn chế Học theo chương trình quy có số đặc điểm sau: – Bạn phải vượt qua kì thi đầu vào, đợt xét tuyển trường đại học cao đẳng – Học theo chương trình thiết kế sẵn trường – Chương trình học chi tiết, cho phép bạn lựa chọn theo đuổi nhiều ngành nghề khác – Bạn cần trả khoản tiền lớn cho học phí, học liệu, ăn ở, lại – Cần thời gian dài theo tiến độ đào tạo trường – Có nhiều mơn học khó, đơi khơng thực cần thiết; có mơn học mạnh bạn; bạn không thích, phải học Trong phần (phần Tổng quan) trình bày cụ thể lộ trình học theo chương trình quy, để bạn có thêm góc nhìn Tuy nhiên, bạn khơng có nhiều tiền, có ý chí muốn có nghề; đơn giản bạn muốn tự tìm kiếm cho đường riêng, bạn hồn tồn học nghề làm web theo chương trình tự chế Để học theo chương trình tự chế, bạn cần phải chuẩn bị máy tính; chi phí để mua khóa học, tài liệu; tính tốn hợp lý, chi phí khoảng tháng lương thử việc lập trình viên Chi phí lớn thời gian, ý chí tâm bạn Tài liệu viết cho bạn học theo kiểu tự chế Mời bạn trải nghiệm Để làm web, bạn cần đạt điều sau: – Nắm kiến thức bản, cần thiết, để tạo sản phẩm; làm sở giúp bạn học chủ đề nâng cao – Học kiến thức cách bản, có “lớp lang”, để trả lời câu hỏi “tại lại làm vậy?” Thực tế, có nhiều bạn biết làm khơng biết lại làm – Kỹ làm sản phẩm, làm nhiều quen, làm sản phẩm từ dễ đến khó – Kỹ tự học, tự đọc tài liệu (tiếng Việt, Anh) để có kiến thức áp dụng vào thực tế – Thái độ đắn làm nghề: yêu nghề, có đạo đức nghề nghiệp, tính kỉ luật, tinh thần trách nhiệm, khiêm tốn, khơng ngừng học hỏi Tự học làm web – Tập HTML “TỰ HỌC LÀM WEB, Tập – HTML bản” sách loạt sách giúp bạn tự tin bước vào nghề Sách viết theo kiểu dẫn dắt bước, bắt đầu với kiến thức lý thuyết bản, xem viên gạch móng, từ người học dễ dàng tiếp cận kiến thức sâu hơn, khó hơn; tiếp đến tự tìm tịi thử nghiệm kiến thức biết vào việc tạo sản phẩm Tiếp sau phần kiến thức bản, tài liệu cung cấp từ khóa, liên kết tới trang web, sách điện tử (ebook), video khác mạng để bạn tự tìm hiểu, tự thực hành thêm, giúp bạn có thêm nhiều góc nhìn, nhiều thơng tin nhiều trải nghiệm Sau có hiểu biết chủ đề, tài liệu cung cấp tập thực hành nhằm giúp người đọc hiểu rõ lý thuyết, bước nâng cao kỹ thực hành, tạo sản phẩm Ngồi ra, sách có tập, câu hỏi tiếng Anh, giúp người đọc bước làm quen, để tiến tới đọc làm việc với tài liệu hồn tồn tiếng Anh Bạn sử dụng danh mục từ tiếng Anh chuyên ngành đây: https://bit.ly/3iLYpgG Cuối phần có câu hỏi trắc nghiệm, giúp người học hệ thống củng cố lại kiến thức Các bạn tìm thấy liên kết đến video giảng, hướng dẫn làm tập thực hành ứng với chủ đề Youtube Cuối hướng dẫn để làm số dự án Nội dung sách này: – Giới thiệu số chủ đề chọn nghề, học làm nghề phương pháp học – Kiến thức web, trình duyệt, URL, siêu liên kết, siêu văn – Kiến thức tổng quan HTML – Cách hiển thị văn – Tìm hiểu liên kết – Hiển thị hình ảnh – Thiết kế form – Nhúng nội dung vào trang web – Các chủ đề mở rộng liên quan đến HTML – Tập làm dự án Đây sách loạt sách tự học làm web Cuốn sách bạn nên có “TỰ HỌC LÀM WEB, Tập – CSS bản” Dù cố gắng, tài liệu chắn hạn chế kiến thức, kĩ năng, nhận định Mong bạn đọc tâm hoài nghi Tự học làm web – Tập HTML Nghề làm web Trong phần này, bạn tìm hiểu số chủ đề có tính gợi mở, giúp bạn có tiếp cận ban đầu nghề, chọn nghề, học để làm nghề Một số chủ đề trình bày gồm: – Áp dụng Nụ cười Stan Shih vào nghề Công nghệ thơng tin – Muốn theo nghề lập trình đâu – Làm web làm – Muốn làm web cần học 1.1 Áp dụng Nụ cười Stan Shih vào nghề Công nghệ thông tin Từ hoạt động thực tiễn, chủ tịch tập đồn Acer, ơng Stan Shih đưa Đường cong nụ cười, thường gọi Nụ cười Stan Shih Qua đó, ơng cho rằng: chuỗi giá trị, giá trị gia tăng tạo sản xuất (manufacturing) nằm đáy đường cong Phần giá trị lại thuộc cơng việc địi hỏi nhiều kỹ chất xám hơn, như: lên ý tưởng (concept/R&D), xây dựng thương hiệu (branding), thiết kế (design), phân phối (distribution), marketing, bán hàng/dịch vụ hậu (sale/after service) Xem hình minh họa (đường cong màu xanh nụ cười Stan Shih): Phân phối Thiết kế Bán hàng/ dịch vụ hậu Giá trị gia tăng Lên ý tưởng Xây dựng thương hiệu Marketing Phân phối Thiết kế Gia công/lắp ráp Lao động giản đơn cần dùng Gia công/lắp ráp Chuỗi sản xuất Nụ cười Stan Shih ý tưởng Chu Hảo Từ ý tưởng Đường cong nụ cười tạm rút số ý, liên quan đến nghề nghiệp lĩnh vực Công nghệ thông tin: – Để có sản phẩm phần mềm, dịch vụ, hay giải pháp công nghệ, cần phải trải qua nhiều công đoạn Bao gồm: lên ý tưởng, nghiên cứu tính khả thi, xây dựng thương hiệu, phân tích hệ thống, thiết kế, cài đặt (lập trình), vận hành, phân phối, marketing, bán hàng, bảo trì, chăm sóc khách hàng Do vậy, không nên nghĩ rằng, học Công nghệ thông tin hay học làm web Tự học làm web – Tập HTML lập trình, mà thực tế cịn có nhiều cơng việc khác để bạn lựa chọn Hãy tiếp cận loại công việc, trải nghiệm bước, trải nghiệm nhiều tốt để xem bạn thực hợp với loại công việc Nguyên tắc chung trải nghiệm công việc đủ lâu đủ sâu để bạn nắm bắt quy trình cách thức làm việc; thời gian để trải nghiệm công việc không cố định, tùy thuộc vào khả điều kiện bạn Với việc trải nghiệm đa dạng, bạn có nhìn đa chiều, có tính hệ thống, thấy mối liên quan công đoạn Điều có lợi cho bạn, trước bạn chọn cơng việc thích hợp cho thân để gắn bó – Vịng đời sản phẩm bất kì, bao gồm nhiều cơng đoạn, phần mềm, dịch vụ hay giải pháp cơng nghệ thơng tin giúp ích vào cơng đoạn đó? Giúp giảm chi phí, tăng hiệu quả, hỗ trợ q trình sản xuất? Bạn ln suy nghĩ để ứng dụng công nghệ thông tin vào cơng đoạn, động lực giúp bạn tạo sản phẩm công nghệ thông tin hữu dụng Chưa cần phải làm hệ thống phức tạp, bắt đầu tiện ích, giải pháp, phần mềm đơn giản nhất, miễn có ích áp dụng vào cơng việc Theo thời gian, bạn có kinh nghiệm kiến thức để làm hệ thống lớn – Giá trị gia tăng (thu nhập) phân bổ theo đường cong nụ cười, bạn đối chiếu công đoạn vòng đời sản phẩm vào trục đứng (trục Giá trị gia tăng) để biết thu nhập vị trí, từ lựa chọn cơng việc phù hợp với khả thân để có thu nhập cao – Số lao động cần cho công đoạn phân bổ theo đường cong nụ cười lật ngược (theo ý kiến tác giả Chu Hảo, đường cong màu đỏ) Dựa vào đường cong lật ngược này, bạn biết công đoạn cần nhiều lao động (do dễ tìm việc hơn) Bạn biết công đoạn cần phải học nhiều hơn, làm việc – Có thể dùng kiến thức lĩnh vực Công nghệ thông tin để phát triển nghiệp thân khởi nghiệp theo ngành nghề khác Ngoài ý tưởng Đường cong nụ cười, bạn nên tham khảo vài nhận xét hữu ích marketing đại, để áp dụng vào nghề mình: – Bản chất giao dịch trao đổi thị trường khơng cịn trao đổi hàng hóa hữu hình mà trao đổi dịch vụ (service) Dịch vụ hiểu trình sử dụng kỹ năng, kiến thức, công nghệ tác động lên đối tượng hữu hình (con người, máy tính, nhà cửa, đất đai, hàng hóa hữu hình) để tạo giá trị Như vậy, hàng hóa vật trung gian để cung cấp dịch vụ – Kỹ kiến thức đơn vị trao đổi bản, tảng lợi cạnh tranh Do vậy, bạn cần không ngừng học hỏi để nâng cao giá trị cá nhân tổ chức – Khách hàng người đồng sản xuất – Lấy dịch vụ làm trung tâm, hướng vào khách hàng 1.2 Muốn theo nghề lập trình đâu? Như phần Nụ cười Stan Shih đề cập, ngành Công nghệ thơng tin, lập trình cơng việc cần nhiều lao động, dễ tìm việc làm Lập trình cơng việc đơn giản so với cơng đoạn khác vịng đời sản phẩm, bạn lựa chọn để thử sức Học nghề lập trình giúp bạn có tảng tốt, từ có nhiều lợi trước thử sức công đoạn khác vịng đời sản phẩm cơng nghệ thông tin 10 Tự học làm web – Tập HTML lienHe.html Lưu ý: bạn nên lựa chọn phong cách đặt tên cho thư mục, tập tin Ví dụ, tên ln viết liền; tên thư mục viết hoa chữ (theo kiểu PascalCase); tên tập tin viết thường chữ đầu tiên, chữ sau viết hoa chữ (theo kiểu camelCase) Bạn lên mạng để đọc thêm kiểu đặt tên camelCase, underscore, PascalCase Chúng ta bắt đầu viết mã cho trang index.html Bạn dùng trình viết mã Ví dụ dùng VS Code Trong VS Code, mở tập tin index.html, bấm tổ hợp phím Shift + > Enter để tạo cấu trúc tài liệu HTML chuẩn, xóa đoạn mã chưa hiểu, kết là: Document Thêm thông tin mô tả trang web phần tử : Tiệm sách cũ Cu Tèo Tạo chèn logo: – Bạn nhờ người khác, tự thiết kế logo phần mềm – Hoặc lên trang tạo logo online miễn phí – Xem logo trang có sẵn để tham khảo, để ý kích thước loại tập tin logo Tạo menu: sử dụng phần tử ,
    ,
    • Giới thiệu tiệm sách
    • Các loại sách bán
    • Thời gian mở cửa 239 Tự học làm web – Tập HTML
    • Liên hệ
    Thêm dịng nội dung “Sách nhập về”, sau ảnh sách nhập Sử dụng phần tử , Sách nhập - Ngày 6/3/2023 Kết thúc phần header, thêm đường kẻ ngang để phân biệt với phần nội dung (main) Sử dụng phần tử Viết nội dung cho vùng main, sử dụng phần tử , bạn viết thích để tiện theo dõi mã nguồn, Trong vùng main, thêm nội dung Giới thiệu tiệm sách Chúng ta học thêm cách chèn hình biểu tượng (emoji) vào trang web Vào trang emojipedia.org, nhập vào từ khóa bạn muốn tìm biểu tượng, ví dụ “book”, biểu tượng xuất hiện, bạn chọn cái, chọn Copy, dán vào mã nguồn Giới thiệu tiệm sách

    Vì sở thích đọc sách, sách cũ 📚📚📚.

    Năm 2020, Cu Tèo tạo không gian để bạn u sách tới tìm cho cuốn sách ưng ý với giá phải chăng.

    Trong article “gt-ve-tiem-sach”, thêm câu hỏi tương tác cho trang web Đây câu hỏi đơn giản, giúp người dùng cảm thấy hút phải động não chút để trả lời Sử dụng phần tử , , ,

    Mỗi ngày câu hỏi Tại gọi cô dâu rể đôi uyên ương? 240 Tự học làm web – Tập HTML

    Uyên ương loài vịt, gọi vịt un ương Chúng có ngoại hình đẹp sống với thủy chung Người ta lấy làm biểu tượng để gửi gắm thơng điệp cho vợ chồng ngày cưới

    Kết thúc article “gt-ve-tiem-sach”, thêm đường kẻ ngang để ngắt chủ đề Viết mã để hiển thị thông tin Các loại sách bán Bao gồm sách Kinh tế, Văn học, Truyện tranh, Kĩ thuật, sách khác Một phần mã nguồn, Các loại sách bán DANH MỤC SÁCH Sách Kinh tế Sách Văn học Truyện tranh Sách Kĩ thuật Sách khác Bạn viết tiếp mã HTML lại để có bảng Danh mục sách Thêm thẻ để xuống hàng, thêm liên kết để đầu trang,

    Trở đầu trang

    Thêm thông tin quyền, địa chỉ, điện thoại đồ cho biết vị trí tiệm sách Ví dụ

    Bản quyền © thuộc Cu Tèo.

    Địa chỉ: 15, Thông Thiên Học, Đà Lạt

    Điện thoại: 0888 123456

    Vậy xong trang index [index.html] Tiệm sách cũ Cu Tèo Tiệm sách cũ Cu Tèo Thêm sách > bớt game
    • Giới thiệu tiệm sách
    • Các loại sách bán
    • Thời gian mở cửa
    • Liên hệ
    Sách nhập - Ngày 6/3/2023 242 Tự học làm web – Tập HTML Giới thiệu tiệm sách

    Vì sở thích đọc sách, sách cũ 📚📚📚.

    Năm 2020, Cu Tèo tạo không gian để bạn yêu sách tới tìm cho cuốn sách ưng ý với giá phải chăng.

    Mỗi ngày câu hỏi Tại gọi cô dâu rể đôi uyên ương?

    Uyên ương lồi vịt, gọi vịt un ương Chúng có ngoại hình đẹp sống với thủy chung Người ta lấy làm biểu tượng để gửi gắm thơng điệp cho vợ chồng ngày cưới

    Các loại sách bán DANH MỤC SÁCH Sách Kinh tế Sách Văn học Truyện tranh Sách Kĩ thuật Sách khác
    1. Kinh tế 1
    2. 243 Tự học làm web – Tập HTML
    3. Kinh tế 2
    4. Kinh tế 3
    5. Kinh tế 4
    6. Kinh tế 5
    1. Văn học 1
    2. Văn học 2
    3. Văn học 3
    4. Văn học 4
    5. Văn học 5
    1. Truyên tranh 1
    2. Truyên tranh 2
    3. Truyên tranh 3
    4. Truyên tranh 4
    5. Truyên tranh 5
    1. Kĩ thuật 1
    2. Kĩ thuật 2
    3. Kĩ thuật 3
    4. Kĩ thuật 4
    5. Kĩ thuật 5
    1. Từ điển
    2. Giáo trình
    3. Dạy đàn
    4. Nấu ăn
    5. Tâm lý
    244 Tự học làm web – Tập HTML Mời bạn tới tiệm sách để tìm sách bạn yêu thích!

    Trở đầu trang

    Bản quyền © thuộc Cu Tèo.

    Địa chỉ: 15, Thông Thiên Học, Đà Lạt

    Điện thoại: 0888 123456

    Viết mã nguồn cho trang thoiGianMoCua.html Vì giao diện trang thoiGianMoCua.html có phần header footer giống với trang index.html Nên cần viết mã cho vùng main, Thời gian mở cửa Thứ > Thứ 6 Từ 8h:00 > 19h:00 Thứ 7 Từ 8h:00 > 17h:00 Chủ nhật Nghỉ

    245 Tự học làm web – Tập HTML Trở đầu trang

    Tuy nhiên, phải điều chỉnh chút mã nguồn menu,
  • Giới thiệu tiệm sách
  • Các loại sách bán
  • Thời gian mở cửa
  • Viết mã nguồn cho trang lienHe.html Vì giao diện trang lienHe.html có phần header footer giống với trang index.html Nên cần viết mã cho vùng main: Tạo tiêu đề, Liên hệ với tiệm sách Tạo form để người dùng liên hệ với tiệm sách Vì chưa học tới phần web back-end, nên thực gửi thông tin form dịch vụ có sẵn mạng Trang web http://httpbin.org/get nhận thông tin form, sau hiển thị liệu lên giao diện web, giúp bạn trải nghiệm với hoạt động form Liên hệ với tiệm sách Liên hệ với tiệm sách

    Tên:

    Email:

    Điện thoại:

    246 Tự học làm web – Tập HTML

    Lời nhắn:

    Gửi Xóa

    Trở đầu trang

    Sau lập trình form xong, bạn mở giao diện trang web, nhập vào trường bấm nút Gửi Bạn thấy thông tin người dùng nhập vào gửi tới trang http://httpbin.org/get Ví dụ, { "args": { "dien-thoai": "123456", "email": "levanti@gmail.com", "loi-nhan": "tiem sach co cuon Dung viec khong?", "ten": "le van ti" }, "headers": { … Chúng ta cần điều chỉnh chút mã nguồn menu,
    • Liên hệ Một vài hình ảnh trang web sau hoàn thành 247 Tự học làm web – Tập HTML Trang chủ, 248 Tự học làm web – Tập HTML Đưa website lên mạng Internet Chúng ta học chi tiết cấu hình web server, đưa website lên mạng phần học web back-end Phần tìm hiểu mức sơ lược Nếu để ý, bạn thấy đường dẫn trang web trình duyệt có dạng:     file:///E:/SachCu/index.html file:///E:/SachCu/thoiGianMoCua.html file:///E:/SachCu/lienHe.html file:///E:/SachCu/index.html#danh-muc-sach Nghĩa trình duyệt dùng giao thức File để lấy mã nguồn trang web từ đĩa cứng máy tính Sau sử dụng browser engine (ví dụ Gecko, Blink, Webkit) dịch mã hiểu thị trang web kết Như vậy, có bạn truy cập trang web, cịn người khác khơng Để người truy cập trang web, cần phải mang mã nguồn trang web lên Internet Người ta hay gọi hosting trang web Hosting trang web tổ chức lưu trữ Internet Hiểu đơn 249 Tự học làm web – Tập HTML giản, thay để mã nguồn trang web đĩa cứng bạn, bạn để đĩa cứng máy server mạng Khi để mã nguồn mạng, dùng giao thức HTTP HTTPS để lấy mã nguồn trình duyệt, khơng dùng giao thức File Và không sử dụng đường dẫn thư mục máy cụ (ví dụ : /E:/SachCu), mà dùng tên miền (domain name) (ví dụ: https://legiacong.github.io/sachcuteo/) để truy cập trang web Chúng ta lưu trữ website lên máy server số nhà cung cấp miễn phí Ví dụ, pages.github.com 000webhost.com wordpress.com blogspot.com my.noip.com my.freenom.com somee.com biz.nf Glitch Google drive Đưa website lên Github – Vào trang github.com, bạn chưa có tài khoản hệ thống github bấm vào Sign up để tạo tài khoản, có tài khoản bấm vào Sign in để đăng nhập hệ thống – Sau đăng nhập vào hệ thống, bấm vào mục New repository để tạo thư mục, chứa tập tin mã nguồn website Trong github, repository gọi kho chứa Ví dụ đặt tên cho repository sachcuteo Tên thư mục dùng làm tên miền website, hệ thống kiểm tra xem tên miền có dùng chưa, có người dùng bạn cần đổi tên miền khác, ví dụ sachcuteo1 – Sau nhập tên cho repository, ví dụ sachcuteo, bấm nút Create repository để tạo, – Trong kho chứa sachcuteo, bấm vào mục uploading an existing file để tải mã nguồn trang web từ máy tính lên 250 Tự học làm web – Tập HTML Bấm Commit changes, để ghi nhận bạn tải tập tin từ máy tính lên kho chứa sachcuteo Xuất trang web: vào mục Settings > khung bên trái chọn mục Pages > phần Branch chọn nhánh để xuất main > bấm Save 251 Tự học làm web – Tập HTML Bạn nhận thông báo website xuất bản, có địa (URL) là: https://legiacong.github.io/sachcuteo/ Bạn nhập URL website vào tab khác trình duyệt để xem kết Vậy bạn hoàn thành dự án nhỏ ban đầu Tự Lấy yêu cầu, Phân tích yêu cầu, Thiết kế giao diện, Lập trình, Triển khai website Chúc mừng bạn Còn nhiều nhà cung cấp nơi lưu trữ website miễn phí khác, bạn tự trải nghiệm thêm 252 Tự học làm web – Tập HTML 5.13.2 Dự án Dự án xem tập Dựa vào hướng dẫn, cách làm Dự án 1, bạn tự thực dự án riêng bạn Gợi ý, – Làm CV: https://drive.google.com/file/d/1mNfdquZIiZVA2RKOb3wMFVjcwO28X8gh/view – Làm trang báo: https://tuoitre.vn/ – Làm website bán hàng: vào themeforest.net; chọn giao diện mà bạn yêu thích để làm theo Ví dụ, http://preview.themeforest.net/item/groffer-organic-food-storetheme/full_screen_preview/43573410?_ga=2.237556672.1975830753.16784160631169128688.1661859716 Chúc bạn kiên trì Mời bạn đọc sách kế tiếp: TỰ HỌC LÀM WEB – Tập – CSS Đà Lạt, 10/3/2023 253 ... bạn theo nghề làm web (là công việc cụ thể nghề lập trình) hai cách: học theo chương trình quy, tự học theo chương trình tự chế 1.2.1 Học theo chương trình quy Để theo nghề lập trình, bạn cần phải... việc Lập trình front-end Mơ tả Lập trình phần liên quan đến giao diện người dùng Nếu coi trang web ngơi nhà, front-end lớp sơn, mặt tiền nhà 17 Tự học làm web – Tập HTML Lập trình back-end Lập trình. .. Về chuyên môn, bảng liệt kê số thứ cần học, người học cảm thấy việc học nhẹ nhàng hiệu học theo trình tự Tuy nhiên, tự học điều kiện mà khơng thể học theo thứ tự không Cứ tự tin học, thấy cịn

Ngày đăng: 14/03/2023, 13:56

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan