HTML의 이미지에 대한 링크 추가

작가: Christy White
창조 날짜: 12 할 수있다 2021
업데이트 날짜: 1 칠월 2024
Anonim
#17.이미지 링크와 이미지 맵 / HTML/CSS 기초 강의
동영상: #17.이미지 링크와 이미지 맵 / HTML/CSS 기초 강의

콘텐츠

한 줄의 HTML 코드로 거의 모든 웹 사이트에 클릭 가능한 이미지를 추가 할 수 있습니다. 이 작업을 수행하려면 두 가지가 필요합니다. 이미지의 URL과 웹 사이트의 URL이 필요합니다.

단계로

2 가지 방법 중 1 : HTML 코드 작성

  1. HTML 파일을 만듭니다. 텍스트 편집기를 열고 새 파일을 만듭니다. 파일을 index.html로 저장합니다.
      • Windows (메모장) 및 Mac OS X (TextEdit)의 간단한 텍스트 편집기를 포함하여 원하는 텍스트 편집기를 사용할 수 있습니다.
      • HTML 작업용 텍스트 편집기를 사용하려면 여기를 클릭하여 Windows, Mac OS X 및 Linux 용 텍스트 편집기 인 Atom을 다운로드하십시오.
      • 텍스트 편집기를 사용하는 경우 HTML 파일을 만들기 전에 서식 메뉴를 클릭 한 다음 일반 텍스트 만들기를 클릭합니다. 이 설정은 HTML 파일이 웹 브라우저에서 올바르게로드되도록합니다.
      • Microsoft Word와 같은 워드 프로세서는 HTML 파일을 손상시키고 웹 브라우저에 잘못 표시 될 수있는 보이지 않는 문자와 서식을 추가하기 때문에 HTML 작성에 적합하지 않습니다.
  2. 표준 HTML 코드를 복사하여 붙여 넣습니다. 아래 HTML 코드를 선택하여 복사 한 후 열린 index.html에 붙여 넣으십시오.

    a href = "target url"> img src = "이미지 URL"/> / a>

  3. 이미지의 URL을 찾으십시오. 웹에서 이미지를 찾아 마우스 오른쪽 버튼으로 클릭 한 다음 (브라우저에 따라) 이미지 URL 복사, 이미지 주소 복사 또는 이미지 위치 복사를 클릭합니다.
      • Firefox 및 Internet Explorer는 이미지 위치 복사를 사용합니다. Chrome은 이미지 URL 복사를 사용합니다. Safari는 이미지 주소 복사를 사용합니다.
  4. 이미지의 URL을 추가하십시오. index.html 파일에서 마우스로 이미지의 URL을 클릭하고 끌어서 선택한 다음 CTRL + V를 눌러 URL을 붙여 넣습니다.
  5. 대상 URL을 추가하십시오. index.html에서 대상 URL 삭제 및 유형 https://www.startpage.com.
      • 모든 URL을 대상 URL로 사용할 수 있습니다.
  6. HTML 파일을 저장하십시오.
  7. 웹 브라우저에서 HTML 파일을 엽니 다. index.html을 마우스 오른쪽 버튼으로 클릭 한 다음 원하는 웹 브라우저에서이 파일을 엽니 다.
      • 브라우저가 열리지 만 이미지가 보이지 않는 경우 index.html 파일에서 이미지 파일 이름을 올바르게 입력했는지 확인하십시오.
      • 브라우저가 열리지 만 배경 이미지 대신 HTML 코드가 표시되면 index.html이 .rtf 파일 (서식있는 텍스트 파일)로 저장됩니다. 다른 텍스트 편집기에서 HTML 파일을 편집 해보십시오.

2 가지 방법 중 2 : HTML 코드 이해

  1. 앵커 태그를 이해합니다. HTML 코드는 열기 및 닫기 태그로 구성됩니다. a href = ""> 태그는 시작 태그이고 / a>는 종료 태그입니다. 이를 앵커 태그라고하며 웹 페이지에 링크를 추가하는 데 사용됩니다.
    • 그만큼 링크를 만들도록 브라우저에 지시합니다. 그만큼 href HTML 참조의 약어입니다. = 브라우저에 모든 것을 변경하도록 지시합니다. ’ ’ 링크를 만듭니다. 두 인용 부호 사이에 모든 URL을 넣을 수 있습니다.
    • 그만큼 / a> 앵커 태그가 닫 혔음을 브라우저에 알립니다.
    • 사이에 텍스트를 추가 할 때 a href = "">/ a> 해당 텍스트는 웹 페이지에서 클릭 가능한 링크가됩니다. 예를 들면 : a href = "https://www.google.com"> Google / a> Google에 대한 링크를 만듭니다.
  2. 이미지 태그를 이해하십시오. img> 태그는 닫힌 태그입니다. img src = ""/> 또는 img src = ""> / img>로 닫을 수 있습니다.
    • 그만큼 img 태그는 브라우저에 이미지를 표시하도록 지시합니다. 그만큼 src source, de의 약어입니다. = 브라우저에 사이의 모든 것을 삭제하도록 지시합니다. ’ ’ 해당 위치에서 이미지를 검색합니다.
    • 그만큼 /> 브라우저에 이미지 태그를 닫도록 지시합니다.
    • 예 : {samp [}는 해당 URL에서 이미지를 가져온 다음 웹 브라우저에 표시합니다.
  3. 이 코드는 어디에서나 사용하십시오. 이제이 코드를 알았으니 a href = "target url"> img src = "이미지 URL"/> / a> HTML 코드를 사용하여 모든 웹 페이지에 클릭 가능한 이미지를 추가합니다.