Bạn đang ở đúng nơi. Trong hướng dẫn này, chúng tôi chỉ cho bạn tất cả các bước để chuyển từ một màn hình trống sang một trang web đang hoạt động được tối ưu hóa và đồng thời khá đẹp mắt

Nhưng trước tiên, HTML và CSS là gì?

Chà, bạn chỉ cần tra cứu cả hai thuật ngữ trong Wikipedia, nhưng những định nghĩa đó không thân thiện với người đọc lắm. Hãy đơn giản hóa mọi thứ một chút

• HTML [Ngôn ngữ đánh dấu siêu văn bản] xác định cấu trúc và nội dung của một trang web – mọi thứ diễn ra ở đâu, chúng được trình bày như thế nào và có gì trên trang
• CSS [Cascading Style Sheets] xác định kiểu dáng/cách trình bày của một trang web và các thành phần trên đó

Bạn thực sự không thể có cái này mà không có cái kia – cả hai làm việc cùng nhau để tạo nên trang web cuối cùng, thiết kế và nội dung trên đó

Ghi chú; . Trong khi đó, “một trang web” là một thứ hoàn chỉnh - toàn bộ trang web của bạn với tất cả các trang web riêng lẻ của nó

Mục lục

1. cơ bản về HTML
2. Cấu trúc tài liệu HTML
3. bộ chọn CSS
4. một biểu định kiểu CSS cùng nhau
5. Bootstrap
6. một bản thiết kế
7. trang web của bạn với HTML và CSS
8. nội dung và hình ảnh
9. và phông chữ
10. trang bổ sung

Nếu bạn nghĩ rằng điều này quá phức tạp, chúng tôi khuyên bạn nên tạo một trang web bằng WordPress hoặc chọn một trong những trình tạo trang web

Trước khi bạn bắt đầu, hãy thu thập tài nguyên của bạn

Vì vậy, điều đầu tiên bạn cần ngay cả trước khi tạo một trang web bằng HTML và CSS là một máy chủ web [lưu trữ]. Tuy nhiên, đừng lo lắng; . Nhiều công ty lưu trữ web sẽ bán cho bạn một dịch vụ lưu trữ đơn giản trên máy của họ. Chỉ cần tìm kiếm “lưu trữ web” trên google và chọn thứ gì đó không quá đắt hoặc xem các đánh giá về lưu trữ web của chúng tôi

Với máy chủ được sắp xếp, điều tiếp theo bạn cần là một tên miền. Tên miền là những gì trang web được xác định trên web. Ví dụ: tên miền của trang web này là

p {
    font-size: 18px;
}

1

Khi bạn có cả tên miền và máy chủ, bạn có thể kết nối cả hai với nhau

Để giải quyết vấn đề này mà không gặp khó khăn gì, chúng tôi khuyên bạn nên đăng ký với một công ty như Bluehost

Họ sẽ xử lý tất cả các thiết lập cho bạn. Có nghĩa là họ sẽ. [a] thiết lập tài khoản lưu trữ cho bạn, [b] thay mặt bạn đăng ký tên miền, [c] định cấu hình mọi thứ để hoạt động cùng nhau và [d] cấp cho bạn quyền truy cập vào bảng điều khiển dễ sử dụng

Hãy tiếp tục và đăng ký với bất kỳ dịch vụ lưu trữ web nào, chúng tôi sẽ đợi. Khi bạn quay lại và đã định cấu hình máy chủ web của mình và sẵn sàng hoạt động, hãy chuyển sang bước tiếp theo

P. S. Nếu bạn chỉ muốn thử nghiệm một trang web HTML trên máy tính của mình và không có ý định công khai trang web đó, hãy sử dụng phần mềm máy chủ web cục bộ. Cái chúng tôi khuyên dùng và muốn sử dụng có tên là XAMPP. Nó có các phiên bản cho cả Mac và PC và rất dễ sử dụng. Đây là hướng dẫn về cách cài đặt nó trên máy tính của bạn

1. Tìm hiểu kiến ​​thức cơ bản về HTML

Thành phần chính của cấu trúc HTML là thẻ HTML

Ví dụ, một thẻ trông như thế này

SOMETHING

Ở đây, chúng tôi đang xử lý thẻ

p {
    font-size: 18px;
}

2. Cái này sẽ in đậm một đoạn văn bản nằm giữa thẻ mở [

p {
    font-size: 18px;
}

2] và thẻ đóng [

p {
    font-size: 18px;
}

4]. Trong trường hợp này, đoạn văn bản đó là

p {
    font-size: 18px;
}

5

Nhưng có những thẻ khác, chỉ để đặt tên cho một số

• p {
      font-size: 18px;
  }
  

  6 sẽ in nghiêng văn bản giữa thẻ mở và thẻ đóng

• p {
      font-size: 18px;
  }
  

  7 sẽ gạch dưới nó

• p {
      font-size: 18px;
  }
  

  8 là một đoạn văn bản

• p {
      font-size: 18px;
  }
  

  9 là tiêu đề chính trên trang

Ngoài những thẻ đơn giản đó, còn có những thẻ phức tạp hơn. Ví dụ, nếu bạn muốn xây dựng một danh sách như sau

• Mục 1
• Mục 2
• Mục 3

… bạn có thể làm điều đó với mã HTML sau

Item 1
Item 2
Item 3

Hoặc, nếu bạn muốn thêm một liên kết đến một trang khác, như trang này

Đây là một liên kết đến trang chủ của chúng tôi

… bạn có thể làm điều đó với đoạn mã này

This is a link to my homepage

Đọc phần này để có danh sách đầy đủ các thẻ HTML. Nó sẽ trở nên hữu ích khi bạn đang tạo một trang web bằng HTML và CSS

2. Hiểu cấu trúc tài liệu HTML

Hãy nghĩ về trang HTML của bạn như thể nó được xây dựng bằng Legos. Bạn đặt các viên gạch khác nhau chồng lên nhau để tạo ra một cấu trúc lớn hơn

Nhưng thay vì những viên gạch Lego, bạn có các thẻ HTML…

Đây là cấu trúc tài liệu HTML đơn giản nhất

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

Bạn có thể lấy mã ở trên, sao chép và dán mã vào một tệp mới, lưu tài liệu dưới dạng

.normal-text {
    font-size: 18px;
}

0 và đó sẽ là một trang HTML hoàn toàn hợp lệ

Hãy giải thích các phần riêng lẻ của mã này

• .normal-text {
      font-size: 18px;
  }
  

  1 – khai báo ban đầu của tài liệu

• .normal-text {
      font-size: 18px;
  }
  

  2 – một tuyên bố khác;

• .normal-text {
      font-size: 18px;
  }
  

  3 – đánh dấu sự bắt đầu của phần đầu;

• .normal-text {
      font-size: 18px;
  }
  

  4 – xác định bộ ký tự nào được sử dụng để viết tài liệu;

• .normal-text {
      font-size: 18px;
  }
  

  5 – tiêu đề của trang; . g

This is a link to my homepage0

Và sau đó sử dụng đoạn mã HTML sau trong tài liệu chính

This is a link to my homepage

1

Phương pháp thứ hai về cơ bản là cách mọi thứ được thực hiện trong Bootstrap

Để thay đổi màu của bất kỳ văn bản nào trên trang, trước tiên hãy tìm thẻ chịu trách nhiệm tạo kiểu cho văn bản đó, sau đó vào biểu định kiểu và sửa đổi lớp tương ứng hoặc tạo một lớp mới

Đây là một ví dụ; . ” Hiện tại, nó có màu đen và đây là mã xử lý nó

This is a link to my homepage

2

Để thay đổi màu sắc của nó, cách tốt nhất là tạo một lớp mới có tên, chẳng hạn,

Item 1
Item 2
Item 3

01 và đặt giá trị màu ở đó, như vậy

This is a link to my homepage

3

*

Item 1
Item 2
Item 3

02 sẽ đảm bảo rằng cài đặt màu này sẽ ghi đè lên bất kỳ cài đặt màu nào khác có trước nó

Bây giờ, chúng ta có thể quay lại tiêu đề của mình và thay đổi mã của nó thành

This is a link to my homepage

4

Với những thay đổi này, tiêu đề bây giờ sẽ có màu cam

This is a link to my homepage5

• tải phông chữ Merriweather, Roboto và phông chữ sans-serif mặc định của hệ thống [đọc phần này để tìm hiểu về phông chữ an toàn cho web]
• đặt kích thước phông chữ thành 18px

Loại định nghĩa này có thể được đặt vào bất kỳ lớp CSS nào, giống như định nghĩa màu. Trên thực tế, các định nghĩa về phông chữ và màu sắc thường được tìm thấy trong các khai báo cùng lớp

Quay trở lại ví dụ trước của chúng tôi, để thay đổi kích thước phông chữ cho tiêu đề có nội dung “Tại dịch vụ của bạn”, trước tiên chúng tôi có thể tạo một lớp như thế này

This is a link to my homepage

6

Và sau đó gán lớp này cho tiêu đề

This is a link to my homepage

7

Khi thay đổi màu sắc hoặc phông chữ trong mẫu do Bootstrap tạo, trước tiên hãy xem qua biểu định kiểu CSS để biết các lớp có thể đã cung cấp cho bạn các kích thước hoặc màu sắc thay thế. Sử dụng những nơi có sẵn

10. Tạo các trang bổ sung

Bây giờ bạn đã tùy chỉnh trang chủ, đã đến lúc bắt đầu làm việc trên một số trang bổ sung và sau đó liên kết chúng với trang chủ

Khi tạo một trang web bằng HTML và CSS, bạn có thể tạo bất kỳ số lượng trang phụ nào và sau đó liên kết tất cả chúng lại với nhau

Dưới đây là một số trang phổ biến mà hầu hết các trang web cần

• về trang
• liên hệ
• danh mục đầu tư
• sản phẩm và dịch vụ
• đội
• chính sách [chính sách bảo mật, điều khoản, v.v. ]

1. Bắt đầu với Bố cục

Khi xây dựng một trang web mới, quyết định đầu tiên bạn phải đưa ra là bạn muốn bố cục như thế nào

Khi tạo một trang web bằng HTML và CSS, không có gì ngăn cản bạn tạo bất kỳ bố cục nào bạn muốn. Khó khăn duy nhất là thực sự đặt nó lại với nhau

HTML và CSS có thể khó xử lý khi bắt đầu từ một màn hình trống, vì vậy chúng tôi cũng sẽ sử dụng Bootstrap ở đây. Trước tiên, chúng tôi sẽ chỉ cho bạn một số nguyên tắc tạo bố cục và sau đó trình bày cách thực hiện với Bootstrap

Cách bạn có thể nghĩ về bố cục trang web của mình là coi nó là một chuỗi các khối riêng lẻ - khối này chồng lên khối khác. Một cái gì đó như thế này [chú ý bốn khối riêng biệt]

This is a link to my homepage8

Điều mà chúng tôi đang thiếu ở đây là phần nội dung chính. Để xây dựng nó, chúng tôi sẽ sử dụng lại phần giới thiệu

Hãy tiếp tục và tạo một bản sao của phần giới thiệu. Cái này

This is a link to my homepage

9

Bây giờ thay đổi hai dòng đầu tiên này

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

0

Vì chúng ta không cần tiêu đề

Item 1
Item 2
Item 3

14 ở đó và phần tử

Item 1
Item 2
Item 3

15, nên hãy loại bỏ chúng. Thứ duy nhất còn lại bên trong toàn bộ khối này sẽ là một đoạn văn bản. như vậy

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

1

Khi bạn lưu tệp và điều hướng đến tệp đó qua trình duyệt của mình, bạn sẽ thấy rằng về cơ bản, bạn có hai khối rất giống nhau, khối này bên dưới khối kia, có cùng màu nền

Sẽ tốt hơn nếu có nền trắng trong phần nội dung chính. Để thay đổi nó, điều duy nhất chúng ta cần làm là xóa lớp

Item 1
Item 2
Item 3

16 khỏi thẻ chính

  
  

  Creative - Start Bootstrap Theme

  
  

6. Nói cách khác, tạo thẻ thành cái này

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

2

Cái đó tốt hơn

Hãy thêm một số đoạn văn giả vào trang để phổ biến thêm, cộng với có thể là một tiêu đề phụ

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

3

Đây là những gì nó trông giống như trên trang

Nếu bạn không thích văn bản được căn giữa thì chỉ cần xóa lớp

Item 1
Item 2
Item 3

18 khỏi một trong các thẻ

  
  

  Creative - Start Bootstrap Theme

  
  

8

Nếu bạn muốn tô điểm thêm cho các khối văn bản này, bạn có thể tạo các lớp CSS mới [như trước đây] và gán chúng cho các đoạn văn trong khối. Hoặc, bạn có thể xem qua biểu định kiểu hiện tại và xem những lớp nào đã có sẵn cho mục đích này. Đây là những cái chúng tôi đã gán cho các thẻ

This text is going to be 18px.

1 và

Item 1
Item 2
Item 3

21

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

4

Và đây là hiệu quả

Một điều nữa chúng ta sẽ làm ở đây là thêm một hình ảnh vào đâu đó trên trang

Đây là một thẻ hình ảnh ví dụ trong HTML trông như thế nào

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

5

Khá đơn giản phải không? . Để sắp xếp mọi thứ gọn gàng, bạn có thể đặt lại hình ảnh của mình vào thư mục

4 [giống như bạn đã làm với nền đó trước đây]. Trong trường hợp như vậy, thẻ hình ảnh sẽ là

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

6

Điều đó đang được nói, thẻ hình ảnh trong cấu hình cụ thể này khá hạn chế. Để làm cho nó tinh tế hơn một chút, hãy gán một số lớp Bootstrap cho nó. Cụ thể

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

7

Hai lớp này sẽ cung cấp cho hình ảnh của bạn các góc tròn và cũng sẽ đảm bảo rằng kích thước của hình ảnh không vượt quá kích thước của khối mà nó nằm

Bây giờ bạn có thể thêm một thẻ như thế này vào đâu đó trong phần nội dung chính của trang giới thiệu của bạn. Ví dụ, ở đây

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

8

Và đây là hiệu ứng cuối cùng trên trang

Đây là trang giới thiệu của chúng tôi trong tất cả vinh quang của nó

3. Liên kết đến trang mới

Với trang mới đã hoàn thành, bây giờ chúng ta hãy liên kết nó từ trang chủ [tệp

.normal-text {
    font-size: 18px;
}

0]. Đương nhiên, nơi tốt nhất để thêm liên kết này là trong menu điều hướng [bên dưới

Item 1
Item 2
Item 3

08]

Đặc biệt, hãy tìm dòng này

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

9

Chúng ta sẽ thay đổi nó thành cái này

p {
    font-size: 18px;
}

0

Đây là điều chúng ta chưa nói đến, nhưng thẻ

Item 1
Item 2
Item 3

25 là một thẻ liên kết trong HTML. Sử dụng nó, bạn có thể liên kết đến bất kỳ trang web nào bằng cách cung cấp địa chỉ của trang đó trong tham số

Item 1
Item 2
Item 3

26. Văn bản của liên kết – phần có thể nhấp vào của liên kết – sẽ là văn bản nằm giữa thẻ mở và thẻ đóng

Item 1
Item 2
Item 3

27

Khi bạn làm mới trang chủ ngay bây giờ, bạn sẽ thấy liên kết mới trỏ đến trang giới thiệu

Đọc thêm

Ở giai đoạn này, về cơ bản bạn đã xây dựng cho mình một trang web đơn giản bao gồm hai trang – trang chủ và trang giới thiệu

Những gì bạn nên làm bây giờ là rửa sạch và lặp lại bằng cách tạo các trang mới, điều chỉnh chúng, thêm nội dung vào chúng và sau đó liên kết mọi thứ từ menu điều hướng

Những việc khác đáng làm khi bạn thực hiện các bước này là học thêm các nguyên tắc HTML và CSS, xem qua danh sách kiểm tra, đồng thời học Bootstrap cũng như các cấu trúc và lớp của nó. Một số tài nguyên cho điều đó

• Bảng cheat HTML5
• Bảng cheat CSS
• Bảng cheat Javascript
• hướng dẫn khởi động
• Bảng gian lận Bootstrap

Làm chủ Bootstrap, rất có thể là con đường tốt nhất hiện có để xây dựng các trang web đẹp và được tối ưu hóa bằng HTML và CSS

Nếu bạn có bất kỳ câu hỏi nào về việc tạo một trang web bằng HTML và CSS, đừng ngần ngại gửi chúng trong các nhận xét

Làm cách nào để tạo một trang web bằng mã HTML và CSS?

Bạn có thể viết mã một trang web chỉ bằng HTML và CSS không?

Bạn có thể mã hóa một trang web bằng HTML không?

Trang web HTML CSS là gì?