Разделы презентаций

Разработка Web -сайтов с использованием языка разметки гипертекста HTML

Содержание

Web-страницы и Web-сайты. Структура веб-страницы.

Слайды и текст этой презентации

Слайд 1Разработка Web-сайтов с использованием языка разметки гипертекста HTML

Разработка Web-сайтов с использованием языка разметки гипертекста HTML

Слайд 2Web-страницы и Web-сайты. Структура веб-страницы.

Web-страницы и Web-сайты. Структура веб-страницы.

Слайд 3Понятие веб-сайта
Информация во Всемирной паутине хранится в форме Web-сайтов.
Web-сайт

по структуре напоминает журнал по какой-либо теме или проблеме. Как

журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Веб-страницы связаны гиперссылками.
Понятие веб-сайтаИнформация во Всемирной паутине хранится в форме Web-сайтов. Web-сайт по структуре напоминает журнал по какой-либо теме

Слайд 4Программы для создания сайта:
1) простейший текстовый редактор (без форматирования текста):

Visual Studio Code, Sublime text 3, Notepad++, блокнот
2) браузер

для просмотра страниц
3) программа обработки изображений:
Photoshop
Программы для создания сайта:1) простейший текстовый редактор (без форматирования текста): Visual Studio Code, Sublime text

Слайд 5Структура Web-страницы

Структура Web-страницы

Слайд 6Тэги
Вид Web-страницы задается управляющими командами - тэгами, которые заключаются в

угловые скобки < >
Тэги бывают одиночные (неповторяющиеся) или парные

(контейнеры): перед закрывающим тэгом контейнера пишут прямой слэш (/)

Тэги пишутся английскими буквами (прописными, строчными).
ТэгиВид Web-страницы задается управляющими командами - тэгами, которые заключаются в угловые скобки < > Тэги бывают одиночные

Слайд 7Структура Web-страницы
Весь HTML-код страницы помещается внутрь главного контейнера: .

Web-страница

разделяется на
2 логические части:

заголовок (HEAD)
содержание (BODY).
Структура Web-страницыВесь HTML-код страницы помещается внутрь главного контейнера: . Web-страница разделяется на 2 логические части:

Слайд 8Шаблон веб-страницы


Компьютер



Все о компьютере


Шаблон веб-страницы Компьютер

Слайд 9Структура html документа

документа
Конец тела документа
Конец документа

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

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


...Содержание документа...


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

Слайд 11Тело документа


Второй абзац. Для форматирования текста используют разные элементы

языка HTML.

 



Комментарий

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

Слайд 13Как сохранить веб-страницу
1. Cоздать для сайта специальную папку и сохранять

все файлы сайта в этой папке.

2. Web-страницу сохранить в виде

файла с именем index.html - это титульный лист сайта (первым загружается в браузер)
Расширения файла Web-страницы – .htm или .html

Как сохранить веб-страницу1. Cоздать для сайта специальную папку и сохранять все файлы сайта в этой папке.2. Web-страницу

Слайд 14Заголовки

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

ЗаголовкиЗаголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6

Слайд 15Абзац

Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если

строка прекращается в месте мягкого переноса, в конце первой строки

должен отображаться символ переноса.



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

Абзац Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса, в

Слайд 16Принудительный разрыв строки

Мой дядя самых честных правил,

Когда не

в шутку занемог,

Он уважать себя заставил

И лучше выдумать не

мог.
Принудительный разрыв строки Мой дядя самых честных правил, Когда не в шутку занемог,Он уважать себя заставил И

Слайд 17Атрибуты элементов

Атрибут


Атрибут


Тег
Имя атрибута
Значение атрибута
Атрибут


Атрибуты элементовАтрибутАтрибутТегИмя атрибутаЗначение атрибутаАтрибут

Слайд 18Используем атрибуты
Выровнять по центру
Выровнять по правому

краю
Выровнять по ширине
Выровнять по левому краю

size="3"> Толщина разделительной линии
Разделительная линия без тени
Ширина в пикселях


Используем атрибуты Выровнять по центру Выровнять по правому краю Выровнять по ширине Выровнять по левому краю Толщина

Слайд 19Коротко о цвете
Диапазон: 00 - FF (0 - 255)
#00FF00 –

green (зеленый)
#FF0000 – red (красный)
#0000FF – blue (синий)
#FFFFFF

– white (белый)
#000000 – black (черный)
#FFFF00 – yellow (жёлтый)
#FFD700 - gold (золотой)
#FFCC00 - tangerine (мандариновый)
#E49B0F - gamboge (гуммигут)
#FDE910 – lemon (лимонный)

Безопасная палитра цветов:
00,33,66,99, CC,FF (216 сочетаний).

Коротко о цветеДиапазон: 00 - FF (0 - 255)#00FF00 – green (зеленый) #FF0000 – red (красный) #0000FF

Слайд 20Раскрашиваем страницу


Раскрашиваем страницу


Этот текст

синего цвета,
а этот - красного.
Горизонтальная линия тоже

может быть разноцветная.


Раскрашиваем страницу Раскрашиваем страницу Этот текст синего цвета, а этот - красного. Горизонтальная линия тоже может

Слайд 21Непосредственное форматирование текста
- курсив
- полужирный

- подчеркнутый
- перечеркнутый
- моноширинный
-

увеличить шрифт
- уменьшить шрифт
- надиндекс
- подиндекс
Непосредственное форматирование текста - курсив - полужирный - подчеркнутый - перечеркнутый - моноширинный - увеличить шрифт -

Слайд 22Вставка изображений в Web-страницы

Вставка изображений в Web-страницы

Слайд 23Вставка изображений
На Web-страницах могут быть графические файлы 3 форматов —

GIF, JPG и PNG. Если рисунок сохранен в другом формате,

то его необходимо предварительно преобразовать в один из этих форматов.

Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете.
1) картинка на локальном компьютере в папке с сайтом:

2) картинка в другой папке на локальном компьютере:

3) картинка находится на удаленном сервере в Интернете:

Вставка изображенийНа Web-страницах могут быть графические файлы 3 форматов — GIF, JPG и PNG. Если рисунок сохранен

Слайд 24Поясняющий текст. Расположение рисунка в тексте.
Иллюстрации на Web-страницах стали неотъемлемым

элементом дизайна. Однако пользователи в целях экономии времени иногда отключают

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


Положение рисунка в тексте – определяет атрибут ALIGN тэга : ТОР, MIDDLE, BOTTOM, LEFT , RIGHT.

Компьютер
Поясняющий текст. Расположение рисунка в тексте.Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи в целях экономии

Слайд 25Вид готового сайта

Вид готового сайта

Слайд 26Код страницы сайта

Компьютер



Все о компьютере







На этом сайта вы сможете получить

различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.


Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.





Код страницы сайта Компьютер Все о компьютере На этом сайта вы сможете получить различную информацию о

Слайд 27Гиперссылки на Web-страницах

Гиперссылки на Web-страницах

Слайд 28Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные с предыдущей.
Гиперссылка

состоит из 2 частей: адрес и указатель ссылки.
Гиперссылка задается универсальным

тегом с атрибутом HREF (он указывает, в каком файле хранится нужная веб-страница):
 Указатель ссылки
Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные с предыдущей.Гиперссылка состоит из 2 частей: адрес и указатель

Слайд 29Виды гиперссылок
1) внутренняя:
Указатель ссылки
2) внешняя:
Указатель ссылки

Виды гиперссылок1) внутренняя: Указатель ссылки2) внешняя: Указатель ссылки

Слайд 30Указатели гиперссылок
Указатель – видимая часть гиперссылки: текст или картинка

Указатели гиперссылокУказатель – видимая часть гиперссылки: текст или картинка

Слайд 31Списки на Web-страницах

Списки на Web-страницах

Слайд 32Виды списков
Нумерованные
Маркированные
Списки терминов (как в словаре)
Вложенные списки

Виды списковНумерованныеМаркированныеСписки терминов (как в словаре)Вложенные списки

Слайд 33Нумерованный список
Список – в контейнере
Элемент списка – тег
Атрибут

TYPE – тип нумерации (арабские цифры; I – римские; а

– латинские строчные буквы)

  1. Системные программы
  2. Прикладные программы
  3. Системы программирования

Нумерованный списокСписок – в контейнере Элемент списка – тег Атрибут TYPE – тип нумерации (арабские цифры; I

Слайд 34Маркированный список
Список – в контейнере
Элемент списка – тег
Атрибут

TYPE – тип маркеров (“disc”- диск, “square”- квадрат, “circle”-окружность)

  • Текстовые редакторы
  • Графические редакторы
  • Электронные таблицы
  • Системы управления базами данных



    • Маркированный списокСписок – в контейнере Элемент списка – тег Атрибут TYPE – тип маркеров (“disc”- диск, “square”-

    Слайд 35Понятие интерактивной формы
    Для общения посетителей сайта с его создателями на

    веб-странице размещают интерактивные формы.
    Формы содержат различные элементы управления:
    текстовые поля
    раскрывающиеся списки
    флажки
    переключатели…

    Понятие интерактивной формыДля общения посетителей сайта с его создателями на веб-странице размещают интерактивные формы.Формы содержат различные

    Слайд 36Текстовое поле
    Основной контейнер

    Текстовое поле – для ввода текста с

    клавиатуры: тэг с атрибутами:
    TYPE=“text” – тип содержимого (текст)


    NAME=“____” – имя поля
    SIZE=“40” – длина поля ввода (в символах)




    - разделитель строк (перевод курсора на новую строку)
    Текстовое полеОсновной контейнер Текстовое поле – для ввода текста с клавиатуры: тэг с атрибутами: TYPE=“text” – тип

    Слайд 37Переключатели (радиокнопки)
    Круглая кнопка для выбора одного из нескольких

    вариантов ответов: TYPE=“radio”
    Все элементы этой группы должны иметь одинаковое

    имя: NAME=“group”
    Атрибуты VALUE содержат варианты выбора ответов: VALUE=“учащийся”
    У каждого VALUE свой вариант ответа.


    Переключатели (радиокнопки)Круглая кнопка для выбора одного из нескольких вариантов ответов: TYPE=“radio” Все элементы этой группы

    Слайд 38Флажки
    Квадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=“checkbox”


    Каждый элемент этой группы должен иметь свое имя: NAME=“box1”, NAME=“box2”,

    …..
    Атрибуты VALUE содержат варианты выбора ответов: VALUE=“WWW”, VALUE=“e-mail”, ….
    У каждого VALUE свой вариант ответа.

    WWW
    ФлажкиКвадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=“checkbox” Каждый элемент этой группы должен иметь свое

    Слайд 39Поля списков
    Для создания раскрывающего списка используют контейнер
    В нем каждый

    элемент списка задается тэгом

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

    Слайд 40Текстовая область
    Текстовая область с линейкой прокрутки – для ввода текста

    произвольной длины.
    Контейнер
    Атрибуты: NAME - задает имя области

    ROWS - число строк
    COLS - число столбцов

    Текстовая областьТекстовая область с линейкой прокрутки – для ввода текста произвольной длины.Контейнер Атрибуты: NAME -

    Слайд 41Отправка данных из формы
    Кнопка отправки создается тэгом
    Атрибуты:
    TYPE=“submit”
    VALUE=“Отправить” (надпись

    на кнопке)

    Чтобы данные из формы передать по электронной почте, используют

    контейнер:


    Отправка данных из формыКнопка отправки создается тэгом Атрибуты: TYPE=“submit”VALUE=“Отправить” (надпись на кнопке)Чтобы данные из формы передать по

    Слайд 42Готовая анкета

    Готовая анкета

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

    Гепатит – Е Г. Ростов-на-Дону 2015 г Гепатит – Е Г. Ростов-на-Дону 2015 г 189
    Новорожденные щенки. Содержание, болезни, документы Новорожденные щенки. Содержание, болезни, документы 189
    Открытый урок по химии «Оксиды» Открытый урок по химии «Оксиды» 953
    Москва и москвичи Москва и москвичи 248
    Публичный годовой отчет Алтайского регионального отделения ООДО Лига юных Публичный годовой отчет Алтайского регионального отделения ООДО Лига юных 178
    Патология плаценты и пуповины Патология плаценты и пуповины 954
    Сказка «Два Мороза» Сказка «Два Мороза» 562
    Методология и методы научного исследования М.В. Козлов (Университет г. Турку) Методология и методы научного исследования М.В. Козлов (Университет г. Турку) 285
    household-items-furniture_teacher_switcher household-items-furniture_teacher_switcher 243
    Менеджмент качества физкультурно-оздоровительных и спортивных услуг: обратная Менеджмент качества физкультурно-оздоровительных и спортивных услуг: обратная 245
    Гидрокрекинг нефтяного сырья Гидрокрекинг нефтяного сырья 349
    Особенности организации и исполнения сделок по купле-продаже товаров массового Особенности организации и исполнения сделок по купле-продаже товаров массового 251
    ПАТОФИЗИОЛОГИЯ ПИЩЕВАРЕНИЯ ПАТОФИЗИОЛОГИЯ ПИЩЕВАРЕНИЯ 511
    Всемирный день защиты китов и дельфинов 23 июля Всемирный день защиты китов и дельфинов 23 июля 439
    Пушкин, у которого вечное выражается в обыкновенном, ― это и есть настоящий Пушкин, у которого вечное выражается в обыкновенном, ― это и есть настоящий 231
    ЛЕКЦИЯ № 10 ЛЕКЦИЯ № 10 502
    Солнце-ближайшая звезда.Энергия и температура Солнца.Закон Стефана - Солнце-ближайшая звезда.Энергия и температура Солнца.Закон Стефана - 242
    ИННОВАЦИОННАЯ ЭКОНОМИКА И ТЕХНОЛОГИЧЕСКОЕ ПРЕДПРИНИМАТЕЛЬСТВО ИННОВАЦИОННАЯ ЭКОНОМИКА И ТЕХНОЛОГИЧЕСКОЕ ПРЕДПРИНИМАТЕЛЬСТВО 271
    ТРУДОМ КОВАЛАСЬ ПОБЕДА ТРУДОМ КОВАЛАСЬ ПОБЕДА 163
    Тема 5. Направления и методы коррекционно-развивающей работы Тема 5. Направления и методы коррекционно-развивающей работы 266

    Обратная связь

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

    Email: Нажмите что бы посмотреть 

    Что такое TheSlide.ru?

    Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

    Для правообладателей

    Яндекс.Метрика