Posted:
Ноя 10, 2020
Comments:
0 Comments

Создать сайт в html пошаговая инструкция: Как создать сайт HTML в блокноте? Пошаговая инструкция с нуля для чайников

Содержание

Как создать сайт HTML в блокноте? Пошаговая инструкция с нуля для чайников

HTML – это язык гипертекстовой разметки,
которые позволяет создавать сайты людям, а браузерам на их компьютерах и
телефонах считывать и отображать эти сайты. По факту HTML не является языком программирования
даже. Он очень прост, и вы сможете освоить его на базовом уровне всего за 1
неделю!

Чтобы сделать сайт на языке HTML нужно подготовить файл формата index.html. Потребуется вставить в этот документ стандартный код, называемый скелетом и подключить к нему файл style.css. Впоследствии формируется меню, разрабатывается логотип и готовятся основные разделы: подвал, шапка сайта, блок контента. Приступим!

Содержание руководства

Создание HTML-сайта в блокноте

Чтобы понять, как сделать сайт
html, надо уяснить правила использования разметки гипертекста. Данный формат,
помимо текста содержит теги, позволяющие задавать команды для браузера, который
руководствуясь ими, отображает информацию в определённом виде, например, как заголовок
первого уровня: <h2>…</h2>.

Файл index.html можно делать в программе «Блокнот», но лучше воспользуйтесь бесплатной программой Notepad++, подсвечивающей синтаксис и ошибки языка HTML. Создайте новый файл и сохраните его в формате *.html  Впоследствии его нужно открыть в окне браузера, который и отобразит представленный на веб-странице контент. Надо вставить в этот документ стандартный код:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
<h2>Мой заголовок страницы</h2>
<p>Мой текст.</p>
</div>
</body>
</html>

Теперь осталось подключить «style.css» – файл со стилями, а для этого придётся прописать перед тегом </head>:

<link rel="stylesheet" href="style.css">

У тега могут быть различные
свойства, например, класс, идентификатор, высота и другие. Но в современном
интернете обходятся классом, а любые параметры – цвет, размер, бордюр, фон и
другие – задаются в CSS
стилях через класс.

Создаем меню

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

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
  <li>Главная</li>
  <li>Новости</li>
  <li>Контакты</li>
</ul>
<div>
<h2>Мой заголовок страницы</h2>
<p>Мой текст.</p>
</div>
</body>
</html>

Чтобы создать логотип надо сделать
папку «image», в
которой будут находиться все картинки, имеющие отношение к сайту.

Внимание! Примерный размер логотипа составляет 200х100 px, скачайте и загрузите выбранную картинку в папку.

Логотипу нужно присвоить имя и сделать для него разрешение в формате png или jpg (а начиная с 2019 года в обиход входит формат webp, которые является более современным и легким).

<img src="image/logo.png" alt="Наш логотип">

Чтобы сделать на сайте подвал внедряем с помощью HTML следующее содержание:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
  <li><img src="image/logo.png" alt="Наш логотип"></li>
  <li>Главная</li>
  <li>Новости</li>
  <li>Контакты</li>
</ul>
<div>
<h2>Мой заголовок страницы</h2>
<p>Мой текст.</p>
</div>
<div>
<p>© 2019 Копирайт. <a href="https://goodlifer.ru/">Блог Гудлайфера</a>.</p>
</div>
</body>
</html>

Внимание! Именно в подвале при создании сайтов делается копирайт.

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

Работа с таблицами стилей CSS

Нами ранее была сформирована таблица стилей CSS, но вот что-либо добавить туда, мы пока не удосужились.  Начнём с написания для сайта такого кода HTML:

* {
box-sizing:border-box;
}
.main {
width:1170px;
margin:0 auto;
border: 5px solid black;
}

Звездочка обозначает – любые элементы,
то есть все. Теперь рамки, отступы, не будут увеличивать ширину блоков, а для
установления правил, определяющих внешний вид веб-страницы, нам придётся
обратиться к классу main, задав ряд команд:

  • ширина контейнера;
  • отображение по центру;
  • добавление рамок чёрного цвета с каждой из сторон.

Теперь можно с помощью HTML задать внешний вид
ключевых структурных блоков:

.menu {
margin:0 0 40px 0;
padding:0px;
}
.menu li {
display:inline-block;
width:auto;
padding:7px 15px;
}
.footer {
background-color:#f4f4f4;
}

Принцип работы заключается в
обращении к существующим элементам, у каждого из которых есть персональный
идентификатор или класс. У тега класс прописывается в свойстве class=”myname” и в CSS файле записывается .myname, а идентификатор
по аналогии id=”myname2″
и #myname2.

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

  • ширина;
  • высота;
  • правило float: left – прижатие компонента к
    левой стороне родительского компонента.

Внимание! Идентичное свойство задаётся разделу с контентом,
прижимающемуся с той же стороны, но после колонки.

После этого пишем блок
«Подвал»,  который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и  «Боковая колонка», считающиеся
плавающими. «Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both.

Однако пока наш сайт на HTML чёрно-белый, как немое
кино с Чарли Чаплином. Разукрасить его можно двумя методами:

  1. Фон прописывается контейнеру по классу .content и
    задаётся сразу для всего сайта.
  2. Отдельно задаётся для каждого из блоков, для
    подвала, шапки, контента и т.д.

Рекомендую дать сайт общий цвет, воспользовавшись одним кодом:

.main {backgroun-color:#f9f9f9;}

В видео уроке я немного дописал таблицу стилей и вот что получилось.

Скачать готовый HTML-сайт, разработанный в уроке можно по ссылке ниже:

Архивархив с готовым сайтом на HTML

Видео-урок разработки сайта

Теги – основа языка HTML

Пользуясь простыми примерами кода
HTML, мы словно
конструктор, собрали свой site, однако можем ли мы сделать это самостоятельно?
Чтобы написать веб-страницу с нуля, нужно знать всё о тегах и принципах их
использования.   Разберёмся, как создаются
сайты html, опираясь на азы, знакомые каждому профессиональному
веб-программисту.  Тегов очень много,
поэтому мы выделим основные:

  • <html></html> – используются для
    открытия и закрытия веб-страницы, давая браузеру понять, что он имеет дело с
    веб-документом;
  • <head></head> – содержит ключевые
    данные, касающиеся веб-страницы;
  • <title></title> – содержит основной
    заголовок – описание содержания страницы;
  • <body></body> – тело страницы, в
    котором помещаются все объекты, которые нужно видеть пользователям Интернета,
    это могут быть картинки, заголовки, текстовый контент.

Внимание! Надо уже на
этапе создания сайта подумать о его продвижении, так как теги Title и h2 будут
влиять на ранжирование страниц в результатах поисковой выдачи.

Чтобы информация на страничках отображалась по центру, а ни как придётся, надо пользоваться тегами <center>, без которых текст будет располагаться справа. Наверное, вы обратили внимание, что все теги парные, то есть один открывающий, а второй закрывающий. Однако существуют и единичные теги и самый распространённый из них это <br/>. Именно его использование помогает перепрыгивать с одной строчки на другую, делая отступ. Таких пробелов в статьях будет ровно столько, сколько веб-мастер поставит соответствующих тегов HTML.

Этапы разработки веб-проекта

Работа проводится в несколько этапов:

  1. Подготовка макета, позволяющего получить
    визуальный образ с помощью растровых редакторов. Также удобно рисовать макет на
    листе бумаги.
  2. Вёрстка
    из макета psd, создаваемого дизайнером в программе Photoshop, с последующей адаптацией к
    мобильным устройствам  и проведением
    тестирования, позволяющего корректно отображаться HTML сайту во
    всех браузерах.
  3.  Верстка HTML макета на систему управления сайтом или язык PHP, что позволяет сделать
    веб-ресурс динамичным.

Макет делают в графических
редакторах, таких как Adobe Photoshop, в котором нужно открыть новый документ,
с присвоением ему имени MySite. Чтобы добиться корректного отображения выбираем
большое разрешение от 1170 пикселей по ширине и более 800 px по высоте.

Осталось активировать изображение
направляющими и линейками, которые обязательно должны быть привязаны к границам
формируемого документа.   Пользуясь
инструментами «Текст», «Форма», «Прямая», «Раскройка» добавляют необходимые
элементы страницы, делая полноценный шаблон сайта HTML.

Вёрстка заключается в размещении
всех блоков в текстовом файле index.html., который надо начать со строки
<!DOCTYPE html>, чтобы браузер знал, как проводить обработку содержимого.
Затем размещаются теги, содержащие отображаемую и скрытую от пользователя
информацию.

Внимание! Теги <head>…</head>, а точнее информация,
размещённая между ними, не будет видна пользователям.

Организация текста на страницах
преимущественно осуществляется основными тегами:

  1. <div>…</div>
  2. <p>…</p>
  3. <table>…</table>
  4. Списками
    <ul><li>…</li></ul>

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

Внимание! Задать таблицу CSS можно в рамках
<head>, но чаще всего это делают в файле style.css, помещая внутри тегов
ссылку на него.

Надо правильно разместить эту ссылку, пользуясь соответствующим тегом HTML: <link href=”style.css” type=”text/css” rel=”stylesheet”>.

Альтернативные методы бесплатного создания сайтов

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

  • Weblium;
  • UKit;
  • Nethouse;
  • UMI.

Альтернативой конструкторам служат CMS системы, пригодные для разработки
блогов, визиток и даже корпоративных ресурсов и форумов.  Наиболее популярны следующие из них:

  • WordPress;
  • Joomla;
  • InstantCms.

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

Заключение

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

Сделать сайт html — в блокноте, программа, с нуля, теги, код

Как сделать сайт html?

Такой вопрос задают пользователи, которые решили самостоятельно создать web ресурс.

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

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

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

Как создать страницу html

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

А на самом деле, потребуется всего лишь:

  1. Создать web-страницу в виде файла (электронного документа) определенного формата. Если быть более точным – это должен быть файл index с расширением .html или .htm.
  2. Страница должна находиться в интернете с открытым постоянным доступом и размещаться на специальном сервисе.

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

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

Как сделать страницы сайта в Word

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

Короче, все те элементы, которые сделают статью интересной. В итоге, после того, как контент готов, оформляем дизайн таким образом, в каком виде нам бы хотелось видеть сайт в интернете.

Затем запись надо сохранить. Для этого, в меню редактора Word надо выбрать «Сохранить как». Откроется диалоговое окно, надо дать имя документу (index.html) и выбрать расширение веб-страница.

Далее: нажимаем «Сохранить».

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

Данный способ создания интернет страниц имеет большой недостаток:

Word генерирует много лишнего кода html. Поэтому этот способ создания сайтов распространения не получил.

Как сделать сайт html в Блокноте

Гораздо удобнее и правильнее будет сделать страницу в Блокноте. Это стандартная программа для Windows.

Для начала потребуется прописать структуру HTML документа, которая имеет следующий вид:

<html></html> — теги, определяющие начало и конец документа;

<head></head> — ответственные за заголовок данной страницы;

<title></title> — теги, прописывающие название сайта;

<body></body> — прописывается код сайта.

Пример структуры

В первой строчке документа прописана версия языка html.

Пропишем данный код в Блокноте и сохраним в формате .html. Затем откроем в любом браузере и если все верно — увидим пустую страницу.

Создание дизайна

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

Я выбрала такой макет: в верхней части сайта – шапка, под ней 4 кнопки, меню – слева и текст – справа.

Чтобы создать такой сайт, необходимо сделать разметку с помощью таблиц.

Разметка

На языке html таблица определяется тегами <table></table>, а строка в ней — <tr></tr>, столбцы — <td></td>.

Таблица будет иметь следующий вид:

Где:

8 и 33 строки открывают и закрывают таблицу;

14 и 21 — открывают и закрывают строку в данной таблице;

15, 16, 17, 18  – открывают и закрывают столбец;

22 и 25 строки — открывают и закрывают столбец. При этом атрибут colspan=”1” – количество столбцов, width=”170” и height=”317” – ширина и длина ячейки;

27 и 30 — опять открывают и закрывают столбец. В данном случае атрибут colspan=”3” — ячейка растягивается на 3 столбца. Ее размеры составляют: width=”510” и height=”317”.

Таким способом и происходит создание страницы с помощью таблиц.

Если убрать в 8-ой строке атрибут border=”1”, то таблица станет невидимой, что мы и сделаем.

Создание шаблона сайта с помощью программы

Чтобы сделать шаблон нам потребуется программа Adobe Photoshop. Открываем ее и создаем новый документ «Файл» — «Новый». Указываем ширину, высоту, разрешение, цветовой режим, фон.

Прописываем все так, как показано здесь:

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

Для отображения линейки, включаем ее «Просмотр» — «Линейки» и прямо с линейки вытаскиваем направляющие и создаем шаблон, как на рисунке:

Добавление фона

Для большей наглядности выбираем фон нашего сайта и закрасим его, например, зеленоватым. Для этого необходимо в Photoshop создать новый слой, кликнув на панели инструментов «Палитра цветов» и прописываем тот оттенок, который мы выбрали.

Зажмем горячие клавиши Alt + Backspace и документ окраситься в тот цвет, который мы указали. Таким способом можно выбирать любой фон.

Навигация

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

Создадим новый слой, для чего берем инструмент «Прямоугольная область». Выделяем шапку сайта и, зажав клавиши Alt + Backspace, закрашиваем шапку. Затем нажимая Ctrl + T один раз, зажав клавишу ALT, уменьшаем шапку.

Должно получиться что-то на подобие:

Похожим образом, делаем и другие области сайта. Можно изменить цвет, сделать рамку у блоков, добавить тень, наложить градиент. Для этого выделяем слой с зажатой клавишей Ctrl и используем функции Photoshop.

Выбираем необходимую функцию, например: обводка. Указываем ее размер в пикселях и цвет.

Подобным образом создаем другие элементы на сайте.

На кнопочках прописываем названия, можно прописать и в html, а можно сразу сделать графичные кнопки. Выбираем инструмент «Текст» и делаем надписи. Например: Главная, Услуги, Контакты и т. п.

Оформление шапки

Добавляем картинку в шапку сайта и простым перетаскиванием картинки, размещаем ее в верхнем блоке сайта. Изменить размер изображения можно с помощью Ctrl + T.

В итоге получим готовый шаблон сайта:

Разрежем шаблон на части и сохраним все в отдельной папке в нужном формате.

Берем инструмент «раскройка» и выделим каждую область сайта.

Все сохраняем. Идем в меню, выбираем «Файл» —> «Сохранить для Web». Сохраняем в формате .jpeg или .png.

В итоге: на рабочем столе – папка с готовыми блоками будущего сайта. Перенесем эти файлы в нашу папку с сайтом.

Верстка сайта на html

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

Ниже приводится окончательный результат:

Я думаю, что здесь не сложно разобраться, что к чему.

10 строка – прописываем шапку сайта атрибутом background;

15, 16, 17, 18 – вставляем кнопки и прописываем ссылки;

22 строка – прописываем фон меню атрибутом background;

23 – 28 строчки – прописываем пункты меню сайта;

33 строка – текст сайта.

Оказывается, что ничего сложного в создании сайта на html нет.

В итоге мы узнали, как сделать сайт в html.

Вот и все, наш сайт готов!

Да, это, конечно, простая страница, созданная на html.

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

Попробуйте и начните с малого, и если вы научитесь создавать простые страницы, со временем вы сможете создать нечто большее. Самое главное – не бросайте обучение, тогда в скором времени вы научитесь создавать профессиональные сайты.

Рекомендую:

Как самому сделать сайт

HTML-редакторы

❮ Назад
Далее ❯

Простой текстовый редактор — это все, что вам нужно для изучения HTML.

Изучение HTML с помощью Блокнота или TextEdit

Веб-страницы можно создавать и изменять с помощью профессиональных HTML-редакторов.

Однако для изучения HTML мы рекомендуем простой текстовый редактор, такой как Notepad (ПК) или TextEdit (Mac).

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

Выполните следующие шаги, чтобы создать свою первую веб-страницу с помощью Блокнота или TextEdit.

Шаг 1: Откройте Блокнот (ПК)

Windows 8 или более поздняя версия:

Откройте начальный экран (символ окна внизу слева на экране). Введите Блокнот .

Windows 7 или более ранняя версия:

Открыть Пуск >
Программы > Аксессуары > Блокнот

Шаг 1: Откройте TextEdit (Mac)

Откройте Finder > Приложения > TextEdit

Также измените некоторые настройки, чтобы приложение
правильно сохранять файлы.
В Настройки > Формат >
 выберите «Обычный текст»

Затем в разделе «Открыть и сохранить» установите флажок «Отображать HTML-файлы как HTML-код вместо форматированного текста».

Затем откройте новый документ, чтобы разместить код.

Шаг 2. Напишите HTML-код

Напишите или скопируйте в Блокнот следующий HTML-код:



Мой первый заголовок

Мой первый абзац.


Шаг 3: Сохраните HTML-страницу

Сохраните файл на своем компьютере. Выберите «Файл » > «Сохранить как » в меню «Блокнот».

Назовите файл «index.htm» и установите кодировку
UTF-8 (предпочтительная кодировка для файлов HTML).

Совет: В качестве расширения файла можно использовать .htm или .html. Нет никакой разницы; Это тебе решать.

Шаг 4. Просмотр HTML-страницы в браузере

Откройте сохраненный HTML-файл в своем любимом браузере (дважды щелкните файл,
или щелкните правой кнопкой мыши — и выберите «Открыть с помощью»).

Результат будет выглядеть примерно так:

Онлайн-редактор W3Schools — «Попробуйте сами»

С помощью нашего бесплатного онлайн-редактора вы можете редактировать HTML-код и просматривать результат в своем браузере.

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

Пример




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

Это заголовок

Это является абзацем.


Попробуйте сами »

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.

W3Schools Spaces

Если вы хотите создать свой собственный веб -сайт и сохранить свой код в Интернете, попробуйте наш бесплатный Builder , называемый W3Schools Spaces :

W3Schools Spaces

W3Sш.

в браузере.

Начать сейчас

❮ Назад
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

|
О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Как сделать сайт

❮ Предыдущая
Далее ❯

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

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

Демо-версия

Попробуйте сами

«Черновик макета»

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

Заголовок

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

Боковое содержимое

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

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

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

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

.3

3

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

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

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

Примечание: Если вы не знаете HTML и CSS, мы рекомендуем вам
начните с чтения нашего учебника по HTML.

Пример




Заголовок страницы


<стиль>
тело {
семейство шрифтов: Arial, Helvetica, без засечек;
}


Мой сайт

Созданный мной сайт.


Попробуйте сами »

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

  • Объявление определяет этот документ как HTML5
  • Элемент является корневым элементом HTML
    страница
  • Элемент содержит метаинформацию о документе
  • Элемент </code> указывает заголовок документа</li><li> Элемент <code><meta> </code> должен определять набор символов как UTF-8</li><li> Элемент <code><meta> </code> с name=»viewport» позволяет веб-сайту хорошо выглядеть на всех устройствах и разрешениях экрана</li><li> Элемент <code><br /><style></code>содержит стили для веб-сайта (макет/дизайн) </li><li>Элемент <code><body></code>содержит видимое содержимое страницы </li><li>Элемент <code><br/><h2></h2><p></code>определяет большой заголовок </li><li>Элемент <code><p></code>определяет абзац </li></ul><hr/><h3><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B3%D0%BE_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span>Создание содержимого страницы <span class="ez-toc-section-end"></span></h3><p>Внутри элемента <code><body></code>нашего веб-сайта мы будем использовать наш «Макет<br/>Черновик"<br /> и создайте: </p> <ul> <li> Заголовок </li> <li> Панель навигации </li> <li> Основное содержание </li> <li> Дополнительный контент </li> <li> Нижний колонтитул </li> </ul> <hr/> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Заголовок <span class="ez-toc-section-end"></span></h3> <p> Заголовок обычно располагается в верхней части веб-сайта (или прямо под верхней<br /> меню навигации).<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/architecture-and-design.ru/wp-content/uploads/b/2/c/b2c4063a76f94d77d81b2ea79b06903c.jpeg' /><noscript><img loading='lazy' src='/800/600/http/architecture-and-design.ru/wp-content/uploads/b/2/c/b2c4063a76f94d77d81b2ea79b06903c.jpeg' /></noscript> Часто содержит логотип или название веб-сайта: </p> <p><div>   </p> <h2>Мой сайт</h2> <p>   </p> <p>Веб-сайт<br /> создано мной.</p> <p> </div> </p> <p> Затем мы используем CSS для оформления заголовка: </p> <p data-readability-styled="true"> .header { <br />   заполнение: 80 пикселей; /* некоторые отступы */ <br />   text-align: center; /* текст по центру */ <br />   background: #1abc9c;<br /> /* зеленый фон */ <br /> белый цвет; /* белый цвет текста */ <br /> } </p> <p> /* Увеличить размер шрифта элемента </p> <h2><span class="ez-toc-section" id="i"></span> */ <span class="ez-toc-section-end"></span></h2> <p> .header h2 { <br />   размер шрифта: 40 пикселей; <br /> } </p> <p> Попробуйте сами » </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8-2"></span> Панель навигации <span class="ez-toc-section-end"></span></h3> <p> Панель навигации содержит список ссылок, помогающих посетителям перемещаться по<br /> ваш сайт: </p> <p><div>   <a href="#">Ссылка</a> <br />   <a href="#">Ссылка</a> <br /> <a href="#">Ссылка</a> <br />   <a href="#">Ссылка</a> </div> </p> <p> Используйте CSS для оформления панели навигации: </p> <p data-readability-styled="true"> /* Стиль верхней панели навигации */ <br /> .<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/2sotki.ru/wp-content/uploads/6/5/5/6553c0051c2ac7fc837e3c8090975247.jpg' /><noscript><img loading='lazy' src='/800/600/http/2sotki.ru/wp-content/uploads/6/5/5/6553c0051c2ac7fc837e3c8090975247.jpg' /></noscript> navbar { <br />   переполнение: скрыто; /* Скрыть переполнение */ <br />   background-color: #333;<br /> /* Темный цвет фона */ <br /> } </p> <p> /* Стиль ссылок панели навигации */ <br /> .navbar<br /> a { <br />   с плавающей запятой: слева; /* Убедитесь, что ссылки остаются<br /> рядом */ <br />   display: block; /* Изменяем отображение на<br /> заблокировать по соображениям безопасности (см. ниже) */ <br />   color: white; /* Белый цвет текста */ <br />   text-align: center;<br /> /* Текст по центру */ <br /> отступ: 14px 20px; /* Добавляем отступы */ <br /> украшение текста: нет;<br /> /* Удалить подчеркивание */ <br /> } </p> <p> /*<br /> Ссылка с выравниванием по правому краю */ <br /> .navbar a.right { <br />   float: right;<br /> /* Поместить ссылку вправо */ <br /> } </p> <p> /*<br /> Изменение цвета при наведении/наведении мыши */ <br /> .navbar a:hover { <br /> цвет фона: #ddd; /* Серый цвет фона */ <br />   color: black;<br /> /* Черный цвет текста */ <br /> } </p> <p> Попробуйте сами » </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82"></span> Контент <span class="ez-toc-section-end"></span></h3> <p> Создайте двухколоночный макет, разделенный на «дополнительный контент» и «основной контент».<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/architecture-and-design.ru/wp-content/uploads/c/f/b/cfba53ce0f7186250d4e63db746dc1c0.jpeg' /><noscript><img loading='lazy' src='/800/600/http/architecture-and-design.ru/wp-content/uploads/c/f/b/cfba53ce0f7186250d4e63db746dc1c0.jpeg' /></noscript> </p> <p><div>   </p> <div>...</div> <p>   </p> <div >...</div> <p> </div> </p> <p> Мы используем CSS Flexbox для обработки макета: </p> <p data-readability-styled="true"> /* Обеспечьте правильный размер */ <br /> * { <br />   box-sizing: border-box; <br /> } </p> <p> /* Контейнер столбцов */ <br /> .row { <br />   display: flex; <br />   flex-wrap: упаковка; <br /> } </p> <p> /* Создать<br /> два неравных столбца, расположенных рядом друг с другом */ <br /> /* Боковая панель/левый столбец<br /> */ <br /> .side { <br />   flex: 30%; /* Устанавливаем ширину боковой панели<br /> */ <br />   фоновый цвет: #f1f1f1; /* Серый цвет фона<br /> */ <br />   отступ: 20 пикселей; /* Немного заполнения */ <br /> } </p> <p> /* Основной столбец */ <br /> .main {<br /> <br />   гибкий: 70 %; /* Устанавливаем ширину основного содержимого */ <br />   background-color: white; /* Белый цвет фона */ <br />   padding: 20px; /* Немного заполнения */ <br /> } </p> <p> Попробуйте сами » </p> <p> Затем добавьте медиа-запросы, чтобы сделать макет адаптивным.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/architecture-and-design.ru/wp-content/uploads/f/7/b/f7ba407051f0ef17f663d213890d1296.jpeg' /><noscript><img loading='lazy' src='/800/600/http/architecture-and-design.ru/wp-content/uploads/f/7/b/f7ba407051f0ef17f663d213890d1296.jpeg' /></noscript> Это позволит убедиться<br /> что ваш сайт хорошо выглядит на всех устройствах (настольных компьютерах, ноутбуках, планшетах и<br /> телефоны). Измените размер окна браузера, чтобы увидеть результат. </p> <p data-readability-styled="true"> /* Отзывчивый макет — когда ширина экрана меньше 700 пикселей, сделайте два<br /> столбцы располагаются друг над другом, а не рядом */ <br /> @media<br /> экран и (максимальная ширина: 700 пикселей) { <br />   .row { <br /> flex-направление: столбец; <br />   } <br /> } </p> <p> /*<br /> Отзывчивый макет — когда ширина экрана меньше 400 пикселей, сделайте<br /> навигационные ссылки располагаются друг над другом, а не рядом */ <br /> @media screen and (max-width: 400px) { <br />   .navbar a { <br /> поплавок: нет; <br />     ширина: 100%; <br />   } <br /> } </p> <p> Попробуйте сами » </p> <p> <strong> Совет: </strong> Чтобы создать макет другого типа, просто измените ширину гибкости (но убедитесь, что в сумме она составляет 100%). </p> <p> <strong> Совет: </strong> Вам интересно, как работает правило @media? Подробнее о<br /> это в нашей главе CSS Media Queries.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/romanchueshov.ru/wp-content/uploads/bfi_thumb/sait-na-html-p44czu9jw4wo16hwmo0urqh77i6rz4fv0a6ar3yism.jpg' /><noscript><img loading='lazy' src='/800/600/http/romanchueshov.ru/wp-content/uploads/bfi_thumb/sait-na-html-p44czu9jw4wo16hwmo0urqh77i6rz4fv0a6ar3yism.jpg' /></noscript> </p> <p> <strong> Подсказка: </strong> Чтобы узнать больше о модуле Flexible Box Layout, прочтите нашу<br /> Глава CSS Flexbox. </p> <p> <strong> Что такое размер коробки? </strong> </p> <p> Вы можете легко создать три плавающих ящика рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого блока (например, отступы или границы), блок ломается. Свойство <code> box-sizing </code> позволяет нам включать отступы и границы в общую ширину (и высоту) блока, следя за тем, чтобы отступ оставался внутри блока и не ломался. </p> <p> Подробнее о свойстве box-sizing можно прочитать в нашем учебнике CSS Box Sizing. </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9D%D0%B8%D0%B6%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D1%82%D0%B8%D1%82%D1%83%D0%BB"></span> Нижний колонтитул <span class="ez-toc-section-end"></span></h3> <p> Наконец, мы добавим нижний колонтитул. </p> <p><div>   </p> <h3><span class="ez-toc-section" id="Footer"></span>Footer<span class="ez-toc-section-end"></span></h3> <p> </div> </p> <p> И стиль: </p> <p> .footer { <br />   padding: 20px; /* Немного отступов */ <br />   text-align: center; /* Текст по центру*/ <br />   background: #ddd;<br /> /* Серый фон */ <br /> } </p> <p> Попробуйте сами » </p> <p> Поздравляем! Вы создали адаптивный сайт с нуля.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/f/4/0/f40f515ca8fb6222d32fe11c1c173c71.png' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/f/4/0/f40f515ca8fb6222d32fe11c1c173c71.png' /></noscript> </p> <hr/> <h3><span class="ez-toc-section" id="W3Schools_%D0%9F%D1%80%D0%BE%D1%81%D1%82%D1%80%D0%B0%D0%BD%D1%81%D1%82%D0%B2%D0%B0"></span> W3Schools Пространства <span class="ez-toc-section-end"></span></h3> <p> Если вы хотите создать свой собственный веб-сайт и разместить файлы .html, попробуйте наш<br /> <strong> конструктор сайтов </strong> , называется <strong> W3schools Spaces </strong> : </p> </p> <p data-readability-styled="true"> Получите свой собственный сайт </p> <p> ❮ Предыдущая<br /> Следующий ❯ </p> <p></p> <h5><span class="ez-toc-section" id="%D0%92%D0%AB%D0%91%D0%9E%D0%A0_%D0%A6%D0%92%D0%95%D0%A2%D0%90-2"></span> ВЫБОР ЦВЕТА <span class="ez-toc-section-end"></span></h5> <hr/> <hr/> <hr/> <p><h5><span class="ez-toc-section" id="%D0%9B%D1%83%D1%87%D1%88%D0%B8%D0%B5_%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8-2"></span> Лучшие учебники <span class="ez-toc-section-end"></span></h5> <p>Учебное пособие по HTML <br /> Учебное пособие по CSS <br /> Учебное пособие по JavaScript <br /> Учебное пособие <br /> Учебное пособие по SQL <br /> Учебное пособие по Python <br /> Учебное пособие по W3.CSS <br /> Учебное пособие по Bootstrap <br /> Учебное пособие по PHP <br /> Учебник по Java <br /> Учебник по C++ <br /> Учебник по jQuery </p> <p><h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Основные ссылки <span class="ez-toc-section-end"></span></h5> <p>Справочник по HTML <br /> Справочник по CSS <br /> Справочник по JavaScript <br /> Справочник по SQL <br /> Справочник по Python <br /> Справочник по W3.CSS <br /> Справочник по Bootstrap <br /> Справочник по PHP <br /> Цвета HTML <br /> Справочник по Java <br /> Справочник по Angular <br /> Справочник по jQuery </p> <p>3 Top4 Examples<br /> Примеры HTML <br /> Примеры CSS <br /> Примеры JavaScript <br /> Примеры инструкций <br /> Примеры SQL <br /> Примеры Python <br /> Примеры W3.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/b/3/c/b3c1824b438e82b2728aa921b86f6d7c.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/b/3/c/b3c1824b438e82b2728aa921b86f6d7c.jpeg' /></noscript></p> <div class="clear"></div> <p class="inner-meta">This entry was posted in <a href="https://consei.ru/category/populyarnoe" rel="category tag">Популярное</a></p> </div> <div class="post comments" id="comments"> <!-- You can start editing here. --> </div> </div> </div> </div> <!-- END Narrowcolumn --> <div id="sidebar" class="profile"> <ul> <li class="widget png_scale" id="widget_categories"> <h2 class="blocktitle"><span>Рубрики</span></h2> <ul> <li class="cat-item cat-item-23"><a href="https://consei.ru/category/adsense">Adsense</a> (3) </li> <li class="cat-item cat-item-20"><a href="https://consei.ru/category/chrome">Chrome</a> (2) </li> <li class="cat-item cat-item-19"><a href="https://consei.ru/category/direkt">Директ</a> (86) </li> <li class="cat-item cat-item-18"><a href="https://consei.ru/category/dorvei">Дорвеи</a> (39) </li> <li class="cat-item cat-item-15"><a href="https://consei.ru/category/klyuchevye-slova">Ключевые слова</a> (238) </li> <li class="cat-item cat-item-14"><a href="https://consei.ru/category/lendingi">Лендинги</a> (78) </li> <li class="cat-item cat-item-12"><a href="https://consei.ru/category/populyarnoe">Популярное</a> (12 235) </li> <li class="cat-item cat-item-17"><a href="https://consei.ru/category/prodvizhenie">Продвижение</a> (498) </li> <li class="cat-item cat-item-8"><a href="https://consei.ru/category/raznoe">Разное</a> (41) </li> <li class="cat-item cat-item-22"><a href="https://consei.ru/category/rsya">Рся</a> (6) </li> <li class="cat-item cat-item-13"><a href="https://consei.ru/category/semanticheskoe-yadro">Семантическое ядро</a> (366) </li> <li class="cat-item cat-item-21"><a href="https://consei.ru/category/spam">Спам</a> (10) </li> <li class="cat-item cat-item-16"><a href="https://consei.ru/category/ssylochnoe">Ссылочное</a> (73) </li> <li class="cat-item cat-item-11"><a href="https://consei.ru/category/ticz">Тиц</a> (381) </li> </ul> </li> </ul></div> <div class="clear"></div> </div> <div class="clear"></div> </div><!-- END main wrapper --> <div id="footer"> <div class="wrapper" style="margin:auto;"> <p style="margin-left:50px;padding-top:10px;"> </p><div style="margin-left:50px;padding-bottom:10px;border-bottom:1px solid #444;"> <ul class="clearfix"> <li style="padding-right:8px;height:32px;padding-left:43px;margin:17px 0 0 0;float:left;background-image:;background-repeat:no-repeat;">Подписаться на RSS <br><span>100+ Подписчиков</span></li> <li style="padding-right:8px;height:32px;padding-left:43px;margin:17px 0 0 0;float:left;background-image:;background-repeat:no-repeat;">Услуги и реклама<span><br>Я свободен</span></li> <li style="padding-right:8px;height:32px;padding-left:43px;margin:17px 0 0 0;float:left;background-image:;background-repeat:no-repeat;">Контакты <span><br>Скажи мне привет!</span></li> </ul> </div><p></p> <br><p style="margin-left:50px;padding-top:10px;"> </p> <p style="margin-left:50px;color:#ffffff;">© Копирование моих статей приветствуется, если вы поставите ссылку на мой блог будет просто математично!</p> <div class="clear"></div> </div> </div> <style type="text/css">.archive #nav-above,.archive #nav-below,.search #nav-above,.search #nav-below,.blog #nav-below,.blog #nav-above,.navigation.paging-navigation,.navigation.pagination,.pagination.paging-pagination,.pagination.pagination,.pagination.loop-pagination,.bicubic-nav-link,#page-nav,.camp-paging,#reposter_nav-pages,.unity-post-pagination,.wordpost_content .nav_post_link,.page-link,.post-nav-links,.page-links,#comments .navigation,#comment-nav-above,#comment-nav-below,#nav-single,.navigation.comment-navigation,comment-pagination{display:none !important}.single-gallery .pagination.gllrpr_pagination{display:block !important}</style><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://consei.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html>