Уебсайтове, блогове, уеб страници - вече познати понятия в нашето време. С развитието на Интернет сайтовете за хостване на уеб страници станаха невероятно популярни и това не е изненадващо: за някои хора да имат собствен уебсайт е необходимост, за други това е приятно забавление. В първия случай обикновено говорим за фирми, корпорации, частни предприемачи, когато рекламират търсен продукт или услуга. Вторият е за блогърите.
Освен това, има интернет потребители, които просто търсят информация, четат блогове, гледат видеоклипове и т.н.
За да създадете качествен уебсайт, има много опции. Ще се съсредоточим върху уеб програмирането чрез HTML.
Какво е HTML
HTML означава Hyper Text Mark-Up Language. В превод от английски това означава "Език за маркиране на хипертекст".
С други думи, HTML е набор от кодове, с които можете да създадете основните елементи на сайта, неговата рамка, напр.как думите са съставени от изречения.
HTML кодовете се изписват изключително с латински букви и се наричат тагове, като всеки код е затворен в ъглови скоби. Някои тагове са сдвоени, други не са сдвоени.
Сдвоени означава, че те трябва да се използват по двойки безпроблемно. Например, отварящият маркер показва къде започва на уеб страница, а затварящият маркер показва къде спира. Последният се различава от първия по наличието на наклонена черта след отварящата ъглова скоба. Например, е началният маркер,е затварящият етикет.
Несдвоените тагове не се нуждаят от партньор.
Много тагове могат да имат атрибути - допълнителни елементи, които му придават някакво по-специфично значение. Например етикетът.
Къде се използва HTML
Класическото разбиране за това къде е необходим HTML е изграждането на уебсайт.
На практика това може да е достатъчно, тъй като HTML ви позволява да създавате основните елементи на сайта, менюта (включително многостепенни), да задавате фона, да вмъквате текст, изображения, аудио, видео, да редактирате шрифтове и много повече.
Въпреки това, има други езици, които ви позволяват да добавяте по-интересни и често необходими елементи към уеб страница:
- CSS задава стилове за целия сайт, без да е необходимо постоянно да предписвате стилови характеристики на отделни елементи с помощта на тагове - например цвета и шрифта на текста.
- Скриптовият език ви позволява да разработвате и вграждате мини-програми (скриптове) в сайта, вариращи отбанални естетически неща (смяна на цвета на връзката при задържане на курсора на мишката) и завършващи с функционални (събиране на имейл адреси на клиенти, телефонни номера).
- С PHP можете да разработите своя собствена книга за гости или система за коментари.
Също така HTML се използва при създаването на имейли за разпространение.
Какво е връзка
Те ви позволяват да навигирате до друга уеб страница, както вътре в сайта, така и извън него.
HTML връзките са често използвани:
- За да отидете на външен уеб ресурс.
- За да се движите през страниците в сайта.
- За да отидете на google forms.
Връзка към източника в HTML също често се посочва, особено след като при копиране на материал от друг сайт трябва да посочите автора. В противен случай копирането без приписване може да попадне в дефинициите за нарушаване на авторски права, кражба на съдържание и обратен ефект. В допълнение, използването на заети, неуникални материали намалява ефективността на SEO, а посочването на връзка към източника намалява рисковете.
Видове връзки
В класическия смисъл, връзката е адресът на уеб ресурс, към който можете да отидете, като щракнете върху него.
Освен това има хипервръзки: текст и изображения. В тези случаи HTML връзката е "скрита" под някакво изречение (дума) или изображение и за да я последвате, трябва да кликнете върху текста или изображението.
Други видове връзки:
- Непосетен - връзка, върху която все още не е щракнато по време на конкретна сесия. Например, ако сте последвали тази връзка вчера, след това изключихте компютъра си и го включихте отново днес, сега връзката отново не е посетена, тъй като е започнала нова сесия.
- Активна - в това състояние връзката се запазва за много кратко време: интервалът между щракването върху връзката и следването й.
- Посетен - връзка, която вече е посетена поне веднъж по време на една сесия.
За обикновени текстови връзки, посетените са склонни да променят цвета си, освен ако не е посочено друго.
Изображението с хипервръзка не променя външния си вид, независимо дали е посетено или не.
Как да вмъкна обикновена връзка
Много уеб ресурси възприемат адреса на сайта като връзка, веднага го правят кликващ и го подчертават с цвят. Например, ако адресът е изпратен в месинджър или по имейл, като щракнете върху него, можете да отидете на сайта.
В случай, че създавате сами сайт с помощта на HTML, трябва да вмъкнете връзка с помощта на специален таг. Ще изглежда така: адрес на уебсайт. Текстът на връзката в HTML трябва да бъде посочен изцяло, с протокол.
Как да вмъкна текстова хипервръзка
По-рано беше казано, че текстовата хипервръзка изпълнява същата функция като обикновената връзка, но изглежда по-естетически: вместо адрес на сайта, който често е ненужно дълъг, се посочва дума или фраза. Например в изречението „Търсете информация тук“можете да скриете връзкатадумата "тук". Той ще бъде маркиран и щракването върху него ще отведе потребителя до желания сайт.
Как да направите HTML връзка вече беше обсъдено по-рано. Можете да вмъкнете текстова хипервръзка, като използвате същия таг. Единствената разлика е, че трябва да посочите между етикетите текста, под който ще бъде скрита връзката: видим текст.
Как да вмъкна хипервръзка на изображение
Тук е малко по-сложно. Използваме същия таг, но вместо текст, трябва да посочите пътя до изображението.
Пътят е местоположението на изображението. Ако снимката (снимката) се намира в услуга за споделяне на файлове, тогава трябва да посочите всички папки по пътя към изображението чрез наклонена черта. Можете също да включите връзка към изображение, ако е възможно.
За маркиране
в допълнение към src са приложими и други атрибути, които ви позволяват да регулирате височината, ширината и местоположението на изображението и много други. Някои от тях:
- Src - определя пътя към изображението.
- Lowsrc - идентично с предишния атрибут, но определено за изображения с ниско качество.
- Височина - височина на снимката.
- Ширина - неговата ширина.
- Alt - описание на изображението. Когато задържите курсора на мишката върху снимка или картина, текстът, посочен в този атрибут, ще се появи.
- Border - определя дебелината на границата около изображението.
Атрибутите са посочени след етикета и са включени внеговия състав. Атрибутът трябва да бъде последван от неговата стойност. Например, за атрибутите "height" или "width" (височина, ширина) определя височината на изображението на уеб страницата. Мерната единица е пиксели, освен ако не е посочено друго.
Ще изглежда така: <a href="адрес на уеб страница"
. Тези атрибути ще ви помогнат да зададете подходящия размер за изображението. Бордът помага да се създаде невидима рамка около изображението.
Атрибутите по-горе се прилагат отделно за етикета за вмъкване на изображение. Например:.
Какво представляват анкерните връзки
Създаването на анкер връзки е много полезно умение. Често има нужда да се изложи уеб страница с дълъг текстов блок или с няколко подсекции на една страница. В този случай можете веднага да започнете със списък с връзки към подраздели на текста или уеб страницата и когато щракнете върху тях, потребителят ще отиде директно в заявения раздел.
Създаването на закотвени връзки ще изисква повече използване на атрибутни тагове, отколкото други видове връзки.
Първо, трябва да зададете общата стойност за всеки блок информация или подраздел от текст, като използвате атрибута top, и след това да го свържете със съответната връзка.
Техните характеристики са по-обширни, затова е препоръчително първо да овладеете създаването на по-прости връзки и след това да преминете към формирането на котвени връзки.
Съвети
Помощ от опитнипрограмисти:
- Можете да направите така, че информацията за връзка да се показва при задържане на мишката в HTML. За това атрибутът alt, който използваме и за графични елементи, може да бъде полезен.
- Възможно е да се направи списък с връзки, използвайки HTML. По-специално, това може да бъде полезно за закотвени връзки, както и когато трябва да направите списък с уеб ресурси, които могат да бъдат последвани от връзка директно от текущата уеб страница.
- С помощта на CSS и JavaScript, както и някои HTML функции, можете да създадете различен дизайн на текстови връзки и хипервръзки от обикновено. Например, когато задържите курсора на мишката върху връзка, тя може да промени цвета си и да се върне към предишната, когато курсорът е далеч от нея. Това може да стане с персонализиран JavaScript скрипт. Освен това цветът на връзката може да бъде настроен на нещо различно от синьо за непосетени или лилаво за посетени. Това е работата на CSS.
- Не злоупотребявайте с връзките. Уеб страница с много неподходящи връзки изглежда небрежна и небрежна.
- Уверете се, че потребителят разбира, че хипервръзката с изображението наистина е изображение, а не просто изображение.
Заключение
Много е лесно да се свържете към страница в HTML. Важно е да следвате всички основни точки на този език, тъй като дори малка грешка може да доведе до факта, че няма да има резултат и кодът няма да работи.
