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

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

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

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

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

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

- В этот тег помещается информация, которая должна отображаться в окне браузера. …

Пример:

Привет, мир!

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

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

.....

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

.....

.....

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

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

…..

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

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

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

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

Вставляет изображение на страницу. Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom, top, middle. Устанавливает толщину рамки вокруг изображения Устанавливает поля сверху и снизу Устанавливает поля слева и справа.

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

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

Указывает количество столбцов, объединенных в одной ячейке.

Указывает количество строк, объединенных в одной ячейке.

Задает ширину ячейки таблицы в пикселях или процентах.

Задает высоту ячейки таблицы в пикселях или процентах. Слайд 15 Оформление гиперссылок - Задаёт переход на другие ресурсы. - Название страницы - Задаёт переход на другие страницы сайта. - Название страницы - Задаёт переход на другую страницу сайта в новом окне. Слайд 16 Атрибуты гиперссылок Указывает в каком окне открывать гиперссылку. Цвет текста гиперссылок Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем. Атрибут VLINK - уже посещенные ссылки. Атрибут ALINK - выделяет активную гиперссылку. Слайд 17 Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы. Слайд 18 HTML-код: Ссылка на главную страницу сайта Отображение в браузере: Ссылка на главную страницу сайта HTML-код: Ссылка на главную страницу сайтаОтображение в браузере: Ссылка на главную страницу сайта Слайд 19 Гиперссылка в пределах html страницы Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы. Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга . Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта. Пример: HTML-код: Наверх страницы В то место, куда надо сделать переход надо вставить: Отображение в браузере: Наверх страницы Слайд 20 Спасибо за внимание! Презентация выполнена преподавателем информатики ГАОУ СПО Калининградской области «Колледж сервиса и туризма» Белоусовой Юлии Викторовной Список похожих презентаций HTML-создание Web-страниц Web – сайт состоит из компьютерных Web – страниц, объединённых гиперссылками. Создание Web – страниц реализуется с помощью языка гипертекстовой разметки ... Вычислительная техника и ее влияние на развитие науки России Студенческая научно-практическая конференция проводится в соответствии с: - Законом Российской Федерации «Об образовании» (в редакции ФЗ от 13.01.1996 ... Вова Бякин и Федя Кряков на уроке информатики В грязной обуви, одежде С пыльным ранцем на спине Вова Бякин, как и прежде, На урок спешит ко мне. Как всегда, на перемене Пообедать не успев, С бутербродом, ... Влияние социальных сетей Интернет на подростков Цель исследования: рассмотреть влияние социальных сетей на подростков Задачи исследования: 1. Выявить какие проблемы связаны с использованием Интернета ... Влияние компьютерных игр на развитие подростка Цель работы -. анализ положительных и негативных сторон влияния компьютера и компьютерных игр на развитие подростков. Современные компьютеры повсюду! ... Влияние компьютерных игр на здоровье детей Введение. Нации и народы, дети которых продолжают играть в традиционные, освященные вековой традицией игры, будут прогрессивно отставать в своем развитии, ... Влияние компьютера на психику человека ПРОБЛЕМНЫЙ ВОПРОС. Как влияет компьютер на психику человека, и как совместить здоровый образ жизни и работу на компьютере? ЦЕЛЬ РАБОТЫ: Выявление ... Диалоги средствами HTML и JavaScript 1.    Кликни меня  . Создаем событие выполняемое при загрузке страницы. Связываем с этим событием дествие. 2. Создаем событие выполняемое при щелчке ... Анализ отклика на случайное воздействие в MSC Раздел 14. Анализ отклика на случайное воздействие. ТИПЫ ДИНАМИЧЕСКИХ ПРОЦЕССОВ………………………………… 14 - 4 АНАЛИЗ ОТКЛИКА НА СЛУЧАЙНОЕ ВОЗДЕЙСТВИЕ..……...…….. ... Алгоритмы на примере среды программирования «Паркетчик» Строка меню «Паркетчик». Основные команды паркетчика. Пример:. Программа { положить(к); Шаг вправо; положить(к); Шаг вправо; положить(к); }. Команды ... Алгоритмы на графах: определение наличия циклов в графе Домашнее задание. Какое максимальное количество рёбер может быть в ориентированном ациклическом графе с n вершинами? Может ли быть так, что правильным ... Активизация познавательной активности учащихся на уроках информатики Введение Сегодня можно сказать, что реальность намеченных в школе преобразований во многом зависит от реальности широкого применения информационно-коммуникативных ... Автоматизация решения задач ассистента отдела кредитного анализа фирмы ООО «Элемент Лизинг» на базе MS Access Организационная структура предприятия. Организационная структура отдела кредитного анализа. Информационная модель. Информационная модель (продолжение). ... Графические задачи на циклы в Паскале формирование и развитие умений и навыков применения циклических конструкций, графических возможностей языка Pascal, составление программ на языке ... Анимация в презентации на примере физических явлений Цели урока:. Повышение интереса к предмету Информатика; Научится создавать анимации встроенную в презентацию; Воспитание информационной культуры учащихся, ... Графическое решение уравнений на Visual Basic Автор презентации «Графическое решение уравнений» Помаскин Юрий Иванович - учитель информатики МБОУ СОШ№5 г. Кимовска Тульской области. Презентация ... Анимация на VBA Автор презентации «Анимация на VB6» Помаскин Юрий Иванович - учитель информатики МБОУ СОШ№5 г. Кимовска Тульской области. Презентация сделана как ... HTML мультимедиа Вставка комментария и изображения. Вставка изображения формата .gif. Вставка звукового файла. Вставка видеоролика. Вставка повторяющегося видеоролика. ... Введение в HTML Задачи урока. Сформировать представление о языке HTML Познакомиться с понятиями: тег, верстка, разметка. Cделать пробную страницу на языке HTML. Что ... Влияние компьютера на человека Головная боль Утомляемость Резь в глазах. Расстройство памяти. Нарушение сна Выпадение волос Покраснение кожи Аллергия Боли в животе Боли в пояснице ... Конспекты Двумерные массивы на языке Basic Двумерные массивы на языке Basic. . Тип урока:. урок изучения нового материала. Технология:. личностно-ориентированная. Цели урока:. . ... Линейное программирование на языке TurboPascal Интегрированный урок информатика и экология 7 классе. Тема урока : Линейное программирование на языке TurboPascal. Цель:.  . Сформировать навыки ... Графические процедуры на языке Delphi 10 класс. «Графические процедуры на языке Delphi». . Цели:. организовать деятельность учащихся изучению и закреплению знаний и способов действий ... Знакомство с растровым графическим редактором Paint. Создание, редактирование и преобразование изображения МОУ «Средняя общеобразовательная школа №20 с углубленным изучением отдельных предметов» города Бийска Алтайского края. Учитель информатики: Антипов ... Графика на языке программирования АВС Pascal ПЛАН-КОНСПЕКТ УРОКА. ТЕМА: «. Графика на языке программирования АВС. Pascal. ». Тип урока:. получение. новых знаний. Технология:. системно-деятельностный ... Использование переменных. Операции над переменными различных типов в языке программирования КОНСПЕКТ УРОКА ПО ИНФОРМАТИКЕ В 8 КЛАССЕ. Тема урока:. Решение задач ЕГЭ по информатике по теме «Использование переменных. Операции над переменными ... Ветвление на языке Паскаль Урок по теме «Ветвление на языке Паскаль». Цель: Продолжить формирование навыков решения основных типов задач по информатике в форме тестирования. ... Знакомство с языком разметки гипертекстовых документов HTML МОУ СОШ №20 г.Минеральные Воды. Урок по информатике. . в 9 классе по теме:. «Знакомство с языком разметки гипертекстовых документов. HTML. ... Графика на языке BASIC Учитель 2 квалификационной категории. . Шамсутдинова Рамиля Ильгизовна. МАОУ «Базарно-Матакская СОШ». Тема: «Графика на языке BASIC. ». Цели:. ... Microsoft Excel Создание листа Проверочная работа по теме:. . «Microsoft. Excel. Создание листа». ВАРИАНТ 1. Задание 1. Создайте электронную таблицу следующего содержания. ... Советы как сделать хороший доклад презентации или проекта Постарайтесь вовлечь аудиторию в рассказ, настройте взаимодействие с аудиторией с помощью наводящих вопросов, игровой части, не бойтесь пошутить и искренне улыбнуться (где это уместно). Старайтесь объяснять слайд своими словами, добавлять дополнительные интересные факты, не нужно просто читать информацию со слайдов, ее аудитория может прочитать и сама. Не нужно перегружать слайды Вашего проекта текстовыми блоками, больше иллюстраций и минимум текста позволят лучше донести информацию и привлечь внимание. На слайде должна быть только ключевая информация, остальное лучше рассказать слушателям устно. Текст должен быть хорошо читаемым, иначе аудитория не сможет увидеть подаваемую информацию, будет сильно отвлекаться от рассказа, пытаясь хоть что-то разобрать, или вовсе утратит весь интерес. Для этого нужно правильно подобрать шрифт, учитывая, где и как будет происходить трансляция презентации, а также правильно подобрать сочетание фона и текста. Важно провести репетицию Вашего доклада, продумать, как Вы поздороваетесь с аудиторией, что скажете первым, как закончите презентацию. Все приходит с опытом. Правильно подберите наряд, т.к. одежда докладчика также играет большую роль в восприятии его выступления. Старайтесь говорить уверенно, плавно и связно. Старайтесь получить удовольствие от выступления, тогда Вы сможете быть более непринужденным и будете меньше волноваться. Информация о презентации Ваша оценка: Оцените презентацию по шкале от 1 до 5 баллов Дата добавления:23 октября 2018 Категория:Информатика Классы: 10 класс 11 класс Содержит:20 слайд(ов) Поделись с друзьями: Скачать презентацию Презентации из категории Создание кнопочных форм в Microsoft Access Архитектура микроконтроллера 8051 Табличная форма представления информации Ты, я и информатика Поисковые системы Интернета Обмен информацией в микропроцессорной системе Электронные таблицы Точки доступа Wi-Fi Визуализация информации в текстовых документах Создание текстового документа Смотреть советы по подготовке презентации