Уеб технологии 4 к спец...
TRANSCRIPT
Уеб технологии 4 к, спец. БИС,2015-2016 уч. година
Вмъкване на мултимедийни елементи в HTML страницa
Вмъкване на изображения
❖ формати на графичните файлове
❖ графични редактори
❖ използвани тагове в HTML
Файлови формати, поддържани от браузърите
Формат Тип компресия
Максимален брой цветове Най-подходящ за
GIF Lossless 8-битов цвят (256 цвята) Лого, графичен текст, диаграми
JPEG Lossy 24-битов цвят (16,7 милиона цвята) Снимки
PNG-8 Lossless 8-битов цвят (256 цвята)Използва се рядко, защото е като GIF, a има по-малка поддръжка от браузърите
PNG-24 Lossless 24-битов цвят (16,7 милиона цвята)
За изображения, които биха били GIF, но изискват повече цветове
Избор на правилния формат ❖ Снимки, с много и преливащи се цветове - JPEG
❖ Изображение с голяма острота, малко цветове, текст - GIF
❖ Изображение с голяма острота, детайлност и много цветове - PNG
JPEG
PNG
GIF
Подготовка на изображенията за уеб пространството
❖ Компресирайте изображенията
с най-добро качество25,94 К
с намалено качество
7,43 К
с най-малко качество
2,58 К
Фон на изображенията
свойството прозрачност, за GIFизображение на бял фон
Графични редактори
❖ Adobe Photoshop
❖ Macromedia Firework
❖ Corel Photopaint
❖ и др.
Вмъкване на изображения - таг <img>❖ таг <img>, атрибут src указва пътя до файла
<img src=“image.gif”> (изображението се намира в същата папка, в която е страницата)<img src=“files/images/image.png”> (изображението се намира в папка files/images)<img src=“http://users.ue-varna.bg/ssulova/ue-varna/files/image.gpeg> (изображението се зарежда от папка ssulova/ue-varna/files на сайта http://users.ue-varna.bg/)
❖ таг <img>, атрибут border за задаване на рамка, добре е рамките да се задават чрез CSS файла<img border=“0” src=“image.gif”> (за скриване на рамката)
❖ таг <img>, атрибут alt за задаване на алтернативен текст на изображението, когато например браузърът е настроен да не се показват изображенията
<img src=“image.gif” alt=“Моят роден град”>
Вмъкване на изображения пример<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <h2>Пример за вмъкване на изображение</h2>
<p> <img src="../Pictures/_Лого ИУ/ue.gif"></p></body></html>
Вмъкване на изображения пример<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <h2>Пример за вмъкване на изображение със задаване на размери</h2>
<p> <img src="file:///Mac OS X/Users/snezha/Desktop/Small red.gif" alt="Лого на ИУ-Варна" width="100" height=“100"></body></html>
Таг <figure> за HTML 5❖ таг <figure>, чрез него може да се надпише изображениетоПример<!doctype html><html><head> <meta charset="UTF-8"> <title>Пример за вмъкване на изображение с figure</title></head><body> <figure> <img src="../Pictures/_Лого ИУ/ue-blue.gif" width="150" height="150">
<figcaption>Лого на ИУ</figcaption> </figure></body></html>
Вмъкване на аудио и видео клипове
❖ формати на файлове
❖ използвани тагове в HTML
Избор на формат за онлайн аудио
Поточен звук Не поточен звук
RealMedia WindowsMedia
Streaming Quick Time Streaming MP3
MP3MID WAV
За излъчване на живоЗа дистрибуция на файлове,
вграждане на звуци
Избор на формат за онлайн видео
Поточно видео Не поточно видеоRealMedia
WindowsMediaQuick Time
Quick Time
директно излъчванепозволява дълги видеоклиповенепредвидимо качество
контрол на качеството не изисква спец. сървър може да се изтегли
Браузъри и поддръжка ма мултимедия
❖ използва се html 5 и се поставя съобщение на потребителя какви браузъри трябва да използва
❖ използва се тага <object> и се вмъква в страницата външен плеър, който поддържа съответния формат
Taгове <audio> и <video>
❖ <audio scr=“име на файл”></audio>
❖ <video scr=“име на файл”></video>
Атрибути на<audio> и <video>
❖ autoplay - указва дали файлът ще започне да се възпроизвежда веднага
❖ controls - показва контрола за спиране и пускане на мултимедията
❖ loop - указва дали възпроизвеждането да започне отново след като се стигне до края
Вмъкване на аудио - пример<!doctype html><html><head><meta charset="UTF-8"><title>Пример за вмъкване на аудио</title></head><body><audio src="Beethoven - Furelise.mp3" controls autoplay ></audio></body></html>
Вмъкване на видео - пример
<!doctype html><html><head><meta charset="UTF-8"><title>Пример за вмъкване на видео</title></head><body><video src="../Movies/Teaser1.mp4" controls autoplay ></video></body></html>
Taг <source>❖ за създаване на списък за възпроизвеждане на мултимедийни файлове с различен формат (ако браузърът не поддържа някои от форматите)<audio controls="controls"> <source src="Bach - Beethoven-Furelise.mp3"
type="audio/mpeg"><source src="Beethoven-Furelise.ogg" type="audio/ogg">
Вашият браузър не поддържа тага audio</audio>
Вмъкване на видео от YouTube❖ с тагове <object> и <iframe>
<object width="560" height="315"><embed src=“https://www.youtube.com/embed/d-lNWINdgPE”></embed></object> (таг <embed> за възпроизвеждане на аудио и видео в html 4)
<iframe width="560" height="315" src="https://www.youtube.com/embed/d-lNWINdgPE" frameborder="0" allowfullscreen></iframe>
Вмъкване на хиперлинкове
Хиперлинкове
❖ сочат към друга html страница
❖ към файлове
❖ е-mail адреси
❖ др. Интернет ресурси
Taг <а> … </a>
❖ за създаване на текстови връзки
❖ пример:<a href=“ht tp ://www.ue-varna .bg"> Икономически университет - Варна</a>
Таг <a> - атрибутиАтрибут Описание
accessey За задаване на клавишна комбинация за бърз достъп до връзкатаcoords За задаване на координати на активна областdownload За изтегляне на файл, към който сочи връзкатаhref За указване на адреса на Интернет ресурса, който трябва да се отвориhreflang За задаване на езика на Интернет ресурса, който се отваряname За име на връзката, използва се при JavaScript сценариитеrel Връзка между документа, който ще се отвори и текущата страницаrev Връзка между текущата страница и документа, който ще се отвориshape За задаване на формата на активната област на връзкатаtabindex За определяне на последователността на избор на връзките с клавиша TABtarget За задаване на прозореца или фрейма, в който се отваря връзкатаtitle Име на връзката, показва се когато се задържи мишката над връзкатаtype Задава MIME типа на документа, към който сочи връзката
Хиперлинкове към уеб страница<!doctype html><html><head><meta charset="UTF-8"><title>Примери за хиперлинкове</title></head><body><a title="Материали" href="http://users.ue-varna.bg/ssulova">Сайт с учебни материали</a><p><a target="_blank" href="http://users.ue-varna.bg/ssulova/ue-varna/Zimen_semestr.html">Учебни материали за зимния семестър</a></p></body></html>
<!doctype html><html><head><meta charset="UTF-8"><title>Примери за хиперлинкове</title></head><body><a href="mailto:[email protected]">Е-mail за кореспонденция</a></body></html>
Хиперлинк към e-mail
<!doctype html><html><head><meta charset="UTF-8"><title>Пример за ftp хиперлинк</title></head><body><a href="ftp://deimos.ue-varna.bg/files/test.zip">FTP връзка</a></body></html>
Хиперлинк към ftp ресурс
Графични хиперлинкове❖ различават се по наличието на изображение
<!doctype html><html><head><meta charset="UTF-8"><title>Примери за хиперлинкове</title></head><body><a title="Материали" href="http://users.ue-varna.bg/ssulova"><img src="sait.png"></a></body></html>
Хиперлинкове чрез карта❖ в тага <img> се използва атрибута usemap, a в двойния таг <map> се описва самата карта, определят се областите от изображението, към които се добавят връзки; областите се описват с тага <area>, а атрибутът shape задава вида на областта, координатите се задават с coords
❖ за кръг - координатите са <Х на центъра>, <У на центъра><радиус>
❖ за правоъгълник - координати на горния ляв ъгъл <Х1>,<У1> и <Х2>,<У2> - координати на долния десен ъгъл
❖ за многоъгълник се задават всички двойки върхове <Х1>,<У1> … <Хn>,<Уn>
Хиперлинкове чрез карта<!doctype html><html><head><meta charset="UTF-8"><title>Хиперлинк чрез карта - изображение</title></head><body><img src="sait.png" usemap="#Map"><map name="Map"> <area shape="rect" coords="104,4,584,42" href="http://www.ue-varna.bg" target="_blank"></map></body></html>
Хиперлинкове за навигация<!doctype html><html><head><meta charset="UTF-8"><title>Хиперлинк за навигация</title></head><body><a href="http://users.ue-varna.bg/ssulova/ue-varna/Nacalo.html">Начало</a> | <a href="http://users.ue-varna.bg/ssulova/ue-varna/Zimen_semestr.html">Зимен семестър</a> | <a href="http://users.ue-varna.bg/ssulova/ue-varna/Leten_semestr.html">Летен семестър</a> | <a href="http://users.ue-varna.bg/ssulova/ue-varna/Galeria.html">Галерия</a> | </map></body></html>
Препратки към текст от страницата - anchors
<!doctype html><html><head><meta charset="UTF-8"><title>Хиперлинк към текст от страницата</title></head><body><h2 id="tips">Полезна информация</h2><a href="#tips">Отиди на полезна информация</a></body></html>
Създаване на таблици
Тагове за работа с таблици
<table> <th>
…
<td> <tr>
Таг <table>…</table>❖ <table>..<table/> за създаване на таблица
❖ <tr>..</tr> - ред
❖ <td>..</td> - колона
❖ пример<table style="width:80%"> <tr> <td>Иван</td> <td>Петров</td> <td>30</td> </tr> <tr> <td>Мария</td> <td>Иванова</td> <td>54</td> </tr></table>
Таг <table> - атрибутиАтрибут Описание
align Използва се за подравняване на таблицата - left, center, rightbackground Задава фон на таблицатаbgcolor Цвят на фона на таблицатаborder Дебелина на рамкатаbordercolor Цвят на рамкатаcellpading Отстъп от рамката до съдържаниетоcellspasing Разстояние между клетките в пикселиcols Брой колони в таблицатаheight Височина на таблицата в пиксели или в % от височината на браузъраrules Вид на разделителната линия между клеткитеsummary Кратко описание на таблицата (за SEO)width Ширина на таблицата в пиксели или в % от ширината на браузъра
Таг <tr> - атрибутиАтрибут Описание
align За подравняване на съдържанието на клетката по хоризонтала - left, center, right, justify
bgcolor Цвят на фона на клетките от реда
bordercolor Цвят на рамката на клетката от реда
valign За подравняване на съдържанието на клетката по вертикала
Таг <td> - атрибутиАтрибут Описание
abbr Описание на съдържанието на клетката
align За подравняване на съдържанието на клетката по хоризонтала - left, center, right, justify
bgcolor Цвят на фона на клетката
bordercolor Цвят на рамката на клетката
colspan За обединяване на клетки по хоризонтала
rowspan За обединяване на клетки по вертикала
height Височина на клетката
valign За подравняване на съдържанието на клетката по вертикала
width За задаване на ширина на клетката
Пример за таблица (1)<!doctype html><html><head><meta charset="UTF-8"><title>Untitled Document</title></head><body><table width="50% border="0" sellspacing="1" bgcolor="#000000"><tr bgcolor="#F5E8FF"><td>1</td><td>2</td><td>3</td></tr><tr bgcolor="#F5E8FF"><td>4</td><td>5</td><td>6</td></tr><tr bgcolor="#F5E8FF"><td>7</td><td>8</td><td>9</td></tr></body></html>
Пример за таблица (2)<!doctype html><html><head><meta charset="UTF-8"><title>Untitled Document</title></head><body><table width="50% border="0" sellspacing="1" bgcolor=“#000000" rules="cols"><tr bgcolor="#F5E8FF"><td>1</td><td>2</td><td>3</td></tr><tr bgcolor="#F5E8FF"><td>4</td><td>5</td><td>6</td></tr><tr bgcolor="#F5E8FF"><td>7</td><td>8</td><td>9</td></tr></body></html>
Пример за таблица с обединени клетки (3)<!doctype html><html><head><meta charset="UTF-8"><title>Untitled Document</title></head><body><table width="50% border="0" sellspacing="1" bgcolor=“#000000"><tr bgcolor="#F5E8FF"><td>клетка 1</td><td colspan="2"align="center">клетка 2 обединена с клетка 3</td></tr><tr bgcolor="#F5E8FF"><td>клетка 4</td><td>клетка 5</td><td>клетка 6</td></tr><tr bgcolor="#F5E8FF"><td>клетка 7</td><td>клетка 8</td><td>клетка 9</td></tr></body></html>
Секции в таблица❖ <th> - за отделяне на заглавните клетки в таблицата, използва се вместо <td>, в CSS файла може да се задава едно оформление за заглавната част, друго за останалата част от таблицата
❖ <thead> - описва заглавието на таблицата
❖ <tbody> - описва тялото, основната част на таблицата
❖ <tfoot> - описва, края на таблицата, поставя се преди тага <tbody> и след тага <thead>, но клетките, които се създават с него се показват в каря на таблицата
Пример за таблица със секции <table> <thead> <tr> <th>Месец</th> <th>Спестявания</th> </tr> </thead> <tfoot> <tr> <td>Сума</td> <td>180 лв.</td> </tr> </tfoot> <tbody> <tr> <td>Януари</td> <td>100 лв.</td> </tr> <tr> <td>Февруари</td> <td>80 лв.</td> </tr> </tbody></table>
Таблично оформление на HTML страници
❖ предимства - съвместимост с всички браузъри, простота
❖ недостатък - получава се доста обемист код за по-сложните страници
Пример за оформление с таблица <table width="100%" height="100%" border="0"> <tr> <td colspan="3" valign="center" align="center">Заглавна част</td> </tr> <tr> <td valign="top" width="25%">Меню</td> <td valign="top" width="50%">В своята 95-годишна история Икономически университет - Варна е подготвил над 110 хиляди икономисти, в това число много чужди граждани от повече от 60 страни.</td> <td valign="top" width="25%">Реклами</td> </tr> <tr> <td colspan="3" valign="center" align="center">футър</td> </tr></table>
Структуриращи тагове
Семантични структуриращи тагове
<header>
<nav><section><header>
<article>
<footer>
<aside>
<footer>
Структура на уеб страница
Заглавна част
Навигация
Долно постоянно заглавие
Съдържание Десен панел
HTML 4❖ чрез <div> с id
<html><head> … </head><body> <div id="header"> … </div> <div id="navigation"> … </div> <div id="sidebar"> … </div> <div id="content"> … </div> <div id="footer"> … </div></body></html>
HTML 5❖ чрез семантичните структуриращи тагове - <header>, <footer>, <nav>,
<aside>, <section>
<html><head> … </head><body> <header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer></body></html>
Пример<html><head> <title>HTML 5 семантични структуриращи тагове/title> <link href="styles/semantic-tags.css" rel="stylesheet" type="text/css" /> </head><body>
<header><h1>Заглавна част</h1>
</header><nav>
<ul><li> <a href="#"> Меню 1</a> </li><li> <a href="#"> Меню 2</a> </li><li> <a href="#"> Меню 3</a> </li>
</ul></nav><aside>
<ul><li> <a href="#">Линк 1</a> </li><li> <a href="#">Линк 2</a> </li><li> <a href="#">Линк 3</a> </li>
</ul></aside><section>
<h2>Икономически университет - Варна днес</h2><p>
В своята 95-годишна история Икономически университет - Варна е подготвил над 110 хиляди икономисти, в това число много чужди граждани от повече от 60 страни. Днес в университета се обучават 13 000 български и чуждестранни студенти, подготвяни от 300 редовни преподаватели, от които над 120 са хабилитирани. Икономически университет - Варна е акредитирана образователна и научна институция, сертифицирана по ISO 9001:2008, която не спира да утвърждава своя авторитет.
</p></section><footer>
<h1>Долно постоянно заглавие</h1></footer>
</body></html>
Резултат
Форми за въвеждане на данни
HТML формата съдържа
❖ текстови полета (text fields), списъци (drop-down lists), радио бутони (radio buttons), отметки (checkboxes), полета за дата и време (date / time fields) и др.
❖ бутони за действие - изпрати, влез …
Създаване на HТML форма
❖ Таг <form>…</form>
❖ Пример<form method="post" action="path/to/some-script.php"> <!-- полета от формата --></form>
Таг <form>…</form>❖ action - указва къде да се изпратят данните, към кой скрипт или към коя asp, php, perl страница
❖ method - задава метода, по който ще се предават данните
❖ <form action=“index.php” method=“get”> - данните се предават на сценария index.php чрез метода get. След натискане на бутона за изпращане адресът се променя по следния начин:http://сървър/index.php?username=name&passwd=123456За да не се виждат данните метод post.
Методи Get и Post
❖ Get – данните се добавят след URL адреса, изпращан към сървъра, разделени с ?. Напр: http://сървър/index.php?username=name&passwd=123456 – не е подходящ метод за изпращане на пароли и лична информация. Могат да се добавят до 256 символа след URL
❖ Post - не се вижда изпратеното съдържание и ограничение за броя на символите, които се изпращат
Текстови полета за форми❖ Текстови полета от един ред:
<input type="text" name="firstname"/>
❖ Многоредови текстови (Multi-line text input fields) <textarea><textarea name="comments">Това е текстово поле на няколко реда</textarea>
❖ полета за парола<input type="password" name="pass" />
Бутони за форми❖ Reset – връща форма в първоначалния й вид
<input type="reset"/>
❖ Submit – изпраща данните към сървъра<input type="submit" value="Изпрати" />
❖ Image – изпраща данните с картинка<input type="image" src="my.gif" name="goBtn" alt="Submit" />
❖ Static – няма зададено действие по подразбиране, използва се с JavaScript<input type="button" value="click me" />
Checkboxes и Radio Buttons❖ Checkboxes – полета за отметки
<p><input type="checkbox" name="agree" value=“yes">Съгласен съм</p>
❖ Radio buttons - бутони за алтернативен избор пример за радио бутони в група, наречена city<input type="radio" name="city" value="1" /> София <br /><input type="radio" name="city" value="2" /> Москва<br /><input type="radio" name="city" value="3" /> Париж <br /><input type="radio" name="city" value="4" /> Рим <br /><input type="radio" name="city" value="5" /> Виена
Полета за избор на опции❖ Drop-down списъци:
<select name="gender"> <option value="Value 1">Мъж</option> <option value="Value 2" >Жена</option> </select>
❖ Multiple-select списък<select name="products" multiple="multiple"> <option value="1">захар</option> <option value="2">брашно</option> <option value="3" selected="selected">сол</option></select>
Групиране на полета❖ <fieldset> - за групиране на полета
<fieldset> <legend>Лична информация:</legend> Име:<br> <input type="text" name="firstname" value="Mickey"> <br> Фамилия:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Изпрати"> </fieldset>
Range и Spinbox
<input type="range" min="0" max="100" />
<br>
<input type="number" min="0" max="100" />
Други елементи
❖ <input name="startDate" type="date" />
❖ <input name="arrivalTime" type="time" />
❖ <input name="start" type="file" />
❖ …
Атрибути на полетата❖ аutocomplete, autofocus, required, email, …
<input type="text" name=“fName" autocomplete="on" />
<input name="start" type="file" />
<input type="text" required="true" />
<input type="email" required="true" />
Пример за форма (1)
<form> Име:<br> <input type="text" name="firstname"> <br> Фамилия:<br> <input type="text" name="lastname"> <br><br> <input type="submit" value="Submit"></form>