Mặc dù bạn có thể tìm thấy nhiều công nghệ khác nhau cung cấp năng lượng cho các trang web của chúng tôi ngày nay, nhưng hai tệp quan trọng nhất trên toàn bộ Internet là HTML và CSS. Đúng vậy, nếu bạn cần một thứ gì đó phức tạp, bạn cũng sẽ cần nhiều công nghệ hơn để đi cùng với chúng. Nhưng nếu tất cả những gì bạn muốn là tạo một trang web cá nhân đơn giản, thì HTML và CSS là tất cả những gì bạn cần.
Giới thiệu khái niệm cơ bản
Đây là hướng dẫn dành cho người mới bắt đầu về HTML và CSS sẽ chỉ cho bạn cách tạo một trang web đơn giản nhanh nhất có thể. Các kết quả sẽ không nhất thiết phải “tuân thủ các tiêu chuẩn”. Và bạn sẽ phải tự đọc một số bài đọc nếu bạn muốn điều chỉnh thêm và mở rộng nó. Nhưng nó sẽ là một trang web và sẽ hoạt động “như bình thường” trong hầu hết các trình duyệt.
Vì dung lượng ở mức cao, chúng tôi sẽ không đi sâu vào mọi khía cạnh của thiết kế và phát triển web. Thay vào đó, chúng tôi sẽ hướng dẫn bạn qua các bước để đi từ trang web bằng 0 đến trang web hoạt động hoàn toàn, giải thích mọi thứ hoạt động trong quá trình này.
Hai tệp cần thiết
Một trang web hiện đại bao gồm nhiều tệp, nhưng có hai tệp cần thiết nhất:tệp HTML và tệp CSS. Tệp HTML xác định các phần tử và cấu trúc của một trang. Tệp CSS xác định sự xuất hiện của các phần tử đó.
Cả hai về cơ bản đều là các tệp văn bản điển hình, chứa văn bản có cấu trúc cụ thể. Bạn không cần bất kỳ loại chương trình đặc biệt nào để tạo hoặc chỉnh sửa chúng:mọi trình soạn thảo văn bản “đơn giản” đều sẽ làm được. "Đơn giản", chúng tôi muốn nói đến ứng dụng kiểu notepad điển hình của bạn, không phải ứng dụng giống như trình soạn thảo của LibreOffice hoặc Microsoft Words có thể làm "phong phú" văn bản theo bất kỳ cách nào.
Bước đầu tiên là tạo một thư mục mới trên màn hình của bạn với hai tệp văn bản trống bên trong. Đặt tên cho một trong số chúng là “index.html” và “style.css” thứ hai.
Thiết lập không gian làm việc của bạn
Chạy trình duyệt yêu thích của bạn và tải tệp HTML trong đó bằng cách chọn “Tệp -> Mở” hoặc bằng cách kéo và thả tệp trong cửa sổ của nó.
Mở cả tệp HTML và CSS trong trình soạn thảo văn bản kiểu notepad yêu thích của bạn.
Có thể xem cả ba cửa sổ cùng một lúc là cách thuận tiện nhất để làm việc. Nếu bạn không có hai màn hình để trải chúng, chúng tôi khuyên bạn nên sắp xếp các cửa sổ như trong hình dưới đây của chúng tôi.
“Dán” cửa sổ trình duyệt của bạn vào một bên của màn hình để chiếm một nửa của nó (theo chiều dọc) 4 và đặt hai cửa sổ notepad ở bên kia, bên dưới cái kia.
Khối xây dựng
Viết một cái gì đó vào notepad với tệp HTML và lưu các thay đổi. Tiếp theo, làm mới cửa sổ trình duyệt của bạn bằng cách nhấn F5. Bạn sẽ ngay lập tức thấy văn bản bạn đã viết xuất hiện trong cửa sổ trình duyệt của bạn.
Chúc mừng bạn vừa thiết lập trang web đầu tiên của mình! Và chúng tôi không nói đùa, vì các trang web đầu tiên trên Internet không có nhiều khác biệt về hình thức so với những gì bạn vừa tạo. Điều quan trọng, hồi đó, là chính nội dung.
HTML cho phép bạn “đánh dấu từng phần nội dung là gì” bằng cách sử dụng một bộ “mã” cụ thể. Một số điều quan trọng nhất là:
-
html:Biểu thị một tài liệu html. Phải ở đầu mỗi tệp html. -
body:Tất cả nội dung bạn thấy trên trình duyệt đều nằm trongbodynày nhãn. Nó thể hiện khía cạnh trực quan của một tài liệu html. -
p:Đoạn văn bản -
img:Hình ảnh -
a href:Liên kết đến địa chỉ web -
div:Đặt một “hộp” xung quanh bất kỳ phần nội dung nào mà bạn có thể “tạo kiểu” bằng CSS.
Để “xác định” một phần nội dung, nó thường phải được bao bọc bởi cùng một đoạn mã với sự khác biệt nhỏ ở phần đầu và phần cuối. Ví dụ:một đoạn văn bản được định nghĩa là:
<p>Standard Text Paragraph</p>
“
” chỉ ra rằng “những gì tiếp theo là một đoạn văn” và “
” rằng “đoạn văn kết thúc ở đây.” Bằng cách thay thế “p” bằng “div” trong cả hai trường hợp, bạn xác định một hộp bao quanh nội dung chứ không phải “đánh dấu nó là một đoạn văn”.Lưu ý rằng có những ngoại lệ:các phần tử như hình ảnh (img) và đường phân chia (hr) không yêu cầu “mã đóng”.
Thay đổi và làm mới
Thay thế mọi thứ trong tệp HTML của bạn bằng những thứ sau:
<html> <body> <div id="header">HEADER</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </body> </html>
Làm mới trình duyệt của bạn (F5), và bạn sẽ thấy các từ HEADER, CONTENT và FOOTER lần lượt xuất hiện bên dưới chữ kia. Chúng tôi vừa tạo ba hộp "div" vô hình, tự quản. Mỗi một trong số chúng chứa một trong các từ.
Để có thể xác định diện mạo của chúng thông qua CSS, chúng tôi đã gán một từ khóa cho mỗi từ khóa, một “danh tính” (“id =name” trong mã), tương ứng với nội dung của chúng:đầu trang, nội dung và chân trang. Tất cả các phần tử trong một trang web có thể có một bí danh như vậy, được thiết lập dưới dạng “lớp” hoặc “id”. Các lớp xác định bí danh cho các mục xuất hiện nhiều lần trên cùng một trang web, như đoạn văn, liên kết, v.v. ID xác định bí danh cho các phần tử chỉ xuất hiện một lần trong mỗi trang, như tên hoặc biểu trưng của trang web.
Nội dung thực
Xóa từ “HEADER” giữa các mã div - mà không thay đổi cấu trúc của chúng - và thay vào đó, hãy nhập tên bạn muốn cho trang web của mình.
Làm tương tự cho “CONTENT” của bạn, nhưng thay vì chỉ nhập văn bản, hãy đảm bảo “đánh dấu” phần đầu và phần cuối của mỗi đoạn như chúng ta đã thấy trước đó. Thay thế “CONTENT” bằng hai hoặc ba đoạn văn bản.
Bây giờ cũng là lúc để nói về các liên kết. Để chuyển đổi bất kỳ cụm từ nào trong văn bản của bạn thành một liên kết, hãy cấu trúc nó như sau:
<a href="ADDRESS">TEXT</a>
Bạn có thể sao chép-dán nội dung này và thay thế “ĐỊA CHỈ” bằng “những gì bạn muốn liên kết của mình trỏ đến” và “TEXT” với cụm từ sẽ hiển thị trong trang web của bạn. Chúng tôi đã liên kết một cụm từ ở chân trang với trang web của chúng tôi với các cụm từ sau:
<a href="https://www.maketecheasier.com">Make Tech Easier</a>
Cuối cùng, thay thế từ “CHÂN” bằng tên của bạn, một câu nhỏ cho biết ai đã thiết kế hoặc sở hữu trang web hoặc bất kỳ thứ gì khác mà bạn muốn.
Lưu các thay đổi và làm mới trình duyệt của bạn để xem chúng ở đó.
Bạn đã có Phong cách (.CSS)
Phần tử đầu tiên của bất kỳ trang web nào là phần đầu. Trong đó, chúng ta thường tìm thấy mã xác định danh tính của trang web, tên, người tạo và ngôn ngữ của nó, cũng như bất kỳ công nghệ nào - ngoài HTML - được sử dụng trong đó. Đó là nơi có hầu hết các liên kết đến bất kỳ tệp JavaScript và CSS bên ngoài nào. Thêm một mã vào trang web của bạn bằng cách chèn đoạn mã sau vào đầu tệp HTML, chỉ sau html thẻ:
<head> </head>
Để có thể tạo kiểu cho các phần tử của trang web bằng CSS, bạn sẽ cần tải tệp CSS từ bên trong HTML. Và điều này có nghĩa là đưa nó vào “đầu” của bạn. Điều sau chỉ ra rằng trang HTML sẽ “liên kết” đến tệp “biểu định kiểu”, thuộc loại “văn bản / css”. được đặt tên là “style.css”:
<link rel="stylesheet" type="text/css" href="style.css">
Sao chép và dán mã của chúng tôi, giống như bạn thấy, "bên trong" phần đầu - nghĩa là bên dưới "" và bên trên "". Lưu các thay đổi và chuyển sự chú ý của bạn đến tệp CSS. Tại đó, nhập thông tin sau:
body {}
#header, #content, #footer {}
#header, #footer {}
#header {}
#content {}
#footer {}
img {}
Trang web thực
CSS, hay Trang tính kiểu xếp tầng, chỉ đơn giản là tập hợp các quy tắc hiển thị tương ứng với các phần tử cụ thể của một trang web. Với CSS, chúng tôi có thể tạo kiểu cho cả “vị trí” và “cách thức” mọi thứ sẽ xuất hiện trên một trang web.
Trong bước trước, chúng tôi đã giới thiệu một tập hợp các quy tắc trống cho tất cả các phần tử trên trang của chúng tôi. Bây giờ, hãy xem cách chúng ta có thể thêm các tham số sẽ xác định diện mạo của chúng.
Bắt đầu với phần nội dung, bao gồm mọi thứ trên trang web của bạn. Sửa đổi nó như sau:
body {
width: 100%;
position: relative;
margin: 0;
padding: 0;
} Các quy tắc trên nói rằng chúng tôi muốn trang web của mình chiếm toàn bộ chiều rộng của cửa sổ trình duyệt (chiều rộng:100%), mà chúng tôi không muốn nó có bất kỳ khoảng cách nào so với các cạnh của cửa sổ trình duyệt (lề:0) và không muốn có bất kỳ khoảng trống nào xung quanh nó (padding:0).
Tất cả các quy tắc cho một phần tử phải được đặt trong dấu ngoặc và mỗi quy tắc phải kết thúc bằng dấu “;” như sau:
#Element_ID {
RULE 1;
RULE 2;
RULE 3;
} Tiếp tục bằng cách cập nhật CSS “#header, #content, #footer” của bạn lên như sau:
#header, #content, #footer {
float: left;
position: relative;
}
Với điều này, bạn đang nói rằng vị trí của cả ba phần tử phải tuân theo một số quy tắc chung:mỗi phần tử phải “tương đối” với phần trước và “tuân theo” nó (float: left ). Bất kể kích thước, hình dạng, ngoại hình hay bất kỳ yếu tố nào khác, mỗi yếu tố trong số chúng sẽ “đẩy” yếu tố tiếp theo và chúng sẽ không bao giờ trùng lặp.
Cập nhật #header, #footer với những thứ sau để làm cho trang web của bạn trông giống một trang thực tế hơn:
#header, #footer {
width: 100%;
height: 100px;
background: rgba(0,0,0,0.9);
color: rgba(255,255,255,0.9);
text-align: center;
font-size: 12px;
} Phần trên xác định rằng chúng tôi muốn cả đầu trang và chân trang của trang web của chúng tôi rộng 100%, cao 100 pixel và văn bản hiển thị trong đó có kích thước 3em và được căn giữa.
Các quy tắc màu nền và màu sắc tương ứng chỉ định màu gì của toàn bộ “hộp div” đầu trang và chân trang cũng như màu của bất kỳ văn bản nào có trong chúng. “RGBA” đặt màu dựa trên tiêu chuẩn trộn màu Đỏ - Xanh lá - Xanh lam. Mỗi màu có thể có giá trị từ 0 đến 255, với sự kết hợp của các giá trị Đỏ, Xanh lục và Xanh lam khác nhau cho phép hiển thị bất kỳ màu nào. Số cuối cùng tương ứng với độ trong suốt. Vì vậy, RGBA (255,0,0,0.5) sẽ cho chúng ta màu đỏ trong mờ, trong khi RGBA (50,50,255,1) sẽ cho màu xanh lam sáng và “đặc”.
Kết thúc bằng cách tập trung vào nội dung cơ bản của trang web. Xác định diện mạo của nó là:
#content {
width: 80%;
background: rgba(255,255,255,0.9);
color: rgba(0,0,0,0.9);
margin: 0 10%;
} Lưu lại tất cả các thay đổi và làm mới cửa sổ trình duyệt của bạn để xem chúng.
Kiểu hình ảnh
Để thêm hình ảnh vào trang web của bạn, bạn cần quay lại tệp HTML. Ở đó, "bên trong" nội dung nhưng trước đoạn đầu tiên, hãy nhập như sau:
<img src="/PATH/FILE.JPG" alt="TEXT">
Trong đó “PATH” và “FILE.JPG” là “vị trí” và tên tệp của bất kỳ hình ảnh nào, có sẵn trực tuyến hoặc cục bộ và “TEXT” là mô tả về những gì nó đại diện cho mục đích trợ năng.
Nếu bạn cố gắng lưu và kiểm tra các thay đổi sau khi bổ sung này, bạn sẽ thấy rằng trang web của mình bị biến dạng. Sự cố sẽ được khắc phục sau khi bạn tạo quy tắc CSS về cách hiển thị hình ảnh trên trang web của bạn.
Quay lại tệp CSS và khai báo cách bạn muốn tất cả hình ảnh (img) được căn trái theo dòng của các phần tử khác (float:left và position:rel).
Để không vượt quá ranh giới trang, hãy chỉ định cách bạn muốn chiều rộng của chúng là tối đa của chính trang (chiều rộng:100%). Để tránh hình ảnh chạm vào văn bản của bạn, hãy thêm một số lề dọc ở trên cùng và dưới cùng. Kết quả sẽ như thế này:
img {
float: left;
position: relative;
width: 100%;
margin: 5px 0;
padding: 0;
}
Hoàn thành bằng cách thêm một hình ảnh khác, lần này được căn chỉnh sang trái hoặc phải. Như trước đây, trước tiên bạn nên quay lại mã HTML và dán một liên kết đến hình ảnh của bạn ở đó, như chúng ta đã thấy trước đó. Sự khác biệt là bạn sẽ cần thêm một “lớp”, một định danh cho phần tử. Sau đó, bạn sẽ chỉ định thông qua các quy tắc hiển thị CSS trên nó và bất kỳ phần tử nào khác mà cùng một lớp được “đính kèm”.
Chúng tôi đặt tên cho lớp của mình là “alignright” vì chúng tôi muốn bất kỳ đối tượng nào, nơi nó được đính kèm, được hiển thị ở phía bên phải của trang.
Hãy thử tự tạo mã. Thêm .alignright {} lớp trong “style.css” của bạn, rồi tạo các quy tắc sẽ tạo kiểu cho nó. Mã CSS phải chỉ định rằng chúng tôi muốn các phần tử trôi sang phía bên phải của trang và có chiều rộng 46% (chiều rộng:46%). Chúng tôi không muốn hình ảnh chạm vào văn bản, vì vậy chúng tôi cũng nên thêm khoảng cách 2% xung quanh chúng, chia thành lề 1% (khoảng cách từ bất kỳ phần tử nào khác) và đệm 1% (một số “khoảng trống thừa xung quanh phần tử ”).
Do đó, các quy tắc của chúng tôi phải xác định rằng bất kỳ hình ảnh nào có .alignright lớp được đính kèm sẽ chiếm 46% chiều rộng của trang, cộng với 1% lề mỗi bên, cộng thêm 1% khoảng đệm ở mỗi bên. Tất cả cộng thêm tới 50% - chính xác là một nửa chiều rộng của trang. Kết quả sẽ giống như sau:
img.alignright {
float: right;
width: 46%;
margin: 1%;
padding: 1%;
} Trang tiếp theo
Trang web đầu tiên của bạn đã sẵn sàng và hoạt động đầy đủ. Bằng cách tìm hiểu thêm về cả HTML và CSS, bạn có thể làm phong phú thêm nội dung của nó, thêm các phần tử mới và cải thiện hình thức của nó. Bước tiếp theo, hãy thử sao chép và đổi tên tệp HTML, sửa đổi nội dung của nó và liên kết từng trang mới với những trang khác.
Nghe có vẻ không quá khó, phải không? Chào mừng bạn đến với phát triển web:bằng cách sao chép, sửa đổi và liên kết các trang khác nhau thông qua các liên kết, bạn sẽ tạo được trang web nhiều trang hoàn chỉnh, “thích hợp” đầu tiên của mình!