HTML презентация Разработен: Айхан Шен Група: 43б
Съдържание: <ul><li>Кратка история на  HTML </li></ul><ul><li>Работна среда за създаване на  HTML  кода </li></ul><ul><li>...
Кратка история на  HTML <ul><li>Тим Бърнарс Лий – края на 80-те години на 20 век – основите на  World Wide Web  и  HTML  (...
Работна среда за създаване на  HTML  кода <ul><li>Обикновен текстов редактор –  Note р ad </li></ul><ul><li>Специализирани...
Общи сведения за  HTML  и основни елементи <ul><li>Hyper Text Markup Language  – език за маркиране на хипертекст.  </li></...
Заглавна част <ul><li>Съдържа описателна информация – заглавие, автор, ключови думи, кодиране на страницата   и др. </li><...
<ul><li>Представяне на текст в страница </li></ul><ul><li>< font >  - тагът, който съдържа атрибутите на текста. </li></ul...
<ul><li>Таг за заглавия  <H>: </li></ul><ul><li>Тага <h> е придружен с някаква цифра от 1 до 6 включително. Той има и съот...
<ul><li>цветовете на фона на страницата и на текста могат да се задават чрез изписване на английското название на съответн...
Изображенията - картинки, фотографии и др., анимирани или статични - са важна част от почти всеки сайт в мрежата. Добре по...
<a href=&quot;адреса, към който ще води връзката&quot;>названието на връзката, което ще се вижда на екрана</a> Пример:  <a...
Използвани връзки: http://en.wikipedia.org/wiki/HTML http://google.com/HTML Благодаря за вниманието!
Upcoming SlideShare
Loading in …5
×

Html presentation

1,291 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,291
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html presentation

  1. 1. HTML презентация Разработен: Айхан Шен Група: 43б
  2. 2. Съдържание: <ul><li>Кратка история на HTML </li></ul><ul><li>Работна среда за създаване на HTML кода </li></ul><ul><li>Общи сведения за HTML и основни елементи </li></ul><ul><li>Заглавна част </li></ul><ul><li>Тестове, изображения, фондове и т.н. </li></ul><ul><li>Обща информация </li></ul>
  3. 3. Кратка история на HTML <ul><li>Тим Бърнарс Лий – края на 80-те години на 20 век – основите на World Wide Web и HTML ( HiperText Markup Language - Език за маркиране на хипертекстови документи, които да се предават по мрежата) </li></ul><ul><li>Марк Ендрисън – създава първият браузър NetScape Navigator . </li></ul><ul><li>Стандартизация – World Wide Web Consortium - www.w3.org </li></ul><ul><li>Ново поколение - XHTML - Extensible HiperText Markup Language </li></ul>
  4. 4. Работна среда за създаване на HTML кода <ul><li>Обикновен текстов редактор – Note р ad </li></ul><ul><li>Специализирани редактори ( Web Writer и др.) </li></ul><ul><li>Редактори от типа WYSIWYG ( What you see is what you get ) </li></ul><ul><li>Сайтбилдери от Интернет – www.street.bg </li></ul>
  5. 5. Общи сведения за HTML и основни елементи <ul><li>Hyper Text Markup Language – език за маркиране на хипертекст. </li></ul><ul><li>HTML е езикът, който казва на браузъра как да покаже страницата </li></ul><ul><li>HTML файлът съдържа само букви, цифри и символи, които се четат от кой да е редактор и това прави HTML универсален език </li></ul><ul><li>HTML може да се усъвършенства допълнително с JavaScript и Java (Dynamic HTML) </li></ul><ul><li>Основните елементи се наричат тагове , които си имат имена записани между две ъглови скоби < > </li></ul><ul><li>Първият таг е <html>, последният </html>. </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> ................ Заглавна част </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> .................. Същинска част </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  6. 6. Заглавна част <ul><li>Съдържа описателна информация – заглавие, автор, ключови думи, кодиране на страницата и др. </li></ul><ul><li>Заглавието записано между таговете <TITLE> и < / TITLE> се показва в заглавния ред на браузъра – пример <title> This is my first page </title> </li></ul><ul><li>В тази част се добавят и скриптовете на JavaScript и МЕТА – таговете </li></ul><ul><li>Коментарите се изписват между следните две форми <!- - и --> </li></ul><ul><li>Пример: <!-- Тук може да се напише коментар, който няма да повлияе на HTML-документа --> </li></ul>
  7. 7. <ul><li>Представяне на текст в страница </li></ul><ul><li>< font > - тагът, който съдържа атрибутите на текста. </li></ul><ul><li>За разлика от тага <body> той не може да се ползва без нито един атрибут, но също има затварящ таг - </font> </li></ul><ul><li>Атрибутите на тага font са face , size и color . </li></ul><ul><li>Атрибута FACE : </li></ul><ul><li>Задава външния вид на шрифта . </li></ul><ul><li><font face=&quot;Название на шрифта&quot;>Тук се пише текст</font> </li></ul><ul><li>По отношение използването на шрифтовете запомнете следното: 1. За да види даден потребител използвания от вас шрифт той също трябва да го има на своя компютър. В противен случай браузъра ще му покаже вашия текст в шрифт по подразбиране. 2. Не с всички шрифтове може да се пише на кирилица. </li></ul><ul><li>Атрибута SIZE : </li></ul><ul><li>Size е атрибута за размер (големина) на текста и може да приема стойности от 1 до 7 включително. </li></ul><ul><li><font size=&quot;2&quot;>Това е текст с големина 2</font> </li></ul><ul><li>Освен твърдо зададен размер на шрифта е възможно да се укаже и относителен размер. Браузърите показват големина на шрифта по подразбиране с размер 3. </li></ul><ul><li>< font size=&quot;-1&quot;>Това е текст с един размер по-малък от подразбиращия се.</font> </li></ul><ul><li><font size=&quot;+1&quot;>Това е текст с един размер по-голям от подразбиращия се.</font> </li></ul>
  8. 8. <ul><li>Таг за заглавия <H>: </li></ul><ul><li>Тага <h> е придружен с някаква цифра от 1 до 6 включително. Той има и съответния затварящ таг. </li></ul><ul><li><h4>Това е заглавие от ниво 4</h4> </li></ul><ul><li>При използването на този таг автоматично се добавя по един празен ред над и под текста на заглавието. </li></ul><ul><li>Атрибута COLOR: </li></ul><ul><li>Задаването на цвят става като се присвои някаква стойност на атрибута color. </li></ul><ul><li><font color=&quot;blue&quot;> Това е син текст </font> <font color=&quot;green&quot;> Това е зелен текст </font> </li></ul><ul><li>Комбинирано задаване на атрибути: <font face=&quot;arial&quot; size=&quot;4&quot; color=&quot;green&quot;> Това е текст в шрифт arial, с размер 4 и зелен цвят </font> </li></ul><ul><li>Инструменти за допълнително въздействие върху вида на текста: </li></ul><ul><li>Основните инструменти за преправяне вида на текста са таговете <b>, <i> и <u>. Всеки от тях има и завършващ таг с наклонена черта. </li></ul><ul><li>Тага <b> служи за удебеляване на текста. </li></ul><ul><li>Тага <i> прави текста курсивен (наклонен). </li></ul><ul><li>Тага <u> прави текста подчертан. </li></ul>
  9. 9. <ul><li>цветовете на фона на страницата и на текста могат да се задават чрез изписване на английското название на съответния цвят, например: </li></ul><ul><li><font color=&quot;blue&quot;> Това е син текст </font> <body bgcolor=&quot;yellow&quot;> (Задава жълт цвят на фона) </li></ul><ul><li>Не всички оттенъци могат да се изобразят чрез изписване на съответното английско название. </li></ul><ul><li>Не е препоръчително изобщо да използвате езиковите названия на цветовете , за да зададете цвят. </li></ul><ul><li>Браузърите показват всички цветове чрез комбиниране на различните стойности на само 3 цвята: червен (Red), зелен (Green) и син (Blue). Това е т.нар. R G B стандарт . Всеки един от тези 3 основни цвята може да приема стойности от 0 до 255. Всички останали цветове представляват някаква комбинация от тези стойности. Например кода за бял цвят е R:255, G:255, B:255, а кода за черен цвят е R:0, G:0, B:0, т.е. нулата &quot;създава&quot; най-тъмната част на спектъра, а 255 - най-светлата. </li></ul><ul><li>HTML не възприема десетичните стойности на цветовете, затова те се превръщат в 16-сетични стойности. </li></ul><ul><li>Така например 255 се изобразява в 16-сетичен код като FF, а 0 като 00. </li></ul>Обща информация:
  10. 10. Изображенията - картинки, фотографии и др., анимирани или статични - са важна част от почти всеки сайт в мрежата. Добре подбрани и разположени, те могат да &quot;освежат&quot; HTML-страницата ви, но претрупването на една страница с изображения може да постигне и обратния ефект, като я направи непривлекателна. Освен това използването на прекалено много изображения ще направи страницата &quot;тежка&quot; и трудна за зареждане. Формати на файловете за изображения: gif формат , който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат &quot;сложни&quot; оттенъци и светлосенки. Файловете с разширение gif имат две важни предимства пред другия основен формат: - могат да съдържат &quot;прозрачен&quot; елемент в себе си - това например може да е фона на буквите от някакъв надпис, който ще прозира и под него ще се вижда фона на страницата. Тогава този файл ще &quot;пасва&quot; на страници с различно оцветен фон. - gif файловете могат да бъде анимирани - да съдържат движеща се картинка. jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии . Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на gif формата, но за сметка на това jpg файла не може да бъде анимиран, нито да съдържа прозрачни елементи.
  11. 11. <a href=&quot;адреса, към който ще води връзката&quot;>названието на връзката, което ще се вижда на екрана</a> Пример: <a href=&quot; http://www.yahoo.com &quot;> Връзка към www.yahoo.com</a> Пример за хипервръзка към страница от същия сайт: <a href=&quot; folder1/page2.html &quot;>Връзка към страница page2.html, намираща се в папка folder1, от началната страница index.html</a> Изображенията като хипервръзки: <a href=&quot;http://www.somesite.com&quot;> <img src=&quot;image.gif&quot; > </a>
  12. 12. Използвани връзки: http://en.wikipedia.org/wiki/HTML http://google.com/HTML Благодаря за вниманието!

×