Партнерка на США и Канаду по недвижимости, выплаты в крипто

  • 30% recurring commission
  • Выплаты в USDT
  • Вывод каждую неделю
  • Комиссия до 5 лет за каждого referral

Практическое занятие № 7

Создание Web-сайтов средствами языка HTML

Цель занятия:

Приобретение практических навыков работы по созданию Web – страниц, Web –сайтов

Задание 1. Принципы создания Web-страниц

Создайте страницу, которая позволит сохранить теоретический материал в виде HTML-документа. Основной принцип выполнения данно­го задания заключается в применении тегов для разметки документа и про­верки правильности полученного результата. Откройте новый файл в про­грамме Блокнот с именем PROBA. HTM. Вводите в этот файл теги по пунк­там задания и после добавления нового фрагмента сохраняйте документ под тем же именем. Просматривайте полученную страницу с помощью браузера Internet Explorer. Таким образом можно понять и оценить работу каждого тега и принципы построения самой программы.

Пояснения. Текст, выделенный курсивом, нужно вводить с кла­виатуры.

1. Определим имя окна, которое будет отображаться в браузере. <HTML>

<НЕАО><ТШе>Первая</ТШе></Неаё> <BODY>

2. Можно начинать наполнение страницы информацией.

<А пате-«Конец»ХН1 >Сначала оформим заголовок.</Н1 >

<Н2>можно иначе </Н2>

<НЗ>можно так </НЗ>

<Н4>или так </Н4>

<Н5>или можно иначе </Н5>

<Н6>Тогда так, но уже ничего не видно. </Н6>

3. После ввода заголовка, его лучше отделить от основной части страни­цы линией.

<HR>

4. Линию можно отформатировать.

<Hr Color=red align=center width=50% size= 7 0>

Мы изменили цвет, разместили по центру, указали, что линия будет за­нимать 50% экрана и иметь толщину 10. По умолчанию ширина линии со­ставляет 2 пикселя.

5. Но каков шрифт и цвет текста? Введем тег FONT <HR>

<Font size=3>

Обратите внимание, что текст при просмотре браузера отражается по­следовательно, без каких бы то ни было элементов форматирования. <Р>Теперь значительно лучше.

<Р>Мы включили тег разделения фрагментов с образованием пустой строки

<Вr>Можно и без пустой.</Вг>

< Вr > Текст хорош, но я сделаю его более выразительным. / <Вг> <В> Это полужирный </В>

< Вr> <Small><l> Это - курсив и маленький </Smallx/l> <Вг> <Big> Это большой шрифт, а тег оформления курсивом уже закрыт</Вig>

< Вr > <S> Это ужас</S>

<Р> Шесть уровней заголовков, да еще отображение текста в виде ма­ленького шрифта или большого — хорошо, но недостаточно. Лучше задавать фактический размер шрифта. <Br> <Font Size=7> Например raK.</Font> <Br> <FontSize=-2> Или raK.</Font>

<P> <Font Color=Green Size=6>C</Font><Font Color=Blue size=4>Ka3-Ka!</Font> <Pre>

6. Можно попробовать сохранить формат текста.

Имя Фамилия Год рождения

Иван Иванов 1982

</Рге>

<Рге> А как ввести спецсимвол, например

&соeу или &reg или &lt &gt

</Pre>

<HR>

7. Создадим несколько списков на странице. <Н1> Теперь перейдем к спискам. </Н1> <Вг> Текст в списках выглядит иначе:

пункты списка отступают от полей, отделены от остальных абзацев тек­ста, и могут быть маркированными или нумерованными.

<Р1 ><Н2>Например, так выглядит маркированный список:</Н2>

Факультеты СГАУ:

<UL>

<И>ЭФ.

<И>МФ.

<и>БиА.

</UI>

<Р 1 ><Н2>А так выглядит нумерованный список:</Н2>

<OL>

<Lh><B> Это заголовок списка Проблемы студента.</В>

<Li>Сдать сессию.

<li>Защитить диплом.

<Li>Пройти практику.

<НЗ> А вот пример <1> ВложенныХТПисков </1></НЗ>

<01Туре=1>

<Lh><B> Уточненный график путешествий </1></В>

<Li> Франция

<UI>

<И>Замки Луары. <И>Париж. <Ы>Марсель. </Ul>

<Li> Германия <UI>

<И>Хайдельберг.

<Ь>Баден-Баден.

<И>Франкфурт-на - Майне.

</UI>

</01>

8. Создадим таблицу и добавим на страницу графику.

<Н1> Теперь перейдем к таблицам. </Н1>

<Table Border=3 Align=Center Width=50% BGColor=«#FFFOOF»>

<Caption АИдп=гор>Таблица отличников</Сарtioп>

<TR>

<ТН>Фамилия</ТН>

<ТН>Имя</ТН>

</TR>

<Td>HeaHOB</Td> <Td>HeaH</Td> <Tr><Td>Петр</Td> <Td>nerp</Td> </Tr> <Pre>

Следите за URL-адресом, который вы указываете для рисунка. Он дол­жен быть реальный. При публикации сайта рисунок должен находиться в папке, где хранятся файлы ваших страниц.

</Рге>

</TABLE>

<Н 1 Юживим страницу графикой. </Н 1 >

<IMG SRC=«fakel2.gif» аИ=«Это рисунок»>

А теперь вернемся в начало страницы!

<РХА HREF=«#Koнeц»>Ocтaльнoй материал изучите, проделав Прак­тическую работу 2</А> </FONT> </BODY> </HTML>

Задание 2. Создание Web-страниц по образцу

НЕ нашли? Не то? Что вы ищете?

Разработайте Web-страницы, задачей которых является информи­рование читателей о новых видах путешествий. С этой целью создайте файлы List. htm и About. htm. Просмотрите созданные Web-страницы с помощью браузера. Основные команды языка HTML приведены в при-

Рис. 1. Исходная страница (list. html) в окне браузера.

Compass_russia. gif - это название файла с картинкой. Можно подоб­рать любую картинку вместо этой.

ЛИСТИНГ ФАЙЛА LIST. HTM

<HTML> <HEAD>

<Т1ПЕ>Главная</Т1ПЕ> </HEAD>

<BODY BGCOLOR=«Gray»>

<H 1 >ИНФОРМАЦИЯ О НОВЫХ ТУРАХ</Н 1 >

<IMG SRC=«compass_russia. gif» ALIGN=RIGHT>

<HR>

<Н2>Рекомендуемые маршруты привлекут как молодых, так и опытных путешественников</Н2>

<Р>Представленная на сайте информация может быть полезна желаю­щим отдохнуть семьей</Р>

<H2 ALIGN=CENTER>

<BXFONT SIZE=«4»>Добро пожаловать! </FONT> </B> </H2>

<TABLE WIDTH - «70%» BORDER=« 1 »> <TR>

<ТОХВ>Название Typa</BX/TD>

<ТОХВ>Длительность</ВХ/ТО>

<ТОХВ>Предполагаемая дата начала тура </В> </TD>

</TR>

<TR>

<ТО>Лондон - Озерный край - Лондон</ТО>

<TD>2 недели</ТО>

<TD>anpenb 2005</TD>

</TR>

<TR>

<ТО>Хайдельберг - Баден-Баден</ТО>

<TD>3 недели</ТО>

<ТО>май 2005</TD>

</TR>

</TABLE>

<PXA НРЕЕ=«аЬои1пШ»>Подробная информация </AX/P> <A HREF=«mailto:*****@***ru»>BauiH предложения </A> </BODY> </HTML>

ЛИСТИНГ ФАЙЛА ABOUT. HTM

<HTML> <HEAD>

<Т1Т1.Е>Информация о rypax</TITLE> </HEAD>

<BODY BGCOLOR=«#0\ 99СССС» TEXT=«#00000»>

<H2> Лондон - Озерный край - Лондон </Н2>

<РРЕ>Лондон - кульминация путешествия в Англию. Великолепные го­родские парки и богатые музеи, <ВР>разнообразные памятники культуры и истории в <ВР>ближайших окрестностях требуют более или менее длитель­ного пребывания в главном городе страны.

Множество однодневных экскурсий на ваш выбор. <BR>

Северная Англия по праву гордится такими неповторимыми достопри­мечательностями и <ВР>природными красотами, как остатки древнерим ского Андрианова вала и хорошо сохранившиеся родовые замки на <ВИ>холмах Нортумберленда, соборы Дарема и Йорка, романтические ландшафты <ВИ>пустошей и болот Йоркшира и Озерного края, который от­носится к самым любимым англичанами местам отдыха</РИЕ>

Лондон - Озерный кран - Лондон

Лондон - кульминация путешествия в Англия». Великолепные городские парки и богатые музеи, разнообразные памятники культуры и истории в ближайших окрестностях требуют более иди менее длительного пребывания в главном городе страны. Множество однодневных экскурсий на ваш выбор.

Северная Англия по праву гордится своими неповторимыми достопримечательностями и природным красотами, как остатки древнеримского Андрианова вала и хорошо сохранившиеся родовые заики на холмах Нортумберленда, соборы Данера и Йорка, романтические ландшафты пустошей и болот йоркшира и Озерного края, который относится к самым люьимым англичанами местам отдыха

Назад

Хайдельберг - Баден-Баден

Виктор Гюго признавался: "Я приехал в в этот город десять дней назад.. .и я не мору от него оборваться". Тень поэтов Клеменса Бретано и Людвига Ахима фон Арима витает над розовым замком, сияющим в лучах заходящего солнца. Гете нашел здесь свои любовь.

Все великие люди мира 19 веха приезжали на минеральные источники Баден - Бедена. А теперь они ждут Вac?

Рис. 2. Страница (about. html) в окне браузера

<PXAHREF=«list. htm»>Ha3afl</AX/P>

<HR>

<Н2> Хайдельберг - Баден-Баден </Н2>

<PRE>BnKTop Гюго признавался: «Я приехал в этот город десять дней назад... и я не могу от него оторваться». <BR>TeHb поэтов Клеменса Бретано и Людвига Ахима фон Арнима витает над розовым замком, <BR> сияющим в лучах заходящего солнца. Гете нашел здесь свою любовь. <BR>

Все великие люди мира XIX века приезжали на минеральные источники Баден-Бадена. <BR>A теперь они ждут Bac!</PRE>

<РХА HREF=«list. htm»>Ha3afl</AX/P>

</BODYX/HTML>

Задание 3. Создание образца Web-сайта

Создайте самостоятельно сайт, структура и внешний вид которого пред­ставлены на последующих рисунках.

Рисунки для страниц Новости и Услуги можно вставить любые, подоб­рав их в Интернете.

ЗАДАНИЯ ДЛЯ САМОСТОЯТЕЛЬНОЙ РАБОТЫ

Требования:

На создаваемом сайте должен быть иллюстративный материал (картинки, объект ClipArt), ссылки на аналогичные сайты. Привет­ствуется применение при построении усложненных элементов — фреймов, форм.

5.  Создайте Web-сайт для строительной компании.

6.  Создайте Web-сайт для туристического бюро.

7.  Создайте Web-сайт для медицинского центра.

8.  Создайте Web-сайт для завода по строительству тракторов.

9.  Создайте Web-сайт для магазина по продаже компьютеров.

10.  Создайте Web-сайт для станции технического обслуживания автомобилей.

11.  Создайте Web-сайт для горнолыжного курорта.

12.  Создайте Web-сайт для супермаркета.

13.  Создайте Web-сайт для аптеки.

14.  Создайте Web-сайт для крестьянского хозяйства, занимаю­щего производством рыбы в прудах.

15.  Создайте Web-сайт для трамвайного депо.

16.  Создайте Web-сайт для станции метрополитена.

17.  Создайте Web-сайт для фирмы, занимающейся производст­вом и продажей элитных окон.

18.  Создайте Web-сайт для зоомагазина.

19.  Создайте Web-сайт для юридической фирмы.

20.  Создайте Web-сайт для нотариальной конторы.

21.  Создайте Web-сайт для Экспоцентра.

22.  Создайте Web-сайт для специализированного языкового колледжа.

23.  Создайте Web-сайт для факультета государственного инсти­тута.

24.  Создайте Web-сайт для детской студии.

25.  Создайте Web-сайт для фирмы, занимающейся продажей дверей.

26.  Создайте Web-сайт для драматического театра.

27.  Создайте Web-сайт для музыкального театра.

28.  Создайте Web-сайт для художественной галереи.

29.  Создайте Web-сайт для выставочного комплекса.

30.  Создайте Web-сайт для специализированного математиче­ского колледжа.

31.  Создайте Web-сайт для фирмы такси.

32.  Создайте Web-сайт для модного бутика.

Упражнение 1 Создание простейшей Web-cтраницы

1.  Запустите текстовый редактор Блокнот

2.  Введите следующий документ:

<HTML>

<HEAD>

<TITLE> Заголовок документа </TITLE>

</HEAD>

<BODY>

Содержание

документа

</BODY>

</HTML>

3.  Сохраните этот документ под именем first. htm. Внимание перед сохранением убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов (Пуск Настройка Свойства папки Вид)

4.  Запустите программу Internet Explorer

5.  Дайте команду Файл Открыть. Щелкните на кнопке Обзор и откройте файл first. htm.

6.  Посмотрите, как отображается этот файл – простейший корректный элемент HTML. Как отображаются слова «Содержание» и «документ», введенные в двух отдельных строчках?. Почему?

Упражнение 2 Изучение приемов форматирования абзацев

1.  Откройте документ first. htm в программе Блокнот.

2.  Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводится в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.

3.  Введите заголовок первого уровня, заключив его между тегами <Н1> и </Н1>.

4.  Введите заголовок первого уровня, заключив его между тегами <Н2> и </Н2>.

5.  Введите отдельный абзац текста, начав его с тега <Р>. Пробелы и символы перевода строки внутри абзаца можно использовать произвольно.

6.  Введите тег горизонтальной линейки <НR>.

7.  Введите еще один абзац текста, начав его с тега <Р>.

8.  Сохраните этот документ под именем paragraph. htm

9.  Посмотрите, как отображается этот файл. Установите соответствие между кодами HTML и фрагментами документа, отображаемыми на экране

Упражнение 3 Создание гиперссылок

1.  Откройте документ first. htm в программе Блокнот.

2.  Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Введите фразу: Текст до ссылки.

3.  Введите тег: <А НREF=” first. htm “>

4.  Введите фразу: Ссылка

5.  Введите закрывающий тег </А>.

6.  Введите фразу: Текст после ссылки.

7.  сохраните документ под именем link. htm.

8.  Запустите обозреватель Internet Explorer.

9.  Дайте команду Файл Открыть. Щелкните на кнопке Обзор и откройте файл link. htm.

10. Убедитесь в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием).

11. Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.

12. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

Упражнение 4 Создание изображения и использование его на Web-cтранице.

1.  Откройте программу Paint. Задайте размеры нового рисунка, например 50´50 точек (Рисунок Атрибуты).

2.  Выберите крас. цвет переднего плана и зел. цвет фона. Залейте рисунок фоновым цветом.

3.  Инструментом кисть нанесите произвольный красный рисунок на зеленый фон.

4.  Сохраните рисунок под именем pic1.gif (в форматеGIF).

5.  Дайте команду Рисунок атрибуты. Установите флажок Использовать прозрачный цвет фона. Щелкните на кнопке Выбор цвета и выберите зеленый цвет, уже использованный на рисунке в качестве фонового.

6.  Сохраните рисунок еще раз под именем pic2.gif (в форматеGIF) и закройте программу Paint.

7.  Откройте документ first. htm в программе Блокнот.

8.  Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводится в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>

9.  Введите произвольный текст ( протяженностью 4-5 строк) и установите текстовый курсор в его начало.

10. Введите тег <IMG SRC=”pic1.gif” ALIGN=”BOTTOM”>

11. Сохраните документ под именем picture. htm.

12. Запустите обозреватель Internet Explorer

13. Дайте команду Файл Открыть. Щелкните по кнопке Обзор и откройте файл picture. htm. Посмотрите на получившийся документ, обращая внимание на изображение.

14. Вернитесь в программу Блокнот и измените значение атрибута ALIGN=”TOР” Сохраните файл под тем же именем.

15. Вернитесь в программу Internet Explorer и щелкните по кнопке Обновить на панели инструментов. Посмотрите как изменится вид страницы при изменении атрибутов.

16. Вернитесь в программу Блокнот и измените значение атрибута ALIGN=”LEFT” Сохраните файл под тем же именем.

17. Вернитесь в программу Internet Explorer и щелкните по кнопке Обновить на панели инструментов. Посмотрите как изменится вид страницы при изменении атрибутов.

18. Вернитесь в программу Блокнот и измените значение атрибута ALIGN=”LEFT” Сохраните файл под тем же именем.

19. Вернитесь в программу Блокнот и измените имя рисунка SRC=”pic2.gif”. Сохраните файл под тем же именем.

20. Вернитесь в программу Internet Explorer и щелкните по кнопке Обновить на панели инструментов. Посмотрите как изменится вид страницы при изменении атрибутов. В чем различие между двумя созданными рисунками.

Упражнение 5 Приемы форматирования текста.

1.  Откройте документ first. htm в программе Блокнот.

2.  Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Введи произ. текст.

3.  Введите тег <BASEFONT SIZE=”5” COLOR=”BROWN”> . Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.

4.  Введите произвольный абзац, который будет выводится шрифтом, заданным по умолчанию. Начните этот абзац с тега <Р>

5.  Введите теги <Р> <FONT SIZE=”-2” FACE=”ARIAL” COLOR=”GREEN”>

6.  Введите очередной абзац текста, закончив его тегом </FONT>

7.  В следующем абзаце используйте по своему усмотрению парные теги <В> (полужирный шрифт), <I> (курсив) <U> (подчеркивание) <S> (вычеркивание) <SUB> (нижний индекс) <SUP> (верхний индекс)

8.  В следующем абзаце используйте по своему усмотрению парные теги: <ЕМ> (выделение), <STRONG> (сильное выделение) <CODE> (текст программы) <KVD> (клавиатурный ввод) <SAMP> (пример ввода) <VAR> (компьютерная переменная).

9.  Сохраните полученный документ под именем format. htm

10. Запустите обозреватель Internet Explorer и откройте файл format. htm

Упражнение 6 Приемы создания списков

1.  Откройте документ first. htm в программе Блокнот.

2.  Удалите весь текст, находящийся между тегами <BODY> и </BODY>.

3.  Вставьте в документ тег <OL TYPE=”I” >, который начинает упорядоченный (нумерованный) список.

4.  Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>

5.  Завершите список при помощи тега </OL>

6.  Сохраните полученный документ под именем list. htm

7.  Запустите программу Internet Explorer

8.  Дайте команду Файл Открыть. Щелкните по кнопке Обзор и откройте файл list. htm.

9.  Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая внимание на способ нумерации, заданной при помощи атрибута TYPE=

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

11.  Вставьте в документ тег <UL TYPE=”SQUARE” >, КОТОРЫЙ НАЧИНАЕТ НЕУПОРЯДОЧЕННЫЙ ( МАРКИРОВАННЫЙ) СПИСОК

12.  Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>

13.  Завершите список при помощи тега </ UL >. Сохраните документ под тем же именем.

14.  Вернитесь в программу Internet Explorer и щелкните по кнопке Обновить на панели инструментов. Посмотрите как изменится вид страницы обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=É

Упражнение 7 Создание таблиц

1.  Откройте документ first. htm в программе Блокнот.

2.  Удалите весь текст, находящийся между тегами <BODY> и </BODY>.

3.  Введите тег <TABLE BORDER=”10” WIDTH=”100%”>

4.  Введите строку<CAPTION ALIGN=”TOP”> Список телефонов </ CAPTION>

5.  Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом : <TR BGCOLOR=”YELLOW” ALIGN=”CENTER”> <TH> Фамилия<TH> Номер телефона

6.  Определите последующие строки таблицы, предваряя каждую из них тегом <TR> и помещая содержимое каждой ячейки после тега <TD>

7.  Последнюю строку таблицы задайте следующим образом:

<TR> <TD ALIGN=”CENTER” COLSPAN=”2”> На первом этаже здания имеется бесплатный телефон автомат.

8.  Завершите таблицу тегом </ТABLE>

9.  Сохраните файл под именем table. htm

10.  Запустите обозреватель Internet Explorer и откройте файл table. htm.