Создание сайтов (HTML CSS PHP MySQL JavaScript ActionScript) Создание html-документа. Форматирование текста с помощью те
Всем привет! Сегодня мы уже получим знания с которыми сможем практиковаться. Хочу заметить,
что именно практика лучше всего позволяет усвоить материал и затем его эффективно использовать. Мой вам совет: не старайтесь
за раз освоить много теории, получайте ее маленькими порциями а вот практикуйтесь побольше =).
Создание html-документа
Как создать html-страницу? Для этого нам нужно сохранить код страници (набор текста с тегами) сохранить в формате html.
После этого страницу можно будет просмотреть в любом браузере.
Создадим наш первый html-документ. Заодно в коде напишем к нему пояснения. Рекомендую писать пояснения везде где можно,
пока вы начинающие, в дальнейшем вы сами разберетесь где оставлять для себя комментарии. Открываем текстовый редактор и пишем
код:
<!DOCTYPE html><!-- Указывает тип документа. В нашем случае это HTML5 -->
<!-- Это и есть комментарии, они игнорируются браузером. -->
<html>
<!-- Это контейнер который включает все содержимое веб-страници. -->
<head>
<!-- Это контейнер который включает в себя имя страници (отображается на вкладке страници браузера) и разную служебную информацию. В нем также можно размещать разные скрипты (JavaScript) и стили (CSS). -->
<title>Название страници</title>
</head>
<body>
<!-- Это контейнер который включает в себя все, что будет отображаться в браузере -->
Это тело документа. Здесь находится все то, что с помошью тегов или без них отображается в браузере.
</body>
</html>
Далее в меню "Файл" выбираем раздел "Сохранить как", указываем тип файла "Все файлы", кодировка "UTF-8", и имя файла
name.html, сохраняем. Теперь можете найти этот файл и запустить. Если все правильно сделано то он откроется в браузере и вы
увидете свою страницу:
Это тело документа. Здесь находится все то, что с помошью тегов или без них отображается в браузере.
Чтобы внести какие-либо изменения на страницу необходимо открыть файл name.html с помошью текстового редактора,
внести изменения и сохранить. Если у вас при этом уже открыта данная страничка в браузере то чтобы увидеть изменения вам
нужно ее обновить =).
Форматирование текста с помощью тегов HTML
Абзац (теги <p> </p>)
Пример:
<p>Это абзац текста. В данном примере имеется два абзаца. Они отделяются друг от друга
промежутком. На странице может быть сколько угодно абзацев.
Контейнер <font color="#000099">p</font>
может быть вложенным в другой абзац но при этом необходимо соблюсти порядок вложенности тегов.
</p>
<p>Чтобы не было путаници с вложенностью тегов, советую сразу писать открывающийся и
закрывающийся теги а затем размещать в них другие елементы.</p>
Результат:
Это абзац текста. В данном примере имеется два абзаца. Они отделяются друг от друга промежутком.
На странице может быть сколько угодно абзацев. Контейнер p
может быть вложенным в другой абзац но при этом необходимо соблюсти порядок вложенности тегов.
Чтобы не было путаници с вложенностью тегов, советую сразу писать открывающийся и закрывающийся
теги а затем размещать в них другие елементы.
Заголовок (контейнеры <h1>-<h6>)
Есть 6 уровней заголовков в HTML. Самый важный заголовок - <h1>,
он же имеет и самый крупный шрифт. Наименее значимый - <h6>, он же имеет наименьший шрифт.
Остальные заголовки имеют промежуточные значения соответственно своему порядку.
Тег <br /> устанавливает перевод строки с места, где он находится.
Пример:
<p>Данный тег не яв-<br />ляется контейнером,
следовательно, ему не требуется закрывающий тег.</p>
Результат:
Данный тег не яв- ляется контейнером, следовательно, ему не требуется закрывающий тег.
Шрифт, цвет, размер и другие свойства текста (контейнер font)
В данном уроке был применен еще контейнер font.
Он используется в HTML для указания шрифта текста. Это устаревший метод и мы его рассматривать не будем.
Шрифт текста, цвет, выравнивание и многое другое мы будем указывать с помощью стилей.
Контейнер font мы будем использовать как раз для применения стилей к небольшим частям текста =).
Ну вот и все на сегодня. практикуйтесь побольше)). Всем удачи и до следующей недели =).