HTML — Базовый курс 5


83 просмотра.

Краткое описание видео: .продолжаем изучать html.в данном уроке мы поговорим о деньги.который отвечает за вставку изображений.на html страницу но естественно для.этого нам понадобится чтобы в папке.system или документам у нас лежала.какая-нибудь картинка поэтому сразу.подготовьте какой-нибудь изображение я.подготовил картинку арен джипег и.положил ее в папку.html вот это может быть любая картинка.главное чтобы она была не очень больших.размеров и имела формата пока джипег до.для начала вот сразу имейте ввиду чтобы.название у нее был на английском языке.русские название лучше не использовать и.желательно чтобы не было никаких.пробелов знаков подчеркивание социальных.знаков и так далее просто название.из английских букв это как бы спасет вас.от множества ошибок.а дальше возвращаемся в html код и.давайте попробуем вставить наше.изображение между двумя абзацами.то есть вот наша страничка и попробуем.опустим сюда вставить изображение вот.между этих двух абзацев мы сейчас будем.работать и так так который отвечает за.ставку изображение наш темой страницу.это тмж пишется таким образом это.сокращение от английского слова и иметь.изображение внутри соответственно.опять-таки очень легко запоминается.вообще все теги html.они созданные либо полностью как бы из.английских слов до либо из их сокращений.голова-то этого названия будет тело наше.про сокращение от хэдер заголовок это.параграф им же и мяч и так далее поэтому.html очень быстро и легко запоминается и.я думаю вы это уже заметили дальше идем.сам в себе таким же он еще ничего не.значит потому что он сам не может.указать какое иное изображение сюда.нужно вставить какие у него размеры так.далее да поэтому нам естественно здесь.нужны и атрибуты.сразу заметьте что так кем же он.одинарный его не нужно закрывать.рис там где нужно стоять изображением.просто пишем тем же и указываем.соответствующие атрибуты первый самый.главный атрибут этого тега это атрибут.срц.есть это сокращение от английского слова.source источник и соответственно этот.атрибут указывает на то где лежит само.изображение так как она у нас лежит в.той же самой папке нам достаточно просто.указать имя изображение если бы она у.нас лежала где-то в другой папке нам.пришлось бы чем писать полной пути до.него но в данном случае у нас.изображение в той же папке при этом.напишем просто название так уровень ..jpeg дальше нам нужно обязательно.указать.высоту и ширину данного изображения.чтобы узнать высоту и ширину мы должны.просто вернуться нашу папку навести.курсор мыши и посмотреть размеры у нас.127 на 155 поэтому в коде так и пропиши.за ширину нас отвечает атрибуту из пишет.таким образом и указываем здесь 127 за.высоту у нас отвечает атрибут хайд.поэтому.пишется он таким образом здесь указываем.155 тыс мы указали источник ширину.высоту и в принципе на данном этапе.достаточно можем сохранять данная данную.страницу возвращаемся в браузер.обновляем и видим что у нас.изображение появилось на месте где мы и.хотели единственное здесь такой есть.нюанс если мы хотим допустим чтобы у нас.изображение было по центру здесь нам.нужно воспользоваться таким приемом мы.должны поместить это изображение в абзац.помещаем его в абзац и уже абзац.выравниваем по центру пишем a wine.santerna.сохраняем данную страницу обновляем и.видим что у нас изображение по центру.если мы выравним абзац по правому краю.доверяет то у нас изображение также.выровнять по правому краю хотя у самого.изображение тоже есть атрибут align.но как бы несет себе немножко другой.смысл и сейчас мы увидим это отличие.давайте попробуем вставить наше.изображение внутри абзаца сделать так.чтобы текст optical изображения тому как.в данном случае нас идет разрыв.а мы попробуем сделать так чтобы.изображение у нас допустим вставилась.сюда и текст его optical да давайте это.попробуем сделать для этого выбираем вот.этот абзац который мы делали для.выравнивания а само изображение основная.пока внутри абзаца с текстом чтобы текст.стал облегать наше изображение мы должны.указать.атрибута align у самого изображения.атрибут овального изображения как раз.таки отвечает за то как текста будет.облегать наши изображения если мы пишем.в eft то это означает что изображение.будет слева а текст будет облегать его.соответственно справа если мы напишем.write изображение у нас уйдет на право.текст будет облегать его слева в данном.случае мы пропишем f 1 сохранить данную.страницу и обновим и здесь и мы видим.что у нас текст стал облегать нашу.картинку слева и справа боку а сама.картинка ушла налил если мы допустим.пропишем здесь рожает сама картинка у.нас идет направо а текст будет облегать.и с левым.видно да вот таким образом работает.атрибут align.у изображение кроме этого давайте.поговорим еще в одном атрибуте н для.этого выравним с поражение по левому.краю чтобы было более наглядно вот видно.да что у нас текст как бы прилипает к.изображению здесь видно текста у нас.прилип к самому изображение.и обычно это как бы не очень хорошо.смотрится поэтому нам нужно сделать так.чтобы текст немножко отодвинулся в эту.сторону делается это опять-таки с.помощью специального атрибутом пишется.он таким образом аж space всех.опять-таки сокращения место по.горизонтали.грубо говоря и сколько места нужно.отступить от изображения до текстом в.двойных кавычках указываем значение в.пикселях допустим 15 пикселей на.сохраняем данную страницу на обновляем.браузер и видим что у нас здесь.появилось 15 пикселей от изображения до.тексты и соответственно 15 пикселей.появилась с этой стороны от границы.браузера до изображения такой же атрибут.есть и для отступов по верхнему краю.дуйся вот эти два конта по пишется они.точнее пишется потребуют таким образом.как в space то есть вертикальную отступ.и также мы можем указать здесь допустим.10 пикселей сохраняем данную страницу.обновлен здесь видим что у нас появились.отступы и сверху до.вот таким образом работает так.изображения еще один атрибут который мы.с вами сейчас посмотрим это атрибут alt.это атрибут альтернативного текста.то есть это специальный такой атрибут.который в который помещается описание.изображение то есть мы сюда помещаем что.изображено на нашем рисунке в данном.случае я могу написать апельсин то есть.зачем это нужно нужно это следующем в.следующих ситуациях когда человек будет.просматривать нашу страницу с.отключенными изображениями некоторые.браузеры это позволяет сделать вот он.увидит место нашей картинки слово.апельсин при всем будет знать что.отключена я картинка на отключенной.картинке изображён апельсин кроме этого.если поднести курсор мыши картинки то мы.увидим что у нас появляется под ним как.раз таки это слово которое мы прописали.в этом атрибуте.об этом тоже.вы должны знать на этом атрибутом и у.изображение закончим изучать дав.есть еще один атрибут который мы будем.проходить при создании ссылок.вот сейчас он нам пока не нужен вот на.данном этапе вам нужно запомнить вот эти.атрибуты как правильно вставляется.изображение она аж тема я страницу да то.есть указан источник.ширину и высоту как текста будет.облегать изображение вот по горизонтали.вот собой вертикали и альтернативный.текст вот эти в принципе 3 атрибуты не.обязательно остальные.желательно всегда указывать все на этом.данный урок мы закончим следующему же.займемся следующими тегами

HTML — Базовый курс 5

Как? Вы еще не смотрели? Ну это зря...