Всем привет! Сегодня мы уже получим знания с которыми сможем практиковаться. Хочу заметить, что именно практика лучше всего позволяет усвоить материал и затем его эффективно использовать. Мой вам совет: не старайтесь за раз освоить много теории, получайте ее маленькими порциями а вот практикуйтесь побольше =). Создание 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>, он же имеет наименьший шрифт. Остальные заголовки имеют промежуточные значения соответственно своему порядку. Пример: <h1>Заголовок 1<h1> <h2>Заголовок 2<h2> <h3>Заголовок 3<h3> <h4>Заголовок 4<h4> <h5>Заголовок 5<h5> <h6>Заголовок 6<h6> Результат: Заголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6Перевод строки (тег <br />) Тег <br /> устанавливает перевод строки с места, где он находится. Пример: <p>Данный тег не яв-<br />ляется контейнером, следовательно, ему не требуется закрывающий тег.</p> Результат: Данный тег не яв- ляется контейнером, следовательно, ему не требуется закрывающий тег. Шрифт, цвет, размер и другие свойства текста (контейнер font)В данном уроке был применен еще контейнер font. Он используется в HTML для указания шрифта текста. Это устаревший метод и мы его рассматривать не будем. Шрифт текста, цвет, выравнивание и многое другое мы будем указывать с помощью стилей. Контейнер font мы будем использовать как раз для применения стилей к небольшим частям текста =). Ну вот и все на сегодня. практикуйтесь побольше)). Всем удачи и до следующей недели =). Назад || Содержание || Далее |
Комментариев нет:
Отправить комментарий