Mục lục:
- Bước 1: Sử dụng Notepad
- Bước 2: Thêm cây tài liệu HTML cơ bản
- Bước 3: Lưu dưới dạng trang.html
- Bước 4: Thêm tiêu đề vào trang web của bạn
- Bước 5: Thêm nội dung vào trang web của bạn
- Chào mừng đến với trang web của tôi
- Bước 6: Xem những thay đổi của chúng tôi từ trước đến nay
- Bước 7: Thêm thẻ đoạn văn
- Chào mừng đến với trang web của tôi
- Bước 8: Cung cấp cho nó một số màu
- Chào mừng đến với trang web của tôi
- Bước 9: Thêm ảnh
- Chào mừng đến với trang web của tôi
- Bước 10: Xem sản phẩm cuối cùng
Video: Trang web của Bare Bones: 10 bước
2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:35
Hôm nay chúng ta sẽ tạo một trang web rất đơn giản, hoàn toàn từ đầu. Chúng ta sẽ nói về các phần tử HTML, tạo kiểu cho trang web của bạn (màu sắc, phông chữ, căn chỉnh, v.v.), và cuối cùng là cách chèn hình ảnh vào trang web của bạn!
Khi kết thúc phần hướng dẫn này, bạn sẽ có các kỹ năng cơ bản để tạo một trang web từ đầu và khám phá ra rằng việc viết mã không khó như bạn tưởng tượng!
Bước 1: Sử dụng Notepad
Chúng tôi sẽ sử dụng Notepad trên windows để tạo trang web đầu tiên của chúng tôi. Mặc dù bất kỳ trình soạn thảo văn bản nào cũng vậy, notepad được cài đặt sẵn trên các máy Windows nên đây là một điểm khởi đầu tuyệt vời.
Để mở notepad, hãy chuyển đến thanh tìm kiếm ở góc dưới cùng bên trái của màn hình và nhập "Notepad". Sau đó chọn ứng dụng "Notepad" xuất hiện trong kết quả tìm kiếm. Một cửa sổ mới sẽ mở ra.
Bước 2: Thêm cây tài liệu HTML cơ bản
Tất cả các trang web phải tuân theo cấu trúc khung chuẩn để trình duyệt web của bạn (Chrome, Firefox, Edge, Internet Explorer, Safari…) xử lý và hiển thị trang web của bạn.
Đây được gọi là cây tài liệu html. Trong Notepad, nhập "phần tử" hoặc "thẻ" html như được hiển thị trong ảnh chụp màn hình. Hãy sao chép và dán:
Bước 3: Lưu dưới dạng trang.html
Bây giờ chúng ta đã có cấu trúc html cơ bản của mình trong Notepad, hãy lưu nó để không mất bất kỳ công việc nào và để chúng ta có thể thấy các thay đổi của mình khi chúng ta tiến hành theo hướng dẫn.
- Chọn 'Tệp'> 'Lưu dưới dạng…' (Ảnh chụp màn hình 1)
- Thay đổi Loại tệp thành 'Tất cả các tệp' (Ảnh chụp màn hình 2)
- Đặt tên cho tệp của bạn theo lựa chọn của bạn. Hãy nhớ ghi lại nơi bạn đang lưu tài liệu trên máy tính của mình để bạn có thể mở nó sau này. LƯU Ý: Phần quan trọng nhất của việc lưu tệp này là thêm ".html" vào cuối tên tệp. Điều này sẽ cho phép máy tính của bạn nhận ra nó là một trang web. Vì vậy, nếu bạn muốn đặt tên tệp của mình là "my_webpage", hãy đảm bảo thêm.html vào cuối tệp đó, ví dụ: "my_webpage.html"
Bước 4: Thêm tiêu đề vào trang web của bạn
Vì vậy, chúng tôi có cấu trúc html cơ bản cần thiết cho các trình duyệt web để giải thích và hiển thị trang web của chúng tôi, nhưng chúng tôi không có bất kỳ nội dung nào. Hãy thay đổi điều đó!
Điều đầu tiên chúng ta nên làm là đặt một Tiêu đề cho trang web của chúng ta. Hầu hết tất cả các trang web đều có tiêu đề. Đây là những gì hiển thị trên tab trong trình duyệt web của bạn (xem ảnh chụp màn hình). Tôi sẽ đặt trang web của mình với tiêu đề "Trang web của Taylor". Để làm điều này, chúng ta cần thêm phần tử 'tiêu đề'.
Trang web của Taylor
Tại thời điểm này, bạn sẽ nhận thấy rằng mọi thẻ đều có thẻ "mở" và thẻ "đóng". Nhu la
và.
Điều này là để phân biệt nơi tiêu đề bắt đầu và nơi nó kết thúc. Hầu hết tất cả các thẻ html đều tuân theo điều này, tuy nhiên có một số trường hợp ngoại lệ.
Bước 5: Thêm nội dung vào trang web của bạn
Chà, chúng tôi có Tiêu đề cho trang web của mình, nhưng chúng tôi vẫn không có bất kỳ nội dung thực sự nào cho nó. Hãy thêm một số tinh tế!
Chúng tôi đã thêm tiêu đề vào trang web của mình bằng phần tử 'tiêu đề'. Hãy tạo cho trang web của chúng ta một tiêu đề lớn, thu hút sự chú ý bằng cách sử dụng phần tử 'h1' là phần tử tiêu đề.
Trang web của Taylor
Chào mừng đến với trang web của tôi
Bước 6: Xem những thay đổi của chúng tôi từ trước đến nay
Chúng tôi có một tiêu đề, chúng tôi có một số nội dung, hãy kiểm tra trang web của chúng tôi để xem nó đến như thế nào.
- Lưu tệp của bạn trong notepad
- Đi đến nơi bạn đã lưu tệp của mình và nhấp đúp vào nó. Nó sẽ tự động mở trong trình duyệt web mặc định của bạn. Trông được!
Bước 7: Thêm thẻ đoạn văn
Chúng ta có một tiêu đề, một tiêu đề, bây giờ chúng ta hãy thêm một đoạn văn với một số văn bản nữa. Tên phần tử cho một đoạn văn là 'p'. Bạn có thể thấy nó được sử dụng bên dưới:
Trang web của Taylor
Chào mừng đến với trang web của tôi
Hôm nay chúng ta sẽ học cách tạo trang web vô cùng đơn giản này nhé!
Lưu ý: Bạn có thể xem các thay đổi của mình bất kỳ lúc nào bạn muốn bằng cách lưu notepad và mở tệp.
Bước 8: Cung cấp cho nó một số màu
Chúng tôi có trang web của chúng tôi đang hoạt động, nhưng nó khá đơn giản. Hãy tô màu cho thẻ đoạn văn của chúng ta!
Chúng tôi có thể tô màu các phần tử khác nhau bằng cách thêm thuộc tính 'style' vào thẻ 'p' như chi tiết bên dưới:
Trang web của Taylor
Chào mừng đến với trang web của tôi
Hôm nay chúng ta sẽ học cách tạo một trang web vô cùng đơn giản này nhé!
Bước 9: Thêm ảnh
Trang web không có hình ảnh là gì? Hãy thêm một hình ảnh vào trang web của chúng tôi!
Bước đầu tiên là tìm một hình ảnh mà bạn thích. Tôi đã sử dụng google hình ảnh để tìm kiếm một chú chó săn vàng. Kéo hình ảnh lên và đảm bảo rằng url kết thúc bằng.jpg,.png,.gif,.jpg, v.v.
Khi bạn đã chọn hình ảnh của mình, chúng tôi cần thêm nó vào trang html bằng thẻ 'img'. Hình ảnh của tôi là:
Thêm nó vào trang của bạn bằng thẻ 'img' với thuộc tính 'src':
Trang web của Taylor
Chào mừng đến với trang web của tôi
Hôm nay chúng ta sẽ học cách tạo một trang web vô cùng đơn giản này nhé!
Bước 10: Xem sản phẩm cuối cùng
Lưu tệp notepad và mở sản phẩm cuối cùng. Bạn sẽ thấy trang web của mình!
Đề xuất:
Android Home (điều khiển Trang chủ của bạn từ Điện thoại của bạn): 4 bước
Android Home (điều khiển Ngôi nhà của bạn Từ Điện thoại của Bạn): Kế hoạch cuối cùng của tôi là để ngôi nhà của tôi trong túi, các công tắc, cảm biến và bảo mật của nó. và sau đó tự động kết hợp nóGiới thiệu: Xin chào Ich bin zakriya và đây là " nhà Android " là dự án của tôi, dự án này là dự án đầu tiên từ bốn tài liệu hướng dẫn sắp tới, Trong
Thiết lập trang web với trình tạo trang của Google: 6 bước
Thiết lập trang web với Trình tạo trang của Google: Cách thiết lập trang web với Trình tạo trang mới của Google Labs. (Cách tạo một trang web 100mb đơn giản miễn phí và có nó trong một buổi chiều.) Bao gồm cách, liên kết trang biểu mẫu với trang, liên kết đến các trang khác, liên kết đến tệp html đã tải lên, bao gồm hình ảnh,
Hợp nhất trang web của bạn (Trình tạo trang của Google) với Picasa trên Anbom dòng: 5 bước
Hợp nhất trang web của bạn (Trình tạo trang của Google) với Picasa trên Anbom dòng: Xin chào, đây là tài liệu hướng dẫn đầu tiên của tôi, hãy tận hưởng nó! tiếp tục với hướng dẫn này Thiết lập một trang web với Trình tạo trang của Google
Thêm một trang web Drupal ảo vào một trang trại Drupal được tách biệt hoàn toàn: 3 bước
Thêm Trang web Drupal Ảo vào Trang trại Drupal được Tách biệt Hoàn toàn: Drupal là Hệ thống Quản lý Nội dung (CMS). Một trong những tính năng nổi bật của nó là dễ dàng quản lý một số trang web từ một cơ sở mã - Trang trại Drupal được ca ngợi rất nhiều
Bare Bones Breadboard Nhãn Arduino: 4 bước
Bare Bones Breadboard Nhãn Arduino: Có thể hướng dẫn này thực sự đơn giản. Tôi đã lấy cảm hứng từ giao diện xương trần uDuino của tymm để tạo bảng mạch cho Arduino, nhưng nghĩ rằng còn thiếu một thứ. Mô tả chân Arduino, D0, D1, A0, A2, v.v., không khớp trực tiếp với ATMeg