Hướng dẫn how would you create a simple website using html and css with source code? - Bạn sẽ tạo một trang web đơn giản bằng cách sử dụng html và css với mã nguồn như thế nào?

This is a link to my homepage

Đọc này để có được danh sách đầy đủ các thẻ HTML. Nó sẽ trở nên hữu ích khi bạn tạo ra một trang web với 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 những viên gạch khác nhau lên trên nhau để kết thúc với một cấu trúc lớn hơn nhất định.

Nhưng thay vì gạch LEGO, bạn nhận được thẻ HTML

Tại đây, 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 nó 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à nó 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 - Tuyên bố ban đầu của tài liệu

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

  2 - một tuyên bố khác; nói rằng những gì sắp tới tiếp theo là một tài liệu HTML được viết bằng tiếng Anh

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

  3 - Đánh dấu phần khởi đầu của phần đầu; Phần đầu là nơi tất cả các tham số cơ bản của trang đi; Hầu hết trong số đó sẽ không được hiển thị trên màn hình; Họ chỉ định nghĩa những gì mà xảy ra dưới mui xe

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

  4 - Xác định bộ ký tự được sử dụng để viết tài liệu; Không cần phải dành quá nhiều thời gian cho việc này; Chỉ cần sử dụng tuyên bố này như là

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

  5 - tiêu đề của trang; Đây là những gì mọi người sẽ thấy trong thanh tiêu đề của trình duyệt của họ, ví dụ:

This is a link to my homepage0

Và sau đó sử dụng phần sau của mã HTML 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 đó đi vào bảng kiểu và sửa đổi lớp tương ứng hoặc tạo một lớp mới.

Ở đây, một ví dụ; Giả sử bạn muốn thay đổi màu sắc của tiêu đề nói rằng tại dịch vụ của bạn. Hiện tại, nó 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 gọi là,

Item 1
Item 2
Item 3

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

This is a link to my homepage

3

* ________ 102 & nbsp; 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 xuất hiện 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 của hệ thống [đọc này để tìm hiểu về phông chữ an toàn 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ế, định nghĩa phông chữ và màu sắc thường được tìm thấy trong cùng một khai báo lớp.

Quay trở lại ví dụ trước đây của chúng tôi, để thay đổi kích thước phông chữ cho tiêu đề đó nói rằng 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 của bạn, trước tiên hãy xem qua bảng kiểu CSS cho 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 có trang chủ được tùy chỉnh, đã đế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 có HTML và CSS, bạn có thể xây dựng bất kỳ số lượng trang 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
• tiếp xúc
• Danh mục đầu tư
• products/services
• độ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à những gì bạn muốn bố cục.

Khi tạo một trang web với HTML và CSS, không có gì ngăn cản bạn tạo ra 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àn hình trống, vì vậy chúng tôi cũng sẽ sử dụng Bootstrap ở đây. Đầu tiên, chúng tôi sẽ chỉ cho bạn một số nguyên tắc tạo ra một bố cục và sau đó trình bày cách thực hiện nó với bootstrap.

Cách bạn có thể nghĩ về bố cục trang web của bạn là coi nó là một chuỗi các khối riêng lẻ - một trên đầu 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 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 thành này:

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

0

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

  
  

  Creative - Start Bootstrap Theme

  
  

9 ở đó và yếu tố

Item 1
Item 2
Item 3

15, hãy để Lôi chỉ cần loại bỏ chúng. Điều 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 nó thông qua trình duyệt của bạn, bạn sẽ thấy rằng về cơ bản bạn có hai khối rất giống nhau bên dưới cái kia, với cùng một nền màu:

Nó tốt hơn để có một 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 chính. Nói cách khác, hãy tạo thẻ vào điều 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 để đưa nó thêm một số, cộng với có thể là một đầu phụ:

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

3

Ở đây, những gì nó trông như thế nào trên trang:

Nếu bạn không thích văn bản được tập trung 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 thêm một số sự tinh tế 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] và gán chúng cho các đoạn trong khối. Hoặc, bạn có thể xem qua bảng kiểu hiện tại và xem những lớp học nào đã có cho mục đích này. Dưới đâ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, hiệu ứng:

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

Ở đây, những gì một thẻ hình ảnh ví dụ trong HTML trông giống như:

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

5

Khá đơn giản, phải không? Tham số duy nhất có đường dẫn đến tệp hình ảnh. Để giữ mọi thứ được tổ chức độc đáo, bạn có thể đặt hình ảnh của mình vào thư mục

4 [giống như bạn đã làm với nền đó một thời gian 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 để chỉ định 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 các góc tròn hình ảnh của bạ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 nơi nó nằm.

Bây giờ bạn có thể thêm một thẻ như thế này ở đâ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, hiệu ứng cuối cùng trên trang:

Đây là trang về trang 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 được thực hiện, hãy để ngay bây giờ 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 [dưới

Item 1
Item 2
Item 3

08].

Cụ thể, hãy tìm dòng này:

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

9

Chúng tôi sẽ thay đổi nó thành điều này:

p {
    font-size: 18px;
}

0

Đây là điều mà chúng tôi đã nói, nhưng thẻ

Item 1
Item 2
Item 3

25 là 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 của liên kết - sẽ là văn bản giữa các thẻ mở và đó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 của bạn 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 về trang.

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 điều 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, trải qua danh sách kiểm tra, và cả việc học bootstrap và các cấu trúc và lớp học của nó. Một số tài nguyên cho điều đó:

• HTML5 Cheat Sheet
• Bảng gian lận CSS
• Bảng gian lận JavaScript
• Hướng dẫn HTML
• Hướng dẫn bootstrap
• Bootstrap Cheat Sheet

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 được tối ưu hóa và đẹp với 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 với HTML và CSS, thì đừng ngần ngại gửi chúng trong các bình luận.