Front-end Course. Lesson 1

Содержание

Слайд 2

Текстовый редактор или IDE ?

Sublime Text

Atom

WebStorm

Brackets

Visual Studio Code

Текстовый редактор или IDE ? Sublime Text Atom WebStorm Brackets Visual Studio Code

Слайд 3

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

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

Слайд 4

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

-> указывает браузеру какой стандарт используется

Структура HTML-документа -> указывает браузеру какой стандарт используется -> указывает кодировку документа
-> указывает кодировку документа


Удобрения для сада и огорода


Удобрения для сада




Или

Все права защищены


Слайд 5

Теги и атрибуты в HTML

Блочные (display: block) : ● Пример

● Выстраиваются в

Теги и атрибуты в HTML Блочные (display: block) : ● Пример ●

Слайд 6

Заголовки в HTML




Заголовки в тексте

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

Заголовок первого уровня


Заголовок второго уровня


Заголовок третьего уровня


Заголовок четвертого уровня


Заголовок пятого уровня

Заголовок шестого уровня



Слайд 7

Абзацы Текста

Абзацы в HTML создаются при помощи тега

Текст

. Тег

определяет параграф

Абзацы Текста Абзацы в HTML создаются при помощи тега Текст . Тег
текста. Является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой пустым пространством.

Тег Текст Делает текст жирным.
Тег Текст Делаем текст наклонным.
Тег Текст Делает текст перечеркнутым.

Слайд 8

Изображения

Тег предназначен для отображения на веб-странице изображений в графическом формате GIF,

Изображения Тег предназначен для отображения на веб-странице изображений в графическом формате GIF,
JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег .

Слайд 9

HTML Ссылки

Ссылки нужны для того, чтобы связать между собой веб-страницы в сети

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

текст ссылки

Якорь – закладка на веб-странице, к которой можно перейти по ссылке. Должен иметь уникальное имя, которое задается с помощью атрибута id.

Заголовок

Ссылка на него: Перейти к заголовку

Слайд 10

Списки

Любой список представляет собой контейнер 

    , который устанавливает маркированный список, или 
      , определяющий список

Списки Любой список представляет собой контейнер , который устанавливает маркированный список, или
нумерованный. Каждый элемент списка должен начинаться с тега 
  • .

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




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





    • Yoda

    • Obi Van

    • Darth Vader

    • Window






  • Слайд 11

    Списки

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




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




    Списки Нумерованные списки Маркированный список Yoda Obi Van Darth Vader Window

    1. Yoda

    2. Obi Van

    3. Darth Vader

    4. Window






    Слайд 12

    HTML Таблицы

    Для добавления таблицы на веб-страницу используется тег

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

    Слайд 13

    Таблицы HTML







    Таблицы HTML Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4



    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Слайд 14

    Формы в HTML





    Тег FORM


    Формы в HTML Тег FORM Как по вашему мнению расшифровывается аббревиатура "ОС"?
    action="handler.php">

    Как по вашему мнению расшифровывается аббревиатура "ОС"?


    Офицерский состав

    Операционная система

    Большой полосатый мух






    Слайд 15

    Вопросы

    Вопросы

    Слайд 16

    Домашнее Задание

    Задание #1

    Сверстать форму

    Домашнее Задание Задание #1 Сверстать форму

    Слайд 17

    Домашнее Задание

    Задание #2

    Сверстать таблицу

    Домашнее Задание Задание #2 Сверстать таблицу

    Слайд 18

    Домашнее Задание

    Задание #3

    Сверстать таблицу

    Домашнее Задание Задание #3 Сверстать таблицу

    Слайд 19

    Домашнее Задание

    Доп. Задание #1

    Сверстать меню сайта
    Используя теги

      ,
    • ,
        . И любой блочный элемент

    Домашнее Задание Доп. Задание #1 Сверстать меню сайта Используя теги , ,
    для зашоловка меню.
    Имя файла: Front-end-Course.-Lesson-1.pptx
    Количество просмотров: 38
    Количество скачиваний: 0