skip to Main Content

Создаем сайт на листке бумаги. ЧАСТЬ 2

Создаем сайт на листке бумаги. ЧАСТЬ 2.

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

Чтобы написать сайт с нуля, потребуется всего лишь листок бумаги и ручка (или другая пишущая принадлежность – на ваше усмотрение).

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

Давайте немного поработаем с текстом. Пусть наша надпись «Строить сайты просто» станет полужирной, курсивной и подчеркнутой. Сделать это очень просто. Для этого «обертываем» текст в теги:

<b> … </b> – полужирное начертание (или <strong> … </strong>);

*На самом деле b – это так сократили слово bold (от английского так и переводится полужирный). Интересно, что у bold есть еще много значений, например, смелый, храбрый, наглый, отчетливый, крутой. <Strong> – альтернатива тегу <b>, переводится как сильный, твердый, прочный, строгий. В общем случае, оба эти тега выделяют текст полужирным начертанием, призваны выделить текст из общей массы.

<i> … </i> – курсивное начертание (от английского italic);
<u> … </u> – подчеркивание (от англ. underline).

Заодно покрасим наш текст в коричневый цвет и сделаем его побольше: <font color=brown size=”5”> … </font>

Как мы видим, если нет проблем с английским языком, то не будет проблем и с html. Font – это шрифт, color – цвет, все легко читается: «Цвет шрифта – коричневый, размер (кегль) шрифта – 5.

Вот что у нас получилось на данный момент:

<html>
<head>
<title>Заголовок страницы </title>
</head>
<body bgcolor=grey>
<b><i><u><font color=brown size=”5”>Строить сайты просто.</font></u></i></b>
</body>

</html>

Кстати, последовательность тегов очень важна. Например, нельзя писать <b><i>…</b></i>. Правильно: <b><i>…</i></b>.

Итак, мы поработали с текстом, но сейчас у нас есть текст только на первом этаже. Как же нам построить 2 этаж? Тут нам помогут заголовки разного уровня. Что это такое? Это всего лишь теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Текст, обрамленный в самый первый тег <h1>, будет самым большим по сравнению с остальными, а самый последний тег <h6> – сделает текст самым маленьким.

Пусть на первом этаже текст будет самым большим по размеру, а на втором – чуть поменьше. Для этого нашу любимую фразу «Строить сайты просто» оставим на первом этаже и сделаем с тегом <h1>, а на втором этаже напишем «Построен 2 этаж» с тегом <h2>.

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

 

Теперь наше строение выглядит следующим образом:
<html>
<head>
<title>Заголовок – страницы </title>
</head>
<body bgcolor=grey>
<h1>
<b><i><u>Строить сайты просто.</u></i></b>
</h1>
<h2>Построен 2 этаж</h2>
</body>
</html>
Теперь сделаем аналогичную вещь, только с тегом Font + сделаем цвет текста белым:
<html>
<head>
<title>Заголовок страницы </title>
</head>
<body bgcolor=grey>
<font size=7 color=white>
<b><i><u>Строить сайты просто.</u></i></b>
</font>
<font size=6 color=white>Построен 2 этаж</font>
</body>
</html>

В чем же разница? Мы нарисовали вроде бы тоже самое, но нет. Две фразы оказались на одном этаже. Для того, чтобы перенести вторую фразу на второй этаж, необходимо использовать тег параграфа <p>, либо тег переноса на другую строку – <br> (кстати, это особый тег, ему не нужен закрывающийся тег).

Чем отличаются теги <p> и <br>? Разница лишь в том, что отступ между строками у тега <p> больше, чем у тега <br>.

Ну и на закуску рассмотрим выравнивания. Сделаем все этажи по центру при помощи тега <center>. Ну и самые продвинутые могут использовать <p align=”…”> (т.е. вместо … можно вписать left, right, center – соответственно по левому краю, по правому краю, по центру).
Итак, на сегодня получили такой вариант нашего сооружения на листке бумаги:
<html>
<head>
<title>Заголовок страницы </title>
</head>
<body bgcolor=grey>
<center>
<font size=7 color=white>
<b><i><u>Строить сайты просто.</u></i></b>
</font>
<p>
<font size=6 color=white>Построен 2 этаж</font>
</p>
</center>
</body>
</html>
Данная статья рассчитана, в первую очередь, на новичков. Основная цель – показать, что создание сайтов – это дело простое, но нужно разобраться, а также показать логику событий, логическую цепочку, как сайт строится подобно дому, по кирпичикам, последовательно. Для того чтобы построить прочный, красивый и качественный дом, нужно начинать с фундамента. Спасибо за отклик пользователю Вконтакте на первую часть. Таким образом, вдохновившись, получилось написать вторую часть статьи.
Ключевые слова: создаем сайт на листке бумаги часть 2, сайт с нуля.
Back To Top