5 Web HTML HEFS HTML Hypertext Markup Language
5 Основы Web-дизайна: HTML и редактор HEFS Язык HTML = Hypertext Markup Language (язык разметки гипертекста) ! HTML – это не язык программирования! HTML-страница – это текстовый файл (Блокнот): index. html KWrite images <HTML> <HEAD> <TITLE>Моя страница</TITLE> </HEAD> <BODY> Привет! … </BODY> </HTML> К. Поляков, 2007 -2011 sail. jpg bee. wav man. jpg clock. avi sunset. jpg ball. swf http: //kpolyakov. narod. ru
26 Основы Web-дизайна: HTML и редактор HEFS Примеры (ссылки из файла rock. html) stories – story. html novels – list. html – new rock. html sea. html – old verse. html К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
42 Основы Web-дизайна: HTML и редактор HEFS Кодирование цвета • имена red, green, blue, magenta, black, white • шестнадцатеричные коды # FA 8072 R G B # FF 0000 # FFFFFF # 000000 # AAAAAA К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
45 Основы Web-дизайна: HTML и редактор HEFS Подключение стилевого файла qq. html <html> <head> <title>Пример CSS</title> <link rel="stylesheet" href="my. css" type="text/css"> </head> <body>. . . </body> </html> my. css body { color: white; background: #0000 E 0; } К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
47 Основы Web-дизайна: HTML и редактор HEFS Классы (стили оформления) для абзацев класса spec qq. html p. spec { font-style: italic; background: green; } <p class="spec"> L’Etat c’est moi. </p>. spec { font-style: italic; background: green; } К. Поляков, 2007 -2011 L’Etat c’est moi. для всех элементов класса spec <h 1 class="spec"> Россия молодая </h 1> http: //kpolyakov. narod. ru
48 Основы Web-дизайна: HTML и редактор HEFS Размеры, выравнивание: left center right justify 20 px фон p { background: #E 6 E 6 FF; ширина width: 80%; height: 100 px; высота text-align: left; text-indent: 20 px; абзацный } отступ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 100 px 80% К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
49 Основы Web-дизайна: HTML и редактор HEFS Рамка и поля рамка отступы снаружи отступы внутри 40 px solid – сплошная dashed - штриховая dotted – точечная толщина p { background: #ccffcc; цвет border: 1 px solid green; margin: 0 40 px 20 px 40 px; padding: 5 px; сверху, справа, } снизу, слева со всех сторон Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 5 px К. Поляков, 2007 -2011 40 px 20 px http: //kpolyakov. narod. ru
50 Основы Web-дизайна: HTML и редактор HEFS Фоновый рисунок p. hallo { background: white url(images/grad. jpg); } <p class="hallo"> Привет, Вася! </p> Привет, Вася! p. hallo { background: url(grad. jpg) repeat-y; } Привет, Вася! К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
51 Основы Web-дизайна: HTML и редактор HEFS Фоновый рисунок без повторения qq@mail. ru p. email { background: url(letter. gif) no-repeat; padding-left: 20 px; } <p class="email"> <a href="mailto: qq@mail. ru">qq@mail. ru</a> </p> qq@mail. ru 20 px К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
56 Основы Web-дизайна: HTML и редактор HEFS Фон страницы (через CSS) body { background: url(back. jpg); #6 e 5 c 62; } 'images/back. jpg' '. . /images/back. jpg‘ 'http: //www. vasya. ru/images/back. jpg' ! Не должно быть «швов» ! К. Поляков, 2007 -2011 ! Фон не должен мешать! http: //kpolyakov. narod. ru
58 Основы Web-дизайна: HTML и редактор HEFS Выравнивание <IMG SRC="flag. jpg" ALIGN="left"> left top К. Поляков, 2007 -2011 right bottom (по умолчанию) middle http: //kpolyakov. narod. ru
59 Основы Web-дизайна: HTML и редактор HEFS Отступы <IMG SRC="net. jpg" ALIGN="left"> <IMG SRC="net. jpg" ALIGN="left" HSPACE=10 VSPACE=10> VSPACE (vertical space) HSPACE (horizontal space) К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
60 Основы Web-дизайна: HTML и редактор HEFS Выравнивание и отступы (CSS) <img src="net. jpg" class="left"> img. left { = ALIGN float: left; = HSPACE margin: 5 px 10 px; } = VSPACE margin: 5 px 10 px 5 px 0; отступа слева нет! К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
67 Основы Web-дизайна: HTML и редактор HEFS Размеры (через CSS) всей таблицы: table. spec { width: 60%; height: 300; } строки: ячейки: <table class="spec">. . . </table> table. spec tr { height: 50 px; } table. spec td. qq { width: 25%; height: 50 px; } К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
68 Основы Web-дизайна: HTML и редактор HEFS Выравнивание всей таблицы: <TABLE ALIGN="center">. . . </TABLE> информации в ячейках: left, center, right <TABLE BORDER="1"> <TR ALIGN="center" VALIGN="top"> <TD WIDTH=120 HEIGHT=100>По центру, по верхней границе</TD> <TD ALIGN="right" VALIGN="middle" WIDTH=200>По правой границе, по середине</TD> </TR> </TABLE> К. Поляков, 2007 -2011 top, middle, bottom http: //kpolyakov. narod. ru
69 Основы Web-дизайна: HTML и редактор HEFS Выравнивание (через CSS) <table class="ex" border="1"> <tr class="centop"> <td>По центру, по верхней границе</td> <td class="rmid">По правой границе, по середине</td> </tr> table. ex tr. centop { </table> text-align: center; vertical-align: top; height: 100 px; } table. ex td. rmid { text-align: right; vertical-align: middle; width: 200 px; } К. Поляков, 2007 -2011 left, center, right top, middle, bottom http: //kpolyakov. narod. ru
70 Основы Web-дизайна: HTML и редактор HEFS Фон и цвет текста цвет фона <TABLE BORDER="1" BGCOLOR="green"> <TR HEIGHT=30 BGCOLOR="blue"> <TD><FONT COLOR="white">Привет!</FONT></TD> <TD BGCOLOR="red"></TD> </TR> фоновый рисунок <TR> <TD BACKGROUND="web. jpg">Таблица из двух строк</TD> <TD>и двух столбцов</TD> </TR> </TABLE> К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
Основы Web-дизайна: HTML и редактор HEFS 71 Фон и цвет текста (CSS) <table border="1" class="qq"> <tr class="spec"> <td>Привет!</td> <td class="r"></td> table. qq td { </tr> background: green; <tr> } цвет фона <td class="pic"> table. qq tr. spec td { Таблица background: blue; из двух строк</td> <td>и двух столбцов</td> color: white; } </tr> table. qq tr. spec td. r { </table> background: red; рисунок } table. qq td. pic { background: url("web. jpg"); } К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
72 Основы Web-дизайна: HTML и редактор HEFS Отступы интервал между ячейками отступ внутри ячеек <TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue> <TR BGCOLOR = white> <TD WIDTH = 100>1</TD> <TD WIDTH = 100>2</TD> </TR> </TABLE> CELLPADDING К. Поляков, 2007 -2011 CELLSPACING http: //kpolyakov. narod. ru
73 Основы Web-дизайна: HTML и редактор HEFS Отступы (CSS) <table id="qq"> <tr> <td> 1 </td> <td> 2 </td> </tr> </table> padding К. Поляков, 2007 -2011 table#qq { background: blue; border-collapse: separate; border-spacing: 10 px; padding: 10 px; кроме IE 6 } #qq tr { background: white; } border-spacing http: //kpolyakov. narod. ru
Основы Web-дизайна: HTML и редактор HEFS 75 Вложенные таблицы <TABLE BORDER="0" CELLSPACING=10> <TR><TD> <TABLE BORDER="1"> <TR><TD>Вася</TD><TD>Петя</TD></TR> <TR><TD>Маша</TD><TD>Даша</TD></TR> </TABLE> </TD> <TABLE BORDER="1"> <TR><TD>1</TD><TD>22</TD></TR> <TR><TD>333</TD><TD>4444</TD></TR> </TABLE> К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
82 Основы Web-дизайна: HTML и редактор HEFS Фреймы-строки index. html ширина в пикселях или % <HTML> строки <HEAD> <TITLE>Фреймы-строки</TITLE> </HEAD> <FRAMESET ROWS="120, *"> <FRAME SRC="up. html"> <FRAME SRC="down. html" NAME="qq"> </FRAMESET> </HTML> К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
Основы Web-дизайна: HTML и редактор HEFS 83 Сложные структуры (3 фрейма) index. html <FRAMESET COLS="30%, *"> <FRAME SRC="left. html"> <FRAMESET ROWS="40, *"> <FRAME SRC="up. html"> <FRAME SRC="down. html"> </FRAMESET> К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
88 Основы Web-дизайна: HTML и редактор HEFS Блоки (DIV) – любое содержимое <div id="mix"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. </p> <img src="vasya. jpg"> <table> <tr><td>1</td></tr> </table> </div> К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
89 Основы Web-дизайна: HTML и редактор HEFS Блоки (DIV) – рамки и отступы padding Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar. border margin #qq { padding: 5 px 10 px; border: 1 px solid green; margin: 5 px 15 px 10 px; } К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
90 Основы Web-дизайна: HTML и редактор HEFS «Плавающие» блоки <div class="picture"> <img src="dog. jpg"> <p>На природе</p> </div>. picture { float: left; margin: 5 px; } свойства. picture p { блока margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } К. Поляков, 2007 -2011 свойства абзаца внутри блока http: //kpolyakov. narod. ru
Web-страницы. Язык HTML и др. Тема 10. Понятие о Javascript К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
97 Основы Web-дизайна: HTML и редактор HEFS Скрытый блок: как его открыть? найти блок по имени function show ( name ) { var elem = document. get. Element. By. Id(name); if ( elem ) elem. style. display = "block"; } изменить свойство display test. js <head> <script type="text/javascript" src="test. js"> </script> </head> К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru
- Slides: 96
