Создание сайтов для новичков
Для того чтобы написать свой сайт вам нужно понимать, что сайт делиться на две части front – end и back – end, если переводить дословно то получается передняя (лицевая) и задняя (скрытая). Смотрите, все, что вы видите сейчас на сайте это Front – end, то есть кнопки, ссылки, текст и т.п., а Back – end это вся серверная часть, к примеру, когда вы регистрируетесь на сайте и вводите ваши данные сервер (программа) получает ваши данные: email, имя и т.п., вот эта программка которая их получает и является Back-end. В этой статье мы будем разбирать Front-end. Вам необходимо знать HTML, CSS и JavaScript. В этой статье мы рассмотрим HTML.
Чтобы профессионально создавать сайты, советуем записаться на курсы front end в Киеве.
Перейдем к HTML, HTML – это каркас нашего сайта (скелет). На данный момент существует две самых популярных версии HTML: HTML и HTML5. Советую изучать HTML5 так как очень важно изучать новейшие технологии. В целом в html есть два вида кода, это закрывающие теги и просто теги, вот к примеру простой тег <br>, и закрывающиеся <body></body>. Кстати чтобы вы понимали так обозначается комментарий: <!—Они нужны для общения между программистами, или для более удобного перемещения в коде -->
Для того чтобы браузер понимал, что мы пишем сайт вам нужно в редакторе кода прописать такой код:
<!DOCTYPE html> <!__ Здесь мы даем понять браузеру, что мы пишем на html и начинаем писать сайт __>
<html> <!__ Написав этот код мы даем понят, что сейчас будет html код __>
<head> <!__ В этом теги пишется вся информация которую пользователь не будет видеть, такую как подключенные файлы, имя страницы и т.п. __>
</head>
<body> <!__ Тут будут находится весь наш сайт, то есть такие объекты как текст, ссылки, кнопки __>
</body>
</html>
Для того чтобы добавить заголовок вы пишете тег <h1></h1>. Запомните тег <h1></h1> так же может быть меньше, у него есть несколько вариаций <h2>, <h3>, <h4>, <h5>, <h6>. Они отличаются по размеру <h1> самый большой и <h6> самый маленький.
<!DOCTYPE html>
<html>
<head>
<title>Простой сайт </title>
</head>
<body>
<h1> Я люблю щеночков </h1>
Текст можно писать просто без всяких тегов на ваше усмотрение, <br>
но важно не забывать, <br>
что браузер автоматический не переносит текст на другую строчку <br>
поэтому мы делаем это <br>
вручную с помощью тега <br>
</body>
</html>
Затем вы возможно захотите добавить картинку. Для этого вам нужен тег <img>,
полностью он пишется так <img src=”bird.jpeg” alt=”Птичка ”>.
src отвечает за местоположение файла, а alt будет отображаться только если навести курсор на изображение или если оно не прогрузиться. Так же изображение будет в его настоящем размере, поэтому если вы хотите задать размер то премините такой код <img htef=”cat.jpeg” alt=”Котик” width=”400px” height =”400px”>. Width это ширина, соответственно height это высота.
<!DOCTYPE html>
<html>
<head>
<title>Сайт title>
</head>
<body>
<h1>Здесь находиться заголовок </h1>
Просто текст для примера
<img htef=”dhgie.jpeg” alt=”Картинка”>.
</body>
</html>
Не много о тексте. Будет лучшее если вы разместите его в теге <div></div>. Этот тег является простым контейнером. В не могут располагаться другие объекты. Пишется он так
<div></div> . О нем поговорим поподробней в другой статье.
Так же если вы хотите узнать больше тегов о которых я не упоминала в статье, то советую посетить такие ресурсы как WebReference и Ruseller
Ну вот вы создали страничку на html, дальше не много практики и можете переходить к CSS. На этом все в следующей статье мы перейдем к CSS.