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

Разработка 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Готовая анкета

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

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

    Книжная выставка Книжка на ладошке Виртуальная Структурное подразделение Книжная выставка Книжка на ладошке Виртуальная Структурное подразделение 231
    АВТОМАТИЧНИЙ СИНТАКСИЧНИЙ АНАЛІЗ УНІФІКАЦІЙНІ ГРАМАТИКИ СТРУКТУРИ ОЗНАК АВТОМАТИЧНИЙ СИНТАКСИЧНИЙ АНАЛІЗ УНІФІКАЦІЙНІ ГРАМАТИКИ СТРУКТУРИ ОЗНАК 192
    Роль Железной дороги в ВОВ Роль Железной дороги в ВОВ 390
    Октябрьская революция и первые преобразования большевиков Период 1917-1918 Октябрьская революция и первые преобразования большевиков Период 1917-1918 324
    Русский язык 10 класс «Местоимение как часть речи - Правописание местоимений» Русский язык 10 класс «Местоимение как часть речи - Правописание местоимений» 967
    Как жили земледельцы и ремесленники в Египте Учитель истории: Егоркина Е.М Как жили земледельцы и ремесленники в Египте Учитель истории: Егоркина Е.М 255
    Техника скорочтения в букварный период «Почитай-ка!» Техника скорочтения в букварный период «Почитай-ка!» 363
    Буллезные дерматозы у детей Буллезные дерматозы у детей 333
    Экономический анализ Экономический анализ 278
    Дополнительный материал к уроку литературного чтения во 2 классе «В гостях у сказочника А.С. Пушкина» Дополнительный материал к уроку литературного чтения во 2 классе «В гостях у сказочника А.С. Пушкина» 470
    Физика реального кристалла Физика реального кристалла 250
    Трепетание предсердий Трепетание предсердий 242
    Вольфганг Амадей Моцарт Вольфганг Амадей Моцарт 202
    КАЛЕНДАРНЫЙ ПЛАН ЗАНЯТИЙ ПО ДИСЦИПЛИНЕ ХИМИЯ В ОСЕННЕМ СЕМЕСТРЕ КАЛЕНДАРНЫЙ ПЛАН ЗАНЯТИЙ ПО ДИСЦИПЛИНЕ ХИМИЯ В ОСЕННЕМ СЕМЕСТРЕ 235
    Lekciya11.ppt Lekciya11.ppt 212
    Эпоха дикости – начало истории человечества Эпоха дикости – начало истории человечества 310
    Александр Давыдович (Давидович) Швейцер (1923—2002) Александр Давыдович (Давидович) Швейцер (1923—2002) 375
    All About Weather By: Jennifer Dell All About Weather By: Jennifer Dell 201
    Терпение и труд всё перетрут: дети и подростки как труженики тыла Презентацию Терпение и труд всё перетрут: дети и подростки как труженики тыла Презентацию 247
    Do you dare enter the unknown? Come and ask me anything, I will read your Do you dare enter the unknown? Come and ask me anything, I will read your 180

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

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

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

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

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

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

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