Thiết kế web đơn giản bằng html và css

“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

Thiết kế web đơn giản bằng html và css
Thiết kế web đơn giản bằng html và css

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? .

Thiết kế web đơn giản bằng html và css
Thiết kế web đơn giản bằng html và css

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

  1. 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
  2. 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
  3. 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.

Thiết kế web đơn giản bằng html và css
Thiết kế web đơn giản bằng html và css

Đâ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ẻ <title> trong thẻ <head> của chúng tôi<br></p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p><BODY>Sau đó, có thẻ <body>. Trình duyệt web hiển thị mọi thứ giữa <body> và </body>, dưới dạng nội dung của trang Web. Lần này, chúng tôi có thẻ tiêu đề 1 (<h1>) 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 đề- <h1> là lớn nhất, <h6> là nhỏ nhất</p><p><br>Đã đến lúc xem Trang web của bạn. <br>Lưu chỉ mục. html và mở lại trong trình duyệt Web để xem nó trông như thế nào. <br>Bây giờ trang web của bạn sẽ trông như thế này-</p><div class="imgBox"><img alt="Thiết kế web đơn giản bằng html và css" data-orgimg="https://sg.cdnki.com/thiet-ke-web-don-gian-bang-html-va-css---aHR0cHM6Ly9zcC1hby5zaG9ydHBpeGVsLmFpL2NsaWVudC90b193ZWJwLHFfZ2xvc3N5LHJldF9pbWcsd183MDAsaF8zNzMvaHR0cHM6Ly9za29vbG9mY29kZS51cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMS8xMi93ZWIyLmpwZw==.webp" ></img></div><div class="imgBox"><img alt="Thiết kế web đơn giản bằng html và css" data-orgimg="https://sg.cdnki.com/thiet-ke-web-don-gian-bang-html-va-css---aHR0cHM6Ly9zcC1hby5zaG9ydHBpeGVsLmFpL2NsaWVudC90b193ZWJwLHFfZ2xvc3N5LHJldF9pbWcsd183MDAsaF8zNzMvaHR0cHM6Ly9za29vbG9mY29kZS51cy93cC1jb250ZW50L3VwbG9hZHMvMjAyMS8xMi93ZWIyLmpwZw==.webp" ></img></div><p><br><br>We can add some more text inside <body> tag as follows-</p><pre><code><html> <head> <title>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ờ-

Thiết kế web đơn giản bằng html và css
Thiết kế web đơn giản bằng html và css

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

Làm cách nào chúng ta có thể tạo một trang web đơn giản bằng HTML và CSS?

Cách viết mã trang web .
Tìm hiểu kiến ​​thức cơ bản về HTML
Hiểu cấu trúc tài liệu HTML
Tìm hiểu bộ chọn CSS
Đặt biểu định kiểu CSS cùng nhau
Tải Bootstrap
Chọn một thiết kế
Tùy chỉnh trang web của bạn bằng HTML và CSS
Thêm nội dung và hình ảnh

Tôi có thể tạo một trang web chỉ bằng HTML và CSS không?

Câu trả lời ngắn gọn là có, bạn có thể tạo một trang web đơn giản chỉ với HTML và CSS . Tuy nhiên, nếu bạn muốn bắt đầu xây dựng một số trang web thực sự thú vị và linh hoạt hơn trong những gì bạn có thể làm, bạn cần sử dụng JavaScript, ngôn ngữ phụ trợ, lưu trữ web và cơ sở dữ liệu.

Làm cách nào tôi có thể tạo một trang Web đơn giản?

Cách thiết kế trang web .
Thiết lập mục tiêu
Chọn một người xây dựng trang web
Xác định bố cục của bạn
Yêu cầu tên miền của bạn
Thu thập nội dung của bạn
Thêm đúng trang
Thiết kế các yếu tố trang web của bạn
Chọn các công cụ chuyên nghiệp bạn cần

Bạn có thể xây dựng những gì chỉ với HTML và CSS?

Chỉ với HTML và CSS, bạn có thể làm những việc như xây dựng các trang web tĩnh nhiều trang, tạo mẫu email , thiết kế giao diện người dùng đẹp mắt, .