Создание Web-страниц на языке HTML

Содержание

Слайд 2

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

HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).
HTML предназначен для создания

Основные понятия HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки
веб-страниц во всемирной паутине.

Слайд 3

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

Тэги - это метки, которые используются для указания браузеру, как он

Основные понятия Тэги - это метки, которые используются для указания браузеру, как
должен показывать web-сайт.
Большая часть HTML тегов состоит из двух частей:
открывающий тег <...> 
закрывающий тег 
Теги не чувствительны к регистру

Слайд 4

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

Абсолютно любой документ, построенный на базе HTML будет состоять, по

Структура HTML документа. Абсолютно любой документ, построенный на базе HTML будет состоять,
меньшей мере, из следующих тегов:
- Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ.  …
- Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин.  …

Слайд 5

- Название, оглавление страницы, предназначен для поисковых машин, этот  тег всегда помещается</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="- Название, оглавление страницы, предназначен для поисковых машин, этот тег всегда помещается" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/344267/slide-4.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/344267/slide-4.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/344267/slide-4.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344267/slide-4.jpg 1440w" class="slides-image" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344267/slide-4.jpg"><!----><div class="slides-content">внутри - <head><title>…
- В этот тег помещается информация, которая должна отображаться в окне браузера.  …

Слайд 6

Пример:

    Это моя первая страница    Привет, мир!

Пример: Это моя первая страница Привет, мир!

Слайд 7

Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются

Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются
атрибуты тегов.
Атрибуты тега тела документа
- Цвет фона документа, используя значение цвета в виде RRGGBB.
- Цвет текста документа

Слайд 8

Таблица цветов HTML

Таблица цветов HTML

Слайд 9

.....

- Определяет величину заголовка по их степени важности. 

.....

- Самый большой

..... - Определяет величину заголовка по их степени важности. ..... - Самый
заголовок. 
.....
- Самый маленький заголовок.
….. - Определяет текст жирным шрифтом.  …..- Определяет текст наклонным (курсив) шрифтом.  …..- Имитирует стиль печатной машинки.  ….. - Задаёт цвет текста, шестнадцатеричном коде. …..- Задаёт величину шрифта в пределах от “1” до “7”. 
…..- Увеличивает размер текст на условную 1-цу от заданного.  …..- Этот тег, браузер определяет как жирное начертание текста. 
…..- Этот тег, браузер определяет как наклонное (курсив) начертании текста. 

Атрибуты текст документа

Слайд 10

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

…..

- Определяет новый параграф текста с предварительным пропуском одной строки.  < P ALIGN=”…”>

Форматирование текста документа ….. - Определяет новый параграф текста с предварительным пропуском
- Выравнивает текст относительно одной из сторон документа. Значения: “left”, “right”, “justify, “ center”.  Пример: текст

Текст по центру.

Слайд 11

    - Определяет нумерованный список. 
  1. - Объекту, заключённому в этот тег присваивается

- Определяет нумерованный список. - Объекту, заключённому в этот тег присваивается номер.
номер.  Также применяется атребут:  start - Указывает стартовый номер.  type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.
...
Пример:   
  • морковь 
  • капуста 
  • яблоки 
  • уксус 
  • сахар 
  • соль 
    Результат:
    3. морковь
    4. капуста
    5. яблоки
    6. уксус
    7. сахар
    8. соль

    • Слайд 12

    Графические элементы на странице

              Вставляет изображение на страницу.
     Форматирует положение изображения в

    Графические элементы на странице Вставляет изображение на страницу. Форматирует положение изображения в
    документе. Может иметь значения: left, right, center; bottom, top, middle.
    Устанавливает толщину рамки вокруг изображения
    Устанавливает поля сверху и снизу
    Устанавливает поля слева и справа.
    - Добавляет горизонтальную линию.
     
     Указывает ширину линии в пикселах или процентах.
    Линия без тени. 
     Определяет цвет линии.

    Слайд 13

    Создание таблиц

     

      Тег создающий таблицу.
    Задает строку в таблице. 
    Задает отдельную ячейку в

    Создание таблиц Тег создающий таблицу. Задает строку в таблице. Задает отдельную ячейку
    таблице.
    Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом)

    Слайд 14

    Атрибуты таблицы

     

            Определяет толщину рамки.
     Определяет расстояние между ячейками
    Устанавливает ширину таблицы.Атрибуты таблицы Определяет толщину рамки. Определяет расстояние между ячейками Устанавливает ширину таблицы.
    (Значение параметра может быть в пикселях или процентах)
    Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах)
    Указывает количество столбцов, объединенных в одной ячейке.
    		 Указывает количество строк, объединенных в одной ячейке. 
    		 Задает ширину ячейки таблицы в пикселях или процентах.
    		Задает высоту ячейки таблицы в пикселях или процентах.

    Слайд 15

    Оформление гиперссылок

    - Задаёт переход на другие ресурсы.

    Оформление гиперссылок - Задаёт переход на другие ресурсы. - Название страницы -
    - Название страницы - Задаёт переход на другие страницы сайта.
    - Название страницы - Задаёт переход на другую страницу сайта в новом окне.

    Слайд 16

    Атрибуты гиперссылок

    Указывает в каком окне открывать гиперссылку.  

    Цвет текста гиперссылок
    Атрибут LINK служит

    Атрибуты гиперссылок Указывает в каком окне открывать гиперссылку. Цвет текста гиперссылок Атрибут
    для выделения гиперссылок, которые еще не посещались пользователем.
    Атрибут VLINK - уже посещенные ссылки.
    Атрибут ALINK - выделяет активную гиперссылку.

    Слайд 17

    Пример:

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

    Пример: Гиперссылка может связывать страницы как в пределах одного сайта, так и
    на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html).
    Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

    Слайд 18

    HTML-код:
    Ссылка на главную страницу сайта
    Отображение в браузере:
    Ссылка на главную страницу сайта
    HTML-код:

    HTML-код: Ссылка на главную страницу сайта Отображение в браузере: Ссылка на главную
    href="../index.html">Ссылка на главную страницу сайтаОтображение в браузере:
    Ссылка на главную страницу сайта

    Слайд 19

    Гиперссылка в пределах html страницы
    Иногда необходимо сделать гиперссылку в пределах одной страницы.

    Гиперссылка в пределах html страницы Иногда необходимо сделать гиперссылку в пределах одной
    Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.
    Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга . Имя должно содержать только буквы и цифры.
    Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
    Пример:
    HTML-код:
    Наверх страницы
    В то место, куда надо сделать переход надо вставить:

    Отображение в браузере:
    Наверх страницы
    Имя файла: Создание-Web-страниц-на-языке-HTML.pptx
    Количество просмотров: 354
    Количество скачиваний: 0
    - Предыдущая
    Логические основы компьютера
    Следующая -
    Устройства ввода-вывода информации

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

    Современные модели взаимодействия педагога с детьми и родителями
    Тадао Андо. Архитектурные особенности
    Презентация на тему Как животные готовятся к зиме
    Л.Воронковой "Девочка из города"
    Турпредприятие моей мечты
    Презентация на тему Военно-промышленный комплекс России
    Презентация на тему Работа с семьей: направления, формы и методы, приемлимые в условиях инклюзивного образования
    Эпоха Возрождения XIY – XYI в.в
    Звук и буква Щ
    Ориентирование 6 класс
    Народные традиции и обряды, элементы фантастики в повести Н.В. Гоголя
    Воздействие шумов на организм человека
    Термическая и химико-термическая обработка металлов и сплавов
    Тема урока:
    ЗАО «Опытный завод Нефтехим» г.Уфа, ул.Инициативная,14 (347) 243-25-88
    Мои права. Мои обязанности
    Да святится имя твое…
    1 Клиенты найдутся! Эффективные инструменты поиска клиентов в интернете Виталий Душкин Томск, 27 октября 2011.
    Organisation de cours collectifs de gymnastique faciale
    Административные процедуры
    В педагогике слово «проект» известно около 300 лет. От итальянского «projicere» - разрабатывать, планировать, браться за что-либо.
    3D-printer для печати пластиковыми стаканчиками
    Натрий
    Основная образовательная программа начального общего образования МБОУ Лицей №28
    № 1. Предмет соц КАзГАСА 2017 (1)
    Каким часто представляют себе социолога? Социолог - назойливое существо, с анкетой пристающее к людям с кучей вопросов, а потом счи
    Методическая часть комплексного задания II уровня заключается в разработке плана занятия учебной практики
    Анализ результатов экзамена по русскому языку обучающихся 9 классов в Саратовской области в 2012 году
    LiveInternet
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть