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

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

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

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

- Название, оглавление страницы, предназначен для поисковых машин, этот
тег всегда помещается</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>…
- В этот тег помещается информация, которая должна отображаться в окне браузера.
…

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

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

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

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

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

- Определяет нумерованный список.
- Объекту, заключённому в этот тег присваивается номер.
Также применяется атребут:
start - Указывает стартовый номер.
type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.
...
Пример:
морковь
капуста
яблоки
уксус
сахар
соль
Результат:
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-код:
href="../index.html">Ссылка на главную страницу сайтаОтображение в браузере:
Ссылка на главную страницу сайта
Слайд 19
Гиперссылка в пределах html страницы
Иногда необходимо сделать гиперссылку в пределах одной страницы.
Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.
Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга
. Имя должно содержать только буквы и цифры.
Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
Пример:
HTML-код:
Наверх страницы
В то место, куда надо сделать переход надо вставить:
Отображение в браузере:
Наверх страницы
Имя файла: Создание-Web-страниц-на-языке-HTML.pptx
Количество просмотров: 361
Количество скачиваний: 0
Скачать
- Предыдущая
Логические основы компьютера
Следующая -
Устройства ввода-вывода информации
Похожие презентации
ВСЕРОССИЙСКИЙ КОНКУРС ПЕДАГОГИЧЕСКОГО МАСТЕРСТВА "ФОРМУЛА БУДУЩЕГО-2011": ИТОГИ, УРОКИ, ПЕРСПЕКТИВЫ
Символизм и модерн как стилистические направления начала XX века
Саблезубый тигр
Презентация на тему Секрет педагогического счастья
Московский Кремль XVI XVII вв.«Гражданину Минину и князю Пожарскому благодарная Россия» - презентация
Хранители предания в религиях мира
Учет и анализ кредиторской задолженности ООО ЮТК
Основные направления деятельности компании НТА Техно эксперт
Приказки на Граматиката
Бисер
Презентация на тему Точка, прямая, отрезок, луч и угол
Helicobacter pylori
СЛОВАРЬ СТИЛИСТА
Гендина Н.И., доктор пед. наук, профессор КемГУКИ
Weather and clothes
Темы и мотивы лирики А.С.Пушкина
Азбука законов жизни
Остановись, мгновенье!
HR management in Asia
Предмет и метод ТГП
Особенности проектирование общесудовой вентиляции на примере обстановочного судна
Презентация учителя истории школы – интерната №1 Гиоевой Елены Харитоновны
Презентация на тему Влияние солнечной активности на процессы, происходящие на Земле
Свадебная мода 2020 года
Мастер – класс: «Применение информационно- коммуникационных технологий – как один из факторов социальной адаптации учащихся» Го
Офисный интерьер
Финансы и финансовое право
Об итогах социально – экономического развития Берёзовского муниципального района Пермского края за 2010 год и о перспективах разв
(function(d,s){d.getElementById("licnt7D89").src=
"https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)
Обратная связь
Для правообладателей
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V){return {data:{meta:{result:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:w,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:H}},social:I}},item:{result:{id:344267,name:"Создание Web-страниц на языке HTML",category:J,count:K,jpg:"jpg\u002F344267",hits:361,download:a,h1:L,meta:{h1:L,title:"Создание Web-страниц на языке HTML презентация",description:"Создание Web-страниц на языке HTML презентация, доклад, проект, Разное ",keywords:"Создание Web-страниц на языке HTML, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Разное",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Создание Web-страниц на языке HTML, из раздела: Разное.&nbsp; Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EHTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).\u003Cbr\u003EHTML предназначен для создания веб-страниц во всемирной паутине.\u003Cbr\u003E\u003Cbr\u003E \u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EТэги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт.\u003Cbr\u003EБольшая часть HTML тегов состоит из двух частей: \u003Cbr\u003Eоткрывающий тег \u003C...\u003E \u003Cbr\u003E закрывающий тег \u003C\u002F...\u003E\u003Cbr\u003EТеги не чувствительны к регистру\u003Cbr\u003E",file:"Создание-Web-страниц-на-языке-HTML.pptx",texts:["\u003Cp\u003EСоздание \r\nWeb-страниц \r\nна языке HTML\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EHTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).\u003Cbr\u003EHTML предназначен для создания веб-страниц во всемирной паутине.\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EТэги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт.\u003Cbr\u003EБольшая часть HTML тегов состоит из двух частей: \u003Cbr\u003Eоткрывающий тег \u003C...\u003E \u003Cbr\u003E закрывающий тег \u003C\u002F...\u003E\u003Cbr\u003EТеги не чувствительны к регистру\u003Cbr\u003E","\u003Cp\u003EСтруктура HTML документа.\r\n\u003Cbr\u003E\u003Cp\u003EАбсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих тегов:\u003Cbr\u003E\u003CHTML\u003E - Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ. \r\n\u003Chtml\u003E…\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003CHEAD\u003E - Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин. \r\n\u003Chead\u003E…\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003E\u003CTITLE\u003E - Название, оглавление страницы, предназначен для поисковых машин, этот \r\nтег всегда помещается внутри - \u003Chead\u003E\u003Ctitle\u003E…\u003C\u002Ftitle\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003CBODY\u003E - В этот тег помещается информация, которая должна отображаться в окне браузера. \r\n\u003Cbody\u003E…\u003C\u002Fbody\u003E\u003Cbr\u003E","\u003Cp\u003EПример:\u003Cbr\u003E\u003Cp\u003E\u003CHTML\u003E \r\n\u003CHEAD\u003E \r\n\u003CTITLE\u003E Это моя первая страница\u003C\u002FTITLE\u003E \r\n\u003C\u002FHEAD\u003E \r\n\u003CBODY\u003E Привет, мир!\u003C\u002FBODY\u003E\r\n\u003C\u002FHTML\u003E\u003Cbr\u003E","\u003Cp\u003EЧтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов.\u003Cbr\u003EАтрибуты тега тела документа\u003Cbr\u003E\u003Cbody bgcolor=\"…\"\u003E - Цвет фона документа, используя значение цвета в виде RRGGBB.\u003Cbr\u003E\u003Cbody text=\"...\"\u003E - Цвет текста документа\u003Cbr\u003E","\u003Cp\u003EТаблица цветов HTML\u003Cbr\u003E","\u003Cp\u003E\u003CH1\u003E.....\u003CH6\u003E - Определяет величину заголовка по их степени важности. \r\n\u003Ch1\u003E.....\u003C\u002Fh1\u003E - Самый большой заголовок. \r\n\u003Ch6\u003E.....\u003C\u002Fh6\u003E - Самый маленький заголовок.\u003Cbr\u003E\u003Cb\u003E…..\u003C\u002Fb\u003E - Определяет текст жирным шрифтом. \r\n\u003Ci\u003E…..\u003C\u002Fi\u003E- Определяет текст наклонным (курсив) шрифтом. \r\n\u003Ctt\u003E…..\u003C\u002Ftt\u003E- Имитирует стиль печатной машинки. \r\n\u003Cfont color=”…”\u003E…..\u003C\u002Ffont\u003E - Задаёт цвет текста, шестнадцатеричном коде.\r\n\u003Cfont size=\"...\"\u003E…..\u003C\u002Ffont\u003E- Задаёт величину шрифта в пределах от “1” до “7”. \u003Cbr\u003E\u003Cbig\u003E…..\u003C\u002Fbig\u003E- Увеличивает размер текст на условную 1-цу от заданного. \r\n\u003Cstrong\u003E…..\u003C\u002Fstrong\u003E- Этот тег, браузер определяет как жирное начертание текста. \u003Cbr\u003E\u003Cem\u003E…..\u003C\u002Fem\u003E- Этот тег, браузер определяет как наклонное (курсив) начертании текста. \u003Cbr\u003E\u003Cp\u003EАтрибуты текст документа\u003Cbr\u003E","\u003Cp\u003EФорматирование текста документа\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003E…..\u003C\u002Fp\u003E- Определяет новый параграф текста с предварительным пропуском одной строки. \r\n\u003C P ALIGN=”…”\u003E - Выравнивает текст относительно одной из сторон документа. Значения: “left”, “right”, “justify, “ center”. \r\nПример: \u003Cp align=\"center\"\u003Eтекст\u003C\u002Fp\u003E Текст по центру.\u003Cbr\u003E","\u003Cp\u003E\u003COL\u003E - Определяет нумерованный список. \r\n\u003CLI\u003E - Объекту, заключённому в этот тег присваивается номер. \r\nТакже применяется атребут: \r\nstart - Указывает стартовый номер. \r\ntype - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.\u003Cbr\u003E\u003Col type=\"… \" start=\"число\" \u003E...\u003C\u002Fol\u003E\u003Cbr\u003EПример: \r\n\u003Col type=\"1\" start=\"3\"\u003E \r\n\u003CLI\u003Eморковь \r\n\u003CLI\u003Eкапуста \r\n\u003CLI\u003Eяблоки \r\n\u003CLI\u003Eуксус \r\n\u003CLI\u003Eсахар \r\n\u003CLI\u003Eсоль \r\n\u003C\u002Fol\u003E\u003Cbr\u003EРезультат:\u003Cbr\u003E3. морковь\u003Cbr\u003E4. капуста\u003Cbr\u003E5. яблоки\u003Cbr\u003E6. уксус\u003Cbr\u003E7. сахар\u003Cbr\u003E8. соль\u003Cbr\u003E","\u003Cp\u003EГрафические элементы на странице\u003Cbr\u003E\u003Cp\u003E \u003Cimg src=\"name\"\u003E Вставляет изображение на страницу.\u003Cbr\u003E\u003Cimg src=\"name\" align=\"?\"\u003E Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom, top, middle.\u003Cbr\u003E\u003Cimg src=\"name\" border=\"?\"\u003EУстанавливает толщину рамки вокруг изображения\u003Cbr\u003E\u003Cimg src=\"name\" vspase=\"?\"\u003EУстанавливает поля сверху и снизу\u003Cbr\u003E\u003Cimg src=\"name\" hspase=\"?\"\u003EУстанавливает поля слева и справа.\u003Cbr\u003E\u003Chr\u003E - Добавляет горизонтальную линию.\u003Cbr\u003E \u003Chr width=\"?\"\u003E Указывает ширину линии в пикселах или процентах.\u003Cbr\u003E\u003Chr noshade\u003EЛиния без тени. \u003Cbr\u003E\u003Chr color=\"?\"\u003E Определяет цвет линии.\u003Cbr\u003E","\u003Cp\u003EСоздание таблиц\u003Cbr\u003E\u003Cp\u003E \u003Ctable\u003E\u003C\u002Ftable\u003E Тег создающий таблицу.\u003Cbr\u003E\u003Ctr\u003E\u003C\u002Ftr\u003E Задает строку в таблице. \u003Cbr\u003E\u003Ctd\u003E\u003C\u002Ftd\u003E Задает отдельную ячейку в таблице.\u003Cbr\u003E\u003Cth\u003E\u003C\u002Fth\u003E Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом)\u003Cbr\u003E","\u003Cp\u003EАтрибуты таблицы\u003Cbr\u003E\u003Cp\u003E \u003Ctable border=\"#\"\u003E Определяет толщину рамки.\u003Cbr\u003E\u003Ctable cellspacing=\"#\"\u003E Определяет расстояние между ячейками\u003Cbr\u003E\u003Ctable width=\"#\"\u003EУстанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах)\u003Cbr\u003E\u003Ctable height=\"#\"\u003EУстанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах)\u003Cbr\u003E\u003Ctd colspan=\"#\"\u003EУказывает количество столбцов, объединенных в одной ячейке.\u003Cbr\u003E\u003Ctd rowspan=\"#\"\u003E Указывает количество строк, объединенных в одной ячейке. \u003Cbr\u003E\u003Ctd width=\"#\"\u003E Задает ширину ячейки таблицы в пикселях или процентах.\u003Cbr\u003E\u003Ctd height=\"#\"\u003EЗадает высоту ячейки таблицы в пикселях или процентах.\u003Cbr\u003E","\u003Cp\u003EОформление гиперссылок\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"Адрес ресурса - URL\"\u003E\u003C\u002Fa\u003E - Задаёт переход на другие ресурсы.\u003Cbr\u003E\u003Ca href=\"Имя файла\"\u003E - Название страницы\u003C\u002Fa\u003E - Задаёт переход на другие страницы сайта.\u003Cbr\u003E\u003Ca href=\"Имя файла содержащего информацию\" target=\"_blank\"\u003E - Название страницы\u003C\u002Fa\u003E - Задаёт переход на другую страницу сайта в новом окне.\u003Cbr\u003E","\u003Cp\u003EАтрибуты гиперссылок\u003Cbr\u003E\u003Cp\u003E\u003Catarget=\"?\"\u003E\u003C\u002Fa\u003E Указывает в каком окне открывать гиперссылку.\r\n \u003Cbr\u003E\u003Cp\u003EЦвет текста гиперссылок\u003Cbr\u003EАтрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.\u003Cbr\u003EАтрибут VLINK - уже посещенные ссылки.\u003Cbr\u003EАтрибут ALINK - выделяет активную гиперссылку.\u003Cbr\u003E","\u003Cp\u003EПример:\u003Cbr\u003E\u003Cp\u003EГиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http:\u002F\u002Fwww.site.com\u002Fpage.html). \u003Cbr\u003EЕсли создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog\u002Fpage.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.\u003Cbr\u003E","\u003Cp\u003EHTML-код:\u003Cbr\u003E\u003Ca href=\"http:\u002F\u002Fon-line-teaching.com\u002Findex.html\"\u003EСсылка на главную страницу сайта\u003C\u002Fa\u003E\u003Cbr\u003EОтображение в браузере:\u003Cbr\u003EСсылка на главную страницу сайта\u003Cbr\u003EHTML-код:\u003Cbr\u003E\u003Ca href=\"..\u002Findex.html\"\u003EСсылка на главную страницу сайта\u003C\u002Fa\u003EОтображение в браузере:\u003Cbr\u003EСсылка на главную страницу сайта\u003Cbr\u003E","\u003Cp\u003EГиперссылка в пределах html страницы\u003Cbr\u003EИногда необходимо сделать гиперссылку в пределах одной страницы. Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.\u003Cbr\u003EЧтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга \u003CA\u003E. Имя должно содержать только буквы и цифры.\u003Cbr\u003EТаким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.\u003Cbr\u003EПример:\u003Cbr\u003EHTML-код:\u003Cbr\u003E\u003Ca href=\"#Начало страницы\"\u003EНаверх страницы\u003C\u002Fa\u003E\u003Cbr\u003EВ то место, куда надо сделать переход надо вставить:\u003Cbr\u003E\u003Ca name=\"Начало страницы\"\u003E\u003C\u002Fa\u003E\u003Cbr\u003EОтображение в браузере:\u003Cbr\u003EНаверх страницы\u003Cbr\u003E","\u003Cp\u003EСпасибо за внимание!\u003Cbr\u003E\u003Cp\u003EПрезентация выполнена\u003Cbr\u003E преподавателем информатики \u003Cbr\u003EГАОУ СПО Калининградской области \u003Cbr\u003E«Колледж сервиса и туризма»\u003Cbr\u003EБелоусовой Юлии Викторовной\u003Cbr\u003E"],href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsozdanie-webstranic-na-yazyke-html",href_category:"\u002Fprezentacii-na-razlichnye-temy",date:1612742375,related:[{id:427870,name:"ВСЕРОССИЙСКИЙ КОНКУРС ПЕДАГОГИЧЕСКОГО МАСТЕРСТВА \"ФОРМУЛА БУДУЩЕГО-2011\": ИТОГИ, УРОКИ, ПЕРСПЕКТИВЫ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvserossijskij-konkurs-pedagogicheskogo-masterstva-formula-budushhego2011-itogi--uroki--perspektivy",jpg:"jpg\u002F427870"},{id:322095,name:"Символизм и модерн как стилистические направления начала XX века",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsimvolizm-i-modern-kak-stilisticheskie-napravleniya-nachala-xx-veka",jpg:"jpg\u002F322095"},{id:460733,name:"Саблезубый тигр",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsablezubyj-tigr",jpg:"jpg\u002F460733"},{id:294656,name:"Презентация на тему Секрет педагогического счастья ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-sekret-pedagogicheskogo-schastya",jpg:"jpg\u002F294656"},{id:475566,name:"Московский Кремль XVI XVII вв.«Гражданину Минину и князю Пожарскому благодарная Россия» - презентация",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmoskovskij-kreml-xvi-xvii-vvgrazhdaninu-mininu-i-knyazyu-pozharskomu-blagodarnaya-rossiya--prezentaciya",jpg:"jpg\u002F475566"},{id:878725,name:"Хранители предания в религиях мира",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fhraniteli-predaniya-v-religiyah-mira-1",jpg:"jpg\u002F878725"},{id:1048111,name:"Учет и анализ кредиторской задолженности ООО ЮТК",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fuchet-i-analiz-kreditorskoy-zadolzhennosti-ooo",jpg:"jpg\u002F1048111"},{id:1130753,name:"Основные направления деятельности компании НТА Техно эксперт",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovnye-napravleniya-deyatelnosti-kompanii-nta-tehno",jpg:"jpg\u002F1130753"},{id:388594,name:"Приказки на Граматиката",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprikazki-na-gramatikata",jpg:"jpg\u002F388594"},{id:370319,name:"Бисер",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbiser",jpg:"jpg\u002F370319"},{id:277792,name:"Презентация на тему Точка, прямая, отрезок, луч и угол ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-tochka--pryamaya--otrezok--luch-i-ugol-1",jpg:"jpg\u002F277792"},{id:456613,name:"Helicobacter pylori",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fhelicobacter-pylori",jpg:"jpg\u002F456613"},{id:377986,name:"СЛОВАРЬ СТИЛИСТА",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fslovar-stilista",jpg:"jpg\u002F377986"},{id:467849,name:"Гендина Н.И., доктор пед. наук, профессор КемГУКИ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fgendina-ni--doktor-ped-nauk--professor-kemguki-2",jpg:"jpg\u002F467849"},{id:305071,name:"Weather and clothes",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fweather-and-clothes-1",jpg:"jpg\u002F305071"},{id:317366,name:"Темы и мотивы лирики А.С.Пушкина",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftemy-i-motivy-liriki-aspushkina",jpg:"jpg\u002F317366"},{id:359225,name:"Азбука законов жизни",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fazbuka-zakonov-zhizni",jpg:"jpg\u002F359225"},{id:355633,name:"Остановись, мгновенье!",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fostanovis--mgnovene",jpg:"jpg\u002F355633"},{id:428997,name:"HR management in Asia",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fhr-management-in-asia",jpg:"jpg\u002F428997"},{id:867822,name:"Предмет и метод ТГП",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpredmet-i-metod-tgp",jpg:"jpg\u002F867822"},{id:856878,name:"Особенности проектирование общесудовой вентиляции на примере обстановочного судна",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosobennosti-proektirovanie-obshchesudovoy-ventilyatsii-na-primere",jpg:"jpg\u002F856878"},{id:447080,name:"Презентация учителя истории школы – интерната №1 Гиоевой Елены Харитоновны",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-uchitelya-istorii-shkoly--internata-1-gioevoj-eleny-xaritonovny",jpg:"jpg\u002F447080"},{id:296412,name:"Презентация на тему Влияние солнечной активности на процессы, происходящие на Земле ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-vliyanie-solnechnoj-aktivnosti-na-processy--proisxodyashhie-na-zemle",jpg:"jpg\u002F296412"},{id:915670,name:"Свадебная мода 2020 года",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsvadebnaya-moda-2020-goda",jpg:"jpg\u002F915670"},{id:402767,name:"Мастер – класс: «Применение информационно- коммуникационных технологий – как один из факторов социальной адаптации учащихся» Го",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-1166",jpg:"jpg\u002F402767"},{id:1077980,name:"Офисный интерьер",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fofisnyy-interer",jpg:"jpg\u002F1077980"},{id:871972,name:"Финансы и финансовое право",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ffinansy-i-finansovoe-pravo",jpg:"jpg\u002F871972"},{id:461522,name:"Об итогах социально – экономического развития Берёзовского муниципального района Пермского края за 2010 год и о перспективах разв",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-4127",jpg:"jpg\u002F461522"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fustrojstva-vvodavyvoda-informacii",next_name:"Устройства ввода-вывода информации",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Flogicheskie-osnovy-kompyutera",prev_name:"Логические основы компьютера"}}},categories:{result:[{id:M,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:2,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:"Информатика",pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:15,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:K,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:J,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:M,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:N,SITE_HOST:"slaidy.com",SITE_LANG:O,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:N,short_name:b,description:b,lang:O,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:U,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:V,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:V,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:w,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:H}},social:I,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,"#000000","#ffffff","Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg",32,"Slaidy.com",720,480,"6LfWmAYrAAAAAFyidHOK1ZHtYSECWR5CvAmygt5c","3190226","\u003C!-- Yandex.RTB R-A-1990700-7 --\u003E\r\n\u003Cscript\u003E\r\nwindow.yaContextCb.push(() =\u003E {\r\n Ya.Context.AdvManager.render({\r\n \"blockId\": \"R-A-1990700-7\",\r\n \"type\": \"fullscreen\",\r\n \"platform\": \"touch\"\r\n })\r\n})\r\n\u003C\u002Fscript\u003E","[e-mail]","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Разное",20,"Создание Web-страниц на языке HTML ",1,"Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) (Значение параметра может быть в пикселях или процентах)

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

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

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

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

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