HTML 문서에 이미지를 추가하는 태그입니다. WEB 페이지에 이미지는 물론 비디오, 오디오도 추가합니다! HTML 요소의 전체 목록

사용 편의성을 위해 태그를 주제별 섹션으로 그룹화하고 각 태그에 표시 속성 값을 추가했습니다. 해당 테이블로 이동하시려면 사진을 클릭하세요.

"HTML에 그림을 삽입하는 방법은 무엇입니까?"라는 질문에 대답하기 전에 “엄청난 양의 그래픽 자료로 웹 페이지를 오버로드하는 것은 가치가 없다는 점에 유의해야 합니다. 이는 사용자의 리소스에 대한 시각적 인식을 향상시킬 뿐만 아니라 페이지 로딩 시간도 증가시키기 때문입니다.

웹 사이트를 만들 때 가장 일반적으로 사용되는 그래픽 형식은 PNG, GIF 및 JPEG이며, 이미지를 사용한 디자인 작업의 경우 그래픽 편집기인 Adobe Photoshop은 품질 저하 없이 이미지를 압축하고 크기를 조정할 수 있는 풍부한 기능을 갖추고 있으며 이는 웹 개발에 매우 ​​중요합니다. .

HTML 페이지에 이미지를 삽입하려면 단일 단순 태그가 사용됩니다.

,

여기서 xxx는 이미지 주소입니다. 이미지가 페이지와 동일한 디렉토리에 있는 경우 태그는 다음과 같습니다.

그러나 빠르고 안정적인 인터넷은 아직 세계 곳곳에 도달하지 못했고, 웹 사이트의 이미지가 단순히 로드되지 않는 경우도 있습니다. 이러한 경우 대체 텍스트라는 개념이 있습니다.

사용할 수 없거나 로드 중이거나 브라우저 작동 모드인 "그림 없음"에서는 그림 대신에 표시됩니다. alt 태그 속성을 사용하여 추가됩니다. .

그래픽 파일에 대체 텍스트를 추가하는 예:

대체 텍스트

그래픽 파일의 표시 크기를 변경하려면 높이 및 너비 태그를 사용하십시오. 여기서 높이는 픽셀 단위로 측정된 높이이고 너비는 너비입니다.

이러한 속성을 사용할 때 브라우저는 먼저 그래픽 콘텐츠를 위한 공간을 할당하고 전체 페이지 레이아웃을 준비하고 텍스트를 표시한 다음 이미지 자체를 로드합니다.

그림은 지정된 치수의 직사각형에 배치되며, 매개변수가 원본보다 작거나 클 경우 그림이 늘어나거나 압축됩니다.

높이 및 너비 속성을 사용하지 않으면 브라우저가 이미지를 즉시 로드하므로 텍스트 및 기타 페이지 요소 표시가 지연됩니다.

이러한 매개변수는 픽셀(그림의 크기는 일정하며 사용자의 화면 해상도에 따라 달라지지 않음) 및 백분율(그림의 크기는 화면 해상도에 따라 다름)로 지정할 수 있습니다.

예를 들어:

이미지의 원본 크기를 변경하는 순간에는 비율을 유지해야 한다는 점을 기억해야 합니다.

이렇게 하려면 매개변수 중 하나(너비 또는 높이)의 값만 지정하면 충분하며, 브라우저는 두 번째 값을 자동으로 계산합니다.

많은 HTML 태그와 마찬가지로 이미지를 정렬하는 align 속성을 적용합니다.

- 그림이 텍스트 위에 위치합니다.

- 그림은 텍스트 아래에 있습니다.

- 그림은 텍스트 왼쪽에 위치합니다.

- 그림은 글 오른쪽에 위치합니다.

이는 다음과 같이 수행됩니다.

보시다시피 그래픽 삽입물은 링크가 될 수 있으며, 클릭하면 전체 또는 약어 형식으로 작성된 주소로 리디렉션됩니다.

이미지는 보이는 개체로 페이지에 삽입될 수 있을 뿐만 아니라 배경에도 포함될 수 있습니다. 이미지를 배경으로 정의하려면 태그에 background="xxx" 속성을 지정해야 합니다. 여기서 xxx는 이미지의 주소이며 위의 예와 동일한 방식으로 지정됩니다.

예를 들어 다음 텍스처 이미지를 배경 이미지로 설정해 보겠습니다.

준비된 페이지가 있는 폴더에 이미지를 저장하고 다음 줄을 작성합니다.

배경 이미지가 있는 페이지 텍스트가 있는 배경입니다.

페이지의 배경 이미지가 설정됩니다.

안녕하세요, 블로그 독자 여러분! 이 글에서는 HTML 페이지에 이미지를 삽입하는 방법에 대한 모든 것을 배웁니다. 페이지에 넣고 싶은 이미지가 여러 개 있습니까, 아니면 사이트에 로고를 넣고 싶습니까? 이 모든 것은 쉽습니다. 이 기사를 읽고 나면 아무런 어려움 없이 HTML 페이지에 그림을 삽입할 수 있을 것입니다. 이를 위해 img 태그와 그 속성에 대해 자세히 설명하고, gif, jpeg, png와 같은 그래픽 파일 형식을 간략하게 살펴보고, 비디오와 오디오를 더 쉽게 삽입할 수 있게 해주는 HTML5의 새로운 기능도 살펴보겠습니다. 사이트에.

그래픽 데이터와 html 텍스트는 하나의 파일로 결합할 수 없기 때문에 html 페이지의 다른 요소와는 다른 접근 방식을 사용하여 사이트에 표시됩니다. 우선, 그래픽 이미지와 기타 멀티미디어 데이터는 별도의 파일에 저장됩니다. 그리고 이를 웹페이지에 포함시키기 위해 이러한 개별 파일에 대한 링크가 포함된 특수 태그가 사용됩니다. 특히 그러한 태그가 img 태그입니다. 주소가 포함된 태그를 발견하면 브라우저는 먼저 웹 서버에서 이미지, 오디오 또는 비디오가 포함된 해당 파일을 요청한 다음 이를 웹 페이지에 표시합니다.

모든 그래픽 이미지와 일반적으로 웹 페이지와 별도의 파일에 저장된 모든 데이터를 포함된 페이지 요소라고 합니다.

그림을 삽입하고 "img" 태그를 자세히 살펴보기 전에 그래픽 형식에 대해 조금 배우는 것이 좋습니다.

다양한 그래픽 형식이 있지만 브라우저는 몇 가지만 지원합니다. 그 중 세 가지를 살펴보겠습니다.

1. JPEG 형식( 공동 사진 전문가 그룹). 이미지 저장에 사용되는 매우 널리 사용되는 형식입니다. 24비트 색상을 지원하고 사진의 모든 중간톤을 변경하지 않고 유지합니다. 그러나 JPEG는 투명도를 지원하지 않으며 이미지의 작은 세부 사항과 텍스트를 왜곡합니다. JPEG는 주로 사진을 저장하는 데 사용됩니다. 이 형식의 파일 확장자는 jpg, jpe, jpeg입니다.

2. GIF 형식( 그래픽 교환 형식). 이 형식의 가장 큰 장점은 여러 이미지를 한 파일에 동시에 저장할 수 있다는 것입니다. 이를 통해 전체 애니메이션 비디오를 만들 수 있습니다. 둘째, 투명성을 지원합니다. 가장 큰 단점은 256색만 지원해 사진 저장에는 적합하지 않다는 점이다. GIF는 주로 로고, 배너, 투명한 영역과 텍스트가 포함된 이미지를 저장하는 데 사용됩니다. 이 형식의 파일은 확장자가 gif입니다.

3. PNG 형식( 휴대용 네트워크 그래픽). 이 형식은 레거시 GIF와 어느 정도 JPEG를 대체하기 위해 개발되었습니다. 투명도를 지원하지만 애니메이션은 허용하지 않습니다. 이 형식의 확장자는 png입니다.

웹사이트를 만들 때 일반적으로 JPEG나 GIF 형식의 이미지를 사용하지만 가끔 PNG를 사용하는 경우도 있습니다. 가장 중요한 것은 어떤 형식을 사용하는 것이 더 좋은지 이해하는 것입니다. 간단히 말해서:

JPEG는 텍스트가 포함되지 않은 사진이나 회색조 이미지를 저장하는 데 가장 적합합니다.

• GIF는 주로 애니메이션에 사용됩니다.
• PNG는 다른 모든 것(아이콘, 버튼 등)의 형식입니다.

그렇다면 웹 페이지에 이미지를 어떻게 삽입합니까? 단일 img 태그를 사용하면 이미지를 삽입할 수 있습니다. 브라우저는 웹페이지에서 img 태그가 있는 위치에 이미지를 배치합니다.

HTML 페이지에 이미지를 삽입하는 코드는 다음과 같습니다.

이 html 코드는 웹 페이지와 동일한 폴더에 있는 image.jpg 파일에 저장된 이미지를 웹 페이지에 배치합니다. 이미 알고 계시겠지만, 이미지의 주소는 src 속성에 표시됩니다. 나는 그것이 무엇인지 이미 말했습니다. 따라서 src 속성은 이미지와 함께 파일의 주소를 알려주는 역할을 하는 필수 속성입니다. src 속성이 없으면 img 태그는 의미가 없습니다.

다음은 이미지로 파일 주소를 지정하는 몇 가지 예입니다.

이 html 코드는 image.jpg라는 페이지에 이미지를 삽입합니다. 이 이미지는 웹사이트 루트에 있는 이미지 폴더에 저장됩니다.

src 속성에는 이미지에 대한 상대 링크 이상의 내용이 포함될 수 있습니다. 이미지는 HTML 페이지와 함께 온라인에 저장되므로 각 이미지 파일에는 고유한 URL이 있습니다. 따라서 src 속성에 이미지 URL을 삽입할 수 있습니다. 예를 들어:

이 코드는 mysite.ru 사이트의 이미지를 페이지에 삽입합니다. URL은 일반적으로 다른 사이트의 이미지를 가리킬 때 사용됩니다. 사이트에 저장된 이미지의 경우 상대 링크를 사용하는 것이 좋습니다.

img 태그는 인라인 요소이므로 블록 요소 내부(예: "P" 태그 내부)에 배치하는 것이 좋습니다. - 단락:

html에 관한 이전 기사의 이미지를 연습하고 페이지에 삽입해 보겠습니다. 내 페이지의 html 파일 옆에 "images" 폴더를 만들고 여기에 다음과 같은 "bmw.jpg" 이미지 파일을 배치하겠습니다.

그러면 이미지가 삽입된 페이지의 HTML 코드는 다음과 같습니다.

그리고 브라우저에서 표시 결과를 살펴보세요.

보시다시피 웹 페이지에 이미지를 배치하는 데 복잡한 것은 없습니다. 다음으로 "img" 태그의 몇 가지 중요한 속성을 살펴보겠습니다.

이미지 파일은 웹페이지와 별도로 저장되기 때문에 브라우저는 이를 검색하기 위해 별도의 요청을 해야 합니다. 하지만 페이지에 이미지가 많고 네트워크 연결 속도가 느린 경우 추가 파일을 다운로드하는 데 상당한 시간이 걸립니다. 그리고 사용자가 모르는 사이에 이미지가 서버에서 삭제되면 상황은 더욱 악화됩니다.

이러한 경우 웹페이지 자체는 성공적으로 로드되며 이미지 대신 흰색 직사각형만 표시됩니다. 따라서 사용자에게 이미지가 무엇인지 알려주려면 . 이 속성을 사용하여 이미지가 로드될 때까지 빈 직사각형에 표시되는 소위 대체 텍스트를 지정합니다.

대략적인 모습은 다음과 같습니다.

아직 알아야 할 몇 가지 img 태그 속성이 있습니다. 이것은 너비와 높이 속성의 쌍입니다. 다음을 사용하여 이미지 크기를 지정할 수 있습니다.

두 속성 모두 크기를 픽셀 단위로 지정합니다. width 속성은 이미지의 너비를 브라우저에 알려주고, height 속성은 이미지의 높이를 알려줍니다. 이 두 속성은 함께 또는 별도로 사용할 수 있습니다. 예를 들어 너비 속성만 지정하면 브라우저는 지정된 너비에 비례하여 높이를 자동으로 선택하며 높이 속성만 사용하는 경우에도 마찬가지입니다. 이러한 속성을 전혀 지정하지 않으면 브라우저는 이미지를 화면에 표시하기 전에 자동으로 이미지 크기를 결정합니다. 이미지 크기를 지정하면 페이지를 표시할 때 브라우저 속도가 약간 빨라진다는 점만 주목할 가치가 있습니다.

지금은 페이지에 이미지를 삽입하는 것에 관한 모든 것입니다. 그런 다음 웹사이트에 오디오나 비디오를 삽입하는 방법을 살펴보겠습니다.

새로운 html5 사양에는 미디어 파일을 매우 쉽게 삽입할 수 있는 몇 가지 새로운 태그가 도입되었습니다. 이는 주로 비디오 및 오디오에 적용됩니다.

오디오 삽입을 위해 HTML5는 쌍을 이루는 AUDIO 태그를 제공합니다. 오디오 클립이 저장된 파일의 주소는 우리에게 이미 익숙한 src 속성을 사용하여 표시됩니다.

"audio" 태그는 페이지에 블록 요소를 생성합니다. 기본적으로 브라우저는 오디오 클립을 재생하지 않습니다. 이렇게 하려면 오디오 태그에 특수 자동 재생 속성을 지정해야 합니다. 중요하지 않기 때문에 특별합니다. 태그에 이 속성이 존재하는 것만으로도 효과가 적용됩니다.

기본적으로 오디오 클립은 웹 페이지에 표시되지 않습니다. 그러나 컨트롤 값 없이 "audio" 태그에 속성을 넣으면 브라우저는 웹 페이지에서 오디오 태그가 있는 위치에 오디오 재생 컨트롤을 표시합니다. 여기에는 재생/일시 정지 버튼, 재생 막대 및 볼륨 조절기가 포함됩니다.