Конспект по созданию сайта
Обновлено: 01.07.2024
Раздел программы: Технология создания Web-сайтов. Основы языка разметки гипертекста HTML.
Тип урока: урок закрепления и развития умений и навыков.
Вид урока: практикум.
Технология: проектное обучение с применением современных информационно-коммуникационных технологий.
| Вложение | Размер |
|---|---|
| prezentatsiya_sozdanie_web-saytov.ppsx | 2.84 МБ |
| urok_sozdanie_web-saytov.pdf | 350.15 КБ |
| prilozhenie_1_2.pdf | 184.85 КБ |
| prilozhenie_3.pdf | 222.42 КБ |
Предварительный просмотр:
Подписи к слайдам:
Кто разрабатывает сайты? Сложно ли создавать сайты?
Ответьте на вопросы
Web-редактор - это программа для . Укажите правильный вариант ответа: Просмотра Web-страниц Создания Web-страниц Создания гиперссылок на Web-странице Вопрос 1.
Публикации во Всемирной паутине реализуются с помощью. Укажите правильный вариант ответа: Языка HTML Web-сайтов Тэгов Вопрос 2.
Web-страница имеет расширение: Укажите правильный вариант ответа: xls txt html Вопрос 3.
Web-страницы сайта объединяются между собой с помощью. Укажите правильный вариант ответа: Гиперссылок Браузера Сервера Вопрос 4.
Язык HTML - это . Укажите правильный вариант ответа: Школьный алгоритмический язык Язык разметки гипертекста Язык программирования Вопрос 5.
Web-сайт можно создать с помощью языка. Укажите правильный вариант ответа: Q b asic Turbo Pascal HTML Вопрос 6.
Для создания Web-страниц используются Web-редакторы: Укажите правильный вариант ответа: DreamWeaver Word Paint Вопрос 7.
Браузер - это программа для . Укажите правильный вариант ответа: Просмотра Web-страниц Создания гиперссылок на Web-странице Создания Web-страниц Вопрос 8.
Что такое гиперссылка? Укажите правильный вариант ответа: Текст, выделенный полужирным шрифтом Указатель на другую Web-страницу Выделенный фрагмент текста Вопрос 9.
Для просмотра Web-страниц в Интернете используют программу: Укажите правильный вариант ответа: MS Word Блокнот Google Chrome Вопрос 10.
Установите соответствие тэга на совершаемое им действие Тэг Действие Содержит основное содержание Web- страницы Начало и конец Web- страницы Создание гиперссылки Горизонтальный разделитель Создание маркированного списка Создание абзаца Содержит название Web- страницы Вставка рисунка
Установите соответствие тэга на совершаемое им действие Тэг Действие Цвет шрифта Полужирный шрифт Размер шрифта Размер заголовка Курсивный шрифт Абзац с выравниванием Вставка формы Цвет фона
Деловая игра "Анализ наиболее успешных сайтов" Задание. Ваши друзья Web-дизайнеры попросили оценить их творчество – созданные ими Web-сайты. Чтобы разработать критерии оценки и помочь вам качественно оценить сайты, они нашли в Интернете статью Якоба Нильсена - успешного программиста и инженера, работающего в сфере Web-дизайна, кратко сформулировали критерии оценки Web-сайтов и выписали их в таблицу. Свободная энциклопедия "Википедия", статья про Якоба Нильсена
Урок понравился, у меня все получилось Урок понравился, но у меня не все получилось Урок не понравился, у меня не все получилось
Сайт подобен посаженному нами саженцу… Подобно дереву, при хорошем уходе, он даёт новые побеги – темы, растёт и развивается… И без постоянного его обновления, сайт может превратиться в одно из засохших деревьев Интернета – видимость есть, а жизни в нём нет…
Предварительный просмотр:
Предварительный просмотр:
Предварительный просмотр:
По теме: методические разработки, презентации и конспекты
Разработка урока "Создание Web-страницы"
Данный урок проводился в 11 классе. Тема создание web-страницы на тему "Кем быть?". Учащиеся создавали проекты, в которых отражали информацию о выборе профессии.
Урок. Создание Web-сайта с помощью Microsoft Word
Цель урока:1. Формирование умений и навыков, носящих в современных условиях общенаучный и интеллектуальный характер.2. освоение приемов создания Web-страниц и Web-сайтов с помощью текстово.
Урок истории на тему: "СССР в 1945-1953 гг" На уроке учащиеся использовали электронные образовательные ресурсы при актуализации знаний и при работе над новой темой.Урок создан в соответствии в требованиями ФГОС второго поколения.
Урок по предмету история для старшей школы по теме "СССР в 1945 - 1953 гг" с использованием электронных образовательных ресурсов в соответствии с требованиями ФГОС. Предусмотрена самостоятельная работ.
Материалы к уроку "Создание сайта. Знакомство с языком HTML"
Представлены материалы к уроку в 9 классе: презентация для знакомства с языком разметки гипертекста, памятка с основными тегами и инструкция для практической работы, а также необходимые графические из.
Самоанализ урока. 6 кл тема урока "Создание единого русского государства и конец ордынского владычества"
Самоанализ урока в 6 классе "Создание единого русского государства и конец ордынского владычества".
Карта-отзыв при посещении урока в рамках темаьического контроля: " Создание условий для сохранения и укрепления здоровья обучающимися".
В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.
Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.
Для учащихся, которые бысторо выполнили запланированную работу на уроке предусмотрены дополнительные задания.
Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.
В качестве зачетной работы ученики отвечают на вопросы теста на знание тегов HTML и представляют созданный самостоятельно сайт.
Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.
Урок 1
1. Общие сведения о Web-сайтах и языке HTML
Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.
HTML – Hyper Text Markup Language - язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).
Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.
Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.
2. Структура HTML-документа
Секция заголовкаЗаписываются meta-теги, содержащие информацию о названии страницы, об авторе и др.
Тело документа
Содержит непосредственно информацию страницы: тексты, рисунки, таблицы
3. Форматирование символов
Символы, заключенные между следующими тегами отображают:
Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.
Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел. Если необходимы дополнительные пробелы то между словами надо добавить - символьный примитив.
Одиночный тег
разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.
4. Практическое задание №1.
Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.
Урок №2
1. Форматирование текста по абзацам
- начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.
Выравнивание текста по абзацам:
2. Задание цвета всего текста и фона документа
Описываются в начальном теге тела документа
3. Заголовки разных уровней
Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.
4. Простые списки
Часть текста, которая будет оформляться как список, заключается в соответствующие теги, а каждый элемент списка помечается одиночным тегом Виды нумераций списков:
5. Практичекое задание №2
Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.
Урок №3
1. Вставка графических изображений
Всеми браузерами поддерживаются форматы .jpg, .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.
Одиночный тег вставляет графические изображения в текстовый поток в любом месте:
Необязательные атрибуты тега :
BORDER = толщина обрамляющей рамки в пикс., 0 нет рамки
HEIGHT = высота изображения в пикселах или %
VSPACE =- свободное пространство сверху и снизу от изображения в пикселах или %
Чтобы рисунок был по центру, можно использовать тег ……. /
2. Практическое задание №3
Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.
Урок №4
Рисунок так же можно сделать, как гиперссылку, написав:
2. Практическое задание №4
Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.
Урок №5
Используют не только для того, чтобы располагать данные в ячейках, сколько с целью позицирования фрагментов текста и изображений друг относительно друга.
С помощью таблиц удобно создавать навигацию по сайту.
Пример таблицы из двух строк (рядов), содержащих по две ячейки:
Ячейки таблицы могут содержать текст или изображения, а также текст с HTML-тегами и гиперссылки. Не следует оставлять ячейки таблицы незаполненными, надо поместить хотя бы неразрывный пробел
Основные атрибуты тегов и задают параметры таблицы, строки или ячейки:
BORDECOLOR=’цвет’ – цет рамки (
2. Практичекое задание №5
Создание навигации по сайту в форме таблицы из одной строки
Уроки №6 и №7
1. Секция заголовка , мета-теги
В секции заголовка на каждой странице указывается информация о документе, которая используется при его отображении. Текст, заключенный между тегами . , отображается в заголовке окна браузера.
В секции заголовка обычно помещается и ряд тегов с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте:
1. Контрольный тест на знание тегов HTML – 15 минут.
2. Рефлексия. Представление проекта и оценивание его учениками класса и учителем – 30 минут.
Лучше, чтобы доменное имя перекликалось с самим названием сайта и не было очень сложным, а наоборот- лёгким для запоминания.
2.Дизайн сайта.
- Ширина сайта - на весь экран или узкий. Ширина должна быть строго фиксированной или должна автоматически подстраиваться под размер монитора (например, в %);
- Цветовая гамма сайта (цвет шрифтов, цвет фона, цвет рамок и т.п.);
- Выбор картинок, фотографий и прочей графики для дизайна веб-ресурса;
Также хочу порекомендовать ресурс, который мне очень помогает при выборе фона на сайт или за сайтом. Можно даже дать эту ссылку заказчику, чтобы он самостоятельно выбрал цвет, который должен использоваться в качестве фона на самом сайте или за сайтом.
3.Хостинг.
Хостинг – это место на сервере, где будет находиться сайт (все файлы, вся информация). Выбор хостинга – важный этап, нужно изучить компании, которые предоставляют эту услугу, посмотреть комментарии пользователей и выбрать самый надёжный.
4.Определение структуры сайта.
5. Наполнение сайта контентом.
Ещё хочу отметить важный момент - грамотность!
Абсолютно все материалы на Вашем сайте должны быть грамотно написаны!
Недопустимо наличие грамматических, орфографических, стилистических ошибок ни в коем случае! Ужасно неприятно видеть ошибки, и на Ваш сайт люди могут больше не зайти именно по этой причине. Если сами не можете проверить контент, попросите человека, который Вам поможет. Также могу посоветовать сайт для проверки правописания — справочно-информационный портал русского языка.
6.Первичное продвижение сайта.
Уже полностью законченный ресурс можно начинать продвигать в сети Интернет. Для начала стоит зарегистрировать ресурс в поисковых системах. То есть вручную добавить свой веб-сайт на запрос для индексации поисковыми машинами. Я приведу несколько самых известных поисковых машин со ссылками на формы добавления сайта в поиск (ссылки откроются в новом окне):
Я ещё ставлю счётчик посещений. На данный момент очень много веб-ресурсов предлагают для размещения на сайтах свои счётчики. Вы можете поискать, посмотреть и выбрать для себя, точнее, для своего сайта любой счётчик, любого размера и дизайна. Также счётчик можно написать и самостоятельно при желании.
В данном видеоуроке рассматривается, какие технологии применяются при создании сайта, назначение различных инструментов веб-разработки. А также подробно рассматривается создание простой веб-страницы с помощью языка разметки гипертекста.
В данный момент вы не можете посмотреть или раздать видеоурок ученикам
Чтобы получить доступ к этому и другим видеоурокам комплекта, вам нужно добавить его в личный кабинет, приобретя в каталоге.
Получите невероятные возможности
Конспект урока "Технологии создания сайта"
· Как менялись веб-сайты в последние десятилетия?
· Технологии и инструменты создания сайтов, для чего они (сайты или технологии?) нужны?
· Язык разметки гипертекста HTML.
Веб-сайты изначально создавались для того чтобы делать информацию доступной для пользователей. Сначала для этого было достаточно простых сайтов, содержащих информацию, которая менялась редко или не менялась вовсе. То есть веб-страницы сайтов содержали только целевую информацию в форме текста, фотографий, рисунков или видео и ссылки, которые позволяли перемещаться между веб-страницами.
Позже, с появлением различных интернет-ресурсов и сервисов требования к сайтам стали меняться, как и их содержание. Сайты стали взаимодействовать с пользователями при помощи различных инструментов, полей ввода, кнопок и других. А их структура становилась всё сложнее. На смену веб-страницам со статичным содержимым пришли веб-страницы, содержащие интерактивную структуру и динамичную анимацию.
Такое качественное изменение сайтов не могло не отразится на инструментах и технологиях для их создания. Рассмотрим некоторые из них:
Для создания современных сайтов используется множество различных технологий, рассмотрим основные. Начнём с каскадных таблиц стилей или CSS, их использование расширяет возможности оформления отдельных элементов сайта. А также упрощает работу со стилями. Теперь информация об оформлении различных элементов веб-страниц хранится в отдельных файлах и не загромождает исходный код страницы на HTML.
Сделать веб-страницу динамичной позволяет Java-Скрипт. С помощью этого сценарного языка программирования можно создавать различные выплывающие окна, передвигающиеся блоки и другие динамические элементы веб-страниц.
Связать все эти технологии воедино и задать логику работы сайта помогают различные языки программирования. Из них самым популярным в плане программирования сайтов считается язык PHP.
Рассмотрим язык разметки гипертекста подробнее. В нём указания для разметки задаются при помощи тегов и атрибутов. Теги – это указания для разметки страницы и её отображения, они записываются в угловых скобках.
Читайте также: