SlideShare a Scribd company logo
1 of 13
Создание простейшей  Web- страницы
Простейший пример классического документа: <HTML> <HEAD> <TITLE> Заголовок </TITLE>  </HEAD> <BODY> <H1>Простейший документ</H1> </BODY> </HTML> В браузере  Internet Explorer  это будет выглядеть следующим образом…
<HTML> <HEAD> <TITLE> Заголовок </TITLE>  </HEAD> <BODY> <H1>Простейший документ</H1> </BODY> </HTML>
Тег <P> (парный тег)  Тег <P> применяется для разделения текста на параграфы. Основным атрибутом данного тега является  ALIGN . Атрибут АLIGN позволяет выравнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.  Возможные значения атрибута АLIGN:  АLIGN=justify  выравнивание по левому и правому краям.  АLIGN=left  выравнивание по левому краю.  АLIGN=right  выравнивание по правому краю.  АLIGN=center  центрирование текста и графики.  В браузере  Internet Explorer  это будет выглядеть следующим образом…
<HTML> <HEAD> <TITLE>Заголовок</TITLE>  </HEAD> <BODY> <H1>Выравнивание текста</H1> <p align= left >Параграф выравненный по левому краю</p> <p align= right >Параграф выравненный по правому краю</p> <p align= center >Параграф выравненный по центру</p> <p align= justify >Параграф выравненный по ширине</p> </BODY> </HTML>
Тэг < FONT >  ( парный тег) Данный тэг позволяет объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя. Основными атрибутами тэга < font > являются атрибуты  size  и  color . Атрибут  size  определяет размер шрифта, а атрибут  color  – цвет. Атрибуту  color  может присваиваться название цвета на английском языке, например: <font  color=red > Красный текст </font> <font  color=green > Зеленый текст </font> <font  color=yellow > Желтый текст </font> В браузере  Internet Explorer  это будет выглядеть следующим образом…
<HTML> <HEAD> <TITLE>Заголовок</TITLE>  </HEAD> <BODY> <H1>Цвет текста</H1> <h2> <font color=red> Красный текст </font> <br> <font color=green> Зеленый текст </font> <br> <font color=yellow> Желтый текст </font> </h2> </BODY> </HTML>
Атрибут  size  отвечает за размер шрифта, и может принимать значения от -4 до +4. Например: <font size=+2> Текст больше на 2 размера чем по умолчанию </font>
<HTML> <HEAD> <TITLE>Заголовок</TITLE>  </HEAD> <BODY> <H1>Размер текста</H1> <font color=red > Тескт по умолчению</font><br> <font color=green  size=+1 >Текст увеличенный на один размер</font><br> <font color=green  size=+2 >Текст увеличенный на два размера</font><br> <font color=green  size=+3 >Текст увеличенный на три размера</font><br> <font color=green  size=+4 >Текст увеличенный на четыре размера</font><br> </BODY> </HTML>
Тег <IMG>  Данный тег позволяет вставить изображение в Web-страницу. Обязательным атрибутом является SRC (SouRCe, источник).  Пример вставки изображения: <HTML> <HEAD> <TITLE>Заголовок</TITLE>  </HEAD> <BODY> <h1>Изображение</h1> <IMG SRC=&quot;image.jpg&quot; ALT=&quot;ИЗОБРАЖЕНИЯ&quot;> </BODY> </HTML>
 
Задание
Исходный текст <HTML> <HEAD> <TITLE>Заголовок</TITLE>  </HEAD> <BODY> <font color=Blue size=+3><p align=center>Web-страничка с картинкой </p></font> <font color=green size=+2>Зеленый текст</font><br> <font color=red size=+3>Красный текст</font><br> <font color=gray size=+4>Серый текст</font><br> <IMG SRC=&quot;image.jpg&quot; ALT=&quot;ИЗОБРАЖЕНИЯ&quot;> </BODY> </HTML>

More Related Content

Viewers also liked

Aislingosheamasccc2014
Aislingosheamasccc2014Aislingosheamasccc2014
Aislingosheamasccc2014Jen Boudrie
 
Paulo augusto lobato emater
Paulo augusto lobato ematerPaulo augusto lobato emater
Paulo augusto lobato ematercbsaf
 
2 q11 br properties earnings release presentation
2 q11 br properties   earnings release presentation2 q11 br properties   earnings release presentation
2 q11 br properties earnings release presentationbrproperties
 
Sesiune deschisa - Workshop Acreditat de Colegiul Psihologilor din Romania
Sesiune deschisa - Workshop Acreditat de Colegiul Psihologilor din RomaniaSesiune deschisa - Workshop Acreditat de Colegiul Psihologilor din Romania
Sesiune deschisa - Workshop Acreditat de Colegiul Psihologilor din RomaniaEstuar Foundation / UPA Aestuarium
 
10 F2P Monetisation techniques you need to Supercharge
10 F2P Monetisation techniques you need to Supercharge10 F2P Monetisation techniques you need to Supercharge
10 F2P Monetisation techniques you need to SuperchargeJon Jordan
 
Presentation 2Q11 English
Presentation 2Q11 EnglishPresentation 2Q11 English
Presentation 2Q11 EnglishProvidência
 
Carta - Abatia Cisterciana (nx power_lite)
Carta - Abatia Cisterciana (nx power_lite)Carta - Abatia Cisterciana (nx power_lite)
Carta - Abatia Cisterciana (nx power_lite)Popescu Felicia
 
Bilan Communication PMI Ile-de-France 2009
Bilan Communication PMI Ile-de-France 2009Bilan Communication PMI Ile-de-France 2009
Bilan Communication PMI Ile-de-France 2009Marc Bonnemains
 
Nationale Talent Management Conferentie 2008 Intro (Dutch)
Nationale Talent Management Conferentie 2008 Intro (Dutch)Nationale Talent Management Conferentie 2008 Intro (Dutch)
Nationale Talent Management Conferentie 2008 Intro (Dutch)Willem E.A.J. Scheepers
 
Profarma apresentação 2 q11
Profarma apresentação 2 q11Profarma apresentação 2 q11
Profarma apresentação 2 q11Profarma
 
Civic Exchange 2009 The Air We Breathe Conference - U.S. Politics and Laws as...
Civic Exchange 2009 The Air We Breathe Conference - U.S. Politics and Laws as...Civic Exchange 2009 The Air We Breathe Conference - U.S. Politics and Laws as...
Civic Exchange 2009 The Air We Breathe Conference - U.S. Politics and Laws as...Civic Exchange
 
Rezultate proiect imi pq net ro
Rezultate proiect imi pq net roRezultate proiect imi pq net ro
Rezultate proiect imi pq net roIMI PQ NET Romania
 

Viewers also liked (19)

Aislingosheamasccc2014
Aislingosheamasccc2014Aislingosheamasccc2014
Aislingosheamasccc2014
 
4Q11 Results Presentation
4Q11 Results Presentation4Q11 Results Presentation
4Q11 Results Presentation
 
Paulo augusto lobato emater
Paulo augusto lobato ematerPaulo augusto lobato emater
Paulo augusto lobato emater
 
2 q11 br properties earnings release presentation
2 q11 br properties   earnings release presentation2 q11 br properties   earnings release presentation
2 q11 br properties earnings release presentation
 
Cau hoi bao ve
Cau hoi bao veCau hoi bao ve
Cau hoi bao ve
 
Sesiune deschisa - Workshop Acreditat de Colegiul Psihologilor din Romania
Sesiune deschisa - Workshop Acreditat de Colegiul Psihologilor din RomaniaSesiune deschisa - Workshop Acreditat de Colegiul Psihologilor din Romania
Sesiune deschisa - Workshop Acreditat de Colegiul Psihologilor din Romania
 
Microjobs.ro
Microjobs.roMicrojobs.ro
Microjobs.ro
 
Rachelmck
RachelmckRachelmck
Rachelmck
 
10 F2P Monetisation techniques you need to Supercharge
10 F2P Monetisation techniques you need to Supercharge10 F2P Monetisation techniques you need to Supercharge
10 F2P Monetisation techniques you need to Supercharge
 
a la Luna llegaron los mexicanos
a la Luna llegaron los mexicanosa la Luna llegaron los mexicanos
a la Luna llegaron los mexicanos
 
Presentation 2Q11 English
Presentation 2Q11 EnglishPresentation 2Q11 English
Presentation 2Q11 English
 
Carta - Abatia Cisterciana (nx power_lite)
Carta - Abatia Cisterciana (nx power_lite)Carta - Abatia Cisterciana (nx power_lite)
Carta - Abatia Cisterciana (nx power_lite)
 
Bilan Communication PMI Ile-de-France 2009
Bilan Communication PMI Ile-de-France 2009Bilan Communication PMI Ile-de-France 2009
Bilan Communication PMI Ile-de-France 2009
 
Nationale Talent Management Conferentie 2008 Intro (Dutch)
Nationale Talent Management Conferentie 2008 Intro (Dutch)Nationale Talent Management Conferentie 2008 Intro (Dutch)
Nationale Talent Management Conferentie 2008 Intro (Dutch)
 
Profarma apresentação 2 q11
Profarma apresentação 2 q11Profarma apresentação 2 q11
Profarma apresentação 2 q11
 
4Q11 Results
4Q11 Results4Q11 Results
4Q11 Results
 
Civic Exchange 2009 The Air We Breathe Conference - U.S. Politics and Laws as...
Civic Exchange 2009 The Air We Breathe Conference - U.S. Politics and Laws as...Civic Exchange 2009 The Air We Breathe Conference - U.S. Politics and Laws as...
Civic Exchange 2009 The Air We Breathe Conference - U.S. Politics and Laws as...
 
Rezultate proiect imi pq net ro
Rezultate proiect imi pq net roRezultate proiect imi pq net ro
Rezultate proiect imi pq net ro
 
Sport
SportSport
Sport
 

Similar to презентация111

167 web-__П1
167  web-__П1167  web-__П1
167 web-__П1vadimben
 
2. HTML – язык разметки гипертекста
2. HTML – язык разметки гипертекста2. HTML – язык разметки гипертекста
2. HTML – язык разметки гипертекстаSergei Dubrov
 
Zen Coding
Zen CodingZen Coding
Zen Coding404fest
 
Основные теги HTML
Основные теги HTMLОсновные теги HTML
Основные теги HTMLОтшельник
 
Структура html документа
Структура html документаСтруктура html документа
Структура html документаAndrey Radionov
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Htmlmmlllll
 
советы по коду Html
советы по коду Htmlсоветы по коду Html
советы по коду Htmltalgautb
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTMLssuser3896e2
 
Application Developer Day Conf 2011 Andrey Rebrov
Application Developer Day Conf 2011 Andrey RebrovApplication Developer Day Conf 2011 Andrey Rebrov
Application Developer Day Conf 2011 Andrey RebrovAndrey Rebrov
 

Similar to презентация111 (15)

167 web-__П1
167  web-__П1167  web-__П1
167 web-__П1
 
2. HTML – язык разметки гипертекста
2. HTML – язык разметки гипертекста2. HTML – язык разметки гипертекста
2. HTML – язык разметки гипертекста
 
лекц12
лекц12лекц12
лекц12
 
Zen Coding
Zen CodingZen Coding
Zen Coding
 
Основные теги HTML
Основные теги HTMLОсновные теги HTML
Основные теги HTML
 
Vormid
VormidVormid
Vormid
 
Структура html документа
Структура html документаСтруктура html документа
Структура html документа
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
 
Fresh HTML
Fresh HTMLFresh HTML
Fresh HTML
 
советы по коду Html
советы по коду Htmlсоветы по коду Html
советы по коду Html
 
Libsite
LibsiteLibsite
Libsite
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
 
Application Developer Day Conf 2011 Andrey Rebrov
Application Developer Day Conf 2011 Andrey RebrovApplication Developer Day Conf 2011 Andrey Rebrov
Application Developer Day Conf 2011 Andrey Rebrov
 
лабраб 8
лабраб 8лабраб 8
лабраб 8
 
Html V.1.1
Html V.1.1Html V.1.1
Html V.1.1
 

презентация111

  • 2. Простейший пример классического документа: <HTML> <HEAD> <TITLE> Заголовок </TITLE> </HEAD> <BODY> <H1>Простейший документ</H1> </BODY> </HTML> В браузере Internet Explorer это будет выглядеть следующим образом…
  • 3. <HTML> <HEAD> <TITLE> Заголовок </TITLE> </HEAD> <BODY> <H1>Простейший документ</H1> </BODY> </HTML>
  • 4. Тег <P> (парный тег) Тег <P> применяется для разделения текста на параграфы. Основным атрибутом данного тега является ALIGN . Атрибут АLIGN позволяет выравнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. Возможные значения атрибута АLIGN: АLIGN=justify выравнивание по левому и правому краям. АLIGN=left выравнивание по левому краю. АLIGN=right выравнивание по правому краю. АLIGN=center центрирование текста и графики. В браузере Internet Explorer это будет выглядеть следующим образом…
  • 5. <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> <H1>Выравнивание текста</H1> <p align= left >Параграф выравненный по левому краю</p> <p align= right >Параграф выравненный по правому краю</p> <p align= center >Параграф выравненный по центру</p> <p align= justify >Параграф выравненный по ширине</p> </BODY> </HTML>
  • 6. Тэг < FONT > ( парный тег) Данный тэг позволяет объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя. Основными атрибутами тэга < font > являются атрибуты size и color . Атрибут size определяет размер шрифта, а атрибут color – цвет. Атрибуту color может присваиваться название цвета на английском языке, например: <font color=red > Красный текст </font> <font color=green > Зеленый текст </font> <font color=yellow > Желтый текст </font> В браузере Internet Explorer это будет выглядеть следующим образом…
  • 7. <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> <H1>Цвет текста</H1> <h2> <font color=red> Красный текст </font> <br> <font color=green> Зеленый текст </font> <br> <font color=yellow> Желтый текст </font> </h2> </BODY> </HTML>
  • 8. Атрибут size отвечает за размер шрифта, и может принимать значения от -4 до +4. Например: <font size=+2> Текст больше на 2 размера чем по умолчанию </font>
  • 9. <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> <H1>Размер текста</H1> <font color=red > Тескт по умолчению</font><br> <font color=green size=+1 >Текст увеличенный на один размер</font><br> <font color=green size=+2 >Текст увеличенный на два размера</font><br> <font color=green size=+3 >Текст увеличенный на три размера</font><br> <font color=green size=+4 >Текст увеличенный на четыре размера</font><br> </BODY> </HTML>
  • 10. Тег <IMG> Данный тег позволяет вставить изображение в Web-страницу. Обязательным атрибутом является SRC (SouRCe, источник). Пример вставки изображения: <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> <h1>Изображение</h1> <IMG SRC=&quot;image.jpg&quot; ALT=&quot;ИЗОБРАЖЕНИЯ&quot;> </BODY> </HTML>
  • 11.  
  • 13. Исходный текст <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> <font color=Blue size=+3><p align=center>Web-страничка с картинкой </p></font> <font color=green size=+2>Зеленый текст</font><br> <font color=red size=+3>Красный текст</font><br> <font color=gray size=+4>Серый текст</font><br> <IMG SRC=&quot;image.jpg&quot; ALT=&quot;ИЗОБРАЖЕНИЯ&quot;> </BODY> </HTML>