Создаем сайт на листке бумаги. ЧАСТЬ 2.
Сегодня решил написать вторую часть статьи «Создаем сайт на листке бумаги» или о том, как новичку можно без особых усилий верстать сайты на HTML’е, какие он только пожелает. Первую часть статьи «Создаем сайт на листке бумаги» можно прочитать здесь: http://www.abcsokol.ru/2013/05/blog-post_13.html
Чтобы написать сайт с нуля, потребуется всего лишь листок бумаги и ручка (или другая пишущая принадлежность – на ваше усмотрение).
Давайте немного поработаем с текстом. Пусть наша надпись «Строить сайты просто» станет полужирной, курсивной и подчеркнутой. Сделать это очень просто. Для этого «обертываем» текст в теги:
<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, сайт с нуля.
Уникальность: 100%.
Зачем нужен парсер?
