Урок 2. Начинаем размечать текст.

Количество просмотров: 331

После первого урока у вас скорее всего появились вопросы. И самый очевидный из них – почему нужно использовать текстовый редактор, а не какую-то более мощную программу, созданную специально для создания web страниц по типу Dreamweaver?

Ответ довольно прост. Читая учебник вы хотите понять, как работает html и как правильно его использовать для создания своих html документов. С использованием специальных программ вы этого понять не сможете, т.к. львиную долю работы они будут делать за вас, помимо этого данные программы выдают такой код который хорошо выглядит на экране браузера, но просто ужасен для разработчиков. Он избыточен и я не знаю ни одного специалиста, который пользовался бы этими программами для создания чего то серьезного.

Размечая элементы в простом редакторе вы запоминаете их, набивая руку. Чуть позже, когда базовые элементы будут хорошо знакомы, можно будет перейти к более продвинутым редакторам, например к sublime text, но на данном этапе я вам не рекомендую этого делать. Для начала нужно набить руку.

Теперь можно продолжить обучение. Пока вы проходили первый урок, ваш друг Аврелий узнал, что вы занялись изучением html и попросил сделать для него простую html страничку. Он прислал вам текст который должен быть на его страничке. Вот он.


Всем привет!
Меня зовут Аврелий. И я занимаюсь изучением римской империи в 
кибернетическом университете реконструкций старых миров. 
Буду очень рад если вы поделитесь со мной какой-либо полезной информацией о том периоде времени.
Мои контактные данные для связи. 
Телефон – 55779898123
Электронная почта – av2000@mail.kib

Аврелий ваш старый друг, и вы решили помочь ему сделать страничку, тем более он обещал вам 2 билета на новейшую реконструкцию в старом Колизее.

Возьмем текст который прислал Аврелий и поместим в блокнот.

Теперь сохраним его как html документ.

И откроем его в браузере. Посмотрим что получилось. Открыв данную страницу.

Да, выглядит мягко говоря не очень презентабельно. Так и должно быть, ведь мы добавили в документ лишь один контент, без html разметки. Пришло время рассказать браузеру, как этот текст должен выглядеть. Пришло время HTML.

Закончите начатую ниже разметку документа.


<html>
<h1>Всем привет!</h1>
<p>Меня зовут Аврелий. И я занимаюсь изучением римской империи в 
кибернетическом университете реконструкций старых миров. </p>
Буду очень рад если вы поделитесь со мной какой-либо полезной информацией о том периоде времени.
<h2>Мои контактные данные для связи.</h2> 
<p><b>Телефон</b> – <em>55779898123</em></p>
Электронная почта – av2000@mail.kib
</html>

Не забывайте про элементы из первого урока, это head,tittle,body.

Когда закончите разметку, сохраните файл и обновите страницу в браузере. Она должны выглядеть примерно так.

Это гораздо лучше. И пришло время разобраться с тем как работают теги.

Обычная запись состоит из следующего. <h2>Какой то текст</h2>

  • <h2> - открывающий тег
  • Какой то текст – содержимое
  • </h2> - закрывающий тег

Все вместе это называется элементом. Элемент состоит из содержимого и открывающих-закрывающих тегов. Теги и содержимое не обязательно должны находится на одной строке. Браузеру все равно на пробелы и символы табуляции как вы уже могли заметить. Для него лишь важно наличие открывающего и закрывающего тега. Попробуйте удалите из документа закрывающий тег h2, сохраните документ и обновите страницу. Посмотрите как сильно она изменилась, а всего лишь мы убрали один закрывающий тег. Из вида страницы следует и следующее – одни теги можно вкладывать в другие.

Например как в строке <p><b>Телефон</b> – <em>55779898123</em></p>.

Тег p используется для разметки абзацев. Теги b и em задают стиль начертания текста.

Таких тегов несколько.

  • <b> </b> - Полужирный текст
  • <i> </i> - Наклонный(курсивный) текст
  • <u> </u> - Подчеркнутый текст
  • <strike> </strike> - Перечеркнутый
  • <tt> </tt> - моноширинный шрифт
  • <sup> </sup> - отображает текст в виде верхнего индекса.
  • <sub> </sub> - отображает текст в виде нижнего индекса.

Потренируйтесь применять данные теги на практике. Внесите их в свой документ, сохраните его и посмотрите, что получилось.

Урок 1. Создаем html страницу

Урок 3. Используем списки.

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх