И так, вы заинтересовались разработкой сайтов и решили сделать свой. Но с чего начать? Все пути начинаются с самого простого, а в веб разработке самое простое это HTML, CSS
Что такое HTML
HTML — это не язык программирования, это разметка. Представьте что весь сайт состоит из прямоугольников
На скриншоте я обвел красным для примера, как строится разметка.
Есть блок, внутри еще блок для картинки, внутри блок для заголовка, рядом блок для текста. Для каждого блока есть свой тэг. Например для общего блока в который будет идти картинка, текст и т.д, есть тэг div
<div> // Открываем блок
// То что внутри блока
</div> // Закрываем блок
Нужно соблюдать так скажем грамматику, т.е. из чего состоит тэг. Треугольные скобки и внутри них название тэга. Так же нужно объяснить где начало и где конец, как видно на примере сверху, у нас есть начало блока <div> и конец блока </div> . Конец блока определяется символом слэш «/» перед названием.
Не все тэги имеют закрывающий тэг
Попробуем создать разметку простого блока в котором у нас будет заголовок и текст:
<div>
<h3> Hello world </h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
И так, что мы сделали:
- Открыли блок див
- Добавили заголовок размера 3 (всего 6). Заголовок тоже должен иметь закрытый тэг
- Добавили обычный текст в тег p
- Закрыли блок див
Есть удобный сервис: jsfiddle, где вы можете онлайн создовать свои веб странички или скрипты, проверять то или иное не заполняя свой компьютер разным мусором
Все примеры, которые я показываю тут, вы можете копировать в jsfiddle и проверять как это работает.
И так, мы сделали блок добавили туда текст, а как поменять цвет у текста или как сделать больше отступ от краев. Тут нам поможет CSS
Что такое CSS?
CSS — Это визуальная часть, это стили, которые накладываются на теги
Попробуем добавить стилей нашему блоку
<div>
<h3> Hello world </h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
div{ // К какому тэгу относятся следующие стили
padding: 15px; // Внутренний отступ со всех сторон по 15 пикселей
max-width: 400px; // Максимальная ширина блока 400 пикселей
margin: 0 auto; // Внешний отсуп сверху и снизу 0, слева и справа автоматически
text-align: center; // Выравнивание текста по центру
} // Для этого тэга все.
h3{ // К какому тэгу относятся следующие стили
font-size: 25px; // Размер шрифта
text-transform: uppercase; // Текст большими буквами
}
Отступы можно задавать как всем сторонам сразу, так и по отдельности, например:
// Вариант 1
div{
padding: 10px 20px 10px 20px;
}
// Вариант 2
div{
padding: 10px 20px;
}
// Вариант 3
div{
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
В первом варианте идет следующая последовательность отступов сверху — 10, справа — 20, снизу — 10, слева — 20
Второй вариант сверху и снизу — 10, слева и справа — 20
В третьем варианте, мы прописываем каждую сторону отдельно.
Для того чтобы выровнить блок по центру я задал внешний отступ margin, и задал ему автоматический отступ слева и справа, но чтобы блок встал по центру, я задал блоку ширину 400 пикселей
Есть множество правил и исключений, как в стилях, так и в html, к сожалению все я описать не смогу. Есть стили которые некоторые браузеры не поддерживают и это обязательно стоит учитывать, когда верстается сайт.
Полезные сайты, где можно черпать информацию
Это нормально, когда у начинающего миллион вопросов и к счастью есть платформы, сообщества, где все друг другу помогают
Один из полезнейших сайтов, который мне очень помогал в свое время — stackoverflow
Вы задаете любой вопрос, если он не повторялся, то на него почти моментом отвечают и объясняют. Если же вопрос уже был, то его очень просто найти и вы тут же найдете ответ.
Чтобы проверить заранее, можно ли использовать тот или иной стиль, чтобы его поддерживали все браузеры. Можно проверить на сайте caniuse.com
Пишите название стиля и вам сразу покажут всю информацию, на каких браузерах и с каких версиях поддерживается данный стиль
Что делать дальше?
Теперь же, есть небольшое понятие что к чему и на следующем уроке мы уже приблизимся к верстке полноценной страницы сайта. Но вы должны понимать, что то, что вы изучили сегодня только капля в море. Впереди будет трудный путь. Если вам все так же интересно, переходим к следующему уроку