Как создать шапку сайта


Как сделать шапку сайта

Инструкция как сделать блок для шапки сайта, и расположить в нём фоновое изображение, логотип, заголовок, и описание сайта используя HTML и CSS

Блок для шапки сайта, обычно это "header" записывается так:

HTML


<div></div>

CSS


#header{
  width: 900px;     - ширина
  height: 200px;    - высота
  background-color: #25B33f;  - фоновый цвет (можно не задавать)
  margin-bottom: 10px;    - отступ снизу
}

Фоновое изображение для шапки сайта делаем по размерам блока, т.е. 900px X 200px. Его лучше всего сделать в фотошопе.

Если, кто не владеет фотошопом, я предлагаю самый простой способ изготовления картинки для шапки сайта, в имеющимся на всех Windows по умолчанию Paint.

Готовое изображение прописываем в блок "header".


#header{
  width: 900px;
  height: 200px;
  background-color: #25B33f;
  margin-bottom: 10px;
  background-image: url(images/i8.png)   - в свойстве указывается путь к изображению. Как сохранить картинку, чтоб потом прописать путь для неё читайте в статье Каталога сайта
}

Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится.

Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство background-position

Следующий шаг — добавляем заголовка и описания сайта.

Для этого в HTML блока прописываем код заголовка и абзаца. Абзацу зададим класс, так как описание будет только в шапке.

HTML


<div>
  <h2>Шапка сайта<h2>
    <p>Как сделать шапку для сайта с заголовком и описанием</p>
</div>

Посмотрим, что у нас получается.

Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства:
CSS


h2{
  color: #ffee00;  - цвет заголовка
  font: 40px Georgia;  - шрифт
  margin-left: 300px;  - отступ слева
}
.descript{
  width: 300px;  - ширина
  color: #ffee00;  - цвет
  font-style: italic;  - курсив
  margin: 70px 0 0 30px;  - расположение
  font-size:22px; - размер шрифта
}

Результат:

Теперь добавим логотип.

В качестве логотипа я возьму изображение вот такого чёртика

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

Чтоб разместить логотип проводим три изменения в коде:

а) в HTML блока добавим код картинки;

б) в CSS в блок header пропишем относительное позиционирование, так как логотип будет размещаться в этом блоке;

в) в CSS добавляем селектор логотипа, и позиционируем его абсолютно, относительно блока header.

HTML


<div>
  <h2>Шапка сайта<h2>
    <p>Как сделать шапку для сайта с заголовком и описанием</p>
<img src="images/hortic.gif">
</div>

CSS


#header{
  position:relative;
  width: 900px;
  height: 200px;
  background-color: #25B33f;
  margin-bottom: 10px;
  background-image: url(images/i8.png)  
}
h2{
  color: #ffee00;  - цвет заголовка
  font: 40px Georgia;  - шрифт
  margin-left: 300px;  - отступ слева
}
.descript{
  width: 300px;  - ширина
  color: #ffee00;  - цвет
  font-style: italic;  - курсив
  margin: 70px 0 0 30px;  - расположение
  font-size:22px; - размер шрифта
}
img{
  position:absolute;
  top:10px;
  left:10px;
}

Результат:

Получилась вот такая шапка сайта.

На  предыдущей странице мы сделали каркас сайта и теперь можно вставить в него шапку и посмотреть что получилось.

Код страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#wrapper{
    width: 900px;
    outline: 1px solid #787274;
    padding: 10px;
    margin: 0 auto;
}
#header{
    position:relative;
    width: 900px;
    height: 200px;
    background-color: #25B33f;
    margin-bottom: 10px;
    background-image: url(images/i8.png)
}
#sidebar{
    background-color: #2FF553;
    margin-bottom: 10px;
    width: 180px;
    padding: 10px;
    float: right;
}
#content{
    background-color: #9EF5AF;
    margin-bottom: 10px;
    width: 670px;
    padding: 10px;
}
#footer{
    height:80px;
    background-color: #41874E;
    margin-bottom: 10px;
}
.clear{
clear: both;
}
h2{
color: #ffee00;
font: 40px Georgia;
margin-left: 300px;
}
.descript{
width: 300px;
color: #ffee00;
font-style: italic;
margin: 70px 0 0 30px;
  font-size:22px;
}
img{
  position:absolute;
  top:10px;
  left:10px;
}
</style>
</head>
<body>
  <div>
    <div>
      <h2>Шапка сайта</h2>
        <p>Как сделать шапку для сайта с заголовком и описанием</p>
<img src="images/hortic.gif">
    </div>
    <div>Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать
Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
    </div>
    <div>А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали
больше всего времени.
И я решил написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
    </div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

По моему не плохо, надеюсь у вас получится лучше.

Теперь немного информации для тех, у кого сайт расположен на CMS WordPress.

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

Делается это следующим образом. Открываете в консоли «Записи — Добавить новую», переводите редактор в режим HTML, и загружаете то изображение, которое потом будет добавлено в шапку сайта.

В редакторе после загрузки появиться код картинки, его нужно скопировать, а «Запись» можно удалить.

Затем переходим во «Внешний вид — Редактор», и открываем для редактирования файл header.php.

В этом файле, находим строку <div>, и после неё вставляем скопированный код картинки.

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

Если его нужно куда то подвинуть, то возвращаемся в редактор файла, и в код изображения, в тег img, добавляем атрибут style со свойством margin

style="margin:0 0 0 0;"

И двигаем изображение туда, куда нам нужно.

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

P.S. Если кому-то захочется поменять картинку в шапке сайта на WordPress, и по манипулировать расположением заголовков, то об этом в статье Редактируем тему оформления

Желаю творческих успехов.

Перемена

Пьяный никак не может затолкнуть двушку в прорезь автомата. — Напился, — а еще таксист, — сказала прохожая. — С чего взяла? — Шапка таксистская. — Да, — задумчиво произнес пьяный, — а была ондатровая.

Как сделать картинку для шапки в Paint < < < В раздел > > > Как вставить картинку и текст в отдельный блок
 

Как создать заголовок веб-сайта и что поместить в заголовок веб-сайта

стандартный значок

Jennifer Bourn

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

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

Рекомендации по дизайну заголовка веб-сайта

Брендинг человека:

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

Примеры дизайна заголовков веб-сайтов с брендингом


Брендинг бизнеса:

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

Примеры дизайна заголовков веб-сайтов Брендинг бизнеса


Брендирование вещи:

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

Примеры дизайна заголовков веб-сайтов Брендинг предмета


Не на всех веб-сайтах есть заголовок

Заголовок веб-сайта занимает ценное пространство в верхней части окна браузера , что не всегда необходимо.Некоторым компаниям лучше не использовать традиционный заголовок веб-сайта, а вместо этого просто использовать логотип и поднять контент выше на странице. (Нравится наш сайт!)

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


Совет, если вы изучаете советы по дизайну заголовка веб-сайта

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

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

Вот несколько советов по дизайну заголовка веб-сайта:

А ты?

Вы работаете над дизайном шапки вашего сайта? Вы нашли эту запись полезной? У вас есть вопросы по созданию шапки сайта? Если да, мы будем рады услышать от вас в комментариях ниже!

.

Как создать отзывчивый заголовок


Узнайте, как создать адаптивный заголовок с помощью CSS.


Адаптивный заголовок

Измените дизайн заголовка в зависимости от размера экрана. Измените размер окна браузера, чтобы увидеть эффект.

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


Создать адаптивный заголовок

Шаг 1) Добавьте HTML:

Пример


CompanyLogo

Главная
Связаться
О


Шаг 2) Добавьте CSS:

Пример

/ * Стиль заголовка с серым фоном и небольшим отступом * /
.заголовок {
переполнение: скрыто;
цвет фона: # f1f1f1;
отступ: 20 пикселей 10px;
}

/ * Стиль ссылок заголовков * /
.header a {
float: осталось;
цвет: черный;
выравнивание текста: по центру;
набивка: 12px;
текст-оформление: нет;
размер шрифта: 18 пикселей;
высота строки: 25 пикселей;
border-radius: 4px;
}

/ * Стиль логотипа ссылка (обратите внимание, что мы установили то же значение line-height и font-size равным предотвращать увеличение заголовка при увеличении шрифта * /
.заголовок a.logo {
font-size: 25 пикселей;
font-weight: жирный;
}

/ * Измените цвет фона при наведении указателя мыши * /
.header a: hover {
цвет фона: #ddd;
цвет: черный;
}

/ * Стиль активная / текущая ссылка * /
. заголовок a.активный {
цвет фона: голубой;
цвет: белый;
}

/ * Плавающий раздел ссылок справа * /
.header-right {
float: right;
}

/ * Добавьте медиа-запросы для оперативности - когда экран имеет ширину 500 пикселей или меньше, размещайте ссылки друг на друга * /
@media screen и (макс. ширина: 500 пикселей) {
.заголовок a {
float: none; Дисплей
: блок;
выравнивание текста: по левому краю;
}
.header-right {
float: none;
}
}

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

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



.

Как создать успешный дизайн заголовка веб-сайта?

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

Как можно избежать этой проблемы? Это роль основных правил. Многие дизайнеры согласны с тем, что определенные функции могут работать на любом сайте. Страница, по которой легко и легко ориентироваться, получит более положительную реакцию, если у нее отличный дизайн, и частью этого дизайна, очевидно, является заголовок веб-сайта.
Поэтому к дизайну веб-заголовка следует отнестись очень серьезно. Это поможет бизнесу, стартапам и просто клиентам избежать присоединения ко многим другим плохо спроектированным сайтам.

8 советов о том, как создать заголовок веб-сайта для вашей службы

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

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

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

1.Используйте четкие изображения

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

2. Добавьте лучшие и современные функции навигации

Функции навигации являются одними из наиболее важных частей дизайна заголовка веб-страницы. Среди других функций:

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

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

3. Убедитесь, что ваша навигация чистая.

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

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

4. Уделяйте много внимания основному сообщению

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

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

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

5. Не стоит недооценивать силу типографики

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

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

6. Добавление интерактивной функции - отличная идея

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

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

7. Не используйте сложные слои

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

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

Многим компаниям требуется время, чтобы все исправить.Вот почему несколько проектов необходимо протестировать, прежде чем переходить к окончательному варианту. Вы можете провести A / B-тестирование перед первоначальным отображением и при необходимости попытаться оптимизировать макет.

8. Протестируйте его на меньшем экране.

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

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

12 лучших примеров дизайна заголовков веб-сайтов

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

1. Shinola

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

2. Beats by Dre

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

3. Премьер-лига

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

4. UBER

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

5. НАЙДЕНА

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

6. TIFFANY & Co

Такие компании, как TIFFANY & Co, придают большое значение своей продукции; это, в свою очередь, означает, что они должны приложить дополнительные усилия, чтобы произвести впечатление на свою аудиторию.Броский и креативный заголовок поможет гарантировать, что клиенты будут снова и снова возвращаться на сайт.

7. GANT

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

8. Discord

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

9. РАБОЧИЙ СТЕК

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

10. Lifewire

В 99% случаев рекомендуется использовать концепцию минимального дизайна. Однако есть ситуации, которые позволяют нарушить этот закон.

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

11. SONY

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

12. LEDbow

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

13. Etsy

Некоторые страницы продуктов и услуг успешны, потому что принятые дизайны баннеров довольно просты.Когда вы посетите платформу Etsy, вы заметите, что это место, на котором много контента. Тем не менее, полоса вверху сайта проста и понятна.

Designing Awesome Headers

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

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

.

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


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


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


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

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

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

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

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

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

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

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

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

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


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

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

Пример




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



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

Мой веб-сайт


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


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

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