Урок 2. Оформляем текст.
2008
Попробуем применить на практике всё, что узнали в первом уроке. Для этого создадим в блокноте документ следующего содержания:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="сим-сим">
<meta name="description" content="Это мой сайт. И это здорово.">
<title>Мой сайт</title>
</head>
<body>Содержание моего сайта. Содержание моего сайта. Содержание моего сайта. Содержание моего сайта. Содержание моего сайта. Содержание моего сайта. Содержание моего сайта. Содержание моего сайта. Содержание моего сайта. Содержание моего сайта.</body>
</html>
Обозвав его как-нибудь, желательно index.html,
откройте документ в новом окне браузера и полюбуйтесь.
Работает? Ну ещё бы оно у нас не заработало!
Пришло время заняться тегом body. Этот тег-контейнер содержит в себе всё, что мы хотели бы увидеть на нашей странице.
Но простой текст, отображённый на экране, читать неудобно. Неплохо было бы снабдить его полями, абзацами, заголовками и тому подобными финтифлюшками. При этом прошу вас уяснить себе сразу: ни один интернет-браузер не распознает в тексте переносы строк и абзацы, сделанные в ворде, не умеет переносить слова и распознавать несколько пробелов подряд не склеивая их в один. Посему изучим теги, которые позволят нам работать с текстом.
<p>Абзац</p>
Текст, заключённый в эти теги, выводится как новый абзац.
<h1>Заголовок</h1>
<h6>Заголовочек</h6>
Заголовки и подзаголовки создаются этими тегами в шести вариантах. h1 – самый большой заголовок, h6 – самый маленький:
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Перенос строки создаётся однократным применением тега <br/>. Чтобы пропустить пустую строку, поставьте его два раза подряд.
Для того, чтобы текст отобразился курсивом, необходимо заключить его в теги
<i>…</i>,
жирным шрифтом –
<b>…</b>.
Добавив к нашему тексту немного тегов, получим следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Мой сайт</title>
</head>
<body>
<h1>Заголовок моего сайта</h1>
<h3>Подзаголовок</h3>
Содержание моего сайта. <i>Содержание моего сайта. </i>Содержание моего сайта. <b>Содержание моего сайта. </b> Содержание моего сайта. <p>Содержание моего сайта. Содержание моего сайта. <br/><br/> Содержание моего сайта. <br/>Содержание моего сайта. Содержание моего сайта.</body>
</html>
Продолжение следует.
Метки: html и css, сайтостроение