SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

Состав электронного сообщения
Состав электронного сообщенияСостав электронного сообщения
Состав электронного сообщенияKatarina7777777
 
к мастер классу
к мастер классук мастер классу
к мастер классуSvetlana68
 
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
урок 6JIuc
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTMLssuser3896e2
 
урок 1
урок 1урок 1
урок 1JIuc
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Язык Html
Язык HtmlЯзык Html
Язык HtmlNick535
 
Язык разметки
Язык разметкиЯзык разметки
Язык разметкиelenash584
 
Использование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахИспользование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахNetpeak
 
Мастер-класс по использованию сервиса videocontrolpanel.net для создания виде...
Мастер-класс по использованию сервиса videocontrolpanel.net для создания виде...Мастер-класс по использованию сервиса videocontrolpanel.net для создания виде...
Мастер-класс по использованию сервиса videocontrolpanel.net для создания виде...Alexander Oos
 

Was ist angesagt? (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 для создания виде...
 

Andere mochten auch

Корисні посилання під рукою
Корисні посилання під рукоюКорисні посилання під рукою
Корисні посилання під рукоюЗахарова Олена
 
Секреты презентации. Как сделать презентацию для спикера?
Секреты презентации. Как сделать презентацию для спикера?Секреты презентации. Как сделать презентацию для спикера?
Секреты презентации. Как сделать презентацию для спикера?Inspired presentation
 
инструкция по работе в сервисе Pow toon
инструкция по работе в сервисе Pow toonинструкция по работе в сервисе Pow toon
инструкция по работе в сервисе Pow toonИрина Вернер
 
Как создать презентацию в технике скрайбинга
Как создать презентацию в технике скрайбингаКак создать презентацию в технике скрайбинга
Как создать презентацию в технике скрайбингаMarina Oreshko
 

Andere mochten auch (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 гг.
 
Культура общения
Культура общенияКультура общения
Культура общения
 

Ähnlich wie Html 1

Web страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыWeb страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыMarina_stn
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на htmlANefyodova
 
основы Html
основы Htmlосновы Html
основы Htmlgalka08m
 
Php intro rus
Php intro rusPhp intro rus
Php intro rusaDDDitive
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЯковенко Кирилл
 
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Max Kornev
 
основы нтмл
основы нтмлосновы нтмл
основы нтмлolgaoov
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdfmmmitioglo
 
создание сайта
создание сайтасоздание сайта
создание сайтаJIuc
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрейVlado Sudin
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрейVlado Sudin
 
презентация по миру
презентация по мирупрезентация по миру
презентация по мируkuzeenka31
 
А. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTMLА. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTMLAweb
 

Ähnlich wie 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
 

Mehr von Захарова Олена

комп’ютерні програми і мови програмування 2
комп’ютерні програми і мови програмування 2комп’ютерні програми і мови програмування 2
комп’ютерні програми і мови програмування 2Захарова Олена
 
комп’ютерні програми і мови програмування
комп’ютерні програми і мови програмуваннякомп’ютерні програми і мови програмування
комп’ютерні програми і мови програмуванняЗахарова Олена
 
типи посилань на комірки в електронних таблицях
типи посилань на комірки в електронних таблицяхтипи посилань на комірки в електронних таблицях
типи посилань на комірки в електронних таблицяхЗахарова Олена
 
Інформація та інформаційні процеси
Інформація та інформаційні процесиІнформація та інформаційні процеси
Інформація та інформаційні процесиЗахарова Олена
 
Додавання раціональних чисел
Додавання раціональних чиселДодавання раціональних чисел
Додавання раціональних чиселЗахарова Олена
 
середовище виконання алгоритму
середовище виконання алгоритмусередовище виконання алгоритму
середовище виконання алгоритмуЗахарова Олена
 

Mehr von Захарова Олена (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 ПАРАМЕТР=" ЧИСЛО В ПИКСЕЛЯХ">