Сделать нумерованный список.




Урок 1. Введение в HTML

 

HTML (HyperTextMarkupLanguage) означает язык разметки гипертекста

HTML-документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>:

КонтейнерHTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа ( HEAD ) и тела документа ( BODY).

Файлы HTML обычно имеют расширениеhtml. Их можно создавать при помощи любого текстового редактора.

==================================================

Пример 1

Откройте HTML-Reader

НАПЕЧАТАЙТЕ

<html>

<head>

<title>Это заголовок страницы</title>

</head>

<body>

<h1>Здравствуйте!</h1>

<p>Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b></p>

</body>

</html>

 

СОХРАНИТЕ КАК page1.html

-----------------------------------------------

ПОЯСНЕНИЕ К ПРИМЕРУ 1:

Ваш первый HTML-документ начинается с тега <html>, который сообщает браузеру о начале документа HTML и заканчивается тегом </html>, который информирует браузер о достижении конца документа HTML.

Текст между тегами <head> и </head> является информацией заголовка документа. Эта информация не выводится в окне браузера.

Текст "Это заголовок страницы" между тегами <title> и </title> является заголовком документа. Этот заголовок выводится в строке заголовка окна браузера.

Текст между тегами <body> и </body> является текстом, который будет выведен в окне браузера. Текст "Здравствуйте!" между тегами <h1> и </h1> будет отображен стилем заголовка, обычно жирным шрифтом большего размера.

Тег<p> означает, что начинается новый параграф, тег</p> означает конец параграфа.

Текст "Этот текст выводится жирным шрифтом." между тегами <b> и </b> будет выведен жирным шрифтом.

Теги HTML используются для выделения элементов HTML. Обычно теги HTML используются парами и заключены между двумя символами угловых скобок <(начальный тег)> и </(конечный тег)>. Текст между начальным и конечным тегами является содержимым элемента. Некоторые теги не имеют конечного, например, тег принудительного переноса строки <br>, для таких тегов рекомендуется использовать следующее написание <br/>.  

 

 

ОСНОВНЫЕ ТЕГИ HTML

Пример 2 Параграфы

Следующий пример показывает, как отображаются параграфы

<html><body><p>Это параграф 1.</p><p>Это параграф 2.</p><p>Это параграф 3.</p></body></html>

Пример 3 Заголовки

Заголовки определяются с помощью тегов от <h1> до <h6>. <h1> определяет заголовок самого большого размера, а <h6> определяет заголовок самого маленького размера.

<h1>Это заголовок первого уровня</h1><h2>Это заголовок второго уровня</h2><h3>Это заголовок третьего уровня</h3><h4>Это заголовок четвертого уровня</h4><h5>Это заголовок пятого уровня</h5><h6>Это заголовок шестого уровня</h6>

Заголовки автоматически отделяются дополнительными промежутками от остальных элементов документа.

Пример 4 Заголовки

<html><body> <h1>Это заголовок уровня 1</h1><h2>Это заголовок уровня 2</h2><h3>Это заголовок уровня 3</h3><h4>Это заголовок уровня 4</h4><h5>Это заголовок уровня 5</h5><h6>Это заголовок уровня 6</h6> <h1 align="center">Это заголовок 1, он выровнен по центру страницы.</h1> <p>Используйте теги заголовков только для заголовков. Не используйте их просто для того, чтобы выделить что-то жирным шрифтом. Используйте для этого другие теги.</p> </body></html>

Пример 5 ФОН

Этот пример демонстрирует использование цветного фона на странице HTML. При выборе фона всегда проверяйте, чтобы текст был хорошо читаем!

<html><bodybgcolor="yellow"><h2>Смотри: Цветной фон!</h2></body></html>

Пример 5 Форматирование символов

<html><body><p>Если необходимо чтобы к тексту было применено какое-либо форматирование, например, выделение <b>полужирным</b>или <i>курсивом</i>, необходимо использовать соответствующие теги форматирования. При этом форматируемый текст помещается между тегами.</p></body></html>

Пример 6 Гиперссылки

Гипертекстовые ссылки необходимы для соединения с другими документами в Web. Для их записи используется тег<a>, который называют "якорь" (аnchor).

<html><body> <p><a href="http://www.e-nlama.ru">Этот текст </a> является ссылкой на страницу во Всемирной Паутине.</p> </body></html>

Пример 7 Списки HTML

Неупорядоченные списки

Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг).

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

<html><body> <h4>Неупорядоченный список:</h4><ul><li>элемент 1</li><li>элемент 2</li><li>элемент 3</li></ul> </body></html>

Упорядоченные списки

Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.

Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута: start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:

"A" - заглавные буквы A, B, C ...

"a" - строчные буквы a, b, c ...

"I" - большие римские числа I, II, III ...

"i" - маленькие римские числа i, ii, iii ...

"1" - арабские числа 1, 2, 3 ...

· <html>· <body>· · <h4>Упорядоченный список:</h4>· <ol>· <li>элемент 1</li>· <li>элемент 2</li>· <li>элемент 3</li>· </ol>· · </body>· </html>
   
   

ТЕГИ

Основные теги
<html></html> Указывает программе просмотра страниц что это HTML документ.
<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body> Определяет видимую часть документа
 
Атрибуты тела документа
<bodybgcolor=?> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<bodytext=?> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
Теги для форматирования текста
<h3></h3> Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирный текст
<i></i> Создает наклонный текст
<fontsize=?></font> Устанавливает размер текста в пределах от 1 до 7.
<fontcolor=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
Гиперссылки
<a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.
Форматирование
<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
<br> Вставляет перевод строки.
<dl></dl> Создает список определений.
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
Графические элементы
<imgsrc="name"> Добавляет изображение в HTML документ
<imgsrc="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

ПРАКТИКУМ 1.

Создать документ HTML,содержащий основные теги
для определе­ния структуры. Необходимо ВЫПОЛНИТЬ все требования форматирования текста.На рабочем столев папке Проект1 расположено задание (текст), и 2 картинки: logo и city.

 

Общая информация

Нижнекамский муниципальный район – один из наиболее развитых регионов Республики Татарстан. Обладает крупным индустриально-аграрным производством, строительной и транспортной инфраструктурой, мощным научным и образовательным потенциалом, развитым здравоохранением и сферой социальных услуг.

Нижнекамский муниципальный район расположен в центральной части Республики Татарстан, численность населения около 270 тыс. человек.

По площади (1672,5 кв.км.) занимает среднее положение среди 43 районов Республики.

В состав муниципального образования «Нижнекамский муниципальный район» вошли:

1. город Нижнекамск

2. поселок Камские Поляны

3. 15 сельских поселений из 65 населенных пунктов

 


Выполнение практикума 1 по шагам:

ШАГ 1

Откройте HTML-Reader. Напечатайте

<html>
<title>Главная</title>
<body>
<h1>Общая информация</h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>
</body>
</html>

Получится так.

 

ШАГ 2

Разместите текст «Общая информация»по центру.

Добавим тег><p align=center>

html>
<title>Главная</title>
<body>
<h1><p align=center><font color=FF0000>Общая информация!</font></h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>
</body>
</html>

ШАГ 3

Сделайте текст «Общая информация»красным цветом

Добавим теги <font color=??????></font><

<html>
<title>Главная</title>
<body>
<h1><p align=center><font color=FF0000>Общая информация!</font></h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>
</body>
</html>

ШАГ 4

Добавить текст ниже.

<html>
<title>Главная</title>
<body>
<h1><p align=center><font color=FF0000>Общая информация!</font></h1>
<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>

<p><i>Нижнекамский муниципальный район расположен в центральной части Республики
Татарстан, численность населения около 270 тыс. человек.</i></p>
<p>По площади (1672,5 кв.км.) занимает среднее положение среди 43 районов Республики. </p>
<p>В состав муниципального образования "Нижнекамский муниципальный район" вошли: </p>


</head>
</html>

 

ШАГ 5

Сделать нумерованный список.

<html>
<title>Главная</title>
<body>
<h1><p align=center><font color=FF0000>Общая информация!</font></h1>

<p><b>Нижнекамский муниципальный район</b> - один из наиболее развитых регионов
Республики Татарстан.
Обладает крупным индустриально-аграрным производством,
строительной и транспортной инфраструктурой, мощным научным и
образовательным потенциалом, развитым здравоохранением и
сферой социальных услуг.</p>

 

<p><i>Нижнекамский муниципальный район расположен в центральной части Республики
Татарстан, численность населения около 270 тыс. человек.</i></p>
<p>По площади (1672,5 кв.км.) занимает среднее положение среди 43 районов Республики. </p>
<p>В состав муниципального образования "Нижнекамский муниципальный район" вошли: </p>



<ol>
<li>город Нижнекамск </li>
<li>поселок городского типа Камские Поляны </li>
<li>сельских поселений из 65 населенных пунктов. </li>
</ol>

</head>
</html>

ШАГ 6

...





Читайте также:
Функции, которые должен выполнять администратор стоматологической клиники: На администратора стоматологического учреждения возлагается серьезная ...
Новые русские слова в современном русском языке и их значения: Менсплейнинг – это когда мужчина что-то объясняет...
Тема 5. Подряд. Возмездное оказание услуг: К адвокату на консультацию явилась Минеева и пояснила, что...
Как оформить тьютора для ребенка законодательно: Условием успешного процесса адаптации ребенка может стать...

Поиск по сайту

©2015-2022 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2017-10-25 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту:


Мы поможем в написании ваших работ!
Обратная связь
0.018 с.