Bạn có thể xây dựng một trang web chỉ với html không?

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

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

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

  • HTML (Ngôn ngữ đánh dấu siêu văn bản) xác định cấu trúc và nội dung của 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 dáng/cách trình bày của một trang web và các thành phần trên đó

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

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

Mục lục

  1. 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 bộ chọn CSS
  4. Đặt biểu định kiểu CSS cùng nhau
  5. Tải 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

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

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

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

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

p {
    font-size: 18px;
}
1

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

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

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

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

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

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

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

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

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

SOMETHING

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

p {
    font-size: 18px;
}
2. Cái này sẽ in đậm một đoạn văn bản nằm giữa thẻ mở (
p {
    font-size: 18px;
}
2) và thẻ đóng (
p {
    font-size: 18px;
}
4). Trong trường hợp này, đoạn văn bản đó là
p {
    font-size: 18px;
}
5

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

  • p {
        font-size: 18px;
    }
    
    6 sẽ in nghiêng văn bản giữa thẻ mở và thẻ đóng
  • p {
        font-size: 18px;
    }
    
    7 sẽ gạch dưới nó
  • p {
        font-size: 18px;
    }
    
    8 là một đoạn văn bản
  • p {
        font-size: 18px;
    }
    
    9 là tiêu đề chính trên trang

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

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

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

SOMETHING
0

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

SOMETHING
1

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

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

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

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

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

SOMETHING
2

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

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

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

  • SOMETHING
    31 – khai báo ban đầu của tài liệu
  • SOMETHING
    32 – một tuyên bố khác;
  • SOMETHING
    33 – đánh dấu sự bắt đầu của phần đầu;
  • SOMETHING
    34 – xác định bộ ký tự nào được sử dụng để viết tài liệu;
  • SOMETHING
    35 – tiêu đề của trang; . g

Bạn có thể xây dựng một trang web chỉ với html không?

  • SOMETHING
    36 – đánh dấu sự bắt đầu của phần cơ thể;
  • SOMETHING
    37 – tiêu đề chính trên trang
  • SOMETHING
    38 – một đoạn văn bản đơn giản
  • SOMETHING
    39 – 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 phức tạp như MS Word không phải là một trải nghiệm tốt. Để giúp mọi thứ trở nên dễ dàng với chính bạn, hãy cài đặt trình soạn thảo HTML có tên Sublime Text. Nó có phiên bản cho cả Mac và PC, và hoàn toàn miễn phí

Tại sao nó tốt hơn? . 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, thông số thẻ và các giá trị khác. Về cơ bản, tất cả sẽ trở nên có thể đọc được. Đây là cấu trúc HTML đơn giản của chúng ta trông như thế nào trong Sublime Text

Bạn có thể xây dựng một trang web chỉ với html không?

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

SOMETHING
30 mới đó của mình, sao chép tệp đó vào thư mục chính của máy chủ web của bạn, sau đó xem trang đó bằng cách điều hướng đến trang đó thông qua trình duyệt web. Tuy nhiên, đừng quá phấn khích;

Bạn có thể xây dựng một trang web chỉ với html không?

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

3. Tìm hiểu bộ chọn CSS

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

Bộ chọn mô tả cách một phần tử nhất định sẽ hoạt động theo cách xuất hiện. Đây là một ví dụ về bộ chọn CSS

p {
    font-size: 18px;
}

Bộ chọn này cho biết rằng tất cả các thẻ HTML

p {
    font-size: 18px;
}
51 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 bộ chọn CSS không phải là hạn chế tất cả các thẻ của một loại nhất định đối với 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ụ: bộ chọn lớp trong CSS trông như thế này

SOMETHING
3

Chú ý dấu chấm (

p {
    font-size: 18px;
}
52) trước tên lớp (
p {
    font-size: 18px;
}
53). Với lớp “văn bản bình thường” được xác định, 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ụ

p {
    font-size: 18px;
}
5

Hãy dà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

  • p {
        font-size: 18px;
    }
    
    54 – định nghĩa lớp;
  • p {
        font-size: 18px;
    }
    
    56 – một thuộc tính CSS ví dụ
  • p {
        font-size: 18px;
    }
    
    57 – một giá trị được gán cho tài sản

Có rất nhiều thuộc tính CSS ngoài

p {
    font-size: 18px;
}
56 ở trên. Đây là danh sách đầy đủ 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 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 cấu trúc cuối cùng và hình thức 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à stylesheets. 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úc nào cũng quan trọng (ít nhất là đối với các thiết kế đơn giản)

Cách bạn kết hợp 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ẽ giúp bạn làm 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, chúng tôi sẽ lấy một sinh vật sống và mổ xẻ các thành phần của nó

Đây là lúc 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à bộ công cụ mã nguồn mở để tạo trang web bằng HTML và CSS

Nói một cách dễ hiểu, Bootstrap đảm nhận 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 nền tảng 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 phải bắt đầu lại từ đầu mà thay vào đó, hãy đ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 bằng 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 lối tắt – nhận gói khởi động cho Bootstrap với thiết kế đẹp mắt và trang web demo đã được tạo sẵn

Tùy chọn (a) có thể có một số đường cong học tập ngay từ đầu, nhưng đó không phải là cách tồi tệ nhất để tiếp cận việc tạo một trang web bằng 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 tạo các trang mới hơn 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

Chúng tôi sẽ đi với 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 vài lý do, giám đốc của họ

Bắt đầu với một cấu trúc có 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ơ bản cần thiết 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 nội dung thú vị – như bố cục nội dung và làm cho nội dung trông đẹp mắt

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

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

Khi bạn đang tạo một trang web bằng HTML và CSS, bạn có thể tự do sử dụng bất kỳ mẫu Bootstrap nào mà 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 của Start Bootstrap. Họ có nhiều lựa chọn mẫu miễn phí được tối ưu hóa, hoạt động không gặp sự cố và cũng được thiết kế rất tốt

Chủ đề chúng ta sẽ sử dụng có tên là Sáng tạo. Hiệu ứng cuối cùng mà chúng ta sẽ tạo sẽ giống như thế này

Bạn có thể xây dựng một trang web chỉ với html không?

Để bắt đầu với mẫu Sáng tạo, hãy nhấp vào nút Tải xuống Miễn phí ở bên phải (trên trang này) và lưu gói zip vào màn hình 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 sẽ thấy phiên bản chứng khoán của mẫu

Bạn có thể xây dựng một trang web chỉ với html không?

Nó đã khá đẹp rồi, nhưng bây giờ là 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

7. Tùy chỉnh trang web của bạn bằng 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 ta 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 ngắn gọn về phần đầu của tài liệu HTML ở trên. Hãy cùng tìm hiểu sâu hơn về nó tại đây

Khi bạn mở tệp

SOMETHING
30 của trang Bootstrap trong 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 để làm rõ *)

p {
    font-size: 18px;
}
6

* Ngoài phần 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 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ứ nằm giữa dấu ngoặc 360 là một nhận xét HTML. Nó không hiển thị trên trang cuối cùng
  • p {
        font-size: 18px;
    }
    
    61 – đó 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 của trang web
  • p {
        font-size: 18px;
    }
    
    62 – 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 phần 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

p {
    font-size: 18px;
}
0

Đâ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 tính CSS. Phiên bản này chỉ dễ sửa đổi hơn

Bây giờ hãy cuộn xuống cuối tệp

SOMETHING
30. Bạn sẽ thấy những dòng sau ngay trước thẻ đóng body

p {
    font-size: 18px;
}
2

Họ 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 chuyển đến khối giới thiệu trên cùng một trang một cách dễ dàng – đ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 khó khăn khi hiểu mã này ngay bây giờ. Hãy để điều này cho một thời điểm khác

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

SOMETHING
00

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

Phần anh hùng là cái mà chúng tôi gọi là khối này

Bạn có thể xây dựng một trang web chỉ với html không?

Sẽ thậ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 tệp

SOMETHING
30 của bạn và tìm phần này

SOMETHING
01

Toàn bộ khối mã này kiểm soát nội dung trong phần anh hùng

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

  • p {
        font-size: 18px;
    }
    
    65 – đây là thẻ xác định rằng toàn bộ phần này là tiêu đề của trang;
  • p {
        font-size: 18px;
    }
    
    68 – là một thẻ CSS chung cho biết phần tiếp theo là một phần riêng biệt (hay còn gọi là phân chia) trong tài liệu HTML;

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ụ

SOMETHING
02

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

p {
    font-size: 18px;
}
69 ở đây là
p {
    font-size: 18px;
}
00

Các lớp này đã được tạo bởi Bootstrap và bởi 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 thoải mái khi tạo một trang web bằng 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 chỉ định bất kỳ số 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 chính ________ 401 trong thư mục con ________ 402 của chủ đề Sáng tạo

Việc nắm bắt tất cả các lớp này thoạt nghe có vẻ đáng sợ, nhưng nó thực sự dễ dàng hơn nhiều 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

SOMETHING
30 của chúng tôi là
p {
    font-size: 18px;
}
04. Khi bạn nhảy vào tệp
p {
    font-size: 18px;
}
01 và ctrl+f tìm kiếm tên lớp đó, bạn sẽ thấy rằng nó chỉ đơn giản đặt tham số
p {
    font-size: 18px;
}
06 như vậy

SOMETHING
03

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

SOMETHING
30 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ì giữa thẻ mở và thẻ đóng

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

SOMETHING
04

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

SOMETHING
05

Bạn có thể làm tương tự với 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 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 ngay bên dưới đoạn văn bản gốc;

SOMETHING
06

Bây giờ, với các văn bản đã được xử lý, hãy thay thế hình ảnh ở chế độ nền

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

p {
    font-size: 18px;
}
08, 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. Tất cả điều này được thực hiện thông qua CSS

Khi bạn xem lại toàn bộ khối mã xử lý phần

p {
    font-size: 18px;
}
08, bạn sẽ thấy rằng nó được gán cho một lớp có tên là
p {
    font-size: 18px;
}
20. Dòng mã này xử lý việc gán lớp

SOMETHING
07

Lớp

p {
    font-size: 18px;
}
20 là lớp đặt hình ảnh làm nền cho toàn bộ khối

Hãy mở lại tệp

p {
    font-size: 18px;
}
01 và tìm lớp “tiêu đề”

SOMETHING
08

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 ta (như thêm lớp phủ, đổ bóng, v.v. ), nhưng phần quan trọng là đây.

p {
    font-size: 18px;
}
23. Đây là dòng cho biết nơi tìm hình nền. Nó sẽ nằm trong thư mục con
p {
    font-size: 18px;
}
24

Để 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 thư mục con

p {
    font-size: 18px;
}
24, sau đó sao chép và dán tên của nó vào vị trí của tệp
p {
    font-size: 18px;
}
26 ban đầu. Tóm lại, thay đổi điều này.
p {
    font-size: 18px;
}
23 đến cái này.
p {
    font-size: 18px;
}
28

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

Khi xem qua tệp

SOMETHING
30, bạn sẽ nhận thấy rằng có rất nhiều phần 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ụ, danh mục đầu tư, lời kêu gọi hành động, khối liên hệ và chân trang

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ó cùng một bộ thẻ HTML – chỉ khác lớp CSS đượ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à đ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 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ẻ

p {
    font-size: 18px;
}
66). 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

Như đã nói, có hai sửa đổi khá cơ bản mà chúng ta chưa nói đến. Hãy đề cập đến những điều 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ụ

SOMETHING
09

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

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 tương tự như đoạn mã trên, chúng ta có thể đặt đoạn mã này vào biểu định kiểu CSS của mình

SOMETHING
10

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

SOMETHING
11

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

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

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

SOMETHING
12

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

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

SOMETHING
13

*

SOMETHING
002 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

SOMETHING
14

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

Bạn có thể xây dựng một trang web chỉ với html không?

Để thay đổi phông chữ và kích thước của phông chữ, bạn có thể thực hiện 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

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

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

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

SOMETHING
16

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

SOMETHING
17

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

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

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

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

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

  • về trang
  • 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 như thế nào

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

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

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

Bạn có thể xây dựng một trang web chỉ với html không?

Đ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 chỉ cần tập trung vào việc đặt các khối đó vào đúng vị trí

Trong phần hướng dẫn này, chúng ta 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ư trên

  • có một menu điều hướng ở trên cùng,
  • một khối 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 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 ta sẽ làm

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

SOMETHING
30 và đổi tên nó thành
SOMETHING
004

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 tệp

SOMETHING
004 mới và thay đổi nội dung trong thẻ
SOMETHING
006. Ví dụ,
SOMETHING
007

Bây giờ, hãy xem 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

  • Menu điều hướng (bên dưới
    SOMETHING
    008). 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
  • Phần anh hùng chính (bên dưới
    SOMETHING
    009). 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 giới thiệu (bên dưới
    SOMETHING
    010). 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
  • Phần dịch vụ, phần danh mục đầu tư, phần kêu gọi hành động và phần liên hệ (mọi thứ từ
    SOMETHING
    011 đến
    SOMETHING
    012). Chúng tôi không cần những phần này cả. Bạn có thể tiếp tục và xóa chúng
  • Phần chân trang và mọi thứ bên dưới nó (bên dưới
    SOMETHING
    012). Điều này chúng ta 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

SOMETHING
18

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

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

SOMETHING
19

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

SOMETHING
20

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

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

SOMETHING
21

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

Bạn có thể xây dựng một trang web chỉ với html không?

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

SOMETHING
016 khỏi thẻ chính
p {
    font-size: 18px;
}
66. Nói cách khác, tạo thẻ thành cái này

SOMETHING
22

Cái đó tốt hơn

Bạn có thể xây dựng một trang web chỉ với html không?

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

SOMETHING
23

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

Bạn có thể xây dựng một trang web chỉ với html không?

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

SOMETHING
018 khỏi một trong các thẻ
p {
    font-size: 18px;
}
68

Bạn có thể xây dựng một trang web chỉ với html không?

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

p {
    font-size: 18px;
}
51 và
SOMETHING
021

SOMETHING
24

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

Bạn có thể xây dựng một trang web chỉ với html không?

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

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

SOMETHING
25

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

p {
    font-size: 18px;
}
24 (giống như bạn đã làm với nền đó trước đây). Trong trường hợp như vậy, thẻ hình ảnh sẽ là

SOMETHING
26

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

SOMETHING
27

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

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

SOMETHING
28

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

Bạn có thể xây dựng một trang web chỉ với html không?

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

Bạn có thể xây dựng một trang web chỉ với html không?

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

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

SOMETHING
30). Đươ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
SOMETHING
008)

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

SOMETHING
29

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

p {
    font-size: 18px;
}
0

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

SOMETHING
025 là một thẻ liên kết trong HTML. Sử dụng nó, bạn có thể liên kết đến bất kỳ trang web nào bằng cách cung cấp địa chỉ của trang đó trong tham số
SOMETHING
026. 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 nằm giữa thẻ
SOMETHING
027 mở và đóng

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

Đọc thêm

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

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

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

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

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

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

HTML có tốt cho việc tạo trang web không?

HTML tĩnh phù hợp để xây dựng một trang web cơ bản . Tuy nhiên, bạn cần mã hóa một chút nếu muốn cập nhật nội dung của mình và bạn cần viết lại CSS nếu muốn thay đổi giao diện trang web của mình. Chi phí bảo trì cao là không thể tránh khỏi nếu bạn muốn xây dựng trang web của mình bằng HTML.

Bạn có thể xây dựng những gì chỉ với HTML?

7 Dự án CSS HTML tốt nhất cho người mới bắt đầu .
Xây dựng một danh mục đầu tư hoặc trang web cá nhân đơn giản. .
Làm cho sơ yếu lý lịch của bạn tương tác. .
Tạo một Bản tin Email. .
Tạo một trang web đáp ứng tĩnh. .
Xây dựng một hình thức. .
Tạo hoạt ảnh. .
Đóng góp cho một dự án mã nguồn mở

HTML và CSS có đủ để tạo một trang web không?

HTML, CSS và JavaScript là những ngôn ngữ cơ bản bạn cần biết để tạo trang web .

Làm thế nào có thể tạo một trang web bằng HTML?

Làm theo các bước bên dưới để tạo trang web đầu tiên của bạn bằng Notepad hoặc TextEdit. .
Bước 1. Mở Notepad (PC) Windows 8 trở lên. .
Bước 1. Mở TextEdit (Mac) Mở Finder > Ứng dụng > TextEdit. .
Bước 2. Viết một số HTML. .
Bước 3. Lưu trang HTML. .
Bước 4. Xem trang HTML trong trình duyệt của bạn