Основы сайтостроения 11 класс конспект урока
Обновлено: 05.07.2024
Как же создаются web – страницы?
Умение создавать Web-сайты со
временем становится актуальным
навыком на сегодняшний день.
Опубликовать сайт в
Интернете настолько
просто и доступно, что
эта возможность
привлекает все
большее число людей.
Язык гипертекстовой разметки HTML
Язык HTML (от англ. HyperText Markup
Language) – это язык гипертекстовой
разметки.
HTML-страница
–
это
по
сути
текстовый
файл,
который
можно
создать с помощью обычного Блокнота.
Помимо
текста,
который
будет
выводиться браузером при просмотре
такой странички, этот файл содержит
невидимый для программы навигации
по Сети и пользователя код. Вот этот
код
и
есть
язык
гипертекстовой
разметки – HTML.
7. Программы для создания HTML – файлов:
9. Цвет фона, цвет шрифта
.
Между ними располагаются
команды, следуя которым браузер
выводит информацию в окно
документа
Задает цвет фона и цвет
шрифта на протяжении всего
документа.
Цвет фона задается один раз
для всего документа.
Заголовки
HTML поддерживает заголовки шести уровней при помощи
конструкции:
Текст заголовка
n- 1…6, заголовок n-го
уровня
11. Линия Простейший графический элемент, который умеет строить браузер.
Линия
Простейший графический элемент, который умеет
строить браузер.
горизонтальная линия;
size - меняет толщину линии
noshade – выводит
горизонтальные линии
плоскими
Бегущая строка
Текст
Вставка бегущей стоки с
содержанием Текст
12. Абзац
.
Браузер выполняет команду Р следующим
образом:
Перед абзацем выводится пустая
строка.
Абзац выравнивается по левому краю.
Между словами помещается ровно по
одному пробелу независимо от того,
сколько пробелов проставлено в HTMLкоде.
Перенос текста на новую строку
происходит тогда, когда очередное
слово не помещается в экранной
строке, а не тогда, когда новая строка
начинается в HTML-коде.
13. Атрибуты абзаца
- выравнивает абзац по левому краю
align=right> - выравнивает абзац по правому краю
align=center> - выравнивает абзац по центру
align=justify> - выравнивает абзац по ширине
14. Оформление текста
текст
Изменение цвета текста внутри документа
.
Укрупнение шрифта по отношению к
текущему
.
Уменьшение шрифта по отношению к
текущему
текст
Изменение размера шрифта
…
Выделение моноширинным шрифтом
.
Усиление текста. Браузер отображает это
выделение полужирным шрифтом.
.
Выделение небольших внутристрочных цитат.
Большинство браузеров изображает
текстовую ссылку курсивом (наклонным
шрифтом).
браузер выводит текст на экран так, как он
записан в программе, — со всеми пробелами и
концами строк.
15. Специальные символы
Создание таблицТаблица задаётся парой тегов
Между этими тегами задаются строки таблицы, тегов
Внутри строк задаются клетки (ячейки) таблицы, теги
На экране эта таблица отображается так:
(1,1)
(1,2)
(2,1)
(2,2)
(3,1)
(3,2)
border=n
Толщина линий рамки. По умолчанию border=0.
bordercolor=цвет
Определение цвета рамки вокруг таблиц
cellspacing=n
Расстояние между рамками ячеек таблицы. По
умолчанию значение задаётся браузером,
обычно 1.
cellpadding=n
Расстояние между содержимым ячейки и её
рамкой. По умолчанию значение задаётся
браузером, обычно 2.
align=(left, right, center)
Указание типа выравнивания таблицы по
ширине окна браузера
widtn=n
Определение ширины таблицы Ширина
таблицы. По умолчанию размер таблицы
определяется содержимым и способом
форматирования, заданным в ячейках.
height=n
Высота таблицы. По умолчанию размер таблицы
определяется содержимым и способом
форматирования, заданным в ячейках.
вackground="путь к файлу"
Указание рисунка для фона таблицы
bgcolor=цвет
Цвет фона таблицы. По умолчанию фон
прозрачный.
Параметры тега
align =(left, right, center)
Выравнивание содержимого
ячеек по горизонтали. По
умолчанию содержимое
обычных ячеек (TD)
выравнивается слева, ячеекзаголовков (TH) по центру
valign=(top, middle, bottom)
Выравнивание содержимого
ячеек по вертикали. По
умолчанию содержимое ячеек
выравнивается по центру
bgcolor=цвет
Цвет фона ячеек в строке. По
умолчанию фон ячеек совпадает
с фоном таблицы
widtn=n
Определение содержимого
ячейки или ряда
Параметры тега
align =(left, right, center)
Выравнивание содержимого ячейки по горизонтали. По
умолчанию выравнивание определяется аналогичным
атрибутом элемента TR,
valign=(top, middle, bottom)
Выравнивание содержимого ячейки по вертикали. По
умолчанию выравнивание определяется аналогичным
атрибутом элемента TR, который содержит данную ячейку,
а если выравнивание в элементе TR не задано, то
содержимое ячеек выравнивается по центру.
widtn=n
Ширина ячейки. Если атрибут не задан, размер
определяется по содержимому и заданному способу
форматирования.
Bgcolor=цвет
Цвет фона ячейки. По умолчанию работает аналогичный
атрибут в элементе-родителе TR, а если он не задан,
атрибут в элементе TABLE. Если фон не задан и в элементе
TABLE, фон ячеек прозрачный.
Height=n
Высота ячейки. Если атрибут не задан, размер
определяется по содержимому и заданному способу
форматирования.
Background=
Указание рисунка для фона ячейки
Nowrap
Запрет принудительного переноса строки в ячейке или
ряду
Colspan=n
Объединение соседних ячеек по горизонтали
Rowspan=n
Объединение соседних ячеек по вертикали
Вставка изображений
Тэг
Атрибуты тэга :
src - обязательный, значение- адрес изображения
alt – определяет альтернативный текст, который появляется
на месте картинки в окне браузера, если вывод картинки
невозможен или заблокирован пользователем.
Значение alt – строка текста, длиной до 1024 символа.
Кавычки обязательны.
alt= “Собака на сене “
Этот текст также появиться в виде всплывающей
подсказки, когда указатель мыши направлен на картинку.
Атрибуты тэга :
align – выравнивание. Положение изображения лучше всегда указывать явно.
Значения тега align:
left, right – по левому или по правому краю.
top – верхняя граница изображения устанавливается на уровне верхнего края
самого высокого элемента в строке.
middle – середина изображения выравнивается с серединой строки.
bottom – (по умолчанию) нижний край изображения выравнивается с базовой
линией текста.
border - устанавливает или убирает (для гиперссылок) рамку вокруг
изображения
border= толщина рамки в пикселях
border=0 – убрать рамку
height, width – высота и ширина изображения в пикселях. Размеры могут быть
больше или меньше реальных размеров изображения. Браузер автоматически
масштабирует его. Значения можно указывать в % по отношению к окну.
width = “100%” height= 20 – полоса на все окно шириной 20 пикселей.
Если указать только width = “30%”, то высоту браузер подберет сам
пропорционально рисунку. Если картинка не загрузилась, то на экране остается
пустая область с заданными атрибутами height, width.
hspace, vspace – задают расстояние в пикселях между картинкой и текстом по
вертикали и горизонтали.
23. ПРАКТИКА
26. Сохранить Web-страницу с расширением html. (Файл/Сохранить как)
Откроем полученный Web-сайт.
Браузер Internet Explorer
вывел стихотворение без
переходов на новую
строку.
Для указания перехода на новую строку используется
непарный тег
.
Данный тег ставится в месте перехода на новую строку.
Снова открываем Web-страницу.
Чтобы увидеть внесённые изменения, страницу
нужно обновить.
ОБНОВЛЕНИЕ
I способ
II способ
В Строке меню
выбрать
На Панели
инструментов
Вид→Обновить
нажать кнопку
обновить
Теперь наша Web-страница выглядит лучше.
Добавим на страницу цветной фон.
Для этого в теге допишем атрибут
bgcolor с указанием цвета.
Например:
Вот наша Web-страница.
Сделаем текст стихотворения цветным. Для
этого в теге допишем атрибут text с
указанием цвета.
Например:
Наша Web-страница преобразилась.
Сделаем заголовок стихотворения и имя
автора крупнее. Для этого воспользуемся
парным тегом .
Теперь наша Web-страница выглядит лучше.
Добавим на нашу
Web-страницу
картинку.
Нам
понадобится
непарный тег
с атрибутом
src,
после
которого
указывается
полное
название картинки.
Например:
Вставьте на созданную нами Web-страницу
картинку с изображением козлёнка. Картинка с
козлёнком называется 248.jpg
Создадим на нашей Web-странице бегущую
строку. Движущийся элемент должен находиться
внутри парного тега .
Например:
Задание.
Сделайте бегущей строкой
название стихотворения и изображение
козлёнка
Задание
Создайте свои страницы со стихами
Агнии Барто.
Тексты стихотворений и картинки вы можете
найти в папке Стихи Агнии Барто.
Задачи: обеспечить усвоение знаний об инструментах для разработки веб-сайтов; формировать практические умения разрабатывать сайты.
Планируемые результаты:
Предметные: научиться ориентироваться в разнообразии инструментов для разработки веб-сайтов
Метапредметные:
познавательные - выделять и формулировать познавательную цель; проводить поиск и выделение необходимой информации;
регулятивные - владеть основами самоконтроля, самооценки, принятия решений и осуществления осознанного выбора в учебной и познавательной деятельности; выстраивать работу по заранее намеченному плану;
коммуникативные - организовывать учебное сотрудничество и совместную деятельность с учителем и сверстниками
Личностные: демонстрация способности к позитивной самооценки инициативности
Организационная структура урока
Организационный момент.
Учитель приветствует класс. Проверяет готовность обучающихся к уроку. Создает в классе атмосферу психологического комфорта.
Рада вас видеть на уроке информатики! У кого есть желание узнать что-то новое?
Сегодня мне нужна ваша помощь. Кто хочет мне помочь?
Я уверена, что мы с вами справимся с любыми трудностями.
Учащиеся настраиваются на учебную деятельность. Концентрируют внимание на работе на уроке.
Я на уроке. (информатики).
Я сосредоточиваюсь на изучении. (информатики).
Мне нужно перестать думать о.
Мои мысли только об. (информатике)
Актуализация опорных знаний и жизненного опыта. Постановка учебной задачи
Приветствует класс. Проверяет готовность обучающихся к уроку. Создает в классе атмосферу психологическо- го комфорта.
-Мне очень нравится, как вы относитесь к урокам информатики!
- Что бы вы поменяли в организации наших уроков?
Настраиваются на учебную деятельность. Концентрируют внимание на работе на уроке.
Я на уроке. (информатики).
Я сосредоточиваюсь на изучении. (информатики).
Мне нужно перестать думать о.
Мои мысли только об. (информатике)
II. Актуализация опорных знаний и жизненного опыта.
Постановка учебной за- Гдачи
Выступают перед классом или в группах.
Вопрос запуска постановки учебной з а - дачи:
Осознают важность решения поставленной учебной задачи
III. Сообщение темы. Постановка цели и задач урока
Сообщает тему урока
Организует совместное с обучающимися формулирование цели и задач урока:
Внимательно прочитайте гему урока. Каковы ее ключевые слова?
Что ожидается от вас сегодня на уроке?
Чему нужно научиться?
Записывают в тетрадь тему урока.
Участвуют в формулировании цели и задач урока:
научиться использовать СУБД ИЬгеОффсе Вазе
\ вание к учеб- \ ной деятель-
Способствует обсуждению мотивационных вопросов:
-Что я намерен делать сегодня на уроке информатики?
- Хочу ли я научиться шифровать информацию?
\ — Почему для меня важно научиться использовать разные У Т&1А.ДЫ Шллфроълния информации?
Отвечают на мотивационные вопросы.
При необходимости просят учителя оказать помощь. Создают условия для успешной учебной деятельности
I V. Создание I ситуации за- I труднения.
| Работа над темой урока
Организует обсуждение проблемного вопроса: -Для чего предназначены базы данных?
Принимают участие в обсуждении проблемного вопроса. Испытывают определенные трудности при ответе на вопросы.
Планируют организацию поиска необходимой информации.
Отвечает на вопросы обучающихся.
Поясняет, что под вычислительной системой здесь понимается отдельный компьютер или компьютерная сеть.
3. Основы сайтостроения.
Internet – всемирная сеть, которая объединяет множество компьютерных сетей различного уровня и отдельных компьютеров, обменивающих друг с другом информацией по каналам общественных телекоммуникаций на базе протоколов связи TCP/IP. Информация в Интернет хранится на серверах (сайтах). Серверы, объединенные высокоскоростными магистралями, составляют базовую часть сети Интернет. Доступ пользователей к информационным ресурсам Internet обычно осуществляется через провайдеров или корпоративную сеть.
В зависимости от технологии создания можно выделить следующие типы сайтов:
1. Статические сайты, содержащие статические HTML или XHTML страницы. Статические веб-страницы - это статические файлы (набор текста, таблиц, рисунков и т.д.), которые создается с помощью языка разметки HTML (имеют расширение .html или .htm) и хранятся в готовом виде в файловой системе сервера.
2. Динамические сайты, в которых веб-страницы генерируются или формируются (создаются динамически) в процессе исполнения запроса пользователя. Динамические сайты бывают двух типов. В первом типе сайтов, веб-страницы генерируются или формируются из данных хранящихся на сервере в базе данных. Во втором типе сайтов веб-страницы генерируются на стороне клиентского приложения (в браузере).
3. Flash-сайты – это интерактивные приложения, разработанные в среде Macromedia Flash. Основным инструментом разработки flash-программ является векторная графика (интерактивная векторная анимация для Web). Flash придает сайтам динамичность и интерактивность.
4. Комбинированные сайты, в которых используются вышеизложенные технологии создания сайтов.
Сайты по взаимодействию пользователя с ресурсами веб-страницы можно разделить на пассивные и активные или интерактивные.
Пассивные сайты – это сайты с пассивными веб–страницами. В пассивных сайтах пользователь имеет возможность только просматривать информацию на веб-страницах.
Интерактивные сайты – это сайты с активными веб-страницами. При работе с интерактивными веб-страницами пользователь имеет возможность обмениваться данными с сервером, участвовать в интерактивном диалоге.
Статические сайты с пассивными веб-страницами
Технология создания веб-страницы статических сайтов: язык HTML (Hyper Text Markup Language), который является языком разметки гипертекста и каскадные таблицы стилей CSS (Cascading Style Sheets). CSS используется для оформления и форматирования различных элементов веб-страниц, в результате чего значительно снижают размеры веб-страниц.
Создание веб-страниц статических сайтов - это трудоемкий процесс. Статические сайты с пассивными веб-страницами создаются вручную, с помощью какого – либо редактора HTML в файловой системе компьютера, потом загружаются на сайт. Создание новых веб-страниц или редактирование существующих страниц пользователь выполняет на ПК в редакторе, а затем вновь загружает на Web-сайт.
В основном статические сайты с пассивными веб-страницами применяются для создания небольших и средних сайтов с постоянной структурой и внешним видом страниц (но каждая страница может иметь свой шаблон оформления), которые можно размещать на любых хостингах, в том числе на бесплатных, которые не поддерживают работу скриптов. Обучение школьников и студентов основам создания сайтов целесообразно начинать с создания статических сайтов с пассивными страницами, т.е. с изучения языка разметки HTML и каскадных таблиц стилей CSS.
Для создания сайта используют различные средства: редакторы текста типа Блокнот, визуальные редакторы типа Microsoft FrontPage, Macromedia Dreamweaver и множество других редакторов, а также конструкторы сайтов (дизайнеры). Конструкторы веб-сайтов размещаются на некоторых сайтах в сети Интернет.
Для обучения целесообразно использовать редактор Microsoft FrontPage - это визуальный HTML редактор, который входит в состав приложений Microsoft Office. Но создание реального сайта лучше выполнять в русифицированном редакторе Macromedia Dreamweaver 8 с использованием технологии CSS. Необходимо отметить, что с целью быстрой загрузки веб-страниц их размеры не должны превышать 20 Кбайт.
Статические сайты с интерактивными веб-страницами
Для придания статическим веб-страницам интерактивности и динамичности в веб-страницу можно вставлять скрипты на языках сценариев JavaScript и VBScript, исполняемых на стороне клиента. Скрипты на JavaScript и VBScript могут исполняться либо при наличии каких-либо действий пользователя либо автоматически во время загрузки веб-страницы.
Кроме того, в HTML документ можно вставлять элементы DHTML (динамический HTML). DHTML — это способ создания интерактивного веб-сайта. Динамический HTML построен на языке программирования JavaScript, каскадных таблицах стилей CSS и DOM (объектной модели документа).
В документ HTML можно вставлять флэш-фрагменты или Flаsh-ролики (swf-файлы). В документ HTML можно вставлять Flash-формы аналогичные HTML формам. Флеш обеспечивает интерактивность за счет интерактивной векторной анимации для Web. Для создания Флеш используется язык сценариев ActionScript.
Для обмена данными между пользователем и сервером в веб-страницу можно вставить веб-приложение, называемое HTML формой (form). Форма - это часть веб-страницы, в которую пользователь может вводить свою информацию и отправлять ее на сервер, где размещена веб-страница, щелчком на кнопке. Запросы обрабатываются на сервере, который генерирует соответствующую выходную информацию. Запросы в форме могут выполняться методами GET или POST.
В связи с тем, что скрипты, исполняемые на стороне клиента, увеличивают объем веб-страниц, их количество и размер на странице должно быть ограниченным. Создание статических сайтов с интерактивными веб-страницами целесообразно выполнять в редакторе Macromedia Dreamweaver 8.
Динамические сайты, веб-страницы которых генерируются или формируются из данных хранящихся на сервере в базе данных
В настоящее время для создания динамических сайтов применяются различные веб-приложения. Для разработки веб-приложений применяются различные технологии, обеспечивающие создание динамических веб-страниц. Динамические сайты способны реагировать на введенную пользователем информацию, т.е. могут быть интерактивными, поэтому динамические сайты, как правило, являются интерактивными, но не всегда.
Для разработки веб-приложений используют два подхода:
на основе компилируемых модулей;
на основе интерпретируемых сценариев.
Компилируемые модули – это модули типа CGI, которые транслируются в исполняемые файлы и выполняются веб-сервером. Первыми веб-приложениями для создания динамических сайтов были отдельные модули CGI (сценарии, созданные в основном на языке Perl), которые выполнялись на сервере. CGI-сценарии являются обыкновенными программами. Результатом выполнения модуля является страница в формате HTML.
В Интернет можно бесплатно скачать модули CGI или CGI-скрипты (гостевые книги, обратную связь, каталоги ссылок, поиск по сайту и т.д.), которые выполняются на Web-сервере по запросу пользователя. С другой стороны Common Gateway Interface (CGI) – это стандартный интерфейс обмена данных, который определяет способ взаимодействия клиентского приложения и веб-сервера. CGI обеспечивает запуск скрипта на сервере и взаимодействие с ним. В дальнейшем для реализации этого подхода стали применять интерфейсы (серверные расширения) ISAPI и NSAPI.
Подход на основе интерпретируемых сценариев
В этом случае для создания сайта применяются серверные скрипты так называемые языки сценариев. Код сценариев, как и НТML-код, является интерпретируемым кодом, поэтому HTML и сценарии можно комбинировать. Наиболее распространенные языки серверных скриптов: Perl, ASP, JSP, PHP, Cold Fusion, Python.
Сценарии взаимодействуют с объектами на сервере и генерируют выходную информацию в формате HTML. Тип серверного скрипта определяется по расширению имени файла (.php, .asp, .aspx, .jsp, .cfm). Если Web-сервер получает запрос на страницу такого типа, то он интерпретирует все содержащие в ней сценарии, в результате чего генерируется веб-страница в формате HTML, которая передается обратно браузеру.
В зависимости от решаемых задач для создания сайта выбирают тот или иной язык серверных скриптов. Для создания малых и средних интерактивных сайтов целесообразно применить язык сценариев PHP. Конкурентами PHP являются технологии ASP, JSP, Cold Fusion, Perl. Достоинством языка PHP является то, что он является бесплатным, имеет открытые исходные коды и работает почти на всех платформах.
Для создания (разработки) и сопровождения динамических сайтов используют CMS (Content Management System) - Систему управления сайтом, которую называют движком сайта. В настоящее время популярными системами управления являются Drupal, Joomla и WordPress. На основе этих CMS можно создавать функциональные и легко управляемые PHP-сайты. Движки для Drupal, Joomla и WordPress являются бесплатными. Средства разработки сайтов обеспечивают разделение содержательной части (контента) от дизайна (шаблона веб-страницы), что позволяет изменять содержание веб-страниц, не затрагивая их дизайна и изменять шаблон сайта не затрагивая содержания его страниц.
В этом случае сайт будет местом активного обмена информацией между пользователями Интернет (учениками или студентами и преподавателями). На такой сайт пользователи могут самостоятельно добавлять электронные учебные материалы, статьи, фотографии, видео, бесплатно скачивать образовательные ресурсы, т.е. пользователи имеет возможность обмениваться данными с сервером. Кроме того, ученики или студенты через опросы могут оценивать работу преподавателей, высказывать свое мнение по различным вопросам, общаться между собой, т.е. участвовать в интерактивном диалоге.
Динамические сайты, веб-страницы которых генерируются на стороне клиентского приложения
Технология Flash предназначена для создания векторных графических приложений. С помощью Flash можно создать полноценную страницу-ролик для Web, но при этом информация разбивается на крупные файлы, для загрузки которых требуется много времени. В настоящее время более целесообразным является применение Flash в качестве элементов дизайна в HTML-документах (например, для создания логотипов, флэш-меню, информеров и других анимированных графических элементов), в качестве анимированных flash-баннеров и входных flash-заставок.
Flash целесообразно использовать там, где мало текста, но где требуются звуковые или анимационные эффекты, т.е. там, где флеш обеспечивает создание векторных анимационных файлов с небольшим временем загрузки. Основные недостатки этой технологии создания полноценных Flash-сайтов: большой вес веб-страниц и высокая стоимость разработки сайтов.
Кроме того, сайты, созданные полностью на основе Flash, плохо индексируют поисковые системы. Флеш-технологии в основном применяются для создания престижных сайтов. Для создания флеш-анимаций применяют технологию Adobe Flash, которая обеспечивает возможность работать с языками: ActionScript и ActionScript 2.0.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег , несколько раз использованный для форматирования страницы, которую вы сейчас читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.
HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:
Создавать свой сайт можно разными способами. Самый простой - установить cms (систему управления контентом) и через неё редактировать сайт прямо на хостинге. В этом случае никаких программ не нужно. Однако у cms есть свои недостатки, и нередко возникает необходимость всё же создать сайт или страничку самостоятельно, чтобы потом закачать на хостинг. Какие программы для этого нужны?
Основа любой странички, любого сайта - это html-код. Поэтому, говоря о программах для создания сайтов, обычно имеют в виду html-редакторы. В общем-то, написать html-код можно даже в блокноте (см. отдельную статью как создать сайт в блокноте), но это не самый удобный выбор, особенно, если вы пока ещё не очень хорошо освоили язык html. Так что лучше вместо блокнота использовать специальные html-редакторы.
Html-редакторы бывают двух видов - визуальные и невизуальные (текстовые). Невизуальные помогают редактировать текст, проверять теги и т. д., но всё равно код в них нужно печатать вручную. Удобнее визуальные редакторы, имеющие помимо режима редактирования html-кода визуальный режим. В визуальном режиме вы можете видеть страничку примерно так, как она должна выглядеть в браузере и можете редактировать её не путём вписывания кода, а вставлять картинки, таблицы, форматировать текст и т. п., удобным образом при помощи нажатия кнопок. Чтобы сделать страничку в визуальном редакторе, не обязательно знать язык html в совершенстве.
Какие же есть визуальные редакторы html (т. е.программы для создания сайта)? Их довольно много, как платных, так и бесплатных, как совсем простых, так и более сложных. К сожалению, не у всех разработчиков хватает сил и желания развивать и поддерживать свои творения, поэтому некоторые редакторы, например NVU и Quanta Plus, претендовавшие на то, чтобы заменить известные платные редакторы, на настоящий момент фактически заморожены в своём развитии.
Известные бесплатные визуальные редакторы для создания сайтов на сегодняшний день:
Kompozer - редактор, который годится как для начинающих, так и для профессионалов. Существуют его версии для Windows и Linux. Почитать больше про kompozer и скачать его можно с официального сайта (на англ. языке).
Amaya - два в одном, редактор страниц и одновременно браузер, который одобрен W3C, он правильно поддерживает все стандарты для html. Почитать больше про Amaya и скачать его можно с официального сайта (на англ. языке).
SeaMonkey - набор программ для работы в интернете, включающий браузер, почтовую программу, IRC-чат и редактор страниц. Создан на основе продуктов Mozilla. Почитать больше про SeaMonkey и скачать его можно с сайта русской команды Mozilla.
BlueGriffon - совсем новая разработка, появившаяся в 2010 году. Впрочем, она считается преемником более раннего редактора NVU, развитие которого заглохло несколько лет назад. Почитать больше про BlueGriffon и скачать его можно с официального сайта (на англ. языке).
Бесплатно можно скачать также Microsoft SharePoint Designer 2007 (см. ниже).
Набор платных визуальных редакторов достаточно велик. Среди них можно выделить такие, как CoffeeCup HTML Editor, Namo WebEditor, RapidWeaver, Web Builder и др. Однако наиболее популярными уже долгое время являются редактор Dreamweaver и линейка редакторов от Microsoft.
Популярными программами для создания сайтов также являются визуальные редакторы от Microsoft. Долгое время многие вебмастера пользовались для создания сайтов редактором FrontPage, но затем Microsoft прекратила его поддержку, предложив взамен две новых программы - Microsoft Expression Web (считается основным html-редактором от Microsoft) и Microsoft SharePoint Designer, который в большей мере можно считать преемником FrontPage.
Microsoft Expression Web является частью Microsoft Expression Studio - комплекса программ для разработки сайтов. На сайте Microsoft можно скачать 60-дневную пробную версию программы.
Microsoft SharePoint Designer является частью Microsoft SharePoint - комплекса программ для организации совместной работы (в т. ч. через интернет, поэтому включает мощные средства для создания сайтов). Последней версией является SharePoint Designer 2010, на сайте Microsoft можно скачать пробную версию программы.
А SharePoint Designer 2007 Microsoft сделала полностью бесплатным, его можно скачать с этой страницы на сайте Microsoft.
Образовательная: приобрести начальные навыки создания простейших Internet -документов, научиться выполнять форматирование созданных Web -страниц.
Воспитательная: воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости , формировать элементы научного мировоззрения.
Развивающая: развивать наглядно-образное мышление, память и умение сравнивать и анализировать.
Оборудование: компьютер, компьютерная презентация
1. Организационный момент (2 мин)
2. Актуализация опорных знаний(2 мин)
3. Мотивация(2 мин)
4. Целеполагание(2 мин)
5. Объяснение материала (20мин)
6. Практическое задание(10 мин)
7. Диагностика (5 мин)
8. Домашнее задание(1 мин)
9. Рефлексия(1 мин)
1. Организационный момент (2 мин)
· Проверка присутствия всех учащихся
2. Актуализация опорных знаний(2 мин) презентация
3. Мотивация(2 мин) презентация
4. Целеполагание(2 мин) Исходя из темы урока, обучающиеся формируют цели урока
5. Объяснение материала (20мин) презентация
Язык HTML ( HyperText Markup Language , язык разметки гипертекста) — это язык, на котором создаются Web -страницы. HTML-документы могут просматриваться различными типами W eb -браузеров. Когда документ создан с использованием HTML, W eb -браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Web -страницы могут быть созданы с помощью
1) обычного текстового редактора;
2) редактора, способного сохранять в формате HTML;
3) специализированного редактора;
4) специализированной системы.
HTML -документы сохраняются на диске как обычные текстовые документы в формате ASCII . Для распознавания Web -страниц по их именам общепринято обозначать такие файлы использованием расширений . HTM (для Windows 3.1) или . HTML (для Windows 95/98/ NT / XP , Macintosh и Unix ).
Кроме полезного текста в HTML -документах используются специальные управляющие последовательности символов — тэги.
Структурные теги HTML
Тег html > ( html > … html >)
Этот тег помещают в начало и конец документа, сообщая браузеру, что весь документ составлен на HTML .
Тег head > ( head >. head >)
Тег head > определяет заголовок, то есть часть документа, которая содержит информацию о документе. Тег не имеет собственных атрибутов, он используется в качестве контейнера для других тегов заголовка, таких как base >, meta > и title >, т.е. заключаются между тегами head > и head >.
Тег title > определяет название документа, которое появится в верхней строке окна браузера.
Тег body > ( body >… body >)
Тег body > определяет начало и конец основной части (тела) HTML-документа. В теле документа находится его содержимое (часть документа, которая выводится в окно браузера). Атрибуты этого тега оказывают влияние на весь документ.
6. Практическое задание(10 мин)
Создайте папку SITE . Откройте текстовый редактор Блокнот и наберите текст, представленный ниже.
HTML >
HEAD >
TITLE >Первое знакомство с тэгами HTML TITLE >
HEAD >
BODY > Это моя первая WEB - страница
BODY >
HTML >
Введите команду [Файл – Сохранить как…]. Файлу Web -страницы присвоить имя index . html (Файл сохранить в папке SITE ) Открыть созданный файл командой. В заголовке окна браузера высветится название Web -страницы Первое знакомство с тэгами HTML Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте контекстное меню ð Исходный код страницы.
Читайте также: