Cách tạo một trang web chính xác. Tạo một trang HTML trong Notepad: giải thích cho người giả. Tài liệu khóa học từ xa “Công nghệ thông tin và giáo dục”
Hướng dẫn
Sao chép các thẻ bên dưới vào notepad, chúng cần thiết để tạo.
Tiến hành tạo khung trang web. Khung được tạo bằng cách sử dụng bảng html. Bây giờ chúng ta sẽ sử dụng khung sau: tiêu đề ở trên cùng, một dải tương tự ở dưới cùng và trang chính sẽ được chia thành hai nửa. Sao chép mã khung vào notepad của bạn.
| Tiêu đề trang web | |
| Chân trang của trang web |
Chỉ định kích thước ô. Hãy thử tạo các kích thước mà chúng tôi đã chỉ định, sau đó quyết định kích thước nào bạn cần. Nhập kích thước vào mã khung (đây là thông số chiều cao– chiều cao và chiều rộng – chiều rộng).
Chọn đầu trang, nền và chân trang của trang web, dán chúng vào thẻ cần thiết. Hình ảnh được chèn bằng thẻ . Bây giờ dòng chữ “Tiêu đề trang trình bày” và “Chân trang trang web” sẽ biến mất.
Kết nối tất cả các hình ảnh được chèn lại với nhau. Để làm điều này trong thẻ
đến vị trí trong mã nơi có hình minh họa. Thay vì hình ảnh, hãy nhập 
|
ví dụ 1 Hình ảnh nằm trong cùng thư mục với tài liệu HTML (Hình 21). Nghĩa là, hình ảnh và tệp HTML ở cùng cấp độ trong hệ thống tệp và tài liệu HTML có thể đính kèm hình ảnh ngay lập tức. Trong trường hợp này, việc chèn hình ảnh vào trang web sẽ như thế này.
Hình 21 Nhiệm vụ thực tế7 Thực hiện ví dụ 1 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh |
|
Ví dụ 2 Hình ảnh bức ảnh. jpg nằm trong thư mục thư mục_1 . Tài liệu HTML nằm bên ngoài thư mục_1. Những thứ kia. Trong hệ thống tệp của trang web, tài liệu HTML được đặt ở vị trí cao hơn hình ảnh một cấp (Hình 22). Bạn cần nhập thư mục folder_1, sau đó đính kèm hình ảnh
Hình 22 Nhiệm vụ thực tế8 Thực hiện ví dụ 2 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html. |
|
Ví dụ 3 Hình ảnh bức ảnh. jpg nằm trong thư mục thư mục_1 , lần lượt nằm trong thư mục thư mục_2 . Tài liệu HTML nằm bên ngoài các thư mục này (Hình 23). Do đó, tài liệu HTML cao hơn hai cấp độ so với hình ảnh. Cần thiết:
Hình 23 Nhiệm vụ thực tế9 Thực hiện ví dụ 3 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html. |
|
Ví dụ 4 thư mục_1 . Hình ảnh nằm bên ngoài thư mục_1. Những thứ kia. Tài liệu HTML nằm phía dưới hình ảnh một cấp (Hình 24). Bạn cần thoát khỏi thư mục_1, sau đó đính kèm hình ảnh. Để lại một thư mục được chỉ định bởi việc xây dựng ../ (hai dấu chấm và một dấu gạch chéo ở bên phải).
Hình 24 Nhiệm vụ thực tế10 Thực hiện ví dụ 4 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html. |
|
Ví dụ 5 Tài liệu HTML nằm trong thư mục thư mục_1 , lần lượt nằm trong thư mục thư mục_2 . Hình ảnh nằm ngoài các thư mục này. Do đó, tài liệu HTML nằm ở vị trí thấp hơn hình ảnh hai cấp (Hình 25). Cần thiết:
Vì bạn cần thoát hai lần nên thiết kế ../ lặp lại hai lần.
Hình 25 Thực hành 11 Thực hiện ví dụ 5 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html. |
|
Ví dụ 6 (Hình 26) Cần thiết:
Hình 26 Thực hành 12 Thực hiện ví dụ 6 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html. |
|
Ví dụ 7 (Hình 27) Cần thiết:
Vì bạn cần thoát ba lần nên thiết kế ../ lặp lại ba lần.
Hình 27 Thực hành 13 Thực hiện ví dụ 7 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html. Vì vậy, dù bạn cần thoát bao nhiêu lần thì chúng tôi cũng đặt cấu trúc ../ rất nhiều lần và nếu vào thì chúng tôi sẽ liệt kê tên các thư mục gặp phải trên đường đi. |
/
>
/
>
/
>
Thực hành 14
1. Tạo một tài liệu html và chèn một hình ảnh vào đó sao cho đường dẫn đến hình ảnh như sau.
"
../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. Phát triển ví dụ của riêng bạn về việc chèn hình ảnh vào tài liệu html để nó chứa và lối ra từ các thư mục và cổng vào vào các thư mục. Ví dụ này phải khác với tất cả các ví dụ trên.
Sau khi hoàn thành chủ đề này, bạn sẽ có các tệp sau được tạo:
- mẫu.html
- chính.html
- spisok_vlozh.html
- bên trong thư mụcNgôi nhà của tôinên có một thư mụccông cộng_ htmlvới các tập tin của trang web trong tương lai
- bảy ví dụ về địa chỉ tương đối và hai ví dụ kiểm soát từ bài tập thực hành 14
Trước khi bắt đầu hành trình qua các bài học xây dựng trang web HTML và CSS, điều quan trọng là phải hiểu sự khác biệt giữa hai ngôn ngữ, cú pháp của từng ngôn ngữ và một số thuật ngữ cơ bản.
HTML và CSS là gì?
HTML (Ngôn ngữ đánh dấu siêu văn bản) xác định cấu trúc nội dung và ý nghĩa của nó, xác định nội dung như tiêu đề, đoạn văn hoặc hình ảnh. CSS (Cascading Style Sheets) là ngôn ngữ trình bày được tạo để tạo kiểu cho giao diện của nội dung, chẳng hạn như sử dụng phông chữ hoặc màu sắc.
Hai ngôn ngữ này - HTML và CSS - độc lập với nhau và sẽ vẫn như vậy. CSS không nên được viết bên trong tài liệu HTML và ngược lại. Theo nguyên tắc chung, HTML sẽ luôn thể hiện nội dung và CSS sẽ luôn xác định kiểu dáng.
Với sự hiểu biết về sự khác biệt giữa HTML và CSS, hãy đi sâu vào HTML chi tiết hơn.
Điều khoản HTML cơ bản
Trước khi bắt đầu làm việc với HTML, bạn có thể sẽ gặp một số thuật ngữ mới và thường là lạ. Bạn sẽ trở nên quen thuộc hơn với tất cả chúng theo thời gian, nhưng bây giờ bạn nên bắt đầu với ba thuật ngữ HTML cơ bản - thành phần, thẻ và thuộc tính.
Yếu tố
Các phần tử xác định cách xác định cấu trúc và nội dung của các đối tượng trên một trang. Một số phần tử thường được sử dụng bao gồm nhiều cấp độ tiêu đề (được định nghĩa là các phần tử có
trước ) và các đoạn văn (được định nghĩa là
); Bạn có thể bao gồm các phần tử trong danh sách
, Các phần tử được xác định bằng dấu ngoặc nhọn<>, bao quanh tên phần tử. Vì vậy, phần tử sẽ trông như thế này: Thêm dấu ngoặc nhọn< и >tạo ra cái được gọi là thẻ xung quanh phần tử. Thẻ thường xuất hiện theo cặp thẻ mở và đóng. Thẻ mở đánh dấu sự bắt đầu của phần tử. Nó bao gồm một biểu tượng<, затем идёт имя элемента и завершается символом >; Ví dụ, Thẻ đóng đánh dấu sự kết thúc của phần tử. Nó bao gồm một biểu tượng< с последующей косой чертой и именем элемента и завершается символом >; Ví dụ, Nội dung xuất hiện giữa thẻ mở và thẻ đóng chính là nội dung của phần tử đó. Ví dụ: một liên kết sẽ có thẻ mở và thẻ đóng. Giữa hai thẻ này sẽ là nội dung của liên kết. Vì vậy, các thẻ liên kết sẽ trông giống như thế này: Thuộc tính là các thuộc tính được sử dụng để cung cấp thông tin bổ sung về một phần tử. Các thuộc tính phổ biến nhất bao gồm thuộc tính id, xác định phần tử; thuộc tính lớp, phân loại phần tử; thuộc tính src chỉ định nguồn của nội dung được nhúng; và thuộc tính href, chỉ định liên kết đến tài nguyên được liên kết. Các thuộc tính được xác định trong thẻ mở sau tên phần tử. Nói chung, các thuộc tính bao gồm tên và giá trị. Định dạng cho các thuộc tính này bao gồm tên thuộc tính theo sau là dấu bằng và sau đó là giá trị thuộc tính trong dấu ngoặc kép. Ví dụ, phần tử với thuộc tính href sẽ trông như thế này: Shay Howe Mã này sẽ hiển thị dòng chữ "Shay Howe" trên một trang web và khi nhấp vào dòng chữ này sẽ đưa người dùng đến http://shayhowe.com. Phần tử liên kết được khai báo bằng thẻ mở và thẻ đóng bao gồm văn bản, cũng như thuộc tính và giá trị của địa chỉ liên kết được khai báo qua href="http://shayhowe.com" trong thẻ mở. Cơm. 1,01. Cú pháp HTML ở dạng phác thảo bao gồm phần tử, thuộc tính và thẻ Bây giờ bạn đã biết các thành phần, thẻ và thuộc tính HTML là gì, hãy xem trang web đầu tiên của chúng ta. Nếu có điều gì đó mới mẻ ở đây, đừng lo lắng - chúng tôi sẽ chia nhỏ nó khi chúng tôi tiếp tục. Tài liệu HTML là tài liệu văn bản đơn giản được lưu với phần mở rộng .html thay vì .txt. Để bắt đầu viết HTML, trước tiên bạn cần một trình soạn thảo văn bản mà bạn cảm thấy thoải mái khi sử dụng. Thật không may, điều này không bao gồm Microsoft Word hoặc Pages, vì đây là những trình soạn thảo phức tạp. Hai trình soạn thảo văn bản phổ biến nhất để viết HTML và CSS là Dreamweaver và Sublime Text. Các lựa chọn thay thế miễn phí cũng bao gồm Notepad++ cho Windows và TextWrangler cho Mac. Tất cả tài liệu HTML đều chứa cấu trúc bắt buộc, bao gồm các khai báo và thành phần sau:
,
, Khai báo loại tài liệu hoặcnằm ở phần đầu của tài liệu HTML và cho trình duyệt biết phiên bản HTML nào đang được sử dụng. Vì chúng tôi sẽ sử dụng phiên bản HTML mới nhất nên loại tài liệu của chúng tôi sẽ đơn giản là. Sau đó là phần tử cho biết sự bắt đầu của một tài liệu. Bên trong yếu tố Tất cả nội dung hiển thị của trang web sẽ được chứa trong phần tử
Đây là một trang web. Mã này hiển thị tài liệu, bắt đầu bằng phần khai báo loại tài liệu,, sau đó ngay lập tức có phần tử . Bên trong các yếu tố đang đến Đã đến lúc kiểm tra công việc của chúng tôi và xem HTML và CSS của chúng tôi phối hợp với nhau như thế nào. Việc mở tệp index.html (hoặc làm mới trang nếu nó đã mở) trong trình duyệt sẽ hiển thị kết quả hơi khác so với trước đây. Cơm. 1.04. Trang web Hội nghị về Phong cách của chúng tôi có cài đặt lại CSS Dưới đây bạn có thể xem trang web Styles Conference ở trạng thái hiện tại cũng như tải xuống mã nguồn hiện tại của trang web. Vì vậy, mọi thứ đều ổn! Chúng tôi đã thực hiện một số bước quan trọng trong hướng dẫn này. Nghĩ mà xem, bây giờ bạn đã biết những điều cơ bản về HTML và CSS. Khi chúng tôi tiếp tục và bạn dành nhiều thời gian hơn để viết HTML và CSS, bạn sẽ cảm thấy thoải mái hơn nhiều khi làm việc với hai ngôn ngữ này. Để tóm tắt lại, chúng tôi đã đề cập đến những điều sau: Bây giờ chúng ta hãy xem xét kỹ hơn về HTML và làm quen một chút với ngữ nghĩa.Thẻ
Thuộc tính
Trình diễn các thuật ngữ HTML cơ bản
Tùy chỉnh cấu trúc tài liệu HTML
Chào thế giới!
Trình diễn cấu trúc tài liệu HTML
Demo và mã nguồn
Bản tóm tắt
Tài nguyên và liên kết
