Введение в web-технологии. Основы HTML. Создание дизайна сайта

Содержание

Слайд 2

Если вы хотите научиться своими руками создавать сайты, то вам необходимо

Если вы хотите научиться своими руками создавать сайты, то вам необходимо

изучить:
клиентские технологий (HTML, CSS, JavaScript) и
серверные технологий (PHP, MySQL).
Что же можно создать с использованием изучаемых технологий?
Язык разметки HTML, позволяет задать местоположение элементов Web-страницы в окне Web-браузера. С помощью HTML можно отформатировать отдельные символы или целые фрагменты текста, вставить изображение, таблицу или форму, создать панель навигации с помощью карт-изображений, разделить окно Web-браузера на несколько областей, вставить гиперссылку и многое другое.
Слайд 3

При помощи каскадных таблиц стилей (CSS), можно задавать точные характеристики практически

При помощи каскадных таблиц стилей (CSS), можно задавать точные характеристики практически

всех элементов Web-страницы. Это позволяет контролировать внешний вид Web-страницы в окне Web-браузера и приближает возможности Web-дизайна к настольным издательским системам.
У Web-страниц, созданных с использованием HTML и CSS, есть существенный недостаток — они являются статическими, то есть не могут меняться, реагируя на действия пользователя. Внедрение в HTML программ на языке JavaScript позволит "оживить" Web-страницу, сделать ее интерактивной, или, другими словами, заставить взаимодействовать с пользователем. С помощью JavaScript можно обрабатывать данные формы до отправки на сервер, получать информацию о Web-браузере пользователя и его мониторе и соответствующим образом изменять форматирование страницы, создавать новые окна, изменять любые элементы HTML-документа в ответ на какое-либо событие, создавать часы на Web-странице, показывающие текущее время с точностью до секунды, скрывать и отображать элементы Web-страницы и многое другое.
Слайд 4

Еще большие возможности дает использование серверных технологий, среди которых для целей

Еще большие возможности дает использование серверных технологий, среди которых для целей

данной дисциплины выбран язык программирования PHP. Это наиболее распространенный в настоящее время язык для написания серверных скриптов. Используя его (или другие технологии, применяемые для создания динамических Web-страниц), можно изменять HTML-код, получаемый Web-браузером, в зависимости от вводимых пользователем данных, типа и версии используемого Web-браузера и других факторов. Огромное количество расширений и готовых программных продуктов, а также легкость освоения языка сделали PHP очень популярным языком программирования для Интернета. С помощью PHP можно работать с файлами и каталогами, обрабатывать данные формы на сервере, рассылать письма, загружать файлы на сервер, создавать для каждого пользователя Личный кабинет, размещать на сайте гостевую книгу, форум, чат, интернет-магазин и многое другое.
Слайд 5

На сегодняшний день ни один крупный портал не обходится без использования

На сегодняшний день ни один крупный портал не обходится без использования

баз данных. В Web-разработках чаще всего применяется быстрая, бесплатная и обладающая большими возможностями система управления базами данных (СУБД) MySQL. С помощью MySQL можно эффективно добавлять, изменять и удалять данные, получать нужную информацию по запросу. PHP обеспечивает эффективную поддержку баз данных и позволяет работать с MySQL, Microsoft SQL Server, Oracle, Sybase и др. Зная и умея работать с MySQL, легко перейти и к другим базам данных, если возникнет такая необходимость.
Слайд 6

Основные понятия Web-страницы – специальные файлы, написанные на языке НТМL (Hyper

Основные понятия

Web-страницы – специальные файлы, написанные на языке НТМL (Hyper Техt

Markup Language - язык разметки гипертекста).Web-страницы публикуются в Интернете путем размещения таких файлов на серверах НТТР (Web-узлах). Содержание Wеb-страниц может быть разным и посвященным совершенно произвольным темам, но все они используют одну и ту же основу -язык НТМL. Смысл и назначение языка НТМL можно понять, исходя из его названия НурегТехt Markup Language (НТМL) - язык разметки гипертекста, предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
То есть другими словами HTML (HyperText Markup Language) — это язык разметки документа, описывающий форму отображения информации на экране компьютера.
Слайд 7

Основные понятия Гипертекстовый документ - это текстовый файл, имеющий специальные метки,

Основные понятия

Гипертекстовый документ - это текстовый файл, имеющий специальные метки, называемые

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

Два способа создания гипертекстовых документов Воспользоваться одним из НТМL-редакторов (например, Netscape

Два способа создания гипертекстовых документов

Воспользоваться одним из НТМL-редакторов (например, Netscape Соmposer,

Microsoft FrontPage, HotDog, или др.).
Создание и разметка документа при помощи обычного редактора NotePad (Блокнот).
Слайд 9

Теги Как уже отмечалось, НТМL-документ содержит символьную информацию. Одна ее часть

Теги

Как уже отмечалось, НТМL-документ содержит символьную информацию. Одна ее часть -

собственно текст, т. е. данные, составляющие содержимое документа. Другая - теги (mаrkup tags), называемые также флагами разметки, - специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением.
Файлы, содержащие HTML-документы, имеют расширения .htm или .html.
В HTML названия тегов и параметров можно записывать в любом регистре, а в языке XHTML только в нижнем регистре.
Слайд 10

Синтаксис тегов Синтаксис открывающего тега: Синтаксис закрывающего тега : Атрибуты тега : имя[="значение"]

Синтаксис тегов

Синтаксис открывающего тега:
<имя_тега [атрибуты]>
Синтаксис закрывающего тега :

Атрибуты тега :
имя[="значение"]

Слайд 11

Теги могут вкладываться друг в друга. Например: Текст При вложении тегов

Теги могут вкладываться друг в друга. Например:

Текст


При вложении тегов необходимо соблюдать

последовательность их закрытия. Например, такой код использовать нельзя:

Текст


Слайд 12

Специальные символы

Специальные символы

Слайд 13

Структура HTML документа Листинг 1.1. Структура HTML-документа

Структура HTML документа

Листинг 1.1. Структура HTML-документа









Слайд 14

Элемент предназначен для указания типа текущего документа — DTD (document type

Элемент  предназначен для указания типа текущего документа — DTD (document type definition,

описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии языка, на которого ориентированы.
Слайд 15

Слайд 16

Синтаксис Параметры Элемент верхнего уровня — указывает элемент верхнего уровня в

Синтаксис

Параметры
Элемент верхнего уровня — указывает

элемент верхнего уровня в документе, для HTML это тег .
Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в .
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).
URL — адрес документа с DTD.
Слайд 17

Комментарии В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от

Комментарии

В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от браузера.

Все, что заключено между последовательностями символов , при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга.

Слайд 18

Заголовок документа Раздел HEAD содержит техническую информацию о странице — заголовок,

Заголовок документа

Раздел HEAD содержит техническую информацию о странице — заголовок, ее

описание и ключевые слова для поисковых машин, данные об авторе и времени создания страницы, базовом адресе страницы, кодировке и т. д.
Включение в документ заголовочной части не является обязательным.
Единственным обязательным тегом в разделе HEAD является тег . Текст, расположенный между <title> и , отображается в строке заголовка Web-браузера. Длина заголовка должна быть не более 60 символов, иначе он полностью не поместится в заголовке Web-браузера:
Заголовок страницы
Слайд 19

Заголовок документа С помощью одинарного тега можно задать описание содержимого страницы

Заголовок документа

С помощью одинарного тега можно задать описание содержимого страницы

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


Можно также указать несколько описаний на разных языках. Для этого в параметре lang следует указать используемый язык:

Слайд 20

Заголовок документа Кроме того, тег позволяет запретить или разрешить индексацию Web-страницы

Заголовок документа

Кроме того, тег позволяет запретить или разрешить индексацию Web-страницы

поисковыми машинами:

В параметре content указывается комбинация следующих значений:
index — индексация разрешена;
noindex — индексация запрещена;
follow — разрешено переходить по ссылкам, которые находятся на этой Web-странице;
nofollow — запрещено переходить по ссылкам;
all — комбинация index плюс follow;
none — комбинация noindex плюс nofollow.
Слайд 21

Заголовок документа Индексация и переход по ссылкам разрешены: Индексация разрешена, а

Заголовок документа

Индексация и переход по ссылкам разрешены:

Индексация разрешена,

а переход по ссылкам запрещен:

Индексация и переход по ссылкам запрещены:

Также с помощью тега можно указать кодировку текста:

Для автоматической перезагрузки страницы через заданный промежуток времени следует воспользоваться свойством refresh:

Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:

Слайд 22

Тело документа Тело документа размещается между тегами и . Атрибуты :

Тело документа

Тело документа размещается между тегами <ВОDY> и .
Атрибуты <ВОDY> :

Слайд 23

Тело документа Пример: Моя страничка Тело документа

Тело документа

Пример:

<НЕАD>
<ТIТLE>Моя страничка

<ВОDY ТЕХТ=red ВGCОLOR=white>
Тело

документа


Слайд 24

Форматирование текста

Форматирование текста

Слайд 25

Цветовое оформление документа Шестнадцать стандартных цветов и их коды

Цветовое оформление документа

Шестнадцать стандартных цветов и их коды

Слайд 26

Заголовки Используют теги , где n – число от 1 до

Заголовки

Используют теги , где n – число от 1 до

6.
Пример:

<НЕАD>
<ТIТLЕ> Заголовки

<ВОDY ВGСОLОR=white>
<Н1> Заголовок 1 уровня
<Н2> Заголовок 2 уровня
<НЗ> Заголовок 3 уровня
<Н4> Заголовок 4 уровня
<Н5> Заголовок 5 уровня
<Н6> Заголовок 6 уровня


Слайд 27

Заголовки Теги заголовков поддерживают атрибут ALIGN, он задает выравнивание заголовка относительно

Заголовки

Теги заголовков поддерживают атрибут ALIGN, он задает выравнивание заголовка относительно

окна Web-браузера. Он может принимать следующие значения:
center — выравнивание по центру:

Заголовок первого уровня с выравниванием по центру


left — выравнивание по левому краю (по умолчанию):

Заголовок второго уровня с выравниванием по левому краю


right — выравнивание по правому краю:
Самый мелкий заголовок с выравниванием по правому краю

Слайд 28

Придания тексту определенного начертания Жирный текст Курсив Подчеркнутый Перечеркнутый Верхний индекс Нижний индекс

Придания тексту определенного начертания

Жирный текст
Курсив
Подчеркнутый


Перечеркнутый
Верхний индекс
Нижний индекс
Слайд 29

С помощью элемента STYLE тега можно задавать выделение текста любым цветом: Выделение текста цветом

С помощью элемента STYLE тега можно задавать выделение текста любым

цветом:

Выделение текста цветом

Слайд 30

Тег . Шрифт FACE - задает стандартное имя шрифта

Тег . Шрифт

FACE - задает стандартное имя шрифта

Слайд 31

Тег . Размер текста Атрибут SIZE - size задает размер шрифта

Тег . Размер текста

Атрибут SIZE - size задает размер шрифта

в условных единицах от 1 до 7. Размер, используемый Web-браузером по умолчанию, принято приравнивать к 3. Размер шрифта можно указывать как цифрой от 1 до 7, так и в относительных единицах, указывая, на сколько единиц нужно увеличить (знак "+") или уменьшить (знак "–") размер шрифта относительно базового:
Текст
Текст
Текст
Слайд 32

COLOR - задает цвет текста (по умолчанию черный - #000000) Красный Красный Тег . Цвет текста

COLOR - задает цвет текста (по умолчанию черный - #000000)

Красный
Красный

Тег . Цвет текста

Слайд 33

Разделение текста на абзацы … Возможные значения атрибута ALIGN

Разделение текста на абзацы

…


Возможные значения атрибута ALIGN

Слайд 34

Перевод строки

Перевод строки

Слайд 35

Перевод строки Некоторые браузеры интерпретируют несколько стоящих рядом тегов как один

Перевод строки

Некоторые браузеры интерпретируют несколько стоящих рядом тегов <ВR> как один

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

Строка1
Строка2
Строка3

В этом примере строки также будут располагаться друг под другом.
Слайд 36

Горизонтальные линии Атрибуты тега

Горизонтальные линии

Атрибуты тега


Слайд 37

Использование графики картинка лежит в том же каталоге (директории, папке), в

Использование графики


картинка лежит в

том же каталоге (директории, папке), в которой лежит и наш документ
картинка лежит в поддиректории
картинка лежит на уровень выше, а документ находится в поддиректории
Если картинка лежит на другом сайте, то путь прописывается полностью
Слайд 38

Атрибуты тега и их значения

Атрибуты тега и их значения

Слайд 39

Атрибуты тега и их значения Значения, принимаемые атрибутом АLIGN

Атрибуты тега и их значения

Значения, принимаемые атрибутом АLIGN

Слайд 40

Создание списков Нумерованные списки

Создание списков  Нумерованные списки

Слайд 41

Создание списков Нумерованные списки

Создание списков  Нумерованные списки

Слайд 42

Маркированные списки

Маркированные списки

Слайд 43

Вложенные списки

Вложенные списки

- Предыдущая
Выбор рационального способа эксплуатации скважин
Следующая -
Специализированный спортивный класс с углубленными учебно-тренировочными занятиями

Похожие презентации

Взаимодействие объектов
Введение в SDL (Simple DirectMedia Layer)
Социальная инженерия и OSINT
Математическая лингвистика
Таблицы в СУБД
Создание Web-сайта
Обложка презентации
Microsoft Office - интегрированный пакет
Как вести себя на улице 1 класс
Экономистам о сайтах
Портфолио таргетолога
Обзор рекламного кабинета. Создание кабинета
Цвет в веб-дизайне. Контрастность и цветовое соответствие на веб-странице. Лекция 7
Продажи в социальных сетях
Алгоритм Евклида
Поиск работы в социальных сетях - тренд или миф
Алгоритм. Свойства алгоритма.
Понятия о MDS. Аналитические службы MS SQL Server
Двоичное кодирование графической и звуковой информации
Технологический процесс создания мультимедийного ролика
Векторная графика CorelDraw Цель урока: - получить представление векторной графической программе CorelDraw, для создания изображений, д
Ур. 24 Пошаговое выполнение, отладка линейных программ
Разработка учителя информатики МОУ «СОШ № 23» г. Новомосковска Тульской области Соболевой Юлии Владимировны
Реестр
Автоматизація ресторанів, кафе, барів і пунктів швидкого харчування
Индивидуальная работа
Планирование жизненного цикла программных средств. (Лекция 1.3)
Ғаламтормен дұрыс жұмыс жасау – мәдениет. Ғаламтормен жұмыс жасаудың зиянды жақтары
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть