• Название:

    02 HTML начало работы


  • Размер: 0.08 Мб
  • Формат: ODT
  • Сообщить о нарушении / Abuse

    Осталось ждать: 20 сек.

Установите безопасный браузер



Пример HTML1

02 HTML – начало работы

что понадобится

что такое HTML

что такое теги

пример простого html-документа

Что понадобится для работы?

Программы, которые нужны для работы с HTML:

1) текстовый редактор, лучше всего Notepad++:

В текстовом редакторе пишется код html. Документ сохраняется с расширением *.html.

2) браузер, я использую Google Chrome. В браузере открывается сохраненный файл *.html для просмотра результата — т. е. для просмотра создаваемой страницы.

Что Вы будете уметь делать после изучения HTML5:

- делать разметку веб-страницы,

- делать интересные странички с видео, фото и т.д.

- приступить к изучению CSS3

Что такое HTML?

HTML (HyperText Markup Language) – язык разметки веб-страниц.

Задачей HTML является создание каркаса документа: абзацы, заголовки, списки, таблицы, ссылки и т. д.

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

Все теги заключены в угловые скобки: <тег>

Виды тегов:

парные

Первый тег <тег> - открывающий (команда для браузера началась), второй </тег> - закрывающий (команда для браузера закончилась)

Синтаксис:

<тег>содержание тега</тег>

одиночные

Не требуют закрывающегося тега,

предназначены для вывода одиночных объектов, например, изображение или перевод строки

Синтаксис:

<тег>

Обычно теги пишутся в нижнем регистре.

Структура html-документа:

Общая структура кода HTML:

В строке 1 всегда прописывается версия языка HTML, в нашем случае HTML5.

В строке 2 открывающий тег <html> указывает, что начинается код html. Под ним на 12 строке закрывающий тег </html>, который указывает, что код html закончен. Весь код html обязательно должен располагаться внутри тегов <html>весь код html</html>.

В строке 3 открывающий тег <head> содержит в себе служебную информацию до закрывающего тега </head> на строке 7. Такой служебной информацией является, например, название страницы, которое отображается во вкладке браузера, автоматическое обновление страницы, кодировка и т. д. Данная информация нужна не посетителям сайта (пользователям), а браузеру и поисковым системам.

В строке 8 открывающий тег <body> описывает все видимое посетителям содержимое страницы: заголовки, таблицы, изображения и т. д. Закрывающий тег </body> в строке 11 заканчивает описание страницы.

Это минимально необходимый набор тегов для каждой веб-страницы. Все остальные теги вписываются в данную основу.

Первый html-код

Пример HTML1

Создадим страницу с названием «Минимализм». На странице выведем надпись «Краткость — сестра таланта».

Для этих целей в основу html-кода вписываются две строчки.

Название странички должно отображаться браузером во вкладке, значит — это информация для браузера. Запишем ее внутри тега <head>. Для этого используется тег <title>.

Надпись должна отображаться на самой странице, поэтому разместим ее внутри тега <body>. Для этого используем тег <h1> - самый важный заголовок.

Как записать код html и проверить результат?

1) в своей папке создать папку Projects – в ней будем хранить все наши html-документы.

2) в папке Projects создать папку HTML1 – для каждого примера или задания будем создавать отдельную папку.

3) открыть программу Notepad++.

4) набрать нужный кодировка.

5) сохранить файл под именем index.html — это стандартное имя для главных страниц сайтов.

6) открыть index.html в браузере.

7) при изменении кода в файле index.html достаточно будет сохранить файл и обновить страницу в браузере.

Код html:

Результат: