Как сделать заголовок в html


Красивые заголовки ▶ подборка

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

Анимация для заголовка

HTML разметка

  

Анимация для заголовка

CSS оформление

  @import "https://fonts.googleapis.com/css?family=Russo+One";  h2.funny-title{border-top:5px solid #E0DBDE;border-bottom:5px solid #E0DBDE;font-size:70px;text-align:center;margin-top:40px;margin-bottom:5px;text-transform:uppercase;font-family:'Russo One',sans-serif;font-weight:900;letter-spacing:8px}  @-webkit-keyframes move-background {  0%.  

r:transparent;background:url(https://obninsksite.ru/assets/theme/images/blog/square.svg) no-repeat #ECE7EA;background-size:cover;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-animation:move-background 20s infinite linear alternate;-moz-animation:move-background 20s infinite linear alternate;animation:move-background 20s infinite linear alternate}

HTML разметка

    

CSS оформление

  .title-container{position:relative;width:300px}  .title-container h2:after{content:"";position:absolute;border-bottom:2px solid red;width:100%;bottom:0}  

HTML разметка

    

CSS оформление

  .logo-title{margin:50px auto;text-align:center;cursor: pointer}  .logo-title a{text-decoration:none;-webkit-t.  

d62a;text-shadow:0 -1px 15px rgba(0,0,0,0.9),0 1px 0 #7f6303,0 3px 0 #846703,0 5px 0 #896b03,0 7px 0 #8e6f03,0 9px 0 #937203,0 6px 50px rgba(252,223,92,0.8)} .logo-title a:first-line{font-size:.8em} .logo-title a:hover{-webkit-transform:perspective(8em) rotateX(11deg) scale(1.2);-moz-transform:perspective(8em) rotateX(11deg) scale(1.2);-ms-transform:perspective(8em) rotateX(11deg) scale(1.2);-o-transform:perspective(8em) rotateX(11deg) scale(1.2);transform:perspective(8em) rotateX(11deg) scale(1.2);text-shadow:0 -1px 15px black,0 1px 0 #7f6303,0 2px 0 #846703,0 0 0 #896b03,0 1px 0 #8e6f03,0 2px 0 #937203,0 2px 30px rgba(252,223,92,0.6)}

HTML разметка

                    

CSS оформление


  @import "https://fonts.googleapis.com/css?family=Hammersmith+One";  svg{display:none}  .svg-p{font-size:80px;-webkit-text-stroke:2px #000;font-family:FredokaOne-Regular;color:#A6540D;text-align:center;margin:0}  .two{filter:url(#displacementFilter);padding:20px 40px;background-image:linear-gradient(73deg,#FFAB00 20%,#FFAB00 43%,#FFD740 43%,#FFD740 93%);border:3px solid #000;box-shadow:1px 3px 3px 1px rgba(0,0,0,0.45),inset 0 -3px 0 0 #000000,inset 2px 6px 0 0 #FFD740,inset -7px -3px 0 0 #FFAD07;border-radius:20px}  

  • T
  • I
  • T
  • L
  • E

HTML разметка

  
  • T
  • I
  • T
  • L
  • E

CSS оформление

  .animate-ul{position: relative;margin-top: 70px;left: 50%;display: flex;transform: translate(-50%,-50%);}  .animate-ul li{list-style:none;letter-spacing:15px;font-size:5em;font-family:fantasy;color:#484848;animation:ani 1.2s linear infinite}  .animate-ul li:nth-child(1){animation-delay:.2s}  ..  

text-shadow:0 0 7px #fff900,0 0 70px #fff123} }

HTML CSS

HTML разметка

  

HTML CSS

CSS оформление

  .style-1{font-size:6em;line-height:.7;position:relative}  .style-1:after{content:attr(data-content);position:absolute;left:0;right:0;top:0;bottom:0;-webkit-text-stroke:1px #fff}  .style-1:before{content:attr(data-content);position:absolute;left:0;right:0;top:0;bottom:0;-webkit-text-stroke:3px #463f60}  


obninsksite.ru

Атрибуты в HTML

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

Примеры работы с атрибутами

Рассмотрим работу с атрибутами на примерах. Самый простой пример — возьмем тег абзаца <p> с атрибутом «align». Напишем:


<p align="left">Пример выравнивания абзаца по левому краю</p>

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

Для тега абзаца также могут быть применены атрибуты:

  • align=»center» – выравнивание по центру экрана;
  • align=»right» – выравнивание по правому краю;
  • align=»justify» — выравнивание текста по ширине экрана.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример страницы с атрибутами в HTML</title> </head> <body bgcolor="#dadef9"> <p align="center">Атрибуты в HTML</p> <p align="justify">Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть неограниченное количество.</p> </body> </html>

Атрибут цвета «bgcolor» позволяет нам задать цвет фона страницы. Атрибуты «center» и «justify» выравнивают текст внутри себя, соответственно, по центру и по ширине.

Заголовки в HTML

Для того, чтобы создать заголовок на странице используется специальный тег <h> c индексом. Таких индексов всего шесть — от 1 до 6, они указывают на размер заголовка (<h1> является самым большим заголовком, <h6> — самым маленьким). Для примера создадим веб-страницу, имеющую несколько заголовков. Код этой страницы будет иметь вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример страницы с атрибутами и заголовками в HTML</title> </head> <body bgcolor="#dadef9"> <h1>Атрибуты в HTML</h1> <p align="justify">Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть неограниченное количество.</p> <h2 align="center">Заголовки в HTML</h2> <p align="justify">Для того, чтобы создать заголовок на странице используется специальный тег <h> c индексом. Таких индексов всего шесть - от 1 до 6, они указывают на размер заголовка...</p> </body> </html>

В данном примере у нас имеется два заголовка — заголовок первого уровня здесь не имеет атрибутов, заголовок второго уровня — имеет атрибут выравнивания по центру. После заголовков идут абзацы, которые также имеют свои атрибуты.

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

siteblogger.ru

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

Данные примеры подходят для оформления заголовков категорий, блоков сайдбара, заголовков в подвале страницы и т.п.
Некоторые заголовки требуют дополнительной разметки, остальные примеры используют только один элемент в сочетании с псевдоэлементами :before и :after.

Для заголовков я использовала шрифт Merriweather, загруженный с сайта Google Fonts.

headers
Рис. 1. Оформление заголовков на сайте

Общие стили для всех заголовков


h3 {   font-family: 'Merriweather', serif;   font-size: 20px;   letter-spacing: 1px;   max-width: 320px;   width: 100%;   position: relative;   display: inline-block;   color: #465457;  }

Заголовок 1

<div class="d1"><h3><span>Заголовок 1</span></h3></div>
.d1 h3 {   color: #F16246;   text-align: center;  }  .d1 h3:before {   content: "";   position: absolute;   top: calc(50% - 1px);   left: 0;   right: 0;   height: 2px;   background: #E5EDEA;   z-index: -1;  }  .d1 span {   background: white;   padding: 0 20px;  }

Заголовок 2

<div class="d2"><h3><span>Заголовок 2</span></h3></div>
.d2 h3 {text-align: center;}  .d2 h3:before {   content: "";   position: absolute;   top: calc(50% - 5px);   left: 0;   right: 0;   height: 6px;   border-top: 2px solid #BBC9C9;   border-bottom: 2px solid #BBC9C9;   z-index: -1;  }  .d2 span {   background: white;   padding: 0 20px;  }

Заголовок 3

<div class="d3"><h3><span>Заголовок 3</span></h3></div>
.d3 h3:before {   content: "";   position: absolute;   top: calc(50% - 6px);   left: 0;   right: 0;   height: 12px;   background: #A6D8CB;   z-index: -1;  }  .d3 span {   background: white;   padding: 0 15px;   margin-left: 20px;  }

Заголовок 4


<div class="d4"><h3>Заголовок 4</h3></div>
.d4 h3 {   padding-bottom: 10px;   border-bottom: 2px solid #E5EDEA;   }  .d4 h3:after {   content: "";   position: absolute;   bottom: -6px;   left: 0;   width: 30%;   height: 4px;   background: #A6D8CB;  }

Заголовок 5

<div class="d5"><h3>Заголовок 5</h3></div>
.d5 h3 {padding-top: 10px;}  .d5 h3:before {   content: "";   position: absolute;   top: -2px;   left: 0;   width: 25%;   height: 2px;   background: #D8BD3D;  }

Заголовок 6

<div class="d6"><h3>Заголовок 6</h3></div>
.d6 h3 {   text-align: center;   padding-bottom: 10px;  }  .d6 h3:after {   content: "";   position: absolute;   bottom: -2px;   left: 50%;   margin-left: -15%;   width: 30%;   height: 2px;   background: #FA5F4C;  }

Заголовок 7

<div class="d7"><h3>Заголовок 7</h3></div>
.d7 h3 {   text-align: center;   padding-bottom: 10px;  }  .d7 h3:before {   content: "";   position: absolute;   bottom: -2px;   left: 50%;   margin-left: -25%;   width: 50%;   height: 2px;   background: #79F8D7;  }  .d7 h3:after {   content: "";   position: absolute;   bottom: -6px;   left: 50%;   margin-left: -15%;   width: 30%;   height: 2px;   background: #79F8D7;  }

Заголовок 8


<div class="d8"><h3>Заголовок 8</h3></div>
.d8 h3 {   text-align: center;   padding-bottom: 10px;  }  .d8 h3:before {   content: "";   position: absolute;   bottom: -4px;   left: 50%;   margin-left: -3px;   width: 6px;   height: 6px;   border-radius: 50%;   background: #EE6247;   z-index: 2;  }  .d8 h3:after {   content: "";   position: absolute;   bottom: -2px;   left: 50%;   margin-left: -25%;   width: 50%;   height: 2px;   background: #ECF4F2;  }

Заголовок 9

<div class="d9"><h3>Заголовок 9</h3></div>
.d9 h3 {   padding: 0 0 6px 10px;   border-left: 10px solid #A6D8CB;   border-bottom: 2px solid #A6D8CB;  }

Заголовок 10

<div class="d10"><h3>Заголовок 10</h3></div>
.d10 h3 {   display: table;   width: auto;   margin: 0 auto;   padding: 15px;   letter-spacing: 2px;   border: 2px solid #cbdcea;   color: #394671;  }  .d10 h3:after {   content: '';   position: absolute;   top: 6px;   left: 6px;   width: calc(100% - 4px);   height: calc(100% - 4px);   border: 2px solid #cbdcea;  }

Заголовок 11

<div class="d11"><h3>Заголовок 11</h3></div>
.d11 h3 {   display: table;   width: auto;   margin: 0 auto;   padding: 15px;   letter-spacing: 2px;   background: #cbdcea;   border: 2px dashed white;   color: white;   box-shadow: 0 0 0 4px #cbdcea;  }

Заголовок 12

<div class="d12"><h3>Заголовок 12</h3></div>
.d12 h3 {   display: table;   width: auto;   margin: 0 auto;   padding: 15px;   letter-spacing: 2px;  }  .d12 h3:before {   content: "";   position: absolute;   top: 10px;   left: 3px;   z-index: -1;   width: 20px;   height: 25px;   border: 4px solid #ea7e9c;   color: #394671;  }

Заголовок 13

<div class="d13"><h3>Заголовок 13</h3></div>
.d13 h3 {   display: table;   width: auto;   margin: 15px auto;   letter-spacing: 2px;   color: #154ffb;  }  .d13 h3:before {   content: "";   position: absolute;   top: -50%;   left: -25px;   z-index: -1;   background: #fed57b;   width: 50px;   height: 50px;   border-radius: 50%;  }

Заголовок 14

<div class="d14"><h3>Заголовок 14</h3></div>
.d14 h3 {   display: table;   width: auto;   margin: 15px auto;   letter-spacing: 2px;  }  .d14 h3:before {   content: "";   position: absolute;   top: -50%;   left: -25px;   width: 30px;   height: 20px;   border-top: 2px solid #fed57b;   border-left: 2px solid #fed57b;  }  .d14 h3:after {   content: "";   position: absolute;   bottom: -50%;   right: -25px;   width: 30px;   height: 20px;   border-bottom: 2px solid #fed57b;   border-right: 2px solid #fed57b;  }

Заголовок 15

<div class="d15"><h3>Заголовок 15</h3></div>
.d15 h3 {   display: table;   width: auto;   margin: 15px auto;   letter-spacing: 2px;  }  .d15 h3:before {   content: "";   position: absolute;   top: 50%;   margin-top: -8px;   left: -35px;   width: 10px;   height: 10px;   border: 3px solid #fed57b;   transform: rotate(45deg)  }  .d15 h3:after {   content: "";   position: absolute;   top: 50%;   margin-top: -8px;   right: -35px;   width: 10px;   height: 10px;   border: 3px solid #fed57b;   transform: rotate(45deg)  }

html5book.ru

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес» , тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно» . Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<h1>), а самым нижним — уровень 6 (<h6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.

Синтаксис создания заголовков показан в примере 7.3.

Пример 7.3. Добавление заголовков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Заголовки в тексте</title>  </head>  <body>  <h1>Заголовок первого уровня</h1>  <h2>Заголовок второго уровня</h2>  <h3>Заголовок третьего уровня</h3>  <h4>Заголовок четвертого уровня</h4>  <h5>Заголовок пятого уровня</h5>  <h6>Заголовок шестого уровня</h6>  </body> </html>

Результат данного примера показан на рис. 7.3. Содержимое тега <h1> отображается самым крупным шрифтом жирного начертания, а <h6> — самым мелким.

Рис. 7.3

Рис. 7.3. Вид заголовков на веб-странице

Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.

htmlbook.ru

В этой статье рассмотрим, как сделать шапку сайта, и расположить на ней заголовок, и описание сайта

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

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

Ширину картинки сделаем 900px, по ширине сайта, высоту — 200px. У Вас конечно могут быть свои размеры, лишь бы ширина картинки совпадала с шириной сайта (оболочка wrapper), высота на Ваше усмотрение.

Как только картинка будет готова, и размещена в папке images каталога сайта, возьмём каркас сайта, созданный на предыдущей странице, и приступим к установке шапки на сайт.

СSS:

В селекторе #header убираем заданную ему высоту, и прописываем ширину и высоту сделанной картинки.

Затем вставляем саму картинку.

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

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

HTML

Теперь дошла очередь до заголовка и описания сайта. Для этого прописываем в теге body блок div с идентификатором id="header", и в нём два заголовка h1 и  h3, в которые и вставляем название сайта и его описание

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

27

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

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

Посмотрим результат.

28

По моему, очень даже симпатично.

Обобщим код этой страницы.

Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок <div id="header"> перед заголовком <h1> (к примеру, адрес моей картинки

В таком случае, в селекторе #header убираем свойство background-image: (../images/position.png);, и прописываем position: relative.

А в селекторах тегов h1 и h3, прописываем свойство position: absolute;.

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

Всё остальное остаётся без изменения.

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

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

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

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

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

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

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

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

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

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

Как сделать заголовок в html

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

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

Короткий отдыхПеремена

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

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

starper55plys.ru

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

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

Первый тег данного семейства – <h1>, последний – <h6>. Первый тег используют, чтобы выделить наиболее важный заголовок на странице, по-хорошему на странице должен быть лишь один заголовок <h1>, говорящий о том, про что эта страница. А последним тегом обозначают подзаголовок наиболее низкого уровня.

Хотя, если говорить с практической точки зрения, не очень часто можно встретить тексты, где есть подзаголовки ниже третьего уровня. И выделяются все три заголовка тегами <h1>, <h2> и <h3>.

Давайте добавим на нашу страничку заголовки:

... <body> <h1>Книги для программистов</h1> <h2>Название книги 1</h2> <p>  Текст про книгу 1 </p> <h2>Название книги 2</h2> <p>  Текст про книгу 2 </p> </body> ...

Результат в браузере:
Как сделать заголовок в html

Что касается поисковых систем, то для них заголовки играют большую роль. Поэтому, есть смысл научиться их грамотно писать и применять. Есть 2 главных правила при создании заголовков в HTML. Готовы узнать секреты? Держите:

  • Заголовок H1 должен быть на странице только один
  • Вложенность заголовков не должна нарушаться. То есть после H1 не должно быть сразу H3. Нормальная вложенность это когда заголовки идут, например, в таком порядке: H1-H2-H3-H3-H4-H2-H3-H4

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

webshake.ru

Абзацы в языке HTML

Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег <p>. Синтаксис создания абзацев следующий:

<p>Это первый абзац.</p>
<p>А это уже второй абзац</p>

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег <p> также является блочным элементом. Что такое блочные элементы я писал в статье «Как  создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:

<!doctype html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Сайт об автомобилях.</title>
</head>
<body>
<p>Сайт об автомобилях.</p>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<p>Классификация автомобилей</p>
<p>Автомобили бывают следующих типов:</p>
<p>Легковой;</p>
<p>Грузовой;</p>
<p>Внедорожник;</p>
<p>Багги;</p>
<p>Пикап;</p>
<p>Спортивный;</p>
<p>Гоночный.</p>
</body>
</html>

При открытии данного файла будет примерно такая картина:

абзац html - применение тега p

Пока, что наша страница содержит одни абзацы.

Для выравнивания текста в абзаце тег <p> поддерживает атрибут align. Он может принимать одно из четырех значений:

    • left — выравнивание текста по левому краю;
    • center — выравнивание текста по центру;
    • right — выравнивание текста по правому краю;
    • justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.

По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

<p align=»left»>Этот текст в абзаце на html странице будет выровнен по левому краю!</p>
<p align=»center»>Этот текст в браузере отобразится по центру страницы!</p>
<p align=»right»>Этот текст будет выровнен по правому краю!</p>
<p align=»justify»>А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!</p>

И так это отобразится в браузере:

тег p атрибут align

Заголовки в языке HTML

Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег <h1>, а самым нижним — уровень 6, тег <h6>. Теги <h1> — <h6 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня — самым мелким.

Синтаксис создания заголовков:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Заголовки html</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>

Результат:

Заголовки тег h1-h6

Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

Добавим заголовки в нашу страницу:

<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<p>Легковой;</p>
<p>Грузовой;</p>
<p>Внедорожник;</p>
<p>Багги;</p>
<p>Пикап;</p>
<p>Спортивный;</p>
<p>Гоночный.</p>

И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:

заголовки на странице

Теги <h1>-<h6>, как и тег <p>, используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом <p>.

Нумерованные и маркированные списки в HTML

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

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

Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега <li>. Затем все элементы помещаются внутрь тега <ul>, если нужен маркированный список, или внутрь тега <ol>, если нужен нумерованный список.

<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Заголовки html</title>
</head>
<body>
Маркированный список:
<ul>
<li>первый пункт.</li>
<li>второй пункт.</li>
<li>третий пункт.</li> </ul>
Нумерованный список:
<ol>
<li>первый пункт нумерованного списка.</li>
<li>второй пункт нумерованного списка.</li>
<li>третий пункт нумерованного списка.</li>
</ol>
</body>
</html>

И выглядят они примерно так:

Как сделать заголовок в html

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег <ul> добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег <li> если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

  • disc — закрашенная окружность;
  • circle — окружность;
  • square — квадрат.

По умолчанию атрибут type равен disc. Пример использования:

<ul type=»circle»>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul type=»square»>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul>
<li type=»circle»>Пункт 1</li>
<li type=»square»>Пункт 2</li>
<li type=»disc»>Пункт 3</li>
</ul>

Отображение в браузере:

html список, атрибут type

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

  • A — заглавные латинские буквы;
  • a — строчные латинские буквы;
  • I — заглавные римские цифры;
  • i — строчные римские цифры;
  • 1 — арабские цифры.

По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.

Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов <li> внешнего списка:

<ul>
<li>первый пункт.</li>
<li>второй пункт.
<ul>
<li>первый пункт вложенного списка.</li>
<li>второй пункт вложенного списка.</li>
<li>третий пункт вложенного списка.</li>
</ul>
</li>
<li>третий пункт.</li>
</ul>

И в браузере:

вложенный html список

В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега <dl>. Внутри него помещают пары «термин — определение». Термины заключают в парный тег <dt>, а определения — в парный тег <dd>:

<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>

Отображение в браузере:

список определений

На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:

<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>

И посмотрим результат:

Как сделать заголовок в html

Горизонтальные линии

Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:

<p>Первый абзац</p>
<hr>
<p>Второй абзац</p>

И вот как это отображается:

Как сделать заголовок в html

Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.

С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег <hr> поддерживает следующие атрибуты:

  • align — определяет выравнивание линии;
  • color — задает цвет линии;
  • size — устанавливает толщину линии в пикселях;
  • width — устанавливает ширину линии в пикселях.

Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:

<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<hr color=»green» size=»1″ width=»320″ align=»left»>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>

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

горизонтальная линия hr

Комментарии html

В html есть возможность вставлять комментарии. Комментарий — это часть html-кода, которая не отображается в WEB-браузере. Текст комментария размещается между открывающим тегом <!— и закрывающим —>. Пример:

<!— Это пример, он не отображается web-браузером —>

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

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

  • Заголовки. Существует шесть уровней заголовков, которые можно создать на странице с помощью парных тегов <h1>-<h6>;
  • На веб-странице можно создать маркированный или нумерованный список фраз. Для создания маркированного списка применяется парный тег <ul>, а для нумерованного <ol>. Для выделения каждого пункта применяется парный тег <li>;
  • Для отделения блоков текста можно применять горизонтальную линию с помощью одинарного тега <hr>.

Остальные материалы о тегах html ищите в рубрике HTML и CSS и подписывайтесь на обновления моего блога. До встречи в следующих постах!

webcodius.ru

Шапка сайта в css – как ее сделать

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

Шапка сайта – какой она бывает

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

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

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

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

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

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

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

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

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

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

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

Как сделать заголовок в html

Рис. 1. Пока это только контейнер, в котором будет все содержимое.

Что обычно содержится в шапке?

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

Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:

Как сделать заголовок в html

Для этого достаточно дописать некоторые правила к фону:

То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.

Добавим в шапку какое-то содержимое. Например, заголовок и меню.

Теперь все это оформим.

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

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

Сместим меню в правый край с помощью абсолютного позиционирования. Чтобы это заработало, нужно также дописать для header такое правило: position: relative;

Как сделать заголовок в html

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

Как зафиксировать блок, чтобы он не исчезал при прокрутке?

Если вы хотите фиксировать шапку в css (такое ее поведение можно увидеть на многих веб-ресурсах), то вам может помочь фиксированное позиционирование. Нужно добавить такие стили:

А также координаты (top, left, right, bottom) какие вам нужны. Обычно фиксацию делают с помощью jQuery, прописывая соответствующий сценарий и привязывая его к событию – вертикальному скроллу страницы.

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

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

Как сделать заголовок в html

webformyself.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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