SlideShare une entreprise Scribd logo
1  sur  20
HTML
УРОК №1
Захарова Е.В.
СОДЕРЖАНИЕ УРОКА
 HTML документ
 Структура простого html документа
 Теги
 Создание HTML документа
 Заголовки. Тег <H1>
 Размер шрифта. Тег <FONT SIZE >
 Выбираем шрифт. Тег <FONT FACE >
 Цвет текста в документе. Тег <FONT COLOR >
 Цвет фона текста. Тег <SPAN STYLE=“BACKGROUND-COLOR : ”>
 Начертание текста
 Создание нового абзаца. Выравнивание абзаца. Тег <P>
 Цвет фона страницы. Тег < BODY BGCOLOR: >
 Параметры отступов в документе
HTML — HyperTextMarkupLanguage, что в
переводе на русский означает язык
разметки.
HTML документ состоит из тегов, из
которых и собирается вся интернет
страничка.
HTML документ
<HTML>
<HEAD>
<TITLE>ЗАГОЛОВОК ДОКУМЕНТА</TITLE>
</HEAD>
<BODY>
ТЕКСТ НА СТРАНИЧКЕ
</BODY>
</HTML>
Структура простого html документа:
Что такое тег?
Тег - (от англ. tag) это единица HTML-кода,
знак или команда языка разметки
гипертекста, который представляет собой
текст, заключаемый в скобки <>.
<> - открывающий тег, </> - закрывающий;
<> - одиночный, <> … </> - парный тег.
Теги
 Любой HTML документ начинаться с тега <HTML> и заканчиваться
тегом </HTML>. Это и даёт понять, что это и есть HTML документ.
 Тег <HEAD>. Все что находится между этим тегом, является
служебной информацией. Она не отображается на самой страничке, но
играет большую роль для поисковых машин. В нем пишутся: ключевые
слова страницы, ее название, автор страницы, и др. служебная
информация. Закрывающийся тег </HEAD> говорит, что завершена
служебная информация.
 Тег <TITLE> определяет название страницы. Оно отображается в
самом верхнем левом углу окна. Например название нашей страницы:
Проект по информатике. Закрывающийся тег </TITLE> говорит, что
название документа закончилось.
 Далее между открывающимся тегом <BODY> и закрывающимся
</BODY>, следует информация, располагаемая на самой странице, ту
которую мы видим.
Создание html-документа
Просмотр в браузере
Схематически весь HTML документ:
Заголовки. Тег <H1> в HTML
На каждой HTML странице существуют заголовки.
Для их создания используется следующий тег:
<Hn>Заголовок</Hn> , где n - число от 1 до 6.
Заключив между ними текст получим заголовки разных размеров:
Размер шрифта. Тег FONT SIZE
Размер шрифта мы также можем указать с помощью тега <FONT>.
<FONT SIZE="Число от 1 до 7"></FONT>
Выбираем шрифт. Тег FONT FACE
Следующим параметром задаём название шрифта, которым будет
отображаться текст на странице:
<FONT FACE="Название шрифта"></FONT>
Цвет текста в документе
<FONT COLOR=«название цвета или его 16-ричный вид">
</FONT>
Все атрибуты можно использовать одновременно:
Выделение текста цветом
Для выделения текста любым цветом используется тег:
<SPAN STYLE="BACKGROUND-COLOR: название цвета фона
или его 16-ричный вид"></SPAN>
Начертание текста
Тексту можно придать определенное начертание:
Создание нового абзаца
Тег для создания нового абзаца <P>Новый абзац</P>
Параметры тега <p> :
• CENTER
• LEFT
• RIGHT
• JUSTIFY
Для переходов на новую строку без абзацев используется тег:
<BR>За ним следует новая строка
Цвет фона страницы. Тег BODY BGCOLOR
У тега <BODY> есть свои параметры, с помощью которых задаётся
цвет фона страницы, цвет текста в документе и т.д.
Цвет фона страницы можно задать так: <BODY BGCOLOR =
"название цвета фона или его 16-ричный вид">
Параметры отступов в документе
Следующими параметрами могут быть указаны отступы в документе:
leftmargin - отступ слева rightmargin - отступ справа
topmargin - отступ сверху bottommargin - отступ снизу
Общий вид:
<BODY
ПАРАМЕТР="
ЧИСЛО В
ПИКСЕЛЯХ">
Html  1

Contenu connexe

Tendances

Состав электронного сообщения
Состав электронного сообщенияСостав электронного сообщения
Состав электронного сообщения
Katarina7777777
 
урок 6
урок 6урок 6
урок 6
JIuc
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
ssuser3896e2
 
урок 1
урок 1урок 1
урок 1
JIuc
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
itc73
 
Язык разметки
Язык разметкиЯзык разметки
Язык разметки
elenash584
 

Tendances (18)

Состав электронного сообщения
Состав электронного сообщенияСостав электронного сообщения
Состав электронного сообщения
 
к мастер классу
к мастер классук мастер классу
к мастер классу
 
Занятие 1 Основы PowerPoint
Занятие 1 Основы PowerPointЗанятие 1 Основы PowerPoint
Занятие 1 Основы PowerPoint
 
MS Word 2013 от новичка до профессионала. Занятие 1. Представление MS Word 2013
MS Word 2013 от новичка до профессионала. Занятие 1. Представление MS Word 2013MS Word 2013 от новичка до профессионала. Занятие 1. Представление MS Word 2013
MS Word 2013 от новичка до профессионала. Занятие 1. Представление MS Word 2013
 
урок 6
урок 6урок 6
урок 6
 
основы Html
основы Htmlосновы Html
основы Html
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
 
урок 1
урок 1урок 1
урок 1
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
мова Html
мова Htmlмова Html
мова Html
 
Word 2003 LibreOffice
Word 2003 LibreOfficeWord 2003 LibreOffice
Word 2003 LibreOffice
 
Язык Html
Язык HtmlЯзык Html
Язык Html
 
языка Html
языка Htmlязыка Html
языка Html
 
Язык разметки
Язык разметкиЯзык разметки
Язык разметки
 
Использование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахИспользование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницах
 
Мастер-класс по использованию сервиса videocontrolpanel.net для создания виде...
Мастер-класс по использованию сервиса videocontrolpanel.net для создания виде...Мастер-класс по использованию сервиса videocontrolpanel.net для создания виде...
Мастер-класс по использованию сервиса videocontrolpanel.net для создания виде...
 

En vedette

инструкция по работе в сервисе Pow toon
инструкция по работе в сервисе Pow toonинструкция по работе в сервисе Pow toon
инструкция по работе в сервисе Pow toon
Ирина Вернер
 

En vedette (11)

Безопасность в Интернете
Безопасность в ИнтернетеБезопасность в Интернете
Безопасность в Интернете
 
Корисні посилання під рукою
Корисні посилання під рукоюКорисні посилання під рукою
Корисні посилання під рукою
 
Створення стрічки часу
Створення стрічки часуСтворення стрічки часу
Створення стрічки часу
 
Секреты презентации. Как сделать презентацию для спикера?
Секреты презентации. Как сделать презентацию для спикера?Секреты презентации. Как сделать презентацию для спикера?
Секреты презентации. Как сделать презентацию для спикера?
 
Sety 9 klass
Sety 9 klassSety 9 klass
Sety 9 klass
 
Мій перевернутий клас
Мій перевернутий класМій перевернутий клас
Мій перевернутий клас
 
инструкция по работе в сервисе Pow toon
инструкция по работе в сервисе Pow toonинструкция по работе в сервисе Pow toon
инструкция по работе в сервисе Pow toon
 
Как создать презентацию в технике скрайбинга
Как создать презентацию в технике скрайбингаКак создать презентацию в технике скрайбинга
Как создать презентацию в технике скрайбинга
 
скрайбинг
скрайбингскрайбинг
скрайбинг
 
13.Гражданская война 1432-1439 гг.
13.Гражданская война 1432-1439 гг.13.Гражданская война 1432-1439 гг.
13.Гражданская война 1432-1439 гг.
 
Культура общения
Культура общенияКультура общения
Культура общения
 

Similaire à Html 1

Web страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыWeb страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницы
Marina_stn
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на html
ANefyodova
 
основы Html
основы Htmlосновы Html
основы Html
galka08m
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
mmmitioglo
 
создание сайта
создание сайтасоздание сайта
создание сайта
JIuc
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
itc73
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
kuzeenka31
 
А. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTMLА. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTML
Aweb
 

Similaire à Html 1 (20)

Web страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыWeb страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницы
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на html
 
Основы HTML
Основы HTMLОсновы HTML
Основы HTML
 
основы Html
основы Htmlосновы Html
основы Html
 
Php intro rus
Php intro rusPhp intro rus
Php intro rus
 
Html
HtmlHtml
Html
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страниц
 
Html 0
Html 0Html 0
Html 0
 
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
 
основы нтмл
основы нтмлосновы нтмл
основы нтмл
 
Lection1
Lection1Lection1
Lection1
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
 
создание сайта
создание сайтасоздание сайта
создание сайта
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
 
лекц14
лекц14лекц14
лекц14
 
А. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTMLА. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTML
 

Plus de Захарова Олена

типи посилань на комірки в електронних таблицях
типи посилань на комірки в електронних таблицяхтипи посилань на комірки в електронних таблицях
типи посилань на комірки в електронних таблицях
Захарова Олена
 

Plus de Захарова Олена (20)

комп’ютерні програми і мови програмування 2
комп’ютерні програми і мови програмування 2комп’ютерні програми і мови програмування 2
комп’ютерні програми і мови програмування 2
 
комп’ютерні програми і мови програмування
комп’ютерні програми і мови програмуваннякомп’ютерні програми і мови програмування
комп’ютерні програми і мови програмування
 
типи посилань на комірки в електронних таблицях
типи посилань на комірки в електронних таблицяхтипи посилань на комірки в електронних таблицях
типи посилань на комірки в електронних таблицях
 
Резюме
РезюмеРезюме
Резюме
 
форматування тексту
форматування текстуформатування тексту
форматування тексту
 
Інформація та інформаційні процеси
Інформація та інформаційні процесиІнформація та інформаційні процеси
Інформація та інформаційні процеси
 
Powuk inet
Powuk inetPowuk inet
Powuk inet
 
Додавання раціональних чисел
Додавання раціональних чиселДодавання раціональних чисел
Додавання раціональних чисел
 
випадкові події
випадкові подіївипадкові події
випадкові події
 
графика 5 1
графика 5 1графика 5 1
графика 5 1
 
Дії з файлами і папками
Дії з файлами і папкамиДії з файлами і папками
Дії з файлами і папками
 
ос
осос
ос
 
середовище виконання алгоритму
середовище виконання алгоритмусередовище виконання алгоритму
середовище виконання алгоритму
 
алгоритми
алгоритмиалгоритми
алгоритми
 
команди та виконавці
команди та виконавцікоманди та виконавці
команди та виконавці
 
Grafika 9klass
Grafika 9klassGrafika 9klass
Grafika 9klass
 
Grafika 9
Grafika 9Grafika 9
Grafika 9
 
Dizayn prez
Dizayn prezDizayn prez
Dizayn prez
 
Soderganie prez
Soderganie prezSoderganie prez
Soderganie prez
 
основи інтернету
основи інтернетуоснови інтернету
основи інтернету
 

Html 1

  • 2. СОДЕРЖАНИЕ УРОКА  HTML документ  Структура простого html документа  Теги  Создание HTML документа  Заголовки. Тег <H1>  Размер шрифта. Тег <FONT SIZE >  Выбираем шрифт. Тег <FONT FACE >  Цвет текста в документе. Тег <FONT COLOR >  Цвет фона текста. Тег <SPAN STYLE=“BACKGROUND-COLOR : ”>  Начертание текста  Создание нового абзаца. Выравнивание абзаца. Тег <P>  Цвет фона страницы. Тег < BODY BGCOLOR: >  Параметры отступов в документе
  • 3. HTML — HyperTextMarkupLanguage, что в переводе на русский означает язык разметки. HTML документ состоит из тегов, из которых и собирается вся интернет страничка. HTML документ
  • 4. <HTML> <HEAD> <TITLE>ЗАГОЛОВОК ДОКУМЕНТА</TITLE> </HEAD> <BODY> ТЕКСТ НА СТРАНИЧКЕ </BODY> </HTML> Структура простого html документа:
  • 5. Что такое тег? Тег - (от англ. tag) это единица HTML-кода, знак или команда языка разметки гипертекста, который представляет собой текст, заключаемый в скобки <>. <> - открывающий тег, </> - закрывающий; <> - одиночный, <> … </> - парный тег.
  • 6. Теги  Любой HTML документ начинаться с тега <HTML> и заканчиваться тегом </HTML>. Это и даёт понять, что это и есть HTML документ.  Тег <HEAD>. Все что находится между этим тегом, является служебной информацией. Она не отображается на самой страничке, но играет большую роль для поисковых машин. В нем пишутся: ключевые слова страницы, ее название, автор страницы, и др. служебная информация. Закрывающийся тег </HEAD> говорит, что завершена служебная информация.  Тег <TITLE> определяет название страницы. Оно отображается в самом верхнем левом углу окна. Например название нашей страницы: Проект по информатике. Закрывающийся тег </TITLE> говорит, что название документа закончилось.  Далее между открывающимся тегом <BODY> и закрывающимся </BODY>, следует информация, располагаемая на самой странице, ту которую мы видим.
  • 10. Заголовки. Тег <H1> в HTML На каждой HTML странице существуют заголовки. Для их создания используется следующий тег: <Hn>Заголовок</Hn> , где n - число от 1 до 6. Заключив между ними текст получим заголовки разных размеров:
  • 11. Размер шрифта. Тег FONT SIZE Размер шрифта мы также можем указать с помощью тега <FONT>. <FONT SIZE="Число от 1 до 7"></FONT>
  • 12. Выбираем шрифт. Тег FONT FACE Следующим параметром задаём название шрифта, которым будет отображаться текст на странице: <FONT FACE="Название шрифта"></FONT>
  • 13. Цвет текста в документе <FONT COLOR=«название цвета или его 16-ричный вид"> </FONT>
  • 14. Все атрибуты можно использовать одновременно:
  • 15. Выделение текста цветом Для выделения текста любым цветом используется тег: <SPAN STYLE="BACKGROUND-COLOR: название цвета фона или его 16-ричный вид"></SPAN>
  • 16. Начертание текста Тексту можно придать определенное начертание:
  • 17. Создание нового абзаца Тег для создания нового абзаца <P>Новый абзац</P> Параметры тега <p> : • CENTER • LEFT • RIGHT • JUSTIFY Для переходов на новую строку без абзацев используется тег: <BR>За ним следует новая строка
  • 18. Цвет фона страницы. Тег BODY BGCOLOR У тега <BODY> есть свои параметры, с помощью которых задаётся цвет фона страницы, цвет текста в документе и т.д. Цвет фона страницы можно задать так: <BODY BGCOLOR = "название цвета фона или его 16-ричный вид">
  • 19. Параметры отступов в документе Следующими параметрами могут быть указаны отступы в документе: leftmargin - отступ слева rightmargin - отступ справа topmargin - отступ сверху bottommargin - отступ снизу Общий вид: <BODY ПАРАМЕТР=" ЧИСЛО В ПИКСЕЛЯХ">