Школа » Презентации » Другие презентации » Презентация по информатике "Инструменты для разработки Web-сайтов"

Презентация - "Презентация по информатике "Инструменты для разработки Web-сайтов""

0
20.09.23
На нашем сайте презентаций klass-uchebnik.com вы можете бесплатно ознакомиться с полной версией презентации "Презентация по информатике "Инструменты для разработки Web-сайтов"". Учебное пособие по дисциплине - Презентации / Другие презентации, от атора . Презентации нашего сайта - незаменимый инструмент для школьников, здесь они могут изучать и просматривать слайды презентаций прямо на сайте на вашем устройстве (IPhone, Android, PC) совершенно бесплатно, без необходимости регистрации и отправки СМС. Кроме того, у вас есть возможность скачать презентации на ваше устройство в формате PPT (PPTX).
Презентация по информатике "Инструменты для разработки Web-сайтов" 📚 Учебники, Презентации и Подготовка к Экзаменам для Школьников на Klass-Uchebnik.com

0
0
0

Поделиться презентацией "Презентация по информатике "Инструменты для разработки Web-сайтов"" в социальных сетях: 

Просмотреть и скачать презентацию на тему "Презентация по информатике "Инструменты для разработки Web-сайтов""

Инструменты <br>для разработки <br>Web-сайтов<br>
1 слайд

Инструменты
для разработки
Web-сайтов

Web-сайт это:<br>Набор страниц, посвященных определенной тематике и связанных между собой гиперссылк
2 слайд

Web-сайт это:
Набор страниц, посвященных определенной тематике и связанных между собой гиперссылками

Этапы разработки Web-сайтов: <br>Анализ и проектирование сайта <br>Информационное наполнение сайта <
3 слайд

Этапы разработки Web-сайтов:
Анализ и проектирование сайта
Информационное наполнение сайта
Креатив, или визуальная составляющая сайта
Написание кода
Тестирование
Публикация
Поддержка

На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для того, чтобы со
4 слайд

На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для того, чтобы создать Web – страницу нужно написать программу на языке HTML.
Отнести HTML к языкам программирования можно лишь с большой натяжкой, это все-таки язык РАЗМЕТКИ. Из названия становится понятным его предназначение - указывать браузеру, как разместить элементы на странице при ее отображении на экране монитора.
Что такое html элемент? Да все, что мы размещаем: текст, рисунки, анимации и т.д. С помощью HTML мы можем указать браузеру где именно их разместить; какой текст сделать большим и жирным, а какой - маленьким курсивом; где начать новую строку, а где сделать переход на другую страницу. И многое другое.
Слово «HTML» представляет собой сокращение от «HyperText Markup Language» - «язык разметки гипертекста». Основным понятием языка HTML является понятие тег.
ТЕГ – инструкция браузеру, указывающая способ отображения информации заключенный в угловые скобки <>..

Особенности интеграции HTML<br>Перенос строки только через тег (<br />)<br>Несколько пробелов,
5 слайд

Особенности интеграции HTML
Перенос строки только через тег (<br />)
Несколько пробелов, идущих подряд считаются за один
Произвольный регистр

Символьные <br>ссылки<br>Параграф    §        &sect;<br>Тире                ̶         &mdash
6 слайд

Символьные
ссылки
Параграф § &sect;
Тире ̶ &mdash;
Дефис - &ndash;

Неразрывный пробел<br>&nbsp;<br>Обязателен:<br>Инициалы (Иванов И. И.) - Иванов&nbsp;И. &
7 слайд

Неразрывный пробел
&nbsp;
Обязателен:
Инициалы (Иванов И. И.) - Иванов&nbsp;И. &nbsp;И.
Сокращения с точками (и т. д.)
Числа с последующим словом или единицами измерения (20 солдат, 10 км, 2020 год)

Элементы блочного уровня<br>Блоки располагаются друг под другом п вертикали;<br>Запрещено вставлять
8 слайд

Элементы блочного уровня
Блоки располагаются друг под другом п вертикали;
Запрещено вставлять блочный элемент внутрь строчного;
Занимают все допустимое пространство по ширине;
Высота вычисляется автоматически, исходя из содержимого.


Абзацы <p>
Списки: маркированные <ul> и нумерованные <ol>
Заголовки от 1 <h1> до 6 <h6> уровня
Статьи <article>
Разделы <section>
Длинные цитаты <blockquote>
Блоки общего назначения <div>

Элементы строчного уровня<br>Строчные элементы ведут себя как текст – выстраиваются в ряд по горизон
9 слайд

Элементы строчного уровня
Строчные элементы ведут себя как текст – выстраиваются в ряд по горизонтали и переносятся на следующую строчку, если не хватает места;
Внутрь допустимо вставлять текст или другие строчные элементы, помещать блочные эл-ты нельзя.
Ссылки <a>
Выделенные слова <em>
Важные слова <strong>
Короткие цитаты <q>
Аббревиатуры <abbr>

Тег<br>Одиночные                              Парные<br>Пример <br>
10 слайд

Тег
Одиночные Парные
Пример
Пример <html>

</html>

Теги можно вкладывать друг в друга (внутренние должны заканчивать раньше внешних)
Даны теги, определить парные и одиночные теги: <h1> </h1>;

;
<head> </head>

Основные теги HTML:<br> <!DOCTYPE html> — предназначен для указания типа текущего документа<br
11 слайд

Основные теги HTML:
<!DOCTYPE html> — предназначен для указания типа текущего документа
<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.
<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.
<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

Теги для форматирования текста:<br><h1></h1>......<h6></h6>. — теги заголовк
12 слайд

Теги для форматирования текста:
<h1></h1>......<h6></h6>. — теги заголовков, от самого большого к самому маленькому.
<b></b> — жирный текст без придания важности выделенному фрагменту.
<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
<i></i> — выделение текста курсивом без придания важности.
<s></s> — отображает перечёркнутый текст.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<p></p> — контейнер для абзаца.

— переносит текст на другую строку без создания абзаца.

Теги для форматирования текста:<br><blockquote> </blockquote> — отступы с обеих сторон д
13 слайд

Теги для форматирования текста:
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.
<ol></ol> — нумерованный список.
<ul></ul> — маркированный список.
<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).

Структура HTML<br>Структура HTML документа состоит из 3-х пар тегов:<br><!DOCTYPE html>
14 слайд

Структура HTML
Структура HTML документа состоит из 3-х пар тегов:
<!DOCTYPE html> -ВСЕГДА!
<html> -контейнер, в котором помещается html страница
<head> -контейнер, в котором хранится служебная информация
Заголовок документа
</head>
<body> -видимое содержание страницы
Тело документа
</body>
</html>
Теги <html> </html> являются контейнером для всех остальных, т.е в них помещаются все остальные. Таким образом, ваш документ должен начинаться с тега <html>, а заканчиваться тегом </html>.
Сам документ условно разделен на две части - заголовок документа (теги <head> </head>) и тело документа (теги <body> </body>).

Заголовок документа содержит служебную информацию и не влияет на внешний вид документа. Его задачей
15 слайд

Заголовок документа содержит служебную информацию и не влияет на внешний вид документа. Его задачей является предоставление браузеру пользователя или серверу информации о том, как отобразить ваш документ.
Единственным обязательным элементом заголовка документа являются теги <title> </title>. Они необходимы, чтобы дать документу название, оно отражается в заголовке окна браузера. Например, если написать следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа </title>
</head>
<body>
Тело документа
</body>
</html>


В окне браузера он будет выглядеть так:<br>
16 слайд

В окне браузера он будет выглядеть так:

Теги, делающие текст заголовками:<br><h1></h1><br><h2></h2><br><h3><
17 слайд

Теги, делающие текст заголовками:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>



18 слайд

19 слайд

Тип сохраняемого файла:<br>
20 слайд

Тип сохраняемого файла:

Комментарии (0) к презентации "Презентация по информатике "Инструменты для разработки Web-сайтов""