SlideShare une entreprise Scribd logo
1  sur  17
Язык разметки
текста HTML
HTML-страница
 HTML-страница представляет собой
простой текстовый файл, в котором
наряду с текстом присутствуют
специальные управляющие команды
 Эти команды называются «тегами» и
заключаются в скобки из символов < и >
 Например, <body>
HTML-файл
 Текст HTML-страницы располагается в
файле с расширением .html
 Например, index.html
 Имя файла должно быть написано
строчными (маленькими) латинскими
символами без пробелов и может
содержать цифры и символ «_»
 Например, ivan_ivanov_7.html
Структура HTML-страницы
<html>
<head>
</head>
<body>
</body>
</html>
Пример HTML-страницы
<html>
<head>
</head>
<body>
Этот текст отображается браузером
</body>
</html>
Свойства текста
 Для управления внешним видом
символов текста используются теги:
<b>полужирный</b>
<i>курсив</i>
<u>подчеркнутый</u>
Свойства текста
Для управления размером и цветом
шрифта служит тег:
<font>Текст</font>
В открывающем теге <font>
указываются значения свойств
«размер» и «цвет»:
<font size=‘7’ color=‘blue’>Текст</font>
Свойства текста
 Размер текста может меняться от 1 до
7
 Цвет текста может быть задан либо
зарезервированным словом, например,
‘blue’ – синий, ‘red’ – красный,
‘lightyellow’ – светло-желтый и т.п., либо
числом в шестнадцатеричном формате,
например, ‘#a7c3e9’
Свойства текста
 Первые два символа задают яркость
красного цвета, вторые два символа –
зеленого, а третьи два символа –
синего.
 Каждый символ может быть либо
цифрой, либо одним из шести символов:
a, b, c, d, e, f
Шестнадцатеричный формат чисел
В этом формате каждый символ соответствует
числу в диапазоне от 0 до 15:
 0 – это «0» в десятичной системе счисления
 1 – это «1»
 ..............
 9 – это «9»
 a – это «10»
 b – это «11»
 ..............
 e – это «14»
 f – это «15»
Шестнадцатеричный формат чисел
С помощью двух символов можно представить число в
диапазоне от 0 до 255:
00 – «0»
01 – «1»
.............
0f – «15»
10 – «16»
11 – «17»
12 – «18»
..............
fe – «254»
ff – «255»
Цвет текста
Например,
<font size=‘7’ color=‘#e3f7ee’>Текст</font>
Блок текста
<div align=‘left’>
Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст.
</div>
Свойство align задает тип выравниваения текста.
Возможны четыре значения:
left по левому краю
right по правому краю
center по центру
justify по ширине
Абзац текста
 При большом количестве текста его можно разбить на
несколько частей – абзацев тегом <p></p>
<div align=‘left’>
<p>
Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.
Текст первого абзаца. Текст первого абзаца. Текст первого
абзаца.
</p>
<p>
Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.
Текст второго абзаца. Текст второго абзаца.
</p>
</div>
Изображение
 Для добавления на страницу изображения
служит тег <img>
Например, тег
<img src=‘tux.jpg’>
Показывает изображение, находящееся в
файле “tux.jpg” в том же каталоге, что и файл
HTML-страницы
Размер изображения
 Для задания размеров изображения
служат свойства ‘width’ – ширина и
‘height’ – высота
Например,
<img src=‘tux.jpg’ width=‘100’ height=‘100’>
Значения указаны в пикселях.
Гиперссылки
 Для ссылки на другую HTML-страницу
служит тег <a></a>
Например,
<a href=‘http://www.chukin.ru’>Это гиперссылка</a>
Свойство href указывает URL ресурса, на
который будет осуществлен переход, при
нажатии на гиперссылку

Contenu connexe

En vedette

Lucas digital portfolio
Lucas digital portfolioLucas digital portfolio
Lucas digital portfolioMatthew Lucas
 
Guía metodológica para realizar Consultas Populares en Colombia
Guía metodológica para realizar Consultas Populares en ColombiaGuía metodológica para realizar Consultas Populares en Colombia
Guía metodológica para realizar Consultas Populares en ColombiaCrónicas del despojo
 
Graduationvideo2
Graduationvideo2Graduationvideo2
Graduationvideo2AngieTommy
 
Progrès dans les technologies photovoltaïques: abaissement des coûts et nouve...
Progrès dans les technologies photovoltaïques: abaissement des coûts et nouve...Progrès dans les technologies photovoltaïques: abaissement des coûts et nouve...
Progrès dans les technologies photovoltaïques: abaissement des coûts et nouve...swissolar-romandie
 
new_Effect of Magnetic Fields on Coherent Spectroscopy
new_Effect of Magnetic Fields on Coherent Spectroscopynew_Effect of Magnetic Fields on Coherent Spectroscopy
new_Effect of Magnetic Fields on Coherent SpectroscopyDr. Leah Margalit
 
professional resume final2
professional resume final2professional resume final2
professional resume final2Sabrina McFadden
 
Utilisation efficace de l'eau potable et de l'énergie ; mise en en pratique d...
Utilisation efficace de l'eau potable et de l'énergie ; mise en en pratique d...Utilisation efficace de l'eau potable et de l'énergie ; mise en en pratique d...
Utilisation efficace de l'eau potable et de l'énergie ; mise en en pratique d...swissolar-romandie
 
Analyzing the State of Static Analysis: A Large-Scale Evaluation in Open Sour...
Analyzing the State of Static Analysis: A Large-Scale Evaluation in Open Sour...Analyzing the State of Static Analysis: A Large-Scale Evaluation in Open Sour...
Analyzing the State of Static Analysis: A Large-Scale Evaluation in Open Sour...Moritz Beller
 

En vedette (10)

2012.10.29 新聞簡報
2012.10.29 新聞簡報2012.10.29 新聞簡報
2012.10.29 新聞簡報
 
Lucas digital portfolio
Lucas digital portfolioLucas digital portfolio
Lucas digital portfolio
 
Elena HARCONIŢA, Snejana ZADAINOVA: Particularităţile de dezvoltare a resur...
Elena HARCONIŢA,  Snejana ZADAINOVA: Particularităţile  de dezvoltare a resur...Elena HARCONIŢA,  Snejana ZADAINOVA: Particularităţile  de dezvoltare a resur...
Elena HARCONIŢA, Snejana ZADAINOVA: Particularităţile de dezvoltare a resur...
 
Guía metodológica para realizar Consultas Populares en Colombia
Guía metodológica para realizar Consultas Populares en ColombiaGuía metodológica para realizar Consultas Populares en Colombia
Guía metodológica para realizar Consultas Populares en Colombia
 
Graduationvideo2
Graduationvideo2Graduationvideo2
Graduationvideo2
 
Progrès dans les technologies photovoltaïques: abaissement des coûts et nouve...
Progrès dans les technologies photovoltaïques: abaissement des coûts et nouve...Progrès dans les technologies photovoltaïques: abaissement des coûts et nouve...
Progrès dans les technologies photovoltaïques: abaissement des coûts et nouve...
 
new_Effect of Magnetic Fields on Coherent Spectroscopy
new_Effect of Magnetic Fields on Coherent Spectroscopynew_Effect of Magnetic Fields on Coherent Spectroscopy
new_Effect of Magnetic Fields on Coherent Spectroscopy
 
professional resume final2
professional resume final2professional resume final2
professional resume final2
 
Utilisation efficace de l'eau potable et de l'énergie ; mise en en pratique d...
Utilisation efficace de l'eau potable et de l'énergie ; mise en en pratique d...Utilisation efficace de l'eau potable et de l'énergie ; mise en en pratique d...
Utilisation efficace de l'eau potable et de l'énergie ; mise en en pratique d...
 
Analyzing the State of Static Analysis: A Large-Scale Evaluation in Open Sour...
Analyzing the State of Static Analysis: A Large-Scale Evaluation in Open Sour...Analyzing the State of Static Analysis: A Large-Scale Evaluation in Open Sour...
Analyzing the State of Static Analysis: A Large-Scale Evaluation in Open Sour...
 

Similaire à Html

Работа с текстом в HTML
Работа с текстом в HTMLРабота с текстом в HTML
Работа с текстом в HTMLVasya Petrov
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на htmlANefyodova
 
основы нтмл
основы нтмлосновы нтмл
основы нтмлolgaoov
 
А. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTMLА. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTMLAweb
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрейVlado Sudin
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрейVlado Sudin
 
Html для чайников - Евгений Концевой
Html для чайников - Евгений КонцевойHtml для чайников - Евгений Концевой
Html для чайников - Евгений КонцевойЛеонид Гроховский
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 УрокNexa50
 
Использование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахИспользование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахNetpeak
 

Similaire à Html (20)

Работа с текстом в HTML
Работа с текстом в HTMLРабота с текстом в HTML
Работа с текстом в HTML
 
Html 0
Html 0Html 0
Html 0
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на html
 
Основы HTML
Основы HTMLОсновы HTML
Основы HTML
 
55
5555
55
 
основы нтмл
основы нтмлосновы нтмл
основы нтмл
 
А. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTMLА. Лозенко: SEO-копирайтинг with HTML
А. Лозенко: SEO-копирайтинг with HTML
 
dfvbfgbghbhg
dfvbfgbghbhgdfvbfgbghbhg
dfvbfgbghbhg
 
HTML
HTMLHTML
HTML
 
рабочая тетрадь Html
рабочая тетрадь Htmlрабочая тетрадь Html
рабочая тетрадь Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
 
Html для чайников - Евгений Концевой
Html для чайников - Евгений КонцевойHtml для чайников - Евгений Концевой
Html для чайников - Евгений Концевой
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 Урок
 
Использование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахИспользование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницах
 

Html

  • 2. HTML-страница  HTML-страница представляет собой простой текстовый файл, в котором наряду с текстом присутствуют специальные управляющие команды  Эти команды называются «тегами» и заключаются в скобки из символов < и >  Например, <body>
  • 3. HTML-файл  Текст HTML-страницы располагается в файле с расширением .html  Например, index.html  Имя файла должно быть написано строчными (маленькими) латинскими символами без пробелов и может содержать цифры и символ «_»  Например, ivan_ivanov_7.html
  • 5. Пример HTML-страницы <html> <head> </head> <body> Этот текст отображается браузером </body> </html>
  • 6. Свойства текста  Для управления внешним видом символов текста используются теги: <b>полужирный</b> <i>курсив</i> <u>подчеркнутый</u>
  • 7. Свойства текста Для управления размером и цветом шрифта служит тег: <font>Текст</font> В открывающем теге <font> указываются значения свойств «размер» и «цвет»: <font size=‘7’ color=‘blue’>Текст</font>
  • 8. Свойства текста  Размер текста может меняться от 1 до 7  Цвет текста может быть задан либо зарезервированным словом, например, ‘blue’ – синий, ‘red’ – красный, ‘lightyellow’ – светло-желтый и т.п., либо числом в шестнадцатеричном формате, например, ‘#a7c3e9’
  • 9. Свойства текста  Первые два символа задают яркость красного цвета, вторые два символа – зеленого, а третьи два символа – синего.  Каждый символ может быть либо цифрой, либо одним из шести символов: a, b, c, d, e, f
  • 10. Шестнадцатеричный формат чисел В этом формате каждый символ соответствует числу в диапазоне от 0 до 15:  0 – это «0» в десятичной системе счисления  1 – это «1»  ..............  9 – это «9»  a – это «10»  b – это «11»  ..............  e – это «14»  f – это «15»
  • 11. Шестнадцатеричный формат чисел С помощью двух символов можно представить число в диапазоне от 0 до 255: 00 – «0» 01 – «1» ............. 0f – «15» 10 – «16» 11 – «17» 12 – «18» .............. fe – «254» ff – «255»
  • 12. Цвет текста Например, <font size=‘7’ color=‘#e3f7ee’>Текст</font>
  • 13. Блок текста <div align=‘left’> Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. </div> Свойство align задает тип выравниваения текста. Возможны четыре значения: left по левому краю right по правому краю center по центру justify по ширине
  • 14. Абзац текста  При большом количестве текста его можно разбить на несколько частей – абзацев тегом <p></p> <div align=‘left’> <p> Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. </p> <p> Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. </p> </div>
  • 15. Изображение  Для добавления на страницу изображения служит тег <img> Например, тег <img src=‘tux.jpg’> Показывает изображение, находящееся в файле “tux.jpg” в том же каталоге, что и файл HTML-страницы
  • 16. Размер изображения  Для задания размеров изображения служат свойства ‘width’ – ширина и ‘height’ – высота Например, <img src=‘tux.jpg’ width=‘100’ height=‘100’> Значения указаны в пикселях.
  • 17. Гиперссылки  Для ссылки на другую HTML-страницу служит тег <a></a> Например, <a href=‘http://www.chukin.ru’>Это гиперссылка</a> Свойство href указывает URL ресурса, на который будет осуществлен переход, при нажатии на гиперссылку