Mọi thứ mà khách truy cập nhìn thấy trên các trang của trang web đều được trình duyệt hiển thị dựa trên các hướng dẫn chi tiết do máy chủ gửi cho anh ta. Các hướng dẫn này được gọi là mã html của trang và được tạo thành từ các "thẻ" riêng biệt mô tả loại, hình thức và vị trí của từng phần tử riêng lẻ. Để đặt bất kỳ phần tử mới nào (ví dụ: một hình ảnh) vào một trang, bạn cần thêm một hướng dẫn tương ứng - một thẻ - vào mã nguồn của nó. Hãy xem xét cách dễ nhất để làm điều này.
Hướng dẫn
Bước 1
Nếu bạn sử dụng bất kỳ loại hệ thống quản lý nội dung nào, thì rất có thể nó bao gồm một trình chỉnh sửa trang. Đầu tiên, bạn cần mở trang mong muốn trong trình chỉnh sửa này. Hơn nữa - các tùy chọn là có thể. Trong trường hợp tốt nhất, trình chỉnh sửa trang sẽ có một "chế độ trực quan", hay nói cách khác - "chế độ WYSIWYG" (What You See Is What You Get - "những gì bạn thấy là những gì bạn nhận được"). Trong chế độ này, bạn sẽ không cần phải xử lý mã html gốc nữa! Trang trong trình chỉnh sửa sẽ giống như trên trang web, chỉ cần chọc chuột vào vị trí mong muốn và nhấn nút "chèn hình ảnh" trên bảng chỉnh sửa là đủ.
Bước 2
Kết quả là, một hộp thoại sẽ mở ra, trong đó bạn cần chọn hình ảnh mong muốn. Nếu bạn chưa tải lên, cũng có một nút để chọn ảnh trên máy tính của bạn và tải nó lên máy chủ. Ngoài ra, trong hộp thoại này, bạn có thể thiết lập màu sắc và chiều rộng của khung xung quanh hình ảnh, khoảng cách và màu tô giữa khung và hình ảnh, văn bản cho chú giải công cụ. Ở đây không nhất thiết phải ghi rõ kích thước, nhưng vì lý do tăng tốc độ tải trang và để tránh làm biến dạng thiết kế, nên làm điều này vẫn tốt hơn. Khi tất cả các trường bắt buộc của hộp thoại được điền vào, hãy nhấp vào "OK" và sau đó lưu trang đã chỉnh sửa.
Bước 3
Do thực tế là không có tiêu chuẩn duy nhất cho hệ thống điều khiển, quy trình chèn hình ảnh vào chế độ trực quan của hệ thống của bạn có thể hơi khác một chút, nhưng nguyên tắc sẽ giống nhau. Vì lý do tương tự, chế độ WYSIWYG có thể không xuất hiện trong hệ thống quản lý trang web của bạn. Sau đó, bạn vẫn phải chỉnh sửa mã nguồn của trang bằng HTML (HyperText Markup Language - "ngôn ngữ đánh dấu siêu văn bản"). Bạn sẽ cần phải chèn một thẻ vào đúng vị trí trong mã yêu cầu trình duyệt hiển thị hình ảnh ở đây. Ở dạng đơn giản nhất, nó sẽ giống như sau: Đây là "địa chỉ tương đối" của hình ảnh - tại địa chỉ này, trình duyệt sẽ liên hệ với máy chủ để lấy tệp hình ảnh từ đó. Nếu địa chỉ là tương đối, thì trình duyệt sẽ cho rằng tệp nằm trong cùng một thư mục máy chủ với chính trang đó (hoặc trong một thư mục con). Tuy nhiên, để không bị nhầm lẫn, tốt hơn là nên chỉ định "địa chỉ tuyệt đối" - ví dụ như thế này: Đương nhiên, để máy chủ tìm và gửi hình ảnh đến trình duyệt, nó nên được tải lên địa chỉ đã chỉ định. địa điểm. Cách dễ nhất để làm điều này là thông qua trình quản lý tệp, có trong mọi hệ thống quản lý nội dung, cũng như trong bảng điều khiển của công ty lưu trữ của bạn. Bạn cũng có thể thực hiện việc này bằng giao thức FTP (File Transfer Protocol - "giao thức truyền tệp"), sử dụng một chương trình đặc biệt - FTP-client. Có rất nhiều trong số chúng, cả trả phí và miễn phí - ví dụ như Cute FTP, FlashFXP, WS FTP, v.v. Nhưng tất nhiên, việc cài đặt, làm chủ và cấu hình chương trình sẽ mất thời gian, vì vậy trình quản lý tệp để tải xuống mọi thứ bạn cần thông qua trình duyệt là một lựa chọn dễ dàng hơn.
Bước 4
Ngoài địa chỉ trong thẻ html của hình ảnh, bạn có thể chỉ định thông tin bổ sung - "thuộc tính" của thẻ. Ví dụ: thuộc tính alt="Hình ảnh" chứa văn bản cho chú giải công cụ bật lên khi bạn di con trỏ chuột qua hình ảnh: Nó có thể được thay thế bằng thuộc tính - title: - Kích thước của hình chữ nhật mà trình duyệt phải Hiển thị hình ảnh được thiết lập bởi các thuộc tính chiều rộng và chiều cao: - Thuộc tính đường viền chỉ định chiều rộng của đường viền xung quanh hình ảnh (tính bằng pixel): Nếu hình ảnh được tạo liên kết, trình duyệt sẽ vẽ một đường viền màu xanh xung quanh nó. Để loại bỏ nó, hãy đặt giá trị đường viền thành 0: - Hai thuộc tính còn lại chứa thông tin về lượng thụt lề của hình ảnh từ các phần tử liền kề (từ các dòng văn bản, các hình ảnh khác, v.v.) - hspace đặt kích thước của thụt lề theo chiều ngang (trái và phải), vspace - theo chiều dọc (dưới cùng và trên cùng):
