Создание простейшего htmlдокумента. Форматирование текста

• Название: Создание простейшего htmlдокумента. Форматирование текста
• Дата: 15.03.2022
• Размер: 302 Kb.
• Имя файла: 0001d5c7-ac81e0fa.doc
• Тип: Лабораторная работа; #397897

Лабораторный практикум по HTML

ЛР № 1-6

Класс: 10

Профиль: Физико – математический

Разработал:

Учитель информатики Тарасова С. П.

Лабораторная работа №1

Тема: «Создание простейшего HTML-документа.

Форматирование текста».

Цель работы: познакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Структура html-документа:

HTML-код страницы помещается внутрь контейнера ... , заголовок страницы в контейнер .

Контейнер обязательно содержит открывающий и закрывающий теги.

В разделе описания заголовка можно указать заглавие документа, для этого используется тэг (имя страницы).

Весь остальной HTML-документ, включая весь текст, содержится внутри тэга содержание (содержание страницы).

{начало страницы}

{закрытый тэг описания заголовка}

{содержание страницы}

текст

{закрытый тэг описания страницы}

{конец страницы}

Основные тэги форматирования html-документа:

Заголовок страницы задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий)

Заголовок страницы целесообразно выделить самым крупным шрифтом:

заголовок страницы

(например,

Все о компьютере

)

заголовок страницы - в данном случае заголовок будет записан самым мелким шрифтом;

Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом:

Все о компьютере

{выравнивание текста по правому краю}

{выравнивание текста по центру}

{выравнивание текста по левому краю}

Для задания параметров форматирования используется контейнер ..., при этом используя различные атрибуты:

Атрибут FACE позволяет задать гарнитуру шрифта;

Атрибут SIZE – размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);

Атрибут COLOR – цвет шрифта (можно задавать названием цвета (например, “red”, “green”, “blue” и так далее));

Например, ... (шрифт размера 7, тип шрифта – Arial, цвет - голубой);

Также можно задавать начертание текста или фрагмента текста:

текст - полужирный шрифт;

текст - начало текста курсивом;

текст - подчёркивание;

Комбинированное выделение осуществляется следующим образом:

<Тэг-1><Тэг-2> фрагмент текста

Например, фрагмент текста (текст полужирный и подчеркнутый);

При создании html-документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR - определяет цвет фона документа, TEXT - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (“red”, “green”, “blue”);

Например, - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)

Списки:

Ненумерованный список располагается внутри контейнера

…

, а каждый элемент списка определяется также тэгом

. С помощью атрибута TYPE тэга

можно задать вид маркера списка: “disc” (диск),

“square” (квадрат), “circle” (окружность). Например,

(маркированный список, маркер в виде окружности)





• текст



• текст



• текст





Ход работы:

1. 
   Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.
   
2. 
   Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта - Comic Sans MS, размер – 1, цвет шрифта – голубой, подчеркивание;
   
3. 
   Задать цвет фона страницы – бирюзовый цвет;
   
4. 
   Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;
   
5. 
   Цвет текста в первом абзаце задать белым цветом, тип шрифта - Monotype Corsiva, размер – 7;
   
6. 
   Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер – 6;
   
7. 
   Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер – 5;
   
8. 
   В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;
   

Листинг html-программы:









Все о компьютере


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

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

На этом сайте вы можете узнать много новой и полезной информации для вас.




• Компьютер



• Терминологический словарь



• Цены на товары







Все о компьютере





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




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




На этом сайте вы можете узнать много новой и полезной информации для вас.




---

















---



Процессор - это центральное устройство, производящее обработку информации в двоичном коде.



---

















---



Публикации во Всемирной паутине реализуется с помощью web-сайтов.





Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и web-сайт состоит из компьютерных web-страниц. Сайт является интерактивым средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может





зарегестрироваться на сайте, заполнить анкету и так далее. Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы. Гиперссылки также имеются на других web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту. Web-сайты являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию.





Таблицы в html-документе



















Список сотрудников
Фамилия	Имя	Отчество	Дата рождения	Отдел
Гончаров	Александр	Петрович	13.10.75	Технический
Савчук	Юрий	Олегович	02.05.79
Тарасов	Алексей	Сергеевич	27.02.72
Данилов	Петр	Андреевич	17.10.77





---











1
2	3	4










1
2	3	4










1
2	3	4




---







































































1
4	2						5
	3.1	3				3.2
		6	7	8	9
			10	11
		12
	13
12





---





































































1	2
	3	4		5		6
7	8		9.1	9.2		10
	11		9.3	9.4		12
	13	14		15		16





Анкета






Фамилия:





Имя:





Отчество:






---


Пароль:





---


Введите дату рождения:






Января

Февраля

Марта

Апреля

Мая

Июня

Июля

Августа

Сентября

Октября

Ноября

Декабря






---


Укажите самый удобный способ для связи с вами:


Домашний телефон




Рабочий телефон


Электронная почта



---


Укажите ваше образование:




Нигде не учился

Среднее общее образование

Среднее полное образование

Среднее специальное образование

Среднее профессиональное образование

Незаконченное высшее образование

Высшее образование

Два высших образования




---


Немного о себе:


<br /><br />

---













Лабораторная работа №5

Тема: «Создание html-документа

с помощью редакторов гипертекста».

Цель работы: изучить основные тэги для создания фреймов в html-документа; закрепить навыки работы с таблицами и списками.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Создание гиперссылки на текст:

Графическая ссылка:











Ход работы:

1. Преобразуйте домашнюю страницу в простой домашний сайт, связав отдельные части с помощью гиперссылок. Необходимо использовать все виды гиперссылок:

Обязательные страницы:

• 
  Главная страница;
  
• 
  Об авторе;
  
• 
  Моя школа;
  
• 
  Мой класс;
  
• 
  Моя будущая профессия.
  

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

3. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.

Листинг html-программы:

Главная страница:










Рассказ обо мне...








• 
  Об авторе



• 
  Моя школа



• 
  Мой класс



• 
  Моя будущая профессия









Об авторе



Меня зовут Тарас. Мне семнадцать лет. Я учусь в 11-м классе. Кроме меня в семье еще два ребенка - мой старший брат Олег и младшая сестренка Мария. Олегу 21 год, он ходит в университет. Он будет дантистом. Марии еще только двенадцать, она еще школьница. Я забыл упомянуть еще одного члена нашей семьи. Это - наш любимый пудель Тим.

Мои родители еще совсем не старые. Моей маме сорок, она работает в газете. Моему папе - сорок четыре, он работает инженером ЭВМ. Мои родители очень любят свои профессии.

В школе я учусь хорошо. Мои родители гордятся моими отметками. Я увлекаюсь спортом - играю в баскетбол. В летнее время мне нравится парусный спорт и виндсерфинг. Я участвую в различных соревнованиях по баскетболу.

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

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










Моя школа


Когда человек взрослеет, он понимает, что есть некоторые необходимые вещи и места, к которым всегда хочется возвращаться. Это такие вещи, как родина, родной дом и школа.

Моя школа - это трехэтажное здание, расположенное в жилых кварталах нашего города. Туда ходили все дети, живущие по соседству, потому что туда можно дойти пешком. За зданием школы есть спортплощадка, а перед школой зеленая лужайка с клумбами.

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

Наш класс был на втором этаже, окна выходили на школьный двор. В одном только нашем классе был классный руководитель. Он оказался очень добрым и знающим учителем, который не жалел времени, чтобы водить нас в интересные места и на выставки. Он был учителем русского языка и литературы. Мы его очень уважали.








Мой класс


Мне очень нравится учиться. Моя любимая пословица: "Век живи, век учись". Мне бы очень хотелось рассказать о нашей школьной жизни...

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

Наш класс был настолько дружным и сплоченным. И все это благодаря нашему классному руководителю. Мы всегда с удовольствием участвуем в мероприятиях, которые проводятся в школе и классе. Всегда ходим на выставки, в музеи, в кино, в театры и другие места культурного отдыха.

У меня есть лучший друг в классе. Его зовут Вова. Мы с ним сидим за одной партой. Мы вместе учимся уже 10 лет. Я рад, что у меня есть такой друг, которому я могу доверить все, он всегда меня поддерживает, а я его. Он, как и я, любит играть в баскетбол, поэтому мы вместе ходим на тренировки. Мы практически никогда не ссоримся, потому что дорожим нашей дружбой. У нас очень хорошие взаимоотношения со всем классом. И каждый день просто приятно приходить в школу.











Моя будущая профессия


Я хочу быть переводчиком. Это интересная и полезная профессия.

У моих родителей большая библиотека, и они научили меня любить книги. Мне очень нравится читать. Мои любимые предметы в школе - английский, литература, география и история. Мои любимые писатели - Шекспир, Диккенс, Вальтер Скотт, Джек Лондон, Марк Твен.

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

Я хочу стать переводчиком по нескольким причинам. Это интересная профессия, потому что переводчик все время встречается с людьми из разных стран и культур и имеет возможность многое о них узнать. Кроме этого,та професси очень полезна, так как помогает людям понять друг друга.



















Ресурсы сети



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

Различные поисковые системы могут использовать различные механизмы поиска, хранения и предоставления пользователю информации. Поисковые системы Интернета можно разделить на две группы:





• Поисковые системы общего назначения



• Специализированные поисковые системы





Современные поисковые системы часто являются информационными порталами, которые предоставляют пользователям не только возможности поиска документов в Интернете, но и доступ к другим информационным ресурсам (новостям, информации о погоде, о валютном курсе, интерактивным географическим картам и так далее).









Работаем с фрэймами...







Работаем с фрэймами...







Поисковые системы






























Поиск информации с помощью автоматических индексов
	Yandex
	Rambler
	Aport
	Google
	Filesearch




3.2. Каталоги;










Каталоги








1. Yandex



2. Rambler



3. List



4. Google



5. Aport








Литература








1. Библиотека



2. Техническая литература



3. Стандарты