SlideShare a Scribd company logo
1 of 24
НTML- основы ОСНОВЫ   HTML
Все мы уже знаем, как смотреть htmlкод страницы
HTML-самый простой язык.
ТЭГИ Тэги- это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт. Все тэги имеют одинаковый формат: они начинаются и заканчиваются угловыми скобками.  посмотрите на html код для сайта. Он похож на человека.
тег <html> указывает, что начинается html документ.  Его закрывающий тег </html> указывает, что html документ завершен.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  <head> <head> - голова <body><body> -  тело.  </HTML>
В чем пишется HTML-код? Работать с HTML кодом удобнее в  Notepad++ , а можно Например, в стандартном блокноте  Windows                                (Пуск>Программы>Стандартные>Блокнот)
Создадим документ HTML. Для этого сохраним безымянный документ в Рабочую папку, присвоив ему имя index.html (Файл>Сохранить как…).
Помещаем в блокнот вот такой текст: <html> <head> <title>1-ая страничка</title> </head> <body> Привет!<br>Это моя первая страничка. </body> </html>
Сохраняем файл index.html на диск. Блокнот оставляем открытым
Далее, идем в Мой компьютер и открываем правой кнопкой мыши файл index.html с помощью браузера
Нужно ли знать теги  и для чего? Без знания тегов Вы не построите сайт,  не сможете корректировать блог  И у Вас будут постоянные проблемы с  форматированием любого текста, Связанного с размещением в интернете.  А так же они необходимы для  удобства внутренней оптимизации.
Список  основных тегов:
Пример форматирования  текста Цвет Цвет фона задается в теле документа, тег <body>: <bodybgcolor="#EAEAEA> Выражение для цвета можно брать, например, из программы фотошоп:
В теге <body> можно задать и цвет для всего текста на странице,  например: text=#0000FF.  <body bgcolor=#FFFF00 text=#0000FF> Для изменения свойств текста  (или фрагмента текста)  используются атрибуты тега <font> Так, цвет текста задается атрибутом color: <font color = #FF0000>Строка красного цвета</font>
Вставка  изображения
Создаем на рабочем столе папку, заносим туда  свой документ index.html Создаем там еще одну папку и называем  images (картинки) сохраняем там  нужные нам картинки
Желаю Вам Удачи! http://rich-lady.com

More Related Content

What's hot

основы языка Html
основы языка Htmlосновы языка Html
основы языка Htmlmmlllll
 
урок 2.2
урок 2.2урок 2.2
урок 2.2JIuc
 
Структура html документа
Структура html документаСтруктура html документа
Структура html документаAndrey Radionov
 
Html
HtmlHtml
Htmljazva
 
к мастер классу
к мастер классук мастер классу
к мастер классуSvetlana68
 

What's hot (7)

основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
 
урок 2.2
урок 2.2урок 2.2
урок 2.2
 
Структура html документа
Структура html документаСтруктура html документа
Структура html документа
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
к мастер классу
к мастер классук мастер классу
к мастер классу
 

Viewers also liked

профорієнтація житлово-комунальний коледж
профорієнтація житлово-комунальний коледжпрофорієнтація житлово-комунальний коледж
профорієнтація житлово-комунальний коледжNata_liya_Bem
 
Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14
Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14
Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14slav-i
 
основы нтмл
основы нтмлосновы нтмл
основы нтмлolgaoov
 
08.10.2012 шно лингвисты
08.10.2012 шно лингвисты08.10.2012 шно лингвисты
08.10.2012 шно лингвистыw1nst0ne
 
Художественно-эстетическая секция
Художественно-эстетическая секцияХудожественно-эстетическая секция
Художественно-эстетическая секцияw1nst0ne
 
ноу шанс
ноу шансноу шанс
ноу шансw1nst0ne
 
Cоциально правовая секция
Cоциально правовая секцияCоциально правовая секция
Cоциально правовая секцияw1nst0ne
 
08.10.12 естественные науки (секция)
08.10.12 естественные науки (секция)08.10.12 естественные науки (секция)
08.10.12 естественные науки (секция)w1nst0ne
 

Viewers also liked (8)

профорієнтація житлово-комунальний коледж
профорієнтація житлово-комунальний коледжпрофорієнтація житлово-комунальний коледж
профорієнтація житлово-комунальний коледж
 
Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14
Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14
Оценка первого впечатления от дизайна - Вячеслав Иванов, UXRussia'14
 
основы нтмл
основы нтмлосновы нтмл
основы нтмл
 
08.10.2012 шно лингвисты
08.10.2012 шно лингвисты08.10.2012 шно лингвисты
08.10.2012 шно лингвисты
 
Художественно-эстетическая секция
Художественно-эстетическая секцияХудожественно-эстетическая секция
Художественно-эстетическая секция
 
ноу шанс
ноу шансноу шанс
ноу шанс
 
Cоциально правовая секция
Cоциально правовая секцияCоциально правовая секция
Cоциально правовая секция
 
08.10.12 естественные науки (секция)
08.10.12 естественные науки (секция)08.10.12 естественные науки (секция)
08.10.12 естественные науки (секция)
 

Similar to нтмл код

Php intro rus
Php intro rusPhp intro rus
Php intro rusaDDDitive
 
презентация
презентацияпрезентация
презентация7michey7
 
презентация111
презентация111презентация111
презентация1117michey7
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdfmmmitioglo
 
167 web-__П1
167  web-__П1167  web-__П1
167 web-__П1vadimben
 
советы по коду Html
советы по коду Htmlсоветы по коду Html
советы по коду Htmltalgautb
 
Pavel Rumantsev - Html5
Pavel Rumantsev - Html5Pavel Rumantsev - Html5
Pavel Rumantsev - Html5beloslab
 
Zen Coding
Zen CodingZen Coding
Zen Coding404fest
 
Основные теги HTML
Основные теги HTMLОсновные теги HTML
Основные теги HTMLОтшельник
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
Поисковая оптимизация сайта: с чего начать
Поисковая оптимизация сайта:  с чего начатьПоисковая оптимизация сайта:  с чего начать
Поисковая оптимизация сайта: с чего начатьDarya Karelina
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. РуководствоNimax
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTMLDenis Latushkin
 

Similar to нтмл код (20)

Php intro rus
Php intro rusPhp intro rus
Php intro rus
 
презентация
презентацияпрезентация
презентация
 
презентация111
презентация111презентация111
презентация111
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
 
WEB
WEBWEB
WEB
 
167 web-__П1
167  web-__П1167  web-__П1
167 web-__П1
 
советы по коду Html
советы по коду Htmlсоветы по коду Html
советы по коду Html
 
Pavel Rumantsev - Html5
Pavel Rumantsev - Html5Pavel Rumantsev - Html5
Pavel Rumantsev - Html5
 
лекц12
лекц12лекц12
лекц12
 
пр 12.docx
пр 12.docxпр 12.docx
пр 12.docx
 
Html V.1.1
Html V.1.1Html V.1.1
Html V.1.1
 
Zen Coding
Zen CodingZen Coding
Zen Coding
 
Основные теги HTML
Основные теги HTMLОсновные теги HTML
Основные теги HTML
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
Поисковая оптимизация сайта: с чего начать
Поисковая оптимизация сайта:  с чего начатьПоисковая оптимизация сайта:  с чего начать
Поисковая оптимизация сайта: с чего начать
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. Руководство
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
 
урок2
урок2урок2
урок2
 

More from Ekaterina-Melchugova

изучаем клавиатуру
изучаем клавиатуруизучаем клавиатуру
изучаем клавиатуруEkaterina-Melchugova
 
Microsoft office power point урок
Microsoft office power point урокMicrosoft office power point урок
Microsoft office power point урокEkaterina-Melchugova
 
установка программы скарабей M
установка программы скарабей Mустановка программы скарабей M
установка программы скарабей MEkaterina-Melchugova
 
Microsoft office power point урок
Microsoft office power point урокMicrosoft office power point урок
Microsoft office power point урокEkaterina-Melchugova
 
создание карты блога
создание карты блогасоздание карты блога
создание карты блогаEkaterina-Melchugova
 
презентация джино Power point
презентация джино Power pointпрезентация джино Power point
презентация джино Power pointEkaterina-Melchugova
 
аудасити виды проигрывателей
аудасити виды проигрывателейаудасити виды проигрывателей
аудасити виды проигрывателейEkaterina-Melchugova
 
презентация джино Power point
презентация джино Power pointпрезентация джино Power point
презентация джино Power pointEkaterina-Melchugova
 

More from Ekaterina-Melchugova (14)

изучаем клавиатуру
изучаем клавиатуруизучаем клавиатуру
изучаем клавиатуру
 
Microsoft office power point урок
Microsoft office power point урокMicrosoft office power point урок
Microsoft office power point урок
 
артистер часть2a
артистер часть2aартистер часть2a
артистер часть2a
 
артистер часть 3
артистер часть 3артистер часть 3
артистер часть 3
 
артистер часть2
артистер часть2артистер часть2
артистер часть2
 
артистер часть 1
артистер часть 1артистер часть 1
артистер часть 1
 
установка программы скарабей M
установка программы скарабей Mустановка программы скарабей M
установка программы скарабей M
 
Study keyboard
Study keyboardStudy keyboard
Study keyboard
 
Microsoft office power point урок
Microsoft office power point урокMicrosoft office power point урок
Microsoft office power point урок
 
создание карты блога
создание карты блогасоздание карты блога
создание карты блога
 
презентация джино Power point
презентация джино Power pointпрезентация джино Power point
презентация джино Power point
 
артистер
артистерартистер
артистер
 
аудасити виды проигрывателей
аудасити виды проигрывателейаудасити виды проигрывателей
аудасити виды проигрывателей
 
презентация джино Power point
презентация джино Power pointпрезентация джино Power point
презентация джино Power point
 

нтмл код

  • 2. Все мы уже знаем, как смотреть htmlкод страницы
  • 4. ТЭГИ Тэги- это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт. Все тэги имеют одинаковый формат: они начинаются и заканчиваются угловыми скобками. посмотрите на html код для сайта. Он похож на человека.
  • 5. тег <html> указывает, что начинается html документ. Его закрывающий тег </html> указывает, что html документ завершен. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <head> <head> - голова <body><body> - тело. </HTML>
  • 6. В чем пишется HTML-код? Работать с HTML кодом удобнее в Notepad++ , а можно Например, в стандартном блокноте Windows (Пуск>Программы>Стандартные>Блокнот)
  • 7. Создадим документ HTML. Для этого сохраним безымянный документ в Рабочую папку, присвоив ему имя index.html (Файл>Сохранить как…).
  • 8. Помещаем в блокнот вот такой текст: <html> <head> <title>1-ая страничка</title> </head> <body> Привет!<br>Это моя первая страничка. </body> </html>
  • 9. Сохраняем файл index.html на диск. Блокнот оставляем открытым
  • 10. Далее, идем в Мой компьютер и открываем правой кнопкой мыши файл index.html с помощью браузера
  • 11.
  • 12. Нужно ли знать теги и для чего? Без знания тегов Вы не построите сайт, не сможете корректировать блог И у Вас будут постоянные проблемы с форматированием любого текста, Связанного с размещением в интернете. А так же они необходимы для удобства внутренней оптимизации.
  • 14.
  • 15.
  • 16. Пример форматирования текста Цвет Цвет фона задается в теле документа, тег <body>: <bodybgcolor="#EAEAEA> Выражение для цвета можно брать, например, из программы фотошоп:
  • 17. В теге <body> можно задать и цвет для всего текста на странице, например: text=#0000FF. <body bgcolor=#FFFF00 text=#0000FF> Для изменения свойств текста (или фрагмента текста) используются атрибуты тега <font> Так, цвет текста задается атрибутом color: <font color = #FF0000>Строка красного цвета</font>
  • 19. Создаем на рабочем столе папку, заносим туда свой документ index.html Создаем там еще одну папку и называем images (картинки) сохраняем там нужные нам картинки
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. Желаю Вам Удачи! http://rich-lady.com