Презентация, доклад по HTML Часть2

Содержание

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

Слайд 1Работа с HTML тегами и атрибутами
Сейчас мы с вами займемся изучением

основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.
Работа с HTML тегами и атрибутамиСейчас мы с вами займемся изучением основных тегов. Начнем с того, какие

Слайд 2Блок . Структура простейшей страницы
Страница сайта - это обычный текстовый файл с

расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег , который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег  для служебного содержимого страницы и тег  - для основного текста, который и виден на экране браузера.
Блок . Структура простейшей страницыСтраница сайта - это обычный текстовый файл с расширением .html. Внутри этого файла и хранится

Слайд 3Блок . Структура простейшей страницы
В служебное содержимое, которое располагается внутри тега , входит

много различных вещей, но пока нам нужны только две из них. Это тег , задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8).<br>Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - <!DOCTYPE html>.<br> </div> <div class="image"> <a href="/img/thumbs/ca31e1af3cbd5b0f271bdc2fe3b92e14-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Блок . Структура простейшей страницыВ служебное содержимое, которое располагается внутри тега , входит много различных вещей, но пока нам нужны только две из них. Это тег , задающий название страницы, которое будет видно во вкладке браузера, и тег , который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8).Кроме того, перед тегом  обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - ."><img src="/img/thumbs/ca31e1af3cbd5b0f271bdc2fe3b92e14-800x.jpg" title="Презентация по HTML Часть2 Блок . Структура простейшей страницыВ служебное содержимое, которое располагается внутри тега , входит" alt="Блок . Структура простейшей страницыВ служебное содержимое, которое располагается внутри тега , входит много различных вещей, но пока нам"></a> </div> <hr> </div> <div class="descrip" id="slide4"> <h2><a href="/img/thumbs/67caf2cddaa99d5ca294f6f92b991f84-800x.jpg" target="_blank">Слайд 4</a>Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример</h2> <div class="text"> в браузере - скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим - посмотрите видео под примером): <br><p><!DOCTYPE html><br><html><br> <head><br> <meta charset="utf-8"><br> <title>Это заголовок тайтл


Это основное содержимое страницы.


Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере - скопируйте его в

Слайд 5Блок . Абзацы
Одним из основных элементов страницы являются абзацы. Их можно сравнить с

абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Блок . АбзацыОдним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац

Слайд 6Блок . Заголовки h1, h2, h3, h4, h5, h6
Кроме абзацев важное значение

на странице имеют заголовки. Их также можно сравнить с заголовками из книги - каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.
Заголовки создаются с помощью тегов 

. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 - название блоков страницы, в h3 - название подблоков и так далее.
Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже).
Блок . Заголовки h1, h2, h3, h4, h5, h6Кроме абзацев важное значение на странице имеют заголовки. Их также можно

Слайд 7Блок . Жирный
Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать

жирным и обычный текст - достаточно взять его в тег . Обратите внимание на то, что тег  следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.
Блок . ЖирныйВы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст - достаточно

Слайд 8Блок . Курсив
Кроме жирного можно сделать также и курсив с помощью тега :


Это обычный текст,

а это курсивный текст.



Это обычный текст, а это курсивный текст.
Блок . КурсивКроме жирного можно сделать также и курсив с помощью тега :	Это обычный текст, а это курсивный текст.Это обычный текст,

Слайд 9Блок . Списки
Наряду с абзацами и заголовками существует еще один важный элемент

страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).
Списки создаются с помощью тега 
    , внутри которого обязательно должны идти теги 
  • . Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя.
Блок . СпискиНаряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка

Слайд 10Блок . Списки
Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому,

что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег 
    , а пункты таких списков также создаются через теги li.
Блок . СпискиСписки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых

Слайд 11Блок . Ссылки
Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на

ссылки, мы можем переходить с одной страницы сайта на другу. Если бы их не было - интернет был бы просто набором страниц, никак не связанных друг с другом.
Ссылка создается с помощью тега , при этом у нее должен быть обязательный атрибут href, в котором хранится адрес той страницы, на которую ведет ссылка.

Слайд 12Блок . Картинки
Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта.

Для этого предназначен тег , имеющий обязательный атрибут src, в котором хранится путь к файлу картинки.
Обратите внимание на то, что тег  не требует закрывающего тега.


Блок . КартинкиДавайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег , имеющий обязательный

Слайд 13Блок . Ссылки в виде картинок
Ссылкой может быть не только текст, но и картинка -

для этого достаточно тег  вложить в тег , как это сделано в следующем примере.


Блок . Ссылки в виде картинокСсылкой может быть не только текст, но и картинка - для этого достаточно тег  вложить в тег ,

Слайд 14Блок . Разрыв строки
Вспомните, что будет, если сделать, к примеру, два абзаца

рядом - в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.
Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.
Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег 
. Учтите, что этот тег особенный и не имеет закрывающего.
Блок . Разрыв строкиВспомните, что будет, если сделать, к примеру, два абзаца рядом - в этом случае текст,

Слайд 15Блок . Комментарии HTML
Практически во всех языках программирования есть такое понятие как

"комментарии". Комментарии - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы.
Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом откомментировать при необходимости.
Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса - .
Блок . Комментарии HTMLПрактически во всех языках программирования есть такое понятие как

Что такое shareslide.ru?

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть