Практикум №6

Практикум №6

Внимание!

Для выполнения практической работы Сети06, вам необходимо подобрать дома материал (текст как минимум с двумя заголовками, и минимум четыре графических файла) для страницы сайта на тему, которая нравится Вам.

Саму тему утвердите у преподавателя!

Данный материал необходимо прислать себе на электронную почту (пароль и логин от своей почты нужно помнить)

В данной работе мы будем создавать одну страницу сайтана Вашу тему, с Вашими фотоматериалами и с Вашим текстом.

Для этого необходимо выполнить несколько шагов.

Шаг1

Теория.

Для создания html-документов используют специальные элементы, теги. Тег – структурная единица языка HTML. По сути это сам тег представляет собой текст, взятый в треугольные скобки. Любой тег имеет имя, которое говорит о том, что он делает, и практически любой тег имеет параметры (атрибуты) они задают особые свойства тегу. Практически у любого тега есть закрывающий тег.

Например:

< bodytext=”red”> Это текст на сайте< /body>

В примере body имя тега, text – параметр или атрибут тега, red – значение атрибут, а < /body> – закрывающий тег.

< metacharset=" UTF-8" > - данный тег набирается для отображения русского шрифта.

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

< html>

< head>

Заголовочная часть

< /head>

< body>

Тело документа

< /body>

< /html>

В заголовочной части в рамках занятия мы рассмотрим только один тег < title>. Он задает имя страницы (текст на вкладке).

Та информация что помещается в тело документа будет показана на странице, при открытии ее в браузере. Браузер это такая специальная программа, которая может правильно читать html-документ и показывать его на экране.

Запустите программу блокноти наберите туда следующий текст:

< html>

< head>

< metacharset=" UTF-8" >

< title> Ваше название страницы < /title>

< /head>

< body>

Вашзаголовок1

< /body>

< /html>

В качестве Ваш заголовок наберите первый заголовок в вашем тексте, название страницы придумайте по смыслу.

Сохраните документ в своей папке используя команду Сохранить как… под именем index. html

Закройте блокнот, и откройте свою страницу в браузере (просто щелкните по ней два раза). Вы видите свою страницу.

Закройте браузер и перейдите к следующему шагу.

Шаг 2.

Откройте свою страницу в блокноте, для этого щёлкните по ней правой клавишей мыши затем Открыть с помощьюà блокнот

Теория.

Тег осуществляет перенос текста на другую строку, без формирования обзаца.

На этом шаге мы рассмотрим перенос текста на новую строку. Попробуйте вставить еще несколько тэгов .

Для этого измените html-документ своей страницы следящим образом:

< head>

< metacharset=" UTF-8" >

< title> Вашеназваниестраницы< /title>

< /head>

< body>

Ваш заголовок1

Ваш текст 1

< /body>

< /html>

Ваш текст1 – выбранный вами текст, но до второго заголовка

Закройте блокнот, сохранив свою страницу. Откройте ее в браузере, посмотрите на результат.

Закройте браузер и перейдите к следующему шагу.

Шаг 3.

Откройте свою страницу в блокноте

Теория.

 текст 

Тег отвечает за параметры шрифта.

Рассмотрим параметры (атрибуты) тега:

color –отвечает, за цвет заключенного в контейнер текста. Значения цветов смотрите в папке «Для сайта»файл color

size – отвечает за размер шрифта. Его значения может быть 1, 2, 3, 4, 5, 6, 7, где 1 самый маленький, а 7 самый большой

face – отвечает за внешний вид шрифта, в качестве значения используют название шрифтов, например, Comic Sans MS

На этом шаге мы рассмотрим изменения шрифтов. Для этого измените html-документ своей страницы следующим образом (значения выбирайте сами):

< head>

< metacharset=" UTF-8" >

< title> Вашеназваниестраницы< /title>

< /head>

< body>

 Ваш заголовок1

 

 

Ваш текст 1

< /body>

< /html>

Закройте блокнот, сохранив свою страницу. Откройте ее в браузере, посмотрите на результат.

Закройте браузер и перейдите к следующему шагу.

Шаг 4.

Откройте свою страницу в блокноте

Теория.

Рассмотрим более подробно тег < body>:

< bodytext=”значение” bgcolor=”значение” background=”значение”>

Тело документа

< /body>

Рассмотрим параметры (атрибуты) тега:

text –отвечает, за цвет текстана странице.

bgcolor – отвечает за цвет фона страницы

Значения цветов смотрите в папке «Для сайта»файл color

background – задаёт в качестве фона картинку. Вместо значения пишите имя файла с расширением. (файл с картинкой должен быть в той же папке что и файл с вашей страницей)

На этом шаге мы рассмотрим изменение цвета шрифтов страницы и ее фона. Для этого измените html-документ своей страницы следующим образом (значения выбирайте сами, а Ваш текст1 пусть будет выбранный вами текст но до следующего заголовка):

< head>

< metacharset=" UTF-8" >

< title> Вашеназваниестраницы< /title>

< /head>

< bodytext=”значение” bgcolor=”значение” background=”значение”>

 Ваш заголовок1

 

 



Ваштекст 1



< /body>

< /html>

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

Закройте браузер и перейдите к следующему шагу.

Шаг 5.

Откройте свою страницу в блокноте

Теория.

< palign=”значение”> текст 

Тег сообщает браузеру о том, что текст будет отдельным абзацем. Так как в онглийском языке нет красной строки, то ее не будет и в нашем тексте.

Рассмотрим атрибут тега:

align – отвечает за выравнивание текста. Его значения могут быть следующие:

center – текст выравнен по центру

left – текст выровнен по левому краю

right – текст выравнен по правому краю

justify – текст выровненпо ширине

На этом шаге мы рассмотрим создание абзаце, с целью изменения выравнивания текста. Для этого измените html-документ своей страницы следующим образом (значения выбирайте сами):

< head>

< metacharset=" UTF-8" >

< title> Вашеназваниестраницы< /title>

< /head>

< bodytext=”значение” bgcolor=”значение” background=”значение”>

< palign=”center”>

 Ваш заголовок1







Ваштекст 1





< /body>

< /html>

Обратите внимание, что весь текст после заголовка представлен одним абзацем. Если у Вас в этом тексте нет заголовков, то можете использовать тег для переноса текста на новую строку. Если его использовать дважды, то создастся ощущение разделения абзацев.

Шаг 6.

Поместите в папку с вашей страницей файл с изображением. Назовите его 1, при этом расширение не трогайте.

Откройте свою страницу в блокноте

Теория.

< imgsrc=”значение”align=”значение”height=”значение”width=”значение”>

Тег < img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG.

Рассмотрим атрибут тега:

src – путь к файлу с изображением.

аlign – выравнивание изображения, значения такие же как и в теге 

height – высота изображения, задается в пикселях (например 100) или в проценте от экрана (например 50%)

width - высота изображения, задается в пикселях (например 150) или в проценте от экрана (например 75%)

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

Если не использовать атрибут align, то выравнивание будет по левому краю.

На этом шаге мы рассмотрим добавление изображения.

Для этого необходимо изменить html-документ своей страницы. При этом в атрибуте src, в качестве пути к файлу с изображением, напишите 1. *, вместо звездочки свое расширение.

< head>

< metacharset=" UTF-8" >

< title> Вашеназваниестраницы< /title>

< /head>

< bodytext=”значение” bgcolor=”значение” background=”значение”>



 Вашзаголовок1







Ваштекст 1







< img src=”1. *” width=”50%”>



< /body>

< /html>

Шаг 7.

Поместите в папку с вашей страницей еще один файл с изображением. Назовите его 2, при этом расширение не трогайте.

Откройте свою страницу в блокноте

На этом шаге мы рассмотрим еще одного изображения.

Для этого необходимо изменить html-документ своей страницы. Следующим образом:

< head>

< metacharset=" UTF-8" >

< title> Вашеназваниестраницы< /title>

< /head>

< bodytext=”значение” bgcolor=”значение” background=”значение”>



 Вашзаголовок1







Ваш текст 1







< img src=”1. *” width=”50%”>

< img src=”2. *” width=”50%”>



< /body>

< /html>

Шаг 8.

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