Hướng dẫn can you make a website with only html and css - bạn có thể tạo một trang web chỉ với html và css không

Bạn muốn tìm hiểu làm thế nào để tạo một trang web với HTML và CSS?

Bạn có thể ở đú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 để đi từ màn hình trống đến một trang web hoạt động mà LỚN tối ưu hóa và đẹp mắt cùng một lúc.

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

Chà, bạn chỉ có thể tìm kiếm 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. 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) định nghĩa cấu trúc và nội dung của trang web - nơi mọi thứ đi, cách chúng được đặt ra và những gì trên trang trên trang (Hypertext Markup Language) defines the structure and contents of a web page – where things go, how they are laid out, and what’s on the page
• CSS (bảng kiểu xếp tầng) định nghĩa kiểu dáng/trình bày của một trang web và các yếu tố trên đó (Cascading Style Sheets) defines the styling/presentation of a web page and the elements on it

Bạn có thể thực sự có một cái 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ế của nó và nội dung mà trên đó.

Ghi chú; Khi chúng tôi nói là một trang web, những gì chúng tôi muốn nói là một tài liệu HTML duy nhất - một trang duy nhất mà một phần của trang web của bạn. Trong khi đó, một trang web là một điều 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ẻ.

Mục lục

1. Tìm hiểu những điều cơ bản của HTMLthe basics of HTML
2. Hiểu cấu trúc tài liệuHTML document structure
3. Nhận các bộ chọn của KnowCSSCSS selectors
4. Puta CSS Styles Sheet cùng nhaua CSS stylesheet together
5. GetbootstrapBootstrap
6. Thiết kế Pickaa design
7. Tùy chỉnh trang web của bạn với HTML và CSS your website with HTML and CSS
8. AddContent và hình ảnhcontent and images
9. Tinh chỉnh màu sắc và phông chữand fonts
10. Tạo các trang bổ sung additional pages

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 các nhà xây dựng 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 với HTML và CSS là một máy chủ web (lưu trữ). Mặc dù vậy, đừng lo lắng; Bạn không phải mua máy của riêng bạn. 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 Google để lưu trữ web trên mạng và chọn một thứ gì đó quá đắt hoặc kiểm tra các đánh giá 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 tên miền này là

p {
    font-size: 18px;
}

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.

Để sắp xếp điều này mà không có nỗi đau nào, 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. Nghĩa là họ sẽ: (a) thiết lập tài khoản lưu trữ cho bạn, (b) đăng ký một tên miền thay mặt bạn, (c) định cấu hình mọi thứ để làm việc cùng nhau và (d) cho phép bạn truy cập vào bảng điều khiển.(a) set up a hosting account for you, (b) register a domain name on your behalf, (c) configure everything to work together, and (d) give you access to an easy-to-use dashboard.

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

P.S. Nếu bạn chỉ muốn thử nghiệm với một trang web HTML trên máy tính của bạn và don don có ý định công khai, hãy sử dụng phần mềm máy chủ web cục bộ. Một trong những chúng tôi đề nghị và thích sử dụng được gọi là XAMPP. Nó có các phiên bản cho cả Mac và PC, và nó dễ sử dụng. Đây là một hướng dẫn về cách cài đặt nó trên máy tính của bạn., and don’t intend to make it public, use a local web server software. The one we recommend and like to use is called XAMPP. It has versions for both Mac and PC, and it’s easy to use. Here’s a guide on how to install it on your computer.

1. Tìm hiểu những điều cơ bản của HTML

Nếu bạn là người mới sử dụng HTML, bạn có thể thấy HTML này cho người mới bắt đầu (hướng dẫn cuối cùng) hữu ích.

Phần tử chính của cấu trúc HTML là thẻ HTML.tag.

Một thẻ, ví dụ, trông như thế này:

SOMETHING

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

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

Nhưng có những thẻ khác, chỉ để đặt tên cho một vài:

• p {
      font-size: 18px;
  }
  

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

• p {
      font-size: 18px;
  }
  

  7 sẽ nhấn mạnh 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ó các 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 vào một trang khác, như thế 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 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!
    
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;
}

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ụ:

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

  6 - Đánh dấu sự khởi đầu của phần cơ thể; Đây là nơi tất cả các nội dung của trang đi; Nó là phần chính của một tài liệu HTML; Hãy để chúng tôi nhấn mạnh điều này, phần này là nơi bạn sẽ bao gồm tất cả các nội dung mà Lừa có nghĩa là xuất hiện trên tranglet us emphasize this, this section is where you’re going to be including all the content that’s meant to appear on the page

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

  7 - Tiêu đề chính trên trang

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

  8 - Một đoạn văn bản đơn giản

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

  9 - Thẻ đóng của toàn bộ tài liệu HTML

Một lưu ý quan trọng ở đây. Làm việc trên một tệp HTML trong một ứng dụng văn bản cơ bản hoặc bộ xử lý văn bản phức tạp như MS Word không phải là một trải nghiệm tốt. Để làm cho mọi thứ dễ dàng với chính mình, hãy cài đặt một trình soạn thảo HTML có tên là Văn bản Sublime. Nó có phiên bản cho cả Mac và PC, và nó miễn phí.

Tại sao nó tốt hơn? Trong số những thứ khác, nó sẽ tô màu cú pháp của tệp HTML. Có nghĩa là, nó sẽ phân biệt trực quan các thẻ HTML của bạn với nội dung văn bản, tham số thẻ và các giá trị khác. Về cơ bản, nó sẽ trở nên dễ đọc. Ở đây, những gì cấu trúc HTML đơn giản của chúng tôi trông giống như trong văn bản siêu phàm:

Được rồi, trở lại chủ đề. Bạn có thể lấy tệp

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

Được rồi, vì vậy trang xấu xí, làm thế nào để làm cho nó không như vậy?

3. Nhận biết bộ chọn CSS

Giống như HTML có thẻ của nó, CSS có bộ chọn.selectors.

Các bộ chọn mô tả cách một phần tử nhất định nên hoạt động khôn ngoan. & NBSP; Ở đây, một ví dụ về bộ chọn CSS:

p {
    font-size: 18px;
}

Bộ chọn này chỉ ra rằng tất cả các thẻ HTML

This text is going to be 18px.

Tuy nhiên, một cách thực tế hơn để sử dụng các bộ chọn CSS không phải là để hạn chế tất cả các thẻ thuộc loại nhất định cho một kiểu dáng nhất định, mà là tạo các lớp khác nhau khác nhau và gán chúng cho từng thẻ một.

Ví dụ: một bộ chọn lớp trong CSS trông như thế này:

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

Lưu ý dấu chấm (

This text is going to be 18px.

This text is going to be 18px.

Ví dụ:

This text is going to be 18px.

Chúng ta hãy dành một phút nữa để giải thích tất cả các yếu tố của đoạn mã CSS đó ở trên:

• This text is going to be 18px.
  

  4 - Định nghĩa lớp; Mọi thứ theo tên của lớp và giữa khung mở và đóng

  This text is going to be 18px.
  

  5 xác định các yếu tố được gán cho lớp này sẽ trông như thế nào

• This text is going to be 18px.
  

  6 - Một ví dụ về thuộc tính CSS

• This text is going to be 18px.
  

  7 - một giá trị được gán cho tài sản

Có một tấn thuộc tính CSS ngoài

This text is going to be 18px.

4. Kết hợp bảng kiểu CSS

Một tài liệu HTML rất cấu trúc - mọi yếu tố đều có vị trí của nó và thứ tự các yếu tố là rất quan trọng cho việc xây dựng và xuất hiện cuối cùng của trang web được đề cập. Một tài liệu CSS là ít hơn rất nhiều như vậy.

Tài liệu CSS thường được gọi là bảng kiểu. Về cơ bản, bảng kiểu CSS là danh sách tất cả các định nghĩa lớp đang được sử dụng trong tài liệu HTML tương ứng. Thứ tự của các định nghĩa lớp không phải là quan trọng hầu hết thời gian (ít nhất là đối với các thiết kế đơn giản).

Cách bạn đặt một kiểu kiểu CSS với nhau bằng cách xác định từng lớp một, và sau đó kiểm tra xem kết quả trong thiết kế trang của bạn là những gì bạn muốn.

Điều này nghe có vẻ như công việc tẻ nhạt, và nó là.

Nhưng chúng tôi sẽ làm cho mọi thứ dễ dàng hơn với bạn, và không buộc bạn phải học thiết kế HTML và CSS bằng tay. Thay vì dạy bạn mọi thứ từ đầu, chúng tôi sẽ lấy một sinh vật sống và mổ xẻ các yếu tố của nó.

Đây là nơi một thứ gọi là bootstrap phát huy tác dụng.

5. Tải xuống/Cài đặt Bootstrap

Bootstrap là một bộ công cụ nguồn mở để tạo một trang web với HTML và CSS.

Nói một cách đơn giản, Bootstrap chăm sóc cấu trúc cơ bản của tài liệu HTML và kiểu dáng CSS cho bạn. Nó cung cấp một khung đảm bảo rằng giàn giáo chính của trang web của bạn đã sẵn sàng và tối ưu hóa để phát triển hơn nữa.

Về cơ bản, Bootstrap cho phép bạn không bắt đầu từ đầu, và thay vào đó đi ngay vào phần thú vị. Với nó, bạn không phải làm việc trên các giai đoạn đầu thường xuyên nhàm chán để tạo một trang web với HTML và CSS.

Có hai con đường bạn có thể đi:

• Tùy chọn (a): Tìm hiểu Bootstrap - Truy cập trang chủ Bootstrap, tải xuống gói Bootstrap chính và bắt đầu xây dựng trên đầu nó.(a): learn Bootstrap – go to the Bootstrap homepage, download the main Bootstrap package and start building on top of it.
• Tùy chọn (B): Lấy một phím tắt-Nhận gói khởi động cho Bootstrap với thiết kế đẹp mắt và trang web demo đã được xây dựng.(b): take a shortcut – get a starter pack for Bootstrap with a good-looking design and a demo web page already built.

Tùy chọn (a) có thể có một số đường cong học tập ngay từ đầu, nhưng nó không phải là cách tồi tệ hơn để tiếp cận việc tạo một trang web với HTML và CSS. Khi bạn thành thạo cấu trúc bootstrap cốt lõi, bạn có thể dễ dàng xây dựng các trang mới và làm cho chúng trông chính xác như bạn muốn. Tài liệu Bootstrap là một nơi tuyệt vời để bắt đầu với con đường này.(a) might have some learning curve at the beginning, but it’s not in any way the worse way to approach creating a website with HTML and CSS. Once you master the core Bootstrap structure, it might be easier for you to build new pages and make them look exactly as you want them. The Bootstrap documentation is a great place to get started with this path.

Chúng tôi sẽ đi với tùy chọn (b) cho hướng dẫn này. Chúng tôi làm điều này vì một vài lý do, trưởng trong số họ:(b) for this guide. We’re doing this for a couple of reasons, chief of them:

Bắt đầu với một cấu trúc làm sẵn giúp tiết kiệm rất nhiều nỗi đau khi cố gắng tìm ra các nhu yếu phẩm cơ bản của một tài liệu HTML. Điều này cho phép bạn tập trung vào những thứ thú vị - như bố trí nội dung và làm cho nó trông tốt.

Nói tóm lại, học mọi thứ theo cách này sẽ cung cấp cho bạn một kết quả đẹp hơn nhanh hơn, mà chúng tôi đoán là những gì bạn muốn.

6. Chọn một thiết kế

Khi bạn tạo một trang web với HTML và CSS, bạn có thể tự do sử dụng bất kỳ mẫu bootstrap nào bạn thích. Tất cả họ nên làm việc tương tự đủ.

Tuy nhiên, đối với hướng dẫn này, chúng tôi sẽ sử dụng một trong các mẫu bằng cách bắt đầu Bootstrap. Họ có một lựa chọn tốt của các mẫu miễn phí được tối ưu hóa, không gặp sự cố và cũng được thiết kế rất tốt.

Chủ đề chúng tôi sẽ sử dụng được gọi là Creative. Hiệu ứng cuối cùng mà chúng tôi sẽ làm sẽ trông giống như thế này:

Để bắt đầu, mẫu sáng tạo, nhấp vào nút tải xuống miễn phí mà ở bên phải (trên trang này) và lưu gói zip vào máy tính để bàn của bạn.Free Download button that’s on the right (on this page) and save the zip package to your desktop.

Giải nén gói và chuyển nội dung của nó vào thư mục chính của máy chủ web cục bộ hoặc tài khoản lưu trữ web của bạn.

Bây giờ hãy mở vị trí đó thông qua trình duyệt web của bạn. Bạn sẽ thấy phiên bản chứng khoán của mẫu:

Nó đã rất đẹp, nhưng bây giờ là thời gian để học cách sử dụng HTML và CSS để biến nó thành chính xác những gì bạn muốn.

7. Tùy chỉnh trang web của bạn với HTML và CSS

Trước tiên, hãy làm việc trên trang chủ của thiết kế. Điều này sẽ chỉ cho chúng tôi cách thay thế đồ họa, văn bản và điều chỉnh mọi thứ nói chung.

Chúng tôi đã nói về phần đầu của một tài liệu HTML ở trên một cách ngắn gọn. Hãy để có một cái nhìn sâu hơn về nó ở đây.

Khi bạn mở tệp

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

* Ngoài những điều trên, còn có mã để tải phông chữ Google, các biểu tượng tuyệt vời và mô -đun hộp đèn cho các hình ảnh được hiển thị trên trang.

Hầu hết các tuyên bố ở đây chúng ta đã biết, nhưng có một vài tuyên bố mới:

• Trước hết, tất cả mọi thứ giữa các khung
  0 là một nhận xét HTML. Nó không hiển thị trên trang cuối cùng.

• 1 - Nó là một trong những thẻ khai báo riêng của Bootstrap. Nó xác định kích thước của chế độ xem trang web.

• 2 - Dòng này tải biểu định kiểu CSS của mẫu sáng tạo và nó cũng chứa bảng kiểu mặc định của bootstrap.

Hãy để sửa đổi tuyên bố cuối cùng đó - dòng tải CSS - để giúp làm việc dễ dàng hơn sau này.

Thay đổi dòng đó thành:

Đây chỉ là một sự khác biệt nhỏ-nó sẽ tải phiên bản không được cắt ngắn của cùng một tờ CSS. Phiên bản này chỉ dễ dàng hơn để sửa đổi.

Bây giờ cuộn xuống dưới cùng của tệp

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

Họ chịu trách nhiệm tải các tệp JavaScript & NBSP; xử lý một số tương tác trực quan hơn của thiết kế. Chẳng hạn, khi bạn nhấp vào liên kết Giới thiệu trong menu trên cùng, bạn sẽ được thực hiện suôn sẻ đến khối về cùng một trang - điều này, trong số những thứ khác, được thực hiện thông qua JavaScript. Chúng tôi không cần phải gặp rắc rối khi hiểu mã này ngay bây giờ. Hãy để lại điều này cho một thời gian khác.

Thay vào đó, hãy để Lừa làm việc để thêm nội dung của chúng tôi vào trang:

8. Thêm nội dung và hình ảnh

Điều đầu tiên bạn muốn làm là thay đổi tiêu đề của trang.

1. Thay đổi tiêu đề

Tìm thẻ tiêu đề trong phần đầu và thay thế văn bản giữa các thẻ thành một cái gì đó của riêng bạn:

Item 1
Item 2
Item 3

2. Tùy chỉnh phần anh hùng

Phần anh hùng là những gì chúng ta gọi là khối này:

Sẽ thật tuyệt khi có nội dung của riêng chúng ta bên trong nó. Để sửa đổi khối này, hãy quay lại tệp

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

Item 1
Item 2
Item 3

Toàn bộ khối mã này kiểm soát những gì trong phần anh hùng.

Có một số thẻ mới ở đây:

• 5 - Đây là một thẻ xác định rằng toàn bộ phần này là tiêu đề của trang; Thẻ này có một vài anh chị em dưới dạng thẻ
  6 và thẻ
  7

• 8 - là thẻ CSS chung chỉ ra rằng những gì sau đây là một phần riêng biệt (AKA Division) trong tài liệu HTML; Sử dụng nó giúp dễ dàng phân biệt các phần riêng lẻ trên trang một cách trực quan

Bạn cũng sẽ nhận thấy rằng một số thẻ khác (mà chúng ta đã biết) trông phức tạp hơn một chút, với nhiều lớp CSS được gán cho chúng. Ví dụ:

Item 1
Item 2
Item 3

Các lớp được gán cho thẻ

Các lớp này đã được tạo ra bởi Bootstrap và nhà phát triển chủ đề sáng tạo. Tin tốt là bạn cũng có thể sử dụng chúng một cách tự do khi tạo một trang web với HTML và CSS.

Thành thật mà nói, bạn có thể tùy chỉnh bất kỳ thẻ nào bạn thêm vào cấu trúc trang của bạn bằng cách gán bất kỳ số lượng lớp nào cho nó.

Nếu bạn muốn xem danh sách đầy đủ các lớp có sẵn, bạn có thể mở tệp

Lúc đầu, việc nắm bắt được tất cả các lớp này có vẻ đáng sợ, nhưng nó thực sự dễ dàng hơn so với vẻ ngoài của nó.

Ví dụ: một trong các lớp được gán cho một số đoạn trong tệp

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

Item 1
Item 2
Item 3

Việc sửa đổi các văn bản mặc định trong tệp

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

Ví dụ, để thay đổi tiêu đề chính, chỉ cần thay đổi điều này:

Item 1
Item 2
Item 3

Một cái gì đó như sau:

Item 1
Item 2
Item 3

Bạn có thể làm tương tự cho tất cả các đoạn văn và các thẻ khác trên trang.

Điều quan trọng là bạn cũng có thể thêm các đoạn mới một cách tự do. Ví dụ: chúng ta có thể lấy đoạn văn mà đã có trên trang, tạo một bản sao của nó và dán nó ngay bên dưới đoạn gốc; như vậy:

Item 1
Item 2
Item 3

Bây giờ, với các văn bản được chăm sóc, hãy để thay thế hình ảnh mà trên nền.

Điều này phức tạp hơn một chút để thực hiện vì nó yêu cầu chúng tôi đi vào tệp biểu định kiểu CSS và thực hiện sửa đổi ở đó. Như bạn có thể thấy trong mã HTML của phần

Khi bạn nhìn vào toàn bộ khối mã xử lý phần

Item 1
Item 2
Item 3

Lớp

Hãy cùng mở tệp

Item 1
Item 2
Item 3

Mã này thực hiện tất cả các loại thứ lạ mắt cho hình ảnh của chúng tôi (như thêm lớp phủ, bóng, v.v.), nhưng phần quan trọng là:

Để thay đổi hình ảnh nền này, hãy lấy bất kỳ hình ảnh nào của riêng bạn, sao chép nó vào thư mục con

3. Tùy chỉnh các khối khác trên trang

Khi bạn đi qua tệp

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

Mặc dù có nội dung khác nhau trong tất cả các phần này, bản thân các phần có cấu trúc tương tự nhau. Tất cả chúng đều có cùng một bộ thẻ HTML - chỉ các lớp CSS khác nhau được gán cho chúng.

Cách tốt nhất để sửa đổi trang để phù hợp với nhu cầu của bạn là đi qua từng khối một và thử nghiệm bằng cách thay đổi mọi thứ xung quanh.

Ngoài việc sửa đổi các văn bản, bạn cũng có thể di chuyển toàn bộ các phần xung quanh (các phần giữa các thẻ

Với điều đó đã được nói, có hai sửa đổi khá cơ bản mà chúng tôi đã nói về. Hãy để bao gồm những thứ này tiếp theo:

9. Tinh chỉnh màu sắc và phông chữ

Thay đổi màu sắc hoặc phông chữ rất dễ thực hiện trong HTML và CSS. Điều đơn giản nhất bạn có thể làm là gán một số kiểu dáng nội tuyến cho thẻ HTML. Ví dụ:

Item 1
Item 2
Item 3

Trong HTML, màu sắc được thể hiện bằng các giá trị hex của chúng; Cấm#FF0000 có màu đỏ. Ở đây, một bảng của tất cả các màu tiêu chuẩn khác.

Một cách tốt hơn để gán màu là làm điều đó thông qua bảng kiểu CSS. Ví dụ: để có được hiệu ứng tương tự như mã ở trên, chúng tôi có thể đặt nó vào bảng kiểu CSS của chúng tôi:

This is a link to my homepage

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

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

Để 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

This is a link to my homepage

* ________ 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

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

Để thay đổi phông chữ và kích thước của nó, bạn có thể làm một cái gì đó rất giống nhau. Nhưng trước tiên, một ví dụ về khối định nghĩa phông chữ trông như thế nào trong CSS:

This is a link to my homepage

• 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

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

This is a link to my homepage

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):

Điều tuyệt vời về Bootstrap là nó xử lý các nguyên tắc bố cục cơ bản và chi tiết ngoại hình cho bạn để bạn chỉ có thể tập trung vào việc đặt các khối đó vào đúng vị trí.

Trong phần này của hướng dẫn, chúng tôi sẽ tạo ra một trang mới về trang.

Để bắt đầu, chúng tôi sẽ tạo ra một dự án rất cơ bản của bố cục. Một cái gì đó giống như ở trên.

• Có một menu điều hướng ở trên cùng,
• một khối tiêu đề toàn chiều rộng bên dưới menu,
• Phần nội dung chính ở giữa, được đóng hộp ở giữa màn hình (không phải toàn bộ chiều rộng),
• và một chân trang.

Bây giờ, hãy để xây dựng bố cục này trong HTML.

2. Xây dựng một trang mới

Cách dễ nhất để bắt đầu làm việc trên một trang mới là sao chép một trang hiện có và sử dụng nó làm mẫu. Đó là những gì chúng tôi sẽ làm.

Tạo một bản sao của tệp

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

Item 1
Item 2
Item 3

Chỉ để làm cho các trang dễ dàng hơn để phân biệt ở giai đoạn đầu này, chỉnh sửa tệp ____104 mới và thay đổi những gì trong thẻ

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Bây giờ, hãy để Lừa đi qua dòng tệp từng dòng và quyết định những gì chúng tôi sẽ rời đi và những gì chúng tôi sẽ xóa:

• Menu điều hướng (dưới

  
  Item 1
  Item 2
  Item 3
  
  

  08). Bạn có thể muốn giữ cho phần này nguyên vẹn, chỉ để làm cho trải nghiệm điều hướng thống nhất trên tất cả các trang.navigation menu (below

  
  Item 1
  Item 2
  Item 3
  
  

  08). You probably want to keep this section intact, just to make the navigation experience uniform on all pages.
• Phần anh hùng chính (dưới

  
  Item 1
  Item 2
  Item 3
  
  

  09). Đây là cái này chúng tôi đã giành được nhu cầu theo dự án bố cục của chúng tôi. Bạn có thể đi trước và xóa toàn bộ phần.main hero section (below

  
  Item 1
  Item 2
  Item 3
  
  

  09). This one we won’t need according to our layout project. You can go ahead and erase the whole section.
• Phần về phần (dưới

  
  Item 1
  Item 2
  Item 3
  
  

  10). Chúng tôi sẽ sử dụng lại phần này như là khối tiêu đề chính của chúng tôi.about section (below

  
  Item 1
  Item 2
  Item 3
  
  

  10). We’re going to reuse this section as our main headline block.
• Phần dịch vụ, phần danh mục đầu tư, phần gọi đến hành động và phần liên hệ (mọi thứ giữa

  
  Item 1
  Item 2
  Item 3
  
  

  11 và

  
  Item 1
  Item 2
  Item 3
  
  

  12). Chúng tôi không cần những phần này. Bạn có thể đi trước và xóa chúng.services section, portfolio section, call to action section, and contact section (everything between

  
  Item 1
  Item 2
  Item 3
  
  

  11 and

  
  Item 1
  Item 2
  Item 3
  
  

  12). We don’t need these sections at all. You can go ahead and erase them.
• Phần chân trang và mọi thứ bên dưới nó (bên dưới

  
  Item 1
  Item 2
  Item 3
  
  

  12). Điều này chúng tôi sẽ cần phải giữ. footer section and everything below it (below

  
  Item 1
  Item 2
  Item 3
  
  

  12). This we’ll need to keep.

Điều này làm cho mã hiện tại của chúng tôi khá đơn giản. Về cơ bản chỉ là thế này:

This is a link to my homepage

Đ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

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

  
    
    
  
  
    
Hello, world!
    
My first web page.
  

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

Item 1
Item 2
Item 3

  
    
    
  
  
    
Hello, world!
    
My first web page.
  

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

  
    
    
  
  
    
Hello, world!
    
My first web page.
  

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!
    
My first web page.
  

Ở đâ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

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.

Item 1
Item 2
Item 3

  
    
    
  
  
    
Hello, world!
    
My first web page.
  

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!
    
My first web page.
  

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

  
    
    
  
  
    
Hello, world!
    
My first web page.
  

Đ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!
    
My first web page.
  

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!
    
My first web page.
  

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;
}

Item 1
Item 2
Item 3

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

  
    
    
  
  
    
Hello, world!
    
My first web page.
  

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

p {
    font-size: 18px;
}

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

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

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.