ИНФОРМАЦИОННИ ТЕХНОЛОГИИ: HTML език
Въведение в Web-дизайна
I част
I част - Увод в HTML
1. Общи сведения за HTML
HTML се използва за описване на структурата на даден документ използвайки маркери - така наречените тагове. HTML документите са съвкупност от маркиращи тагове. Маркиращите HTML тагове, накратко биват наричани тагове.
HTML е езикът, който казва на браузъра как да покаже страницата
HTML файлът съдържа само букви, цифри и символи,
които се четат от кой да е редактор и това прави HTML универсален език.
HTML може да се усъвършенства допълнително с JavaScript и Java (Dynamic HTML)
2. Основни елементи
Основните елементи се наричат тагове, които си имат имена записани между две ъглови скоби < >
Първият таг е <html>, последният </html>.
Повечето елементи в HTML се пишат със отварящ таг, затварящ таг и съдържанието помежду им. Тоест самият елемент представлява тези три неща.
3. Основна структура на документа
<HTML>
<HEAD> ................ Заглавна част
</HEAD>>
<body> .................. Същинска част
</BODY>
</HTML>
4. Заглавна част
Съдържа описателна информация – заглавие, автор, ключови думи, кодиране на страницата и др.
Заглавието записано между таговете <TITLE> и </TITLE> се показва в заглавния ред на браузъра – пример <title> This is my first page В тази част се добавят и скриптовете на JavaScript и МЕТА - таговете
Таг за коментар
Коментарите се изписват между следните две форми
Пример:
Мета тагове
МЕТА таговете са изключително важен и полезен инструмент. Те могат да имат следните два формата:
МЕТА тагове, съдържащи атрибута HTTP-EQUIV и атрибута CONTENT. Те се използват, за да управляват определени действия на браузъра.
<meta http-equiv="име" content="съдържание" />
МЕТА тагове, съдържащи атрибута NAME и атрибута CONTENT. Te се използват за да подават определена информация на търсещите машини (търсачките).
<meta name="име" content="съдържание" />
Мета таговете нямат затварящ таг в HTML!
Някои важни МЕТА тагове
<meta http-equiv="content-type" content="text/html; charset=windows-1251" /> - указание, че страницата е написана на кирилица
<meta name="description" content="Тук се пише кратко описание на сайта." />
<meta name="keywords" content="ключови думи, които се отделят със запетаи." />
<meta name="author" content="Вашето име." />
<meta http-equiv="refresh" content="някаква цифра, например 10;URL=http://Някакъв уеб адрес" />
II част - Документ
1. Тяло на документ <BODY>
В секцията BODY се намира основната част от съдържанието на една HTML -страница - текста, изображенията и изобщо всичко, което е видимо на екрана на потребителя.
Тагът <body> може да съдържа няколко атрибута, които определят до известна степен външния вид на HTML -страницата.
2. Атрибута BGCOLOR:
Задава фоновия цвят на страницата.
Като фон може да бъде зададен всеки от основните цветове, както и всякакъв оттенък на цвят, получен в следствие на някаква цветова комбинация.
<body bgcolor="английско название на желания цвят">
Пример: <body bgcolor="yellow">
3. Атрибут BACKGROUND
Ако искаме за фон да използваме някакво изображение – картинка или снимка.
<body background="picture.jpg">
По този начин изображението ще изпълни целия прозорец на браузъра - от горе до долу и от едната страна до другата - с многократно повтарящи се свои копия.
Изображението трябва да се намира в същата папка (folder), в която се намира и HTML-файла.
4. Атрибута TEXT
Задава се цвета на текста в страницата.
<body text="red">
Подразбиращия се цвят на текста е черен.
5. Атрибути link, alink и vlink
Атрибута link указва какъв да бъде цвета на текстовите хипервръзки в HTML-документа. Текстова хипервръзка се нарича онази дума или комбинация от думи в HTML-страницата, върху която щракате с мишката, за да отидете на друга страница или на друга част от същата страница.
Атрибута link указва по-специално какъв да бъде цвета на непосетените хипервръзки (преди да е щракано върху тях).
alink указва в какъв цвят да се оцветяват хипервръзките в момента на щракането върху тях. vlink указва как да са оцветени вече посетените връзки.
Заключение:
Всички атрибути в таговете могат да се използват комбинирано.
Реда, в който се изброяват няма значение.
<body bgcolor="black" text="white" link="blue" alink="yellow" vlink="green"> Задача: въведете в текстов редактор следния текст, който е част от уеб документ, след което съхранете файла с име ex1.html
<html>
<head>
<title> Моят първи web-докумен </title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<body bgcolor=“yellow” text=“red” link=“blue” alink=“red”
link=“grey”> Здравейте! <br> Това е моята първа страничка.
</body>
</html>
III част - Текст
1. Текста в страницата
<font> - тагът, който съдържа атрибутите на текста.
За разлика от тага <body> той не може да се ползва без нито един атрибут, но също има затварящ таг - </font>
Атрибутите на тага font са face, size и color.
2. Атрибута FACE:
Задава външния вид на шрифта.
<font face="Название на шрифта">Тук се пише текст</font>
По отношение използването на шрифтовете запомнете следното:
-- За да види даден потребител използвания от вас шрифт той също трябва да го има на своя компютър. В противен случай браузъра ще му покаже вашия текст в шрифт по подразбиране.
-- Не с всички шрифтове може да се пише на кирилица.
3. Атрибута SIZE
Size е атрибута за размер (големина) на текста и може да приема стойности от 1 до 7 включително. <font size="2">Това е текст с големина 2</font>
Освен твърдо зададен размер на шрифта е възможно да се укаже и относителен размер.
Браузърите показват големина на шрифта по подразбиране с размер 3.
<font size="-1">Това е текст с един размер по-малък от подразбиращия се.</font>
<font size="+1">Това е текст с един размер по-голям от подразбиращия се.</font>
4. Таг за заглавия <H>
Тага <h> е придружен с някаква цифра от 1 до 6 включително. Той има и съответния затварящ таг. <h4>Това е заглавие от ниво 4</h4>
При използването на този таг автоматично се добавя по един празен ред над и под текста на заглавието.
5. Атрибута COLOR
Задаването на цвят става като се присвои някаква стойност на атрибута color.
<font color="blue">Това е син текст</font> <font color="green">Това е зелен текст</font>
Комбинирано задаване на атрибути: <font face="arial" size="4" color="green">Това е текст в шрифт arial, с размер 4 и зелен цвят</font>
6. Инструменти за допълнително въздействие върху вида на текста
Основните инструменти за преправяне вида на текста са таговете <b>, <i> и <u>. Всеки от тях има и завършващ таг с наклонена черта.
Тага <b> служи за удебеляване на текста.
Тага <i> прави текста курсивен (наклонен).
Тага <u> прави текста подчертан.
IV част - Цвят
1. Обща информация:
цветовете на фона на страницата и на текста могат да се задават чрез изписване на английското название на съответния цвят, например: <font color="blue"> Това е син текст</font> <body bgcolor="yellow"> (Задава жълт цвят на фона)
Не всички оттенъци могат да се изобразят чрез изписване на съответното английско название.
Не е препоръчително изобщо да използвате езиковите названия на цветовете, за да зададете цвят.
2. Кодиране на цветовете:
Браузърите показват всички цветове чрез комбиниране на различните стойности на само 3 цвята: червен (Red), зелен (Green) и син (Blue). Това е т.нар. RGB стандарт. Всеки един от тези 3 основни цвята може да приема стойности от 0 до 255. Всички останали цветове представляват някаква комбинация от тези стойности. Например кода за бял цвят е R:255, G:255, B:255, а кода за черен цвят е R:0, G:0, B:0, т.е. нулата "създава" най-тъмната част на спектъра, а 255 - най-светлата. HTML не възприема десетичните стойности на цветовете, затова те се превръщат в 16-сетични стойности. Така например 255 се изобразява в 16-сетичен код като FF, а 0 като 00.
3. HTML-код за цвят:
HTML-кода за бял цвят има вида #FFFFFF, а HTML-кода за черен цвят е #000000.
<body bgcolor="#ffffff" text="#000000">
http://htmllessons.hit.bg/colors16.html - таблица на 216 цвята и техните 16-тични кодове
4. Изображения
Изображенията - картинки, фотографии и др., анимирани или статични - са важна част от почти всеки сайт в мрежата. Добре подбрани и разположени, те могат да "освежат" HTML-страницата ви, но претрупването на една страница с изображения може да постигне и обратния ефект, като я направи непривлекателна. Освен това използването на прекалено много изображения ще направи страницата "тежка" и трудна за зареждане.
5. Формати на файловете за изображения:
gif формат, който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат "сложни" оттенъци и светлосенки. Файловете с разширение gif имат две важни предимства пред другия основен формат:
- могат да съдържат "прозрачен" елемент в себе си - това например може да е фона на буквите от някакъв надпис, който ще прозира и под него ще се вижда фона на страницата. Тогава този файл ще "пасва" на страници с различно оцветен фон.
- gif файловете могат да бъде анимирани - да съдържат движеща се картинка.
jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии. Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на gif формата, но за сметка на това jpg файла не може да бъде анимиран, нито да съдържа прозрачни елементи.
6. Търсене и сваляне на изображения от WEB
Безплатни изображения може да намерите като търсите по ключови думи, например free images, free animated gifs, free pictures, free graphics, free clip art, free buttons, free backgrounds, free interfaces и т.н. Записване на изображение с командата "Save Picture As". Преди да вземете някое изображение и да го използвате в страницата си е нужно да се уверите, че то не е обект на авторското право и че е безплатно!!!
7. Показване на изображения в HTML-документа
<img src="myimage.gif" />
По подразбиране изображението се появява в лявата част на страницата. Ако желаем да разположим изоброжението вдясно или в средата на страницата трябва да използваме тага <div< и атрибута му align със съответните стойности - left (което е и по подразбиране), right и center.
Например
<div align="center"><img src="Example.gif" /></div>
8.1. Атрибути на тага за изображение:
Атрибутите width и height задават съответно ширина и височина на изображението в пиксели. Атрибута alt задава алтернативно название на изображението (текст, който се показва, в случай, че браузърът не може да зареди изображението).
<img src="Example.gif" width="163" height="73" alt="Image Example" />
8.2. Атрибути на тага за изображение:
Атрибута align – подравняване на изображението спрямо текста
<img src="Example.gif" width="163" height="73" align=“top/bottom/middle и др." /> Атрибута hspace задава свободно пространство отляво и отдясно на изображението, а атрибута vspace - отгоре и отдолу. Стойностите са в пиксели.
V част - Хипервръзки
1. Обща информация:
Хипервръзките трябва да са разположени така, че да улесняват навигацията из сайта и да имат подходящи названия, които да указват на посетителите на страницата къде ще попаднат, когато кликнат върху тях.
Хипервръзките могат да бъдат текстови, а е възможно във вид на хипервръзки да се използват и изображения.
2. Текстови връзки към други файлове:
<a href="адреса, към който ще води връзката">названието на връзката, което ще се вижда на екрана</a>
Пример: <a href="http://www.yahoo.com"> Връзка към www.yahoo.com</a>
Пример за хипервръзка към страница от същия сайт:
<a href="folder1/page2.html">Връзка към страница page2.html, намираща се в папка folder1, от началната страница index.html</a>
3. Хипервръзки към части от една и съща страница:
Първо трябва да създадете т. нар. котва и да я поставите на мястото от страницата, към което пускате връзка. Котвата трябва да има следния формат: <a name=“bottom” a> (името на котвата се избира произволно)
След това на съответнотот място в страницата се поставя самата хипервръзка, която ще води към вече направената котва. Тя трябва да изглежда така: <a href="#bottom">Връзка към долната част на страницата</a>
4. Хипервръзки към e-mail и файл на FTP-сървър
<a href="mailto:some-name@some-where.com">some-name@some-where.com</a> <a href="ftp://some-address.com/some-file.zip">Връзка към файл в zip формат от FTP сървър</a> 5. Хипервръзки, които се отварят в отделен прозорец:
Всяка хипервръзка в интернет може да се отвори в отделен прозорец, ако преди да щракнете върху нея натиснете бутон "Shift" (с надпис Shift и/или дебела стрелка, сочеща нагоре). Но много потребители в интернет не познават пълните възможности на клавиатурата.
HTML дава възможност да зададете отваряне на хипервръзка в нов прозорец чрез използване на атрибута target. Той може да приема няколко стойности. За да зададете отваряне на хипервръзка в нов прозорец трябва да присвоите на атрибута target стойност _blank.
<a href="http://www.yahoo.com" target="_blank"> Връзка към Yahoo, която ще се отвори в нов прозорец</a>
6. Изображенията като хипервръзки:
<a href="http://www.somesite.com"> <img src="image.gif" > </a>
VI част - Таблици
1. Обща информация:
Таблиците са изключително важен инструмент при създаването на една уеб-страница. Често цялата страница е разположена в таблица, чиито редове и колони оформят различните части на HTML-документа. Често в HTML-страниците се прави и изброяване на някакви елементи. В тези случаи е подходящо да се използват специалните тагове на HTML за списъци, тъй като това придава по-подреден вид на страницата.
2. Тагове за създаване на таблица
Таблиците в HTML-документа винаги са разположени между двата основни тага <table> и </table>.Между тези два тага се изписват:
таговете за табличен ред - <tr> и </tr>
таговете за таблична клетка, чрез които се оформят редовете и колоните - <td> и </td>
Ако искаме таблицата да има очертания се добавя атрибута BORDER.
Пример:
Кода на таблица само с две колони и с три реда изглежда така:
<table border="1">
<tr>
<td>1-ви ред, 1-ва колона </td> <td>1-ви ред, 2-ра колона </td> </tr>
<tr>
<td>2-ри ред, 1-ва колона </td>
<td>2-ри ред, 2-ра колона </td> </tr> <tr>
<td>3-ти ред, 1-ва колона </td>
<td>3-ти ред, 2-ра колона </td> </tr>
</table>
3. Атрибути на таговете за оформяне на таблици:
border и bordercolor ;
bgcolor - цвят на вътрешното пространство
width и height - ширина и височина (в цели числа или в %)
cellspacing и cellpadding - разстояние между клетките и между текста и очертанията
align и valign - местоположението на таблицата на екрана;
align = center, left или right
valign = top, middle или bottom
4. Заключение за таблиците:
В клетките на таблиците може да се пише текст, като параметрите му се определят чрез познатия вече таг font и съответните му атрибути.
В таблиците може да се поставят и изображения – чрез познатия таг img в клетката, в която желаете да се появи изображението.
Могат да се влагат таблици една в друга.
Могат да се сливат клетки с атрибутите - colspan и rowspan.
5. Неномерирани списъци:
Неподредени списъци:
<ul> <li>Първи елемент от списъка
</li> <li>Втори елемент от списъка
</li> <li>Трети елемент от списъка </li> </ul>
Ефекта от този код в браузъра е следния:
Първи елемент от списъка
Втори елемент от списъка
Трети елемент от списъка
Знакът, който се появява пред всеки ред в списъка, е по подразбиране черен запълнен кръг. Ако желаете да използвате други символи трябва да ги зададете като стойности към атрибута type на тага ul.
Възможните стойности са три: disc (запълнен кръг като този, който е по подразбиране), circle (незапълнен кръг), square (запълнен квадрат). Например: <ul type="circle">
6. Номерирани списъци:
Подредените списъци извършват подредбата на елементите по един от следните начини:
чрез арабски цифри
чрез големи римски цифри
чрез малки римски цифри
чрез главни латински букви
чрез малки латински букви
Пример: <ol type="I"> <li>Първи елемент от списъка, номериран с големи римски цифри /li>
<li>Втори елемент от списъка, номериран с големи римски цифри
</li> <li>Трети елемент от списъка, номериран с големи римски цифри
</li> </ol>
<ol type="a">
<li>Първи елемент от списъка, обозначен с малки букви </li>
<li>Втори елемент от списъка, обозначен с малки букви </li>
<li>Трети елемент от списъка, обозначен с малки букви </li>
</ol>
VII част - Формуляри
1. Обща информация:
Формулярите служат за обмяна на информация между разработчика на сайта и неговите посетители. Чрез тях потребителите дават информация за себе си, попълват анкети, дават мнения и др. Всеки формуляр започва с отварящ таг <form> и завършва с </form>. Между тях се разполагат други тагове – input, select... в зависимост от предназначението на формуляра.
2. Видове формуляри:
Въвеждане на поле за текст:
<input type=“text” name=“Име” size=“45” maxlenght=“40” value=“стойност по подразбиране”> Въвеждане на радиобутони:
<form>
Кого бихте взели със себе си на самотен остров? (Може да изберете само една възможност.) <br> <input type=“radio” name=“OneChoice” value=“Gosho” checked=“checked”> Гошо <br> <input type=“radio” name=“OneChoice” value=“Pesho”> Пешо </form>
Падащи менюта:
<form>
Кого бихте взели със себе си на самотен остров? (Може да изберете само една възможност.) <br> <select name=“ChooseOne”> <option value=“Gosho”> Гошо </option> <option value=“Pesho”> Пешо </option>
</select>
</form>
Многоредови полета за въвеждане на текст:
<form>
Вашият коментар: <br>
<textarea name=“Comentar” cols=“50” rows=“10”> Смятам че </textarea> </form>
Поле за прехвърляне (upload) на файлове:
<form>
Прехвърлете файл от личния си компютър:
<input type=“file” size=“25” name=“UploadFile”>
Натиснете бутона “Browse”, за да видите ефекта.
</form>
3. Начини за обработване на формуляри:
За да бъде използваем един формуляр той трябва задължително да притежава следните елементи: Бутони
За да бъде използваем формуляра клиентът трябва да има възможност да съхрани и да изпрати за обработка попълнените данни. За целта в повечето случаи се използва бутона "Submit". Чрез натискане на бутон "Submit" данните се изпращат за обработка и съхранение и по този начин завършва работата по попълването на формуляра.
За изработването на бутона "Submit" в HTML е предвидена следната команда:
<form>
<input type="submit" value="Submit" />
</form>
Указване на начин за обработка на формуляра
Съществуват два начина за обработване на формуляри.
Първият и най-прост начин е формуляра с цялата информация в него да се изпрати в някаква електронна пощенска кутия /e-mail/ и да се съхранява там. Когато информацията от формуляра ви потрябва вие ще отворите e-mail-a и ще видите необходимите ви данни.
За да изпратите формуляра на някакъв имейл е необходимо само да добавите в отварящия таг form /най-първия таг на всеки формуляр/ атрибута action и да му зададете като стойност адреса на имейла в който трябва да пристигне информацията, придружен от формата mailto:: <form action="mailto:somename@someserver.com">
.........
.........
.........
</form>
Вторият начин за обработка на формуляри е по-сложен, но и много по-надежден, поради което повечето сайтове използват именно него. Този начин изисква да притежавате CGI-скрипт за обработка на формуляри.
Пълния текст на съкращението CGI е Common Gateway Interface. CGI-скриптът представлява просто програма, написана на някой от програмните езици - най-често на C, C++ или Perl. Тя има за задача да обработи формуляра и за целта на атрибута action от началния таг form се задава като стойност точния адрес в интернет, където се намира CGI-скриптът. Добре е CGI-скрипта да се намира на същия сървър, където е "качен" /хостван/ вашият сайт. Обикновено хостовете които позволяват качване на CGI-скриптове отделят специално за тях директория, която почти винаги носи названието cgi-bin. Самите CGI-скриптове представляват файлове с разширение cgi. Нека вашия скрипт да се намира във файл myscript.cgi, който е качен в директорията cgi-bin на сървъра, където е хостнат сайтът ви. Тогава командата за изпращане на формуляра за обработка ще изглежда така:
<form action="cgi-bin/myscript.cgi">
.........
........
........
</form>
VIII част - Фреймове
1. Общи сведения за фреймовете: Една фреймова страница се състои от няколко - 3, 4 или повече HTML-документа. Разделянето на рамки позволява да се показва различен html документ във всяка рамка, както и хиперлинкове от една рамка да се показват в друга. За разлика от другите страници, фреймовите страници не съдържат секция BODY. 2. Страница с хоризонтални фреймове <HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS=“20%,80%">
<FRAME NAME="first" SRC="1.html">
<FRAME NAME="second" SRC=2.html">
</FRAMESET>
</HTML> 3. Страница с вертикални фреймове <HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME NAME="first" >
<FRAME NAME="second">
</FRAMESET> </HTML> 4. Комбинирани фреймове: <HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="100,*" >
<FRAME SRC=“url1” NAME=“top" >
<FRAMESET COLS="20%,80%">
<FRAME SRC=“url2 ” NAME=“left" >
<FRAME SRC=“url3 ” NAME=“main" >
</FRAMESET>
</FRAMESET>
</HTML
IX част
Някои тагове за допълнително оформление на страницата
1. Параграфи:
<P> текст </P> - може да има атрибут за подравняване ALIGN
3. Движещ се текст:
<MARQUEE bgcolor=“…” width=75% scrolldelay=150> Текст </MARQUEE>
Атрибута scrolldelay задава скоростта, с която да се движи текста.
4. Мелодии за фон на страница
<BGSOUND SRC="http://адрес на файл с формат mid" LOOP="-1">
Атрибута LOOP задава броя на повторенията на мелодията. Когато LOOP="-1" тогава мелодията започва отново, веднага след като свърши. Ако LOOP="2" се повтаря два пъти. Поддържа се само от Internet Explorer!
Друг таг за МЕЛОДИИ
без контролен панел за управление –
<embed src="mymusic.midi" autoplay="yes" hidden="true" volume="100%" loop="true" />
с контролен панел за управление на звука
<embed src="mymusic.midi" hidden=“false" width="200" height="400" loop="true" />
X част - HTML5
1. Обща информация:
Хипервръзките трябва да са разположени така, че да улесняват навигацията из сайта и да имат подходящи названия, които да указват на посетителите на страницата къде ще попаднат, когато кликнат върху тях.
Хипервръзките могат да бъдат текстови, а е възможно във вид на хипервръзки да се използват и изображения.
2. Текстови връзки към други файлове:
<a href="адреса, към който ще води връзката">названието на връзката, което ще се вижда на екрана</a>
Пример: <a href="http://www.yahoo.com"> Връзка към www.yahoo.com</a>
Пример за хипервръзка към страница от същия сайт:
<a href="folder1/page2.html">Връзка към страница page2.html, намираща се в папка folder1, от началната страница index.html</a>
3. Хипервръзки към части от една и съща страница:
Първо трябва да създадете т. нар. котва и да я поставите на мястото от страницата, към което пускате връзка. Котвата трябва да има следния формат:
<a name=“bottom” a> (името на котвата се избира произволно)
След това на съответнотот място в страницата се поставя самата хипервръзка, която ще води към вече направената котва. Тя трябва да изглежда така:
<a href="#bottom">Връзка към долната част на страницата</a>
4. Хипервръзки към e-mail и файл на FTP-сървър
<a href="mailto:some-name@some-where.com">some-name@some-where.com</a> <a href="ftp://some-address.com/some-file.zip">Връзка към файл в zip формат от FTP сървър</a> 5. Хипервръзки, които се отварят в отделен прозорец:
Всяка хипервръзка в интернет може да се отвори в отделен прозорец, ако преди да щракнете върху нея натиснете бутон "Shift" (с надпис Shift и/или дебела стрелка, сочеща нагоре). Но много потребители в интернет не познават пълните възможности на клавиатурата.
HTML дава възможност да зададете отваряне на хипервръзка в нов прозорец чрез използване на атрибута target. Той може да приема няколко стойности. За да зададете отваряне на хипервръзка в нов прозорец трябва да присвоите на атрибута target стойност _blank.
<a href="http://www.yahoo.com" target="_blank"> Връзка към Yahoo, която ще се отвори в нов прозорец</a>
6. Изображенията като хипервръзки:
<a href="http://www.somesite.com"> <img src="image.gif" > </a>
I част
I част - Увод в HTML
1. Общи сведения за HTML
HTML се използва за описване на структурата на даден документ използвайки маркери - така наречените тагове. HTML документите са съвкупност от маркиращи тагове. Маркиращите HTML тагове, накратко биват наричани тагове.
HTML е езикът, който казва на браузъра как да покаже страницата
HTML файлът съдържа само букви, цифри и символи,
които се четат от кой да е редактор и това прави HTML универсален език.
HTML може да се усъвършенства допълнително с JavaScript и Java (Dynamic HTML)
2. Основни елементи
Основните елементи се наричат тагове, които си имат имена записани между две ъглови скоби < >
Първият таг е <html>, последният </html>.
Повечето елементи в HTML се пишат със отварящ таг, затварящ таг и съдържанието помежду им. Тоест самият елемент представлява тези три неща.
3. Основна структура на документа
<HTML>
<HEAD> ................ Заглавна част
</HEAD>>
<body> .................. Същинска част
</BODY>
</HTML>
4. Заглавна част
Съдържа описателна информация – заглавие, автор, ключови думи, кодиране на страницата и др.
Заглавието записано между таговете <TITLE> и </TITLE> се показва в заглавния ред на браузъра – пример <title> This is my first page В тази част се добавят и скриптовете на JavaScript и МЕТА - таговете
Таг за коментар
Коментарите се изписват между следните две форми
Пример:
Мета тагове
МЕТА таговете са изключително важен и полезен инструмент. Те могат да имат следните два формата:
МЕТА тагове, съдържащи атрибута HTTP-EQUIV и атрибута CONTENT. Те се използват, за да управляват определени действия на браузъра.
<meta http-equiv="име" content="съдържание" />
МЕТА тагове, съдържащи атрибута NAME и атрибута CONTENT. Te се използват за да подават определена информация на търсещите машини (търсачките).
<meta name="име" content="съдържание" />
Мета таговете нямат затварящ таг в HTML!
Някои важни МЕТА тагове
<meta http-equiv="content-type" content="text/html; charset=windows-1251" /> - указание, че страницата е написана на кирилица
<meta name="description" content="Тук се пише кратко описание на сайта." />
<meta name="keywords" content="ключови думи, които се отделят със запетаи." />
<meta name="author" content="Вашето име." />
<meta http-equiv="refresh" content="някаква цифра, например 10;URL=http://Някакъв уеб адрес" />
II част - Документ
1. Тяло на документ <BODY>
В секцията BODY се намира основната част от съдържанието на една HTML -страница - текста, изображенията и изобщо всичко, което е видимо на екрана на потребителя.
Тагът <body> може да съдържа няколко атрибута, които определят до известна степен външния вид на HTML -страницата.
2. Атрибута BGCOLOR:
Задава фоновия цвят на страницата.
Като фон може да бъде зададен всеки от основните цветове, както и всякакъв оттенък на цвят, получен в следствие на някаква цветова комбинация.
<body bgcolor="английско название на желания цвят">
Пример: <body bgcolor="yellow">
3. Атрибут BACKGROUND
Ако искаме за фон да използваме някакво изображение – картинка или снимка.
<body background="picture.jpg">
По този начин изображението ще изпълни целия прозорец на браузъра - от горе до долу и от едната страна до другата - с многократно повтарящи се свои копия.
Изображението трябва да се намира в същата папка (folder), в която се намира и HTML-файла.
4. Атрибута TEXT
Задава се цвета на текста в страницата.
<body text="red">
Подразбиращия се цвят на текста е черен.
5. Атрибути link, alink и vlink
Атрибута link указва какъв да бъде цвета на текстовите хипервръзки в HTML-документа. Текстова хипервръзка се нарича онази дума или комбинация от думи в HTML-страницата, върху която щракате с мишката, за да отидете на друга страница или на друга част от същата страница.
Атрибута link указва по-специално какъв да бъде цвета на непосетените хипервръзки (преди да е щракано върху тях).
alink указва в какъв цвят да се оцветяват хипервръзките в момента на щракането върху тях. vlink указва как да са оцветени вече посетените връзки.
Заключение:
Всички атрибути в таговете могат да се използват комбинирано.
Реда, в който се изброяват няма значение.
<body bgcolor="black" text="white" link="blue" alink="yellow" vlink="green"> Задача: въведете в текстов редактор следния текст, който е част от уеб документ, след което съхранете файла с име ex1.html
<html>
<head>
<title> Моят първи web-докумен </title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<body bgcolor=“yellow” text=“red” link=“blue” alink=“red”
link=“grey”> Здравейте! <br> Това е моята първа страничка.
</body>
</html>
III част - Текст
1. Текста в страницата
<font> - тагът, който съдържа атрибутите на текста.
За разлика от тага <body> той не може да се ползва без нито един атрибут, но също има затварящ таг - </font>
Атрибутите на тага font са face, size и color.
2. Атрибута FACE:
Задава външния вид на шрифта.
<font face="Название на шрифта">Тук се пише текст</font>
По отношение използването на шрифтовете запомнете следното:
-- За да види даден потребител използвания от вас шрифт той също трябва да го има на своя компютър. В противен случай браузъра ще му покаже вашия текст в шрифт по подразбиране.
-- Не с всички шрифтове може да се пише на кирилица.
3. Атрибута SIZE
Size е атрибута за размер (големина) на текста и може да приема стойности от 1 до 7 включително. <font size="2">Това е текст с големина 2</font>
Освен твърдо зададен размер на шрифта е възможно да се укаже и относителен размер.
Браузърите показват големина на шрифта по подразбиране с размер 3.
<font size="-1">Това е текст с един размер по-малък от подразбиращия се.</font>
<font size="+1">Това е текст с един размер по-голям от подразбиращия се.</font>
4. Таг за заглавия <H>
Тага <h> е придружен с някаква цифра от 1 до 6 включително. Той има и съответния затварящ таг. <h4>Това е заглавие от ниво 4</h4>
При използването на този таг автоматично се добавя по един празен ред над и под текста на заглавието.
5. Атрибута COLOR
Задаването на цвят става като се присвои някаква стойност на атрибута color.
<font color="blue">Това е син текст</font> <font color="green">Това е зелен текст</font>
Комбинирано задаване на атрибути: <font face="arial" size="4" color="green">Това е текст в шрифт arial, с размер 4 и зелен цвят</font>
6. Инструменти за допълнително въздействие върху вида на текста
Основните инструменти за преправяне вида на текста са таговете <b>, <i> и <u>. Всеки от тях има и завършващ таг с наклонена черта.
Тага <b> служи за удебеляване на текста.
Тага <i> прави текста курсивен (наклонен).
Тага <u> прави текста подчертан.
IV част - Цвят
1. Обща информация:
цветовете на фона на страницата и на текста могат да се задават чрез изписване на английското название на съответния цвят, например: <font color="blue"> Това е син текст</font> <body bgcolor="yellow"> (Задава жълт цвят на фона)
Не всички оттенъци могат да се изобразят чрез изписване на съответното английско название.
Не е препоръчително изобщо да използвате езиковите названия на цветовете, за да зададете цвят.
2. Кодиране на цветовете:
Браузърите показват всички цветове чрез комбиниране на различните стойности на само 3 цвята: червен (Red), зелен (Green) и син (Blue). Това е т.нар. RGB стандарт. Всеки един от тези 3 основни цвята може да приема стойности от 0 до 255. Всички останали цветове представляват някаква комбинация от тези стойности. Например кода за бял цвят е R:255, G:255, B:255, а кода за черен цвят е R:0, G:0, B:0, т.е. нулата "създава" най-тъмната част на спектъра, а 255 - най-светлата. HTML не възприема десетичните стойности на цветовете, затова те се превръщат в 16-сетични стойности. Така например 255 се изобразява в 16-сетичен код като FF, а 0 като 00.
3. HTML-код за цвят:
HTML-кода за бял цвят има вида #FFFFFF, а HTML-кода за черен цвят е #000000.
<body bgcolor="#ffffff" text="#000000">
http://htmllessons.hit.bg/colors16.html - таблица на 216 цвята и техните 16-тични кодове
4. Изображения
Изображенията - картинки, фотографии и др., анимирани или статични - са важна част от почти всеки сайт в мрежата. Добре подбрани и разположени, те могат да "освежат" HTML-страницата ви, но претрупването на една страница с изображения може да постигне и обратния ефект, като я направи непривлекателна. Освен това използването на прекалено много изображения ще направи страницата "тежка" и трудна за зареждане.
5. Формати на файловете за изображения:
gif формат, който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат "сложни" оттенъци и светлосенки. Файловете с разширение gif имат две важни предимства пред другия основен формат:
- могат да съдържат "прозрачен" елемент в себе си - това например може да е фона на буквите от някакъв надпис, който ще прозира и под него ще се вижда фона на страницата. Тогава този файл ще "пасва" на страници с различно оцветен фон.
- gif файловете могат да бъде анимирани - да съдържат движеща се картинка.
jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии. Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на gif формата, но за сметка на това jpg файла не може да бъде анимиран, нито да съдържа прозрачни елементи.
6. Търсене и сваляне на изображения от WEB
Безплатни изображения може да намерите като търсите по ключови думи, например free images, free animated gifs, free pictures, free graphics, free clip art, free buttons, free backgrounds, free interfaces и т.н. Записване на изображение с командата "Save Picture As". Преди да вземете някое изображение и да го използвате в страницата си е нужно да се уверите, че то не е обект на авторското право и че е безплатно!!!
7. Показване на изображения в HTML-документа
<img src="myimage.gif" />
По подразбиране изображението се появява в лявата част на страницата. Ако желаем да разположим изоброжението вдясно или в средата на страницата трябва да използваме тага <div< и атрибута му align със съответните стойности - left (което е и по подразбиране), right и center.
Например
<div align="center"><img src="Example.gif" /></div>
8.1. Атрибути на тага за изображение:
Атрибутите width и height задават съответно ширина и височина на изображението в пиксели. Атрибута alt задава алтернативно название на изображението (текст, който се показва, в случай, че браузърът не може да зареди изображението).
<img src="Example.gif" width="163" height="73" alt="Image Example" />
8.2. Атрибути на тага за изображение:
Атрибута align – подравняване на изображението спрямо текста
<img src="Example.gif" width="163" height="73" align=“top/bottom/middle и др." /> Атрибута hspace задава свободно пространство отляво и отдясно на изображението, а атрибута vspace - отгоре и отдолу. Стойностите са в пиксели.
V част - Хипервръзки
1. Обща информация:
Хипервръзките трябва да са разположени така, че да улесняват навигацията из сайта и да имат подходящи названия, които да указват на посетителите на страницата къде ще попаднат, когато кликнат върху тях.
Хипервръзките могат да бъдат текстови, а е възможно във вид на хипервръзки да се използват и изображения.
2. Текстови връзки към други файлове:
<a href="адреса, към който ще води връзката">названието на връзката, което ще се вижда на екрана</a>
Пример: <a href="http://www.yahoo.com"> Връзка към www.yahoo.com</a>
Пример за хипервръзка към страница от същия сайт:
<a href="folder1/page2.html">Връзка към страница page2.html, намираща се в папка folder1, от началната страница index.html</a>
3. Хипервръзки към части от една и съща страница:
Първо трябва да създадете т. нар. котва и да я поставите на мястото от страницата, към което пускате връзка. Котвата трябва да има следния формат: <a name=“bottom” a> (името на котвата се избира произволно)
След това на съответнотот място в страницата се поставя самата хипервръзка, която ще води към вече направената котва. Тя трябва да изглежда така: <a href="#bottom">Връзка към долната част на страницата</a>
4. Хипервръзки към e-mail и файл на FTP-сървър
<a href="mailto:some-name@some-where.com">some-name@some-where.com</a> <a href="ftp://some-address.com/some-file.zip">Връзка към файл в zip формат от FTP сървър</a> 5. Хипервръзки, които се отварят в отделен прозорец:
Всяка хипервръзка в интернет може да се отвори в отделен прозорец, ако преди да щракнете върху нея натиснете бутон "Shift" (с надпис Shift и/или дебела стрелка, сочеща нагоре). Но много потребители в интернет не познават пълните възможности на клавиатурата.
HTML дава възможност да зададете отваряне на хипервръзка в нов прозорец чрез използване на атрибута target. Той може да приема няколко стойности. За да зададете отваряне на хипервръзка в нов прозорец трябва да присвоите на атрибута target стойност _blank.
<a href="http://www.yahoo.com" target="_blank"> Връзка към Yahoo, която ще се отвори в нов прозорец</a>
6. Изображенията като хипервръзки:
<a href="http://www.somesite.com"> <img src="image.gif" > </a>
VI част - Таблици
1. Обща информация:
Таблиците са изключително важен инструмент при създаването на една уеб-страница. Често цялата страница е разположена в таблица, чиито редове и колони оформят различните части на HTML-документа. Често в HTML-страниците се прави и изброяване на някакви елементи. В тези случаи е подходящо да се използват специалните тагове на HTML за списъци, тъй като това придава по-подреден вид на страницата.
2. Тагове за създаване на таблица
Таблиците в HTML-документа винаги са разположени между двата основни тага <table> и </table>.Между тези два тага се изписват:
таговете за табличен ред - <tr> и </tr>
таговете за таблична клетка, чрез които се оформят редовете и колоните - <td> и </td>
Ако искаме таблицата да има очертания се добавя атрибута BORDER.
Пример:
Кода на таблица само с две колони и с три реда изглежда така:
<table border="1">
<tr>
<td>1-ви ред, 1-ва колона </td> <td>1-ви ред, 2-ра колона </td> </tr>
<tr>
<td>2-ри ред, 1-ва колона </td>
<td>2-ри ред, 2-ра колона </td> </tr> <tr>
<td>3-ти ред, 1-ва колона </td>
<td>3-ти ред, 2-ра колона </td> </tr>
</table>
3. Атрибути на таговете за оформяне на таблици:
border и bordercolor ;
bgcolor - цвят на вътрешното пространство
width и height - ширина и височина (в цели числа или в %)
cellspacing и cellpadding - разстояние между клетките и между текста и очертанията
align и valign - местоположението на таблицата на екрана;
align = center, left или right
valign = top, middle или bottom
4. Заключение за таблиците:
В клетките на таблиците може да се пише текст, като параметрите му се определят чрез познатия вече таг font и съответните му атрибути.
В таблиците може да се поставят и изображения – чрез познатия таг img в клетката, в която желаете да се появи изображението.
Могат да се влагат таблици една в друга.
Могат да се сливат клетки с атрибутите - colspan и rowspan.
5. Неномерирани списъци:
Неподредени списъци:
<ul> <li>Първи елемент от списъка
</li> <li>Втори елемент от списъка
</li> <li>Трети елемент от списъка </li> </ul>
Ефекта от този код в браузъра е следния:
Първи елемент от списъка
Втори елемент от списъка
Трети елемент от списъка
Знакът, който се появява пред всеки ред в списъка, е по подразбиране черен запълнен кръг. Ако желаете да използвате други символи трябва да ги зададете като стойности към атрибута type на тага ul.
Възможните стойности са три: disc (запълнен кръг като този, който е по подразбиране), circle (незапълнен кръг), square (запълнен квадрат). Например: <ul type="circle">
6. Номерирани списъци:
Подредените списъци извършват подредбата на елементите по един от следните начини:
чрез арабски цифри
чрез големи римски цифри
чрез малки римски цифри
чрез главни латински букви
чрез малки латински букви
Пример: <ol type="I"> <li>Първи елемент от списъка, номериран с големи римски цифри /li>
<li>Втори елемент от списъка, номериран с големи римски цифри
</li> <li>Трети елемент от списъка, номериран с големи римски цифри
</li> </ol>
<ol type="a">
<li>Първи елемент от списъка, обозначен с малки букви </li>
<li>Втори елемент от списъка, обозначен с малки букви </li>
<li>Трети елемент от списъка, обозначен с малки букви </li>
</ol>
VII част - Формуляри
1. Обща информация:
Формулярите служат за обмяна на информация между разработчика на сайта и неговите посетители. Чрез тях потребителите дават информация за себе си, попълват анкети, дават мнения и др. Всеки формуляр започва с отварящ таг <form> и завършва с </form>. Между тях се разполагат други тагове – input, select... в зависимост от предназначението на формуляра.
2. Видове формуляри:
Въвеждане на поле за текст:
<input type=“text” name=“Име” size=“45” maxlenght=“40” value=“стойност по подразбиране”> Въвеждане на радиобутони:
<form>
Кого бихте взели със себе си на самотен остров? (Може да изберете само една възможност.) <br> <input type=“radio” name=“OneChoice” value=“Gosho” checked=“checked”> Гошо <br> <input type=“radio” name=“OneChoice” value=“Pesho”> Пешо </form>
Падащи менюта:
<form>
Кого бихте взели със себе си на самотен остров? (Може да изберете само една възможност.) <br> <select name=“ChooseOne”> <option value=“Gosho”> Гошо </option> <option value=“Pesho”> Пешо </option>
</select>
</form>
Многоредови полета за въвеждане на текст:
<form>
Вашият коментар: <br>
<textarea name=“Comentar” cols=“50” rows=“10”> Смятам че </textarea> </form>
Поле за прехвърляне (upload) на файлове:
<form>
Прехвърлете файл от личния си компютър:
<input type=“file” size=“25” name=“UploadFile”>
Натиснете бутона “Browse”, за да видите ефекта.
</form>
3. Начини за обработване на формуляри:
За да бъде използваем един формуляр той трябва задължително да притежава следните елементи: Бутони
За да бъде използваем формуляра клиентът трябва да има възможност да съхрани и да изпрати за обработка попълнените данни. За целта в повечето случаи се използва бутона "Submit". Чрез натискане на бутон "Submit" данните се изпращат за обработка и съхранение и по този начин завършва работата по попълването на формуляра.
За изработването на бутона "Submit" в HTML е предвидена следната команда:
<form>
<input type="submit" value="Submit" />
</form>
Указване на начин за обработка на формуляра
Съществуват два начина за обработване на формуляри.
Първият и най-прост начин е формуляра с цялата информация в него да се изпрати в някаква електронна пощенска кутия /e-mail/ и да се съхранява там. Когато информацията от формуляра ви потрябва вие ще отворите e-mail-a и ще видите необходимите ви данни.
За да изпратите формуляра на някакъв имейл е необходимо само да добавите в отварящия таг form /най-първия таг на всеки формуляр/ атрибута action и да му зададете като стойност адреса на имейла в който трябва да пристигне информацията, придружен от формата mailto:: <form action="mailto:somename@someserver.com">
.........
.........
.........
</form>
Вторият начин за обработка на формуляри е по-сложен, но и много по-надежден, поради което повечето сайтове използват именно него. Този начин изисква да притежавате CGI-скрипт за обработка на формуляри.
Пълния текст на съкращението CGI е Common Gateway Interface. CGI-скриптът представлява просто програма, написана на някой от програмните езици - най-често на C, C++ или Perl. Тя има за задача да обработи формуляра и за целта на атрибута action от началния таг form се задава като стойност точния адрес в интернет, където се намира CGI-скриптът. Добре е CGI-скрипта да се намира на същия сървър, където е "качен" /хостван/ вашият сайт. Обикновено хостовете които позволяват качване на CGI-скриптове отделят специално за тях директория, която почти винаги носи названието cgi-bin. Самите CGI-скриптове представляват файлове с разширение cgi. Нека вашия скрипт да се намира във файл myscript.cgi, който е качен в директорията cgi-bin на сървъра, където е хостнат сайтът ви. Тогава командата за изпращане на формуляра за обработка ще изглежда така:
<form action="cgi-bin/myscript.cgi">
.........
........
........
</form>
VIII част - Фреймове
1. Общи сведения за фреймовете: Една фреймова страница се състои от няколко - 3, 4 или повече HTML-документа. Разделянето на рамки позволява да се показва различен html документ във всяка рамка, както и хиперлинкове от една рамка да се показват в друга. За разлика от другите страници, фреймовите страници не съдържат секция BODY. 2. Страница с хоризонтални фреймове <HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS=“20%,80%">
<FRAME NAME="first" SRC="1.html">
<FRAME NAME="second" SRC=2.html">
</FRAMESET>
</HTML> 3. Страница с вертикални фреймове <HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME NAME="first" >
<FRAME NAME="second">
</FRAMESET> </HTML> 4. Комбинирани фреймове: <HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="100,*" >
<FRAME SRC=“url1” NAME=“top" >
<FRAMESET COLS="20%,80%">
<FRAME SRC=“url2 ” NAME=“left" >
<FRAME SRC=“url3 ” NAME=“main" >
</FRAMESET>
</FRAMESET>
</HTML
IX част
Някои тагове за допълнително оформление на страницата
1. Параграфи:
<P> текст </P> - може да има атрибут за подравняване ALIGN
3. Движещ се текст:
<MARQUEE bgcolor=“…” width=75% scrolldelay=150> Текст </MARQUEE>
Атрибута scrolldelay задава скоростта, с която да се движи текста.
4. Мелодии за фон на страница
<BGSOUND SRC="http://адрес на файл с формат mid" LOOP="-1">
Атрибута LOOP задава броя на повторенията на мелодията. Когато LOOP="-1" тогава мелодията започва отново, веднага след като свърши. Ако LOOP="2" се повтаря два пъти. Поддържа се само от Internet Explorer!
Друг таг за МЕЛОДИИ
без контролен панел за управление –
<embed src="mymusic.midi" autoplay="yes" hidden="true" volume="100%" loop="true" />
с контролен панел за управление на звука
<embed src="mymusic.midi" hidden=“false" width="200" height="400" loop="true" />
X част - HTML5
1. Обща информация:
Хипервръзките трябва да са разположени така, че да улесняват навигацията из сайта и да имат подходящи названия, които да указват на посетителите на страницата къде ще попаднат, когато кликнат върху тях.
Хипервръзките могат да бъдат текстови, а е възможно във вид на хипервръзки да се използват и изображения.
2. Текстови връзки към други файлове:
<a href="адреса, към който ще води връзката">названието на връзката, което ще се вижда на екрана</a>
Пример: <a href="http://www.yahoo.com"> Връзка към www.yahoo.com</a>
Пример за хипервръзка към страница от същия сайт:
<a href="folder1/page2.html">Връзка към страница page2.html, намираща се в папка folder1, от началната страница index.html</a>
3. Хипервръзки към части от една и съща страница:
Първо трябва да създадете т. нар. котва и да я поставите на мястото от страницата, към което пускате връзка. Котвата трябва да има следния формат:
<a name=“bottom” a> (името на котвата се избира произволно)
След това на съответнотот място в страницата се поставя самата хипервръзка, която ще води към вече направената котва. Тя трябва да изглежда така:
<a href="#bottom">Връзка към долната част на страницата</a>
4. Хипервръзки към e-mail и файл на FTP-сървър
<a href="mailto:some-name@some-where.com">some-name@some-where.com</a> <a href="ftp://some-address.com/some-file.zip">Връзка към файл в zip формат от FTP сървър</a> 5. Хипервръзки, които се отварят в отделен прозорец:
Всяка хипервръзка в интернет може да се отвори в отделен прозорец, ако преди да щракнете върху нея натиснете бутон "Shift" (с надпис Shift и/или дебела стрелка, сочеща нагоре). Но много потребители в интернет не познават пълните възможности на клавиатурата.
HTML дава възможност да зададете отваряне на хипервръзка в нов прозорец чрез използване на атрибута target. Той може да приема няколко стойности. За да зададете отваряне на хипервръзка в нов прозорец трябва да присвоите на атрибута target стойност _blank.
<a href="http://www.yahoo.com" target="_blank"> Връзка към Yahoo, която ще се отвори в нов прозорец</a>
6. Изображенията като хипервръзки:
<a href="http://www.somesite.com"> <img src="image.gif" > </a>