Học cách tạo trang web bằng HTML và CSS

Bạn đang muốn tìm hiểu cách tạo một trang web bằng HTML và CSS?

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àn hình trống sang một trang web đang hoạt động được tối ưu hóa, đẹp mặt với HTML và CSS.

Nhưng trước tiên hãy tìm hiểu HTML và CSS là gì?

Bạn có tra cứu cả hai thuật ngữ này 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) xác định cấu trúc và nội dung của một trang web – nơi mọi thứ diễn ra, cách chúng được trình bày và nội dung trên trang.
• CSS (Cascading Style Sheets) xác định kiểu / trình bày của một trang web và các phần tử trên đó

Bạn thực sự không thể có cái này mà không có cái kia – cả HTML và CSS 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 trên đó.

Ghi chú; khi chúng tôi nói “một web page”, ý của chúng tôi là một tài liệu HTML đơn lẻ – một trang duy nhất là một phần của trang web của bạn. Trong khi, “một website” là toàn bộ trang web của bạn với tất cả các trang web page riêng lẻ.

Cách tạo trang web bằng HTML và CSS (mục lục):

1. Tìm hiểu kiến ​​thức cơ bản về HTML
2. Hiểu cấu trúc tài liệu HTML
3. Tìm hiểu các bộ chọn CSS
4. Đặt một biểu định kiểu CSS lại với nhau
5. Tải xuống Bootstrap
6. Chọn một thiết kế
7. Tùy chỉnh trang web của bạn bằng HTML và CSS
8. Thêm nội dung và hình ảnh
9. Tinh chỉnh màu sắc và phông chữ
10. Tạo các trang bổ sung

• Tổng thời gian tạo website: 4-5 giờ
• Trình độ tay nghề: Trung cấp

Nếu bạn cho rằng việc 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 trình xây dựng trang web.  hay các phầm mềm thiết kế web . Bạn cũng có thể xem danh sách các IDE tốt nhất được chọn để phát triển web.

Trước khi 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 (Web hosting). Đừng lo lắng, bạn không cần 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 cho “thuê web hosting” và chọn thứ gì đó không quá đắt.

Sau khi bạn đã thuê được web hosting, đ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 thế giới Internet. Ví dụ: tên miền của trang web này là webaffiliatevn.com..

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.

Tiết lộ đầy đủ : Chúng tôi kiếm được hoa hồng nếu bạn mua web hosting trên INET thông qua các liên kết giới thiệu của chúng tôi trong hướng dẫn này. Điều này giúp chúng tôi giữ cho webaffiliatevn.com luôn hoạt động và cập nhật những nội dung hữu ích. Cảm ơn sự hỗ trợ của bạn.

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

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) đăng ký tên miền thay mặt bạ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 một tài khoản dễ sử dụng bảng điều khiển.

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

 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 trên Internet, hãy sử dụng phần mềm máy chủ web cục bộ (Local Host). Công cụ chúng tôi đề xuất và thích 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.

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:

<b>thiết kế web làm affiliate</b>

Ở đây, chúng tôi đang xử lý một thẻ <b>. Thẻ này sẽ in đậm một đoạn văn bản nằm giữa thẻ mở ( <b>) và thẻ đóng ( </b>). Trong trường hợp này, đoạn văn bản đó là “Thiết kế web làm affiliate” .

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

• <i>…</i> sẽ in nghiêng văn bản giữa thẻ mở và thẻ đóng
• <u>…</u> sẽ gạch dưới nó
• <p>…</p> là một đoạn văn bản
• <h1>…</h1> 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 tạo 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:

<ul>
<li>Mục 1</li>
<li>Mục 2</li>
<li>Mục 3</li>
</ul>

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

Đâ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:

<a href="https://webaffiliatevn.com/">Đây là một liên kết đến trang chủ của chúng tôi</a>

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

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 Lego. 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 cho trước.

Nhưng thay vì những viên gạch Lego, bạn sẽ thao tác với các thẻ HTML…

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webaffiliatevn.com - Grow your affiliate business</title>
</head>
<body>

<p> Hello world<br>Webaffiliatevn.com - Grow your affiliate business</p>
</body>
</html>

Bạn có thể lấy đoạn 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 index.html và nó sẽ trở thành 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 đoạn mã trên:

• <!DOCTYPE html> – khai báo ban đầu của một tài liệu html.
• <html lang=”en”>– một khai báo khác; nói rằng những gì sắp xảy ra tiếp theo là một tài liệu HTML được viết bằng tiếng Anh
• <head>– đánh dấu sự bắt đầu của phần mở đầu; phần mở đầu là nơi chứa tất cả các thông số cơ bản của trang web; hầu hết chúng sẽ không được hiển thị trên màn hình; chúng chỉ xác định những gì đang diễn ra
• <meta charset=”utf-8″>– xác định bộ ký tự nào được sử dụng để viết tài liệu; không cần tốn quá nhiều thời gian cho việc này; chỉ cần sử dụng khai báo này như là
• <title>Hello, world!</title>– tiêu đề của trang; đây là những gì mọi người sẽ thấy trong thanh tiêu đề trong trình duyệt của họ, ví dụ:

• <body>– đánh dấu sự bắt đầu của phân thân body; đây là nơi chứa tất cả nội dung của trang; nó là phần chính của tài liệu HTML; chúng ta hãy nhấn mạnh điều này, phần này là nơi bạn sẽ bao gồm tất cả nội dung, có nghĩa là nó sẽ xuất hiện trên trang
• <h1>Hello, world!</h1> – tiêu đề chính của trang web
• <p>Trang web đầu tiên</p> – một đoạn văn bản đơn giản
• </html> – 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 tệp HTML trong ứng dụng văn bản cơ bản hoặc trình xử lý văn bản như MS Word không phải là một trải nghiệm tốt. Để tự mình làm mọi thứ dễ dàng, hãy cài đặt một công cụ có tên là Sublime Text . Nó có cá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, thuộc tính của thẻ và các giá trị khác. Về cơ bản, tất cả sẽ trở nên dễ đọc. Đây là cấu trúc HTML đơn giản của chúng tôi trông như thế nào trong Sublime Text:

Được rồi, quay lại chủ đề. Bạn có thể lấy file index.html, sao chép nó vào vị trí của thư mục chính của máy chủ web, sau đó xem trang đó bằng cách điều hướng đến nó thông qua trình duyệt web. Tuy nhiên, đừng quá phấn khích; trang này sẽ khá xấu (xem bên dưới).

Được rồi, vậy là trang xấu xí, làm sao để không xấu như vậy?

Tìm hiểu về các bộ chọn CSS

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

Các bộ chọn mô tả cách một phần tử đã cho sẽ hoạt động như thế nào về bề ngoài. Đây là 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ẻ <p> HTML trong tài liệu sẽ có kích thước phông chữ là 18px.

Tuy nhiên, một cách thực tế hơn để sử dụng bộ chọn CSS không phải là giới hạn tất cả các thẻ của một loại nhất định cho một kiểu nhất định, mà là tạo các “lớp” 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;

}

Chú ý dấu chấm (.) trước tên của class ( normal-text). Với class “normal-text” được định nghĩa, giờ đây chúng ta có thể gán class đó cho các thẻ HTML cụ thể mà chúng ta muốn tạo kích thước 18px.

Ví dụ:

<p class="normal-text">Văn bản này có kích thước là 18px.</p>

Tôi sẽ giành thêm một phút để giải thích tất cả các yếu tố của đoạn mã CSS ở trên:

• .normal-text – định nghĩa class; mọi thứ sau tên của class và giữa các dấu ngoặc mở và đóng {} định nghĩa các phần tử được gán cho lớp này sẽ trông như thế nào
• font-size – một thuộc tính CSS
• 18px – giá trị được gán cho thuộc tính font-size.

Có rất nhiều thuộc tính CSS ngoài các thuộc tính trên font-size. Đây là danh sách đầy đủ các thuộc tích nếu bạn tò mò.

Đặt cùng một biểu định kiểu CSS

Một tài liệu HTML rất có cấu trúc – mọi phần tử đều có vị trí của nó và thứ tự của các phần tử là rất quan trọng đối với 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 ít hơn rất nhiều.

Tài liệu CSS thường được gọi là bảng định kiểu . Về cơ bản, biểu định 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à điều quan trọng trong 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 biểu định kiểu CSS lại với nhau là xác định từng lớp một, sau đó kiểm tra xem kết quả trong thiết kế trang của bạn có đúng như mong muốn không.

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

Nhưng chúng tôi sẽ giúp bạn mọi thứ dễ dàng hơn và không bắt 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.

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

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

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

Bootstrap quản lý cấu trúc cơ bản của tài liệu HTML và biểu định kiểu CSS cho bạn. Nó cung cấp một khuôn khổ đảm bảo rằng khung chính của trang web của bạn đã sẵn sàng và được tối ưu hóa để phát triển thêm.

Về cơ bản, Bootstrap cho phép bạn không bắt đầu lại từ đầu, thay vào đó hãy đi ngay vào phần thú vị. Với nó, bạn không phải làm việc trên những giai đoạn đầu nhàm chán của việc 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 đó.
• Tùy chọn (b) : đi tắt – tải gói khởi động cho Bootstrap với thiết kế đẹp mắt và trang web demo đã được xây dựng.

Tùy chọn (a) có thể có một số việc phải 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 trang web với HTML và CSS. Khi bạn nắm vững cấu trúc Bootstrap cốt lõi, bạn có thể dễ dàng hơn trong việc xây dựng các trang mới và làm cho chúng trông giống hệt như bạn muốn. Các tài liệu Bootstrap là một nơi tuyệt vời để bắt đầu với con đường này.

Chúng ta sẽ sử dụng Tùy chọn (b) cho hướng dẫn này. Chúng tôi đang làm điều này vì một số lý do, trưởng họ:

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 công sức khi cố gắng tìm ra những điều cần thiết 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ư sắp xếp nội dung và làm cho nó trông đẹp mắt.

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

Chọn một thiết kế

Khi bạn đang tạo một trang web với HTML và CSS, bạn có thể thoải mái sử dụng bất kỳ mẫu Bootstrap nào bạn thích. Tất cả chúng sẽ hoạt động tương tự nhau.

Tuy nhiên, đối với hướng dẫn này, chúng ta sẽ sử dụng một trong các mẫu của Khởi động Bootstrap . Họ có nhiều lựa chọn mẫu miễn phí được tối ưu hóa, hoạt động dễ dàng và cũng được thiết kế rất tốt.

Chủ đề chúng tôi sẽ sử dụng có tên là Creative . Hiệu ứng cuối cùng mà chúng ta đang thực hiện sẽ trông giống như sau:

Để bắt đầu với Mẫu quảng cáo, hãy nhấp vào nút Free Download ở bên phải (trên trang này ) và lưu gói zip vào desktop của bạn.

Giải nén file .zip và di chuyển nội dung của nó vào thư mục chính của máy chủ web cục bộ (Local host) 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 có sẵn của mẫu:

Nó đã khá đẹp, nhưng bây giờ đã đến lúc 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.

Tùy chỉnh trang web của bạn bằng HTML và CSS

Hãy làm việc trên trang chủ của thiết kế trước. Điều này sẽ cho chúng ta thấy 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 tài liệu HTML ở trên. Chúng ta hãy có một cái nhìn sâu hơn về nó ở đây.

Khi bạn mở tệp index.html tệp của trang web Bootstrap của mình bằng Sublime Text, bạn sẽ thấy phần đầu như thế này (chúng tôi đã xóa tất cả những thứ không quan trọng khỏi mã này để rõ ràng hơn *):

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Creative - Start Bootstrap Theme</title>

&lt;!-- Theme CSS - Includes Bootstrap -->
<link href="css/creative.min.css" rel="stylesheet">

</head>

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

Hầu hết các khai báo ở đây chúng ta đã biết, nhưng có một số khai báo mới:

• Trước hết, mọi thứ giữa các dấu ngoặc là một nhận xét (comment trong HTML). Nó không hiển thị trên trang cuối cùng.
• <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”> – đó 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 khung nhìn trang web.
• <link href=”css/creative.min.css” rel=”stylesheet”> – dòng này tải biểu định kiểu CSS của Mẫu quảng cáo và nó cũng chứa biểu định kiểu mặc định của Bootstrap.

Hãy sửa đổi khai báo cuối cùng đó – dòng tải CSS – để làm việc sau này dễ dàng hơn.

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

<link href="css/creative.css" rel="stylesheet">

Đây chỉ là một sự khác biệt nhỏ – nó sẽ tải phiên bản không rút gọn của cùng một trang CSS. Phiên bản này dễ sửa đổi hơn.

Bây giờ hãy cuộn xuống dưới cùng của file index.html. Bạn sẽ thấy những dòng sau ngay trước khi thẻ đóng </body>:

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>

Chúng chịu trách nhiệm tải  các tệp JavaScript xử lý một số tương tác trực quan hơn của thiết kế. Ví dụ: khi bạn nhấp vào liên kết Giới thiệu ở menu trên cùng, bạn sẽ được đưa dễ dàng đến khối giới thiệu trên cùng một trang – điều này được thực hiện thông qua JavaScript. Chúng ta không cần phải tự hiểu mã này ngay bây giờ. Hãy để chuyện này vào lúc khác.

Thay vào đó, hãy làm việc để thêm nội dung của riêng chúng ta 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.

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:

<title>Webaffiliatevn.com - Grow your affiliate business</title>

Tùy chỉnh Phần Hero

Phần Hero được chúng tôi gọi là khối này:

Sẽ rất tuyệt nếu 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 index.htmltệp của bạn và tìm phần này:

<!-- Masthead -->
<header class="masthead">
  <div class="container h-100">
    <div class="row h-100 align-items-center justify-content-center text-center">
      <div class="col-lg-10 align-self-end">
        <h1 class="text-uppercase text-white font-weight-bold">...</h1>
        <hr class="divider my-4">
      </div>
      <div class="col-lg-8 align-self-baseline">
        <p class="text-white-75 font-weight-light mb-5">...</p>
        <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
      </div>
    </div>
  </div>
</header>

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

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

• <header>– đây là 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 số dạng khác như thẻ<section>thẻ và thẻ <footer>
• <div>– là một thẻ trong html cho biết rằng phần sau là một phần riêng biệt (hay còn gọi là phần chia ) 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 (class) CSS được gán cho chúng. Ví dụ:

<h1 class="text-uppercase text-white font-weight-bold">...</h1>

Các class được gán cho  thẻ<h1> ở đây là text-uppercase text-white font-weight-bold.

Các class này đã được tạo bởi Bootstrap và nhà phát triển của chủ đề Creative. Tin tốt là bạn cũng có thể sử dụng chúng một cách thoải mái 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 mình bằng cách gán bất kỳ  class nào cho thẻ đó.

Nếu bạn muốn xem danh sách đầy đủ các class có sẵn, bạn có thể mở style.csstệp chính trong thư mục con csscủa chủ đề Creative.

Nắm bắt được tất cả các class này thoạt đầu có vẻ đáng sợ, nhưng thực ra nó dễ dàng hơn vẻ ngoài.

Ví dụ: một trong các class được gán cho một số đoạn trong index.htmltệp của chúng tôi là font-weight-light. Khi bạn mở file style.csstệp và ctrl + f  tìm kiếm tên class đó, bạn sẽ thấy rằng nó chỉ cần đặt font-weighttham số như sau:

.font-weight-light { font-weight: 300 ; }

Việc sửa đổi văn bản mặc định trong index.htmltệp rất đơn giản. Chỉ cần tìm thẻ mà bạn muốn chỉnh sửa và thay đổi nội dung giữa thẻ mở và thẻ đóng.

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

<h1 class="text-uppercase text-white font-weight-bold">Your Favorite ...</h1>

Đối với một cái gì đó như sau:

<h1 class="text-uppercase text-white font-weight-bold">Admire my HTML website!</h1>

Bạn có thể làm tương tự với tất cả các đoạn văn bả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 văn mới một cách tự do. Ví dụ, chúng ta có thể lấy đoạn văn đã có trên trang, tạo một bản sao của đoạn văn đó và dán nó ngay bên dưới đoạn văn bản gốc; như sau:

<p class="text-white-75 font-weight-light">Start Bootstrap can ...</p> 
<p class="text-white-75 font-weight-light">Paragraph 2</p>

Việc này phức tạp hơn một chút vì nó yêu cầu chúng ta phải truy cập tệp CSS stylesheet và thực hiện sửa đổi ở đó. Như bạn có thể thấy trong mã HTML của phần Masthead, không có thẻ nào cho biết việc đưa hình ảnh vào trang theo bất kỳ cách nào bởi vì Tất cả điều này được thực hiện thông qua CSS.

Khi bạn xem xét toàn bộ khối mã xử lý phần Masthead, bạn sẽ thấy rằng nó được gán cho một lớp là masthead. Dòng mã này xử lý việc gán lớp:

<header class="masthead">

Class masthead là một trong đó đặt một hình ảnh trong bối cảnh của toàn khối.

Hãy mở lại tệp style.css và tìm lớp masthead:

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 72px);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../img/bg-masthead.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

Mã này làm tất cả mọi thứ ưa thích để hình ảnh của chúng tôi (như thêm một lớp phủ, che, vv), nhưng phần quan trọng là dòng này: url("../img/bg-masthead.jpg"). Đây là dòng cho biết nơi để tìm ảnh nền. Nó sẽ nằm trong thư mục con img.

Để thay đổi hì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 imgthư mục con, sau đó sao chép và dán tên của nó vào vị trí của bg-masthead.jpgtệp gốc . Nói tóm lại, nếu bạn muốn thay đổi hình ảnh gốc hày thực hiên thay đổi này: url("../img/bg-masthead.jpg")thành: url("../img/ten-file-anh-cua-ban.jpg").

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

Khi xem qua file index.html, bạn sẽ nhận thấy rằng có rất nhiều phần (section) khác nhau đã có trên trang. Chúng tôi có một phần dành cho điều hướng và về một khối, một số dịch vụ , một danh mục đầu tư , một lời kêu gọi hành động , một khối liên hệ và một footer .

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

Cách tốt nhất để sửa đổi trang cho phù hợp với nhu cầu của bạn là xem 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 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 <section>thẻ). Được cho là, bạn phải làm điều đó bằng tay (bằng cách cắt và sau đó dán các phần tử vào vị trí), nó vẫn đơn giản để làm.

Như đã nói, có hai sửa đổi khá cơ bản mà chúng ta chưa nói đến. Tiếp theo hãy trình bày những điều này:

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à chỉ định một số kiểu nội dòng cho thẻ HTML. Ví dụ:

<p style="color: #FF0000;">Chữ màu red</p>

Trong HTML, màu sắc được biểu thị bằng các giá trị hex của chúng; ví dụ “#FF0000” có màu đỏ. Đây là bảng tất cả các màu tiêu chuẩn khác .

Một cách tốt hơn để chỉ định màu là thực hiện thông qua biểu định kiểu CSS. Ví dụ: để có được hiệu ứng tương tự như đoạn mã trên, chúng ta có thể đặt mã này vào biểu định kiểu CSS của mình:

p.red { color: #FF0000; }

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

<p class="red">chữ màu đỏ</p>

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 biểu định kiểu css trong file style.css 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ụ; nói rằng bạn muốn thay đổi màu của tiêu đề có nội dung “At Your Service”. Hiện tại, nó có màu đen và đây là mã xử lý nó:

<h2 class="text-center">At Your Service</h2>

Để thay đổi màu của nó, cách tốt nhất là tạo một class mới có tên, giả sử .text-orangevà đặt giá trị màu ở đó, như sau:

.text-orange { color: #f4623a !important; }

* !important 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:

<h2 class="text-center text-orange">At Your Service</h2>

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 điều gì đó tương tự. 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:

.SOMECLASS { font-family: "Merriweather", Roboto, sans-serif; font-size: 18px; }

• 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ỳ class 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 class.

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 “At Your Service”, trước tiên chúng tôi có thể tạo một class như sau:

.text-xxl {
font-size: 50px;
}

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

<h2 class="text-center text-orange text-xxl">At Your Service</h2>

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 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 đã 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 con 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ề chúng tôi
• liên hệ
• portfolio
• sản phẩm và dịch vụ
• team
• chính sách (chính sách bảo mật, điều khoản, v.v.)

    10. 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 thực hiện là bạn muốn bố cục như thế nào.

Khi tạo một trang web với 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 thực sự là đặ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 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 nằm trên khối khác. Một cái gì đó trông như ảnh bên dưới (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 giao diện cho bạn để bạn có thể chỉ 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 một trang “giới thiệu” mới.

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

• có một menu điều hướng ở trên cùng,
• khối dòng tiêu đề có chiều rộng đầy đủ 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 chiều rộng),
• và một footer.

Bây giờ chúng ta hãy xây dựng bố cục này trong HTML.

10.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 index.htmltệp và đổi tên nó about.html.

Chỉ để phân biệt các trang dễ dàng hơn ở giai đoạn đầu này, hãy chỉnh sửa tệp mới about.html và thay đổi nội dung trong thẻ <title>. Ví dụ <title>Về Webaffiliatevn.com</title>,.

Bây giờ, hãy xem qua từng dòng của tệp và quyết định những gì chúng ta sẽ để lại và những gì chúng ta sẽ loại bỏ:

• Các navigation menu (bên dưới <!-- Navigation -->). Bạn có thể muốn giữ nguyên phần này, chỉ để làm cho trải nghiệm điều hướng đồng nhất trên tất cả các trang.
• Phần main hero (bên dưới <!-- Masthead -->). Cái này chúng tôi sẽ không cần theo dự án bố trí của chúng tôi. Bạn có thể tiếp tục và xóa toàn bộ phần.
• Phần about  (bên dưới <!-- About Section -->). Chúng tôi sẽ sử dụng lại phần này làm tiêu đề chính của chúng tôi.
• Phần services , phần portfolio , phần call to action và phần contact (mọi thứ giữa <!-- Services Section -->và <!-- Footer -->). Chúng tôi không cần những phần này. Bạn có thể tiếp tục và xóa chúng.
• Phần footer và mọi thứ bên dưới nó (bên dưới ). Điều này chúng tôi sẽ cần phải giữ. <!-- Footer -->

Đ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 nó chỉ là thế này:

<!-- Main Content Section -->
<section class="page-section bg-primary" id="main-content">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <p>A paragraph of text.</p>       </div>
    </div>
  </div>
</section>

Khi bạn lưu tệp và điều hướng đến nó 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, 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 class bg-primary khỏi thẻ chính <section>thẻ chính . Nói cách khác, hãy tạo thẻ thành thế này:

<section class="page-section" id="main-content">

Kết quả thành như sau:

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

<!-- Main Content Section -->
<section class="page-section" id="main-content">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
          
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

        <p>Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...</p>

        <h3>Subhead</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

      </div>
    </div>
  </div>
</section>

Đây là những gì điều này trông giống như trên trang:

Nếu bạn không muốn văn bản được căn giữa thì chỉ cần xóa class text-center khỏi một trong các thẻ <div>.

Nếu bạn muốn tạo thêm một số nét 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 đâ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 thẻ <p>và <h3>:

<p class="lead text-muted">Lorem ipsum dolor sit amet...</p>

<p class="text-muted">Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...</p>

<h3 class="h3 mt-4">Subhead</h3>

Và đây là hiệu ứng:

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

Đây là thẻ hình ảnh mẫu trong HTML trông như thế nào:

<img src="image.jpg">

Khá đơn giản, phải không? Tham số duy nhất ở đó là đường dẫn đến tệp hình ảnh. Để giữ cho mọi thứ được tổ chức độc đáo, bạn có thể đặt lại hình ảnh của mình vào thư mục img (giống như cách bạn đã làm với ảnh nền backgroup cách đây không lâu). Trong trường hợp này, thẻ hình ảnh sẽ là:

<img src="img/image.jpg">

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ố class Bootstrap cho nó. Đặc biệt:

<img src="img/image" class="rounded img-fluid">

Hai class 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:

<p class="lead text-muted">Lorem ipsum dolor sit amet...</p>

<p class="text-muted">Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...</p>

<h3 class="h3 mt-4">Subhead</h3>

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

Đây là trang giới thiệu sau khi chỉnh sửa của chúng tôi:

10.3. Liên kết Trang mới với trang chủ

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ủ ( file index.html). Đương nhiên, nơi tốt nhất để thêm liên kết này là trong menu điều hướng (navigation menu) (bên dưới <!-- Navigation -->).

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

<a class="nav-link js-scroll-trigger" href="#about">About</a>

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

<a class="nav-link" href="about.html">About</a>

Đây là điều mà chúng tôi chưa nói đến, nhưng thẻ <a> 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 thuộc tính href. 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 thẻ mở và <a> và thẻ đóng </a> .

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 mình trỏ đến trang giới thiệu.

Đọc thêm

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

Những gì bạn nên làm bây giờ là 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à class của nó. Một số tài nguyên cho điều đó:

• Bảng cheat sheet HTML5
• Bảng cheat sheet CSS
• Bảng cheat sheet Javascript
• Hướng dẫn HTML cho người mới bắt đầu
• Hướng dẫn Bootstrap
• Bảng cheat sheet Bootstrap

Thành thạo 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 tốc độ và đẹp mắt 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, đừng ngần ngại gửi chúng trong phần bình luận.