Оформляем html-страницу и форматируем текст. Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++.
Наберите или скопируйте код в Блокноте (рис. 1.1). Рис. 1.1. Вид HTML -кода в программе Блокнот Вид веб- страницы в окне браузера. Шаблон веб- страницы с двумя правыми боковыми колонками для копируете текст шаблона в блокнот, и меняете расширение файла ".txt" на ". html ". Бесплатный шаблон готового сайта. Скачать готовый сайт, шаблон бесплатно.
Структура HTML - страницы : < HTML >: <HEAD>: описание заголовка: </HEAD> Закройте Блокнот. Поздравляю! Вы уже создали реальный электронный.
В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок. А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad. Сейчас в ней написана фраза "Привет всем!", она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты.
Проще это объяснить на практике. Шаг 1. Меняем фон html-страницы и цвет текста.
Для этого добавим в наш код, в тег <body> следующие атрибуты - bgcolor="blue" text="yellow". Здесь bgcolor - атрибут, отвечающий за цвет фона страницы, а blue - его значение (в нашем случае - голубой, но можете сделать и красный - red, и зеленый - green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow - желтый. Моя первая страница Всем привет. Запустите браузер (как в шаге 3 первого урока), теперь ваша страница выглядит так:. Согласитесь, что синий фон слишком яркий, хорошо бы сделать его побледнее. Для этого давайте немного поговорим о способах задания цвета.
В HTML существуют два способа задания цвета: по имени (им воспользовались мы) и указанием шестнадцатеричного кода цвета. С именными цветами (их 156) все просто, смотрим в соответствующую таблицу html цветов. выбираем понравившийся и пишем его имя в значение атрибута (например, bgcolor="blue"). Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop.
О том, как это делать читайте на странице Цвета для web. А пока пользуйтесь теми, которые указаны в примерах. Итак, поменяем цвет в атрибуте bgcolor на нежно-голубой, а цвет текста - на менее яркий. Моя первая страница Всем привет.
Обновите html-страницу (Ctrl+F5) и посмотрите на результат. Шаг 2. Форматируем текст.
Обратите внимание, что атрибуты, указанные в теге <body> распространяют свое действие на весь документ, т. весь введенный вами текст будет теперь сиреневого цвета, что не очень удобно.
Поэтому лучше убрать атрибут text из тега <body>. тогда цвет текста будет установлен по умолчанию, т. черный. А задавать цвет различных частей текста лучше в самом тексте. Для этого добавим несколько предложений, заключим их в нужные теги, а затем разберемся, что они делают.
Моя первая страница. Это заголовок первого уровня. Это простой текст. Этот выделен полужирным начертанием. А этот курсивом. Это заголовок второго уровня. Это текст Arial, размер шрифта - 5.
Это заголовок третьего уровня. Этот текст Verdana, размер шрифта - 2. Обновите html-страницу (Ctrl+F5) и посмотрите на результат. Разберем код подробнее:.
Теги <h1> </h1>, <h2> </h2> и т. называются заголовками.
HTML поддерживает 6 уровней заголовков от h1 до h6. h1 - самый главный и крупный, далее по убыванию значения и шрифта до h6 - самого маленького и по значению, и по размеру шрифта. Теги <font> </font> управляют шрифтом. Для этого используются атрибуты: - color - задает цвет текста, - size - задает размер шрифта (по умолчанию равен 3), - face - задает гарнитуру шрифта. В принципе, вы можете указывать здесь любой понравившийся вам шрифт, но учтите, что на компьютере пользователя такого шрифта может и не оказаться. Поэтому рекомендуется использовать стандартные: Times New Roman, Arial, Verdana и Tahoma. Теги <b> </b> делают текст жирным.
Теги <i> </i> отображают текст курсивом. Тег <br> начинает текст с новой строки. Обратите внимание, этот тег одиночный, т.
не имеет закрывающего тега. Использовать эти теги с их атрибутами вы можете в любом месте текста, выделяя, как предложения, так и отдельные слова, и даже буквы. Главное помнить два правила:. 1.
Если есть открывающий тег, то должен быть и закрывающий. 2. Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Например. На этом второй урок закончен. Вы научились работать с текстом.
На следующем уроке вы научитесь украшать html-страничку картинками и располагать элементы на странице. Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт.
Код кнопки:. Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.