Презентация по основам HTML
презентация к уроку по информатике и икт (11 класс) на тему
Предварительный просмотр:
Подписи к слайдам:
Основные понятия HTML расшифровывается H yper T ext M arkup L anguage ( в переводе означает Язык Разметки ГиперТекста ). HTML предназначен для создания веб-страниц во всемирной паутине.
Основные понятия Тэги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт. Большая часть HTML тегов состоит из двух частей: открывающий тег <...> закрывающий тег Теги не чувствительны к регистру
Структура HTML документа. Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих тегов: - Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ. < html >… html >
- Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин. < head >… head >Пример:
Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов. Атрибуты тега тела документа < body bgcolor= "…"> - Цвет фона документа, используя значение цвета в виде RRGGBB. < body text= "..."> - Цвет текста документа
Таблица цветов HTML
< H1>.....
- Определяет величину заголовка по их степени важности. .....
- Самый большой заголовок. .....
- Самый маленький заголовок. < b >….. b > - Определяет текст жирным шрифтом. < i >….. i >- Определяет текст наклонным (курсив) шрифтом. < tt >….. tt > - Имитирует стиль печатной машинки. < font color= ”…”>….. font > - Задаёт цвет текста , шестнадцатеричном коде. < font size= "...">….. font >- Задаёт величину шрифта в пределах от “1” до “7”. < big >….. big >- Увеличивает размер текст на условную 1-цу от заданного. < strong >….. strong >- Этот тег, браузер определяет как жирное начертание текста. < em >….. em > - Этот тег, браузер определяет как наклонное (курсив) начертании текста. Атрибуты текст документа
Форматирование текста документа < p >….. p > - Определяет новый параграф текста с предварительным пропуском одной строки. < P ALIGN=”…”> - Выравнивает текст относительно одной из сторон документа. Значения : “ left ”, “ right ”, “ justify , “ center ”. Пример: < p align= " center ">текст p > Текст по центру.
- - Определяет нумерованный список. < LI> - Объекту, заключённому в этот тег присваивается номер. Также применяется атребут : start - Указывает стартовый номер. type - Определяет характер обозначение, буквенный “Ж”, ” ж ”, “ J”, ”j” или цифровой – “10”, “Х”. < ol type="… " start=" число" >... ol > Пример: < ol type="1" start="3">
- морковь < LI> капуста < LI> яблоки < LI> уксус < LI> сахар < LI> соль ol > Результат: 3. морковь 4. капуста 5. яблоки 6. уксус 7. сахар 8. соль
Графические элементы на странице < img src ="name"> Вставляет изображение на страницу. < img src ="name" align="?"> Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom, top, middle. < img src ="name" border="?"> Устанавливает толщину рамки вокруг изображения < img src ="name" vspase ="?"> Устанавливает поля сверху и снизу < img src ="name" hspase ="?"> Устанавливает поля слева и справа.
- Добавляет горизонтальную линию. < hr width="?"> Указывает ширину линии в пикселах или процентах. < hr noshade > Линия без тени. < hr color="?"> Определяет цвет линии.Создание таблиц < table > table > Тег создающий таблицу. < tr > tr > Задает строку в таблице. < td > td > Задает отдельную ячейку в таблице. < th > th > Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом)
Атрибуты таблицы < table border= "#"> Определяет толщину рамки. < table cellspacing= "#"> Определяет расстояние между ячейками < table width= "#"> Устанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах) < table height= "#"> Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах) < td colspan= "#"> Указывает количество столбцов, объединенных в одной ячейке. < td rowspan= "#"> Указывает количество строк, объединенных в одной ячейке. < td width= "#"> Задает ширину ячейки таблицы в пикселях или процентах. < td height= "#"> Задает высоту ячейки таблицы в пикселях или процентах.
Оформление гиперссылок < a href= "Адрес ресурса - URL"> a > - Задаёт переход на другие ресурсы. < a href= "Имя файла "> - Название страницы a > - Задаёт переход на другие страницы сайта. < a href= "Имя файла содержащего информацию" target= " _blank "> - Название страницы a > - Задаёт переход на другую страницу сайта в новом окне.
Атрибуты гиперссылок < atarget= "?"> a > Указывает в каком окне открывать гиперссылку. Параметры: Значение _Blank - Открыть в новом окне _Parent Открыть в текущем окне Цвет текста гиперссылок Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем. Атрибут VLINK - уже посещенные ссылки. Атрибут ALINK - выделяет активную гиперссылку.
Пример: Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта , то предпочтительнее использовать относительный URL ( page.html , catalog / page.html ). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.
HTML-код: < a href= "http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта a > Отображение в браузере: Ссылка на главную страницу сайта HTML-код: < a href= "../ index.html ">Ссылка на главную страницу сайта a > Отображение в браузере: Ссылка на главную страницу сайта
Гиперссылка в пределах html страницы Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы. Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга . Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта. Пример: HTML-код: < a href= "#Начало страницы">Наверх страницы a > В то место, куда надо сделать переход надо вставить: < a name= "Начало страницы"> a > Отображение в браузере: Наверх страницы
Спасибо за внимание! Презентация выполнена преподавателем информатики ГАОУ СПО Калининградской области « Колледж сервиса и туризма» Белоусовой Юлии Викторовной
По теме: методические разработки, презентации и конспекты
Основы HTML. Разработка Web-сайта Шесть уровней ворженности (модуль) 11 класс
Урок с использованием модульной технологии.На мой взгляд, использование модульной технологии позволяет: • повысить мотивацию учащихся в освоении не только знаний, но и ключевых компетенций; • строит...
Презентация "Основы HTML. Разработка Web-сайта"
Презентация предназначена для получения первоначальных сведений о создании Web-сайта и основах HTML....
Способы создания сайтов. Основы HTML
ЦЕЛИ И ЗАДАЧИ УРОКА:Освоить основные этапы построения web - страницОсвоить основные методы создания web - страницИметь представление об особенностях оформления информационных блоков страницыОсво...
Основы HTML
Презентация по теме " Основы HTML"...
Основы HTML
Основы HTML...
Контрольное тестирование. Тест по теме «Основы HTML»
Контрольное тестирование. Тест по теме «Основы HTML»...
Презентация "Основы HTML" - Выборг, 18 апреля 2017 год.
Презентация для предметной сессии для одаренных детей....