Как самому написать сайт с нуля без шаблонов

Как написать сайт на html

Приветствую! Если вы ещё не знаете о том, кто я, представлюсь: меня зовут Андрей Зенков. Блог Start-Luck — это способ поделиться с читателями полезной информацией по веб-дизайну. Сегодня хотелось бы поговорить о том, как написать сайт на html. Пошаговая инструкция ответит на вопросы, которые чаще всего возникают у новичков.

Не разобравшись в основах, вы никогда не заработаете на своём первом сайте! Выбор доменного имени и регистрация аккаунта на хостинге — лишь один из этапов: ещё предстоит создать привлекательный дизайн, который вызовет желание задержаться на странице как можно дольше. Для этого всего лишь нужно знать основные теги, из которых по «кирпичикам» можно сложить шедевр веб-дизайна.

Рассмотрим программы, которые используются для написания кода.

Устанавливаем ПО

Оптимальный вариант — Notepad. Не знаю, как вам, но мне ещё не удалось найти не уступающий по функционалу аналог. Текстовый редактор поддерживает не один язык программирования и способен открыть более сотни форматов. На этом положительные стороны Ноутпад не заканчиваются:

предоставляется на бесплатной основе;
не зависает даже при загруженности плагинами;
позволяет редактировать несколько файлов одновременно.

Вот так выглядит интерфейс Notepad:

Некоторые пользователи предпочитают работать в Блокноте. Не рекомендую выбирать эту программу тем, кто осваивает веб-дизайн с нуля: поначалу в ней сложно разобраться без характерной для Ноутпад подсветки кода:

Единственным преимуществом можно считать тот факт, что Блокнот установлен на ваш ПК по умолчанию. Вам не придётся искать источник для бесплатного скачивания программы.

Самый отчаянный шаг — воспользоваться Вордом. Мне кажется, он совсем не подходит для создания сайта, но вы всегда можете рискнуть. Впрочем, если не хотите тратить время на авантюры и воспользоваться другими программами, настоятельно советую ознакомиться с теми утилитами для вёрстки, о которых я писал ранее.

Создаём свою первую веб-страницу

В голове созрело решение сделать сайт самому? Поздравляю: вы стоите на пороге нового хобби, которое принесёт неплохую прибыль, если всё делать правильно. Однако, не будем заглядывать в будущее. Поговорим о ключевых тегах и структуре веб-страницы.

Создание сайта начинается с основных элементов. Рассмотрим каждый из них по отдельности.

DOCTYPE и <html>

Без них ни один браузер не сможет точно распознать веб-страницу и определить её тип. Обратите внимание: в большинстве теги являются парными, поэтому <html> нужно поставить не только в начале, но и в конце кода, «закрыв» его при помощи косой черты — </html>.

<head> и <title>

Эти теги предназначены для хранения служебной информации, которую считывают поисковые системы или браузеры. Здесь вы можете указать кодировку или подключить внешний файл CSS со стилями. В <title> указывается название сайта или каждой его страницы.

<body>

Всё, что вы видите в данный момент на моём блоге, находится в пределах парного тега. Изображения, текст, ссылки — эти элементы сайта отображаются благодаря <body>, который должен закрываться в конце html-документа.

Наполняем веб-страницу содержимым

Наша память устроена таким образом, что наглядная информация воспринимается лучше всего. Поэтому в качестве примера мы создадим веб-страницу вместе. Открываем любой из перечисленных выше текстовых редакторов (я воспользуюсь Notepad). Всё, что требуется, — впечатать стандартный шаблон:

Вставим в «тело» страницы изображение при помощи тега <img>. Не забудьте предварительно залить картинку на любой хостинг, чтобы получить ссылку:

Укажем в свойствах изображения его ширину и высоту параметрами width и height соответственно:

Нажмите File — Save As… (Файл — Сохранить как). Задаём имя — index — и выпадающем списке «Тип файла» выбираем пункт Hyper Text Markup Language file:

Теперь осталось открыть страницу в браузере! Для этого кликните правой кнопкой мыши на файле и в меню «Открыть с помощью…» выберите любой из установленных браузеров. Написанный код конвертируется в простую веб-страницу с изображением, взятым из моего блога:

Поздравляю! Первая ступень на пути к личному сайту преодолена.

Ищем больше материала по HTML

Могу порекомендовать пару отличных курсов. Начнём с Михаила Русакова и его бесплатного 2-х часового видеокурса по созданию сайта, посвящённого основам HTML-вёрстки. На мой взгляд, это отличная бесплатная альтернатива занятиям в компьютерной академии, где сперва будут учить тому же.

Как сделать экспресс-сайт без шаблонизатора?

Переполнение стека

Около
Товары
Для команд

Переполнение стека Общественные вопросы и ответы
Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами

Как создать сайт

Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.

Создание веб-сайта с нуля

A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Нижний колонтитул

Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример

Название страницы

кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт

Веб-сайт, созданный мной.

Попробуй сам "

Объяснение примера

Объявление определяет этот документ как HTML5
Элемент является корневым элементом HTML стр.
Элемент содержит метаинформацию о документе
Элемент </code> определяет заголовок документа </li> <li> Элемент <code> <meta> </code> должен определять набор символов как UTF-8 </li> <li> Элемент <code> <meta> </code> с name = "viewport" позволяет веб-сайту хорошо выглядеть на всех устройствах и разрешениях экрана. </li> <li> Элемент <code> <style> </code> содержит стили для веб-сайта (верстка / дизайн) </li> <li> Элемент <code> <body> </code> содержит видимое содержимое страницы </li> <li> Элемент <code> <h2> </code> определяет большой заголовок </li> <li> Элемент <code> <p> </code> определяет абзац </li> </ul> <hr/> <h3> Создание содержимого страницы </h3> <p> Внутри элемента <code> <body> </code> нашего веб-сайта мы будем использовать наш макет Черновой вариант" и создайте: </p> <ul> <li> Заголовок </li> <li> Панель навигации </li> <li> Основное содержание </li> <li> Боковое содержимое </li> <li> Нижний колонтитул </li> </ul> <hr/> <h3> Заголовок </h3> <p> Заголовок обычно располагается вверху веб-сайта (или прямо под верхним меню навигации).Часто содержит логотип или название веб-сайта: </p>. <p> <div> <br/> <h2> Мой веб-сайт </h2> <br/> <p> Веб-сайт создано мной. </p> <br/> </div> </p> <p> Затем мы используем CSS для стилизации заголовка: </p> .header {<br/> отступ: 80 пикселей; / * немного отступов * / <br/> text-align: center; / * центрировать текст * / <br/> фон: # 1abc9c; / * зеленый фон * / <br/> цвет белый; / * белый цвет текста * / <br/>} <p> / * Увеличиваем размер шрифта элемента <h2> * / <br/> .заголовок h2 {<br/> font-size: 40px; <br/>} </p> <p> Попробуйте сами »</p> <hr/> <hr/> <h3> Панель навигации </h3> <p> Панель навигации содержит список ссылок, помогающих посетителям перемещаться по ваш сайт: </p> <p> <div> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> </div> </p> <p> Используйте CSS для стилизации панели навигации: </p> / * Стиль верхней панели навигации * / <br/>.навигационная панель {<br/> переполнение: скрыто; / * Скрыть переполнение * / <br/> background-color: # 333; / * Темный цвет фона * / <br/>} <p> / * Стиль ссылок панели навигации * / <br/> .navbar поплавок {<br/>: левый; / * Убедимся, что ссылки остались рядом * / дисплей <br/>: блочный; / * Измените отображение на блок, по причинам реагирования (см. ниже) * / <br/> цвет: белый; / * Белый цвет текста * / <br/> text-align: center; / * Центрировать текст * / <br/> отступ: 14 пикселей 20 пикселей; / * Добавляем отступы * / <br/> text-decoration: none; / * Убрать подчеркивание * / <br/>} </p> <p> / * Ссылка по правому краю * / <br/>.navbar a.right {<br/> float: right; / * Размещаем ссылку вправо * / <br/> } </p> <p> / * Изменение цвета при наведении / наведении указателя мыши * / <br/> .navbar a: hover {<br/> цвет фона: #ddd; / * Цвет серого фона * / <br/> цвет: черный; / * Черный цвет текста * / <br/>} <br/> </p> <p> Попробуйте сами »</p> <hr/> <h3> Содержание </h3> <p> Создайте макет из 2 столбцов, разделенных на «побочное содержимое» и «основное содержимое». </p> <p> <div> <br/> <div>... </div> <br/> <div > ... </div> <br/> </div> </p> <p> Мы используем CSS Flexbox для обработки макета: </p> / * Обеспечение правильного размера * / <br/> * {<br/> box-sizing: border-box; <br/>} <p> / * Контейнер колонки * / <br/> .row {<br/> display: flex; <br/> flex-wrap: пленка; <br/>} </p> <p> / * Создать два неравных столбца, которые расположены рядом друг с другом * / <br/> / * Боковая панель / левый столбец * / <br/>. Сторона {<br/> изгиб: 30%; / * Устанавливаем ширину боковой панели * / <br/> цвет фона: # f1f1f1; / * Серый цвет фона * / <br/> отступ: 20 пикселей; / * Некоторые отступы * / <br/>} </p> <p> / * Основной столбец * / <br/>.основной { <br/> гибкость: 70%; / * Устанавливаем ширину основного содержимого * / <br/> background-color: white; / * Белый цвет фона * / <br/> padding: 20px; / * Некоторые отступы * / <br/>} <br/> </p> <p> Попробуйте сами »</p> <p> Затем добавьте медиа-запросы, чтобы сделать макет адаптивным. Это обеспечит что ваш сайт хорошо выглядит на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефоны). Измените размер окна браузера, чтобы увидеть результат. </p> / * Адаптивный макет - когда ширина экрана меньше 700 пикселей, делаем два столбцы располагаются друг над другом, а не рядом * / <br/> @media экран и (максимальная ширина: 700 пикселей) {<br/>.ряд {<br/> flex-direction: столбец; <br/>} <br/>} <p> / * Адаптивный макет - если ширина экрана меньше 400 пикселей, сделайте навигационные ссылки складываются друг на друга, а не рядом * / <br/> @media screen и (max-width: 400px) {<br/> .navbar a {<br/> float: нет; <br/> ширина: 100%; <br/>} <br/>} <br/> </p> <p> Попробуйте сами »</p> <p> <strong> Совет: </strong> Чтобы создать другой вид макета, просто измените ширину гибкости (но убедитесь, что она составляет 100%).</p> <p> <strong> Совет: </strong> Интересно, как работает правило @media? Узнать больше о это в нашей главе CSS Media Queries. </p> <p> <strong> Совет: </strong> Чтобы узнать больше о модуле гибкой компоновки коробки, прочтите наши Глава CSS Flexbox. </p> <p> <strong> Что такое размер коробки? </strong> </p> <p> Вы можете легко создать три плавающих бокса рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого блока (например, отступы или границы), блок сломается. Свойство <code> box-sizing </code> позволяет нам включить заполнение и границу в общую ширину (и высоту) блока, следя за тем, чтобы заполнение оставалось внутри блока и не ломалось.</p> <p> Вы можете узнать больше о свойстве box-sizing в нашем руководстве CSS Box Sizing Tutorial. </p> <hr/> <h3> Нижний колонтитул </h3> <p> Наконец, добавим нижний колонтитул. </p> <p> <div> <br/> <h3> Нижний колонтитул </h3> <br/> </div> </p> <p> И стиль: </p> <p> .footer {<br/> отступ: 20 пикселей; / * Некоторые отступы * / <br/> text-align: center; / * Центр текста * / <br/> фон: #ddd; / * Серый фон * / <br/>} </p> <p> Попробуйте сами »</p> <p> Поздравляем! Вы создали адаптивный веб-сайт с нуля.</p> <br/> <br/>.<h2> Мой путь к тому, чтобы стать веб-разработчиком с нуля без степени CS (и чему я научился из… </h2> <p> Сергей Гарсиа </p> <img src="/wp-content/uploads/kak-samomu-napisat-sajt-s-nulya-bez-shablonov_7.jpg" /> <p> Во-первых, позвольте мне представиться. Меня зовут Сергей Гарсия, я штатный фронтенд-разработчик с 2-летним опытом. В то время я работал фронтенд-разработчиком в консалтинговой фирме Forbes 500 и небольшой компании. </p> <p> Может показаться, что это не большой опыт, но завершение второго года работы в качестве разработчика было для меня огромной вехой.Это связано с тем, что у меня не было реального опыта веб-разработки - и не так много опыта программирования в целом, кроме некоторого базового обучения C # и Java, которое я получил на нескольких онлайн-курсах. У меня также не было диплома по информатике, так как я получил диплом по управлению ИТ-проектами. </p> <p> Я никогда не писал о своем опыте, несмотря на всю помощь, которую я получил от замечательных ресурсов, таких как Medium, Stack Overflow и программные субреддиты Reddit. Итак, сегодня я решил это изменить. Сегодня я собираюсь рассказать вам, что пошло правильно, а что нет, так что если вы отправитесь в это путешествие, вам повезет больше, чем мне.</p> <p> Я знаю, что есть много подобных статей, но не очень многие из них обсуждают процесс с учетом дополнительных двух лет ретроспективного анализа. </p> <p> Я начну со своего пути, включая то, что пошло не так на </p>.<table><hr><h2 class="relpost">Смотрите также</h2> <ul class="relpost"> <li><a href="/raznoe/kak-pravilno-sdelat-odnostranichnyj-sajt.html" title="Как правильно сделать одностраничный сайт"><div class="relimg"><img src="/wp-content/uploads/kak-pravilno-sdelat-odnostranichnyj-sajt_0.jpg" /></div>Как правильно сделать одностраничный сайт</a></li> <li><a href="/raznoe/kak-peredelat-sajt-samomu.html" title="Как переделать сайт самому"><div class="relimg"><img src="/wp-content/uploads/kak-peredelat-sajt-samomu_0.jpg" /></div>Как переделать сайт самому</a></li> <li><a href="/raznoe/zagruzhayutsya-reklamnye-sajty-kak-ubrat.html" title="Загружаются рекламные сайты как убрать"><div class="relimg"><img src="/wp-content/uploads/zagruzhayutsya-reklamnye-sajty-kak-ubrat_0.jpg" /></div>Загружаются рекламные сайты как убрать</a></li> <li><a href="/raznoe/kak-zagruzit-sajt-na-hosting.html" title="Как загрузить сайт на хостинг"><div class="relimg"><img src="/wp-content/uploads/kak-zagruzit-sajt-na-hosting_0.jpg" /></div>Как загрузить сайт на хостинг</a></li> <li><a href="/raznoe/20-sajtov-kak-ruletka.html" title="20 сайтов как рулетка"><div class="relimg"><img src="/wp-content/uploads/20-sajtov-kak-ruletka_0.jpg" /></div>20 сайтов как рулетка</a></li> <li><a href="/raznoe/kak-uznat-istoriyu-posecsheniya-sajtov.html" title="Как узнать историю посещения сайтов"><div class="relimg"><img src="/wp-content/uploads/kak-uznat-istoriyu-posecsheniya-sajtov_0.jpg" /></div>Как узнать историю посещения сайтов</a></li> <li><a href="/raznoe/kak-uznat-svedeniya-o-yuridicheskom-lice-na-sajte-ifns.html" title="Как узнать сведения о юридическом лице на сайте ифнс"><div class="relimg"><img src="/wp-content/uploads/def.jpg" /></div>Как узнать сведения о юридическом лице на сайте ифнс</a></li> <li><a href="/raznoe/zhivi-kak-doma-sajt.html" title="Живи как дома сайт"><div class="relimg"><img src="/wp-content/uploads/def.jpg" /></div>Живи как дома сайт</a></li> <li><a href="/raznoe/kak-poznakomitsya-v-internete-s-muzhchinoj-bez-sajta-znakomstv.html" title="Как познакомиться в интернете с мужчиной без сайта знакомств"><div class="relimg"><img src="/wp-content/uploads/kak-poznakomitsya-v-internete-s-muzhchinoj-bez-sajta-znakomstv_0.jpg" /></div>Как познакомиться в интернете с мужчиной без сайта знакомств</a></li> <li><a href="/raznoe/kak-perenesti-sajt-na-drugoj-dvizhok-bez-poteri-pozicij.html" title="Как перенести сайт на другой движок без потери позиций"><div class="relimg"><img src="/wp-content/uploads/kak-perenesti-sajt-na-drugoj-dvizhok-bez-poteri-pozicij_0.jpg" /></div>Как перенести сайт на другой движок без потери позиций</a></li> <li><a href="/raznoe/kak-udalit-stranicu-na-sajte-znakomstv-mamba.html" title="Как удалить страницу на сайте знакомств мамба"><div class="relimg"><img src="/wp-content/uploads/kak-udalit-stranicu-na-sajte-znakomstv-mamba_0.jpg" /></div>Как удалить страницу на сайте знакомств мамба</a></li> </ul></table>