01 trên 07
Đặt tệp của bạn vào một thư mục mới
Windows Notepad là một chương trình xử lý văn bản cơ bản mà bạn có thể sử dụng để viết các trang web của mình. Các trang web chỉ là văn bản và bạn có thể sử dụng bất kỳ chương trình xử lý văn bản nào để viết HTML của mình. Hướng dẫn này hướng dẫn bạn qua quá trình này.
Việc đầu tiên cần làm khi tạo một trang web mới trong Notepad là tạo một thư mục riêng để lưu trữ nó. Thông thường, bạn lưu trữ các trang web của mình trong một thư mục có tên HTML trong thư mục "Tài liệu của tôi", nhưng bạn có thể lưu trữ chúng ở nơi bạn thích.
- Mở cửa sổ My Documents
- Nhấp vào Tệp > Mới > Thư mục
- Đặt tên cho thư mục my_website
Lưu ý quan trọng: Đặt tên cho các thư mục web và các tệp bằng cách sử dụng tất cả các chữ thường và không có dấu cách hoặc dấu chấm câu nào. Trong khi Windows cho phép bạn sử dụng không gian, nhiều nhà cung cấp dịch vụ lưu trữ web thì không, và bạn sẽ tiết kiệm cho mình một chút thời gian và rắc rối nếu bạn đặt tên tệp và thư mục chính xác ngay từ đầu.
02 trên 07
Lưu trang dưới dạng HTML
Điều đầu tiên bạn nên làm khi viết một trang web trong Notepad là lưu trang dưới dạng HTML. Điều này giúp bạn tiết kiệm thời gian và rắc rối sau này.
Giống như tên thư mục, luôn sử dụng tất cả các chữ thường và không có dấu cách hoặc ký tự đặc biệt nào trong tên tệp.
- Trong Notepad, nhấp vào File và sau đó Save As.
- Điều hướng đến thư mục mà bạn đang lưu tệp trang web của mình.
- Thay đổi menu thả xuống Lưu thành loại thành Tất cả các tệp [*. *].
- Đặt tên cho tệp. Hướng dẫn này sử dụng tên pets.htm.
03 trên 07
Bắt đầu viết trang web
Điều đầu tiên bạn nên nhập trong tài liệu HTML Notepad của bạn là DOCTYPE. Điều này cho các trình duyệt biết loại HTML mong đợi. Hướng dẫn này sử dụng HTML5.
Khai báo loại tài liệu không phải là một thẻ. Nó cho máy tính biết rằng một tài liệu HTML5 đang đến. Nó nằm ở đầu mỗi trang HTML5 và nó có dạng này:
Khi bạn có DOCTYPE, bạn có thể bắt đầu HTML của mình. Nhập cả phần đầu
và thẻ kết thúc và để lại một số không gian cho nội dung trang web của bạn. Tài liệu Notepad của bạn sẽ trông như thế này:
04/07
Tạo một đầu cho trang web của bạn
Người đứng đầu của tài liệu HTML là nơi thông tin cơ bản về trang web của bạn được lưu trữ — những thứ như tiêu đề trang và có thể là thẻ meta để tối ưu hóa công cụ tìm kiếm. Để tạo phần đầu, hãy thêm
trong tài liệu văn bản HTML Notepad của bạn giữa các thẻ.
Như với
thẻ, để lại một khoảng trống giữa chúng để bạn có chỗ để thêm thông tin đầu.
05/07
Thêm tiêu đề trang vào phần đầu
Tiêu đề của trang web của bạn là văn bản hiển thị trong cửa sổ trình duyệt. Nó cũng là những gì được viết trong bookmark và yêu thích khi ai đó lưu trang web của bạn. Lưu trữ văn bản tiêu đề giữa
thẻ usingtags. Nó sẽ không xuất hiện trên chính trang web, chỉ ở đầu trình duyệt.
Trang ví dụ này có tiêu đề "McKinley, Shasta và các vật nuôi khác".
McKinley, Shasta và các vật nuôi khác
Việc tiêu đề của bạn kéo dài bao lâu hoặc nếu nó kéo dài nhiều dòng trong HTML của bạn, nhưng các tiêu đề ngắn hơn sẽ dễ đọc hơn và một số trình duyệt sẽ cắt bớt các tiêu đề dài hơn trong cửa sổ trình duyệt.
06 trên 07
Cơ thể chính của trang web của bạn
Nội dung trang web của bạn được lưu trữ trong
thẻ. Đây là nơi bạn đặt văn bản, tiêu đề, tiêu đề phụ, hình ảnh và đồ họa, liên kết và tất cả nội dung khác. Nó có thể miễn là bạn thích.
Cùng một định dạng này có thể được theo sau để viết trang web của bạn trong Notepad.
Đầu tiêu đề của bạn ở đâyTất cả mọi thứ trên trang web đều có ở đây
07/07
Tạo thư mục hình ảnh
Trước khi bạn thêm nội dung vào phần nội dung của tài liệu HTML, bạn cần phải thiết lập các thư mục để có thư mục cho hình ảnh.
- Mở cửa sổ My Documents .
- Thay đổi thư mục my_website .
- Nhấp vào Tệp > Mới > Thư mục.
- Đặt tên cho hình ảnh thư mục.
Lưu trữ tất cả hình ảnh của bạn cho trang web của bạn trong thư mục hình ảnh để bạn có thể tìm thấy chúng sau này. Điều này giúp bạn dễ dàng tải chúng lên khi cần.
01 trên 10
Tạo CSS Style Sheet
Cũng giống như cách chúng ta tạo một tệp văn bản riêng cho HTML, bạn sẽ tạo một tệp văn bản cho CSS. Nếu bạn cần hình ảnh cho quá trình này, vui lòng xem hướng dẫn đầu tiên. Dưới đây là các bước để tạo bảng định kiểu CSS của bạn trong Notepad:
- Chọn Tệp> Mới trong Notepad để có cửa sổ trống
- Lưu tệp dưới dạng CSS bằng cách nhấp vào Tệp
- Điều hướng đến thư mục my_website trên ổ cứng của bạn
- Thay đổi "Lưu dưới dạng:" thành "Tất cả tệp"
- Đặt tên tệp là "styles.css" [bỏ dấu ngoặc kép] và nhấp vào Lưu
02 trên 10
Liên kết CSS Style Sheet với HTML của bạn
Khi bạn đã có một bảng định kiểu cho trang Web của mình, bạn sẽ cần phải liên kết nó với trang Web. Để làm điều này bạn sử dụng thẻ liên kết. Đặt thẻ liên kết sau vào bất kỳ vị trí nào trong các thẻ trong tài liệu pets.htm của bạn:
03 trên 10
Sửa Lề trang
Khi bạn viết XHTML cho các trình duyệt khác nhau, một điều bạn sẽ học là tất cả chúng đều có lề và quy tắc khác nhau về cách chúng hiển thị mọi thứ. Cách tốt nhất để đảm bảo rằng trang web của bạn trông giống nhau trong hầu hết các trình duyệt là không cho phép những thứ như lề để mặc định cho lựa chọn trình duyệt.
Tôi thích để bắt đầu các trang của tôi ở góc trên bên trái, không có thêm đệm hoặc lề xung quanh văn bản. Ngay cả khi tôi sắp xếp các nội dung, tôi đặt lề thành 0 để tôi bắt đầu với cùng một phiến đá trống. Để thực hiện việc này, thêm phần sau vào tài liệu styles.css của bạn:
html, body { lề: 0px; padding: 0px; đường viền: 0px; trái: 0px; trên cùng: 0px;}
04 trên 10
Thay đổi phông chữ trên trang
Phông chữ thường là thứ đầu tiên bạn muốn thay đổi trên một trang Web. Phông chữ mặc định trên một trang Web có thể xấu xí, và thực sự là lên trình duyệt Web, vì vậy nếu bạn không xác định phông chữ, bạn thực sự sẽ không biết trang của bạn sẽ trông như thế nào.
Thông thường, bạn sẽ thay đổi phông chữ trên các đoạn văn hoặc đôi khi trên toàn bộ tài liệu. Đối với trang web này, chúng tôi sẽ xác định phông chữ ở cấp tiêu đề và đoạn văn. Thêm tài liệu sau vào tài liệu styles.css của bạn:
p, li { phông chữ: 1em Arial, Helvetica, sans-serif; } h1 { phông chữ: 2em Arial, Helvetica, sans-serif; } h2 { phông chữ: 1.5em Arial, Helvetica, sans-serif; } h3 { phông chữ: 1.25em Arial, Helvetica, sans-serif;}
Tôi bắt đầu với 1em làm kích thước cơ sở của tôi cho các đoạn văn và các mục danh sách, sau đó sử dụng nó để đặt kích thước cho các tiêu đề của tôi. Tôi không mong đợi để sử dụng một tiêu đề sâu hơn h4, nhưng nếu bạn có kế hoạch để bạn sẽ muốn phong cách nó là tốt.
05 trên 10
Làm cho các liên kết của bạn thú vị hơn
Các màu mặc định cho các liên kết là màu xanh lam và màu tím cho các liên kết chưa được truy cập và truy cập tương ứng. Mặc dù đây là tiêu chuẩn, nhưng nó có thể không phù hợp với bảng màu của các trang của bạn, vì vậy hãy thay đổi nó. Trong tệp styles.css của bạn, hãy thêm thông tin sau:
đường dẫn { họ phông chữ: Arial, Helvetica, sans-serif; màu sắc: # FF9900; text-decoration: gạch dưới; } a: đã ghé thăm { màu: # FFCC66; } a: hover { nền: #FFFFCC; font-weight: bold;}
Tôi thiết lập ba kiểu liên kết, liên kết a: là mặc định, a: được truy cập khi nó được truy cập, tôi thay đổi màu và a: hover. Với một: hover Tôi có liên kết có được một màu nền và đi đậm để nhấn mạnh đó là một liên kết được nhấp vào.
06 trên 10
Tạo kiểu cho phần điều hướng
Vì chúng ta đặt phần navigation [id = "nav"] đầu tiên trong HTML, hãy tạo kiểu cho nó trước. Chúng ta cần phải cho biết nó rộng như thế nào và đặt một lề rộng hơn ở phía bên phải để các văn bản chính sẽ không va chạm với nó. Tôi cũng đặt một đường viền xung quanh nó.
Thêm CSS sau vào tài liệu styles.css của bạn:
#nav { chiều rộng: 225px; lề phải: 15px; border: medium solid # 000000; } #nav li { kiểu danh sách: none; } .footer { kích thước phông chữ: .75em; rõ ràng: cả hai; chiều rộng: 100%; text-align: center;}
Thuộc tính kiểu danh sách thiết lập danh sách bên trong phần điều hướng để không có dấu đầu dòng hoặc số và phần .footer tạo phần bản quyền để nhỏ hơn và được căn giữa trong phần.
07 trên 10
Định vị phần chính
Bằng cách định vị phần chính của bạn với vị trí tuyệt đối, bạn có thể chắc chắn rằng nó sẽ ở chính xác nơi bạn muốn nó ở lại trên trang Web của bạn. Tôi đã làm cho tôi rộng 800px để chứa các màn hình lớn hơn, nhưng nếu bạn có một màn hình nhỏ hơn, bạn có thể muốn làm cho nó hẹp hơn.
Đặt thông tin sau vào tài liệu styles.css của bạn:
#chủ yếu { chiều rộng: 800px; trên cùng: 0px; vị trí: tuyệt đối; trái: 250px;}
08 trên 10
Tạo kiểu cho đoạn của bạn
Vì tôi đã đặt phông chữ ở trên, tôi muốn cung cấp cho mỗi đoạn thêm một chút "đá" để làm cho nó nổi bật hơn. Tôi đã làm điều này bằng cách đặt một đường viền ở trên cùng để làm nổi bật đoạn văn nhiều hơn chỉ là hình ảnh một mình.
Đặt thông tin sau vào tài liệu styles.css của bạn:
.dòng trên cùng { border-top: dày đặc # FFCC00;}
Tôi quyết định làm nó như một lớp được gọi là "topline" thay vì chỉ định nghĩa tất cả các đoạn văn theo cách đó. Bằng cách này, nếu tôi quyết định tôi muốn có một đoạn mà không có dòng màu vàng trên cùng, tôi có thể chỉ cần bỏ qua class = "topline" trong thẻ đoạn và nó sẽ không có đường viền trên cùng.
09 trên 10
Tạo hình ảnh
Hình ảnh thường có đường viền xung quanh, điều này không phải lúc nào cũng hiển thị trừ khi hình ảnh là một liên kết, nhưng tôi muốn có một lớp trong biểu định kiểu CSS của tôi tự động tắt biên giới. Đối với biểu định kiểu này, tôi đã tạo lớp "noborder" và hầu hết các hình ảnh trong tài liệu là một phần của lớp này.
Phần đặc biệt khác của những hình ảnh này là vị trí của chúng trên trang. Tôi muốn họ là một phần của đoạn văn mà họ đang ở mà không cần sử dụng các bảng để sắp xếp chúng. Cách đơn giản nhất để làm điều này là sử dụng thuộc tính CSS nổi.
Đặt thông tin sau vào tài liệu styles.css của bạn:
#main img { float: trái; lề phải: 5px; margin-bottom: 15px; } .noborder { border: 0px none;}
Như bạn có thể thấy, cũng có các thuộc tính lề được đặt trên các hình ảnh, để đảm bảo rằng chúng không bị đập vỡ đối với văn bản được thả nổi bên cạnh chúng trong các đoạn văn.
10 trên 10
Bây giờ hãy nhìn vào trang đã hoàn thành của bạn
Khi bạn đã lưu CSS của mình, bạn có thể tải lại trang pets.htm trong trình duyệt Web của mình. Trang của bạn sẽ trông giống như trang được hiển thị trong ảnh này, với các hình ảnh được căn chỉnh và điều hướng được đặt chính xác ở phía bên trái của trang.
Thực hiện theo các bước tương tự này cho tất cả các trang nội bộ của bạn cho trang web này. Bạn muốn có một trang cho mỗi trang trong điều hướng của mình.