[Академия] Курс : <>. Неделя 1, часть 1.
Добрый день,дорогие читатели!
Давно меня интересовала тема создания сайта и я как раз недавно узнала про академию, и увидела интересующую меня тему Make a Website
Какие языки необходимы для создания сайта?
Чтобы я смогла создать свой сайт, мне предстоит изучить 2 языка - это HTML и CSS.
HTML мне пригодится, чтобы создать саму структуру сайта, где будет текст, ссылки, изображения, видео и другие элементы. А CSS я буду использовать для изменения внешнего вида элементов HTML.
Чтобы информация лучше воспринялась, я решила разделить курс 1-ой недели на 2 части.
На первой неделе обучения я узнала о структуре сайта. Ниже на картинке показано как выглядит обучающий сайт. С левой стороны пишется код, а с права отображается, как все будет выглядеть на сайте.
Картинка 1 (Ollie Bike Sharing-Общий раздел)
В строке 9 есть открывающий тег 
и закрывающий тег
. h1 - это элемент заголовка.
Открывающий тег требуется для всех элементов HTML, закрывающий - для большинства. Закрывающий тег обозначается символом "/".
На веб-сайте отображается только то, что написано в строке 9 между 
и
Как добавить заголовок?
Заголовки очень важны. Что первое вы увидите зайдя на любой сайт? Это заголовок!
Выше я написала, что h1 является элементом заголовка. Заголовки бывают 6 видов (h1-h6), цифра отвечает за размер заголовка, где h1-самый большой заголовок, h6-соответственно самый маленький.
Если посмотреть на Картинку 1, то видно, что заголовок введён в 9 строке, после 
. Это будет имя веб-сайта, поэтому использовали самый большой заголовок.
Как добавить описание(текст) на веб-сайт?
В этом разделе я узнала про ещё один элемент HTML - p.
Он отвечает за хранение нескольких слов или предложений.
Пример: 
Этот код вставляется под строкой 9 (Картинке 2)
Картинка 2(Paragraph text here-Текст абзаца здесь)
Как добавить ссылку?
На веб-сайтах часто используются ссылки, которые перенаправляют нас на другие сайты или другую веб-страницу данного веб-сайта. Сейчас расскажу как это делается, оказывается это очень легко!
Для этого нужно использовать элемент "a" и привязывающий элемент (так же называют атрибут) "href".
Пример: 
То есть, сначала я указываю ссылку, а потом текст или слово, при нажатии на которое я буду переходить по ссылке. На веб-сайте этот текст или слово будет подчёркнутым и выделено голубым цветом.
Данный код я ввела после последнего предложения между 
и
.
Картинка 3(*Here is a list of cities where you can find us-Вот список городов, где вы можете найти нас)
Главное, чтобы ссылка была заключена в кавычки. А текст между 
и
может быть любой длины.
Как добавить изображение?
На каждом сайте есть изображения, без них сайт будет скучным и не интересным. Поэтому, это очень важная часть создания веб-сайта!
Для этого используется элемент изображения HTML : "img src".
URL-это техническое имя веб-сайта. Изображения тоже имеют URL-адреса.
URL-адрес изображения обычно заканчивается расширением .jpg или .png.
Пример: 
Как видно из примера, элементы изображения не требуют закрывающего тега, они самозакрываются.
Добавляем код после закрывающего тега p
Картинка 4(Need a set of wheels while you're in town? Use Ollie to pair your perfect vacation with a stylish, affordable bike rental. Here is a list of cities where you can find us.-Вам нужен набор колес, пока вы находитесь в городе? Используйте Ollie, чтобы соединить свой идеальный отпуск со стильным и недорогим прокатом велосипедов. Вот список городов, где вы можете нас найти.)
Как добавить видео?
Для добавления видео используется элемент видео HTML и несколько атрибутов.
Сначала расскажу про атрибуты, которые я узнала, а потом покажу пример:
- width и height требуются для установки размера экрана, на котором будет отображаться видео.
- control даёт возможность воспроизвести видео, поставить на паузу и регулировать громкость звука.
- source src устанавливает URL-адрес видео.
- type нужен, чтобы указать разные видеоформаты.
Пример:
Картинка 5
Элемент видео я добавила в 11 строку, так же как и изображение.
На этом первая часть обучения 1-й недели заканчивается.
В первой части я рассказала все, что мне легко далось в понимании. Я даже была приятно удивлена, делая практические задания. Так же мне очень понравилось как хорошо и понятно объясняется данный курс, сразу для закрепления материала даются практические задания и приводятся хорошие примеры.
Конспект подготовлен для Академии Голоса @academy