Хотите свой сайт, но не знаете с чего начать? Часть 5

Lesson 5

Что мы сегодня узнаем и чему научимся:

• Как изменить текст на нашем сайте?
• Как добавить картинку в наш сайт?
• Как написать код простого баннера?
• Конкурс

Форматирование текста

-Абзац
Итак, открываем наш файлик index.htmlпрограммой Notepad++ и давайте сделаем заголовок и напишем небольшой текст.

Отлично, сохраним (Ctrl+S) и посмотрим, что получилось?

Как видим текст у нас без абзаца получился, чтобы сделать абзац мы будем использовать тег <p>, заключим наш текст «Это мой первый сайт, моя первая страничка, в глобальной сети Интернет.» в тег абзаца.

Не забываем сохранить и смотрим в браузере, что у нас получилось. Как видим у нас появился абзац.

-Заголовки
Теперь разберём размеры текста, различают 6 размеров заголовков. Заголовок делается заключением текста в тег <h> и чем крупнее заголовок нам нужно сделать, тем, соответственно индекс возле буквы h будет меньше, например самый большой будет <h1>, а самый маленький размер текста <h6>. Скопируем наш заголовок и проставим теги от большего размера текста к меньшему.


-Жирный, курсив
Чтобы сделать текст жирным будем использовать тег <b>, а наклонный <i>

Добавление картинок

Давайте создадим папку img рядом с нашим файлом index.htmlи поместим в папку img картинку.

Чтобы сделать так, чтобы наша картинка отображалась у нас на сайте, нужно задать тег изображения и путь к картинке например вот так <imgsrc=”img/34536.png”/> , где <imgsrc=””> сам код, а img(папка с картинкой)/ 34536(название картинки).png(расширение файла) . Расширение (формат) картинки можно посмотреть, нажав на картинку правой клавишей мыши и выбрать «Свойства» в контекстном меню.

Смотрим результат


Картинка вышла очень большая, прям на весь экран, давайте зададим параметры, чтобы она стала меньше. Можно уменьшить картинку программно двумя способами, в процентном соотношении и в пиксельном. Давайте сделаем и так и так, для этого укажем высоту нашей картинки height и ширину width как на скриншоте.

Ссылки и баннеры

Для того, чтобы сделать текст ссылкой или другой объект, его нужно заключить в тег <a> например вот так <ahref=«ссылка»>Текст </a> .


Как видим текст, который стал ссылкой он у нас подчёркнутый и синего цвета, а если переходим по этой ссылке по цвет текста становится фиолетовым (посещённая ссылка)
Давайте теперь сделаем баннер, для этого нам нужно сделать ссылкой картинку, это можно сделать если вместо текста поместить в код ссылки, код картинки.
<a href="https://golos.io/@moneygroup"><imgsrc="img/34536.png" height="200 px" width="350 px" /></a>


Как видим картинку «Баннер» невозможно, отличить от обычной картинки, если не наводить мышкой на неё.

Я не стал углубляться в термины и технический диалект так как думаю и так сложно.

Конкурс

Самым преданным читателям нашего сообщества и данной рубрики мы хотим разыграть 5 ключей для бесплатного использования приложения «Самоучитель программиста CoderBook»

С помощью данного приложения Вы с лёгкостью можете сэкономить на образовании программиста и самостоятельно выучить более 10 языков программирования.
Более подробнее о приложении и языках программирования можно ознакомиться на сайте разработчика здесь.
Условия конкурса

• Быть подписанным на @vp-freelance и @moneygroup.
• Сделать апвот и репост этой новости.
• Оставить комментарий в этом посту со словами «Хочу приложение CoderBook»
  Правила награждения
  Победителей выберем в течении недели рандомно и опубликуем список победителей.
  Как получить ключ
  После того как Ваш ник оказался в списке победителей нужно написать в комментариях к новости, Ваши контакты (viber или telegram или e-mail) и получить код для скачивания приложения.
  Подробнее о том как активировать ключи и скачать приложение можете узнать здесь.

Что мы научимся и узнаем в следующем уроке.

• Зарегистрируем доменное имя для нашего сайта
• Зарегистрируем хостинг для нашего сайта
  Спасибо, что читаете нас! С уважением @moneygroup.

Вам будут интересны следующие посты нашего сообщества:

Контакты для приема работа:

• telegram: @galinak777
• почта: [email protected]