Как создать html сайт с нуля: Как создать простой HTML сайт в блокноте

Содержание

Пошаговая инструкция о том, как создать сайт html быстро и легко

От автора: без html не обходится создание любого веб-сайта. Это первый шаг к разработке нового интернет-проекта. Поэтому вопрос, как создать сайт html, нужно обсудить детально.

HTML – по сути текст. Поэтому в качестве его редактора может выступать даже блокнот. В предыдущей статье мы как раз создавали простейшую веб-страничку в блокноте. И вообще эта статья связана с той, потому что является ее непосредственным продолжением. Можете продолжить работать в блокноте или выбрать что-то удобнее. В процессе чтения статьи вы поймете, как создать сайт через html и css, хотя бы самый простой.

Если вы читали предыдущую статью, то помните, что мы создали два файла. В одном задавали структуру, а в другом внешний вид. Но красный фон нам пока ни к чему, поэтому эту строчку кода можно смело удалять. В теле страницы мы пока прописали следующее:

<body>
Привет, мир!
</body>

<body>

Привет, мир!

</body>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Создаем сайт с нуля в html

Как в html создаются блоки? Очень просто, с помощью тега div. Он парный.

<div>Это будет шапка сайта</div>
<div>Это будет боковая колонка</div>
<div>Это будет основная часть страницы</div>
<div>Это будет ее нижняя часть</div>

<div>Это будет шапка сайта</div>

<div>Это будет боковая колонка</div>

<div>Это будет основная часть страницы</div>

<div>Это будет ее нижняя часть</div>

Все это нужно вставить в содержимое тега body. Я думаю, вам предельно понятно, что должны будут представлять собой эти блоки. А ну-ка теперь откройте страницу в браузере. Вы увидите там эти четыре строчки, которые идут одна за другой. Пока совершенно непонятно, как из них сделать что-то похожее на сайт.

Рис. 1. Пока что перед нами лишь 4 строчки.

В бой идет один CSS

Настал час CSS! Сейчас мы используем его возможности. Чтобы обратиться к тегу div, в css файле нужно написать его название без угловых скобок. Вот так:

div{
border: 3px solid black;
width: 600px;
height: 100px;
}

div{

border:  3px solid black;

width: 600px;

height: 100px;

}

Обновите страницу. Мы задали нашим блокам толщину и цвет рамки, высоту и ширину. Только пока наша боковая колонка располагается не сбоку, да и вообще все элементы идут друг за другом сверху вниз. Но это ладно, видите ли вы гораздо более серьезную проблему? Мы обратились ко всем тегам div и правила применились ко всем блокам. Но ведь понятно, что блоки должны быть разными по размеру и местоположению, так что нам надо понять, как обращаться к каждому из них отдельно.

В CSS есть идентификатор. Чтобы задать его, нужно добавить тегу атрибут id с произвольным значением, которое будет именем идентификатора.

<div id = «header»>Это будет шапка сайта</div>
<div id = «sidebar»>Это будет боковая колонка</div>
<div id = «content»>Это будет основная часть страницы</div>
<div id = «footer»>Это будет ее нижняя часть</div>

<div id = «header»>Это будет шапка сайта</div>

<div id = «sidebar»>Это будет боковая колонка</div>

<div id = «content»>Это будет основная часть страницы</div>

<div id = «footer»>Это будет ее нижняя часть</div>

Совет. Давайте идентификаторам понятные имена, чтобы хорошо ориентироваться в коде. Теперь, чтобы обратиться к элементу через css, нужно написать имя идентификатора и перед ним поставить решетку:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

#sidebar{
width: 200px;
float: left
}
#content{
width: 400px;
float: left;
}

#sidebar{

width: 200px;

float: left

}

#content{

width: 400px;

float: left;

}

В итоге мы изменили стили для сайдбара и основного содержимого. Теперь эти блоки будут прижиматься к левому краю и расположатся на одной строке. Чтобы граница не вылезала за блок можно дописать в стили:

*{
box-sizing: border-box;
}

*{

box-sizing: border-box;

}

Тогда ширина рамки будет учитываться в ширине всего блока, а не добавляться к ней. Теперь у нас есть шапка, боковая колонка и контентная часть в одной строке, а ниже располагается футер (низ). Теперь все это выглядит так:

Но у меня сайт выровнен по центру, а вас наверняка прижат к левому краю, если вы делали все так, как в статье. Как отцентрировать все блоки? Очень просто, достаточно все их обернуть в один блок. Можно дать ему идентификатор. Например, wrapper, а потом в стилях задать для него:

#wrapper{
width: 600px;
margin: 0 auto
}
div:not(#wrapper){
border: 3px solid black;
height: 150px
}

#wrapper{

width: 600px;

margin: 0 auto

}

div:not(#wrapper){

border: 3px solid black;

height: 150px

}

Мы задали контейнеру ширину и внешние отступы (margin). Первая цифра задает отступ снизу и сверху, а вторая – слева и справа. Соответственно, ключевое слово auto создает такие отступы, чтобы элемент был выровнен прямо по центру.

А помните мы задавали стиль для всех div-ов? Он же применится и к wrapper-у, что неизменно приведет к ошибке. Поэтому далее я указал с помощью псевдокласса :not, что правила следует применять ко всем дивам, кроме блока с id = «wrapper», потому что ему рамка явно не нужна, а в высоту он точно не 150 пикселей.

Делаем сайт более близким к реальности

Пока у нас и шапка и основное содержимое имеет одинаковую высоту. Но в реальности это определенно не так, поэтому можете удалить строку, которая задает высоту для всех блоков. Обычно в боковой колонке, шапке и футере количество информации не меняется, поэтому там можно выставить фиксированную высоту, а основное содержимое на то и основное, что количество текста может там быть разным. Поэтому этому блоку лучше поставить min-height, то есть минимальную высоту.

#header{
height:70px
}
#sidebar{
height: 600px
}
#content{
min-height: 600px
}
#footer{
height: 50px
}

#header{

height:70px

}

#sidebar{

height: 600px

}

#content{

min-height: 600px

}

#footer{

height: 50px

}

А теперь откройте страничку в браузере. Уже намного больше похоже на сайт, не так ли? Даже если вы абсолютно не знали, как создать сайт с помощью html, после этого урока у вас хотя бы будет представление. Но до полноценного шаблона еще очень далеко: нужно разукрасить блоки в нужные цвета, наполнить их информацией, проставить отступы, задать шрифт и многое-многое другое. Например, можно покрасить шапку и футер в один цвет, а боковую колонку и контент в другую. Как насчет таких цветов?

#header, #footer{
background: #D2E4AF
}
#sidebar, #content{
background: #C3DB94
}

#header, #footer{

background: #D2E4AF

}

#sidebar, #content{

background: #C3DB94

}

А ну-ка обновите страничку.

Стало красивее, уже сейчас наше творение выглядит в разы лучше, чем в начале этой статьи. А представьте, в какую конфетку можно превратить сайт после вставки графики, разных декоративных элементов и более кропотливого оформления содержимого. В боковой колонке можно вывести меню, внизу можно указать контактную информацию, а в основной части вывести статью. Вот так вот и создаются сайты. Черные рамки, как вы понимаете, очень легко убрать при необходимости.

Как видите, создание сайта с помощью html не является очень сложной задачей, для которой нужно обладать большими знаниями.

Как я уже и говорил, процесс создания сайта сложно описать в одной статье. В прошлой мы могли прочитать азы и создать простейшую веб-страничку, теперь у нас есть привлекательный макет, который остается немного оформить. Не бросать же дело на полпути, правильно? Вот в следующей статье и продолжим. А вы не забывайте подписываться на блог webformyself, чтобы не упустить полезную информацию из мира сайтостроения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Делаем свой сайт html.

Урок 15.

Данный урок является заключительным в курсе «html для начинающих». На сегодняшний день Вы уже обладаете базовыми знаниями языка html. Опираясь на полученную информацию из предыдущих 14 занятий, мы сейчас сделаем небольшой сайт.

К концу этого урока у нас должен получиться такой сайт. Аналогичный сайт Вы уже сейчас можете сделать самостоятельно. В этом уроке я лишь продемонстрирую, как всю полученную информацию из 14 уроков грамотно объединить в одно целое (сайт).

Наш первый сайт будет состоять из файлов с которыми мы работали на прошлом уроке. Если у Вас не осталось всех файлов с 14-го урока, то скачайте их по ссылке.

После скачивания, во всех четырех файлах (index.html, audi.html, bmw.html, mercedes.html) удалите весь код, кроме тегов входящих в структуру html страницы. Папку image не трогайте, она остается без изменений.

Каркас страниц сайта.

Мы начнем создавать наш сайт с редактирования файла index.html, откройте его в Notepad.

Основной каркас страниц мы сделаем с помощью табличной верстки (урок 10, 11). В основе нашего сайта будет таблица с тремя строками. В первой строке таблицы будет писаться заголовок страницы. Во второй строке сделаем две ячейки, в одной из них будет меню, в другой фото. В третьей строке таблицы будет текст.

Каркас нашего сайта будет выглядеть так:

В каждую из ячеек таблицы вписаны слова помощники (заголовок, меню, фото, текст). Таблица без контента (текста) не отображается, даже если код таблицы написан верно. В каждой из ячейки должен быть хотя бы один символ. Если мы не впишем эти слова, то таблица не будет отображаться.

Пояснения к коду:
1) Для тега &lttable&gt мы задали атрибут border со значением 1, тем самым задав границы для таблицы. Атрибут cellspacing со значением 0, означает, что отступы между ячейками таблицы равны 0, то есть их нет. С помощью атрибута align и его значения center, мы выравниваем нашу таблицу по центру страницы. Атрибутом width со значением 750px мы задали ширину таблицы 750 пикселей. Высоту (атрибут height) можно не прописывать, так как у нас будет задана высота для каждой отдельной строки таблицы.

2) Теперь несколько слов о строении таблицы. Максимальное количество ячеек у нас в средней строке (2шт.) Это значит, что по правилам объединения, в каждой строке таблицы у нас должно быть по две ячейки (11 урок). Строение нашего сайта подразумевает, что в первой и третьей строках таблицы по одной ячейке. По этому для этих ячеек будет прописан атрибут colspan со значением 2. Благодаря этому атрибуту мы объединяем 2 ячейки в одну.

3) Для первой строки &lttr&gt мы задали высоту (height) 70px. В первой строке содержится одна ячейка &lttd&gt объединяющая в себе две ячейки. По этому для нее задан атрибут colspan со значением 2. Также для этой ячейки мы прописываем атрибут align и даем ему значение center, благодаря которому, текст написанный в этой ячейке будет выравниваться по центру. То есть заголовок который мы пишем, будет отображаться посередине ячейки.

4) Вторая строка содержит в себе 2 ячейки (меню и фото). В нашем сайте будут использованы фотографии, все они имеют размер 600×400 пикселей, по этому, чтобы все было ровно, мы задаем высоту нашей строки равную высоте фотографий, это значит 400px. Ширина всех фотографий 600px, по этому для второй ячейки &lttd&gt, где будет фото, мы задаем ширину 600px. Общая ширина таблицы у нас 750px, а ширина 2-ой ячейки средней строки 600px. Соответственно 1-ая ячейка средней строки будет иметь ширину 150px.

5) Для третьей строки &lttr&gt в которой будет текст, мы задали высоту 150px. Эта строка, как и первая строка, содержит в себе одну ячейку, которая объединила в себе две. По этому для этой ячейки &lttd&gt задан атрибут colspan со значением 2.

С составлением каркаса сайта мы закончили. Он будет одинаковый для каждой страницы сайта, по этому весь код со страницы index.html (в которой мы сейчас работали) мы копируем и вставляем в другие 3 файла нашего сайта (audi.html, bmw.html, mercedes.html).

Наполняем сайт контентом.

Структура сайта создана, теперь мы заполним контентом наши 4 страницы. Давайте начнем с audi.html.

1) Начнем мы с написания заголовка страницы. Заголовок прописывается с помощью тега &lth2&gt (6 урок).
На фото изображена только рассматриваемая часть кода страницы (1-ая строка &lttr&gt):

2) Теперь мы разместим меню в 1-ой ячейке 2-ой строки. Меню у нас будет состоять из 4 ссылок. Это ссылка на главную страницу (index.html) и 3 ссылки на страницы с марками авто.
На фото изображена только рассматриваемая часть кода страницы (1-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

Для того, чтобы меню было расположено в столбик, после каждой ссылки в конце строки мы ставим тег &ltbr&gt отвечающий за перенос строки. Если Вы не поняли каким образом будут работать эти 4 ссылки, то перечитывайте 13 урок.

3) Сейчас мы вставим фотографию во 2-ую ячейку 2-ой строки. Мы редактируем страницу audi.html, соответственно добавляем фото автомобиля ауди. Если Вы забыли, то напомню, наши 4 фотографии лежат в папке image.
На фото изображена только рассматриваемая часть кода страницы (2-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

4) Теперь у нас осталась одна не заполненная нижняя строка, в нее мы добавляем текстовое описание марки Audi. Текст который мы будем использовать в описании марок автомобилей, находится по этой ссылке.
На фото изображена только рассматриваемая часть кода страницы (3-я строка &lttr&gt):

Весь наш текст заключается в тег &ltp&gt. Если забыли, что это за тег, смотрите урок 6.

5) Страница почти готова. Для того чтобы наше творчество стало больше похоже на сайт, давайте зададим цвет фона страницы. Для этого тегу &ltbody&gt мы прописываем атрибут bgcolor и даем значение grey. Цвет фона стал серый. Теперь давайте зададим цвет фона нашей таблицы, для того чтобы она не сливалась с основным серым фоном страницы. Сделаем таблицу белой, для этого тегу &lttable&gt мы прописываем атрибут bgcolor и даем ему значение white.
На фото изображена только рассматриваемая часть кода страницы:

Если Вы все сделали верно, то при открытии через браузер, файл audi.html будет выглядеть так:

Теперь аналогичным образом пропишите код для страниц index.html, bmw.html, mercedes.html. На страницах будет меняться заголовок, фотография и текст. В результате должен получиться сайт из 4-ех страниц.

Если что-то не получилось, Вы можете скачать этот сайт по ссылке. Имея правильный вариант, Вы легко разберетесь в своих ошибках.

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

Как создать сайт html: первые шаги

Ноя
14

размещено в: HTML и DHTML.

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

Дело в том, что наличие собственного сайта дает массу преимуществ. Он может стать для вас источником заработка, помочь в поиске единомышленников, в популяризации товаров и услуг. Со временем сайт способен превратиться в большой и прибыльный бизнес. Однако, чтобы достичь этого, нужно пройти ряд обязательных этапов.

Этап первый. Сайтостроение

Если вы думаете о том, как создать сайт html, то первым делом вам следует получить базовые знания в области веб-дизайна. Поэтому вначале нужно познакомиться с языком HTML, зная который можно создать самый простой статичный сайт. Также не помешает получить представление и о каскадных таблицах стилей — CSS. Когда вы все это освоите, для вас не составит труда научиться пользоваться визуальными редакторами (к примеру, Adobe Dreamweaver), благодаря которым можно еще больше упростить процесс создания сайта.

Имея такую программу, вы будете избавлены от необходимости самостоятельно вписывать HTML или CSS. Обладая этими знаниями, вы легко сможете создать привлекательный и удобный статический сайт. Его особенностью является то, что он не позволит оставлять комментарии к статьям, создавать регистрацию, добавлять галереи изображений и иные элементы, присущие интерактивным интернет-проектам.

Этап второй. Публикация сайта в Интернете

  • Создание сайта с нуля html предполагает резервирование места, где он будет размещен в сети. Поэтому начинать нужно с покупки хостинга. Подобным термином обозначают дисковое пространства на сервере в Интернете, которое берет в аренду вебмастер, необходимое для хранения там содержимого сайта. Если говорить о ценах на такие услуги, то они могут быть различными. Определяющее значение здесь приобретают технические характеристики и период аренды. Если хостинг планируется приобрести для небольших проектов, которые только начинают создаваться, то он обойдется в незначительную сумму.
    • Следующий шаг здесь — покупка доменного имени. Под ним понимается адрес, при вводе которого на него может зайти каждый желающий. Его название часто соответствует содержимому сайта, но иногда между ними может и не быть никакой связи. Так, сложно найти что-то общее между словом «Google» и понятием «поисковая система». Но, несмотря на это, данный ресурс на текущий момент является самым популярным в мире.

    • Когда будут куплены домен и хостинг, останется настроить сайт. Для этого файлы сайта следует скопировать на сервер, используя специальную программу — ftp-клиент. Выполнив это, можно говорить о том, что ваш сайт начал функционировать. Убедиться в этом можно, если ввести в адресной строке браузера www.адрес-вашего-сайта.ru, после чего вы сможете посмотреть на свое творение. Небольшие сложности с настройкой могут возникнуть, если вы приобрели домен у одного регистратора, а хостинг у другого. В этом случае в настройках домена нужно ввести DNS-адрес используемого вами хостинга.

 Этап третий. Расскажите миру о своем сайте

Когда вы создадите свой сайт и наполните его контентом, у него будет очень мало посетителей. Заходить на него будут разве что ваши друзья и знакомые, если вы сообщите им о своем сайте. Не стоит этому удивляться, так как остальным людям неизвестно о появлении вашего сайта. Поэтому на данном этапе вам нужно оповестить всех об этом. Причем это должно быть сделано таким образом, чтобы ваш проект заинтересовал большое количество людей.

Для чего же это нужно? Увеличив посещаемость своего сайта, вы тем самым расширите свои возможности для превращения его в источник заработка, использования в целях рекламы и бизнеса. Комплекс мероприятий, направленных на популяризацию веб-ресурса, принято называть продвижением («раскруткой») сайта.

Наибольшая часть людей, которая придет на ваш сайт, узнает о нем из поисковой системы. В нашей стране сегодня самыми популярными поисковыми системами являются Google и Yandex. Причем их принцип работы таков, что они предлагают для пользователя информацию, которая в максимальной степени соответствует его запросу. В связи с этим, когда заходит речь о продвижении сайта, подразумевается повышение его места в выдаче поисковой системы. Подробнее о продвижении сайта в поиске можно узнать здесь https://advertmobile.net/aso.xhtml .

В процессе оценки сайтов и при размещении их на определенных местах в результатах выдачи поисковые системы опираются на некоторые критерии. В основе раскрутки лежит проведение мероприятий, которые смогут изменить данные результаты. Все это в целом принято назвать одним словом — поисковая оптимизация или SEO.

Сколько времени занимает создание сайта?

От качества ресурса зависят его сроки создания. Сайты на шаблонах создаются в течение 4-6 дней. Можно даже самостоятельно изготовить ресурс за 1 день, а то и несколько часов при наличии соответствующих знаний. Создание сайтов любой сложности может происходить от 2 недель до нескольких месяцев. Такой диапазон зависит от пожеланий клиента и уровня сложности ресурса, а также возможностей разработчика и скорость проработки им каждого этапа. Средний срок создания сайта примерно 20-30 дней. Разберем подробнее какие работы по созданию сайта проводятся в этот период.
 

Этапы разработки сайта и их сроки

Первый этап – это маркетинговые исследования и составление технического задания, в котором тщательно прорабатываются пожелания клиента, указываются технические нюансы ресурса, принцип его разработки и так далее. На эту работу уходит около 4-5 дней. Очень важно в этот период стабильный контакт с клиентом. В идеале, если техническое задание будет составляться в присутствии двух сторон при личном контакте. Однако вполне можно ограничиться телефонной связью или Skype.

Второй этап – разработка дизайна. Основываясь на ТЗ, дизайнер создает макет дизайна сайта. На это уходит от 5 до 7 дней. Срок может увеличиться, если готовый макет по каким-либо причинам не устраивает заказчика и дизайнер продолжает свою работу до тех пор, пока дизайн утвердится клиентом.

Третий этап – верстка. Верстальщик делает макет дизайна динамичным, создает адаптивную версию или другой вид вёрстки, подключает систему управления, ставит пароли от взломов, делает сайт кроссбраузерным. Для этого этапа понадобится до 10 дней. Если создается объемный проект с нестандартным функционалом, то к работе подключается программист, разрабатывая функции. На это уйдет еще 2-3 дня.

Последний, самый длительный этап – тестирование. Тестировщик имитирует ситуации, проверяя качество работы проекта с целью определения ошибок. Если ошибки найдены, то специалист заполняет отчет и передает его руководителю проекта. Тот, в свою очередь, распределяет работу по команде. На всю работу может понадобиться до 2 недель.

Стоит также учитывать форс-мажорные ситуации. Например, отсутствие связи с клиентом, случаи, независящие от разработчиков. Все ситуации оговариваются индивидуально с заказчиком и вносятся в договор перед началом создания сайта.

Как уже говорилось, создание сайта происходит в течение 30 дней. Ориентируйтесь на этот срок. И, конечно же, выбирайте специалистов, которые гарантируют своевременную сдачу проекта.

Комментарии в HTML.

Когда вы будете писать html-код, может понадобиться:

1) Сделать пометки в коде, по которым можно позже вспомнить, зачем нужен тот или иной фрагмент кода.

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

Либо, вам нужно сделать пометку, для чего нужен тот или иной тэг.

И.т.д. ситуаций может быть масса.

Делая такие заметки в коде, вы без труда можете вспомнить многие моменты, которые могут забываться с течением времени.

2) Вам может также понадобиться оставить информацию в коде о том, кто является создателем этой страницы, когда она создана и.т.д.

Все эти задачи можно решить с помощью комментариев HTML.

Комментарий – это  конструкция в коде, которая будет видна, если просматривать исходный html-код, но будет не видна при просмотре страницы в браузере.

Синтаксис у комментариев в html следующий:

<!-- Текст комментария -->

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

Рассмотрим HTML-документ со следующим содержимым:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<!--Пример комментария HTML. Этот текст будет невидим в браузере.-->
<p>Пример текста в абзаце</p>
</body>
</html>

Если вы будете просматривать такой HTML-файл в браузере, то все, что вы увидите, будет текст, который находится внутри абзаца.

Текст комментария на странице никак не отображается, но при просмотре исходного кода документа, комментарии видны и с ними можно работать.

что это такое? Краткий обзор HTML/CSS, PHP, Javascript и Python-фреймворков

Имя Язык Описание
Простой генератор статических сайтов с поддержкой блогов и один из старых SSG
Hugo Go Генератор статических сайтов, оптимизированный для скорости, простоты использования и настройки
Eleventy JavaScript A simpler генератор статических сайтов и более современная альтернатива Jekyll
Nuxt JavaScript (Vue) Простой способ экспортировать ваш Vue.js на статический веб-сайт