ВЪВЕДЕНИЕ В HTML HTML, което означава HyperText Markup Language , е език за създаване на web страници. Страниците създадени с HTML могат да съдържат графика, текст, музика, анимация, както и връзки към други страници(хиперлинкове). HTML е лесен за научаване език HTML документа започва винаги с елемента <HTML> и завършва съответно с </HTML>. <HTML> означава начало на HTML документ, а </HTML> край на HTML документ. Следващата задължителна двойка елементи е <HEAD> и </HEAD>, което буквално означава глава. В главата обикновено се съдържа информация за самия HTML документ. В примера там стои заглавието на документа <TITLE>. Между елементите <TITLE> и </TITLE> се съдържа името на HTML документа. Когато срещне тази двойка елементи браузъра визуализира текста между тях на заглавната си лента най-отгоре. Освен заглавието в главата (<head> </head>) на html документа се поместват и метатаговете. Използването на повечето метатагове не е задължително, но е препоръчителнo.Същинската част на HTML документа се намира между елементите <BODY> и <BODY>. <html> начало на html страница <head> начало на глава на страницата ГЛАВА НА HTML СТРАНИЦА <title> ИМЕТО НА HTML СТРАНИЦА </title> МЕТА ТАГОВЕ </head> край на глава на страницата <body> начало на тялото на страницата ТЯЛО НА HTML СТРАНИЦА </body> край на тялото на страницата </html> край на html страница върни отначло
СЪДЪРЖАНИЕ НА САЙТА Съдържанието е също важен момент в създаването на web страница. От него се определя и цялостният вид на web-а. Според него ще определите как да изглежда графичния дизаин на страницата. Ако в страницата ви има бизнес информация няма да е добре да се слагат анимирани картинки с пресмивателен контекст... Добре ще е, когато определите съдържанието на страницата тогава да решите от колко добавени страници ще е тя. Навигацията в web страницата е много важна. Така вие позволявате на потребителя да знае във всеки един момент къде се намира и как да продължи или пък да се върне назад. Често ми се е случвало да се загубвам в страници, което ме е дразнило много. Дайте на клиента (потребителя) пълна яснота по този въпрос, защото е изчислено че човек стои в web страница не - повече от 10 секунди, и ако не го привлечете с нещо или пък се загуби - той просто ще си тръгне Когато започнете вече да правите самата страница ще ви е необходимо да знаете някои основни наименования и означения в sourc-а на страницата. Тези означения можете да видите тук. Има още много неща които ще са ви необходими да знаете, когато започвате да правите web страница, но засега това Ви стига. Най - добре е когато сам човек разбере какво му е нужно и къде е сбъркал. върни отначло
ГЛАВА НА ДОКУМЕНТА Секцията HEAD - "главата" на HTML-страницата - започва непосредствено след началния таг <html>. Запомнете, че съдържанието на секцията HEAD остава невидимо за посетителите на страницата, т.е. това, което се пише в HEAD, не се появява на екрана. "Главата" на страницата може да съдържа много елементи, някои от които не са абсолютно задължителни за една уеб-страница. Все пак ако не сложите нищо в HEAD, то поне трябва да напишете там заглавието на страницата си. Заглавието на една уеб-страница се пише между таговете <title> и </title> Ще забележите, че каквото напишете между тези два тага, се появява в тънката лента на браузъра най-отгоре. Mоже да напишете например: <title> My first page </title> Указването на заглавие е много важно от гледна точка на популяризирането на вашата страница - повечето търсещи машини "разбират" записаното между таговете <title> и </title> като най-важните ключови думи, по които вашата страница може да бъде намерена. Затова отделете време, за да измислите заглавие, което много точно и стегнато да изразява същността и съдържанието на страницата ви. Заглавието трябва да съдържа 2-8 думи.Цялата секция HEAD заедно със заглавието на страницата ще изглежда така: <head> <title> My first page </title> МЕТАТАГОВЕ </head> Другия елемент на HEAD са META таговете. върни отначло
МЕТАТАГОВЕ МЕТА таговете са изключително важен и полезен инструмент, защото чрез тях ще направите реклама на страницата си, така, че търсещите машини да могат да я намират сред огромното количество информация в интернет. Те се делят на две групи: МЕТА тагове,съдържащи атрибута HTTP-EQUIV и атрибута CONTENT. Тези МЕТА тагове имат следния формат: <meta http-equiv="име" content="съдържание"/> МЕТА таговете с атрибута HTTP-EQUIV се използват за да управляват определени действия на браузъра. МЕТА тагове, съдържащи атрибута NAME и атрибута CONTENT. Te имат следния формат: <meta name="име" content="съдържание" /> МЕТА таговете с атрибута NAME се използват за да подават определена информация на търсещите машини. Запомнете нещо общо за всички МЕТА тагове - те имат начален таг <META>, но нямат краен таг </META>. Тъй като обаче в XHTML съществува изискването всички тагове да се затварят, затова в края на МЕТА таговете се изписва затваряща наклонена черта - както е показано в примерите. върни отначло
ТЯЛО НА ДОКУМЕНТА Тагът <body> отбелязва тялото на даден html документ или накратко казано - действителното съдържание на страницата.В него се съдържа информацията за всеки елемент от страницата. Определяте цвета на фона, задавате формат и вид на текст, поставяте таблици, рамки и въобще всичко, което се използва за да се изглежда Вашата страница по подобаващ начин.Тагът <body> се характеризира с няколко основни параметъра: alink - Определя цвета на текста за хипервръзка, която е избрана bgcolor - Определя цвета на страницата link - определя цвета на текста за хипервръзка, която не е била избрана text - определя цвета на нормалния текст vlink - определя цвета на текст за хипервръзка, която е била избрана bgproperties - когато стойноста е "fixed", изображението указано от background не се скролира leftmargin - Определя броя на пикселите, с които да бъде изместена страницата спрямо левия край на прозореца на браузъра topmargin - Определя броят на пикселите, с които да бъде изместена страницата спрямо горния край на прозореца на браузъра background - Определяне на графично изображение, което ще се използва за фон на страницата. върни отначло
ИЗОБРАЖЕНИЯ Изображенията - картинки, фотографии и др., анимирани или статични, са важна част от почти всеки сайт в мрежата. Добре подбрани и разположени, те могат да "освежат" HTML-страницата ви, но претрупването на една страница с изображения може да постигне и обратния ефект, като я направи непривлекателна. Освен това използването на прекалено много изображения ще направи страницата "тежка" и трудна за зареждане.В HTML се използват два основни формата на файлове, съдържащи изображения: 1. gif формат, който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат "сложни" оттенъци и светлосенки. 2. jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии. Атрибутите на тага за изображение не са абсолютно задължителни - и да не ги използвате изображението ви ще се вижда на екрана. Но за някои от атрибутите е препоръчително да бъдат въвеждани, тъй като това ще подобри качеството на вашия HTML-документ. 1. Атрибутите width и height задават съответно ширина и височина на изображението в пиксели. Въвеждането на тези атрибути указва на браузъра точно колко място да отдели за изображението, вследствие на което страницата се зарежда по-бързо, а бързината на зареждане на един HTML-документ е от голямо значение за посетителите на страницата. Препоръчително е винаги да задавате ширина и височина на изображенията си. 2. Атрибута alt задава алтернативно название на изображението. Понякога, въпреки, че страницата е заредена, изображенията не се появяват. Освен това някои потребители настройват браузърите си да не изтеглят изображенията, за да зареждат по-бързо страниците. В тези случаи на мястото, където трябва да е вашето изображение, ще се появи празно рамкирано пространство. За да разберат посетителите на страницата какво съдържа изображението се използва атрибута alt="описание на изображението". Това, което напишете между кавичките, ще се появи на мястото на изображението ви, ако то не се зареди. Така посетителите ще научат какво представлява изображението, макар че няма да го видят. Препоръчително е винаги да използвате този атрибут и по още една причина - търсачките индексират текста, въведен като обяснение на графиките с атрибута alt, така че това е още един начин за рекламиране и популяризиране на страницата ви. Ако комбинираме горните атрибути, ще получим следния код: <img src="Example.gif" width="ширината на изображението в пиксели, примерно 90" height="височината на изображението в пиксели, примерно 200" alt="Описание на изображението"/> В случай, че ползвате Internet Explorer, ще можете да видите алтернативния си текст дори и изображението да се е заредило - отидете с мишката върху него и я оставете неподвижна за няколко секунди - алтернативния текст ще се появи в малък отделен прозорец. 3. Атрибута border задава рамка около изображението в пиксели. Ако не използвате този атрибут, около вашето изображение по подразбиране няма да се появи никаква рамка. Но това се отнася само за изображения, които не са хипервръзки! Ако едно изображение е използвано като връзка, тогава около него автоматично се появява рамка с цвета, който сте задали на хипервръзките . В такъв случай, за да премахнете тази рамка, трябва да въведете атрибута border със стойност 0: border="0". Ако желаете да зададете рамка на изображението си например 8 пиксела трябва да напишете: <img src="Example.gif" border="8"/> върни отначло
ТАБЛИЦИ Таблиците са важен инструмент при създаването на една уеб-страница. Често цялата страница е разположена в таблица, чиито редове и колони оформят различните части на HTML-документа. Задават се с таговете <table> и </table> - съответно за начало и край.Таблиците се поделят на редици: <tr> и </tr> ,а всяка редица може да се подели на отделни клетки описани с <td> и </td> . Рамка на таблица За да се покаже рамката на таблицата, трябва да укажете това изрично с border="n" в тага <table>, като на мястото на "n" сложите желаната дебелина на рамката в пиксели. Заглавия в таблица Заглавия като част от самата таблица можете да зададете между <th> и </th>, а заглавиетo на самата таблица се указва между <caption> и </caption>. Браузърът автоматично ще открои заглавията, зададени с <th> - обикновено с удебелен шрифт. Клетки, които заемат повече от една редица или колона Ако искате дадена клетка да заема примерно две колони, укажете това с colspan="2". Съответно за да заеме клетката две редици, трябва да включите rowspan="2" в тага td или th, с който създавате съответната клеткa Форматиране на клетки Разстоянието от рамката на клетката до нейното съдържание се задава с cellpadding="n", като "n" е число в пиксели. Разстоянието от рамката на таблицата до самите клетки от своя страна се указва с cellspacing="n". И двете разстояния се указват още в началното <table>. Добавяне на фонов цвят За да оцветите цялата таблица в един цвят, използвайте bgcolor="име-на-цвят" в table, като на мястото на име-на-цвят използвате някое от валидните имена за цвят в HTML. По същия начин се задава и цвят за отделна клетка, като разликата е само в мястото на дефиниране: вместо в table - в td. Вместо фонов цвят можете да сложите фоново изображение: background="име-на-файл.jpg", като разбира се на мястото на име-на-файл.jpg сложите името на изображението, което желаете за фон. върни отначло
ВЪВЕДЕНИЕ В HTML5 В HTML 5 съществува само една кратка декларация, която се слага в началото на страницата. Това е doctype html. Тя посочва на брузера, че има работа с HTML-документ.Новият таг header съдържа въвеждащите елементи — напр. заглавие, лого и др.п.. В него може да се съдържат още елементи като съдържание и форма за търсене. Обикновено там стоят и заглавия h1 до h6 — с други думи в него се намират всякакви въвеждащи елементи, но не задължително — може да има и други.Тагът nav съдържа елементи, свързани с навигацията из сайта Тагът section се използва за обозначаване на отделна секция в документа. Там може да се съдржат всевъзможни елементи. Възможно е влагането на няколко section-тага един в друг Тагът footer, както личи и от наименованието, съдържа допълнителна информация, разположена най-долу — напр. информация за автор, запазени права и др.п. върни отначло
СЪДЪРЖАНИЕ НА САЙТА HTML5 тагът - header Той ще съдържа заглавната част на страницата с h1 тагът в него, който пък трябва да съдържа подобаващо заглавие за тази страница. Сигурно се досещате, че изходящите връзки от тук ще имат много голяма тежест. HTML5 тагът - nav Той по дефиниция трябва да съдържа навигацията на сайта. Съчетан с микроформати и връзка към HTML карта на сайта, всяка търсачка ще знае откъде да започне обхождането и индексирането на сайта. Не всички връзки и навигационни менюта трябва да са в - nav таг, а само основното меню на сайта! HTML5 тагът - article Текстовото съдържание (това, което най-много обичат търсачките) ще се съдържа в този таг. Примерно ако четем блог публикация, то заглавието и текстът на публикацията ще са там. Ако сме отворили тема във форум, то всяка потребителска публикация ще е в отделен -article таг. По дефиниция той съдържа независим откъс от съдържание.Така при нужда всяка една система ще знае точно къде е текстът в съответна страница, ако трябва да го извлече, обобщи и т.н. Изходящите връзки от този таг ще имат най-голямо значение и тежест. Всичко в този таг ще е от първостепенно значение, защото за разлика от другите елементи в страницата, тук със сигурност има уникално съдържание. HTML5 тагът - section. Този таг позволява влагане на цели семантични структури във вече съществуващи елементи. Примерно в него може да поставите отново таговете -header,article и footer и да опишете една нова вложане структура. Още не е ясно точно как ще се отрази този таг на SEO оптимизацията. HTML5 тагът - aside Той съдържа страничната лента или казано технически - sidebar-ът на страницата. Тук са всякакви видове уиджети, които дават информация на потребителя. Вътрешните връзки от тази секция ще имат голяма тежест, но не по-голяма от тези в - nav. Изходящите връзки ще имат слабо значение. HTML5 тагът - footer Тук се съдържа информация за автора на страницата, правата върху материалите и връзки към подобни публикации. Изходящите връзки от този елемент ще имат клонящо към нула значение. Текстът от този таг, както и от всичко извън - article най-вероятно няма да се използва при генериране на snippet от търсачките. <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> върни отначло
HTML 5 - ТАГОВЕ <article> - Дефинира параграф, статия <aside> - Дефинира съдържание, което е извън основното на страницата <bdi> - Отделя част от текста, който може да е форматиран по друг начин от останалия <command> - Дефинира команден бутон <details> - Дефинира детайли, които потребителят може да скрие <summary> - Дефинира видимо заглавие за <details>-елемента <figure> - Определя контейнер за илюстрации, снимки, диаграми и др. <figcaption> - Дефинира заглавие за <figure> <footer> - Дефинира долната част на документ или на секция <header> - Определя въвеждащите елементи на документа <hgroup>- Групира комплект от заглавия <h1> до <h6>-елементи <mark> - Дефинира маркиран текст <meter> - Дефинира мащаб <0nav> - Дефинира препратки, свързани с навигацията <progress> - Показва докъде е стигнало изпълнението на дадена задача <ruby> - Дефинира ruby-анотация (източно-азиатски типографски термин) <rt> - Дефинира обяснение за източно-азиатски типографски знаци <rp> - Дефинира какво да се покаже в браузери, които не поддържатя ruby-анотация <section> - Дефинира отделна секция в документа <time> - Дефинира дата и час <wbr> - Дефинира възможно отиване на нов ред Нови елементи за различни медийни типове: Таг Описание <audio> - Дефинира "звуково" съдържание <video> - Дефинира видео или видеоклип <source> - Дефинира различни медийни ресурси за <video> и <audio> <embed> - Дефинира контейнер за външно приложение <track> - Дефинира текстови пътечки за <video> и <audio> Елементът <canvas>: Таг Описание <canvas> - Използва се за начертаване на графика "в движение" Нови елементи за форми: Таг Описание <datalist> - Дефинира списък с предварително дефинирани опции за контрол <keygen> - Дефинира поле за key-pair генератор <output> - Дефинира резултат от пресмятане върни отначло