- Главная
- /
- Создание сайта
- /
- Создание сайта HTML с нуля
HTML — это прежде всего текстовые разметки, с помощью которых, люди создают сайты различной сложности и наполнением. Однако по факту HTML не является языком программирования.
Для создания стандартного кода на языке HTML и подключить к нему файл style.css, так сказать скелет документа , потребуется подготовить файл формата index.html. Затем формируется меню, разрабатываются основные разделы, шапка, подвал, блок контента и при необходимости создается логотип.
Ну что, посмотрим практически как это происходит . Поехали!
1. Создание HTML сайта в текстовом редакторе (блокноте)
Для того,чтобы понять как работает html, надо запомнить правила как использовать текстовые разметки. Главное верно и корректно расположить теги, которые позволяют задавать определенные команды в браузере, и чтоб информация отображалась в том виде, в котором был прописан код, например первого уровня <h1>…</h1>. Такой файл необходимо создать в текстовом редакторе (в блокноте) и сохранить новый файл в формате *.html
После создания и сохранения нового файла в формате *.html ,необходимо чтоб файл со стилями с именем «style.css» заработал, но его придётся прописать перед тегом </head>:
<link rel=»stylesheet» href=»style.css»> Здесь могут быть прописаны самые различные свойства, задается цвет, размер, бордюр и даже фон стиля.
2.Создание меню
Для того, чтобы создать первую и последующие страницы, необходимо создать меню и списки HTML — это необходимо для того,чтобы каждый из разделов имел свою ссылку и открывался в отдельном окне. Тогда посетитель сайта будет нажимать на соответствующую панель и переходить на нужную ему страницу.
Также необходимо прописать изображение, то есть логотип сайта и создать определенную папку «image» , куда будут сохранены все картинки что будут располагаться на сайте.
И чтоб страница сайта выглядела завершенной (созданной), необходимо на сайте создать подвал с помощью HTML со следующим выражением:
Файл, который при создании сайта был создан, его необходимо сохранить и отложить, не трогать — он будет в дальнейшем при создании других сайтов служить шаблоном.
3. Работа с таблицами стилей CSS.
В файле представленном ниже, уже прописаны все стили, и размеры картинок (изображений), соблюдены все параметры, внешний вид всех разделов, что будут располагаться на сайте.
Для начала задаем стиль для шапки сайта. Можем сделать рамку, обозначить цветом, то есть,визуально отделить ее от других блоков.
Если необходимо в процессе создания сайта блок перенести на боковую панель, то также можно задать основные показатели, такие как:
- ширина
- высота
После того, как создана шапка сайта и прописаны все необходимые разделы, можем приступить к созданию “Подвала”. Он будет небольшим ,и располагаться будет внизу сайта.
Пока мы увлеклись написанием кода для шапки и подвала, наш сайт немного преобразился, хотя он не имеет цвета, его можно разбавить красками. Фон для каждого из блоков задается по отдельности, как для шапки, так и для подвала.
Здесь показано,что и как прописано. Какие цвета задействованы, как располагается картинка (вывеска) — слева или справа, а может занимает центральное место на экране. Также каждый абзац прописан с новой строчки и с отступом.
4. Теги — основа языка HTML
Тег — разметка или последовательность, с помощью которой задается способ расположения текстовой последовательности.
Конечно, самостоятельно написать сайт с помощью HTML -кода можно, однако необходимо выучить несколько основных понятий тегов.
И так, самые распространенные теги:
тег <body></body> это тело страницы, где размещается информация, которая предназначена для просмотра пользователями сети интернет;
тег <title></title> отвечает за заголовки расположенные на странице;
тег <head></head> тут содержаться ключевые слова, которые отвечают за корректность веб-страницы;
тег <html></html> один из самых главных ,который отвечает за открытие и закрытие страницы.
Вам необходимо ,чтоб информация располагалась по центру страницы и никак иначе, тогда срочно воспользуйтесь тегом <center> .
5. Веб-проект и этапы его разработки
Существует несколько этапов работы:
- Макет можно нарисовать на листке бумаги с помощью различных редакторов;
- Верстку провести в Photoshop с последующей тестировкой и адаптацией под все мобильные устройства;
Вся работа на страницах сайта ведется преимущественно основными тегами:
- <div>…</div>
- <p>…</p>
- <table>…</table>
- Списками <ul><li>…</li></ul>
Тег HTML напрямую связан с таблицей CSS и об этом нельзя забывать, так задается верный формат отображения корректности работы всех страниц сайта.
Заключение
С создание сайта с кодом html -конечно можно самому создать с нуля, но в настоящее время интеренет -наука шагнула настолько далеко,что уже придуманы различные движки для создания сайтов -так называемые конструкторы (Tilda, WordPress, Wix и т.д.).
Покажу вам примеры сайтов,которые были выполнены мной (информация размещенная на сайтах, копированию не подлежит).
сайт одностраничник с кодом html о Хеди Ламарр (актриса, ученый, изобретатель)
Загрузка ...
Свежие комментарии