Создание простой web страницы с помощью текстового процессора
Обновлено: 04.07.2024
Программирование сайта с нуля не такой сложный процесс, как может показаться. Даже обычные пользователи компьютера смогут обучиться этому без особого труда. Для начала нужно знать, что такое HTML? Это первый интернет-язык разметки. Это основная разметка для всех веб-страниц и существенная часть Интернета. Веб-разработчики используют HTML для разработки нескольких больших сайтов. Это основной навык веб-специалистов, но им не так сложно овладеть.
Введение в HTML
HTML – это язык гипертекстовой разметки
- Гипертекст – это текст, в который включена ссылка.
- Язык разметки определяет расположение информации макета в документе.
HTML определяет структуру веб-страницы. Он помогает браузеру, чтобы правильно отображать веб-страницу. Документ HTML бывают, как простыми, так и комплексными для больших возможностей.
Браузеры получают HTML документы из веб-сервера и отображают их, как веб-страницы. Браузер распознает HTML коды, чтобы сменить макет страницы, добавить изображения, ссылки и медиа файлы на веб страницы.
HTML – это исходный язык разметки для сети. Однако, он используется, чтобы создать статичные веб страницы без интерактивности и анимации. HTML5, последняя версия HTML, добавляет улучшенную поддержку для добавления таких медиа файлов, как видео и аудио.
HTML5
HTML5 – это улучшенная версия, с помощью которой можно пользоваться большими возможностями. Если вы привыкли к прошлым версиям, и не хотите пользоваться этой, то вы наверняка не знаете, что теперь HTML может определять, каким образом выглядят видео, изображения и текст на экране браузера.
HTML5 является пятым выпуском HTML. Синтаксис HTML5 согласован с основным синтаксисом HTML4 и XHTML1. Но в чем же различия? HTML5 осуществляет поддержку видео и аудио. HTML5 стал одним из мощных инструментов для дизайна веб-страницы. В HTML5 потоковая передача мультимедиа возможна без использования сторонних плагинов, таких как Flash. Среди прочего, HTML5 поддерживает хранение информации на стороне клиента. Пользователь может пользоваться этой функцией offline для поддержки веб-приложений.
Сеть и HTML
Сеть включает в себя взаимосвязанные веб-страницы и приложения, а также изображения, видео, анимацию и интерактивный контент. Язык разметки формирует основу сети. Такие языки применялись еще тогда, когда вебсайты были очень простыми. Языки разметки и в дальнейшем будут частью Интернета, его развития и будущего.
HTML – это основная разметка для всех веб-страниц, поэтому он все еще являются основным навыком веб-разработчиков и дизайнеров. HTML является наиболее часто используемой разметкой, и большинство документов в Интернете хранятся и передаются в формате HTML.
Согласно исследованию W3Techs, HTML язык используется на 74.3% вебсайтах.
Презентация для обучающихся 8 классов. Первый вводный урок по теме "Создание web-страниц".
| Вложение | Размер |
|---|---|
| 1_urok_sozdanie_stranits.pptx | 870.84 КБ |
Предварительный просмотр:
Подписи к слайдам:
Создание простейших Web- страниц с использованием текстового редактора
Основные понятия Web -страница (документ HTML) - текстовый файл на языке HTML формата *. htm или *. html , размещенный в World Wide Web – Всемирной паутине (WWW ). Браузер – прикладная программа для просмотра web- страниц HTML - я зык разметки гипертекстовых страниц (указания - команды браузеру для просмотра web- страниц )
Язык HTML позволяет : Создавать; Редактировать; Оформлять при помощи (цвета, настроек шрифта, видео, графическими объектами) Создавать интерактивные страницы
Способы создания Web -страниц
Основные понятия языка HTML Тег - маркеры элемента. Используют для: Определения границ действия команд Отделяют элементы друг от друга. Теги заключают в угловые скобки : Например : -начало действия тега - окончание действия тега Атрибут - свойство элемента .
структура документа HTML: Название документа Здесь находится текст документа для показа на странице. Картинки. Видео. Таблицы. Звуки.
Сохранение документа (Блокнот) 1) Файл 2) Сохранить как… 3) Выбрать папку для сохранения. 4) В раскрывающемся списке Тип файла – выбрать ВСЕ ФАЙЛЫ 5) ИМЯ_ФАЙЛА. html 6) Кнопка – Сохранить.
Изменение документа (Блокнот) На файле Правой кнопкой мыши вызвать КМ (контекстное меню) Открыть с помощью… Блокнот.
По теме: методические разработки, презентации и конспекты
разработка урока по теме "Текстовый редактор. Вёрстка страницы."
Обобщающий урок по теме "Обработка текстовой информации". Ученики заранее готовят материал, касающийся символики России, Забайкальского края и родного поселка; стихотворения наших местных поэтов.
Вводный урок по теме "Создание и использование текстового редактора"
Вводный урок, на котором рассматривается история документа (в каком виде были документы), также сравнивается текстовый редактор и текстовый процессор (включая среду работы). Затем более подробно рассм.
Разработка урока по информатике и ИКТ по теме «Создание, редактирование и форматирование документов в текстовом редакторе Word»
Разработка урока по информатике и ИКТ по теме «Создание, редактирование и форматирование документов в текстовом редакторе Word».
Создание документов в текстовых редакторах. Форматирование документов в текстовых редакторах.
Данная презентация предназначена для повторения основных возможностей ТР и ТП.
Методическая разработка открытого урока по дисциплине «Интернет-технологии» Тема: Создание простой Web-страницы на языке HTML.
Актуальность выбранной темы открытого урока заключается в необходимости владения навыками создания web-документов, учитывая, что в настоящее время очень развиты Интернет коммуникации. Необходимо.
Текстовый редактор MS Word. Форматирование абзаца, параметры страницы, вставка таблицы, рисунка.
МЕТОДИЧЕСКАЯ РАЗРАБОТКАЕН.02. ИнформатикаДля специальности: 34.02.02 Медицинский массаж (для обучения лиц с ограниченными возможностями здоровья по зрению).
Интегрированный урок по информатике и биологии "Обобщение и повторение строения эукариотической клетки с использованием текстового редактора Word"
Разработан интегрированный (совместный) урок по биологии и экологии на тему "Обобщение и повторение строения эукариотической клетки с использованием текстового редактора Word". В процессе урока, прово.
Цель работы: освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора Microsoft Word: оформление дизайна страницы; организация внутренних гиперссылок; организация внешних гиперссылок.
Используемое программноее обеспечение: текстовый процессор Microsoft Word.
Замечание . Чтобы проверить, работает ли Web-мастер, выполните команду Файл —> Создать. Если в открывшемся окне имеется вкладка Web-страницы, значит, можно работать дальше. Если такой вкладки нет, то необходима переустановка Microsoft Office с включением режима создания HTML.
Задание
В данной работе вы реализуете проект семейного сайта. Ниже вы видите макет главной страницы и макет «Папиной страницы». Макеты остальных страниц вы можете по аналогии создать сами.
1. Открыть текстовый процессор Word.
2. Выполнить команду Файл -> Создать. В появившемся окне выбрать вкладку Web-страницы. Щелкнуть на значке Новая Web-страница.
3. Оформить внешний вид страницы в соответствии с приведенным образцом, используя обычные средства Word (управление форматированием, шрифтами; можно сделать цветной фон, подобрать текстуру, заливки и пр.). При наборе текста страницы не подчеркивать слова (Папа, Мама, Сережа, Тимка, биография). Подчеркивания появятся автоматически после вставки гиперссылок.
Вставить рисунок можно либо из файла со сканированной фотографией (если у вас такой имеется), либо выбрав любой рисунок из Microsoft Clip Gallery.
4. Вставить внутренние гиперссылки. Для этого:
=> установить курсор перед абзацем, начинающимся словами: «Моего папу зовут . »;
=> выполнить команду Вставка —> Закладка;
=> в открывшемся окне в строке Имя закладки ввести какое-нибудь имя, например «М1»; щелкнуть на кнопке Добавить;
=> в списке, расположенном выше, выделить слово «Папа»;
=> выполнить команду Вставка —> Гиперссылка;
=> в появившемся окне щелкнуть на кнопке Обзор напротив строки «Имя объекта в документе»;
=> выбрать имя созданной закладки (M1); щелкнуть на кнопке ОК, затем еще раз на ОК. Гиперссылка готова.
5. Аналогичным образом организовать внутренние гиперссылки на других словах из списка (Мама, Сережа, Тимка) к соответствующим абзацам главной страницы.
6. Сохранить полученную страницу в файле с именем family.htm (расширение установится автоматически) в папке Мои документы (окно с данной страницей не закрывать).
7. Создать «Папину страницу» (см. п. 1-2); гиперссылок в ней пока создавать не нужно. Сохранить страницу в файле father.htm в папке Мои документы.
8. Вернуться к главной странице. Создать в ней внешнюю гиперссылку на «Папину страницу». Для этого:
=> выделить первое в тексте слово «Биография»;
=> выполнить команду Вставка -> Гиперссылка;
=> в появившемся окне щелкнуть на кнопке Обзор напротив строки Связь с файлом/URL;
=> найти и выбрать ранее созданный файл father.htm; щелкнуть на кнопке ОК, затем еще раз на ОК. Гиперссылка готова.
9. Вернуться к «Папиной странице». Создать в ней внешнюю гиперссылку на сайт Московского университета. Для этого:
10. Создать остальные страницы семейного сайта, согласно плану, представленному на схеме. Организовать связи между страницами и внешние связи. Не забудьте сохранить все созданные файлы. (Мои документы/11 класс/Ф.И.О)
11. Установите автономный режим работы браузера.
12. Открыть с помощью браузера главную страницу семейного сайта (для этого достаточно дважды щелкнуть на значке файла с главной страницей в папке Мои документы). Проверить работу всех внутренних гиперссылок (внутри главной страницы, а также между страницами вашего сайта).
развивающая – развитие у учащихся умения ориентироваться в логических уровнях организации информации.
воспитательная - воспитывать чувство ответственности, аккуратности, трудолюбия, воспитание устойчивой мотивации к учебной деятельности, прививать интерес к предмету.
Тип урока: комбинированный урок
Оборудование: тетрадь, учебник, ПК, ноутбук, мультимедийная доска.
1.Организационный момент
Приветствие, проверка готовности к уроку, проверка отсутствующих.
2.Мотивация и целепологание учебной деятельности
Посмотрите на доску, как вы думаете какая тема сегодняшнего урока? Запишите тему сегодняшнего урока. Как выдумаете, какая перед нами стоит цель? Правильно, молодцы.
3.Актуализация опорных знаний
1. Что такое Интернет?
2. Как переводится словосочетание «World Wide Web»?
3. Что такое WWW?
4. Какую информацию можно извлечь из WWW?
5. Как организована связь между Web-страницами?
6. В чем состоят три основных способа поиска информации во Всемирной паутине?
4.Изложение нового материала
WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера
Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы он помещался целиком на экране. Поэтому WEB-документы называют еще WEB-страницами.
– Ребята, а что такое web – сайт?
Несколько WEB-страниц на одну тему называют WEB-узлом или WEB-сайтом
– Где мы создаём web-страницу?
В текстовом редакторе блокнот
– Как называются команды HTML?
Команды HTML называются тегами, они записываются в угловых скобках большинство тегов – парные.
– Повторим структуру HTML.
HTML – это весь человек. Человека мы разделим на две части голову и туловище.
Голова – head – имеет границы, то есть начальный тег и конечный тег со слэшем
Читайте также: