Создание простой web страницы с помощью текстового процессора
Умение создавать Web – сайты со временем становится актуальным навыком простого пользователя. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей. Однако Web – сайт может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой-то интерес и если он имеет привлекательное внешнее оформление. Оформление Web – страниц становится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». И если человек решил опубликоваться в Интернете, то следует разобраться – как и какими средствами создаются Web – страницы.
Тема нашей работы
«Создание Web–сайта c помощью языка гипертекстовой разметки HTML».
разработать сайт с помощью языка HTML.
В процессе работы необходимо было решить следующие задачи:
Изучить основы языка HTML
Изучить основные способы создания Web – страниц
Продумать и спроектировать будующий сайт.
Собрать информацию, необходимую для верстки страниц сайта
Продумать внешний вид сайта
Часть 1. Web-сайты и Web-страницы
Что же такое Web-сайт? Web-сайт- это совокупность программных, информационных, а также медийных средств, логически связанных между собой.
Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определённой теме или проблеме. Любой пользователь Интернета может создать свой тематический сайт, на котором разместит информацию о своих разработках, увлечениях и т.д. Прежде чем разместить свой Web-сайт на сервере в Интернете, необходимо его тщательно протестировать, так как посетителями вашего сайта будут десятки миллионов пользователей Интернета.
На сайтах может содержаться абсолютно любая информация. Например о компьютерных играх, автомобилях, аквариумных рыбках, городах и странах мира и т.д. и т.п. Список можно продолжать бесконечно. Как вам например сайт "Война и мир"? Получается, что сайт это книга, но только электронная.
Как и обычная книга, Web-сайт состоит из страниц, которые называются Web-страницами. Web-страницы создаются с использованием языка разметки гипертекстовых документов. В обычный текстовый документ вставляются управляющие символы , которые определяют вид Web-страницы при просмотре в браузере.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора.
Сайты могут содержать подразделы, ориентированные целиком на ту или иную аудиторию. Аудитория может различаться по виду используемого оборудования, по используемому языку аудитории. К примеру, известны так называемые мобильные версии сайта, предназначенные для работы с ними с использованием смартфона.
Обращаем Ваше внимание, что в соответствии с Федеральным законом N 273-ФЗ «Об образовании в Российской Федерации» в организациях, осуществляющих образовательную деятельность, организовывается обучение и воспитание обучающихся с ОВЗ как совместно с другими обучающимися, так и в отдельных классах или группах.
Рабочие листы и материалы для учителей и воспитателей
Более 2 500 дидактических материалов для школьного и домашнего обучения
Столичный центр образовательных технологий г. Москва
Получите квалификацию учитель математики за 2 месяца
от 3 170 руб. 1900 руб.
Количество часов 300 ч. / 600 ч.
Успеть записаться со скидкой
Форма обучения дистанционная
- Онлайн
формат - Диплом
гособразца - Помощь в трудоустройстве
Видеолекции для
профессионалов
- Свидетельства для портфолио
- Вечный доступ за 120 рублей
- 311 видеолекции для каждого
План – конспект по информатике и ИКТ
Урок: 38
Класс: 9а, 9б.
Дата проведения: 26.01.2017, 25.01.2017.
Раздел. Передача информации в компьютерных сетях.10 часов.
Тема урока. Создание простейшей Web -страницы с использованием текстового редактора.
Цель: Создание Web-страниц с помощью HTML.
Задачи урока:
Познавательная
– Познакомить каждого ребенка с созданием Web-страницы в текстовом редакторе Блокнот.
– Сформулировать основные принципы создания WEB-страниц;
– Формировать навыки и умения работы с тегами языка HTML.
Развивающая
– Развивать логику, умение анализировать, сравнивать, выделять главное, делать выводы, высказывать свою мысль.
Воспитательная
– Воспитывать аккуратность, внимательность, вежливость и дисциплинированность
Вид урока: обобщение знаний учащихся.
I. Орг.момент.
– Здравствуйте ребята. Садитесь.
II. Актуализация знаний.
– Ребята, давайте вспомним, что мы изучали на предыдущих уроках.
(Компьютерные сети, Интернет, Служба WWW , познакомились со способами поиска в интернете, узнали, что Web-страницы создаются с использованием языка HTML)
– А сейчас давайте немного повторим, что такое web – документ?
WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера
Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы он помещался целиком на экране. Поэтому WEB-документы называют еще WEB-страницами.
– Ребята, а что такое web – сайт?
Несколько WEB-страниц на одну тему называют WEB-узлом или WEB-сайтом
Сегодня мы с вам и попробуем сами создать с помощью текстового редактора веб-страницу, но презде нам необходимо ознакомиться с темами языка HTML .
III. Изучение нового материала.
Язык HTML (HyperText Markup Language, язык разметки гипертекста) – это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web-браузеров. Когда документ создан с использованием HTML, Web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Web-страницы могут быть созданы с помощью
· обычного текстового редактора;
· редактора, способного сохранять в формате HTML;
HTML-документы сохраняются на диске как обычные текстовые документы в формате ASCII. Для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений .HTM (для Windows 3.1) или .HTML (для Windows 95/98/NT/XP, Macintosh и Unix).
Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов – тэги.
Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается от начального только присутствием символа "/" добавляемого перед именем тэга. При интерпретации тэгов браузер не делает различия между строчными и прописными буквами. Поэтому сами тэги можно набирать на любом регистре. Зачастую параметр (атрибут) является необязательной величиной и его можно пропускать.
HTML — это теговый язык разметки документов. Элементы — это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег — это специальный текст, заключенный в угловые скобки "". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/". Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.
Презентация для обучающихся 8 классов. Первый вводный урок по теме "Создание web-страниц".
Вложение | Размер |
---|---|
1_urok_sozdanie_stranits.pptx | 870.84 КБ |
Предварительный просмотр:
По теме: методические разработки, презентации и конспекты
разработка урока по теме "Текстовый редактор. Вёрстка страницы."
Обобщающий урок по теме "Обработка текстовой информации". Ученики заранее готовят материал, касающийся символики России, Забайкальского края и родного поселка; стихотворения наших местных поэтов.
Вводный урок по теме "Создание и использование текстового редактора"
Вводный урок, на котором рассматривается история документа (в каком виде были документы), также сравнивается текстовый редактор и текстовый процессор (включая среду работы). Затем более подробно рассм.
Разработка урока по информатике и ИКТ по теме «Создание, редактирование и форматирование документов в текстовом редакторе Word»
Разработка урока по информатике и ИКТ по теме «Создание, редактирование и форматирование документов в текстовом редакторе Word».
Создание документов в текстовых редакторах. Форматирование документов в текстовых редакторах.
Данная презентация предназначена для повторения основных возможностей ТР и ТП.
Методическая разработка открытого урока по дисциплине «Интернет-технологии» Тема: Создание простой Web-страницы на языке HTML.
Актуальность выбранной темы открытого урока заключается в необходимости владения навыками создания web-документов, учитывая, что в настоящее время очень развиты Интернет коммуникации. Необходимо.
Текстовый редактор MS Word. Форматирование абзаца, параметры страницы, вставка таблицы, рисунка.
МЕТОДИЧЕСКАЯ РАЗРАБОТКАЕН.02. ИнформатикаДля специальности: 34.02.02 Медицинский массаж (для обучения лиц с ограниченными возможностями здоровья по зрению).
Интегрированный урок по информатике и биологии "Обобщение и повторение строения эукариотической клетки с использованием текстового редактора Word"
Разработан интегрированный (совместный) урок по биологии и экологии на тему "Обобщение и повторение строения эукариотической клетки с использованием текстового редактора Word". В процессе урока, прово.
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
В этой статье мы расскажем вам, как с помощью HTML-кода создать простейшую веб-страницу. HTML является одним из основных компонентов интернета, потому что задает структуру веб-страниц. Веб-страницу можно создать в текстовом редакторе, который есть в Windows или macOS.
Введите и нажмите ↵ Enter . Этот тег содержит описание веб-страницы и заголовочные элементы. Контент этого тега на странице, как правило, не отображается. Контентом являются описание страницы, метаданные, таблицы стилей CSS и другие языки сценариев. [1] X Источник информации
Введите и нажмите ↵ Enter . Этот тег закрывает тег описания страницы. На данном этапе HTML-код должен выглядеть примерно так.
Введите тег под закрывающим тегом «head». Этот тег содержит весь контент HTML-документа. Контент этого тега отображается на веб-странице.
-
Добавьте дополнительные заголовки по мере необходимости. Можно создать до шести заголовков; это делается с помощью тегов - . Заголовки будут иметь разные размеры. Например, код для создания трех заголовков разного размера будет таким:
. Этот тег содержит абзац текста. Такой тег отобразит текст нормального размера.
Введите
после текста и нажмите ↵ Enter . Этот тег закрывает тег абзаца текста. Ниже приведен пример абзаца в HTML-документе:- Научиться создавать простые Web -страницы с использованием текстового редактора.
Планируемые образовательные результаты:
Предметные – формирование навыков создания Web -страниц, изучение команд языка HTML .
Метапредметные – развитие умения планировать результаты учебной деятельности, понимания востребованности Web -технологий в современном мире .
Личностные – развитие навыков концентрации внимания, развитие системного мышление, усидчивости.
Познакомиться со структурой html -документа.
Изучить команды для установления расположение текста на экране.
Изучить команды форматирования текста.
Отработать приёмы размещения графики на Web -страницах.
Научиться создавать таблицы.
Изучить построение гиперсвязей.
Материалы урока: персональный компьютер ученика, текст практической работы с пошаговой инструкцией, программа Блокнот, браузер.
I. Организационный момент.
II. Актуализация знаний.
Деловая игра по теме «Анализ наиболее успешных сайтов»
Роли: Руководитель группы аналитиков, докладчик.
Функции руководителя группы аналитиков – организация работы по анализу причин успеха сайтов, имеющих наибольший рейтинг, докладчика – представление отсчёта о проделанной работе.
Игровая цель: выявление причин успеха Web -сайтов, имеющих наибольший рейтинг.
Дидактические цели:
Формирование у учащихся знаний об основных принципах дизайна сайтов.
Выработка умения анализировать Web -сайты с точки зрения их содержательной ценности.
Умение представлять результаты анализа в вербальной форме и при помощи компьютерных программ MS Word , MS PowerPoint .
Совершенствование навыков выступления в аудитории.
Воспитательные цели:
Развитие творческого мышления.
Выработка установки на практическое использование полученных знаний, умений и навыков.
Воспитание индивидуального стиля поведения в процессе взаимодействия с людьми.
Сценарий игры. В ходе проведения деловой игры по данной теме, каждой группе учащихся предлагается проанализировать определенное количество сайтов, занимающих лидирующие позиции в рейтинге, например Rambler ’ s Top 100.
В качестве примерных вопросов, на которые должны ответить участники игры, можно предложить следующие:
Соответствует ли анализируемый сайт принципам Web -дизайна, как их понимают участники игры? Если нет, то в чём заключается расхождение?
В чём причина популярности того или иного сайта? Что определяет его успех в большей степени?
Какие недостатки можно выделить по каждому из рассмотренных сайтов?
Игровой конфликт – противоречие, которое обусловлено разностью позиций игроков.
Способ генерирования событий – смешанный.
Выводы: обосновать основные правила Web -дизайна.
Профессиональный сайт должен корректно отображаться на экране.
Web -страница должна идентично отображаться в различных браузерах ( Internet Explorer , Google Chrome , Opera , Yandex и др.).
Все страницы сайта и интегрированные в них графические элементы должны быть минимальными по объёму.
Web -страница обязательно должна включать навигационные элементы.
Весь проект должен быть выдержан в одном дизайнерском стиле.
Использовать только корректные цветовые схемы.
III. Постановка цели и задач
На прошлом уроке мы познакомились с тэгами языка HTML . В ходе деловой игры, рассмотрели правила оформления Web -страниц. Сегодня нам предстоит научиться применять наши знания на практике.
Давайте поставим цели и задачи нашего урока.
Учащиеся ставят цели и задачи урока. Учитель корректирует.
IV. Практическая работа
HTML ( от англ. HyperText Markup Language ) – язык гипертекстовой разметки, при помощи которого создаются Web-страницы.
Задание № 1. Создание простейшего файла HTML
1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.
2. Запустите программу Блокнот (Notepad).
3. Наберите в окне программы простейший файл HTML.
Учебный файл HTML
Расписание занятий на вторник
4. Сохраните файл под именем INDEX.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.
5. Для просмотра Web-страницы используйте любой браузер (Internet Explorer, Google Chrome , Opera , Mozilla Firefox , Yandex или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу INDEX.HTML откройте окно браузера.
Результат работы показан на рисунке 1.
Рис. 1 Результат работы
Задание № 2. Управление расположением текста на экране
1. При необходимости откройте текст Web-страницы в Блокноте (1 щелчок правой клавишей мыши по файлу INDEX.HTML, в контекстном меню выбрать команду Открыть с помощью. и выбрать программу Блокнот). При необходимости открыть файл в браузере – двойной клик по значку файла левой клавишей мыши.
2. Внести изменения в файл INDEX.HTML, расположив слова Расписание, занятий, на вторник на разных строках.
Учебный файл HTML
3. Сохраните текст с внесенными изменениями в файле INDEX.HTML (меню Файл | Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка). Изменилось ли отображение текста на экране? Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.
Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.
Задание № 3. Некоторые специальные команды форматирования текста
Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того существует команда, запрещающая программе браузера изменять каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный
фрагмент текстового файла. Тег перевода строки
отделяет строку от последующего текста или графики. Тег абзаца
тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.
Оба тега являются одноэлементными, тег
– двойной, т.е. требуется закрывающий тег.
1. Внесите изменения в файл INDEX.HTML
Учебный файл HTML
2. Сохраните внесенные изменения, переключитесь на панели задач на программу браузера, обновите Web-страницу.
Как изменилось отображение текста на экране?
Задание № 4. Выделение фрагментов текста
1. Внести изменения в текст файла INDEX.HTML
Учебный файл HTML
2. Посмотрите полученную Web-страницу.
Возможно использование комбинированных выделений текста.
Расписание занятий на вторник
Но при этом необходимо помнить следующее правило использования комбинированных тегов:
Обратите внимание на «вложенность» тегов, она напоминает «вложенность» скобок.
Задание № 5. Задание размеров символов Web-страницы
Существует два способа управления размером текста, отображаемого браузером:
использование стилей заголовка,
задание размера шрифта основного документа или размера текущего шрифта.
Используется шесть тегов заголовков: от
(тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.
1. Внесите изменения в файл INDEX.HTML
Учебный файл HTML
занятий на вторник
В результате выполнения, должен получиться результат, представленный на рисунке 2.
Рис. 2 Результаты работы
Задание № 6. Установка размера текущего шрифта
Тег шрифта позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.
1. Внесите изменения в текст INDEX.HTML
Учебный файл HTML
занятий на вторник
2. Самостоятельно измените размер текста «занятий на вторник», используя тег .
3. Измените оформление текста HTML-документа, используя тег выделения фрагментов и тег перевода строки и абзаца.
Задание № 7. Установка гарнитуры и цвета шрифта
Тег предоставляет возможности управления гарнитурой, цветом и размером текста. Изменение гарнитуры текста выполняется простым добавлением к тегу атрибута FACE. Например, для отображения текста шрифтом Arial необходимо записать:
Для изменения цвета шрифта можно использовать в теге атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную ( G – Green ), синюю ( B – blue ), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.
1. Внесите изменения в файл INDEX.HTML
Учебный файл HTML
Расписание занятий на вторник
Задание № 8. Выравнивание текста по горизонтали
1. Внесите изменения в файл INDEX.HTML
Учебный файл HTML
занятий на вторник
Задание № 9. Задание цвета фона и текста
При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге
. Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок.
1. Внесите изменения в файл INDEX.HTML
Учебный файл HTML
занятий на вторник
2. Просмотрите изменения Web-страницы в браузере.
Таблица 1. Коды основных цветов в HTML
Задание № 10. Размещение графики на Web-странице
Тег позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег является одиночным. Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.
Для выполнения следующего задания поместите файл с именем CLOCK.JPG (или другим именем) в рабочую папку.
Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете файл графического изображения во вложенной папке, то при описании изображения необходимо указывать путь доступа к файлу изображения, отображая вложенность папок.
1. Внесите изменения в файл INDEX.HTML
Учебный файл HTML
занятий на вторник
2. Просмотрите изменения вашей Web-страницы в браузере.
На экране вы увидите, что показано на рисунке 3.
Рис.3 Результат работы
Задание № 11. Создание таблицы
Таблица является частью HTML-документа. Она представляет собой прямоугольную сетку, состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется ячейкой таблицы. Ячейка может содержать в себе текст, графику или другую
Таблица состоит из трех основных частей:
Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).
1. Запустите программу Блокнот и наберите текст следующей Web-страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.
5 класс
Понедельник
2. Сохраните файл в личной рабочей папке под именем 5.HTML
3. Для просмотра созданной Web-страницы в окне личной рабочей папки двойным щелчком левой клавиши мыши загрузите браузер.
На экране вы увидите то, что показано на рисунке 4.
Рис. 4 Результат работы
Задание № 12. Создание ссылки на другой HTML-документ
Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.
1. Внесите изменения в файл INDEX.HTML
Учебный файл HTML
занятий на вторник
5 класс | 6 класс |
7 класс | 8 класс |
9 класс | 10 класс |
11 класс |
2. Сохраните файл INDEX . HTML
3. Просмотрите полученную Web-страницу.
На экране вы увидите то, что изображено на рисунке 5.
Рис. 5 Результаты работы
В ходе выполнения практической работы, учитель прерывает деятельность учащихся для проведения физкультминутки .
V. Подведение итогов урока
Проверка выполненной работы. Оценивание работы учащихся с выставлением оценок.
VI. Домашнее задание
1) Читать по учебнику Семакин Информатика 11 класс (базовый уровень) § 14-15.
2) Создать простой Web -сайт на тему «Моя семья».
VII. Рефлексия
Коллективная оценка эмоционального состояния класса:
Учитель просит поднять руку всех, кто считает, что его эмоциональное состояние: 1) бодрое; 2) усталое.
Подписи к слайдам:
Создание простейших Web- страниц с использованием текстового редактора
Основные понятия Web -страница (документ HTML) - текстовый файл на языке HTML формата *. htm или *. html , размещенный в World Wide Web – Всемирной паутине (WWW ). Браузер – прикладная программа для просмотра web- страниц HTML - я зык разметки гипертекстовых страниц (указания - команды браузеру для просмотра web- страниц )
Язык HTML позволяет : Создавать; Редактировать; Оформлять при помощи (цвета, настроек шрифта, видео, графическими объектами) Создавать интерактивные страницы
Способы создания Web -страниц
Основные понятия языка HTML Тег - маркеры элемента. Используют для: Определения границ действия команд Отделяют элементы друг от друга. Теги заключают в угловые скобки : Например : -начало действия тега - окончание действия тега Атрибут - свойство элемента .
структура документа HTML: Название документа Здесь находится текст документа для показа на странице. Картинки. Видео. Таблицы. Звуки.
Сохранение документа (Блокнот) 1) Файл 2) Сохранить как… 3) Выбрать папку для сохранения. 4) В раскрывающемся списке Тип файла – выбрать ВСЕ ФАЙЛЫ 5) ИМЯ_ФАЙЛА. html 6) Кнопка – Сохранить.
Изменение документа (Блокнот) На файле Правой кнопкой мыши вызвать КМ (контекстное меню) Открыть с помощью… Блокнот.
Читайте также: