Hyper Text Markup Language (язык разметки гипертекста) – язык, используемый для создания документов в Интернете. Гиперссылка (Hyperlink) – базовый функциональный.

Презентация:



Advertisements
Похожие презентации
Ключевые слова 1.WWW 2.Структура Web-страницыHTML 3.HTML-редактор 4.Цветовые схемы 5.гиперссылка.
Advertisements

Структура создания слайда. Ключевые слова структура сайта навигация оформление сайта шаблон страницы сайта хостинг.
Создание Web-сайтов. Web-сайты Публикации во всемирной паутине реализуются в форме Web-сайтов Web-сайт содержит информацию, посвященную какой-либо теме.
Инструментальные средства создания Web-сайтов
Web-сайты и Web-страницы Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью.
это десятки миллионов Web-серверов Интернета, содержащих Web-страницы, в которых используется технология гипертекста. Технология WWW позволяет создавать.
СОЗДАНИЕ Web-сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ. Ключевые слова структура сайта навигация оформление сайта шаблон страницы сайта хостинг.
ТЕМА : Создание статической веб – страницы, содержащей текст.
Мы познакомимся с простыми инструментами и методами разработки веб-страниц. На примере рассмотрим, как создать фрагмент сайта, содержащего репертуар кинотеатра.
Языки, технологии и средства создания Web-сайтов. Компонентная структура. Выполнил Федорова Я.В., студентка СФУ ИППС 1 курс заочное отделение.
Вэб - дизайн Презентацию выполнили ученицы 11 «А» класса лицея 144 Фролова Мария и Кузнецова Ольга.
Рысаева Лиана и Сальманова Диана Ученицы 10 А класса.
Е.А. Тулаева МОУ СОШ 18 г.Пензы Текстовый процессор Microsoft Word Технология обработки текстовой информации.
11 класс. №023. Представление о веб-конструировании. Основы языка гипер-текстовой разметки HTML
Основные теги HTML. Язык HTML HTML не является языком программирования, он предназначен для разметки текстовых документов. HTML состоит из тегов. Основным.
Powerpoint Templates Page 1 Язык разметки гипертекста HTML.
Создание Web-сайта. 2 способа: Ручной С использованием конструктора Ручной: изучение языка HTML и CSS, написание тегов самостоятельно. Можно воспользоваться.
Создание электронных учебников
Автор: учитель информатики СОШ 28 г.Бобруйска Кунцевич Л.А.
Один из видов презентации на компьютере это набор слайдов, которые можно выводить последовательно друг за другом. Часто такое компьютерное произведение.
Транксрипт:

Hyper Text Markup Language (язык разметки гипертекста) – язык, используемый для создания документов в Интернете. Гиперссылка (Hyperlink) – базовый функциональный элемент html-документа, представляющий собой реализацию динамической связи какого-либо объекта данной web-страницы с контекстным содержимым другого документа.

Браузер – программа для просмотра html- документов, предназначенная для динамической обработки кода НТМL и отображения web-страниц. Сервер – это компьютер с установленным на нем специальным программным обеспечением, имеющий собственное доменное имя

Web-страница – это текстовый файл, содержащий текст, оформленный с помощью языка разметки HTML, а также ссылки на графические файлы (иллюстрации) и гипертекстовые ссылки на другие web-страницы сайта. Сайт – набор web-страниц, объединенных темой и дизайном.

HTML5 – спецификация, включающая в себя правила описания элементов web-страниц и правила отображения этих элементов CSS – каскадные таблицы стилей. Позволяют отделить правила оформления страницы от ее содержимого. jQuery, JavaScript, Ajax – технологии, позволяющие создавать динамические web- страницы

Текстовые редакторы – позволяют создавать любые элементы сайта (страницы, таблицы стилей, скрипты и т.д.) с нуля вручную Визуальные редакторы – позволяют создавать дизайн страницы в графическом режиме. Автоматически генерируют код. Среды разработки – совмещают возможности текстовых и визуальных редакторов.

Набор средств, реализующих типовые операции над сайтом, позволяющие управлять его содержимым. Позволяют подключать сторонние модули. Применяются для создания типовых сайтов. Примеры Joomla Wordpress Bitrix

Кодировка кириллицы - общепринятый стандарт, включающий набор символов, позволяющий отображать знаки русского алфавита KOI8 является основным стандартом для серверов, работающих на базе платформы UNIX Windows 1251 используется для отображения русских символов в браузерах, работающих под управлением операционных систем компании Microsoft Unicode (UTF-8) был создан с целью объединения всех существующих на сегодняшний день национальных кодировок в одну

редактор web-кода (web-кодер, web- верстальщик); web-мастер (web-программист); web-дизайнер

кодирует web-страницы на языке разметки HTML и автоматизирует их оформление с помощь таблиц стилей CSS входит умение отлаживать элементы и сценарии, созданные с использованием технологий DHTML и JavaScript

Специалист, полностью обеспечивающий интерактивность web-сайтов практически любой сложности В обязанности web-мастеров входит администрирование web-серверов, клиентское и серверное программирование с использованием современных технологий и обеспечение публикации баз данных в Интернете. Для того чтобы успешно работать в качестве web-мастера необходимо знание: HTML и CSS; JavaScript и DHTML; web-мастеринга; web-программирования.

Специалист, отвечающий за структуру и внешний вид сайта Необходимо знание HTML, CSS и графических программ Работа web-дизайнера включает в себя следующие функции: создание макета сайта; распределение информации по разделам сайта; разработку навигации; использование шаблонов; макетирование сайта с учетом эргономики (web- usabllity); создание иллюстраций для web-страниц; создание анимационных элементов и баннеров; разработку динамических элементов (ролловеров); оценку и тестирование сайта.

Зачем вам нужен web-сайт? На какую аудиторию вы нацелены? Кто будет работать на вашем сайте? Сколько разработчиков планируется привлечь к созданию сайта? Как вы будете создавать или откуда собираетесь брать текст и изображения для вашего сайта? Как следует организовывать файлы вашего сайта? Будут ли на сайте располагаться мультимедиа-файлы Flash или RealAudio? Нужны ли вам такие интерактивные функции, как форма обратной связи, гостевая книга, форум, чат? Какая система навигации будет на вашем сайте? Как вы будете решать проблемы роста и в дальнейшем разрабатывать сайт?

избыток информации; люди не читают web-страницы, а просматривают; пользователи избегают медленно загружающихся сайтов; люди плохо ориентируются в большом количестве информации; ограниченность кратковременной памяти человека; трудности в чтении с экрана монитора.

составление технического задания; подготовка текстового содержания и иллюстраций; разработка дизайна сайта; кодирование и программирование; тестирование сайта; публикация и раскрутка сайта

Персональный сайт Визитная карточка Промо-сайт Корпоративный сайт Интернет-магазин Тематические порталы

Самый простой способ разделения файлов – разделение по выполняемым функциям. В простом статическом сайте можно выделить несколько групп файлов: странички сайта, файлы с расширением HTML; таблицы стилей, файлы с расширением CSS; клиентские скрипты, обычно написанные на JavaScript, файлы с расширением JS; графические файлы, используемые в дизайне сайта, файлы с расширением JPG, GIF, PNG, SWF; файлы для скачивания посетителями, файлы с расширением ZIP, RAR, МРЗ, PDF, DOC и т. п.

Графика, используемая в дизайне сайта: логотип, графические элементы оформления, разнообразные кнопки и пиктограммы. Иллюстрирующая графика

Называть файлы следует, исходя из смысла страницы В некоторых случаях для группы файлов могут использоваться похожие имена, состоящие из базового имени и цифры. Русский или английский? Выбрав для использования в именах файлов какой- либо язык, придерживайтесь его в пределах всего сайта.

Правила наименования файлов в Windows и UNIX разные. Основное различие, которое и вызывает большинство проблем, – регистр символов в именах файлов. Вторая большая проблема в именах файлов – это русские буквы

в именах файлов можно использовать только латинские буквы [a-z], цифры [0-9], знак подчеркивания «_» и дефис «-»), а также точку «.» как разделитель собственно имени файла и его расширения; в именах файлов должны использоваться только символы нижнего регистра; имя файла должно начинаться с буквы; во избежание проблем длина имени файла не должна превышать 31 символ.

Название и логотип компании должны выделяться, но так, чтобы не притягивать к себе все внимание посетителя сайта. Очень полезно на главную страницу сайта помещать рекламный лозунг, который бы четко характеризовал сферу деятельности компании Чрезвычайно важно прямо на главной странице сайта подчеркнуть основные отличия вашей компании от конкурентов

Подбирая названия разделов/подразделов и других пунктов меню, необходимо ориентироваться на язык пользователя, а не на профессиональный сленг. Стараться избегать повторений, которые обычно делаются для привлечения большего внимания к тем или иным элементам web-страницы. Стараться избегать употребления непонятных пользователю «умных» фраз и рекламного жаргона

Указания посетителям должны быть сформулированы в повелительном наклонении, но в мягкой форме Следует избегать употребления восклицательных знаков Стараться как можно реже использовать слова, набранные прописными буквами Вместо подробного словесного описания использовать краткие примеры или просто иллюстрации

Следует избегать использования для ссылок инструкций общего характера Названия ссылок должны быть осмысленными и четко показывать, куда они ведут. Для ссылок, нуждающихся в более подробном объяснении, можно использовать всплывающие подсказки.

Главное навигационное меню должно располагаться в заметном месте страницы, желательно рядом с ее основной частью. Не рекомендуется горизонтальную навигационную панель сайта размещать выше графических элементов. Как правило, навигационные элементы должны быть сгруппированы по каким-либо признакам. Не рекомендуется на одной странице создавать разные области навигации, которые ведут на одни и те же страницы. Использовать пиктограммы для привлечения внимания к навигационным элементам следует с большой осторожностью.

Не следует выставлять на web-сайте службы, которые повторяют функции браузера: выбор стартовой страницы, создание закладки, кнопка «Назад» и проч. Не загромождайте web-сайт службами, не имеющими прямого отношения к самому сайту.

Иллюстрации должны отображать реальное содержание web-сайта, а не использоваться только в качестве его украшения. Если иллюстрация не несет никакой смысловой нагрузки, лучше отказаться от ее применения. Если смысл рисунка или фотографии не очевиден из самого рисунка, иллюстрацию следует подписать.

Избегайте использования фоновых изображений, поверх которых идет текст. Пусть изображение само по себе интересно – в качестве фона посетители все равно не смогут его толком разглядеть. Если же в изображении нет ничего интересного – значит, оно вообще не нужно. Сейчас использование фоновых изображений – признак плохого вкуса.

Категорически не рекомендуется использовать анимацию для привлечения внимания посетителя к каким-либо элементам главной страницы. Никогда не подвергайте анимации основные элементы страницы – логотип компании, рекламный лозунг или основной заголовок.

Все главные элементы страницы web-сайта должны находиться выше «линии сгиба» страницы, т. е. умещаться на первом экране Не рекомендуется оставлять слишком много свободного места по вертикали между элементами страницы web-сайта, чтобы пользователь не подумал, что ниже ничего нет. Не рекомендуется использовать элементы интерфейса, если они не являются ссылками. Старайтесь избегать большого количества полей ввода, особенно в верхней части страницы.

Корректность ссылок Неверные ссылки – это ссылки, которые указывают на несуществующий файл или имеют неправильный путь. Несвязанные файлы – это файлы, размещенные на сайте, но не связанные ссылками ни с одним документом и поэтому никогда не отображаются при просмотре, а только занимают дисковое пространство.

Ссылка на локальный документ Регистр Неправильный путь к файлу

Рекомендуется использовать альтернативный текст для картинок-ссылок. На каждой странице рекомендуется писать ее заголовок Цвет посещенных и не посещенных ссылок должен различаться; В каждой директории размещайте файл index.html (default.html); Описание и ключевые слова (Meta) должны присутствовать и различаться для каждой страницы; Проверьте орфографию.

Разбивайте большие таблицы Оптимизируйте графику Задавайте ширину и высоту рисунков Многократно используйте одни и те же изображения Применяйте каскадные таблицы стилей (CSS) Храните таблицу стилей во внешнем файле Размещайте важную информацию наверху страницы

Бесплатный хостинг Хостинг у провайдера Платный хостинг Хостинг у знакомых

Во-первых, как правило, запрещена публикация порнографических материалов и другой информации сексуального характера Во-вторых, в ряде случаев запрещено создание виртуальных библиотек с материалами, авторские права на которые принадлежат третьим лицам, а также коллекций музыкальных произведений в формате МРЗ. Запрещена пропаганда насилия, национализма и прочие нарушения российского и международного законодательства, например продажа посредством Интернета наркотиков, оружия, похищенных предметов и т. д.

Регистрация в каталогах и поисковых системах Размещение описания сайта в рассылках- обзорах Сети Обмен ссылками с другими сайтами Баннерная реклама Написание собственных статей Открытие собственной рассылки

Кроссбраузерная верстка – это верстка сайта, которая позволяет отображать его во всех браузерах одинаково

Наличие некоторых стандартов HTML, которым ваша верстка может не соответствовать Использование новых технологий, неподдерживаемых старыми версиями браузеров Собственные правила поведения IE Значение атрибутов по умолчанию

Для того чтобы решить проблему с атрибутами по умолчанию, можно прописать эти атрибуты в таблице стилей. Необходимо чтобы на вашем компьютере были установлены все самые популярные браузеры. Необходимо определить для себя стратегию верстки. Для того, чтобы облегчить себе работу и быстрее находить ошибки в своем коде для того или иного браузера, можно установить плагины для разработчиков.

Адаптивные шаблоны Поддержка экранов Retina Закрепленные шапки Полноразмерные фоновые изображения CSS-прозрачность Минималистические целевые (посадочные) страницы Цифровые QR-коды Бесконечный скроллинг Гиды по свойствам на главной странице Скользящие панели веб- страниц Переключение мобильной навигации API и open source Глубокие тени блоков CSS3-анимации Вертикальная навигация Одностраничный веб- дизайн Округлые элементы дизайна

Не заставляйте меня думать! Количество щелчков мышью не имеет значения до тех пор, пока каждый клик очевиден Избавьтесь от половины слов на каждой странице, затем уберите еще половину из того, что осталось