Cách mã hóa trang webMuốn tìm hiểu cách tạo một trang web với HTML và CSS?


Bạn ở đú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 để có được từ một màn hình trống đến một trang web đang hoạt động mà tối ưu hóa và khá đẹ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ể tra cứu cả hai thuật ngữ trong Wikipedia, nhưng những định nghĩa đó rất 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 trang web – Ở đâu mọi thứ đi, làm sao chúng được đặt ra, và những gì trên trang
  • CSS (Cascading Style Sheets) xác định tạo kiểu / trình bày của một trang web và các yếu tố trên đó

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 một trang web, thì ý nghĩa của chúng tôi là một tài liệu HTML – một trang duy nhất mà một phần của trang web của bạn. Trong khi đó, thì 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ách tạo trang web bằng HTML và CSS (mục lục):

  1. Tìm hiểu những điều cơ bản về HTML
  2. Hiểu cấu trúc tài liệu HTML
  3. Nhận biết các bộ chọn CSS
  4. Đặt biểu định kiểu CSS lại với nhau
  5. Nhận Bootstrap
  6. Chọn một thiết kế
  7. Tùy chỉnh trang web của bạn với 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 một trang web: 4-5 giờ
Cấp độ kỹ năng: Trung gian

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 người xây dựng trang web. Bạn cũng có thể xem danh sách IDE tốt nhất được chọn để phát triển web. 

Contents

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, Don mệnh lo lắng; bạn don don 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 dịch vụ lưu trữ web trên mạng và chọn một cái gì đó quá đắt.

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à websiteetup.org.

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.

Công bố đầy đủ: Chúng tôi kiếm được hoa hồng nếu bạn kết thúc việc mua Bluehost 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 duy trì và thiết lập trang web và cập nhật. Cảm ơn sự hỗ trợ của bạn.

Để giải quyết vấn đề này mà không có sự đau đớn 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. Có nghĩa là họ sẽ: (a) thiết lập một 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) cấu hình mọi thứ để làm việc cùng nhau và (d) cung cấp cho bạn quyền truy cập vào bảng điều khiển dễ sử dụng.

Đi trước và đăng ký Bluehost, chúng tôi sẽ chờ. Khi bạn quay lại và máy chủ web của bạn được cấu hình và sẵn sàng hoạt động, hãy cuộ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à don lồng có ý định làm cho nó công khai, sử dụng một phần mềm máy chủ web cục bộ. Người mà chúng tôi đề xuất 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. Tại đây một người 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à HTML nhãn.

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

MỌI NGƯỜI

Ở đây, chúng tôi đã xử lý một nhãn. Cái này sẽ Dũng cảm một đoạn văn bản mà giữa các thẻ mở () và thẻ đóng (). Trong trường hợp này, đoạn văn bản đó là MỌI NGƯỜI.

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

  • ... sẽ in nghiêng văn bản giữa các thẻ mở và đóng
  • ... sẽ gạch chân nó
  • ...

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


  • ...

    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:

  • Mục 1
  • Mục 2
  • Mục 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:

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

Đọc này để có đượ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 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 từ Legos. Bạn đặt các viên gạch khác nhau lên nhau để kết thúc với một cấu trúc lớn hơn.

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

Ở đây, cấu trúc tài liệu HTML đơn giản nhất:





Chào thế giới!


Chào thế giới!

Trang web đầu tiên của tôi.

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 index.html, 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:

  • – khai báo ban đầu của tài liệu
  • – một tuyên bố khác; nói rằng những gì sắp tới là một tài liệu HTML được viết bằng tiếng Anh
  • – đánh dấu sự khởi đầu của cái đầu phần; các cái đầu phần là nơi tất cả các tham số cơ bản của trang đi; hầu hết những thứ đó sẽ không được hiển thị trên màn hình; họ chỉ cần xác định những gì đang diễn ra dưới mui xe
  • – xác định bộ ký tự nào đượ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 khai báo này là
  • Chào thế giới! – 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ụ:

tiêu đề trong trình duyệt web khi tạo một trang web với HTML và CSS

  • – đánh dấu sự khởi đầu của thân hình phần; đây là nơi tất cả nội dung của trang đi; nó là phần chính của 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ẽ đưa vào bao gồm tất cả nội dung mà Lừa có nghĩa là xuất hiện trên trang

  • Chào thế giới!

    – tiêu đề chính trên trang

  • Trang web đầu tiên của tôi.

    – một đoạn văn bản đơn giản

  • – 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 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 công cụ gọi là Văn bản cao siêu. 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, tất cả đều 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 Văn bản tuyệt vời:

cú pháp tuyệt vời là tuyệt vời khi tạo một trang web với HTML và CSS

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

trang này xấu

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

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

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

Bộ chọn mô tả cách một yếu tố nhất định nên hành xử khôn ngoan. Dưới đây là một ví dụ về bộ chọn CSS:

p {
cỡ chữ: 18px;
}

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

các thẻ trong tài liệu sẽ có cỡ chữ là 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 một kiểu nhất định theo một kiểu nhất định, mà là tạo các lớp khác nhau của các lớp khác nhau và gán chúng cho các thẻ từng cái một.

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

.văn bản bình thường {
cỡ chữ: 18px;
}

Chú ý dấu chấm (.) trước tên của lớp (văn bản bình thường). Với lớp xác định văn bản bình thường của Viking, giờ đây chúng ta có thể gán lớp đó cho các thẻ HTML cụ thể mà chúng ta muốn tạo kích thước 18px.

Ví dụ:

Văn bản này sẽ là 18px.

Hãy để thêm 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:

  • .văn bản bình thường – định nghĩa lớp học; mọi thứ sau tên của lớp và giữa 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
  • cỡ chữ – một thuộc tính CSS mẫu
  • 18px – một giá trị được gán cho tài sản

Có một tấn các thuộc tính CSS ngoài các thuộc tính trên cỡ chữ. Ở đây danh sách hoàn thành nếu bạn tò mò.

4. Kết hợp một biểu định kiểu CSS

Một tài liệu HTML rất có cấu trúc – mọi yếu tố đều có vị trí của nó và thứ tự các yếu tố 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 í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à rất 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 với nhau bằng cách 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ó phải là điều bạn muốn không.

Đ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 mọi thứ dễ dàng hơn với bạ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, 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à 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ụ mã nguồn mở để tạo một trang web với HTML và CSS.

Nói một cách dễ hiểu, Bootstrap đảm nhiệm 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 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à được 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 thẳng vào phần thú vị. Với nó, bạn không phải làm việc ở giai đoạn đầu thường nhàm chán khi tạo một trang web với HTML và CSS.

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

  • Lựa 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 trang của nó.
  • Lựa chọn (b): đi đường 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.

Lựa chọn (a) ban đầu có thể có một số đường cong học tập, 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 nắm vững 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 hơn và làm cho chúng trông chính xác 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 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, người đứng đầu trong số 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 đau đớn 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ư trình bày nội dung và làm cho nó trông đẹp.

Nói tóm lại, học mọi thứ theo cách này sẽ cho bạn kết quả tốt 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 đang 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 muốn. Tất cả đều nên hoạt động tương tự nhau.

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 về 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à Sáng tạo. Hiệu ứng cuối cùng mà chúng tôi sẽ thực hiện sẽ giống như thế này:

trang chủ cuối cùng sau khi tạo một trang web với HTML và CSS

Để bắt đầu, mẫu Sáng tạo, nhấp vào Tải xuống miễn phí nút 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.

Giải nén gói 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ộ 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 có thể thấy phiên bản chứng khoán của mẫu:

bắt đầu mẫu bootstrap

Nó đã rất đẹp, nhưng giờ đây, 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ẽ cho chúng ta thấy làm thế nào để 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. Hãy để có một cái nhìn sâu hơn về nó ở đây.

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






Sáng tạo - Bắt đầu chủ đề Bootstrap





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

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

  • Trước hết, mọi thứ giữa ngoặc là một nhận xét HTML. Nó không xuất hiện trên trang cuối cùng.
  • – nó một trong những thẻ khai báo riêng của Bootstrap. Nó xác định kích thước của trang web viewport.
  • – 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 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 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 rút gọn của cùng một trang CSS. Phiên bản này chỉ dễ sửa đổi hơn.

Bây giờ cuộn xuống dưới cùng của index.html tập tin. Bạn sẽ thấy các dòng sau ngay trước khi kết thúc thân hình nhãn:

        

Họ có 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ế. Chẳng hạn, khi bạn bấm vào Trong khoảng liên kết trong menu trên cùng, bạn sẽ được đưa vào khối giới thiệu trên 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 rắc rối để hiểu mã này ngay bây giờ. Hãy để Lừa để điều này một thời gian khác.

Thay vào đó, hãy để cùng nhau làm việc với 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 tiêu đề gắn thẻ trong phần đầu và thay thế văn bản giữa các thẻ thành thứ gì đó của riêng bạn:

Trang web HTML của tôi

2. Tùy chỉnh phần Hero

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

phần anh hùng

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

...


...

Tìm hiểu thêm

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:


  • – đâ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ạng

    thẻ và

    nhãn
  • – là một thẻ CSS chung cho biết phần tiếp theo là một phần riêng biệt (còn gọi là bộ phận) 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) có vẻ 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ụ:

...

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

thẻ ở đây là văn bản chữ hoa chữ trắng phông chữ-trọng lượng đậm.

Các lớp này đã được tạo bởi Bootstrap và bởi nhà phát triển chủ đề Creative Creative. Tin vui 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ẳng thắn 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ở chính creative.css tập tin mà trong đó css thư mục con của chủ đề Sáng tạo.

Ban đầu 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 chúng tôi index.html tập tin là font-weight-light. Khi bạn nhảy vào creative.css tập tin và ctrl + f Tìm kiếm tên lớp đó, bạn sẽ thấy rằng nó chỉ đơn giản là đặt trọng lượng phông chữ tham số như vậy:

.font-weight-light {
trọng lượng phông chữ: 300;
}

Sửa đổi các văn bản mặc định trong index.html tập tin rất đơn giản Chỉ cần tìm thẻ mà bạn muốn chỉnh sửa và thay đổi những gì mà giữa các thẻ mở và đóng.

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

Cái bạn thích nhất ...

Để một cái gì đó như sau:

Chiêm ngưỡng trang web HTML của tôi!

Bạn có thể làm tương tự với tất cả các đoạ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. Chẳng hạn, chúng ta có thể lấy đoạn văn mà trên đã 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 ban đầu; như vậy

Bắt đầu Bootstrap có thể ...

Đoạn văn bản 2

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

Điều này phức tạp hơn một chút vì nó yêu cầu chúng ta đ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 Tiêu đề phần, không có thẻ sẽ chỉ ra bao gồm một hình ảnh cho trang theo bất kỳ cách nào. Tất cả điều này được thực hiện thông qua CSS.

Khi bạn có cái nhìn khác về toàn bộ khối mã xử lý Tiêu đề phần, bạn sẽ thấy rằng nó được gán cho một lớp được gọi là tiêu đề. Dòng mã này xử lý việc gán lớp:

Các tiêu đề lớp là lớp đặt một hình ảnh trong nền của toàn bộ khối.

Hãy để mở chương trình creative.css tập tin một lần nữa và tìm kiếm lớp học masthead

tiêu đề.masthead {
đệm-top: 10rem;
đệm dưới cùng: calc (10rem - 72px);
nền: gradient tuyến tính (xuống dưới cùng, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
vị trí nền: trung tâm;
lặp lại nền: không lặp lại;
đính kèm nền: cuộn;
kích thước nền: bìa;
}

Mã này thực hiện tất cả các loại điều thú vị cho hình ảnh của chúng tôi (như thêm lớp phủ, tô bóng, v.v.), nhưng phần quan trọng là: url ("../ img / bg-masthead.jpg"). Đây là dòng chỉ ra nơi tìm hình ảnh nền. Nó sẽ ở trong img thư mục con.

Để 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 img thư mục con và sau đó sao chép và dán tên của nó thay cho bản gốc bg-masthead.jpg tập tin. Tóm lại, thay đổi điều này: url ("../ img / bg-masthead.jpg") đến đây: url ("../ img / YOUFILE.jpg").

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

Khi bạn đi qua index.html tập tin, bạn sẽ nhận thấy rằng có rất nhiều phần khác nhau trên trang. Chúng tôi có một phần cho dẫn đường, và trong khoảng một khối, một số dịch vụ, một danh mục đầu tư, một kêu gọi hành động, một tiếp xúc khối, và một chân trang.

Mặc dù có nhiều nội dung khác nhau trong tất cả các phần này, nhưng các phần này 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à lần lượt đi qua các khối 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

thẻ). Cấp, bạn phải làm điều đó bằng tay (bằng cách cắt và sau đó dán các yếu tố vào vị trí), nó vẫn đơn giản để làm.

Với điều đó đã được nói, có hai sửa đổi khá cơ bản mà chúng tôi đã nói về vấn đề này. Hãy để che đậy những điều 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ụ:

Văn bản màu đỏ

Trong HTML, màu sắc được biểu thị bằng các giá trị hex của chúng; Mùi # FF0000 có màu đỏ. Đây là một bảng của tất cả các bảng khác màu chuẩn.

Cách tốt hơn để gán màu là thực hiện thông qua biểu định kiểu CSS. Ví dụ: để có được hiệu ứng giống như mã ở trên, chúng ta có thể đặt nó trong biểu định kiểu CSS của chúng tôi:

p.red {
màu: # FF0000;
}

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

Văn bản màu đỏ

Phương thức 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 và sửa đổi lớp tương ứng hoặc tạo một lớp mới.

Dưới đây là một ví dụ; nói rằng bạn muốn thay đổi màu 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ó:

Dịch vụ của bạn

Để thay đổi màu sắc của nó, cách tốt nhất là tạo một lớp mới gọi là, nói, .văn bản màu cam và đặt giá trị màu ở đó, như vậy:

.văn bản màu cam {
màu: # f4623a! quan trọng;
}

* Các !quan trọng 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:

Dịch vụ của bạn

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

cam h2

Để 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ề hình khối định nghĩa phông chữ trong CSS:

.SOMECLASS {
họ phông chữ: "Merriweather", Roboto, sans-serif;
cỡ chữ: 18px;
}
  • tải phông chữ Merriweather, Roboto, và mặc định hệ thống sans serif phông chữ (đọc phần này để tìm hiểu về phông chữ an toàn trê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 của chúng tôi, để thay đổi kích thước phông chữ cho tiêu đề đó có tên là Tại dịch vụ của bạn, trước tiên chúng ta có thể tạo một lớp như thế này:

.văn bản-xxl {
cỡ chữ: 50px;
}

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

Dịch vụ của bạn

Khi thay đổi màu sắc hoặc phông chữ trong mẫu do Bootstrap tạo ra, 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 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 với HTML và CSS, bạn có thể xây dựng 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
  • tiếp xúc
  • 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 là gì.

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 cứ điều gì bố trí bạn muốn. Khó khăn duy nhất là thực sự đặt nó cùng 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. Đầu tiên, chúng tôi sẽ chỉ cho bạn một số nguyên tắc xây dựng 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 bạn Bố cục là xem nó là một chuỗi các khối riêng lẻ – chồng lên nhau. Một cái gì đó như thế này (chú ý bốn khối riêng biệt):

cách bố trí khi tạo một trang web với HTML và CSS

Điều tuyệt vời của 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 có thể tập trung vào việc đặt các khối đó vào đúng chỗ.

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

Để bắt đầu, chúng tôi sẽ tạo ra một dự án rất cơ bản về 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 chiều rộng),
  • và một chân trang.

Bây giờ hãy để cùng nhau 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 index.html tập tin và đổi tên nó about.html.

Chỉ để làm cho các trang dễ phân biệt hơn ở giai đoạn đầu này, hãy chỉnh sửa trang mới about.html tập tin và thay đổi những gì trong </code> nhãn. Ví dụ, <code><title>Về tôi.

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

  • Các dẫn đường thực đơn (bên dưới ). 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 thống nhất trên tất cả các trang.
  • Các anh hùng chính phần (bên dưới ). Cái này chúng tôi đã thắ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.
  • Các trong khoảng phần (bên dưới ). Chúng tôi sẽ sử dụng lại phần này làm khối tiêu đề chính của chúng tôi.
  • Các dịch vụ phần, danh mục đầu tư phần, kêu gọi hành động phần, và tiếp xúc phần (mọi thứ giữa ). 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.
  • Các chân trang phần 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ữ.

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



























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

Đi trước và tạo một bản sao của phần về. Cái này:

...


...

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

Vì chúng tôi không cần

tiêu đề ở đó và


yếu tố, hãy để loại bỏ chúng. Điều duy nhất còn lại trong toàn bộ khối này sẽ là một đoạn văn bản. Thích như vậy:

Một đoạn văn bản.

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, bên dưới khối kia, có cùng màu nền:

về đầu trang

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à loại bỏ bg chính lớp từ chính

nhãn. Nói cách khác, tạo thẻ vào đây:

Cái đó tốt hơn:

về đầu trang 2

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

Lorem ipsum dolor ngồi amet, consectetur adipiscing elit...

Proin fermentum, felis TIME pharetra lobortis, magna quam hendrerit dolor...

Phân ngành

Lorem ipsum dolor ngồi amet, consectetur adipiscing elit...

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

về câu 1

Nếu bạn không thích văn bản làm trung tâm thì chỉ cần xóa trung tâm văn bản lớp từ một trong những

thẻ.

về câu 2

Nếu bạn muốn đặt thêm một số điểm nhấn vào 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ó cho mục đích này. Đây là những cái chúng tôi đã gán cho

thẻ:

Lorem ipsum dolor ngồi amet...

Proin fermentum, felis TIME pharetra lobortis, magna quam hendrerit dolor...

Phân ngành

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

về câu 3

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

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


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 img thư mục một lần nữa (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à:


Điều đó đang được nói, thẻ hình ảnh trong cấu hình cụ thể này là 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 biệt:


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

Lorem ipsum dolor ngồi amet...

Proin fermentum, felis TIME pharetra lobortis, magna quam hendrerit dolor...

Phân ngành

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

về câu 4

Đây là trang của chúng tôi về tất cả vinh quang của nó:

về trang hoàn thành

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

Khi trang mới được thực hiện, hãy để ngay bây giờ liên kết nó từ trang chủ ( index.html tập tin). Đươ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 ).

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

Trong khoảng

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

Trong khoảng

Đây là điều mà chúng ta đã nói về vấn đề này, nhưng thẻ 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 href tham số. 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 mở và đóng thẻ.

Khi bạn làm mới trang chủ 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 gồm hai trang – một trang chủ và một trong khoảng 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 cho 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 HTML
  • Hướng dẫn Bootstrap
  • Bootstrap cheat tờ

Nắm vững 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à tối ưu hóa 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ại gửi chúng trong các nhận xét.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me