Mặc dù bạn tìm thấy nhiều công nghệ khác nhau vận hành trang web ngày nay, hai file quan trọng nhất trên toàn Internet là HTML và CSS. Đúng, nếu cần thứ phức tạp, bạn cũng cần thêm công nghệ. Nhưng nếu chỉ muốn tạo trang web cá nhân đơn giản, HTML và CSS là tất cả bạn cần.
Giới Thiệu Cơ Bản
Đây là hướng dẫn HTML và CSS cho người mới bắt đầu, chỉ cách tạo trang web đơn giản nhanh nhất có thể. Kết quả không nhất thiết "tuân thủ chuẩn" (standards-compliant). Và bạn phải tự đọc thêm nếu muốn tinh chỉnh và mở rộng. Nhưng nó sẽ là một trang web và hoạt động "như nó nên" trên hầu hết trình duyệt.
Vì không gian hạn chế, chúng ta không đi sâu vào mọi khía cạnh phát triển và thiết kế web. Thay vào đó, chúng ta dẫn dắt bạn qua các bước từ con số không đến trang web hoạt động hoàn toàn, giải thích mọi thứ trong quá trình.
Hai File Cần Thiết
Trang web hiện đại gồm nhiều file, nhưng hai file quan trọng nhất: file HTML và file CSS. File HTML định nghĩa các phần tử và cấu trúc trang. File CSS định nghĩa giao diện của các phần tử đó.
Cả hai về cơ bản là file văn bản thường, chứa văn bản có cấu trúc cụ thể. Bạn không cần chương trình đặc biệt để tạo hoặc chỉnh sửa: bất kỳ trình soạn thảo văn bản "đơn giản" nào cũng được. "Đơn giản" nghĩa là ứng dụng kiểu notepad, không phải kiểu LibreOffice hay Microsoft Word có thể "làm giàu" văn bản bất kỳ cách nào.
Bước đầu: tạo thư mục mới trên desktop với hai file văn bản trống bên trong. Đặt tên một là "index.html" và cái kia "style.css".
Thiết Lập Không Gian Làm Việc
Chạy trình duyệt yêu thích và tải file HTML vào, bằng cách chọn "File -> Mở" hoặc kéo thả file vào cửa sổ.
Mở cả file HTML và CSS trong trình soạn thảo văn bản kiểu notepad yêu thích.
Có thể xem cả ba cửa sổ cùng lúc là cách tiện lợi nhất. Nếu không có hai màn hình trải rộng, khuyên sắp xếp cửa sổ như hình dưới.
"Ghim" cửa sổ trình duyệt bên cạnh màn hình chiếm nửa (dọc) và đặt hai cửa sổ notepad bên kia, một dưới một.
Khối Xây Dựng
Viết gì đó trên notepad file HTML và lưu thay đổi. Tiếp theo, làm mới trình duyệt bằng F5. Bạn ngay lập tức thấy văn bản vừa viết xuất hiện trong cửa sổ trình duyệt.
Chúc mừng bạn vừa thiết lập trang web đầu tiên! Và chúng tôi không đùa, vì trang web đầu tiên trên Internet không khác nhiều về ngoại hình so với những gì bạn vừa tạo. Điều quan trọng lúc bấy giờ là nội dung chính.
HTML cho phép bạn "đánh dấu mỗi mảnh nội dung là gì", dùng một tập "mã" cụ thể. Một số quan trọng nhất:
html: Chỉ ra tài liệu html. Nên ở đầu mỗi file html.body: Tất cả nội dung bạn thấy trên trình duyệt được bao quanh bởi thẻbody. Nó đại diện khía cạnh thị giác của tài liệu html.p: Đoạn văn bảnimg: Hình ảnha href: Liên kết đến địa chỉ webdiv: Đặt "hộp" quanh bất kỳ mảnh nội dung nào bạn có thể "trang trí" (style) với CSS.
Để "định nghĩa" mảnh nội dung, thường phải bao quanh bằng cùng mã với sự khác biệt nhỏ ở đầu và cuối. Ví dụ, đoạn văn bản định nghĩa như:
<p>Đoạn Văn Bản Tiêu Chuẩn</p>
"<p>" chỉ ra "điều tiếp theo là đoạn văn" và "</p>" là "đoạn văn kết thúc đây". Thay "p" bằng "div" ở cả hai trường hợp, bạn định nghĩa hộp bao quanh nội dung thay vì "đánh dấu là đoạn văn".
Lưu ý có ngoại lệ: phần tử như hình ảnh (img) và đường kẻ ngang (hr) không yêu cầu "mã đóng".
Thay Đổi Và Làm Mới
Thay thế mọi thứ trong file HTML bằng 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 (F5), bạn thấy từ HEADER, CONTENT, FOOTER xuất hiện lần lượt. Chúng ta vừa tạo ba "hộp div" vô hình, tự trị. Mỗi cái chứa một từ.
Để định nghĩa giao diện qua CSS, gán từ khóa cho mỗi cái, một "danh tính" (id="name" trong mã), tương ứng nội dung: header, content, footer. Tất cả phần tử trang web có thể có bí danh, thiết lập là "class" hoặc "id". Class định danh cho mục xuất hiện nhiều lần trên cùng trang, như đoạn văn, liên kết, v.v. ID định danh cho phần tử chỉ xuất hiện một lần mỗi trang, như tên hoặc logo trang web.
Nội Dung Thực
Xóa từ "HEADER" giữa mã div – không thay đổi cấu trúc – và thay vào đó, nhập tên bạn muốn cho trang.
Làm tương tự cho "CONTENT", nhưng không chỉ nhập văn bản, cũng "đánh dấu" đầu và cuối mỗi đoạn như đã thấy. Thay "CONTENT" bằng hai hoặc ba đoạn văn.
Bây giờ nói về liên kết. Để chuyển cụm từ trong văn bản thành liên kết, cấu trúc như:
<a href="ĐỊA_CHỈ">VĂN_BẢN</a>
Bạn copy-dán và thay "ĐỊA_CHỈ" bằng "điều bạn muốn liên kết trỏ đến" và "VĂN_BẢN" bằng cụm từ hiển thị trên trang. Chúng tôi liên kết cụm từ trong footer đến trang web với:
<a href="https://www.maketecheasier.com">Make Tech Easier</a>
Cuối cùng, thay "FOOTER" bằng tên bạn, câu nhỏ chỉ ai thiết kế/sở hữu trang hoặc bất cứ điều gì bạn muốn.
Lưu thay đổi và làm mới trình duyệt xem kết quả.
Bạn Có Style (.CSS)
Phần tử đầu tiên bất kỳ trang web là head. Trong đó, thường tìm thấy mã định danh trang, tên, người tạo, ngôn ngữ, và công nghệ – ngoài HTML – dùng trong trang. Đó là nơi hầu hết liên kết đến file JavaScript và CSS bên ngoài sống. Thêm một cho trang bằng cách chèn sau vào đầu file HTML, ngay sau thẻ html:
<head> </head>
Để trang trí phần tử trang web bằng CSS, bạn cần tải file CSS từ trong HTML. Và nghĩa là bao gồm nó trong "head". Sau chỉ ra trang HTML sẽ "liên kết" (link) đến file "stylesheet", loại "text/css", tên "style.css":
<link rel="stylesheet" type="text/css" href="style.css">
Copy-dán mã như bạn thấy, "bên trong" head – tức là dưới "<head>" và trên "</head>". Lưu thay đổi và chuyển ý thức đến file CSS. Tại đó, nhập sau:
body {} #header, #content, #footer {} #header, #footer {} #header {} #content {} #footer {} img {}
Trang Web Thực Sự
CSS, hay Cascading Style Sheets, đơn giản là bộ quy tắc hiển thị tương ứng với phần tử cụ thể của trang web. Với CSS chúng ta trang trí cả "ở đâu" và "như thế nào" mọi thứ xuất hiện trên trang.
Bước trước chúng ta giới thiệu bộ quy tắc trống cho tất cả phần tử trang. Bây giờ xem cách thêm tham số để định nghĩa giao diện.
Bắt đầu với body, bao gồm mọi thứ trên trang. Sửa như sau:
body { width: 100%; position: relative; margin: 0; padding: 0; }
Quy tắc trên nói: trang chiếm toàn bộ chiều rộng cửa sổ trình duyệt (width: 100%), không muốn khoảng cách từ cạnh cửa sổ (margin: 0), và không muốn khoảng trống quanh (padding: 0).
Tất cả quy tắc cho phần tử nên bao quanh bởi ngoặc nhọn, mỗi quy tắc kết thúc bằng ";":
#Element_ID { RULE 1; RULE 2; RULE 3; }
Tiếp tục cập nhật CSS "#header, #content, #footer":
#header, #content, #footer { float: left; position: relative; }
Với này, bạn nói vị trí cả ba phần tử theo quy tắc chung: mỗi cái "tương đối" (relative) so với cái trước và "theo sau" nó (float: left). Không quan trọng kích thước, hình dạng, giao diện, hay yếu tố khác, mỗi cái sẽ "đẩy" cái tiếp theo, và chúng không bao giờ chồng chéo.
Cập nhật #header, #footer sau để trang web trông giống trang thực 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; }
Trên định nghĩa header và footer rộng 100%, cao 100px, văn bản hiển thị cỡ 3em và căn giữa.
Quy tắc background và color chỉ màu của cả "hộp div" header/footer và màu văn bản trong đó. "RGBA" đặt màu theo chuẩn trộn Đỏ - Xanh lá - Xanh dương. Mỗi màu giá trị 0-255, kết hợp khác nhau cho phép hiển thị mọi màu. Số cuối tương ứng độ trong suốt. Vậy RGBA(255,0,0,0.5) cho đỏ bán trong suốt, RGBA(50,50,255,1) cho xanh sáng "rắn".
Hoàn tất tập trung vào nội dung cơ bản trang. Định nghĩa giao diện:
#content { width: 80%; background: rgba(255,255,255,0.9); color: rgba(0,0,0,0.9); margin: 0 10%; }
Lưu tất cả thay đổi, làm mới trình duyệt xem.
Trang Trí Hình Ảnh
Để thêm hình ảnh vào trang, quay lại file HTML. Tại đó, "bên trong" content nhưng trước đoạn đầu, nhập:
<img src="/ĐƯỜNG_DẪN/FILE.JPG" alt="VĂN_BẢN">
Nơi "ĐƯỜNG_DẪN" và "FILE.JPG" là "vị trí" và tên file hình ảnh, có sẵn trực tuyến hoặc cục bộ, và "VĂN_BẢN" mô tả nó cho truy cập dễ dàng.
Nếu lưu và kiểm tra sau thêm này, trang bị biến dạng. Vấn đề sẽ khắc phục khi tạo quy tắc CSS hiển thị hình ảnh.
Quay lại file CSS và khai báo muốn tất cả hình ảnh (img) căn trái, theo luồng phần tử khác (float: left và position: relative).
Để không vượt ranh giới trang, chỉ định chiều rộng tối đa của trang (width: 100%). Để tránh hình ảnh chạm văn bản, thêm lề dọc trên dưới. Kết quả như sau:
img { float: left; position: relative; width: 100%; margin: 5px 0; padding: 0; }
Hoàn tất thêm hình khác, lần này căn trái hoặc phải. Như trước, trước tiên quay lại HTML dán liên kết hình ảnh. Khác biệt là cần thêm "class", định danh cho phần tử. Sau đó chỉ định qua CSS quy tắc hiển thị trên nó và phần tử khác có cùng class "gắn".
Chúng tôi đặt class "alignright" vì muốn bất kỳ đối tượng gắn nó hiển thị bên phải trang.
Thử tự tạo mã. Thêm .alignright {} class vào "style.css", tạo quy tắc trang trí. Mã CSS chỉ định muốn phần tử float bên phải và rộng 46% (width: 46%). Không muốn hình chạm văn bản, thêm khoảng trống 2% quanh, chia 1% margin (khoảng cách từ phần tử khác) và 1% padding (khoảng trống "phụ quanh phần tử").
Vậy quy tắc định nghĩa hình ảnh có class .alignright gắn sẽ chiếm 46% rộng trang, thêm 1% margin mỗi bên, 1% padding mỗi bên. Tổng 50% – đúng nửa trang. Kết quả trông như:
img.alignright { float: right; width: 46%; margin: 1%; padding: 1%; }
Trang Tiếp Theo
Trang web đầu tiên sẵn sàng và hoạt động hoàn toàn. Bằng cách học thêm HTML và CSS, bạn làm giàu nội dung, thêm phần tử, cải thiện giao diện. Bước tiếp, thử copy và đổi tên file HTML, sửa nội dung và liên kết mỗi trang mới đến nhau.
Nghe không quá khó, phải không? Chào mừng đến phát triển web: bằng cách copy, sửa đổi, liên kết trang khác nhau qua link, bạn đã tạo trang web đa trang đầu tiên "chuẩn chỉnh"!