Презентация по информатике "Инструменты для разработки Web-сайтов"
- Рубрика: Презентации / Другие презентации
- Просмотров: 33
Презентация для классов "Презентация по информатике "Инструменты для разработки Web-сайтов"" онлайн бесплатно на сайте электронных школьных презентаций uchebniki.org.ua
Инструменты
для разработки
Web-сайтов
Web-сайт это:
Набор страниц, посвященных определенной тематике и связанных между собой гиперссылками
Этапы разработки Web-сайтов:
Анализ и проектирование сайта
Информационное наполнение сайта
Креатив, или визуальная составляющая сайта
Написание кода
Тестирование
Публикация
Поддержка
На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Для того, чтобы создать Web – страницу нужно написать программу на языке HTML.
Отнести HTML к языкам программирования можно лишь с большой натяжкой, это все-таки язык РАЗМЕТКИ. Из названия становится понятным его предназначение - указывать браузеру, как разместить элементы на странице при ее отображении на экране монитора.
Что такое html элемент? Да все, что мы размещаем: текст, рисунки, анимации и т.д. С помощью HTML мы можем указать браузеру где именно их разместить; какой текст сделать большим и жирным, а какой - маленьким курсивом; где начать новую строку, а где сделать переход на другую страницу. И многое другое.
Слово «HTML» представляет собой сокращение от «HyperText Markup Language» - «язык разметки гипертекста». Основным понятием языка HTML является понятие тег.
ТЕГ – инструкция браузеру, указывающая способ отображения информации заключенный в угловые скобки <>..
Особенности интеграции HTML
Перенос строки только через тег (<br />)
Несколько пробелов, идущих подряд считаются за один
Произвольный регистр
Символьные
ссылки
Параграф § §
Тире ̶ —
Дефис - –
…
Неразрывный пробел
Обязателен:
Инициалы (Иванов И. И.) - Иванов И. И.
Сокращения с точками (и т. д.)
Числа с последующим словом или единицами измерения (20 солдат, 10 км, 2020 год)
…
Элементы блочного уровня
Блоки располагаются друг под другом п вертикали;
Запрещено вставлять блочный элемент внутрь строчного;
Занимают все допустимое пространство по ширине;
Высота вычисляется автоматически, исходя из содержимого.
Абзацы <p>
Списки: маркированные <ul> и нумерованные <ol>
Заголовки от 1 <h1> до 6 <h6> уровня
Статьи <article>
Разделы <section>
Длинные цитаты <blockquote>
Блоки общего назначения <div>
Элементы строчного уровня
Строчные элементы ведут себя как текст – выстраиваются в ряд по горизонтали и переносятся на следующую строчку, если не хватает места;
Внутрь допустимо вставлять текст или другие строчные элементы, помещать блочные эл-ты нельзя.
Ссылки <a>
Выделенные слова <em>
Важные слова <strong>
Короткие цитаты <q>
Аббревиатуры <abbr>
Тег
Одиночные Парные
Пример
Пример <html>
…
</html>
Теги можно вкладывать друг в друга (внутренние должны заканчивать раньше внешних)
Даны теги, определить парные и одиночные теги: <h1> </h1>;
;
<head> </head>
Основные теги HTML:
<!DOCTYPE html> — предназначен для указания типа текущего документа
<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.
<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.
<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
Теги для форматирования текста:
<h1></h1>......<h6></h6>. — теги заголовков, от самого большого к самому маленькому.
<b></b> — жирный текст без придания важности выделенному фрагменту.
<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
<i></i> — выделение текста курсивом без придания важности.
<s></s> — отображает перечёркнутый текст.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<p></p> — контейнер для абзаца.
— переносит текст на другую строку без создания абзаца.
Теги для форматирования текста:
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.
<ol></ol> — нумерованный список.
<ul></ul> — маркированный список.
<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).
Структура HTML
Структура HTML документа состоит из 3-х пар тегов:
<!DOCTYPE html> -ВСЕГДА!
<html> -контейнер, в котором помещается html страница
<head> -контейнер, в котором хранится служебная информация
Заголовок документа
</head>
<body> -видимое содержание страницы
Тело документа
</body>
</html>
Теги <html> </html> являются контейнером для всех остальных, т.е в них помещаются все остальные. Таким образом, ваш документ должен начинаться с тега <html>, а заканчиваться тегом </html>.
Сам документ условно разделен на две части - заголовок документа (теги <head> </head>) и тело документа (теги <body> </body>).
Заголовок документа содержит служебную информацию и не влияет на внешний вид документа. Его задачей является предоставление браузеру пользователя или серверу информации о том, как отобразить ваш документ.
Единственным обязательным элементом заголовка документа являются теги <title> </title>. Они необходимы, чтобы дать документу название, оно отражается в заголовке окна браузера. Например, если написать следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа </title>
</head>
<body>
Тело документа
</body>
</html>
В окне браузера он будет выглядеть так:
Теги, делающие текст заголовками:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Тип сохраняемого файла:
