- Пошаговое создание сайта в HTML
Содержание
- 3. ТЕГИ HTML
- 4. ПРИМЕРЫ ТЕГОВ
- 5. ПРИМЕРЫ ПАРНЫХ ТЕГОВ
- 6. ПРИМЕРЫ ОДИНОЧНЫХ ТЕГОВ
- 7. АТРИБУТЫ ТЕГОВ это дополнительные ключевые слова, отделенные от содержимого тэга и друг от друга пробелами значение
- 8. ПРИМЕР ТЕГА С АТРИБУТАМИ
- 9. СТРУКТУРА HTML -ДОКУМЕНТА
- 10. Создайте папку, назовите её своим именем и фамилией. Откройте Notepad++ и введите в новый документ следующий
- 11. Выберите в меню «Синтаксис» ? «Н» ? «HTML»
- 12. Смените кодировку на UTF-8. Если не поменять кодировку, то при просмотре страницы Вы увидите …
- 13. вместо …
- 14. В ГОЛОВЕ МОЕЙ ОПИЛКИ…ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ Заголовок документа содержит служебную информацию и не влияет на внешний
- 15. ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : TITLE Заголовок документа Тело документа
- 16. Теоретически название документа может иметь неограниченную длину, на практике рекомендуется ограничиться 60 символами. Не давайте своим
- 17. Одиночный тег служит для указания полного URL-адреса документа. Вы сохранили какую-нибудь html-страницу себе на компьютер, с
- 18. Структура html Тело документа ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : BASE У этого тега один атрибут href, значением
- 19. Одиночный тег необходим для подключения внешних файлов. Например, если вы будете использовать каскадную таблицу стилей, то
- 20. Структура html Тело документа ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : LINK
- 21. Информация в этом теге не имеет никакого отношения к HTML, однако ее использование очень удобно для
- 22. ТЕГ Менее значим для ранжирования, однако, иногда поисковики берут описание, которое выводят под ссылкой на сайт,
- 23. ТЕГ Многие поисковики игнорируют этот тег, однако заполнить его можно и продвижению это не повредит. Главное
- 25. В ЗДОРОВОМ ТЕЛЕ…ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ Обязательных параметров у тега нет, да и применение необязательных параметров тоже
- 26. ФОРМАТИРУЕМ ТЕКСТ Атрибуты, указанные в теге распространяют свое действие на весь документ.
- 27. leftmargin - определяет отступ от левого края окна браузера до контента страницы. rightmargin - определяет отступ
- 28. Тег body в html Просто текст Ссылка на страницу Google Ссылка на страницу Яндекс
- 30. ФОРМАТИРОВАНИЕ ТЕКСТА
- 31. ТЕГИ, ДЕЛАЮЩИЕ ТЕКСТ ЗАГОЛОВКАМИ Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с
- 32. Так выглядит заголовок первого уровня Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
- 34. ТЕГИ РАЗДЕЛЕНИЯ НА АБЗАЦЫ И ПЕРЕНОСА СТРОКИ Тег - тег принудительного перевода строки. Текст, после этого
- 35. Форматирование html Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен
- 37. ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ КУРСИВОМ Эти теги выделяют текст курсивом, но делают они это по разным причинам.
- 38. Этот текст в тегах cite Этот текст в тегах dfn Этот текст в тегах em Этот
- 39. ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ ПОЛУЖИРНЫМ ШРИФТОМ Оба используются для выделения важных фрагментов текста, но предпочтительнее использовать первый.
- 41. ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ ПОДЧЕРКИВАНИЕМ Оба используются для подчеркивания важных фрагментов текста, но предпочтительнее использовать первый. Просто
- 43. ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ МОНОШИРИННЫМ ШРИФТОМ Выводят текст моноширинным шрифтом, но предпочтительнее использовать первый. Просто текст Этот
- 45. ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ В ВЕРХНЕМ И НИЖНЕМ ИНДЕКСАХ Теги выводят текст ниже уровня строки шрифтом меньшего
- 47. ТЕГ FONT И ЕГО ПАРАМЕТРЫ Теги указывают параметры шрифта текста: face - название шрифта. Названий шрифтов
- 48. В HTML существуют два способа задания цвета: по имени (156) указанием шестнадцатеричного кода цвета. Итак, поменяем
- 49. Это простой текст. Этот текст красный, размера 5. Этот текст синий, размера 2.
- 50. СОВМЕСТНОЕ ИСПОЛЬЗОВАНИЕ ТЕГОВ Выделим слово "текст" красным цветом: Текст Теперь добавим теги курсива (открывающий - слева,
- 51. Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Так неправильно! Так правильно
- 52. Теги указывают на то, что текст является аббревиатурой. По умолчанию текст подчеркивается пунктиром, а при наведении
- 53. Теги применяются для указания адреса. Отображается курсивом с новой строки. Пишите по адресу: Ленинский пр., д.2
- 54. Теги выводят текст большего размера, чем остальная часть текста. Теги выводят текст меньшего размера, чем остальная
- 55. Тег рисует горизонтальную линию, отделенную сверху и снизу пустыми строками. У этого тега есть следующие параметры:
- 56. Линия без параметров Линия по центру Линия слева
- 57. СПИСКИ HTML использует три вида списков: упорядоченные (нумерованные) и неупорядоченные (маркированные) и элементы списков заключаются между
- 58. ГИПЕРССЫЛКИ
- 59. Ссылки в html Посетите поисковую систему Яндекс
- 60. При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы. В нашем
- 61. поисковую систему Яндекс По умолчанию ссылки загружаются в то же окно, но если указать параметр target="_blank",
- 62. Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы. Для таких переходов следует создать
- 63. У ссылок есть параметр title, в качестве значения которого можно указать текст, который будет выводиться в
- 64. ЗАДАНИЕ Сделайте все обязательные настройки для создания страницы в Notepad++ Создайте страницу с названием «index.html» Вставьте
- 65. Сделайте фон страницы – ivory, Отступ слева - 100 пикселей справа - 50 пикселей сверху -
- 66. Имена авторов моноширинным текстом, серого цвета с размером 4. Текст «…так начинается …совсем другая история…» моноширинный,
- 67. ИЗОБРАЖЕНИЯ
- 68. Изображения на web-страницах могут использоваться двумя способами: в качестве фона в качестве самостоятельного изображения. Рекомендуется использование
- 69. ФОНОВЫЕ ИЗОБРАЖЕНИЯ Фоновое изображение заполняет собой все пространство элемента, для которого оно задано. Указав в теге
- 70. Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor. Это связано с тем, что у
- 71. ВСТРАИВАНИЕ ИЗОБРАЖЕНИЙ Для размещения на странице изображений используется тег , имеющий единственный обязательный параметр src, определяющий
- 72. Тег img Остальное содержимое документа Остальное содержимое документа
- 73. Для выравнивания используйте "left", "right"> Картинка слева, а текст обтекает ее справа и этот текст может
- 74. Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку.
- 75. Выравнивание середины изображения по базовой линии текущей строки. Выравнивание нижней границы изображения по базовой линии текущей
- 76. Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег с параметром clear,
- 77. РАЗМЕРЫ ИЗОБРАЖЕНИЙ Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам
- 79. Остальное содержимое документа теперь не прилипает к изображению. Вы, наверно, обратили внимание, что текст очень близко
- 80. АЛЬТЕРНАТИВНЫЙ ТЕКСТ Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик.
- 81. ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ ССЫЛКИ Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера . В примере
- 82. Добавьте в тег атрибут border="0", значением которого является толщина рамочки.
- 83. Вставьте фоновую картинку, отрегулируйте отступы от краев страницы Все имена авторов сделайте гиперссылками на соответствующие страницы
- 84. ТАБЛИЦЫ
- 85. Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Любая таблица представляет
- 86. Рассмотрим нашу таблицу с точки зрения HTML: сама таблица задается с помощью тегов , у таблицы
- 87. ПАРАМЕТРЫ HTML ТАБЛИЦ: ОТСТУП, ШИРИНА, ЦВЕТ ФОНА, РАМКА width - задает ширину таблицы (в пикселах или
- 88. Наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив
- 89. Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0", то границы примут привычный вид.
- 90. За границы отвечают два параметра: frame - задает вид рамки вокруг таблицы и может принимать следующие
- 92. Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td)
- 93. Название таблицы 1 2 3 11 Текст во всех ячейках этой строки центрирован по центру как
- 94. 21 Здесь текст прижат к левому краю по горизонтали и книзу - по вертикали 22 23
- 96. 21 Здесь текст прижат к левому краю по горизонтали и книзу - по вертикали Эти же
- 97. к ячейкам можно применять еще два параметра: width - задает ширину столбца (в пикселах или в
- 98. РАБОТА С ТАБЛИЦАМИ СЛОЖНОЙ СТРУКТУРЫ Самым распространенным применением таблиц сложных структур является разметка web-страницы.
- 99. Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и
- 100. Нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи
- 101. шапка сайта меню контент низ сайта
- 102. Первая строка шапка сайта
- 103. Вторая строка меню меню меню меню меню меню новости контент
- 104. Две строки и два столбца. Но первый столбец первой строки объединяет две строки. Для такого случая
- 105. меню шапка контент
- 107. Первая строка шапка меню Вторая строка контент Третья строка низ сайта
- 108. ВЛОЖЕННЫЕ ТАБЛИЦЫ шапка меню контент низ сайта
- 109. Поместим в готовую таблицу еще одну таблицу про цветы
- 110. Код этой таблицы простой - три строки и два столбца Здесь текст о ромашках Здесь текст
- 111. Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код нашей разметки. Теперь
- 112. Создаем таблицу 6 на В третью и пятую строку вставим фоновое изображение (объединяем их) В четвертую
- 117. МЕНЯЕМ ФОН HTML-СТРАНИЦЫ И ЦВЕТ ТЕКСТА добавим в тег атрибуты bgcolor="blue" text="yellow". bgcolor - атрибут, отвечающий
- 118. В HTML существуют два способа задания цвета: по имени (156) указанием шестнадцатеричного кода цвета. Итак, поменяем
- 119. Моя первая страница Это заголовок первого уровня Это простой текст. Этот выделен полужирным начертанием. А этот
- 122. Скачать презентацию
ТЕГИ HTML
ТЕГИ HTML
ПРИМЕРЫ ТЕГОВ
<br><Body> <br></A> <br><TABLE> <br><IMG> <br></Center> <br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide5" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 5</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-4.jpg" 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/1307119/slide-4.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1307119/slide-4.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1307119/slide-4.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-4.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>ПРИМЕРЫ ПАРНЫХ ТЕГОВ<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 6</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-5.jpg" 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/1307119/slide-5.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1307119/slide-5.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1307119/slide-5.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-5.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>ПРИМЕРЫ ОДИНОЧНЫХ ТЕГОВ<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 7</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-6.jpg" 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/1307119/slide-6.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1307119/slide-6.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1307119/slide-6.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-6.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>АТРИБУТЫ ТЕГОВ<br><p>это дополнительные ключевые слова, отделенные от содержимого тэга и друг</div></h2><div class="slides-content">от друга пробелами <br>значение отделяется от атрибута знаком = <br>значение атрибута должно быть в кавычках, но иногда их можно не писать <br>Закрывающие теги никогда не имеют атрибутов! <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 8</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-7.jpg" 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/1307119/slide-7.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1307119/slide-7.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1307119/slide-7.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-7.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>ПРИМЕР ТЕГА С АТРИБУТАМИ<br><p><BODY BGCOLOR=“#000000” TEXT=“#FFFFFF” BACKGROUND=“RAIN.JPG”> <br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 9</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-8.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="СТРУКТУРА HTML -ДОКУМЕНТА" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1307119/slide-8.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1307119/slide-8.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1307119/slide-8.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-8.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>СТРУКТУРА HTML -ДОКУМЕНТА<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-9.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создайте папку, назовите её своим именем и фамилией. Откройте Notepad++ и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1307119/slide-9.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1307119/slide-9.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1307119/slide-9.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1307119/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Создайте папку, назовите её своим именем и фамилией.<br>Откройте Notepad++ и введите</div></h2><div class="slides-content">в новый документ следующий код: <br><p><HTML> <br><HEAD> <br><TITLE> Моя первая страничка
Привет всем! Смотрите - это моя первая Web- страничка!
ПРИМЕРЫ ТЕГОВ
Привет всем! Смотрите - это моя первая Web- страничка!