Работа над сайтом посредством html5: добавление содержимого

23.07.2019 в 11:45 | 157 0 Уроки HTML
Работа над сайтом посредством html5: добавление содержимого
Работа над сайтом посредством html5: добавление содержимого

Вы приобрели домен, выбрали хостинг, припарковались, вроде как и cms работает, но индексация не идет, к примеру, ваши картинки не индексируются, теги не видны, не расстраивайтесь, здесь помогут небольшие знания html5. Данный язык позволяет сделать отлично функционирующий сайт. Как известно, если бы страница содержала только информационный блок, то не была бы настолько интересной, поэтому без вставки дополнительных элементов не обойтись.

Поговорим о картинках, если вы хотите вставить картинку, то вам нужно использовать следующий элемент:

<img src="…" alt="…">

Большинство работающих с html5 стараются игнорировать такую важную часть как alt. Этот элемент поможет вам внести ключи, которые впоследствии помогут вам выйти в топ при рациональном использовании.

Зачем картинке ключи? Допустим, человек вводит искомый запрос «карликовая лилия» и верхней строчке Google поиска вы сможете увидеть перечень картинок, которые соответствуют этому запросу. Таким образом, вы сможете увеличить количество трафика.

Сама картинка добавляется в специальную папку на хостинге, который вы, естественно, в любом случае будете использовать. После того как вы загрузили графический файл в папку, вы можете смело прописывать сведения:

<img src="karlikovayalili.png" alt="красиво, лилия, сад, природа ">

Именно таким способом можно рационально использовать этот тег.

Если у вас он находиться в определенной папке, то нужно указывать путь:

<img src="main/images/karlikovayalili.png" alt="красиво, лилия, сад, природа ">

Таким образом, ваша картинка обязательно будет отображаться, как вы запланировали.

Если ваша картинка слишком объемная или наоборот слегка не дотягивает до желаемых размеров (но если слишком маленькая делать этого не стоит), то без помощи графического редактора, можно задать необходимые параметры по увеличению/ уменьшению вашего графического файла.

Все происходит следующим образом, допустим у нас есть также картинка «karlikovaya.png», но она слишком широкоформатная, а нам нужно, чтобы она стала не обоями, а иллюстрацией к основному информационному блоку, тогда мы воспользуемся такими элементами как «width» который отвечает за высоту и таким элементом как «height», который в свою очередь отвечает за широкоформатность нашего изображения. И для примера возьмем параметры, где width будет составлять примерно 500, а такое понятие как height будет составлять 800, при этом, не изменяя другие параметры, получим следующее:

<img src="karlikovayalili.png" alt="ботаника, цветы, природа, красота, карликовая лилия" width="500" height="800"> - все можно быть довольным результатом.

Если вам необходимо вставить определенную ссылку на страничку своего же портала или другого, то необходимо воспользоваться, таким элементом как

a href="…"

после которого идет наименование, которое будет видеть пользователь, а потом элемент заканчивается на </a>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *