웹 페이지에 이미지 추가하기

이미지를 올바르게 표시하기

웹 사이트 HTML에 링크하려는 모든 이미지는 먼저 웹 페이지에 대한 HTML을 보내는 위치와 동일한 위치에 업로드해야합니다. 사이트가 FTP로 연결 되는 웹 서버에서 호스팅되는지 또는 웹 호스팅 서비스를 사용하든 상관 없습니다. 웹 호스팅 서비스를 사용하는 경우 서비스에서 제공하는 업로드 양식을 사용하는 것입니다. 이 양식은 일반적으로 호스팅 계정의 관리 섹션에 있습니다.

이미지를 호스팅 서비스에 업로드하는 것은 첫 번째 단계 일뿐입니다. 그런 다음이를 식별하기 위해 HTML에 태그를 추가해야합니다.

HTML과 같은 디렉토리에 이미지 업로드

사진은 HTML과 동일한 디렉토리에있을 수 있습니다. 그것이 사실 인 경우 :

  1. 이미지를 웹 사이트의 루트에 업로드하십시오.
  2. HTML에서 이미지를 가리 키도록 이미지 태그를 추가하십시오.
  3. HTML 파일을 웹 사이트의 루트에 업로드하십시오.
  4. 웹 브라우저에서 페이지를 열어 파일을 테스트하십시오.

이미지 태그의 형식은 다음과 같습니다.

"lunar.jpg"라는 이름의 달 사진을 업로드한다고 가정하면 이미지 태그의 형식은 다음과 같습니다.

높이와 너비는 선택 사항이지만 권장됩니다. 이미지 태그에는 닫기 태그가 필요하지 않습니다.

다른 문서의 이미지에 연결하는 경우 앵커 태그를 사용하고 내부에 이미지 태그를 중첩시킵니다.

하위 디렉토리에 이미지 업로드

일반적으로 이미지 라고하는 하위 디렉토리에 이미지를 저장하는 것이 더 일반적입니다. 해당 디렉토리의 이미지를 가리 키기 위해서는 웹 사이트 루트와의 관계를 알아야합니다.

웹 사이트의 루트는 끝에 디렉토리가없는 URL입니다. 예를 들어 "MyWebpage.com"이라는 웹 사이트의 경우 루트는 http://MyWebpage.com/ 양식을 따릅니다. 끝에 슬래시가 있음을 알 수 있습니다. 이것은 보통 디렉토리의 루트가 표시되는 방법입니다. 하위 디렉토리에는 디렉토리 구조에 앉아있는 위치를 나타내는 슬래시가 있습니다. MyWebpage 예제 사이트의 구조는 다음과 같습니다.

http://MyWebpage.com/ - 루트 디렉토리 http://MyWebpage.com/products/ - 제품 디렉토리 http://MyWebpage.com/products/documentation/ - 제품 디렉토리 http : // 아래의 문서 디렉토리 MyWebpage.com/images/ - 이미지 디렉토리

이 경우 이미지 디렉토리의 이미지를 가리키면 다음과 같이 작성됩니다.

이것을 이미지의 절대 경로 라고합니다.

표시하지 않는 이미지의 일반적인 문제

웹 페이지에 이미지를 표시하는 것은 처음에는 어려울 수 있습니다. 가장 일반적인 두 가지 이유는 HTML이 가리키는 위치에 이미지가 업로드되지 않았거나 HTML이 잘못 작성된 것입니다.

가장 먼저 할 일은 온라인에서 이미지를 찾을 수 있는지 확인하는 것입니다. 대부분의 호스팅 제공 업체는 이미지 업로드 위치를 확인하는 데 사용할 수있는 관리 도구를 제공합니다. 이미지 URL이 정확하다고 생각되면 브라우저에 이미지 URL을 입력하십시오. 이미지가 나타나면 올바른 위치에 있습니다.

그런 다음 HTML이 해당 이미지를 가리키고 있는지 확인하십시오. 가장 쉬운 방법은 방금 테스트 한 이미지 URL 을 SRC 속성에 붙여 넣는 것입니다. 페이지를 다시 업로드하고 테스트하십시오.

이미지 태그의 SRC 속성은 C : \ 또는 file :로 시작하면 안됩니다 . 이 코드는 컴퓨터에서 웹 페이지를 테스트 할 때 작동하지만 사이트를 방문하는 모든 사용자에게는 깨진 이미지가 표시됩니다. 이것은 C : \가 하드 드라이브의 위치를 ​​가리 키기 때문입니다. 이미지는 하드 드라이브에 있으므로 이미지를 볼 때 표시됩니다.