“Làm cách nào để giới thiệu mã hóa cho con tôi?” . Phát triển web có thể là điểm khởi đầu tốt cho trẻ em K12 bắt đầu học viết mã. Trẻ em có thể tạo các trang web đơn giản của riêng mình bằng cách bắt đầu xây dựng trang web đơn giản bằng HTML và CSS
Phát triển web được coi là một trong những cách dễ nhất để học lập trình. Trẻ em có cơ hội tìm hiểu kiến thức cơ bản về tạo trang web và khám phá mã hóa theo cách thú vị và sáng tạo. Các lớp viết mã cho trẻ em cũng có thể giúp chúng làm nên điều kỳ diệu trong quá trình phát triển web
Trong blog này, chúng ta sẽ xem cách tạo trang web đơn giản bằng HTML và CSS cơ bản. Điều này sẽ giúp bạn hiểu các bước đầu tiên của việc xây dựng trang web như trang web Danh mục đầu tư của Anvita. Anvita là sinh viên tại Skoolofcode. Cô đã xây dựng trang web Danh mục đầu tư của mình như một dự án của mình trong khi học khóa học phát triển web trực tuyến tại Skoolofcode
Vậy các trang web là gì?
Mục lục
1 Trang web là gì?
2 Lập trình phát triển web
3 Trang web Hello World sau 2 phút
4 Hãy cùng nhau xây dựng nhiều hơn với HTML
4. 1 Đây là giải thích về mã-
5 Tạo kiểu cho trang web bằng CSS
5. 1 Màu chữ
5. 2 Một số kiểu CSS khác
6 Chúng tôi đã làm gì với CSS?
6. 1 Màu nền của trang web
6. 2 Căn chỉnh văn bản
6. 3 Cỡ chữ
6. 4 Ngắt dòng
Các trang web là gì?
Trang web là tài liệu được tạo thành từ văn bản, hình ảnh, video và các loại dữ liệu khác. Và một hoặc nhiều trang web liên kết với nhau tạo nên một trang web. Các trang web ở xung quanh chúng ta, vì vậy đã đến lúc bạn xây dựng trang web của riêng mình.
Nhưng làm thế nào để chúng ta xây dựng một trang web? .
Lập trình phát triển web
HTML [Hypertext Markup Language] là ngôn ngữ đánh dấu tiêu chuẩn tạo ra các trang web. CSS [Cascading Style Sheets] mô tả giao diện của các phần tử HTML
HTML cho trình duyệt web [như Chrome hoặc Internet Explorer] biết văn bản và hình ảnh nào cần hiển thị. HTML cũng cho biết những văn bản và hình ảnh này sẽ xuất hiện ở đâu.
CSS mô tả hình thức của những hình ảnh hoặc văn bản này. Bằng cách thêm một số kiểu CSS đơn giản vào trang web của bạn, bạn có thể làm cho nó trông thú vị hơn.
Bây giờ bạn đã biết cách sử dụng HTML và CSS, hãy bắt đầu xây dựng trang web của chúng ta
Trang web Hello World trong 2 phút
Thực hiện theo các bước sau để xây dựng một trang web đơn giản
- Mở bất kỳ trình soạn thảo văn bản nào như Notepad [trên Windows], TextEdit [trên Mac]. Bạn cũng có thể sử dụng các trình chỉnh sửa trực tuyến như WebStorm, Repl hoặc IDE như Visual Studio Code
- Tạo một tệp mới và lưu nó dưới dạng chỉ mục. html. Đảm bảo phần mở rộng của tệp là. html trong khi lưu tệp
- Thêm đoạn mã sau vào chỉ mục của bạn. html
Hello World!
Bây giờ hãy lưu tệp và mở tệp trong bất kỳ trình duyệt Web nào trên máy tính của bạn [Chrome/Firefox/Edge, v.v. ] để xem trang web của bạn.
Hay đấy. Bạn đã tạo trang web đầu tiên của mình.
Hãy cùng nhau xây dựng nhiều hơn với HTML
Mọi việc lớn đều bắt đầu từ bước đầu tiên. Xin chúc mừng bạn đã bắt đầu và tạo trang web đầu tiên của mình. Bây giờ chúng ta phải làm điều này lớn hơn, tốt hơn và tuyệt vời hơn.
Bạn có thể thấy trang web của chúng tôi là một màn hình trắng trống và chúng tôi cần thêm một số nội dung để làm cho nó có ý nghĩa hơn. Vì vậy, hãy làm điều đó ngay lập tức.
Mở mục lục. html một lần nữa trong trình chỉnh sửa của bạn và thêm các dòng mã sau vào đó-
Hello World!
Hello World! -Welcome To My First Webpage
Mã này xác định tài liệu HTML của trang Web của chúng tôi.
Lưu ý rằng mọi thẻ đều có thẻ đóng phù hợp. Các thẻ mở và thẻ đóng cùng nhau tạo thành một thành phần trên Trang web.
Đây là một lời giải thích về mã-
Dòng đầu tiên là thẻ mở đầu. Các trình duyệt web biết rằng tất cả các phần tử giữa và đều là các thẻ HTML để tạo các trang Web
Dòng thứ hai < head> yêu cầu trình duyệt Web hiển thị bất cứ thứ gì giữa và trong tiêu đề của trang Web. Các trình duyệt Web khác nhau sử dụng thông tin khác nhau từ phần này trong khi lập chỉ mục trang web của bạn
Chúng tôi đã đặt tiêu đề cho trang web của mình là “Xin chào thế giới. ” sử dụng thẻ trong thẻ của chúng tôi
Sau đó, có thẻ . Trình duyệt web hiển thị mọi thứ giữa và , dưới dạng nội dung của trang Web. Lần này, chúng tôi có thẻ tiêu đề 1 [
] cùng với văn bản “Xin chào thế giới. -Chào mừng đến với trang web đầu tiên của tôi” bên trong nó. Có 6 mức kích thước tiêu đề- là lớn nhất, là nhỏ nhất
Đã đến lúc xem Trang web của bạn.
Lưu chỉ mục. html và mở lại trong trình duyệt Web để xem nó trông như thế nào.
Bây giờ trang web của bạn sẽ trông như thế này-
We can add some more text inside tag as follows-
Hello World!
Hello World! -Welcome To My First Webpage
Skoolofcode - Web Development is so much fun!! :]
Chúng tôi vừa biết rằng với thẻ p [đoạn văn], bạn có thể thêm văn bản vào trang web của mình. Điều đó đơn giản đến mức nào?
Đây là giao diện trang web của bạn bây giờ-
Tạo kiểu cho trang web bằng CSS
Chúng tôi đã thêm một số nội dung trong trang web. Bây giờ hãy tạo kiểu cho nó
Màu phông chữ
Hãy bắt đầu bằng cách thêm màu sắc vào văn bản. Vì vậy, hãy tiếp tục và cập nhật chỉ mục của bạn. tập tin html như sau
Hello World!
Hello World! -Welcome To My First Webpage
Skoolofcode - Web Development is so much fun
mở chỉ mục. html trong trình duyệt và bạn có thể thấy trang web của chúng tôi trông như thế nào bây giờ. Chúng ta đã làm gì? . Đó không phải là siêu dễ dàng?
Giải thích nhanh-
Trong thẻ mở p, chúng tôi đã sử dụng thuộc tính style. Thuộc tính kiểu có 2 phần- thuộc tính – thuộc tính chúng tôi muốn áp dụng [thuộc tính màu trong trường hợp của chúng tôi] theo sau là dấu hai chấm [. ] value – giá trị của thuộc tính [màu đỏ trong trường hợp của chúng ta].
Một số kiểu CSS khác
Hãy thực hiện thêm một số kiểu dáng bằng cách sử dụng các thuộc tính CSS khác-
Hello World!
Hello World!-Welcome to My First Webpage
Skoolofcode - Web Development is so much fun :]
Chúng tôi đã làm gì với CSS?
Màu nền cho trang web
Chúng tôi đã áp dụng màu nền cho toàn bộ trang web bằng thuộc tính màu nền trong thẻ body
Căn chỉnh văn bản
Chúng tôi đã sử dụng thuộc tính text-align để căn chỉnh tiêu đề ở giữa trang web của mình
Cỡ chữ
Chúng tôi đã sử dụng thuộc tính font-size để thay đổi kích thước văn bản thành 30 pixel và thuộc tính font-family để thay đổi phông chữ thành Courier trong đoạn văn