HTML Basics съдържа основните правила на езика HTML, описание на структурата на HTML страница и връзките в структурата на HTML документ между HTML елементи.
HTML документът е обикновен текстов документ, който може да бъде създаден или в обикновен текстов редактор (Notepad), или в специализиран такъв с осветяване на код (Notepad++, Visual Studio Code и др.). Един HTML документ има разширение .html.
Един HTML документ се състои от дърво от HTML елементи и текст. Всеки елемент се идентифицира в изходния документ чрез начален (отварящ) и краен (затварящ) таг (с редки изключения).
Началният таг показва къде започва елементът, крайният таг показва къде свършва. Затварящият таг се образува чрез добавяне на наклонена черта / преди името на тага: .... Между началния и затварящия тагове е съдържанието на тага – съдържанието.
Единичните етикети не могат да съхраняват съдържание директно; то се записва като стойност на атрибут, например етикет ще създаде бутон с текст Button вътре.
Етикетите могат да бъдат вложени един в друг, например
Текст
. Когато инвестирате, трябва да следвате реда, в който са затворени (принципа на „матрьошка“), например следният запис ще бъде неправилен:Текст
.HTML елементите могат да имат атрибути (глобални, приложени към всички HTML елементи и свои собствени). Атрибутите се записват в отварящия таг на елемента и съдържат име и стойност, зададени във формата attribute name="value" . Атрибутите ви позволяват да променяте свойствата и поведението на елемента, за който са зададени.
На всеки елемент могат да бъдат присвоени множество стойности на клас и само една стойност на id. Множеството стойности на класа се записват разделени с интервал, . Стойностите на класа и идентификатора трябва да се състоят само от букви, цифри, тирета и долни черти и трябва да започват само с букви или цифри.
Браузърът преглежда (интерпретира) HTML документа, като изгражда неговата структура (DOM) и го показва в съответствие с инструкциите, включени в този файл (стилови таблици, скриптове). Ако маркирането е правилно, прозорецът на браузъра ще покаже HTML страница, съдържаща HTML елементи - заглавки, таблици, изображения и др.
Процесът на интерпретация (анализ) започва преди уеб страницата да бъде напълно заредена в браузъра. Браузърите обработват HTML документи последователно, от самото начало, докато обработват CSS и свързват таблиците със стилове към елементите на страницата.
Един HTML документ се състои от две секции - заглавката - между таговете ... и частта със съдържание - между таговете ....
Структура на уеб страницата 1. Структура на HTML документHTML следва правилата, съдържащи се във файла с декларация за типа документ (Определение на типа документ или DTD). DTD е XML документ, който определя кои тагове, атрибути и техните стойности са валидни за определен тип HTML. Всяка версия на HTML има свой собствен DTD.
DOCTYPE отговаря за правилното показване на уеб страница от браузъра. DOCTYPE указва не само HTML версията (например html), но и съответния DTD файл в Интернет.
...
Елементите вътре в тага образуват дърво на документа, така наречения обектен модел на документа, DOM (document object model). В този случай елементът е основният елемент.
Ориз. 1. Най-простата структура на уеб страница За да се разбере взаимодействието на елементите на уеб страницата, е необходимо да се разгледат така наречените „семейни връзки“ между елементите. Връзките между множество вложени елементи се класифицират като родител, дете и сестра.
Предшественикът е елемент, който съдържа други елементи. На фигура 1 предшественикът за всички елементи е . В същото време елементът е предшественик на всички тагове, които съдържа: ,
, , и т.н.
Потомъкът е елемент, разположен в рамките на един или повече типове елементи. Например е потомък на и елемента
Е потомък на двете и .
Родителският елемент е елемент, който е свързан с други елементи на по-ниско ниво и се намира над тях в дървото. На фигура 1 и . Етикет
Родител е само на .
Дъщерен елемент е елемент, който е пряко подчинен на друг елемент на по-високо ниво. На фигура 1 има само елементи , ,
И са деца на.
Сестринският елемент е елемент, който има общ родителски елемент с въпросния, така наречените елементи от същото ниво. На фигура 1 и са елементи от едно и също ниво, както и елементи , и
Те са сестри помежду си.
1.1. Елемент 1.2. елементСекция ... съдържа техническа информация за страницата: заглавие, описание, ключови думи за търсачките, кодиране и др. Информацията, която въвеждате там, не се показва в прозореца на браузъра, но съдържа информация, която казва на браузъра как да обработи страницата.
1.2.1. елементНеобходимият таг за раздел е . Текстът, поставен в този етикет, се появява в заглавната лента на уеб браузъра. Заглавието не трябва да е по-дълго от 60 знака, за да се побере напълно в заглавието. Заглавният текст трябва да съдържа най-пълното описание на съдържанието на уеб страницата.
1.2.2. елементНезадължителният таг на раздел е единичен таг. С негова помощ можете да зададете описание на съдържанието на страницата и ключови думи за търсачките, автора на HTML документа и други свойства на метаданните. Един елемент може да съдържа множество елементи, тъй като те носят различна информация в зависимост от използваните атрибути.
Описанието на съдържанието на страницата и ключовите думи могат да бъдат зададени едновременно на няколко езика, например на руски и английски:
С помощта на етикет можете да блокирате или разрешите индексиране на уеб страница от търсачките:
За да презаредите автоматично страницата след определен период от време, трябва да използвате стойността за опресняване:
Страницата ще се презареди след 30 секунди. За да пренасочите посетителя към друга страница, трябва да посочите URL адреса в параметъра url:
скоби, в които се изписва името на тага. Браузърът разглежда структурата на документа, изгражда го и го показва според инструкциите на вашия монитор, ако, разбира се, сте направили всичко правилно.
Целият този процес започва още преди да видите завършената картина. Браузърите обработват документ последователно, от началото до края. Включително всичко, което трябва да има на страницата. Таблици, картини, скриптове и така нататък, с изключение на това, което включва 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 код. Това е коренът на самия документ; всичко, което впоследствие присъства зад този етикет, вече не е включено в документа и не се възприема от браузърите. В самото начало на документа етикетът се отваря и в самия край трябва да се затвори.
Целият раздел на този етикет съдържа цялата техническа информация на документа. Подобно на предишния етикет, главата също трябва да се отваря и затваря в края. Тази информация включва заглавие на страницата, описание, ключови думи на търсачката и кодиране. За кодирането малко по-долу.
Съдържание
< 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 или php. Винаги се нарича така.
Гледайте видеоклип за основите на HTML от Webformyself.
Език за маркиране на хипертекст, основни елементи и структура. Ще се опитам да опиша всичко това и много повече в моя блог. На първо място ще бъде написана полезна информация за начинаещи, ще бъде предоставен примерен код и ще бъде предоставена възможност за изтегляне на самия пример заедно с готовата страница.
