웹 페이지에 그래픽 파일 삽입. HTML의 이미지

그림과 같이 이미지 주소를 작은따옴표로 묶어야 합니다. 그리고 당신이하고 싶다면 배경 그림전체 페이지에 대해 태그 내에서 스타일을 사용하십시오. .

<тег style="background:#цвет url("адрес картинки")">...

두 값 모두 배경을 참조하므로 중간에 세미콜론이 필요하지 않습니다. 이러한 레코드를 사용하면 브라우저는 기본적으로 색상이 아닌 배경 이미지를 표시합니다. 이제 배경 이미지가 어두운 색상의 그림이고 페이지의 텍스트 색상을 흰색으로 만들었다고 상상해 보십시오. 그리고 모든 것이 멋져 보입니다... 사용자가 브라우저에서 이미지 표시를 비활성화할 때까지. 그러면 그의 배경은 텍스트 색상처럼 흰색이 될 가능성이 큽니다.

HTML로 배경 이미지를 생성하는 예

하늘의 별자리
헛된 생각은 많은 사람들을 파멸시켰습니다.
다시 생각하고 마음을 저장하십시오-
가장 현명한 사람들과 막 다른 골목에 도달했습니다.
오마르 카이얌.

테이블

대부분의 경우 HTML의 테이블은 의도된 목적(표 형식 데이터 표시)이 아니라 전역 페이지 프레임을 만드는 데 사용됩니다. 즉, 테이블이 생성되고 페이지의 전체 너비로 늘어난 다음 왼쪽 열에 하나의 메뉴가 만들어지고 오른쪽 열에 다른 메뉴가 만들어지고 기본 정보가 평균에 배치되는 식입니다.

레이아웃에는 세 가지 유형이 있습니다. 레이어(블록), 평균 수준의 스타일 지식(CSS) 및 결합이 필요합니다. 여러 측면에서 블록 레이아웃이 여전히 바람직하므로 레이아웃 디자이너가 테이블과 블록의 도움으로 작업을 수행할 수 있는 경우 일반적으로 후자가 선택됩니다.

안녕하세요!!! 이 기사에서는 HTML 문서에 이미지를 삽입하는 방법을 배웁니다. 전혀 어렵지 않습니다. 하지만 먼저 웹 페이지의 사진에 대한 몇 가지 팁을 드리고 싶습니다.

조언:웹 페이지에 사진을 게시할 때 애니메이션 사진에 푹 빠지지 마십시오. 가장 중요한 것인 텍스트에서 독자의 주의가 산만해지기 때문입니다. 애니메이션이 없는 일반 사진을 사용하는 것이 좋습니다.
웹 페이지에 고유한 사진을 사용해 보십시오. 독특한 사진을 만드는 방법을 읽을 수 있고, 아름다운 사진을 찍을 수 있습니다.

시작하자.

HTML에 이미지를 삽입하는 방법은 무엇입니까?
그래서 내가 말했듯이 여기에는 복잡한 것이 없습니다. 이 html 코드를 추가하십시오.

kartinka는 그림의 이름입니다
jpg는 이미지 확장자입니다. 확장자는 gif, png, bmp가 될 수 있습니다.

이미지가 이미지 폴더에 있는 경우 이미지 경로는 다음과 같습니다.

이미지 - 그림 "kartinka.jpg"가 있는 폴더의 이름입니다.

사진이 다른 사이트에 있는 경우 코드는 다음과 같습니다.

https://www.site는 사이트 주소입니다.

예시 :

이렇게 하려면 참조된 요소 사이에 이미지를 넣기만 하면 됩니다.

이미지 속성

ALIGN - 이 속성은 이미지를 가로로 감싸거나 정렬하는 데 사용됩니다.
왼쪽 - 왼쪽 정렬하면 텍스트가 오른쪽으로 둘러싸입니다.
오른쪽 - 오른쪽 정렬, 텍스트가 왼쪽으로 줄 바꿈됩니다.

결과 :

오른쪽 정렬

HSPACE - 이미지에서 수평 들여쓰기(픽셀 단위).
VSPACE - 이미지로부터의 세로 간격(픽셀 단위).

결과 :

그림의 여백

HEIGHT - 이미지 높이(픽셀 단위).
WIDTH - 이미지 너비(픽셀 단위).

결과 :

제목 - 이것이 그림의 제목입니다. 마우스 커서를 이미지 위로 이동하면 제목이 표시됩니다.

title="(!LANG:안녕하세요 여러분 - 웹사이트!!!!}">

결과 :

사진 제목

BORDER - 이 속성은 이미지 주위의 프레임 크기를 담당합니다. 그림을 링크로 만들면 프레임이 나타납니다. BORDER 속성을 0으로 설정하면 테두리가 표시되지 않습니다.

결과 :

테두리 값을 5로 변경하면:

결과 :

모든 이미지를 배경으로 사용할 수 있습니다. 이렇게 하려면 body 태그에 background 특성을 추가합니다.

background="your_background.jpg">

이미지 배경에 텍스트를 표시할 수 있습니다.

예시 :

결과 :

배경으로 그림

이 메모에서 "HTML에 이미지를 삽입하는 방법"이라는 주제를 끝낼 수 있지만 많은 사람들이 질문에 관심이 있지만 이미지를 중앙에 배치하는 방법을 알고 있습니다.
사진을 중앙에 배치하려면 다음 트릭을 적용하기만 하면 됩니다.

이제 확실합니다. 다음 강의로 넘어갑시다.

인터넷 서핑을 하다보면 분명 다양한 사진, 현수막, 사진, 그래픽 이미지. 오늘 우리는 HTML 페이지에 이미지를 삽입하는 방법을 배웁니다.

이미지 추가는 두 단계로 진행됩니다. 첫 번째, 준비 그래픽 파일원하는 크기와 형식을 지정한 다음 태그를 통해 웹 페이지에 추가합니다. . HTML 문서 자체는 필요한 이미지를 표시하기 위한 용도로만 사용되지만 바꾸지 않고.

이미지를 준비할 때 염두에 두어야 할 몇 가지 사항이 있습니다.

1. 웹 페이지는 네트워크를 통해 로드되므로 중요한 요소는 그래픽 파일의 크기("무게")웹 문서에 포함됩니다. 크기가 작을수록 이미지가 더 빨리 표시됩니다.

2. 종종 이미지의 물리적 크기(너비와 높이)는 너비와 높이를 제한(축소)해야 합니다. 예를 들어 너비를 700-800픽셀 이하로 설정합니다. 그렇지 않으면 전체 이미지가 브라우저 창에 맞지 ​​않고 스크롤 막대가 나타납니다.

웹사이트용 그래픽 형식

웹 그래픽에 가장 널리 사용되는 두 가지 기본 형식이 있습니다. gif그리고 JPEG. 다음과 같은 특성: 다양성, 다양성, 소량 소스 파일충분한 양질, 이러한 형식을 잘 제공하여 사실상 웹 이미지의 표준으로 정의했습니다.

다른 형식이 있습니다. PNG, 이미지를 추가할 때 브라우저에서도 지원되며 두 가지 유형이 있습니다. PNG-8그리고 PNG-24. 그러나 인기 PNG 형식 GIF 및 JPEG 형식에 대한 인식이 크게 떨어짐.

일반적으로 이미지(사진)의 경우 루트 디렉터리에 별도의 폴더가 생성되고 사이트의 모든 이미지가 여기에 추가됩니다. 때로는 이러한 폴더가 여러 개 있습니다(사이트 구조에 필요한 경우 또는 탐색하기 더 쉬운 경우). 이 폴더는 일반적으로 다음과 같이 불립니다. 이미지또는 이미지 (이미지). 웹 페이지의 코드에는 그래픽 파일(이미지가 있는 위치)의 전체 경로와 이름이 기록됩니다. 주어진 파일(그림) html 문서에 삽입하려는

웹 페이지에 이미지를 삽입하는 코드 작성

이미지를 HTML 문서에 삽입하려면 다음에 지정된 구조를 사용하십시오. 목록 8.1.이 코드는 웹 페이지의 올바른 위치(사진을 보고 싶은 위치)에 삽입됩니다.

자동차 전용 we 페이지에 두 개의 이미지를 준비하여 삽입했습니다. 목록 8.1에서 첫 번째 이미지의 포함 코드를 볼 수 있습니다.

목록 8.1.

사이트의 웹 페이지에 처음 삽입된 이미지는 다음과 같습니다.

이제 다음에 쓰여진 내용에 대해 자세히 설명하겠습니다. 목록 8.1.

이미지 자체는 다음 태그를 사용하여 "삽입"됩니다. img src. 전체 항목은 다음과 같습니다. img src="img/mers1.jpg", 어디 "img/mers1.jpg"- 사진이 폴더에 있음을 나타냅니다. 이미지, 그래픽 파일(이미지)의 이름: mers1.jpg.

원칙적으로 이것은 이미 웹 페이지에 이미지를 삽입하기에 충분하고 나머지 매개 변수는 선택 사항이지만 그래도 항상 처방하는 것이 좋습니다. 그렇지 않으면 사진이 기하학적으로 왜곡될 수 있습니다..

추가 옵션을 살펴보겠습니다.

테두리="0"- 이미지 주위에 프레임이 없음을 나타냅니다. 예를 들어 0을 다른 숫자로 변경해 보십시오. 1 , - 이미지 주변의 프레임 두께에 해당 1 픽셀, 2 - 2픽셀 등의 이미지 주변 프레임 두께에 해당합니다.

중요한! 이미지를 링크로 만들 계획이라면 값을 지정해야 합니다. 테두리="0".

폭="400"– 이미지의 너비가 다음과 같음을 나타냅니다. 400픽셀(이미지의 실제 너비를 입력하십시오).

높이="209"- 이미지의 높이를 다음과 같이 지정합니다. 209픽셀(이미지의 실제 높이를 입력하십시오).

매개변수를 지정하지 않는 경우: 너비그리고 키, 이미지가 기하학적 왜곡을 얻을 수 있습니다.

hspace="20"- 20픽셀의 이미지 주위에 텍스트 들여쓰기를 나타냅니다.

정렬="왼쪽"-이것은 이미 익숙한 태그입니다 ... .. 맞습니다. 왼쪽 정렬을 의미하며 값을 가질 수도 있습니다. 오른쪽- 오른쪽 정렬.

alt="(!LANG:차량 전면 보기" !}- 여기에는 마우스를 이미지 위로 가져가면 표시되는 대체 텍스트가 작성됩니다.

정확히 같은 방식으로 두 번째 이미지를 웹 페이지에 "삽입"하지만 유일한 차이점은 오른쪽 정렬된다는 것입니다.

이 문서(강의)에 대한 의견:

img 폴더를 정확히 어디에 만들어야 하는지 알려주실 수 있나요?

img 폴더는 일반적인 이름일 뿐입니다. 나중에 이해할 수만 있다면 원하는 대로 이름을 지정할 수 있습니다. 단순함을 위해 어디에서나 만들 수 있습니다. 루트 디렉토리에 만들고 거기에 모든 이미지를 넣으십시오.

사실은 그림이 표시되지 않고 비문만 표시된다는 것입니다. 무엇이 잘못될 수 있습니까? 고맙습니다.

위의 목록 8.1을 자세히 살펴보십시오. 전적으로 자신에게 맡기십시오. 루트 디렉토리(사이트의 모든 HTML 파일이 있는 위치)에서 img 폴더를 만듭니다. 모든 이미지를 이 폴더에 넣습니다. 목록에서 mers1.jpg를 파일 이름으로 변경합니다. 너비 및 높이 값을 다음으로 변경하십시오. 실제 치수당신의 파일. 행운을 빕니다.

대단히 감사합니다. 모든 것이 해결되었습니다.

안녕하세요. 저는 이전 발표자와 같은 상황입니다. 귀하와 같은 코드를 작성하고 파일 이름만 변경합니다. mers.1/jpeg 대신 Mercedes/jpeg를 삽입합니다. "차 앞 모습"이라는 문구가 있고 이미지가 없습니다. 제 생각에는 브라우저가 사진의 경로를 찾을 수 없거나 사진이 올바르게 등록되지 않은 것 같습니다. 여기 내 코드가 있습니다. 비

img/mercedes/jpeg 코드를 자세히 살펴보십시오. 브라우저가 그래픽 파일의 경로를 찾지 못한다는 것을 올바르게 이해했습니다. 2. 파일 이름이 올바르지 않습니다. mers1.jpg가 어떻게 있는지 확인하십시오.

자, 제가 코드를 복사해서 타원에 그림 없이 붙여넣었더니 맨 위에 타원에 링크가 있네요!

안녕하세요 문제는 동일합니다 사이트 문서와 같은 위치에 img라는 폴더를 만들었고 이름이 1.jpg인 이미지가 이 폴더에 저장되며 귀하의 예에서와 같이 모든 것을 처방합니다.

내 사진이 img 폴더에 있다는 것을 알게 된다면

초보자 "웹 마스터"에게 매우 유용한 기사입니다. "alt" 속성에 대한 유일한 설명입니다. 기사의 그림과 관련하여 다음과 같이 해석됩니다. "alt="(!LANG:전방 차량 보기" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

여기 내 코드가 있습니다 그렇다면 작업이 중앙에 있을 때 그림이 측면에 배치되는 이유는 무엇입니까?

그리고 다른 사람의 사이트에서 이미지를 가져오면 저작권 침해가 되지 않을까요?

이미지 대신 서버에 HTML 문서를 배치할 때 이유 설명 빈 자리프레임에. 계산하기 전에는 이미지가 그대로였습니다.

Dmitry, 기적은 없습니다. 어딘가에서 실수를 저질렀습니다. 사진의 모든 경로를 확인하십시오. 그림이 코드에 기록되는 방식.

이것은 내 코드입니다. 이미지를 제외한 모든 것이 페이지에 공개됩니다. 나는 하루 종일 모든 방법을 시도했지만 아무것도 하지 않았습니다. 어떻게 해야할지 알려주세요

AndreyK, 내 편지를 참조하십시오. 어떤 식 으로든 이미지를 삽입 할 수 없습니다. 모든 것을 올바르게 입력했지만 아무 것도 입력하지 않고 프레임과 비문 만 표시됩니다.

Elvira, 나는 당신의 편지와 다른 모든 의견과 편지를 읽었습니다. 하지만 대답 할 곳은 ... 할아버지 마을 ???

왜 다들 서두르는지 모르겠어!? 코드를 복사한 다음 붙여넣을 필요가 없지만 직접 작성하면 모든 것이 작동합니다 .. 여기 내 사진의 텍스트가 있습니다.

귀하의 목록을 복사하고 내 값을 붙여 넣었습니다-사진이 있습니다 다음으로 동일한 것을 (수동으로) 아래에서 운전하는데 사진이 없습니다-이게 기적입니까?

AndreyK 실수가 어디 있는지 알려주세요. 얼마나 많은 시도가 작동하지 않습니다 ((

Andrey, 왜 사진이 보이지 않는지 말해주세요. 내 코드: 자막은 있는데 사진이 없네요. 내 주소: [이메일 보호]고맙습니다.

시간도 오래 걸렸지만 효과가 있었습니다! 실제로 imj 폴더는 HTML 문서에서 열어야 합니다.

나는 확실히 시도 할 것이다, 감사합니다

iiiiiiiiiiiiuuuuuuuuuuuuuuuuuuuuum

나도 오랫동안 고생했는데 사진이있는 폴더가 index.html과 같은 위치에 있어야한다는 것이 밝혀졌습니다. 감사합니다 Elena

안드레이 내가 붙여넣기:

안드레이 내가 붙여넣기: 문서에는 사진이 없고 비문만 있습니다!!! 제 주소는: [이메일 보호]

내 코드 ... 또한 사진이 없습니다. img 폴더는 index와 같은 폴더에 있습니다... 도와주세요. [이메일 보호]고맙습니다!

잘 모르겠습니다. 나는 모든 의견을 읽었습니다. 나는 모든 것을 시도했다. 내 데이터를 복사하여 붙여넣었습니다. 아무것도 작동하지 않습니다. 그림이 있는 폴더(img)는 index.html과 같은 위치에 있습니다. 그러나 사진이 없습니다. 대신 적십자와 비문 IE 브라우저에서 작업합니다. 내가 입력한 내용은 다음과 같습니다.

수업에서 사진 대신 페이지의 HTML 코드를 보았습니다. 페이지의 코드가 목록에 있는 코드와 다릅니다. 왜요? 그런데 페이지에서 "mers1.jpg" 코드에 밑줄이 그어져 있습니다. 밑줄을 긋고 복사하지 못했습니다. 넣어보기도 했어요. 여전히 사진이 없습니다. 무슨 일이야?

우리는 스스로에게 묻고 스스로 답합니다. 오랫동안 그림이 삽입되지 않았습니다. 결과: 1, src 태그 대신 srk 2가 있었습니다. 사진의 경로를 만들 때 혼란스러웠습니다. 나는 폴더의 이름을 IMG로 바꾸었고 모든 것이 해결되었습니다. 이것 때문에 거의 이틀을 보냈지만 그만한 가치가 있었습니다.

사랑하지만 이제 평생 기억할 것입니다 :) 물론 농담입니다. 하지만 진지하게 사람이 반송 주소를 남기지 않으면 내가 그를 돕는 것이 거의 불가능합니다.

안녕하세요, 하나의 이미지를 상단에, 두 번째는 왼쪽에, 세 번째는 오른쪽 하단에 배치하는 방법을 알려주시겠습니까?))))

........이미지 누락 오류는 무엇입니까?

코드의 모든 것이 정확합니다. 아무 것도 엉망이 되지 않으면 모든 것이 작동합니다. 하지만 파일 이름을 쓰십시오 (그림) 영문자. 많은 서버가 라틴어를 허용하지 않습니다.

그러나 여기에 이상한 점이 있습니다 ... 이름이 다른 폴더를 호출하는 동안 경로 철자가 올바르게 지정되었지만 사진이 어떤 식 으로든 나타나기를 원하지 않았습니다. IMG에 전화하자마자 바로 나타났습니다. 캐치가 무엇입니까?

마리나, 트릭이나 도발이 없습니다 :). 목록 8.1의 코드에서. 이 이미지가 img 폴더에 있음을 나타냅니다. 호스트의 이미지 폴더 이름을 변경한 다음 목록에서 변경하면 전체 트릭입니다.

이미지를 삽입하려고 합니다!!! 나는 메모장을 통해 모든 것을 처방하고 모든 것을 올바르게 수행하며 메모장을 통해 그만한 가치가 없을 수도 있습니다 ??

그리고 모질라 파이어 폭스 최신에서 모든 것을 엽니 다))

내 사진의 경로는 C:Documents and SettingsDenisDesktopkoffevinogradwwwImg이고 사진 자체의 이름은 gif이며 이름에는 1.gif도 포함됩니다...메모장에서 이 작업을 수행합니다.

했고 전체 경로가 나오지 않습니다. Mozilla는 적십자가 있는 사진 expoler 하이라이트를 볼 수 없습니다.

Denis, Img 폴더의 이름을 img로 변경합니다. 모두 대문자로, 경로 이름도 바꿉니다. 많은 서버가 대문자를 올바르게 표시하지 않습니다.

나는 여전히 같은 질문을 가지고 있습니다. 왜 이미지가 아니라 비문입니다. 사이트용으로 별도의 폴더를 만들었습니다. 웹 페이지와 사진이 포함되어 있습니다. 삽입: 내 메일의 오류가 무엇인지 알려주세요: [이메일 보호]

확대하거나 축소할 수 있도록 이미지를 만드는 방법은 무엇입니까?

어떤 이유로 이미지가 나에게도 중앙에 있지 않습니다. 문제는 무엇입니까?.. 코드는 다음과 같습니다.