Какъв е HTML кодът на страницата? HTML: Основи за начинаещи За какво се използва HTML?

Със сигурност всеки безработен интернет потребител се е сблъсквал със ситуация, в която, когато отворите красив уебсайт, си мислите какво би се случило, ако създадете такъв уебсайт, защото наличието на добър уебсайт ще ви донесе пари и може би дори слава. Имате желание и желание за това, веднага въвеждате в търсачката „Как да създадем уебсайт?“ Почти навсякъде ще ви кажат, че за да създадете добър уебсайт, трябва да научите HTML. Ако сте нов в този бизнес, тогава вероятно ще искате да знаете какво е това.

Ще ви обясня накратко какво е HTML с мои собствени, по-разбираеми думи, отколкото в Уикипедия.

HTML е основният език за уеб програмиране, основата на всички основи на изграждането на уебсайтове. Почти всички уебсайтове са написани на този език. Размерът на текста в сайта, размерът и местоположението на изображението, фонът на сайта и др. всичко това е написано на този език. HTML е това, с което се раждат уебсайтовете, което означава, че е родният език на почти всички уеб страници. Например, ако сте китаец, тогава говорите китайски, ако сте украинец, тогава говорите украински, но ако сте уебсайт, тогава говорите HTML. Всеки добър уеб програмист знае HTML почти наизуст и се справя добре с него.
Този език е разбираем и лесен за научаване, но като всички езици на този свят, за да го говорите добре, той изисква практика. Тоест, дори да го научите напълно, няма да можете да направите добър уебсайт веднага, трябва ви време, търпение и практика. Обикновено начинаещите в началото на пътя си като уеб програмист просто нямат търпението да научат всичко и да го практикуват стъпка по стъпка. Тези, които преминаха теста, научиха всичко, натрупаха опит в практиката си, докато учат езика и не се отказаха - очаква добра награда.
Има няколко езика за уеб програмиране. За да създадете прост уебсайт, имате нужда само от един език, основният, а именно HTML. За да създадете сложен и голям уебсайт, ще ви трябват спомагателни езици, така да се каже, ще научите за тях още по време или след изучаване на езика HTML. Ако решите да започнете пътя на уеб програмист, можете да започнете да изучавате HTML още сега. Запомнете най-важното - ако го вземете, не се отказвайте и не се отказвайте, тъй като това съсипва повечето програмисти.

HTML декодиране

Тези четири букви от HTML означават няколко думи, а именно език за маркиране на хипертекст, който на руски звучи като език за маркиране на хипертекст.

Защо е необходим HTML?

Защо е необходим този език? Защо да го уча? Защо не някой друг? Или защо дори да го научите, ако има куп други програми за лесно създаване на уебсайт?

Както казах, HTML е основният език за уеб програмиране. Това не е единственият език, който се използва за създаване на уебсайтове, но е основният инструмент, който ръководи другите езици, така че е наложително да го научите. Дори ако използвате програма за създаване на уебсайтове или готови шаблони, HTML ще направи живота ви много по-лесен. Освен това, ако искате да създадете добър, голям и професионален уебсайт в бъдеще, програмите и шаблоните няма да ви помогнат, всичко ще започне от нулата и познанията ви по този език ще ви помогнат в това.

Как се използва HTML

Използването на този език е много лесно и е достъпно за всеки. Може дори да се използва в обикновен бележник (.txt). За по-удобно използване има специални програми, например Notepad++. Повече подробности за използването на този език ще бъдат описани в уроците по HTML.

Как да научите HTML

За да научите HTML, трябва да имате много търпение, за да се почувствате удобно с този език. Лесно се учи, но основното е да трупаш опит, да практикуваш, колкото повече практика имаш, толкова по-добър уеб програмист си.

Всеки сайт има различен външен вид и функционалност, но с какво е свързано това и на какъв език е написана страницата? За всичко това се използват каскадни стилови таблици и HTML. Можете сами да разгледате кода за този език, ако прегледате обектите в браузъра. Ще говорим конкретно за това какво е HTML в тази статия.

Нашата статия е насочена главно към начинаещи, така че се надяваме, че редовните читатели на блога ще разберат!

Публикацията ще бъде разделена на следните точки:

Какво е HTML страница

Език за маркиране, наречен HTML, се използва за проектиране на всички елементи на страницата, включително таблици, изображения и текст. Можете да се запознаете с кода и да се опитате да го разберете, ако използвате модерен браузър, просто щракнете с десния бутон върху страницата и в менюто щракнете върху реда „изходен код на страница“ или „HTML код“. След това ще видите нещо като редактор, в който има много неразбираеми надписи и символи, това е езиковият код на HTML.

Всеки WWW документ има форматиран и красиво проектиран текст, както и хипервръзки и изображения, които са избрани от собственика на сайта. За да работят с тези елементи, програмистите създадоха език, наречен HTML (Hyper Text Markup Language), което в превод означава език за хипертекстово маркиране. Всеки браузър работи и показва HTML по различен начин, така че той изглежда различно в различните браузъри, особено в по-старите версии на Internet Explorer.

Всички HTML документи са подобни - това е стандартен текстов файл, който има етикети за маркиране на даден език, заедно с текстовете, които посетителите на сайта ще прочетат. Една страница се създава с помощта на тагове и именно тях браузърът чете, когато я зарежда. Чрез дефиниране на етикети и техния дизайн можете да поставите статия или друг материал на определено място на страницата, да добавите графични файлове и снимки, както и хипервръзки към други страници на сайта. Първоначално HTML файлът не е уеб документ; той става такъв едва след като бъде прочетен от браузъра.

Разбира се, стандартният HTML код има своите недостатъци и недостатъци. Ще трябва да опитате много, за да подредите абзаци с текст на страницата, защото за да извършите маркиране и всичко останало, трябва да регистрирате определени свойства за целия текст и за всеки отделен абзац. Ако вашият сайт има 50 страници и всяка има 10-20 абзаца, ще отнеме много време, за да форматирате текста и да вмъквате едни и същи тагове всеки път. Това не само изморява собственика на сайта, но и се отразява негативно на теглото на страниците на сайта. Поради тази причина по-късно бяха създадени каскадни стилови таблици, те се наричат ​​накратко CSS, което означава каскадни стилови таблици, благодарение на тях можете бързо да проектирате текст. Можете да присвоите един таг и да му дадете определени характеристики, като цвят на текста, размер, шрифт и т.н., и след това да го приложите към абзаци. В този случай файлът със стиловия лист се съхранява отделно, може да бъде качен на един сайт или няколко наведнъж. След това основните елементи на страницата се изписват в HTML и се вмъква текстът, след което се свързва CSS и целият текст приема дизайна, от който се нуждаете. Това също намалява теглото на страниците, което е много важно.

Използването на CSS е препоръчително, ако сайтът има много страници, които ще имат еднакъв дизайн. Можете да зададете определено текстово форматиране за всички параграфи, ако напишете няколко реда в документа с CSS код. Когато създават уебсайт, дизайнерите на оформление създават основното оформление в HTML въз основа на оформлението, създадено във Photoshop. Но след това сайтът изглежда недовършен, трябва да създадете привлекателен външен вид, а това се постига с каскадни стилови листове. Не е трудно да научите това, ако имате много свободно време, тъй като общият вид на всички сайтове е приблизително еднакъв, можете да имате едно оформление с няколко блока и да „настроите“ останалите сайтове към него. Като правило каскадните стилови таблици са много по-сложни от CSS; дори е по-трудно да се оформи сайт с помощта на блокове, а не на таблици. Освен това в началните етапи може да срещнете проблем като различно показване на сайта в браузърите. Именно за да не се губи време и да се печелят пари от сайтове, са създадени CMS - готови оформления на уебсайтове, които могат да бъдат безплатни или платени и да имат специфична система за управление.

Какво е HTML5. Разлики и предимства

Новият стандарт HTML5 помага на собствениците на уебсайтове и ги освобождава от задължението да използват формата Adobe Flash, както и други програми. Благодарение на този стандарт можете да промените показването на текст на страниците и да опростите въвеждането на информация при попълване на електронни формуляри. Ако разделим всички иновации на този език, можем да подчертаем следните точки:

  • След като влязат в сайта, хората ще могат да гледат видео и да слушат аудио през браузъра, за това е създаден отделен бутон за възпроизвеждане.
  • Много по-лесно е да качвате нови снимки чрез този език; можете дори да създавате галерии с изображения. Дори не е необходимо да изтегляте допълнителен софтуер.
  • Можете да локализирате текст и да маркирате текстови блокове. Можете също така да форматирате красиво текста, за да го направите по-лесен за четене.
  • Ако преди това в HTML4 човек забеляза грешка след въвеждане на данни само когато изпрати формуляра, сега браузърът незабавно отчита грешка, ако човек попълни формуляра неправилно. Това е много удобно за потребителите, защото не се налага да попълват едни и същи секции с данни няколко пъти.
  • Няма нужда да използвате софтуерни модули, тъй като с помощта на HTML5 можете да оживите всякакви идеи относно сайта. Само ако сайтът е уникален и трябва да измислите нещо специално, се инсталират допълнителни софтуерни модули.
  • Преди това хората не можеха правилно да разглеждат уебсайт през таблет или смартфон, тъй като стандартът HTML4 не е съвместим с браузъри за мобилни устройства и други операционни системи. С помощта на езика HTML5 се създават страници, които са перфектно четими от всички устройства с висока скорост.
  • Ако имате въпроси, напишете ги в коментарите, ще се радваме да им отговорим!

    Основи на HTML за начинаещи, това, което всеки начинаещ уеб администратор или блогър трябва да знае сега. Ако искате да научите как да създавате основни уебсайтове, да разберете самия код, да знаете какво стои зад какво и какво трябва да върви, просто е невъзможно да направите това без познаване на основите на езика HTML. В моя блог ще имам цяла верига от статии, които ще посветя на тази тема от А до Я, ще опиша всеки етикет, който присъства в документа, какво означава и как да го използвам правилно.

    Основи на HTML

    Ако не знаете най-основните неща, пътят ви е затворен. Смятам, че всеки човек, който реши да разработва и създава уебсайтове, трябва да знае и разбира основите, от какво се състои самият сайт, как работи и какво се случва в самия код.

    Разбира се, има доста езици за програмиране, всички те са сложни по свой начин, но има някои, които абсолютно трябва да знаете. Ако искате да оформите красиво писмо, което да бъде изпратено по пощата, имате своя собствена група VKontakte, група в други социални мрежи, същия канал в YouTube, трябва да бърникате с кода на някой от двигателите на сайта, просто трябва да познава основните понятия.

    Дадох само няколко примера, всъщност сега това знание се използва все по-често в Интернет. Аз съм повече практик, отколкото теоретик, така че в моите статии в този раздел ще ви покажа моите примери за това как и какво съм направил, стъпка по стъпка. Ще публикувам както примерни страници, така и цели сайтове.

    Html документът е най-простият текстов документ, език за етикети, който срещате всеки ден в Интернет. Етикетите описват структурата на документа. Етикетите са форматирани като ъглови< >скоби, в които се изписва името на тага. Браузърът разглежда структурата на документа, изгражда го и го показва според инструкциите на вашия монитор, ако, разбира се, сте направили всичко правилно.

    Целият този процес започва още преди да видите завършената картина. Браузърите обработват документ последователно, от началото до края. Включително всичко, което трябва да има на страницата. Таблици, картини, скриптове и така нататък, с изключение на това, което включва CSS стилове.

    Основи за начинаещи

    Какво е html - ако погледнете какво пише в Уикипедия - (HyperText Markup Language) език за маркиране на хипертекст за документи. Повечето страници в интернет съдържат маркиране на страници на този език. Този език се интерпретира от браузърите и полученият форматиран текст се показва на монитора на вашия компютър или мобилно устройство.

    Този език по своята същност е много лесен и достъпен за научаване. Всеки може да научи и разбере основите му. За да използвате такъв език, трябва да знаете и да използвате дескриптори, които също се наричат ​​тагове. Именно с помощта на тагове се създава документ.

    От какво трябва да се състои структурата на документа, какви тагове трябва да присъстват. Нека разгледаме всичко с един малък пример. Написах текст в MS Office и го показах на тази екранна снимка.

    За да покажете този текст в браузъра по същия начин, както е написан в документа, трябва да добавите към него маркиране на страницата, което включва някои тагове. Първо ги разгледайте, след това ще опиша всеки кой за какво отговаря.

    Добре дошли в моя блог, сега вземате урок по основи на HTML. Ако сте харесали тази статия, можете да се абонирате за този блог, за да получавате нови статии във входящата си поща.

    Блог на Евгений Несмелов! уебсайт Основи на html и css за начинаещи

    От какви тагове се състои всеки html документ, какво включва и къде трябва да бъде записано?

    < html >

    < body >

    < h2 >< / h2 >

    < p >Добре дошли в моя блог, сега вземете урока за основите на HTML. Ако сте харесали тази статия, можете да се абонирате за този блог, за да получавате нови статии във входящата си поща.< / p >

    < h2 >Блог на Евгения Несмелов! Несмелов. ru Основи на HTML и CSS за начинаещи< / h2 >

    < / body >

    < / html >

    Всеки код се състои от знаци, поставени в ъглови скоби. Всички те се наричат ​​елементи. Всички елементи обикновено се състоят от два тага, отварящ и затварящ. Съветвам ви първоначално да разгледате внимателно етикетите; ако пропуснете някой от тях и не го затворите, ще трябва да преразгледате големи части от кода, за да намерите грешката.

    Имаше случаи, когато отнема повече от един ден, човек се свързва и моли за помощ, не може да намери грешка в сайта си, така че винаги гледайте много внимателно какво и къде пишете. Нека сега използваме този пример, за да разгледаме всеки елемент от кода, какво е написано в него, какво означава и какво се случва в крайна сметка.

    Повечето тагове са сдвоени, което включва отварящ таг и затварящ таг. В допълнение към такива тагове има и единични тагове. Етикетите могат да вървят заедно с други, като по този начин се влагат един в друг. Например, покажете текста едновременно с удебелен шрифт и курсив.

    Текст

    < strong > < i >Текст< / strong > < / i >

    Структура на HTML документ

    Нека ви напомня още веднъж, трябва да следвате правилата, които присъстват в документа. Така браузърът разбира какво има на страницата, нейната последователност, съдържание и т.н.

    Тагът е компонент, който казва на уеб браузъра да изпълни определена задача. Например наличието на параграф, таблица, форма или изображение.

    Атрибут - променя етикета. Например, можете да подравните абзац центрирано или подравнен вдясно, също така да зададете местоположението на изображението на страницата и т.н.

    ВИНАГИ затваряйте етикети, ако го отворите, не забравяйте да го затворите. В противен случай ще възникне грешка и вашият документ няма да се показва правилно на страницата. Има и изключения, които не трябва да се забравят.

    Очевидно е необходимо да се разбере, че има заглавие на документа и неговото тяло. Заглавието е всичко, което се съдържа в етикета. Тяло на документа (), тялото на документа съдържа цялото съдържание на страницата. Ако има нужда да оставите част от кода за себе си, като по този начин поставите тези тагове в коментари, маркерът се използва за това. Всичко, което е вътре в такъв таг, служи като коментар и не се възприема от браузърите.

    Да започнем с първия. В началото на документа отворих таг и в края го затворих. Този код присъства в абсолютно всеки документ, той казва на браузъра, че всичко поставено между тези тагове е HTML код. Това е коренът на самия документ; всичко, което впоследствие присъства зад този етикет, вече не е включено в документа и не се възприема от браузърите. В самото начало на документа етикетът се отваря и в самия край трябва да се затвори.

    Целият раздел на този етикет съдържа цялата техническа информация на документа. Подобно на предишния етикет, главата също трябва да се отваря и затваря в края. Тази информация включва заглавие на страницата, описание, ключови думи на търсачката и кодиране. За кодирането малко по-долу.

    Съдържание

    < head >Съдържание< / head >

    Този етикет е включен в главата и трябва да бъде написан вътре в главата. Този етикет за заглавие е задължителен и трябва да присъства във всеки HTML документ. В допълнение към това се появява като заглавие на прозореца на браузъра. Дължината на такова заглавие не трябва да надвишава 60 знака. Текстът на такъв хедър трябва да съдържа най-пълната информация, която характеризира съдържанието на страницата.

    Ако сте написали „Hello World“ в заглавката, това е информацията, която трябва да се показва на страницата и никаква друга. Не бива да мамите хората и търсачките, те не го харесват и по този начин влошавате нещата за себе си. Информацията, съдържаща се в този етикет, трябва да отговаря на съдържанието на вашата страница.

    След задължителния таг за заглавие има незадължителен, но също толкова важен мета таг. Този етикет е единичен. Използвайки този таг, вие задавате описание на страницата (description) и нейните ключови думи (keywords).

    Освен това мета тагът може да съдържа данни за автора на страницата и други свойства на метаданни. Можете да предотвратите индексирането на цялата страница от търсачките. Настройте страницата да се опреснява автоматично след 20 секунди или след 5 секунди, последвано от преход към друга страница.

    < meta name = "robots" content = "index, follow" >

    < meta http - equiv = "refresh" content = "20" >

    < meta http - equiv = "refresh" content = "5; url=http://сайт/" >

    Може да има няколко такива мета елемента, тъй като те могат да носят напълно различна информация. Други потребители, когато отворят страницата в браузъра, не виждат всички ваши описания, всичко това остава скрито от погледа.

    Тагът стил може да се използва и за задаване на стилове на страницата. Ако използвате много различни css стилове, тогава е препоръчително да ги зададете в отделен файл. Ако трябва да посочите няколко от тях, всичко това може да бъде указано директно в html документа.

    .base (ширина: 100px; цвят на фона: #000; височина: 150px; цвят: #fff;)

    < style type = "text/css" >

    Основа (

    ширина: 100px;

    фон - цвят : #000;

    височина: 150px;

    цвят : #fff;

    Или добавете стилове специално към един таг; за да направите това, трябва да добавите стилов елемент вътре в самия таг. Този етикет трябва да се използва вътре в контейнер, който задава стилове за страницата. Можете да използвате няколко такива етикета, това няма да е грешка.

    Малко подобен на предишния етикет, етикетът за връзка ви позволява да задавате стилове за документ, който е в друг файл. С други думи, можете да прикачите пълен css стилов лист, който се състои от много свойства, към съществуващ документ. Така намалявате размера на документа, който в крайна сметка ще се зарежда и отваря по-бързо на компютър или мобилно устройство с ниска интернет скорост.

    Можете да свържете повече от един файл, няма ограничения. Няма нужда да затваряте такъв етикет. Ако всичко е направено правилно, конкретни стилове от отделен файл ще бъдат заредени във вашия документ. Този таг може да се добави към основите на html и да не се забравя за неговото съществуване. Резултатът е такава картина:

    < link href = "css/style-lg.css" rel = "stylesheet" >

    < link href = "css/style-md.css" rel = "stylesheet" >

    < link href = "css/style-sm.css" rel = "stylesheet" >

    С помощта на маркера скрипт можете да свържете различни сценарии (скриптове) към документ. Наличието на затварящ таг е задължително. Самият скрипт може да се намира в началото на документа, вътре или в края.

    Казва на браузъра, че всичко поставено между тези тагове трябва да се появи в прозореца на браузъра ви. Ето основните тагове, които могат да присъстват в абсолютно всеки документ. Тагът body служи като основното тяло на страницата, което включва цялото й съдържание. Препоръчително е да отворите този етикет и не забравяйте да го затворите в края на документа.

    Заглавия на страници h1 h2 h3

    Нека отидем по-нататък, виждаме етикет, който се отваря и затваря по същия начин. Този таг обозначава основното заглавие на текста; в повечето случаи под заглавието H1 е заглавието на страницата. Всъщност има само шест заглавия с данни. . Използват се и в SEO, но това е малко по-различна тема. Определено ще подчертая една статия за това и ще дам подробно описание за тях, абонирайте се за актуализации на блогове, за да не пропуснете нищо.

    Наличието на такива заглавия в статията ще играе важна роля за популяризирането на страницата. Освен това използването им ви дава ясна структура на страницата, нейното заглавие, подзаглавия, акценти, подпараграфи и т.н. Винаги ги използвайте и прилагайте на практика. В много CMS, като WordPress, когато пишете текст, можете да видите „заглавие 1“, „заглавие 2“, „заглавие 3“ и т.н. Те са тези, които отговарят за h1, h2 и h3.

    Ако пишете основен текст от нов параграф, пишете етикет

    В началото и го затворете в края

    . Маркирането на параграф в html е еквивалентно на създаването на нов параграф в документ на MS Word. Не съм добавил нищо ново към документа. Но това не е всичко, което трябва да присъства в един html документ. Нека да разгледаме друг пример, описанието ще дойде малко по-късно.

    HTML документ

    Този текст ще бъде удебелен, и този също е в курсив

    < ! DOCTYPE html >

    < html >

    < head >

    < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

    < title >HTML документ< / title >

    < / head >

    < body >

    < p >

    < b >

    < / b >

    < / p >

    < / body >

    < / html >

    Основни елементи Глава и Заглавие

    Всеки документ съдържа глава и заглавен елемент. Първият, който идва веднага след първия таг. Този таг съдържа цялата информация за страницата, съдържа и елемента. Заглавие – информация за заглавието на страницата, с други думи заглавието на страницата, нейното име. В заглавието посочвате правилното име на страницата, с която потребителят ще ви търси чрез търсачката, много важен момент. И двата елемента трябва да са отворени и затворени. Всеки елемент се затваря със знак “/”. Резултатът е подобна снимка.

    Заглавие&Съдържание на страницата

    < / html >

    Както можете да видите, няма нищо сложно. Ето най-основните тагове, които трябва да присъстват във всеки html документ. Не забравяйте да затворите всеки от тях, в противен случай браузърът няма да може да възприеме пълната картина на кода. Трябва да знаете и да помните това винаги. След това започвате да вмъквате текст, снимки, видеоклипове и т.н. Но това вече ще бъде в други статии.

    Редактор на Notepad++

    За да работите с кода, използвайте програмата Notepad++. Безплатно е и не е трудно да го намерите в интернет. Много удобен за разбиране на всеки код; също така удобно показва отварящите и затварящите тагове. Ние поддържаме синтаксиса на повече от 40 езика за програмиране. Точно това, от което се нуждаете, за да научите основите на html.

    Бележникът превъзхожда във всяко отношение обикновения бележник. За максимално удобство, простота и обучение, този редактор трябва първоначално да бъде инсталиран на вашия компютър. Най-важното предимство и удобство е, че редакторът на Notepad++ показва подсказки при писане на код, което прави работата ви много по-бърза и качествена.

    DOCTYPE елемент

    Всеки документ трябва да съдържа и следния елемент doctype. Защо е необходимо и какво трябва да има в него. Обикновено хората не са много запалени по тези редове, копират ги в документите си и си работят спокойно. Тези елементи казват на браузъра каква версия на html се използва в документа, какво е описанието на страницата, какво кодиране се използва, какви ключови думи са включени, кой е авторът и как се нарича страницата.

    Обикновено се поставят в самото начало. Има няколко опции и всички те се различават една от друга, ще напиша един пример, който се използва най-често. Тази заготовка може да се използва като готов шаблон. След това ще има ясно описание на всеки ред, не трябва да има проблеми с това.

    Накратко на ясен език за основите на html: Този ред казва на браузъра, че този документ е XHTML версия 1.0, използва се английски и цялата тази бъркотия се намира на този адрес. След това в мета тага посочваме кодирането, което се използва. Най-често използваната е Windows 1251.

    Описание - засяга се темата за SEO, един от трите основни тага, които трябва да присъстват в абсолютно всеки документ, този таг обозначава описанието на страницата. Какво пише на тази страница, кратко описание, не повече от две изречения. Тагът за ключови думи също обхваща темата за SEO, този таг е задължителен. Той съдържа ключови думи, които интернет потребителите ще използват, за да ви намерят чрез търсачките.

    Тагът за заглавие съдържа името на самия документ, неговото заглавие, което виждаме в браузъра. Може би най-важният таг в целия документ, който има най-голямо влияние върху популяризирането на страницата. Статията за добавяне и проектиране описва този етикет по-подробно.

    Какво трябва да запомните от този урок относно основите на html:

  • Почти всички тагове се отварят и затварят;
  • Документът започва с етикета ;
  • Наличие на етикет;
  • Наличие на етикет;
  • Ясна структура на html документа.
  • Всички главни страници винаги трябва да се наричат ​​индекс. Така е прието и всеки е свикнал, независимо какво е разширението на файла, може да е html или php. Винаги се нарича така.

    Гледайте видеоклип за основите на HTML от Webformyself.

    Език за маркиране на хипертекст, основни елементи и структура. Ще се опитам да опиша всичко това и много повече в моя блог. На първо място ще бъде написана полезна информация за начинаещи, ще бъде предоставен примерен код и ще бъде предоставена възможност за изтегляне на самия пример заедно с готовата страница.

    За появата на HTML съвременният свят има един учен от Европейския съвет за ядрени изследвания (Conseil Européen pour la Recherche Nucléaire, CERN), на който да благодари. Името на този учен е Тимъти Джон Бърнърс-Лий. Първата версия на HTML е създадена с цел форматиране на научни документи. Това е структурно форматиране без елементи на описание на цветови схеми, параметри на шрифта и др. По този начин HTML първоначално направи възможно маркирането на заглавия, параграфи, списъци и подобни структурни елементи в текста. Резултатът от обработката или „възпроизвеждането“ на HTML не трябва да зависи от техническите характеристики на хардуера за неговата визуализация, тъй като той не съдържа параметрите на тази визуализация. С течение на времето тази функция на езика за маркиране на хипертекст беше частично загубена.

    И така, появата на първите версии на HTML датира от 1986 г., а през 1991 г. HTML беше значително подобрен и започна да се използва специално за предаване на хипертекст в световната мрежа. Казват, че световноизвестното съкращение HTML, което означава Hyper Text Markup Language, се е появило точно в началото на 90-те години на миналия век. А сега кратка екскурзия в родословието на езиците за маркиране. Първата версия на хипертекстовия език за маркиране HTML е създадена на базата на Standard Generalized Markup Language (SGML), който по някакъв начин може да се счита за прототип на eXtensible Markup Language. Стандартът XML придоби огромна популярност в наше време поради големия брой разширения, използвани в компютърните технологии. За да объркам напълно читателя, веднага ще добавя, че впоследствие на базата на XML е разработен хипертекстовият език за маркиране XHTML (Extensible Hypertext Markup Language), който по същество репликира HTML. В резултат на това имаме акронимите SGML, HTML, XML и XHTML и трябва да разберем кое е кое. Всъщност всичко е просто: SGML не е нищо повече от набор от правила, въз основа на които може да се изгради всеки език за маркиране. HTML е един от тези езици - приложението SGML. С други думи, SGML определя как трябва да изглеждат елементите за маркиране, а HTML определя какви точно трябва да бъдат елементите и как трябва да се интерпретират от браузърите. XHTML от своя страна е приложение на XML, а самият XML не е нищо повече от опростена версия на SGML. , въпреки факта, че са много сходни на външен вид, те имат значителни скрити разлики, които в по-голямата си част се крият в принципа на тяхната обработка.

    Сега да се върнем към историята на развитието на HTML. И така, до 1994 г. HTML все още се използва само за структурно маркиране на данни, въпреки че вече включва тагове за подчертаване на текст с удебелен шрифт или курсив. През същата 1994 г. е създадена организацията W3C (World Wide Web Consortium) - World Wide Web Consortium, която съвсем логично се ръководи от същия Тим Бърнърс-Лий, а през 1995 г. е публикувана препоръката за HTML 2.0. Създателите на HTML вече разбраха, че с течение на времето тяхното въображение ще се развие от език на статично маркиране на текст в основния инструмент за създаване на динамични интернет ресурси. Основното допълнение на HTML 2.0 беше появата като част от езика на формуляри с набори от потребителски контроли, които трябваше да се използват от потребителя за въвеждане на параметри за HTTP заявки.

    След пускането на втората версия веднага започна работа върху следващото поколение HTML. През 1997 г. беше пусната препоръката HTML 3.2, която допълни езика за маркиране с таблици, рамки, изображения и някои други важни тагове. Но най-важното постижение на третата версия е, че нейните автори отново се върнаха към проблема с визуализирането на маркирането в браузъра, като помнят, че HTML трябва само да маркира структурата на документа и не трябва директно да съдържа параметри за графични стилове за показване на елементи в браузъра. Резултатът от работата им по HTML 3.2 беше появата на независим CSS език (Cascading Style Sheets) - каскадни стилови таблици, чийто код вече може да бъде свързан с HTML кода за маркиране и по този начин да персонализира външния вид на страницата.

    С пускането на версия 4 на HTML през 1997 г. екипът на W3C се освободи от въображението си от онези ненужни елементи, които с появата на CSS бяха остарели и компрометираха идеята за разделяне на структурното маркиране от параметризирането на презентацията. Но никой не би блокирал нова версия заради такива дреболии. Основното постижение на препоръките на HTML 4.0 беше появата на обектния модел на страницата (Document Object Model, DOM), чиито елементи вече могат да бъдат манипулирани чрез скриптови езици за програмиране, изпълнявани от браузъри. Най-популярният такъв език за програмиране е JavaScript. HTML плюс DOM плюс JavaScript се равнява на Dynamic HTML или просто DHTML, което бележи пробив в уеб дизайна. Сега елементите на заредена интернет страница могат да променят външния си вид в отговор на действията на потребителя, както и да добавят нови и да изтриват съществуващи елементи. На 24 декември 1999 г. беше пуснато последното издание на 4-тата версия на езика за маркиране на хипертекст, HTML 4.01.

    HTML5 все още не е получил статут на официална препоръка на W3C, но вече е ясно, че авторите на HTML продължават да работят за разработване на изисквания за поддръжка на обектен модел на документ и интерпретация на JavaScript. Въпреки че HTML5 ще получи редица нови тагове, повечето от препоръките все още се отнасят до поведението на браузъра в контекста на DHTML: ще има вградена поддръжка за функции за плъзгане и пускане, възможност за рисуване върху виртуално платно , контролирайте хронологията на сърфирането и споделяйте съобщения между страниците, запазвайте контекста на изпълнение и много повече. Надяваме се, че с пускането на нови препоръки за HTML постепенно ще изчезнат проблемите с липсата на съвместимост между различни браузъри, когато един и същ JavaScript код се изпълнява по различен начин под различни браузъри. В крайна сметка тенденцията за дефиниране на изисквания за работа с обектния модел и JavaScript ще продължи и разработчиците на браузъри ще бъдат задължени (ако искат техните софтуерни продукти да бъдат използвани) да спазват тези изисквания.

    HTML5 е планиран за пускане през 2014 г. Може би по това време W3C ще е разработил отделни препоръки, отнасящи се само до програмирането на JavaScript, и HTML в крайна сметка отново ще стане изключително език за маркиране за структурата на документи. Въпреки факта, че днес е само 2012 г., много от тях вече се поддържат от най-популярните браузъри. Много неща, които преди това уеб дизайнерите трябваше да правят сами (същото плъзгане и пускане), с пускането на HTML5 ще се поддържа на ниво браузър и това развитие на събитията не може да не се радва. Можем само да се надяваме, че тенденцията ще продължи.

    Интернет е световна мрежа, която обединява компютърни мрежи по света на базата на единни стандартни споразумения (протоколи) за методите за обмен на информация и унифицирана система за адресиране.

    Към днешна дата Интернет придоби безпрецедентна популярност. Според експерти интернет свързва повече от 100 милиона компютъра. Повече от 300 милиона души в 170 страни използват интернет услуги.

    От функционална гледна точка Интернет е:

    ü евтино, бързо средство за комуникация между абонати по целия свят;

    ü несравнимо хранилище на информация във всяка област на знанието;

    ü нова перспективна среда за дейност.

    Влиянието на Интернет се простира не само в технологичната сфера на компютърните комуникации, но има и социална ориентация и прониква в цялото общество, тъй като оперативните средства за получаване на знания и електронната търговия стават все по-разпространени.

    Най-разпространената и популярна Интернет услуга днес е WWW (World Wide Web). Информацията в WWW се представя под формата на така наречените хипертекстови (или по-широко хипермедийни) документи, които могат да съдържат форматиран текст, графики, аудио и видео фрагменти.Основната характеристика на хипертекстовите документи е наличието на активни зони, които са чувствителни към щракване на мишката Фрагменти от текст могат да бъдат активни, цели изображения и техните части; щракването върху активната зона предизвиква изтеглянето на (целевия) документ, свързан с тази зона.

    За да научите как да публикувате материали в интернет, първо трябва да се запознаете с хипертекстовия език за маркиране HTML (H yperT ext M arkup L jezik)

    Основи на HTML

    Езикът за маркиране на хипертекстови документи HTML е набор от команди, наречени етикети (от английски етикет HTML таговете, намерени в текста на документ, се интерпретират от браузъра при показване на документа.

    Прегледът на HTML документи се извършва с помощта на програми - браузъри(от английски браузър), които показват документа според HTML маркирането и осигуряват навигация с хипервръзки. Най-често срещаните браузъри са Microsoft Internet Explorer от Microsoft Corporation и Netscape Navigator от Netscape Communications Corporation.

    Тъй като HTML документът е текстов файл, той може да бъде подготвен в обикновен текстов редактор, като Notepad ( Бележник), но е много трудоемко. По-често те използват специализирани редактори, предназначени специално за подготовка на HTML документи, които ви позволяват да вмъквате тагове с помощта на бутони на лентата с инструменти или команди от менюто и да задавате атрибути на тагове в диалогови прозорци, например Macromedia Dreamweaver, Microsoft FrontPage, HomeSite и др.

    HTML документ може да бъде получен чрез преобразуването му в HTML формат, например от документа на Microsoft Office. Трябва да се отбележи, че при такава трансформация изходният текст на HTML документа се оказва изключително излишен и се нуждае от корекция.Много по-ефективно е да използвате специални HTML редактори.

    Синтаксис на HTML тагове

    HTML тагът се изписва в ъглови скоби (знаци) и се състои от име, което може да бъде последвано от списък с атрибути (по избор за повечето тагове). Имената и атрибутите са английски думи и съкращения.

    Таговете могат да бъдат разделени на две групи:

    Сдвоени тагове (наричани още контейнери) имат два компонента: начален (начален) и затварящ (краен); затварящият компонент има същото име, но когато се изписва, името се предхожда от наклонена черта (символ /). Текстът на документа и други етикети могат да бъдат разположени между отварящия и затварящия компонент. Фрагментът на документа, разположен между отварящия и затварящия елемент на тага на контейнера, се форматира от браузъра според значението на тага.Например, текстът, разположен между таговете, ще бъде показан с удебелен шрифт (името на тага е от англ. удебелен). Сдвоените тагове могат да бъдат вложени, но не трябва да се припокриват.

    Несдвоени тагове (наричани още автономен) нямат краен компонент.При интерпретирането им се вмъква един или друг обект в показания документ. Например етикет , срещащ се в текста на HTML документ, кара графичното изображение от файла pict.gif да бъде вмъкнато.

    Атрибутите в списъка са разделени един от друг с един или повече интервали, или табулатори, или знаци за нов ред; редът, в който са написани атрибутите, не е важен. По-голямата част от атрибутите се използват като двойка име на атрибут = стойност на атрибут. Когато стойността на атрибута е повече от една дума или едно число, тя трябва да бъде затворена в единични или двойни кавички. Атрибутите не са посочени в затварящите компоненти на таговете.


    Ето пример за таг с атрибути:

    Име на етикет Име на атрибут

    Стойност на атрибута

    Име на атрибут

    Стойност на атрибута

    Здравейте !

    След като се натъкне на такъв таг в HTML документ, браузърът го интерпретира, показвайки текста след тага в символи, увеличени спрямо основния размер (SIZE=+2) и червен цвят (COLOR=RED); това текстово форматиране се прилага, докато не се срещне затварящият таг.

    Регистърът на знаците в етикетите и записите на атрибути няма значение.

    Структура на HTML документ

    HTML документ е ограден в таговете и. Между тези тагове има две секции: секцията със заглавка (между таговете и) и секцията с основния текст на документа (между таговете и). Секцията за заглавка съдържа описание на параметрите използва се при показване на документа, но не се отразява директно в прозореца на браузъра. Основният раздел на документа съдържа основния текст, предназначен за показване от браузъра, тагове за форматиране, поставяне на картини, таблици, хипервръзки и др.

    HTML кодът на най-простия документ, подходящ за публикуване в Интернет, изглежда така:

    < TITLE >Нашата първа страница TITLE >

    Най-простият HTML документ

    Този код може да бъде въведен в текстовия редактор на Notepad и запазен като файл с разширение . htm или. html - в този случай документът ще се отвори в браузъра по подразбиране, инсталиран на вашия компютър. Браузърът ще покаже този документ, като покаже в прозореца си реда „Най-простият HTML документ“, разположен в основната част на документа. Фразата "Нашата първа страница" ще се появи в заглавната лента на браузъра.

    раздел ГЛАВА

    Заглавната секция обикновено съдържа тагове, които са невидими за потребителя, но въпреки това могат активно да повлияят на външния вид на документа.

    Етикет

    Предназначение

    Указва името на целия документ. Името обикновено се показва в заглавната лента на прозореца на браузъра. Този елемент е задължителен за всеки HTML документ и може да бъде зададен не повече от веднъж.

    Указва основния адрес (URL) на текущия документ, който ще бъде началната точка за изчисляване на относителните URL адреси в документа. Елементът няма краен етикет. Трябва да присъства поне един от аргументите:

    HREF - указва основния адрес (URL) на текущия документ.

    TARGET - указва името на рамката, което ще се използва в хипервръзките по подразбиране. Това може да е полезно, ако искате да отворите всички връзки в документ в различна рамка.

    < STYLE TYPE= "text /css " >

    Използва се за вмъкване на каскадни стилови листове (CSS - Cascade Style Sheet) в документ. TYPE е задължителен атрибут, чиято стойност обикновено е "text/css".

    < МЕТА …>

    META елементът се използва за техническо описание на документа. С помощта на този елемент в заглавието на документа се въвежда допълнителна полезна информация, невидима за потребителя, но понякога просто незаменима за правилното индексиране на вашата страница от роботите на сървъра за търсене. Елементът няма краен етикет.

    NAME - определя името на мета публикацията. Има много предварително дефинирани имена, някои от които можете да видите в примера по-долу.

    СЪДЪРЖАНИЕ - присвоява стойността на мета записа, дефиниран в параметъра NAME.

    Секция ТЯЛО

    Този раздел включва основното съдържание на уеб страницата - текст на документа, изображения, таблици и др. Елементът BODY трябва да се появява не повече от веднъж в документ и може да включва следните атрибути:

    Синтаксис на атрибута

    Предназначение

    MARGINHEIGHT= номер

    Указва ширината (в пиксели) на горното и долното поле на документа. Работи само в браузъри Netscape

    TOPMARGIN= номер

    Указва ширината (в пиксели) на горното и долното поле на документа. Работи само в браузъри Internet Explorer

    MARGINWIDTH= номер

    Указва ширината (в пиксели) на лявото и дясното поле на документа. Работи само в браузъри Netscape

    ЛЯВО ПОЛЕ= номер

    Указва ширината (в пиксели) на лявото и дясното поле на документа. Работи само в браузъри Internet Explorer

    ПРЕДИСТОРИЯ= URL адрес

    Указва изображението, което да "запълни" фона (фоново изображение). Стойността е посочена в абсолютния или относителен адрес на изображението (виж раздел Поставяне на снимки)

    BGCOLOR= цвят

    Задава цвета на фона на документа.

    Microsoftинтернетизследователподдържа 16 стандартни имена на цветове (аква, черно, синьо, фуксия, сиво, зелено, лайм, кестеняво, морско, маслинено, лилаво, червено, сребристо, синьозелено, жълто, бяло)

    Друг начин е да използвате цветен код под формата на шестцифрено шестнадесетично число, което определя интензитета на червения (първите две цифри), зеления (следващите две цифри) и синия (последните две цифри) компоненти. Интензитетът на всеки компонент в шестнадесетична форма варира от 00 до FF. Когато посочвате цвят като стойност на атрибут за таг, шестнадесетичното число се предхожда от знак #.

    Например записът COLOR ="#0000 FF " означава син

    Въпреки фундаменталната възможност за определяне на милиони цветове, трябва да се има предвид, че браузърите показват само 256 цвята и всеки браузър има своя собствена цветова палитра.В тази палитра браузърът ще избере цвета, който е най-близък до определения

    ТЕКСТ= цвят

    Указва цвета на текста в документ

    ВРЪЗКА= цвят

    Указва цвета на хипервръзките в документ

    ALINK= цвят

    Определя цвета на осветяването на хипервръзките при щракване.

    VLINK

    Определя цвета на хипервръзките към вече прегледани документи

    Форматиране на текст Форматиране на знаци

    Всички тагове за форматиране на знаци имат както отварящ, така и затварящ компонент и действат върху текста, ограден между тях.

    Основният таг е ... FONT>, който трябва да се използва с един или повече атрибути, които променят размера, цвета и шрифта на шрифта:

    Синтаксис на атрибута

    Предназначение

    РАЗМЕР = значение

    Размерът се посочва или като абсолютна стойност (число от 1 до 7), или спрямо основния размер на шрифта (във формата +n или -n).

    ЦВЯТ= цвят

    Цвят

    ЛИЦЕ = списък с шрифтове

    Шрифтове за показване на текст; имената са изброени по ред на предпочитание, разделени със запетаи, напр. FACE="Verdana, Helvetica, Arial, Sans-Serif"

    Можете също да посочите един от шрифтовете, но имайте предвид, че този шрифт може да не е инсталиран на компютъра на потребителя и „екзотичните“ шрифтове няма да се показват от браузъра

    Освен това таговете се използват за промяна на стила на знаците:

    . .. (от англ. bold) − удебелен шрифт;

    .. . (от англ. italic) - курсив;

    ... (от англ. TeleType) – моноширинен шрифт;

    ... (от англ. underline) - подчертано;

    ... S > (от английски s триколка) - зачеркнат;

    ... (от английски s ub сценарий) – долен индекс;

    ... (от английски суп erscript) е горният индекс.

    Текст, ограден между тагове

    и (от английски pre форматиран), се показва във вида, в който е бил предварително форматиран, с всички интервали и нови редове.

    Форматиране на абзаци

    Текстът се показва в прозореца на браузъра дума по дума; когато се достигне дясната граница на прозореца, следващата дума автоматично се премества на нов ред. Дори ако в кода на страницата са въведени няколко интервала или текстът е написан на нов ред, тези действия няма да бъдат показани, когато се гледат в браузър. Следователно, за да покажете поредица от последователни интервали или няколко празни реда в текста, трябва да използвате различни тагове.

    Етикет
    (от английски b реак) прекъсва текстовия поток и вмъква нов ред, без да създава нов абзац Множество последователни тагове
    се интерпретират като няколко празни реда Разстоянието между редовете е единично Тагът няма затварящ компонент и атрибути.

    Етикет (от английски p араграф)започва абзац; новият абзац се отделя от предишния с двойно разстояние между редовете. Абзацът не може да бъде празен, т.е. няколко последователни тагове

    се интерпретират като едно (за разлика от маркера
    ).Затварящ компонент

    по избор, тъй като предишният абзац завършва там, където започва новият. Тагът има незадължителен атрибут ALIGN, указващ типа подравняване на абзаца, който може да приема стойностите LEFT, CENTER, RIGHT и JUSTIFY, указвайки подравняването съответно наляво, център, дясно и ширина. Текстът, ограден в тагове, също ще бъде центриран.

    ...

    Ако затварящият компонент

    пропуснете, посоченият тип подравняване се запазва до следващия таг, който указва подравняването, или до края на документа.

    HTML ви позволява да създавате абзаци, форматирани като номерирани или обозначени с водещи списъци. Текстов фрагмент, който е списък, е ограден в тагове:

    подреден (номериран) списък (от английски o поръчанл ист)

    неподреден (маркиран) списък (от английски u нареденл ист)

    Всеки елемент от подреден или неподреден списък е ограден в тагове ... (от английски l истаз тем). При показване на текст всеки елемент от списъка ще бъде поставен на нов ред, обозначен с число или маркер. Освен това списъкът може да има заглавие, което се указва с таг (от английски l истч eader). Не са необходими затварящи тагове.

    Номериран списък

    Списък с водещи символи

    Кодов елемент

    < O L>

    Заглавие

    Първи елемент

    Втори елемент

    Трети елемент

    < U L>

    Заглавие

    Първи елемент

    Втори елемент

    Трети елемент

    U L>

    Дисплей на браузъра

    Заглавие

    1. Първи елемент

    2. Втори елемент

    3. Трети елемент

    Заглавие

    · Първи елемент

    Втори елемент

    · Трети елемент

    Списък на много нива може да бъде организиран чрез комбинация от номерирани списъци и списъци с водещи символи.

    Етикетът има незадължителни атрибути:

    Синтаксис на атрибута

    Предназначение

    ТИП = формат

    Форматът на номериране може да има следните стойности:

    Арабски цифри (по подразбиране)

    главни букви

    малки букви

    големи римски цифри

    малки римски цифри

    СТАРТ = стойност

    първото число в списъка (по подразбиране 1)

    Етикетът има незадължителен атрибут

    Синтаксис на атрибута

    Предназначение

    ТИП = формат

    Форматът на токена може да има следните стойности:

    Диск

    диск (по подразбиране)

    кръг

    кръг

    Квадрат

    Квадрат

    Параграфите също могат да бъдат форматирани като заглавия на ниво (от n = 1 до n = 6), за тази цел се използват тагове от формата ... n>. Заглавието от първо ниво се показва с най-големия шрифт.

    Етикети

    , ... ,

    може да има атрибут за подравняване ALIGN със стойностите LEFT, RIGHT и CENTER.

    Поставяне на чертежи

    Изображенията, които се показват от браузъра при разглеждане на уеб страница, се съхраняват в отделни файлове във формат gif, jpg (jpeg) или png, а в кода на страницата се прави връзка към желания файл. За целта се използва несдвоен таг, който има един задължителен и редица незадължителни атрибути.

    Задължителен атрибут:

    SRC = URL адрес

    Адрес на графичен файл (относителен или абсолютен)

    ALT= текст

    Алтернативен текст, показван в режим на браузър без зареждане на изображения (трябва да бъде ограден в кавички)

    ГРАНИЦА = значение

    Дебелина на рамката в пиксели, 0 означава липса на рамка (по подразбиране)

    BORDERCOLOR = цвят

    Задава цвета на рамката

    ВИСОЧИНА = значение

    Височина на изображението в пиксели (оригинал по подразбиране) или като процент от височината на прозореца на браузъра

    ШИРИНА = значение

    Ширина на изображението в пиксели (оригинал по подразбиране) или като процент от ширината на прозореца на браузъра

    HSPACE = значение

    Свободно пространство отляво и отдясно на изображението в пиксели

    VSPACE = значение

    Свободно пространство над и под изображението в пиксели

    ПОДРАВНЯВАНЕ = значение

    Подравнява изображението хоризонтално.

    Ако е зададено НАЛЯВО или НАДЯСНО, изображението ще бъде съответно хоризонтално подравнено, задаването на тези стойности ще доведе до обвиване на текст около изображението

    Нека разгледаме по-подробно абсолютните и относителните методи за адресиране на файл.

    Обръщане в абсолютна формаизползвани при препратка към ресурси, разположени на други сървъри. Универсалният адрес, който определя местоположението на информационен ресурс, се нарича URL (Uniform Resource Locator). URL адресът се състои от две части, разделени с двоеточие. Първата част показва вида на мрежовия протокол, който зависи от вида на ресурса. Например, ако ресурсът се намира на WWW сървър, това е протоколът http.Втората част включва името на компютъра (сървъра) в системата за имена на домейни и (ако е необходимо) името на пътя на файла. Когато пишете пътека, имената на директории се разделят с наклонена черта (символът /) в имената на файлове и директории прави разлика между главни и малки букви, не се допускат интервали. Ето примери за URL адреси:

    http://www. vshu. kirov .ru/ сайт / изображения / снимка 1. jpg

    http://195.21.123.13:8110

    ftp://everything.com/soft/prog.zip

    mailto: Този имейл адрес е защитен от спам ботове. Трябва да имате активиран JavaScript, за да го видите.

    Последен URL адрес, сочещ към протокола mailtoи имейл адресът не препраща към никакъв информационен ресурс; Това е единственият тип URL адрес, който не включва две наклонени черти след двоеточието.

    Адресирането на снимки в абсолютна форма практически не се използва при създаване на уебсайт.

    Обръщане в относителна формаизползвани при препратка към ресурси, разположени на същия сървър. Когато записвате пътя към файл, имената на директориите се разделят с наклонена черта (символ /), придвижването през директориите на файловата система едно ниво нагоре се обозначава с две точки (символи ..). За да стане по-ясно, представете си компютър, например, със следната структура на директория, съдържаща HTML файлове:

    SHAPE\* MERGEFORMAT

    MySite

    Страници

    Изображения

    Страница1.htm

    Page2.htm

    Pict1.jpg

    Pict2.jpg

    Index.htm

    Картина.jpg

    В този случай например са възможни следните опции за писане на IMG тага:

    ü < IMG SRC = Picture . jpg >(Изображението .jpg се намира на страницата Index .htm)

    ü < IMG SRC = Images / Pict 1. jpg >(изображение Pict 1. jpg се намира на страницата Index. htm)

    ü < IMG SRC =../ Picture . jpg >(Снимка .jpg изображението се намира на страницата Страница 1. htm )

    ü < IMG SRC =../ Images / Pict 1. jpg >(изображение Pict 1. jpg се намира на страницата Page 1. htm)

    Въпреки факта, че формално се изисква само атрибутът SRC, на практика е необходимо да се посочи и алтернативен текст (атрибут ALT), тъй като много хора работят с браузъра в режим без зареждане на изображения.

    Височината и ширината на зоната, в която се показва чертежа, се определят с помощта на атрибутите за ширина и височина в пиксели или като процент от размера на екрана. Когато един от тези атрибути е зададен, чертежът се мащабира, така че неговата височина или ширина да съвпадат с посочените. Вторият размер се задава автоматично, в съответната пропорция. Прилагането само на един от атрибутите променя и двете измерения на чертежа.
    Ако изрично зададете и двата атрибута, изображението ще бъде мащабирано по две оси в съответствие с посочените размери. Атрибутите за височина и ширина не променят времето за зареждане на изображението, а само неговия външен вид (размер) на екрана.

    Хипервръзки

    Хипервръзката е обект (текст, изображение, фрагмент от изображение), който при щракване с мишката води до нов документ или фрагмент от документ. Хипервръзките ви позволяват да организирате преходи между всякакви документи, публикувани в Интернет.

    Текстови хипервръзки

    Връзката между HTML документи и фрагменти от документи се организира с помощта на тага ...(от английски a nchor - котва).

    Тагът се използва както за създаване на връзка към друг документ, така и за връзка към фрагмент от документ.

    Задължителен атрибут:

    HREF = URL адрес

    Адрес на целевия документ (може да бъде представен в абсолютна и относителна форма)

    Основни незадължителни атрибути:

    ИМЕ=" Име"

    Маркира този между< A >и A > фрагмент от документ като възможен обект за връзка. Като стойност трябва да напишете на латиница всяка индексна дума, която е уникална за този документ. Например тагът Section1 създава така наречения етикет (отметка) за преминаване към раздел 1. В този случай можете да се обърнете към маркираната област, като просто посочите нейното име след името на документа (предшествано от #).

    Така,< A HREF =" Index . html # part 1">Към част 1 A ​​> ще ви отведе до секцията "част 1" на индексния файл. html и
    < A HREF ="# part 2">Към раздел 2 A > − към раздел "част 2" на текущия документ, при условие че документът има съответен етикет

    TARGET = " име"

    Името на рамката (рамката) или прозореца за показване на целевия документ.

    Този атрибут се използва само във връзка с параметъра HREF. Стойността трябва да бъде или името на една от съществуващите рамки, или едно от следните запазени имена:

    _self - показва, че посоченият в параметъра HREF документ трябва да бъде показан в текущия кадър;
    _parent - показва, че документът трябва да бъде показан в родителския кадър на текущия кадър (изцяло заема прозореца на браузъра);

    _blank - указва, че документът трябва да се покаже в нов прозорец

    ЗАГЛАВИЕ = " текст!}"

    Показва подсказка, когато задържите курсора на мишката върху хипервръзка

    Текстът и изображенията, поставени между етикетите, стават активната област на документа, чувствителна към щракване на мишката, което кара целевия документ да се зареди. Текстът на хипервръзката е подчертан с подчертаване и цветове, определени като стойността на атрибутите LINK, A LINK, V LINK на етикета (или цвета по подразбиране).

    Хипервръзки-картинки

    За да направите цяло изображение хипервръзка, можете също да използвате тага ...., само вместо текст (или заедно с текст) между< A >и се намира етикет A >< IMG …>с всички съответни атрибути.

    Например , .

    Карта на хипервръзка

    Тагът ви позволява да направите текстов фрагмент или цяло изображение активна зона; За да могат различни фрагменти от едно изображение да се свързват с различни целеви документи, ще трябва да използвате таг, който имплементира изображението на картата.

    За таг на контейнер единственият задължителен атрибут е NAME, чиято стойност ще бъде името (например NAME=" mymap ", което трябва да се използва, когато се описва атрибутът USEMAP на IMG тага, описващ изображението, предназначено да служи като карта (с # − USEMAP="#mymap")

    Вътре в контейнера всяка чувствителна към мишката област на изображението трябва да има етикет със следните атрибути:

    Синтаксис на атрибута

    Предназначение

    КООРДИ= списък

    Разделен със запетаи списък с координати на активната зона (в зависимост от вида на дадената форма на зона)

    HREF = URL адрес

    ФОРМА = форма

    Определя формата на ядрото. Възможни стойности за този атрибут:

    кръг(окръжност – зададена от координатите на центъра и радиуса в пиксели);

    прав(правоъгълник - определен от координатите на горния ляв и долния десен ъгъл);

    поли(многоъгълник - определен от координатите на неговите върхове)

    Във всички случаи координатите се измерват от горния ляв ъгъл на изображението в пиксели, оста X е насочена надясно, а оста Y е насочена надолу.

    NOREF

    понякога е необходимо да се посочи, че дадена зона (посочена чрез атрибута SHAPE и координатите COORDS) не е активна, няма реакция на щракване с мишката

    Маси

    Таблиците в HTML документите се използват не толкова с цел подреждане на данни в рамкирани клетки, а с цел подреждане на части от текст и изображения едно спрямо друго.

    Таблиците в HTML се изграждат ред по ред. Всички таблични данни са затворени в тагове

    ; описанието на всеки ред от клетки (редове) се съдържа в таговете ...; съдържанието на всяка клетка се съдържа в етикети ... (обикновени клетки) или ... H> (заглавки).

    По този начин, за да опишете например таблица от два реда, всеки от които съдържа две клетки, ще трябва да създадете следната конструкция:

    Клетките на таблицата могат да съдържат текст, изображения, вложени таблици и др. Не трябва да оставяте клетките на таблицата празни; ако някоя клетка изглежда празна, поставете непрекъснат интервал в нея.

    Текстът, поставен в клетките на таблицата, се поставя автоматично от браузъра по подразбиране; текстът се показва дума по дума; Когато се достигне дясната граница на клетката, следващата дума се премества на нов ред.

    Клетките на таблицата могат да обхващат множество редове или колони; когато се описват такива клетки, атрибутите ROWSPAN (клетка, чийто етикет съдържа този атрибут, е „разтегната“ с определения брой редове) и COLSPAN (клетката е „разтеглена“ с няколко колони) са използвани. Ето пример за организиране на таблица с обединени клетки:

    < TR >

    < TD ROWSPAN=2>1-1 TD >

    Етикетите, които описват таблици, имат редица незадължителни атрибути.

    Атрибутите на етикета определят параметрите на таблицата като цяло:

    Синтаксис на атрибута

    Предназначение

    ALIGN = стойност

    Подравняване спрямо текстовия поток; възможните стойности са ляво, дясно и център

    ПРЕДИСТОРИЯ = URL адрес

    Фоново изображение за цялата маса

    BGCOLOR= цвят

    Цвят на фона

    BORDERCOLOR = цвят

    Цвят на границата

    BORDERCOLORDARK = цвят

    Оцветява десния и долния ръб на основната рамка и левия и горния ръб на всяка клетка с посочения цвят

    BORDERCOLORLIGHT = цвят

    Оцветява левия и горния ръб на основната рамка и съответно десния и долния ръб на всяка клетка в определения цвят

    CELLPADDING = стойност

    Разстояние от границите на клетката до нейното съдържание в пиксели

    CELLSPACING = стойност

    Разстояние между клетките в пиксели

    HSPACE = значение

    Свободно пространство отляво и отдясно на масата в пиксели

    VSPACE = значение

    Свободно пространство над и под масата в пиксели

    ШИРИНА = значение

    Ширина на таблицата (зададена в пиксели или като процент от текущата ширина на прозореца на браузъра)

    Атрибутите на етикета определят параметрите на дадена серия (ако възникнат противоречия, атрибутите, посочени в етикета, се анулират). Подравняване на съдържанието на клетката; възможните стойности са ляво, дясно и център

    ПРЕДИСТОРИЯ = URL адрес

    Фоново изображение за клетки на даден ред от таблица

    BGCOLOR= цвят

    Цвят на фона на клетките в този ред

    ГРАНИЦА = значение

    Дебелината на рамката, обграждаща клетките на този ред; BORDER=0 показва невидима граница

    ВАЛИДЕН = значение

    Вертикално подравняване на съдържанието на клетката; възможните стойности са отгоре, в центъра и отдолу

    Атрибутите на етикета определят параметрите на дадена клетка (ако възникнат несъответствия, атрибутите, посочени в и таговете, се анулират).

    Синтаксис на атрибута

    Предназначение

    ПОДРАВНЯВАНЕ = значение

    Подравнете съдържанието на клетките; възможните стойности са ляво, дясно и център

    ПРЕДИСТОРИЯ = ур л

    Фоново изображение за клетка на таблица

    BGCOLOR= цвят

    Цвят на фона на клетката

    ГРАНИЦА = значение

    Дебелина на рамката около клетката

    ВАЛИДЕН = значение

    Вертикално подравняване на съдържанието на клетката; възможните стойности са отгоре, в центъра и отдолу

    ШИРИНА = значение

    Ширина на клетката в пиксели или процент от ширината на таблицата

    ROWSPAN= значение

    Показва броя на редовете, обхванати от клетка

    COLSPAN = значение

    Указва броя на колоните, обхванати от клетка

    Когато работите с таблици, имайте предвид, че зададената стойност за атрибута WIDTH в много случаи само се "отбелязва" от браузъра. Дадените пропорции рядко се поддържат точно; браузърът се опитва да покаже таблицата възможно най-добре (по негово разбиране).

    Тикер

    Използването на тикер на уеб страница я прави по-динамична и ви позволява да създадете ефект на движещ се обект. Създаване на тикер с помощта на етикет< MARQUEE >... ШАТРА >.

    Между< MARQUEE >и MARQUEE > текстови фрагменти и снимки могат да бъдат локализирани. Текстът може да бъде форматиран с помощта на подходящи етикети, а графиките се вмъкват с помощта на .

    Синтаксис на атрибута

    Предназначение

    BGCOLOR= цвят

    Цвят на фона. Ако фонът е зададен, браузърът рисува цветна ивица на екрана, по която се движи текстът или изображението.

    ВИСОЧИНА = значение

    Височината на фоновата лента. Стойността се посочва в пиксели или като процент от височината на прозореца на браузъра.

    Например, ако зададете атрибута HEIGHT=25%, лентата с тикер ще заема една четвърт от височината на прозореца

    ШИРИНА = значение

    Ширината на тикера, посочена в пиксели или като процент от ширината на прозореца на браузъра

    ПОСОКА= значение

    Посока на движение на линията: ляво - ляво (по подразбиране), дясно - дясно, нагоре - нагоре, надолу - надолу

    ПОВЕДЕНИЕ = значение

    Атрибутът контролира поведението на тикера:

    превъртане (по подразбиране) – след като достигне ръба на прозореца, линията изчезва от видимостта и след това се появява от другата страна;

    слайд - линия се появява от ръба на прозореца, стига до противоположния и спира;

    алтернативен - линията се движи надясно или наляво, „отразявайки“ от краищата на прозореца и променяйки посоката на движение

    HSPACE = отместване на пиксела

    Преместете лентата с тикер хоризонтално надясно

    VSPACE = Вие ко тa в пиксели

    Създаване на празно пространство над и под лентата

    LOOP = значение

    Брой преходи на редове през екрана

    SCROOLAMOUNT = значение

    Броят пиксели, които линията преминава на всяка стъпка. Режимът по подразбиране е приблизително 10 px/стъпка. Този атрибут ви позволява да регулирате скоростта на движение на линията

    SCROLLDELAY = значение

    Определя интервала от време (в милисекунди) между стъпките, като използвате този атрибут, можете да накарате линията да се движи рязко

    ВЕРНО

    Когато този флаг (атрибут без стойност) е зададен, ще се използва указаната стойност SCROLLDELAY. Ако флагът не е зададен, стойността е SCROLLDELAY