일부 웹사이트에서 일부 그래픽 및 이미지 특수 효과 코드를 복사한 후 사진이 표시되지 않는 등의 문제가 항상 발생합니다. 여기에 이러한 초보자를 위해 특별히 작성된 관련 튜토리얼이 있습니다. 웹 페이지의 이미지 적용, 즉 웹 페이지의 이미지 태그 적용에 대해 요약하겠습니다!
1) 이미지 마크업 개요.
웹페이지에 텍스트만 있고 이미지가 없으면 생명력을 많이 잃게 됩니다. 이미지는 웹페이지 제작에 있어서 매우 중요한 요소입니다. HTML Professional은 웹페이지에 이미지를 출력하기 위해 <IMG> 태그를 제공합니다. 이 태그에는 SRC, ALT, ALIGN, BORDER, WIDTH 및 HEIGHT 속성이 있습니다.
2) 속성 소개.
SRC 속성. <IMG> 태그의 경우 해당 SRC 속성은 필수 속성입니다. 즉, SRC는 <IMG> 태그에 값을 할당해야 하며 태그의 필수 부분입니다. 이때 IMG는 다음과 같은 형식으로 작성되어야 한다.
다음은 인용문이다.
<IMG SRC="매개변수 값">
그 중 매개변수 값은 이미지의 전체 파일명과 경로이다.
일반적으로 이미지 파일은 HTML 문서와 같은 일반 텍스트 파일보다 훨씬 더 많은 공간을 차지하며, 웹 디자인에서는 매력을 높이기 위해 많은 이미지를 추가해야 하는 경우가 많습니다. 이러한 이미지 파일을 HTML 문서에 추가하면 HTML 문서가 매우 커집니다. .대규모 네트워크에서의 전송은 필연적으로 매우 느립니다.
<IMG> 태그는 실제로 HTML 문서에 이미지를 추가하지 않지만 HTML에게 다음과 같은 정보를 제공합니다. 어떤 이미지 파일인가요? 어디? HTML이 이미지 파일의 원래 위치에서 호출할 수 있도록 합니다. SRC 속성의 기능은 이 두 가지 질문에 대답하는 것이므로 SRC 속성의 매개변수 값에는 이미지 파일의 전체 파일 이름, 즉 파일 이름과 확장자가 있어야 합니다(예: logo.gif). 어떤 이미지 파일인지에 대한 질문; 매개변수 값에는 HTML이 이미지 파일을 찾을 수 있는 위치를 알 수 있도록 이미지 파일에 대한 경로도 있어야 합니다. SRC 속성의 매개변수 값 중 이미지 파일의 경로를 어떻게 쓰는지는 초보자들이 고민하는 경우가 많다.
이미지 파일의 경로는 상대 경로 또는 URL일 수 있습니다. 소위 상대 경로는 현재 HTML 문서와 현재 HTML 파일에 링크되거나 삽입될 파일의 상대 위치에 의해 형성되는 경로를 의미합니다. HTML 파일과 이미지 파일(이름은 logo.gif로 가정)이 동일한 디렉터리에 있는 경우 이미지 파일이 다음 디렉터리에 있는 경우 <IMG SRC="logo.gif">로 코드를 작성할 수 있습니다. 현재 HTML 파일은 하위 디렉터리에 있습니다(하위 디렉터리의 이름은 이미지라고 가정). 이미지 파일이 현재 HTML이 있는 디렉터리의 상위 디렉터리에 있는 경우 코드는 <IMG SRC="images/logo.gif">여야 합니다. 파일이 있는 경우(상위 디렉터리 이름이 home 이라고 가정) 상대 경로는 준 URL이어야 합니다. 즉, "../"를 사용하여 개발자 웹 사이트를 나타내고 그 뒤에 개발자 웹 사이트의 이미지 파일 경로가 옵니다. . 예를 들어, home이 이 웹 사이트 아래의 디렉터리라고 가정하면 코드는 <IMG SRC=”../home/logo.gif”>여야 합니다. home이 웹 사이트 아래의 디렉터리 king 아래의 하위 디렉터리인 경우 코드는 다음과 같아야 합니다. <IMG SRC=”../king/home/logo.gif”>라고 쓰여 있습니다.
기타 속성. <IMG> 태그의 ALT, ALIGN, BORDER, WIDTH 및 HEIGHT 속성은 선택 사항입니다. ALIGN 속성은 이미지의 정렬이며 매개변수 값은 왼쪽, 가운데, 오른쪽입니다. BORDER는 이미지의 테두리이며 해당 매개변수는 0보다 크거나 같고 기본 단위는 픽셀입니다. WIDTH 및 HEIGHT 속성은 이미지의 너비와 높이이며 해당 매개변수의 기본 단위는 픽셀입니다. ALT 속성은 이미지 위로 마우스를 이동할 때 표시되는 텍스트입니다. 웹페이지를 만들 때 속성을 사용하는 목적은 무엇인가요? 어떤 이유로 이미지가 표시되지 않을 때 프롬프트 텍스트를 표시할 수 있어 사용자 편의성이 높아집니다.