Программирование с нуля с чего начать? Web разработка Урок 7 Изображения

Автор Georgiy Dronov
Программирование с нуля   с чего начать? Web разработка  Урок 7 Изображения

предыдущей лекции мы с вами рассматривали как упорядочить список при помощи букв для этого.

Используй такая форма записи Type равно двойные кавычки и буква, а и также. Мы научились упорядочивать в обратном порядке при по словарю вёрст — это запись внутри тега HTML элемента называется атрибутами HTML элемента равен буква э — это один атрибут HTML элемента нашего Oil & reverse — это второй атрибут HTML элемента нашего. Да посмотрим на сайте MD написания, что же такое атрибуты HTML — это кто-то находится справочная информация почте Mail атрибутом и написано HTML элементов есть атрибуты — это дополнительные значения которые устраивают алименты или регулирующих поведение различным способам чтобы соответствовать критериям пользователя, что мы собственно говоря и сделали.

Мы настроили элемент HTML Element Alpha так чтобы он вел себя определенным образом нужным нам здесь указано немолоко HTML атрибутов в видеть.

Если мы про лесных довольно-таки много. И вот здесь вот рядом с именем атрибута написан элементы написаны в которых используется может использоваться этот атрибут некоторые атрибуты могут использоваться только в одном элементе например. Хай только в одном элементе метод используется и тут в описании написано, что он указывает нижнюю границу верхнего диапазона сейчас не важно, что — это значит тем не менее он используется только в одном элементе следующая атрибут эйчаров используется. Как увидеть в нескольких HTML Element of a bytes-like. Давайте посмотрим где используется ревёрс как вы видите он используется только водород листе и указывает отображает ли список по убыванию атрибут Type вот этот атрибут Type который мы в нашем огород листе он используется в разных может использоваться в разных системах элементах таких как батон Input и так далее. Ну давайте теперь рассмотрим новый HTML Element Image который используется как вы наверное догадались для отображения изображений на web-страницах и этот элемент имеет атрибут src от слова Source источник — это самозакрывающийся тег для него не нужен второй закрывающий тег. Что же нам нужно указать в атрибуте src. Давайте попробуем сохранить файл и обновим страницу где вы видите не не отображается на странице потому, что мы не указали здесь источник. Где находится наша изображение мы можем найти какого-нибудь кота например в интернете любого нажмем на ней правой кнопкой мыши на этой картинке и выбрать опцию копировать URL картинки уорелл. Это адрес по которому эта картинка. Это изображение находится в интернете и мы можем теперь вставить этот адрес в нашем браузере в адресной строке если мы нажмем Enter ток картинка отображается так как оно расположено по который мы ввели в адресной строке на каком-то сайте. Теперь мы можем — это изображение отобразить на нашей странице для этого атрибута сарсе оставим этот жёл. Сохрани файл обновить страницу и вот изображение этого кота адрес которого на каком-то сайте. Теперь отображаемым его на нашей странице. Ну как увидеть. Она великовато до для того чтобы его уменьшить мы можем использовать ещё один атрибут для указания размера картинки атрибут вид например. Это ширина. Давайте укажи моё к примеру 200 пикселей с ним обновим страничку и картинка стала. Паша 200 пикселей, но она одновременно уменьшилась и по высоте пропорционально. Если же вы хотите по каким-то причинам установить свою высоту например. Вы хотите сделать квадратным изображение. Вы можете указать здесь и высоту также явно атрибутом. Хайд давайте сделаем изображение квадратным поставим тоже 200 и вот мы получили. Квадратное изображение, но она искажена поэтому. Давайте уберём этот атрибут чтобы изображение картинка отображалась корректно. Ну и конечно же после нашего изображения мы можем указать любой части следующий например. Давайте в заголовке H1 напиши. МКАД И теперь этот заголовок отображается после изображения и далее. Можно также продолжать написание различных HTML элементов. При таком способе отображения изображений когда мы указываем здесь адрес изображения на каком-то сайте в интернете мы рискуем потому, что когда-нибудь — это изображение может быть удалено оттуда или нам могут например запретить доступ по каким причинам к этому изображению и, тогда мы не получим на нашей странице ничего. Поэтому лучше использовать изображения которых у вас на сайте. Давайте теперь перейдем на страничку с изображением и правой кнопкой мыши нажмем и выбери мне копировать URL for сохранить изображение как чтобы сохранить его у себя на компьютере и сохраним его в той же папке в которой находится html-документ нашей странице у меня находится в папке Web Developer курсы HTML папка и вот здесь вы увидите My First HTML Doc я сохраняю изображение там же давайте убедимся, что она находится зиёда. Как увидеть и она сохранилась корректно и теперь давайте изменим для твоего имя на более назовём просто котят и теперь здесь в сарсе мы укажем название файла и обязательно расширение файла jpg в данном случае сохраняем файл и обновляем страницу видите отобразилось тоже картинка, но только теперь она находится в папке с нашим HTML документом.

0 комментариев
0

Читайте также