Урок 3. Начинаем использовать списки.

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

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


Персональная страница Джесс.
Все привет и вы находитесь на моей персональной странице. Здесь вы можете немного узнать о моей персоне, если потребуется то снизу есть мои контактные данные и по ним можно со мной связаться.

Учебные заведения которые я закончила:
- Космический институт микробиологии и вирусологии.
- Межпланетная консерватория изучения чужих языков.
- Институт Земли - история как основа изучения.

В данный момент занимаюсь научной деятельностью в кибернитическом университете. Мне 23 и жизнь только начинается. Ах да, я очень люблю мороженное с клубникой.

Мои контактные данные:
+044553378 - телефон
juke@mail.kbu

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


<h1>Персональная страница Джесс.</h1>
<p>Все привет и вы находитесь на моей персональной странице. Здесь вы можете немного узнать о моей персоне, если потребуется то снизу есть мои контактные данные и по ним можно со мной связаться.</p>

<h2>Учебные заведения которые я закончила:</h2>
<p>- Космический институт микробиологии и вирусологии.</p>
<p>- Межпланетная консерватория изучения чужих языков.</p>
<p>- Институт Земли - история как основа изучения.</p>

<p>В данный момент занимаюсь научной деятельностью в кибернитическом университете. Мне 23 и жизнь только начинается. Ах да, я очень люблю мороженное с клубникой.</p>

<h3>Мои контактные данные:</h3>
<p><b>телефон</b> - <em>+044553378</em></p>
<p><b>почта</b> - <em>juke@mail.kbu</em></p>


Вроде бы все хорошо, все элементы нам знакомы. Однако, список учебных заведений в нашем документе в данный момент оформлен абзацами, что не очень хорошо. Основная идея html как раз заключается в том, что элементы должны быть размечены логически, т.е. для заголовков используем тег h , а не p или strong, каждому логический элемент должен быть размечен своим тегом. Но что со списками? Неужели в html нет элемента для такого случая, можете спросить вы? И это правильный вопрос. В html есть специальный тег для разметки списков. Пришло познакомиться с ним и применить на практике.

Для создания писков в html необходимо использовать два элемента. Только при использовании их обоих можно создать списки. Первый используется для задания типа списка - маркированный или не упорядоченный и нумерованный или упорядоченный. Для создания маркированного списка используется тег а для нумерованного ol. Все что будет у нас в списке необходимо обернуть в один из этих тегов. Например:


<ul>
- Космический институт микробиологии и вирусологии.
- Межпланетная консерватория изучения чужих языков.
- Институт Земли - история как основа изучения.
</ul>

В данном случае мы использовали ul и список у нас будет маркированным, если использовать ol, то вместо маркеров у нас будут использоваться цифры.

Теперь когда мы знаем что у нас будет списком, нам необходимо разметить элементы списка, оградив их друг от друга. Для этого используем тег <li>. Как и у остальных тегов в html этим тегом можно размечать любое количество символов, разбитых на любое количество строк.

Давайте обернем элементы списка тегом <li>.


<ul>
	<li>- Космический институт микробиологии и вирусологии.</li>
	<li>- Межпланетная консерватория изучения чужих языков.</li>
	<li>- Институт Земли - история как основа изучения.</li>
</ul>

Исходная разметка тела нашего документа имеет следующий вид:


<h1>Персональная страница Джесс.</h1>
<p>Все привет и вы находитесь на моей персональной странице. Здесь вы можете немного узнать о моей персоне, если потребуется то снизу есть мои контактные данные и по ним можно со мной связаться.</p>

<h2>Учебные заведения которые я закончила:</h2>
<ul>
	<li>- Космический институт микробиологии и вирусологии.</li>
	<li>- Межпланетная консерватория изучения чужих языков.</li>
	<li>- Институт Земли - история как основа изучения.</li>
</ul>

<p>В данный момент занимаюсь научной деятельностью в кибернитическом университете. Мне 23 и жизнь только начинается. Ах да, я очень люблю мороженное с клубникой.</p>

<h3>Мои контактные данные:</h3>
<p><b>телефон</b> - <em>+044553378</em></p>
<p><b>почта</b> - <em>juke@mail.kbu</em></p>

Пришло время сохранить нашу страничку и посмотреть как что выглядит. Надеюсь вы помните про элементы <html> , <head>, <body>, не забудьте их добавить.

На скриншоте видно, что у нас появился замечательный маркированный список. Пришло время сделать из маркированного нумерованный список, для этого заменим <ul></ul> на <ol></ol> сохраним документ и обновим страницу. Теперь у нас появился шикарный нумерованный список. Вроде бы все готово и мы можем отправлять страничку Джесс на проверку. Но давайте не будем торопиться и попробуем кое-что.

Как вы думаете можно ли вложить один список в другой? Правильный ответ да. И мы сейчас это сделаем.


<ul>
	<li>Первый элемент списка</li>
	<li>Второй элемент списка
		<ol>
			<li>Первый элемент вложенного списка</li>
			<li>Второй элемент вложенного списка</li>
		</ol>
	</li>
</ul>

Вот собственно и все. Для создания вложенного списка, нужно выбрать элемент у которого будет список, и не закрывая тег li , создать его, а потом закрыть и тег <li>. Все как изображено на примере выше. Теперь мы знаем чуть больше и можно смело отправлять страницу Джесс, если все ей понравится можно будет пригласить ее на свидание.

Урок 2. Размечаем текст.

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

Наверх