Урок 3. Наполняем страницу текстом
Урок 3. Наполняем страницу текстом
Если вы читаете все уроки подряд за один раз, то прошло примерно минут 15, а вы уже на 3 части руководства и уже успели создать простенькую HTML страницу, поздравляю! Теперь же нужно идти дальше и наполнить ее полезной информацией, отформатировать эту информацию и сделать удобной для восприятия.Я решил, что в данном руководстве буду создавать сайт о животных. Создам штучки 3 страничек, на каждой будет описание одного животного, а так же навигация по сайту, то есть меню со ссылками. Для начала первая страница и просто текст на ней. Пусть это будет страница о жирафах, на содержание не обращайте внимания, это ведь просто демонстрация.
<html> <head> <title>Длинношеее животное</title> </head> <body> <h1>Жираф</h1> <p>А вы знаете, что жирафы съедают в день <i>до 30 килограмм</i> листьев? Они питаются в основном акацией. Проводят за едой <b>от 16 до 20 часов</b> в сутки! Так как они едят очень много, а в листьях содержится достаточно влаги, то потребность в питье у них отпадает. Некоторые считают, что жираф может продержаться без воды больше чем верблюд, но это не так, ведь верблюд не ест в это время, а жираф ест постоянно и за счет влаги в пище он и держится.</p> <h2>Что, жираф вообще не пьет?</h2> <p>На самом деле, пьет. И даже может выпить <strong>до 40 литров воды за один раз</strong>. При этом наблюдать процесс, как пьет жираф, достаточно весело. Он подходит к ручью, долго осматривается в поисках хищников, а потом широко расставляет ноги и в такой неуклюжей позе наклоняет голову к водоему. </p> </body> </html> Отлично, страница о жирафах готова. Давайте разбираться что к чему. Для начала несколько новых тегов.
- h1, h2, h3 – теги для выделения заголовков. Соответственно h1 это первый уровень (встречается только один раз на странице, самый главный), h2 второй уровень, как подзаголовок (их уже может быть несколько).
- b – тег для выделения жирным шрифтом, как в Word’е.
- i – выделение курсивом (наклонный шрифт).
- strong – сообщает браузеру и поисковым системам, что на этом месте нужно сделать логический акцент, то есть текст в этом теге очень важен в смысловом плане. Браузеры обрабатывают его почти всегда как b, то есть выделяют жирным шрифтом, но на самом деле strong и b это разные вещи. Я рекомендую использовать strong, если хотите выделить наиболее важные моменты в тексте.
- em – так же нужен для акцентирования внимания. Браузеры обрабатывают его, помечая текст курсивом, но, опять же, это не то же самое что и i, запомните это и не путайте. В принципе, ничего страшного не произойдет, но в дальнейшем, при продвижении своего сайта в поисковых системах, нам это понадобится.
- p – как параграф, для разделения текста на блоки, чтобы читалось легче.
Так же вот вам еще несколько, чтобы было интереснее. С помощью них вы сможете сделать текст на своей странице читаемым.
Тег переноса строки <br /> все что находится после него, переносится на новую строку. Смотрите, и правда переносится:
Тег переноса строки
все что находится после него, переносится на новую строку. Далее, в первом уроке я уже упоминал о еще одном теге «одиночке», это тег hr, который вставляет разделительную горизонтальную линию.
Текст над линией <hr /> Текст под линией Результат будет выглядеть в разных браузерах по-разному, но в любом случае, примерно так:
Текст над линией
Текст под линией Списки! Вот чего не хватает многим статьям в интернете. Не понимаю, почему авторы пренебрегают таким элементарным способом разметки текста, ведь он очень эффективен.
Существуют маркированные списки и нумерованные.
<ul> <li>элемент первый;</li> <li>элемент второй.</li> </ul> Выглядит это дело примерно как в Word’е:
- элемент первый;
- элемент второй.
Закрепим все вышеизложенное:
<i>курсив</i> <b>жирный</b> <strong>жирный шрифт, но не то же что b</strong> <em>курсив, но не то же что i</em> <p>параграф текста</p> <h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> <br /> перевод строки <hr /> Горизонтальная линия <ul>Список</ul> <ol>Упорядоченный список</ol> <li>Элемент списка</li> Теперь создайте три странички с любым текстом, поэкспериментируйте с тегами, проверьте, все ли понятно при работе с ними, а потом переходите дальше.
← Урок 2. Первая страница | Содержание | Урок 4. Навигация, ссылки →