SlideShare a Scribd company logo
1 of 12
Web-дизайн
Язык HTML
ВСПОМНИМ!
∗ В чем отличие между обычным редактором текста и
HTML?
В отличие от обычного редактора текста,HTML не учитывает
длину текста , символ абзаца, и несколько в подряд
идущих пробелов ,которые автоматически заменяются
пробелом.
∗ Какие тэги вы уже знаете для форматирования текста в
HTML?
<html>
<head><title>
</title>
</head>
<body>
</body>
</html>
ВСПОМНИМ!
∗ Тег <BR>
Данный элемент осуществляет перевод строки, то есть
практически аналогичен нажатию Enter в текстовом
редакторе. Элемент не имеет конечного тэга.
∗ Начертание текста
∗ <b></b> - полужирное начертание.
∗ <i></i> - курсивное начертание.
∗ <u></u> - подчеркнутое начертание.
ВСПОМНИМ!
∗ Абзац
Для того, чтобы представлять текст в виде отдельных
абзацев, понадобятся тэги <p></p>.
∗ Горизонтальная линия
Применяется для разбиения страницы на логические
разделы . Тэг <HR>
∗ Вывод отформатированного текста <PRE>..</PRE>
∗ Нумерованный список
<Ol>
<Li>Пункт 1<Li>Пункт 2<Li>Пункт 3<Li>
</Ol>
ТЕМА УРОКА:
Форматирование текста
в HTML-документах
Повторение и дополнение:
Страничка прошедшего
урока
Страничка сегодняшнего
урока
Текст программы Web-странички:
<html>
<head>
<i> Отделения колледжа</i>
<title>Колледж</title>
</head>
<Body >
<HR >
<b>< >В колледже функционируют 4 отделения:</b>
<Ol>
<Li><u >НО</U>
<Li><u>ДП</u>
<Li><u>МО</u>
<Li><u>СР</u>
</Ol>
</body>
</html>
Размер шрифта
∗ Другой способ указания размера шрифта – с
помощью тэгов <font></font> с атрибутом
size. В качестве значений этого атрибута
используются целые числа от 1 до 7. Причем
значение 1 соответствует минимальному
размеру шрифта, а значение 7 –
максимальному. Пример
∗ В тэгах <font></font> может использоваться
также атрибут color для указания цвета
шрифта, ограниченного тэгами текста.
Пример
тэги <p></p> имеют следующие
параметры:
∗ALIGN – выравнивание текста. Возможные
значения: LEFT – по левому краю, RIGHT – по
правому краю, CENTER – по центру, JUSTIFY – по
ширине.
<p align=justify>Параграф, выровненный по
ширине</p>
<p align=left>Параграф, выровненный по
левому краю</p>
<p align=right>Параграф, выровненный по
правому краю</p>
<p align=center>Параграф, выровненный по
центру</p>
Пример
Настройка фона
∗ При изображении фона и текста
браузеры используют цвета,
установленные по умолчанию, — они
заданы параметрами настройки
браузера. Если вы хотите задать
другие цвета, то это надо сделать в
начале файла HTML в тэге <BODY>.
Атрибут BGCOLOR= определяет цвет
фона страницы, ТЕХТ= задает цвет
текста для всей страницы. Пример
СОЗДАНИЕ Web-
страницы
КОЛЛЕДЖ

More Related Content

Viewers also liked

Trends of Web-design
Trends  of Web-designTrends  of Web-design
Trends of Web-designIrina Shults
 
Professiya web d
Professiya web dProfessiya web d
Professiya web dir_556
 
Автоцентр Нагатино
Автоцентр НагатиноАвтоцентр Нагатино
Автоцентр Нагатиноkirillgubin
 
Cоздание эффективного сайта
Cоздание эффективного сайтаCоздание эффективного сайта
Cоздание эффективного сайтаDarya Karelina
 
Web дизайн
Web дизайнWeb дизайн
Web дизайнSimpapu
 
Эволюция веб-дизайна
Эволюция веб-дизайнаЭволюция веб-дизайна
Эволюция веб-дизайнаArtjoker
 
Инструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIXИнструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIXВячеслав Гладышев
 
Разработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. ВинницыРазработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. ВинницыArtem Laptev
 
Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение Alexander Kolotov
 

Viewers also liked (12)

Trends of Web-design
Trends  of Web-designTrends  of Web-design
Trends of Web-design
 
6.4
6.46.4
6.4
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
 
Lect1
Lect1Lect1
Lect1
 
Автоцентр Нагатино
Автоцентр НагатиноАвтоцентр Нагатино
Автоцентр Нагатино
 
Cоздание эффективного сайта
Cоздание эффективного сайтаCоздание эффективного сайта
Cоздание эффективного сайта
 
Web дизайн
Web дизайнWeb дизайн
Web дизайн
 
Эволюция веб-дизайна
Эволюция веб-дизайнаЭволюция веб-дизайна
Эволюция веб-дизайна
 
Веб - дизайн
Веб - дизайнВеб - дизайн
Веб - дизайн
 
Инструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIXИнструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIX
 
Разработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. ВинницыРазработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. Винницы
 
Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение
 

Similar to урок2

Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 УрокNexa50
 
форматирование текста в Html
форматирование текста в Htmlформатирование текста в Html
форматирование текста в HtmlMaxim Colesnicov
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Htmlmmlllll
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTMLssuser3896e2
 
Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description Pavel Shtanko
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTMLDenis Latushkin
 
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Max Kornev
 
Язык Html
Язык HtmlЯзык Html
Язык HtmlNick535
 
Web страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыWeb страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыMarina_stn
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxexxdisillusion69
 
HTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийHTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийVlad Savitsky
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. РуководствоNimax
 
Структура html документа
Структура html документаСтруктура html документа
Структура html документаAndrey Radionov
 
Презентация от Vopvet.Ru
Презентация от Vopvet.RuПрезентация от Vopvet.Ru
Презентация от Vopvet.RuLeva Sever
 

Similar to урок2 (20)

Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 Урок
 
форматирование текста в Html
форматирование текста в Htmlформатирование текста в Html
форматирование текста в Html
 
Html
HtmlHtml
Html
 
нтмл код
нтмл   коднтмл   код
нтмл код
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
 
Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description
 
Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
 
Язык Html
Язык HtmlЯзык Html
Язык Html
 
Web страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыWeb страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницы
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptx
 
HTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийHTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад Савицкий
 
Html 1
Html  1Html  1
Html 1
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. Руководство
 
Структура html документа
Структура html документаСтруктура html документа
Структура html документа
 
Презентация от Vopvet.Ru
Презентация от Vopvet.RuПрезентация от Vopvet.Ru
Презентация от Vopvet.Ru
 

урок2

  • 2. ВСПОМНИМ! ∗ В чем отличие между обычным редактором текста и HTML? В отличие от обычного редактора текста,HTML не учитывает длину текста , символ абзаца, и несколько в подряд идущих пробелов ,которые автоматически заменяются пробелом. ∗ Какие тэги вы уже знаете для форматирования текста в HTML? <html> <head><title> </title> </head> <body> </body> </html>
  • 3. ВСПОМНИМ! ∗ Тег <BR> Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. Элемент не имеет конечного тэга. ∗ Начертание текста ∗ <b></b> - полужирное начертание. ∗ <i></i> - курсивное начертание. ∗ <u></u> - подчеркнутое начертание.
  • 4. ВСПОМНИМ! ∗ Абзац Для того, чтобы представлять текст в виде отдельных абзацев, понадобятся тэги <p></p>. ∗ Горизонтальная линия Применяется для разбиения страницы на логические разделы . Тэг <HR> ∗ Вывод отформатированного текста <PRE>..</PRE> ∗ Нумерованный список <Ol> <Li>Пункт 1<Li>Пункт 2<Li>Пункт 3<Li> </Ol>
  • 6. Повторение и дополнение: Страничка прошедшего урока Страничка сегодняшнего урока
  • 7. Текст программы Web-странички: <html> <head> <i> Отделения колледжа</i> <title>Колледж</title> </head> <Body > <HR > <b>< >В колледже функционируют 4 отделения:</b> <Ol> <Li><u >НО</U> <Li><u>ДП</u> <Li><u>МО</u> <Li><u>СР</u> </Ol> </body> </html>
  • 8. Размер шрифта ∗ Другой способ указания размера шрифта – с помощью тэгов <font></font> с атрибутом size. В качестве значений этого атрибута используются целые числа от 1 до 7. Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 – максимальному. Пример ∗ В тэгах <font></font> может использоваться также атрибут color для указания цвета шрифта, ограниченного тэгами текста. Пример
  • 9. тэги <p></p> имеют следующие параметры: ∗ALIGN – выравнивание текста. Возможные значения: LEFT – по левому краю, RIGHT – по правому краю, CENTER – по центру, JUSTIFY – по ширине. <p align=justify>Параграф, выровненный по ширине</p> <p align=left>Параграф, выровненный по левому краю</p> <p align=right>Параграф, выровненный по правому краю</p> <p align=center>Параграф, выровненный по центру</p> Пример
  • 10. Настройка фона ∗ При изображении фона и текста браузеры используют цвета, установленные по умолчанию, — они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в тэге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, ТЕХТ= задает цвет текста для всей страницы. Пример
  • 11.