Please verify you are a human
Access to this page has been denied because we believe you are using automation tools to browse the website.
This may happen as a result of the following:
- Javascript is disabled or blocked by an extension (ad blockers for example)
- Your browser does not support cookies
Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking them from loading.
Reference ID: #dbcd4d5d-8782-11ee-a5ae-03ea50a9c335
Powered by PerimeterX , Inc.
Лабораторная работа№1 Представление текстовых документов в формате html
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML , которая обычно выглядит примерно так: В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. и он будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox) . Далее обозначается начало и конец документа тегами и соответственно. Внутри этих тегов должны находиться теги головы ( ) и тела документа( ) . Обычно основой головы документа является элемент TITLE — заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. Основное содержимое: текст, таблицы, картинки, — находится в теле документа. На этой картинке схематически изображена структура: Как вы видите, голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа , и лишь затем открываем тело . И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество. Вставка комментария:— закомментированный текст при просмотре документа через браузер видно не будет. В начале комментарий нужно открыть тегомзатем вписать текст, и закрыть тегом—>.Тег внутри элемента TITLE не действует.
Создать простейшую страничку.
ШАГ 1.Создайте на своем компьютере папку с названием вашего будущего сайта, ну к примеру в данном случае актуально будет назвать папкуobuchenie_html. Внутри папки создайте еще одну папку с названиемwww, а внутри нее еще одну для изображений с названиемimg(позже вставим туда картинки): ШАГ 2:Зайдите в созданную на предыдущем шаге папкуwwwи создайте внутри нее текстовый документ. Для этого зайдите в нее, кликните правой кнопкой мыши в выпадающем меню выберите Создать — Текстовый документ. ШАГ 3:Напишите в Блокноте текст простейшей странички Пример:Это моя первая страничка!Ура. Я создал свою первую страницу на html.ШАГ 4:Сохраните ваш документ как «index.htm» («.html» даст тот же результат). После сохранения можете удалить текстовый документ. ШАГ 5:Запустите получившийся файл index.htm Для того, чтобы внести изменения в страничку, Вам нужно открыть данный файл через обычный блокнот. Либо же, можно менять прямо в браузере, но только в браузере Opera.
Изучить форматирование заголовков и абзацев
По умолчанию текст идет слитно, без разделений на абзацы, заголовки, т.е. форматирование отсутствует! Основными элементами форматирования текста в html являются тэги:
| P | Используется для разбивания текста на параграфы |
| H1,H2. H6 | Применяются для создания заголовков 1,2. 6 уровней |
| BR | Используетcя для переноса строки |
| DIV , SPAN | Используются для выделения части документа определенным способом. |
Рассмотрим каждый тэг подробнее. 
P —используется для разметки параграфов в html документах.Атрибуты:ALIGN— определяет способ горизонтального выравнивания параграфа. Возможные значения:left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине. По умолчанию имеет значениеleft. Пример:Этот параграф по центруЭтот по левому краюЭтот тоже по левому (т.к. по умолчанию)Этот по правому краюВ этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краюПримечание:содержимое в кавычках д.б. написано без пробелов, т.е. а не иначе не будет работать! 
H1,H2. H6 —Применяются для разбивания текста на смысловые уровни — разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта. Атрибуты:ALIGN— определяет способ горизонтального выравнивания заголовков. Возможные значения:left, center, right .По умолчанию —left. Пример:Большой заголовокЗаголовок поменьшеЕще меньшеСовсем маленькийМалюсенький заголовочекНу просто лилипутский заголовочек То при просмотре в браузере увидим: 
Примечание:закрывающий тег обязателен! 
BR —данный элемент осуществляет перенос строки.Пример: Если внутри тела документа написать следующее: Начинается первая строка теперь идет вторая а вот уже и третья А это параграф и внутри него тоже можно использовать тег переноса строки. Его надо использовать всегда, когда надо перенести строку:) Увидим следующее: 
Как вы наверное заметили, при переносе строки не начинается новый параграф! Перенос- он и есть перенос! Не имеет закрывающего тега. 
DIV — используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать – перемещать, регулировать отступы, скрывать и т.п. Обязателен закрывающий тег! Атрибуты:ALIGN— определяет способ горизонтального выравнивания контейнера. Возможные значения:left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине .По умолчанию имеет значениеleft. Допустим нам нужно выровнять первые две строчки текста из предыдущего примера по правому краю, не выделяя при этом их в абзац. Начинается первая строка теперь идет вторая а вот уже и третья А это параграф и внутри него тоже можно использовать тег переноса строки. Его надо использовать всегда, когда надо перенести строку:) Что мы увидим: 
Т.е. мы взяли две строчки кода, заключили их в контейнер DIVи выравняли его по правому краю! Примечание: Находящиеся между начальным и конечным тегами текст или HTML-элементы выделяются как бы в отдельный параграф(но отступы гораздо меньше). Текст содержащийся в элементе DIV выделяетсяв отдельную строку!
—>Мой сайт —>
Цель: научить создавать простейшие HTML-документы, разбивать текст на абзацы, выполнять выравнивание различными способами, просматривать Web-страницы с помощью браузера; развитие познавательного интереса; воспитание аккуратности, бережного отношения к технике.
Теги — это определённые последовательности символов, заключенные между знаками < (меньше>и > (больше). Символ < обозначает начало теги, символ >обозначает конец тега.
HTML-документ – это всё, что заключено между тегами HTML> и HTML>.
Структура HTML документа
Заголовок находится между тегами
и . В нем содержится информация о документе, которая не выводится на экран (является необязательным элементом).Название странички располагается между тегами
Прописные и строчные буквы в написании тегов значения не имеют.
Тело выводится на экран программой просмотра (браузером) – текст, картинки, видеофрагменты.
Оно заключается между тегами
и .Задание 1. Создание простейшего HTML-документа.
1.Откройте текстовый редактор Блокнот
2.Создайте в нем следующий документ:
Привет! Это моя первая страничка!
- Сохраните этот файл в своей папке, выполнив команду Файл/ Сохранить как, в поле Имя файла введите Пример.html. НЕ ЗАКРЫВАЯ Блокнот откройте этот файл в окне программы просмотра Internet Explorer с помощью команды Файл/ Открыть.
Задание 2. Разбиение на абзацы, различные способы выравнивания.
Разбиение на абзацы
Абзац с выравниваем
По правому краю
Перевод на новую строку в абзаце
Заголовок (уровни от 1 до 6)
текст1
текст6
Заголовок с выравниваем
текст
Замечание: пробелы и клавишу Enter внутри абзаца можно использовать произвольно (в браузере это не отображается).
1.Усовершенствуйте свою страничку, добавив в нее следующий текст:
Привет! Это моя первая страничка!
В лесу родилась елочка.
В лесу она росла.
Зимой и летом стройная, зеленая была.
Метель ей пела песенку:
«Спи, елочка, бай-бай».
Мороз снежком укутывал:
«Смотри, не замерзай!»
- Сохраните изменения, выполнив команду Файл/ Сохранить. НЕ ЗАКРЫВАЯ Блокнот откройте этот файл в окне программы просмотра Internet Explorer с помощью команды Файл/ Открыть, чтобы увидеть изменения нажмите кнопку Обновить.
- Приведите свою страничку к предложенному виду, добавив, необходимые теги.
Привет! Это моя первая страничка!
В лесу родилась елочка.
В лесу она росла.
Зимой и летом стройная,
Метель ей пела песенку:
«Спи, елочка, бай-бай».
Мороз снежком укутывал:
«Смотри, не замерзай!»
- Сохраните изменения,. НЕ ЗАКРЫВАЯ Блокнот просмотрите с помощью браузера Internet Explorer (чтобы увидеть изменения нажмите кнопку Обновить).
5.Вставьте после фразы «Привет! Это моя первая страничка!» два заголовка:
Заголовок первого уровня: Меня зовут (впишите свое имя)
Заголовок второго уровня: Я учусь в группе (впишите номер своей группы).
Заголовок третьего уровня: Это моя любимая песенка
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
7.Выровняйте заголовки следующим образом:
Заголовок первого уровня по левому краю,
Заголовок второго уровня по центру,
Заголовок третьего уровня по правому краю.
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
Подведение итогов
- Сделайте в тетради конспект теоретического материала.
- Ответьте на следующие вопросы:
1.Что такое , для чего используется?
2.Какими способами можно создать Web-страницу?
3. Назовите обязательные и необязательные элементы HTML документа. Какового их назначение?
4. Каким образом можно сохранить HTML документ, созданный в Блокноте? Как его просмотреть?
5. Что делать, если закрыли Блокнот, а вам необходимо внести изменения в HTML документ?
Домашнее задание:
- Выучите конспект.
- Сформулируйте название вашего будущего сайта, подберите к нему материал.
Задание 4. Оформление фона HTML-документа, вставка картинки.
3. После фразы «В лесу родилась» вставьте изображение елочки (елка.bmp).
4. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer.
5. Попробуйте все способы выравнивания текста около изображения, не меняя место вставки картинки. Запишите в тетрадь назначение всех аргументов выравнивания тек-ста около изображения.
6. Вставьте в качестве фона файл шары.jpg.
7. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer.
Контрольные вопросы:
1. Какие существуют параметры форматирования шрифта в HTML-документе?
2. Какие существуют способы выравнивания текста около изображения?
3. Можно ли в качестве фона для Web-страницы использовать картинку?
4. Что такое HTML, для чего используется?
5. Какими способами можно создать Web-страницу?
6. Назовите обязательные и необязательные элементы HTML-документа. Каково их на-значение?
7. Каким образом можно сохранить HTML-документ, созданный в Блокноте? Как его просмотреть?
8. Что делать, если закрыли Блокнот, а вам необходимо внести изменения в HTML-документ?
Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:
Прямо сейчас студенты читают про:
Этапы жизненного цикла организации Жизненный цикл организации – ее предсказуемые изменения с определенной последовательностью состояний в течение времени.
Влияние углерода на свойства стали Углерод – не случайная примесь, а важнейший компонент углеродистой стали, от количества которого завичсят ее свойства.
Правила сбора мокроты на исследования Сбор мокроты на общий анализ: Цель: — диагностическая. Показания: — заболевания органов дыхания и ССС. Оснащение: — чистая стеклянная.
Учебно-воспитательные задачи урока Примерный перечень учебно-воспитательных задач урока 1. ОБРАЗОВАТЕЛЬНЫЕ ЗАДАЧИ (ЦЕЛИ УРОКА).
Сдвиг графика влево/вправо вдоль оси абсцисс Если к АРГУМЕНТУ функции добавляется константа, то происходит сдвиг (параллельный перенос) графика вдоль оси .