Основы HTML

Содержание

Слайд 2

Лабораторная работа №1 «Основы HTML»

Цель работы: ознакомление с основными понятиями языка HTML, практическое

Лабораторная работа №1 «Основы HTML» Цель работы: ознакомление с основными понятиями языка
овладение навыками создания web страниц.
Задание: Cделать небольшую Web-страничку о себе следующего вида. Cтраничку сохраните как index.htm.

Слайд 3

Основные положения

HTML – язык разметки элементов на странице сайта. Страница будет выглядеть

Основные положения HTML – язык разметки элементов на странице сайта. Страница будет
одинаково на любом устройстве с любой ОС. Основная структура такова:
отвечает за информацию о странице: название, автор, кодировка и т.д.
отвечает за видимую для пользователя область сайта. В этом теге содержатся все элементы сайта:

- горизонтальная линия

- Заголовок уровня 1,2…6 соответственно.

самый крупный по размеру,
- наименьший

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

Слайд 4

- таблица, в которой есть два блока – строки и

- таблица, в которой есть два блока – строки и столбцы. -
столбцы. - новая строка - новый столбец
- изображение
Дополнительные свойства:

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

- выравнивание шрифта по левому/правому краю/центру

- в таблице ячейки будут хх пикселей в ширину, y пикселей граница, hh пикселей расстояние между ячейками, ff пикселей отступ внутри ячейки

Слайд 5

Результат работы:

Результат работы:

Слайд 6

Главная страница

whitesmoke" >Moscow Aviation Institute!


1

Слайд 7

Информация ФИО: Юрков Антон Дмитриевич Дата рождения 17.01.2000 Группа М3О-309Б-17 2

Информация

ФИО:

Юрков Антон Дмитриевич

Дата рождения

17.01.2000

Группа

М3О-309Б-17


2

Слайд 8



Рекомендую:

Рекомендую: Мой блог Перейти в Google Дата рождения: 17.01.2000 Место рождения: г.о.
Мой блог

Дата рождения:

17.01.2000

Место рождения:

г.о. Королёв, МО, РФ

Языки

English - Upper Intermidiate

Образование

11 классов

Хобби

Программирование, игры, технологии, человеческое развитие и технологический прогресс


3

Слайд 9


Рекомендую:

Мой блог
Рекомендую: Мой блог Перейти в Google 4
href="https://google.com">Перейти в Google

4

Слайд 10

Лабораторная работа №2 «Каскадные таблицы стилей»

Цель работы: ознакомление с таблицами стилей.
Задание:

Лабораторная работа №2 «Каскадные таблицы стилей» Цель работы: ознакомление с таблицами стилей. Задание:

Слайд 11

Основные положения

CSS служит для изменения внешнего вида web-страницы.
Подключить таблицу можно по команде
Фильтр

Основные положения CSS служит для изменения внешнего вида web-страницы. Подключить таблицу можно
нужен для обработки изображения встроенными средствами (черно-белое, прозрачное, размытое и т.д.)


Слайд 12

Результат:

Результат:

Слайд 15

Код:


Код: Moscow Aviation Institute! Информация ФИО: Юрков Антон Дмитриевич Дата рождения 17.01.2000 Группа М3О-309Б-17
bgcolor="#29293d" height="12px">

Moscow Aviation Institute!

Информация

ФИО:

Юрков Антон Дмитриевич

Дата рождения

17.01.2000

Группа

М3О-309Б-17


Слайд 16

Дата рождения: 17.01.2000 Место рождения: г.о. Королёв, МО, РФ Языки English -
  • Дата рождения:
  • 17.01.2000

  • Место рождения:
  • г.о. Королёв, МО, РФ

  • Языки
  • English - Upper Intermidiate

  • Образование
  • 11 классов

  • Хобби
  • Программирование, игры, технологии, человеческое развитие и технологический прогресс



    Слайд 17


    Слайд 18

    CSS

    body { background: ghostwhite; font-size: 1em; line-height: 1.4; font-family: 'Ubuntu', sans-serif; margin:

    CSS body { background: ghostwhite; font-size: 1em; line-height: 1.4; font-family: 'Ubuntu', sans-serif;
    auto; align-self: center; } .footer{ width: 500px; } .me1{ filter: opacity(45%); width: 200px; } .me2{ filter: grayscale(79%); width: 200px; } .me3{ filter: blur(1px); width: 200px; } .me4{ filter: contrast(425% ); width: 200px; } .me5{ filter: hue-rotate(240deg); width: 200px; } hr { height: 1px; border: 0; border-top: 1px solid #ccc; padding: 0; width: 540px; }

    Слайд 19

    .bottoms{ position: fixed; width: 500px; border: 12px; background-color: rgba(209,209,209,0.05); } img { padding: 20px;

    .bottoms{ position: fixed; width: 500px; border: 12px; background-color: rgba(209,209,209,0.05); } img {
    border: 1px solid orange; } .headerclass{ size: 14pt ; margin: auto; color: whitesmoke; position: center; background-color: #29293d; padding: 0px; } .td{ padding: 2px; border-spacing: 2px; } .student{ width: 500px; position: center; padding-right: 15px; } a{ color: #053669; text-decoration: none; } a:hover { color: green; text-decoration: underline; cursor: alias; font-size: 1.5em; }

    Слайд 20

    Лабораторная работа №3 Создание Web-сайта c помощью Adobe Photoshop и Macromedia Dreamweaver.

    Цель лабораторной

    Лабораторная работа №3 Создание Web-сайта c помощью Adobe Photoshop и Macromedia Dreamweaver.
    работы – изучить технологию создания сайта, состоящую из трех этапов:
    cоздание проекта сайта в Photoshop,
    нарезка и оптимизация проекта в Adobe ImageReady,
    верстка в визуальном HTML-редакторе Macromedia Dreamweaver

    Слайд 21

    Результат работы:

    Результат работы:

    Слайд 22

    Нарезка в Adobe Photoshop инструментом

    Нарезка в Adobe Photoshop инструментом

    Слайд 23

    Использование Adobe Dreawmviewer

    Используя встроенные средства Dreamviewer было сделано:
    Общая разметка
    Ссылки на кнопках
    Подсветка кнопок

    Использование Adobe Dreawmviewer Используя встроенные средства Dreamviewer было сделано: Общая разметка Ссылки
    при наведении

    Слайд 24

    Результат работы в Dreamviewer, вкладка Жизнь

    Результат работы в Dreamviewer, вкладка Жизнь

    Слайд 25

    Результат работы в Dreamviewer, вкладка Учеба

    Результат работы в Dreamviewer, вкладка Учеба

    Слайд 26

    Результат работы в Dreamviewer, вкладка Наука

    Результат работы в Dreamviewer, вкладка Наука

    Слайд 27

    Лабораторная работа №5 Нелинейный монтаж видеофильма в среде Adobe Premiere 2.0.

    Цель работы: изучить

    Лабораторная работа №5 Нелинейный монтаж видеофильма в среде Adobe Premiere 2.0. Цель
    основные этапы нелинейного монтажа видеофильма.

    Слайд 28

    Задание

    Задание

    Слайд 29

    Интерфейс программы с предпросмотром заставки

    Интерфейс программы с предпросмотром заставки

    Слайд 30

    Интерфейс программы с предпросмотром клипа

    Интерфейс программы с предпросмотром клипа

    Слайд 31

    Скриншот из видеоклипа

    Скриншот из видеоклипа
    Имя файла: Основы-HTML.pptx
    Количество просмотров: 43
    Количество скачиваний: 0