HTML 초보자 가이드(8)

행에 포함된 이미지
대부분의 웹 브라우저는 행에 포함된 X비트맵(XBM), GIF 또는 JPEG 형식(즉, 텍스트에 인접한 이미지)으로 이미지를 표시할 수 있습니다. 다른 형식의 이미지는 웹 브라우저에 통합됩니다. [예: PNG(이동식 네트워크 그래픽) 형식]. 각 이미지는 처리 시간이 걸리고 문서 표시 속도가 느려집니다. 문서에서 이미지를 신중하게 선택하고

에 이미지가 포함되어 있는지 확인하세요. 행에 다음을 입력합니다.


ALT="FORWARD" HEIGHT=32 WIDTH=32>

여기서 이미지 이름은

URL의 구문 형식은 앵커 체인 HREF에서 사용하는 형식과 동일합니다. 이미지 파일이 GIF 파일인 경우 이미지 이름의 이름 부분은 .gif로 끝나야 합니다. X 비트맵 형식 파일은 .xbm으로 끝나야 합니다. JPEG 이미지 파일은 .jpg 또는 .jpeg로 끝나야 합니다.

이미지 크기 속성
태그에는 텍스트와 함께 다운로드되는 이미지의 크기를 브라우저에 알리는 두 가지 다른 속성이 포함되어야 합니다. HEIGHT 및 WIDTH 속성을 사용하면 브라우저가 적절한 공간을 확보할 수 있습니다. (픽셀)을 사용하여 나머지 파일을 다운로드합니다. (픽셀 크기는 Adobe Photoshop과 같은 이미지 처리 소프트웨어에서 확인할 수 있습니다.)

예를 들어 파일에 자신의 초상화를 포함하려면 , 입력:


ALT=" FORWARD" HEIGHT=32 WIDTH=32> >참고: 이미지 크기가 속성 설명 크기와 일치하지 않는 경우 일부 브라우저는 할당 공간에 적합하도록 이미지를 확장하거나 축소하기 위해 HEIGHT 및 WIDTH 속성을 사용합니다. 따라서 모든 브라우저 개발자가 이미지 확대/축소에 동의하는 것은 아닙니다. 독자가 계획할 때 이 기능을 사용할 수 있을 것이라고 가정하지 마십시오. 이미지 크기를 확인하고 올바른 크기를 사용하는 것이 좋습니다.

이미지 위치 지정
이미지 표시 방법에 어느 정도 유연성이 있습니다. . 이미지를 텍스트와 별도로 유지하거나 이미지를 왼쪽, 오른쪽 또는 중앙에 배치할 수 있습니다. 또는 이미지와 텍스트를 같은 줄에 배치할 수 있습니다. 다양한 형식을 시도하여 어느 것이 가장 효과적인지 확인할 수 있습니다.

이미지와 텍스트를 같은 줄에 표시하세요
기본적으로 이미지 하단과 다음 텍스트가 같은 줄에 표시됩니다. 현재 단락 ALIGN= 속성 값을 TOP 또는 CENTER로 설정하여 이미지를 단락의 상단이나 중간에 배치할 수도 있습니다.

이 텍스트는 이미지 상단과 같은 줄에 있습니다(). 텍스트의 한 줄만 이와 같고 다른 줄도 이와 같습니다.

이 텍스트 줄은 이미지 중간에 표시됩니다(). 다시 한 줄의 텍스트만 표시됩니다. 가 중앙에 표시되고 다른 줄은 이미지 아래에 표시됩니다.

텍스트가 없는 이미지
텍스트 없이 이미지(예: 조직 로고)를 표시하려면 별도의 단락을 사용합니다. 단락 태그의 ALIGN= 속성을 사용하여 아래와 같이 이미지를 창의 가운데 또는 오른쪽으로 조정합니다.

결과는 다음과 같습니다.

이미지가 중앙에 표시되고 단락은 왼쪽에서 시작됩니다. >
이미지에 대한 대체 텍스트
주로 VT100 터미널에서 실행되는 일부 월드 와이드 웹 브라우저는 이미지를 표시할 수 없습니다. 일부 사용자는 소프트웨어에서 이미지를 표시할 수 있음에도 불구하고 이미지 다운로드를 비활성화합니다(특히 모뎀 또는 저속 라인) HTML은 독자가 보고 있는 페이지에서 누락된 내용을 알 수 있는 메커니즘을 제공합니다.

ALT 속성을 사용하면 표시할 수 있는 텍스트를 지정할 수 있습니다. 예:


ALT="" HEIGHT=48 WIDTH=50>

여기서 UpArrow.gif는 위쪽 화살표입니다. 이미지 표시 기능이 있고 이미지 다운로드가 활성화된 브라우저에서는 위쪽 화살표 그래픽이 표시됩니다. VT100 브라우저에서 또는 이미지 다운로드가 꺼져 있으면 창에 Up이라는 단어가 나타납니다.

문서에 나타나는 모든 이미지에 대해 대체 텍스트를 사용해야 합니다.

배경 이미지
최신 버전의 웹 브라우저에서는 홈 페이지를 표시할 때 배경으로 사용할 이미지를 다운로드할 수 있습니다. 일반적으로 배경을 포함하려는 경우 싫어합니다.

배경 이미지는 티슈(예: 리넨 종이) 또는 이미지(예: 로고)일 수 있습니다. 다른 이미지와 마찬가지로요.

하지만 아주 작은 이미지만 만들면 됩니다. 브라우저는 타일링이라는 기능을 사용하여 전체 브라우저 창을 채우면서 이미지를 반복적으로 표시합니다. 간단히 말해서, 이미지를 생성하기만 하면 이미지가 창을 채울 때까지 브라우저가 자동으로 여러 번 이미지를 생성합니다. 이 작업은 아래 설명된 태그를 사용하면 자동으로 수행됩니다.

배경 이미지가 포함된 태그는 태그 설명에 속성으로 포함됩니다.



배경색
기본적으로 브라우저는 회색 배경에 검정색 텍스트를 사용하여 텍스트를 표시합니다. 그러나 일부 HTML 작성자는 해당 변경 사항과 함께 배경색을 선택할 수 있습니다.

이 변경 사항이 여전히 읽기 쉬운지 미리 확인하세요. (예를 들어 많은 사람들이 검정색 배경에 빨간색 텍스트를 사용하므로 읽기가 매우 어렵습니다!)

태그의 다양한 속성을 사용하여 텍스트, 링크, 조회한 링크 및 활성 링크의 색상을 변경할 수 있습니다. 예를 들면 다음과 같습니다.



는 검정색 배경(BGCOLOR), 흰색 텍스트(TEXT) 및 은색 하이퍼링크(LINK)가 있는 창을 만듭니다. > 숫자와 문자의 6자리 조합은 색상을 나타내며, 이는 특정 색상의 RGB(빨간색, 녹색, 파란색) 값을 나타냅니다. 이 6자리 숫자는 실제로 순서대로 배열된 2자리 숫자 3개로서 시작점을 나타냅니다. . 00부터 FF까지의 빨간색, 녹색, 파란색 비율의 16진수 값입니다. 예를 들어, 000000은 검정색(무색), FF0000은 밝은 빨간색, FFFFFF는 흰색(세 가지 색상 모두 포화됨)을 의미합니다. 이러한 숫자와 문자 조합의 의미는 모호합니다. 다양한 조합과 색상 간의 관계 이해:

ColorPro 웹 서버
외부 이미지, 사운드, 애니메이션
사용자가 문서에서 단어나 작은 이미지를 활성화하는 시점을 알고 싶을 수 있습니다. 링크를 사용하면 이미지를 별도의 문서로 열 수 있습니다. 이를 외부 이미지라고 하며, 큰 이미지로 인해 주요 문서의 다운로드 속도가 느려지고 싶지 않을 때 유용합니다. 외부 이미지에 대한 링크를 입력하려면

링크 앵커

더 큰 이미지에 대한 링크를 입력하세요:


ALT="" HEIGHT=48 WIDTH=50>

독자는 SmallImage.gif 이미지를 보고 이를 클릭하여 LargerImage.gif 파일을 엽니다.

링크에 동일한 구문을 사용합니다. 유일한 차이점은 링크된 파일의 확장자입니다. 예를 들어

링크 앵커

위 내용은 HTML 초보자 가이드(8) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!