HTML로 그림 삽입-작동 방식
HTML을 사용하여 웹 사이트에 이미지를 삽입하려면 img 태그를 사용하십시오. 정확히 어떻게 작동하고주의해야하는지 여기를 읽으십시오.
HTML로 이미지를 삽입하는 방법-기본 사항
- 하루와 함께
사진을 삽입 할 수 있습니다. - 이미지 소스는 태그 내에 제공됩니다.
웹 사이트의 하위 폴더 "pictures"에서 "testbild.webp"파일을 삽입합니다. - URL을 통한 외부 소스도 가능합니다.
서버의 CHIP 로고를 통합합니다.
임베드 된 이미지의 HTML 속성
img 태그 내에 수많은 속성을 추가 할 수 있습니다.
- 웹 사이트에서 이미지의 크기를 결정하려면 "너비"와 "높이"를 사용하십시오. 이미지
측면 길이가 100 픽셀 인 정사각형으로 표시됩니다. - "alt"를 사용하면 해당 이미지를로드 할 수없는 경우 표시되는 대체 텍스트를 정의 할 수 있습니다. HTML로 이미지를 삽입 할 때는 항상이 속성을 설정해야합니다.
- "테두리"속성은 프레임의 두께를 픽셀 단위로 지정합니다. 와 사진
5 픽셀로 비교적 두꺼운 프레임이 있습니다. - "정렬"을 사용하여 그래픽을 정렬하십시오. 이 속성의 값은 "bottom", "top", "middle", "left", "right"및 "center"입니다.
- "hspace"및 "vspace"를 사용하면 이미지와의 거리를 (가로 및 세로) 설정할 수 있습니다.
어떤 형식을 사용해야합니까?
HTML 코드에 포함 할 수있는 다양한 이미지 형식이 있습니다.
- JPG : JPG 형식 이미지는 웹 페이지에 가장 일반적으로 사용됩니다. 이 형식은 1, 670 만 가지 색상을 나타내며 JPG를 매우 잘 압축 할 수 있습니다. 따라서 이미지 파일을 매우 작게 만들 수있어 빠른 로딩 시간이 가능합니다.
- PNG : PNG 형식은 1670 만 색상을 표시하고 압축 할 수 있습니다. JPG 형식에 비해 장점은 손실없이 압축이 가능하다는 것입니다.
- PNG 형식으로 정의 된 영역도 투명하게 표시 할 수 있습니다. 그러나 아주 오래된 브라우저는 투명도를 표시하는 데 문제가 있습니다.
- GIF : HTML로 동영상을 삽입하려면 GIF 형식이 적합합니다. 이 형식에는 256 색만 표시되며 설정 옵션없이 압축이 자동으로 수행됩니다.
- GIF 형식은 작은 애니메이션 그래픽 또는 로고에 가장 적합합니다. 로고를 페이지에 조화롭게 맞추기 위해 PNG와 같은 GIF 형식으로 투명 필름을 사용할 수 있습니다.
HTML의 예
- 이것은 당사 웹 사이트의 CHIP 로고를 통합합니다.
- 높이 100 픽셀, 폭 200 픽셀로 표시됩니다.
- 로드 할 수없는 경우 "CHIP-Logo"가 빈 텍스트로 표시됩니다.
- 사진은 2 픽셀 프레임으로 구성됩니다.
- 오른쪽 정렬되어 있고 다른 측면 요소와 50 픽셀 떨어져 있습니다.