Веб-страницата html е. Креирање на веб-страници. Учење на јазикот HTML. Елементи на веб-страница: Заглавие

Пред да започнеме со нашето патување низ лекциите за градење веб-страници HTML и CSS, важно е да ги разбереме разликите помеѓу двата јазика, синтаксата на секој јазик и некоја основна терминологија.

Што се HTML и CSS?

HTML (HyperText Markup Language) ја дефинира структурата на содржината и нејзиното значење, дефинирајќи ја содржината како што се наслови, параграфи или слики. CSS (Cascading Style Sheets) е јазик за презентација создаден за стилизирање на изгледот на содржината, користејќи, на пример, фонтови или бои.

Овие два јазика - HTML и CSS - се независни еден од друг и треба да останат такви. CSS не треба да се пишува во HTML документ и обратно. Како општо правило, HTML секогаш ќе ја претставува содржината, а CSS секогаш ќе го дефинира стилот.

Со ова разбирање на разликата помеѓу HTML и CSS, ајде да се нурнеме во HTML подетално.

Основни услови за HTML

Пред да започнете да работите со HTML, најверојатно ќе наидете на некои нови и често чудни термини. Ќе се запознаете со сите нив со текот на времето, но засега треба да започнете со трите основни HTML поими - елементи, ознаки и атрибути.

Елементи

Елементите одредуваат како да се дефинира структурата и содржината на објектите на страницата. Некои од најчесто користените елементи вклучуваат повеќе нивоа на наслови (дефинирани како елементи со

пред

) и параграфи (дефинирани како

); Можете да вклучите елементи во списокот ,

, , И и многу други.

Елементите се идентификуваат со помош на аголни загради<>, околу името на елементот. Значи, елементот ќе изгледа вака:

Тагови

Додавање аголни загради< и >го создава она што е познато како ознака околу елементот. Ознаките најчесто се појавуваат во парови на ознаки за отворање и затворање.

Ознаката за отворање го означува почетокот на елементот. Се состои од симбол<, затем идёт имя элемента и завершается символом >; На пример,

.

Ознаката за затворање го означува крајот на елементот. Се состои од симбол< с последующей косой чертой и именем элемента и завершается символом >; На пример,

.

Содржината што се појавува помеѓу ознаките за отворање и затворање е содржината на тој елемент. Врската, на пример, ќе има ознака за отворање и ознака за затворање. Она што е помеѓу овие две ознаки ќе биде содржината на врската.

Значи, ознаките за врски ќе изгледаат вака:

...

Атрибути

Атрибутите се својства кои се користат за обезбедување дополнителни информацииза елементот. Најчестите атрибути го вклучуваат атрибутот id, кој го идентификува елементот; атрибутот класа, кој го класифицира елементот; атрибутот src, кој го одредува изворот на вградената содржина; и атрибут href, кој одредува врска до поврзаниот ресурс.

Атрибутите се дефинирани во почетната ознака по името на елементот. Општо земено, атрибутите вклучуваат име и вредност. Форматот за овие атрибути се состои од името на атрибутот проследено со знак за еднаквост, проследено со вредноста на атрибутот во наводници. На пример, елемент со атрибут href ќе изгледа вака:

Шеј Хау

Демонстрација на основни HTML термини

Овој код ќе го прикаже текстот „Shay Howe“ на веб-страница и кога ќе се кликне на овој текст ќе го однесе корисникот на http://shayhowe.com. Елементот за врска е деклариран со помош на ознака за отворање и ознака за затворањепокривајќи го текстот, како и атрибутот и вредноста на адресата на врската декларирани преку href="http://shayhowe.com" во почетната ознака.

Ориз. 1.01. Синтаксата на HTML во форма на преглед вклучува елемент, атрибут и ознака

Сега кога знаете што се HTML елементи, ознаки и атрибути, ајде да ја погледнеме нашата прва веб-страница. Ако нешто изгледа ново овде, не грижете се - ќе го растуриме додека одиме.

Приспособување на структурата на HTML документот

HTML документите се едноставни текстуални документи зачувани со наставката .html наместо .txt. За да започнете да пишувате HTML, прво ви треба уредувач на текст, што е погодно за вас да го користите. За жал, ова не вклучува Microsoft Wordили Страници, бидејќи ова се сложени уредници. Двата најпопуларни текстуални уредувачи за пишување HTML и CSS се Dreamweaver и Sublime Text. Бесплатни алтернативиисто така Notepad++ за Windows и TextWrangler за Mac.

Сите HTML документи содржат потребна структура, која ги вклучува следните декларации и елементи: , , И .

Декларација за тип на документ илисе наоѓа на самиот почеток на HTML документ и им кажува на прелистувачите која верзија на HTML се користи. Бидејќи ќе користиме Најновата верзија HTML, нашиот тип на документ ќе биде едноставно. После ова доаѓа елементот што укажува на почеток на документ.

Внатре елемент го дефинира врвот на документот, вклучувајќи различни метаподатоци (придружни информации за страницата). Содржина во елемент не се појавува на самата веб-страница. Наместо тоа, може да го вклучи насловот на документот (кој се појавува во насловната лента на прозорецот на прелистувачот), врски до какви било надворешни датотеки или какви било други корисни метаподатоци.

Целата видлива содржина на веб-страницата ќе биде содржана во елементот . Структурата на типичен HTML документ изгледа вака:

Здраво свету!

Здраво свету!

Ова е веб-страница.



Демонстрација на структурата на HTML документот

Овој код го прикажува документот, почнувајќи од декларацијата за тип на документ,, потоа веднаш доаѓа елементот . Внатре елементи доаѓаат И . Елемент го содржи кодирањето на страницата преку ознаката а насловот на документот преку елементот . Елемент <body>го вклучува насловот преку елементот <h1>и став од текст преку<р>. Бидејќи и насловот и параграфот се вгнездени во елементот <body>, тие се видливи на веб-страницата.</p><p>Кога некој елемент е внатре во друг елемент, познат и како вгнезден, добра идеја е да го вовлечете за структурата на документот да биде добро организирана и читлива. Во претходниот код и двата елементи <head>И <body>вгнездени и поместени во елементот <html>. Структурата на вовлекување за елементи продолжува со нови елементи додадени внатре <head>И <body> .</p><h3>Самозатворачки елементи</h3><p>Во претходниот пример, елементот <meta>беше единствената ознака што не вклучуваше ознака за затворање. Не грижете се, ова е направено намерно. Не сите елементи се состојат од ознаки за отворање и затворање. Некои елементи едноставно добиваат содржина или однесување преку атрибути во рамките на една ознака. <meta>е еден од овие елементи. Содржина на елементот <meta>во примерот е доделен со користење на атрибутот charset и вредност. Други типични елементи за самозатворање вклучуваат:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Намалена структура направена со употреба на декларација за тип на документ<!DOCTYPE html>и елементи <html> , <head>И <body>, е доста честа појава. Сакаме да ја одржуваме оваа структура на документи удобна затоа што често ќе ја користиме кога создаваме нови HTML документи.</p><h3>Валидација на кодот</h3><p>Без разлика колку внимателно го пишуваме нашиот код, грешките се неизбежни. За среќа, кога пишуваме HTML и CSS, имаме валидатори за проверка на нашата работа. W3C нуди HTML и CSS валидатори кои го скенираат кодот за грешки. Прегледот на нашиот код не само што помага тој правилно да се прикажува во сите прелистувачи, туку помага и да ги научиме најдобрите практики при пишување код.</p><h2>На пракса</h2><p>Како веб-дизајнери и програмери од предниот дел, го имаме луксузот да присуствуваме на голем број одлични конференции посветени на нашиот занает. Ќе организираме сопствена конференција за стилови и ќе создадеме веб-страница за неа во текот на следните лекции. Како ова!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Ајде да ја смениме брзината малку подалеку од HTML и да погледнеме во CSS. Запомнете, HTML ја дефинира содржината и структурата на нашите веб-страници, додека CSS го дефинира нивниот визуелен стил и изглед.</p><h2>Основни услови за CSS</h2><p>Покрај HTML термините, постојат некои основни CSS термини со кои ќе треба да се запознаете. Овие термини вклучуваат избирачи, својства и вредности. Исто како и со HTML терминологијата, колку повеќе работите со CSS, толку повеќе овие термини стануваат втора природа.</p><h3>Селектори</h3><p>Кога додавате елементи на веб-страница, тие може да се стилизираат со помош на CSS. Селекторот одредува кој елемент или елементи во HTML да ги таргетира и примени стиловите (како боја, големина и позиција). Селекторите може да вклучат комбинација од различни метрики за да изберете уникатни елементи, во зависност од тоа колку конкретни сакаме да бидеме. На пример, сакаме да го избереме секој став на страницата или да избереме само еден специфичен став.</p><p>Избирачите обично се поврзуваат со вредност на атрибутот, како вредност на идентификација или класа, или име на елемент, како на пр <h1>или<р> .</p><p>Во CSS, избирачите се комбинираат со кадрави загради (), кои ги опфаќаат стиловите што се применуваат на избраниот елемент. Овој избирач ги таргетира сите елементи <span><p>П(...)</p><h3>Својства</h3><p>Откако ќе се избере некој елемент, својството ги одредува стиловите што ќе се применат на него. Имињата на имотот доаѓаат по селекторот, внатре <a href="https://5visa.ru/mk/installation-and-configuration/kvadratnye-skobki-v-vorde-kak-ubrat-kvadratnye-i-figurnye.html">виткани протези</a>() и непосредно пред дебелото црево. Има многу својства што можеме да ги користиме, како што се позадина, боја, големина на фонтот, висина и ширина и други вообичаено додадени својства. Во следниот код ги дефинираме својствата на бојата и големината на фонтот што важат за сите елементи <span><p>P (боја: ...; големина на фонтот: ...; )</p><h3>Вредности</h3><p>Досега избравме само елемент преку избирач и одредивме кој стил би сакале да го примениме на него преку својства. Сега можеме да го поставиме однесувањето на ова својство преку вредност. Вредностите може да се наведат како текст помеѓу две точки и точка-запирка. Подолу ги избираме сите елементи <p >И поставете ја вредноста на својствата на бојата на портокалова и вредноста на својствата за големина на фонтот на 16 пиксели.</p><p>P (боја: портокалова; големина на фонтот: 16 px;)</p><p>За да го тестираме ова, во CSS нашиот сет на правила започнува со избирач, проследен веднаш со кадрави загради. Овие кадрави загради содржат декларации што се состојат од парови својства и вредности. Секоја декларација започнува со својство, проследено со две точки, вредноста на имотот и на крајот точка запирка.</p><p>Вообичаена практика е да се префрлат парови својства и вредности во кадравите загради. Како и кај HTML, вовлекувањето помага нашиот код да биде организиран и јасен.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Ориз. 1.03. CSS синтаксната структура вклучува избирач, својства и вредности</p><p>Познавањето на неколку основни термини и општа CSS синтакса е одличен почеток, но имаме уште неколку точки што треба да ги покриеме пред да се нурнеме во длабочините. Конкретно, треба внимателно да погледнеме како работат селекторите во CSS.</p><h2>Работа со селектори</h2><p>Селекторите, како што беше споменато претходно, покажуваат кои HTML елементи ќе бидат стилизирани. Важно е целосно да се разбере како да се користат селектори и како тие работат. Првиот чекор треба да биде да се запознаете <a href="https://5visa.ru/mk/education/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">разни видови</a>селектори. Ќе започнеме со најосновните селектори: селектори за тип, класа и идентификатор.</p><h3>Селектори на типови</h3><p>Селектори на типови целни елементи според нивниот тип. На пример, ако сакаме да ги таргетираме сите елементи <div>мора да користиме div селектор. Следниот код го прикажува избирачот на тип за елементи <div>, како и соодветниот HTML.</p><p>Див (...)</p><p> <div>...</div> <div>...</div> </p><h3>Часови</h3><p>Класите ви дозволуваат да изберете елемент врз основа на вредноста на атрибутот класа. Избирачите на класи се малку поспецифични од избирачите на типови бидејќи избираат одредена група елементи наместо сите елементи од ист тип.</p><p>Класите ви дозволуваат да ги примените истите стилови на различни елементи одеднаш со користење на иста вредност на атрибутот на класата за повеќе елементи.</p><p>Во CSS, класите се претставени со водечка точка проследена со вредноста на атрибутот класа. Избирачот на класата подолу ги избира сите елементи што ја содржат вредноста на атрибутот за одлична класа, вклучувајќи ги и елементите <div>И <span><p>Прекрасно (...)</p><p> <div class="awesome">...</div> </p><h3>Идентификатори</h3><p>Идентификаторите се дури и попрецизни од класите бидејќи тие таргетираат само еден единствен елемент во исто време. Исто како што избирачите на класи ја користат вредноста на атрибутот класа, идентификаторите ја користат вредноста на атрибутот id како избирач.</p><p>Без оглед на типот на елементот што се прикажува, вредноста на атрибутот id може да се користи само еднаш на страницата. Ако се присутни идентификатори, тогаш тие треба да бидат резервирани за важни елементи.</p><p>Во CSS, идентификаторите се претставени со хаш симбол напред, проследен со вредноста на атрибутот id. Овде id ќе го избере само елементот што го содржи атрибутот id со вредноста shayhowe .</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Дополнителни селектори</h3><p>Селекторите се исклучително моќни работи и оние опишани погоре се едни од најчестите селектори со кои се среќаваме. Овие селектори се само почеток. Има многу напредни селектори достапни и тие се лесно достапни. Откако ќе се чувствувате удобно со нив, не плашете се да проверите некои од понапредните.</p><p>Добро, ајде да почнеме да собираме сè заедно. Додаваме елементи на страницата во нашиот HTML, потоа можеме да ги избереме тие елементи и да ги стилизираме користејќи CSS. Сега да ги поврземе точките помеѓу HTML и CSS за да ги направиме двата јазика да работат заедно.</p><h2>Поврзување на CSS</h2><p>За да го направиме нашиот CSS да зборува со нашиот HTML, мора да укажеме на датотеката CSS од HTML. Добра практика е да ги вклучиме сите наши стилови во една надворешна датотека, која е посочена во елементот <head>нашиот HTML документ. Користењето на еден надворешен CSS ни овозможува да ги примениме истите стилови низ страницата и да правиме промени во него брзо.</p><h3>Други опции за додавање CSS</h3><p>Други опции за инкорпорирање на CSS вклучуваат користење на внатрешни и вградени стилови. Може да се сретнете со овие опции во реалноста, но тие генерално се намуртени бидејќи го прават ажурирањето на сајтовите незгодно и незгодно.</p><p>За да создадеме надворешен лист со стилови, повторно сакаме да го користиме нашиот избран уредувач на текст за да создадеме нов <a href="https://5visa.ru/mk/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">текстуална датотека</a>со .css екстензија. Нашата CSS-датотека треба да се зачува во истата папка или подпапка како нашата HTML-датотека.</p><p>Внатре во елемент <head>применет елемент <link>, кој ја дефинира врската помеѓу HTML и CSS датотеките. Бидејќи се поврзуваме со CSS, го користиме атрибутот rel со вредност на листот за стилови за да ја покажеме нивната врска. Дополнително, атрибутот href се користи за означување на локацијата или патеката на датотеката CSS.</p><p>Во следниот пример HTML документ, елементот <head>укажува на датотека со надворешен стил.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>За CSS да се прикажува правилно, вредноста на патеката на атрибутот href мора директно да се совпаѓа со местото каде што е зачувана датотеката CSS. Во претходниот пример, датотеката main.css е зачувана на истата локација како и HTML-датотеката, позната и како root фолдер.</p><p>Ако датотеката CSS се наоѓа во подпапка, тогаш вредноста на атрибутот href мора соодветно да одговара на таа патека. На пример, ако нашата датотека main.css е зачувана во подпапка со име stylesheets, тогаш вредноста на атрибутот href би била stylesheets/main.css. Ова користи коса црта нанапред (или коса црта) за да покаже преместување во потпапка.</p><p>На <a href="https://5visa.ru/mk/firmware/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">овој момент</a>нашите страници почнуваат да оживуваат, полека но сигурно. Сè уште не сме навлегле премногу длабоко во CSS, но можеби сте забележале дека некои елементи имаат стилови што не сме ги декларирале во нашата CSS. Прелистувачот е тој што наметнува свои преферирани стилови на овие елементи. За среќа, можеме многу лесно да ги преработиме овие стилови, што е она што ќе го направиме следно со користење на CSS ресетирање.</p><h2>Користење на CSS ресетирање</h2><p>Секој прелистувач има свои стандардни стилови за <a href="https://5visa.ru/mk/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">различни елементи</a>. Како <a href="https://5visa.ru/mk/navigation/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Гугл хром</a>прикажува наслови, параграфи, списоци и така натаму, може да се разликува од тоа како го прави <a href="https://5visa.ru/mk/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">Internet Explorer</a>. За да се обезбеди компатибилност со вкрстени прелистувачи, ресетирањето на CSS стана широко користено.</p><p>Ресетирањето на CSS ги зема сите основни HTML елементи со даден стил и обезбедува конзистентен стил на сите прелистувачи. Овие ресетирање обично вклучуваат отстранување на димензии, пополнување, маргини или дополнителни стилови кои ги намалуваат овие вредности. Бидејќи CSS каскадирањето работи од горе до долу (за тоа ќе дознаете наскоро) - нашето ресетирање треба да биде на самиот врв на нашиот стил. Ова осигурува дека овие стилови се читаат прво и тоа е тоа. <a href="https://5visa.ru/mk/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">различни прелистувачи</a>ќе почне да работи од заедничка референтна точка.</p><p>Има еден куп различни CSS ресетирање достапни за примена, сите тие имаат свои <a href="https://5visa.ru/mk/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">јаки страни</a>. Еден од најпопуларните од Ерик Мејер, неговото ресетирање на CSS е приспособено да вклучува нови HTML5 елементи.</p><p>Ако се чувствувате малку авантуристички, тука е и Normalize.css создаден од Николас Галагер. Normalize.css не се фокусира на користење на хард ресетирање за сите основни елементи, туку наместо тоа на поставување заеднички стилови за тие елементи. Ова бара подлабоко разбирање на CSS, како и знаење за тоа што би сакале да постигнете од стиловите.</p><h3>Компатибилност и тестирање меѓу прелистувачите</h3><p>Како што споменавме порано, различни прелистувачи различно ги прикажуваат елементите. Важно е да се препознае важноста на компатибилноста и тестирањето меѓу прелистувачите. Сајтовите не треба да изгледаат сосема исто во сите прелистувачи, туку треба да бидат блиски. Кои прелистувачи сакате да ги поддржувате и до кој степен ќе треба да донесете одлука врз основа на она што е најдобро за вашата страница.</p><p>Постојат неколку работи на кои треба да се обрне внимание кога пишувате CSS. Добрата вест е дека можете да го направите сето тоа и потребно е само малку трпение да го совладате.</p><h2>На пракса</h2><p>Ајде да се вратиме таму каде што последен пат застанавме на нашата конференциска локација и да видиме како можеме да додадеме CSS.</p><ol><li>Во нашата папка за конференција за стилови, ајде да создадеме нова папка наречена средства. Ова е местото каде што ќе ги складираме сите ресурси за нашата веб-локација, како што се стилови, слики, видеа итн. За нашите стилови, ајде да одиме напред и да додадеме друга папка со листови со стилови во папката со средства.</li><li>Користејќи уредувач на текст, ајде да создадеме нова датотека наречена main.css и да ја зачуваме во папката со листови со стилови што штотуку ја создадовме.</li><p>Гледајќи ја датотеката index.html во прелистувачот можеме да видиме дека елементите <h1>И <p>Веќе го содржи стандардниот стил. Особено, тие имаат единствена големина на фонтот и простор околу нив. Користејќи го ресетирањето на Ерик Мајер, можеме да ги ублажиме овие стилови, дозволувајќи им на секој од нив да започне од истата основа. За да го направите ова, погледнете ја неговата веб-страница, копирајте го кодот и залепете го на врвот на нашата main.css датотека.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Лиценца: нема (јавен домен) */ html, тело, div, span, аплет, објект, iframe, h1, h2, h3, h4, h5, h6, p, блок цитат, пред, a, abbr, акроним, адреса, големо, цитирано, код, дел, dfn, em, img, ins, kbd, q, s, samp, мали, удари, силни, под, суп, tt, var, b, u, i, центар, dl, dt, dd, ol, ul, li, множество полиња, форма, етикета, легенда, табела, натпис, tbody, tfoot, thead, tr, th, td, член, настрана, платно, детали, вградување, фигура, фигури, подножје, заглавие, hgroup, мени, nav, излез, рубин, дел, резиме, време, ознака, аудио, видео (маргина: 0; полнење: 0; граница: 0; големина на фонтот: 100%; фонт: наследи; вертикално порамнување: основна линија ; ( o колапс: колапс; проред на границите: 0; )</p><li>Нашата датотека main.css почнува да се обликува, па ајде да ја поврземе со датотеката index.html. Отворете index.html во уредувач на текст и додадете елемент <link>В <head>, веднаш по елементот <title> .</li><li>Бидејќи посочуваме на стилови преку елементот <link>додадете атрибут rel со листот за стилови на вредности .</li><p>Ќе вклучиме и врска до нашата main.css датотека користејќи го атрибутот href. Запомнете, нашата датотека main.css е зачувана во папката stylesheets, која се наоѓа во папката со средства. Значи, вредноста на атрибутот href, кој е патеката до нашата датотека main.css, треба да биде assets/stylesheets/main.css.</p><p> <head> <meta charset="utf-8"> <title>Конференција за стилови

Време е да ја провериме нашата работа и да видиме како нашите HTML и CSS работат заедно. Отворањето на датотеката index.html (или освежувањето на страницата ако е веќе отворена) во прелистувачот треба да покаже малку поинаков резултат од претходно.

Ориз. 1.04. Нашата локација за конференција за стилови со ресетирање на CSS

Демо и изворен код

Подолу можете да ја видите веб-локацијата Styles Conference во моменталната состојба, а исто така и да ја преземете изворсајт во моментот.

Резиме

Значи, сè е во ред! Направивме некои големи чекори во овој туторијал.

Само размислете, сега ги знаете основите на HTML и CSS. Како што продолжуваме и поминувате повеќе време за пишување HTML и CSS, ќе ви биде многу поудобно да работите со овие два јазика.

Да потсетиме, го опфативме следново:

  • Разлика помеѓу HTML и CSS.
  • Вовед во HTML елементи, ознаки и атрибути.
  • Поставување на структурата на вашата прва веб-страница.
  • Вовед во CSS селектори, својства и вредности.
  • Работа со CSS селектори.
  • Покажувач кон CSS од HTML.
  • Важноста на CSS ресетирање.

Сега да го разгледаме подетално HTML и малку да се запознаеме со семантиката.

Ресурси и врски

  • Вообичаени HTML термини преку Scripting Master
  • Услови и дефиниции на CSS преку импресивни веб-страници
  • CSS Алатки: Ресетирајте го CSS преку Ерик Мајер

Најголемиот дел од содржините презентирани на Интернет се веб-страници. Ова е историски првиот тип на документ наменет за сместување во виртуелен мрежен простор, но сепак останува релевантен и практично нема конкурентни формати. Каква е структурата на веб-страниците? Кои алатки за развој на веб се користат за креирање?

Што е веб-страница?

„Наведете ги главните елементи на веб-страницата“, ни кажува испитувачот на лекцијата по компјутерски науки. Што можеме да му кажеме како одговор? Пред сè, ќе разговараме за тоа што е во принцип веб-страница.

Според општо прифатената дефиниција меѓу ИТ специјалистите, се работи за документ кој е наменет да се отвори во специјализирана програма - прелистувач и кој содржи податоци за прикажување на компјутерскиот екран со користење на соодветен тип на софтвер со различна корисна содржина - текстови. , линкови, графики, видеа, музика и сл. Веб-страницата е текстуален документ. Соодветните податоци за прелистувачот се букви, бројки и Специјални симболи, се користи како елементи на јазикот за означување - HTML. Со негова помош, креаторот на веб-страницата му „објаснува“ на прелистувачот како да ја прикаже оваа или онаа содржина на екранот.

Местото и улогата на веб-страниците во структурата на сајтовите

Можеме ли да кажеме дека веб-страницата е главната компонента на веб-локацијата? Ова е делумно точно. Сепак, како што забележавме погоре, веб-страницата е само текстуален документ. Веб-страницата, по правило, содржи и слики, видеа и други мултимедијални елементи. Веб-страницата не може да ги содржи, но може да содржи врски до нив во својата структура. Така, веб-страницата може да се нарече главна компонента на страницата во однос на нејзината доминантна улога во прикажувањето на виртуелната содржина пред корисниците.

Во ретки случаи, се разбира, документот за кој станува збор ќе биде единствената компонента на страницата - ако поради некоја причина не предвидува прикажување на графика, видео и други мултимедијални елементи. Особено, првите веб-локации - кога за прв пат се појавија јазиците за означување на веб-страниците - не вклучуваа релевантна содржина. Пред очите на корисникот имаше само текст и линкови.

Принципот на користење хипертекст

Значи, веб-страницата е документ составен на HTML јазик, кој се користи за обележување на хипертекст. Но, што е овој феномен? Што е хипертекст? Без да навлегуваме премногу длабоко во теоријата, забележуваме дека ова е текст кој на еден или друг начин ви овозможува да добиете брз пристапна друг - преку врски. Ова е невозможно во обична книга - има „едноставен текст“. За да пристапи до саканата страница, читателот мора да направи неколку вртења, прво читајќи ја содржината или фуснотите. Во режимот на хипертекст, најголемиот дел од работата ја врши компјутерот, користејќи информации рефлектирани во HTML елементите на страницата.

Ако наставникот по компјутерски науки ни каже: „Наведете ги главните елементи на веб-страницата“, тогаш можеме сосема правилно да почнеме да зборуваме за компонентите на соодветниот документ што се создадени со користење на јазикот за означување HTML. Затоа, прво, да погледнеме некои теоретски точки во врска со HTML.

Структура на HTML јазик: ознаки

Како прелистувачот ги чита потребните податоци за веб-страница од HTML документ? Многу едноставно.

Суштински елементи на овој јазик- ова се ознаки. Во повеќето случаи, тие се спарени - има отворање, а има и затворање. Првите се означени користејќи само аголни загради. Вторите се слични, но пред втората заграда има коса црта - симболот /. Прелистувачот може да ги препознае и затоа ја прикажува содржината на веб-страниците без никакви проблеми во согласност со алгоритмите создадени од развивачот на документи.

Ознаката за отворање обично се пишува со големи букви, а ознаката за затворање со мали букви. Ова е стандард кој стана воспоставен меѓу ИТ специјалистите. Прелистувачот, се разбира, ќе ја препознае командата HTML со која било буква, но на веб-програмерите сепак им се советува да се придржуваат до шемата за пишување ознаки. Ова ќе им олесни, на пример, на други специјалисти да ја подобрат веб-страницата.

Атрибути

Други важни елементи на јазикот HTML се атрибутите. Со нивна помош, креаторот на веб-страница може да ги постави својствата на содржината - на пример, висината на фонтот, неговата боја, позицијата во однос на страницата. Истото важи и за слики, видеа и други мултимедијални компоненти. Атрибутите се напишани во почетната ознака.

содржина

Помеѓу ознаките за отворање и затворање се наоѓа следната клучна компонента на веб-страницата - содржината. Ова е, всушност, самата содржина што треба да се прикаже пред корисникот на екранот. Ова може да биде текст, врска, слика, видео или друг мултимедијален елемент.

Елементи на веб-страница

„Значи, наведете ги главните елементи на веб-страницата, конечно! - повторува наставникот. „Со задоволство“, му одговараме. Што е вклучено во структурата на видот на документот што се разгледува? Ајде да се согласиме дека овој аспект ќе го разгледаме во контекст на HTML елементите на веб-страницата. Односно, нивното прикажување во прелистувачот - она ​​што корисникот го гледа на екранот - ќе не интересира во помала мера. Факт е дека соодветните HTML алгоритми, врз основа на кои програмата ја прикажува содржината на ист начин, може да бидат различни. И ова е карактеристика на јазикот HTML: саканата слика на веб-страница може да се прикаже различни начини. Во исто време, тие можат да бидат или еквивалентни во однос на трошоците за работна сила на креаторот на веб-страницата или да бараат различен износ на труд и време за нивна имплементација.

Елементи на веб-страница: Заглавие

Стандардните елементи на веб-страницата, колку и да звучи изненадувачки, се претставени во многу мали количини. Всушност, има само два од нив - насловот и главниот дел на документот. Во исто време, секој од нив може да има прилично сложена структура.

Кои се спецификите на насловот? Се наоѓа на самиот врв на веб-страницата. HTML-кодот што го формира заглавието обично е наменет да го „шифрира“ само текстот, но доколку е потребно, мали графички инсерти може да се стават и во соодветниот елемент. И тоа, всушност, е се што може да се каже за титулата. Се чини дека неговата улога во структурата на соодветниот документ е незначителна. Но, тоа не е вистина. Насловите на веб-страниците се многу значајни од гледна точка на индексирање на страници во пребарувачите - Yandex, Google. Овој елемент мора да биде целосно релевантен за содржината на веб-страницата, како и за тематските специфики на страницата.

Како се слика насловот на веб-страницата користејќи HTML? Многу едноставно. Прво, се пишува ознаката за отворање, која секогаш изгледа како HEAD со аголни загради, потоа содржината на заглавието, па ознаката за затворање. Тие се напишани, се разбира, на самиот врв на веб-документот.

Насловот на веб-документот може да вклучува голем број дополнителни елементи. Понекогаш форматот на веб-страницата може да бара текстот да се прикаже во одредено кодирање. Како може да се осигурате дека вашиот веб-документ го исполнува овој критериум? Многу едноставно. HTML-алгоритмите мора да се постават во структурата на заглавието на документот, давајќи му инструкции на прелистувачот да користи специфично јазично кодирање - на пример, кирилица. Соодветните команди се сместени во МЕТА ознаката, која, како и другите, може да се отвора и затвора.

Главен дел од веб-страницата

Главниот дел од веб-документот се отвора со ознаката BODY и се затвора со соодветниот елемент, вклучително и коса црта. Покрај тоа, помеѓу ознаките за отворање и затворање може да има огромен број дополнителни команди за јазикот за означување на хипертекст. Ова се должи на фактот што главниот дел од веб-страницата ја содржи нејзината корисна содржина - текстови, линкови, графики, видеа, разни формулари за пополнување.

Секој од соодветните типови на содржина има свои ознаки. Структурата на главниот дел од веб-документот може да содржи HTML команди, кои исто така се користат за форматирање на текстот - на пример, давајќи му на фонтот одредена боја, големина и други својства.

Ајде да ги погледнеме спецификите на некои најчесто користени HTML тагови. Всушност, тие ги формираат главните елементи на веб-страницата.

Основни HTML ознаки

Значи, со цел детално да проучиме кои се елементите на веб-страницата, ајде подетално да ја проучиме суштината на основните HTML тагови. Веќе дадовме некои од нив погоре - особено оние со помош на кои прелистувачот ги чита заглавијата на веб-страниците и одредува каде се наоѓа главниот дел од документот.

Ознаката P е доста честа појава.Таа, како и другите слични елементи на јазикот за означување на хипертекст, може да се отвора и затвора. Оваа ознака ви овозможува да форматирате еден параграф од документот. Можете, на пример, да поставите одреден тип на фонт или боја за него. Сепак, ова се прави со помош на дополнителна ознака - ФОНТ. Во овој случај, тој ќе биде поставен во оној што ги означува границите на параграфот - ова ќе спречи HTML командата што го одразува типот на претпочитаниот фонт да се дистрибуира на други елементи на веб-страницата.

Табелите се креираат со помош на ознаката TABLE. Користејќи ги соодветните атрибути, можете да го одредите потребниот број на колони и редови, да ја поставите нивната ширина, специфичните граници, големината и бојата на фонтот на текстот во табелата.

Одговорен за обработка на слики од прелистувачот. Во него можете да поставите и различни атрибути кои ја регулираат големината на сликата и нејзината позиција на страницата.

Врските до други веб-документи или датотеки се означени со користење на ознаката A. Како по правило, во него има атрибути кои укажуваат на фактот дека има хиперврска во структурата на веб-страницата. Во овој случај, се означува документот, датотеката или локацијата до која води.

Вообичаена ознака е FRAMESET. Со негова помош, можете да го поделите просторот на веб-страницата на неколку области - рамки. Во секој од нив можете да користите посебни веб-документи. Односно, рамки ви дозволуваат правилно да поставите две или повеќе страници на еден екран во исто време.

Приказна за клучните елементи на веб-страниците и последователна приказна за средствата за нивно форматирање со користење на јазикот HTML - приближно ова ќе биде алгоритамот за нашиот одговор на прашањето што ни го постави испитувачот. Ако дојде кај нас велејќи „наведете ги главните елементи на веб-страницата“, тогаш ние, користејќи ја соодветната методологија, ќе ги имаме сите шанси да ја откриеме темата. Односно, под поимот „елементи“ можеме да ги разбереме клучните компоненти на структурата на веб-документот или видовите содржини - текст, слики, табели, рамки, врски што ги генерира веб-администраторот користејќи алатка како што е јазикот HTML. .

Специфики на алатки за развој на веб

Во прилог на кажаното, можеме да објасниме дека има огромен број ознаки и атрибути обезбедени од HTML стандардите. Покрај HTML, веб-програмерите можат да користат дополнителни алатки за форматирање за хипертекст документи. На пример, со користејќи JavaScriptможете да креирате динамични веб-страници - односно оние во кои содржината постојано се ажурира (и поради дејствијата на самиот корисник, и во согласност со алгоритмите однапред напишани во скрипти).

Би било корисно да се додаде дека веб-развивачот може да користи полноправни програмски јазици во својата работа, како што се, на пример, Perl, PHP, Java, Python, со помош на кои можностите за работа со хипертекст документи стануваат уште пошироко. Потребата за ова може да се должи на фактот што областите на примена на веб технологиите денес се многу различни. Предизвиците со кои се соочуваат современите програмери може да бидат доста сложени. На пример, понекогаш е неопходно да се преведат веб-страници напишани на руски на англиски. Во овој случај, алатките на развивачот ќе бидат многу разновидни.

Цел на работата:запознавање на студентите со основните концепти на HTML јазикот, структурата на HTML документ, задолжителни ознаки, коментари, методи на форматирање на текст, физички и логички стилови, стекнување вештини за креирање едноставни статични веб документи.

Во лабораториските часови, ќе го користиме уредувачот на текст Notepad за подготовка на HTML датотеки, а прелистувачот Internet Explorer како алатка за следење на сработеното.

Теоретски информации

Основни концепти

Хипертекст- информациска структура која ви овозможува да воспоставите семантички врски помеѓу текстуалните елементи на компјутерскиот екран на таков начин што можете лесно да преминете од еден елемент во друг. Во пракса, во хипертекстот, некои зборови се истакнуваат со подвлекување или боење во друга боја (хиперврски). Истакнувањето на зборот означува врска помеѓу овој збор и некој документ во кој подетално се дискутира за темата поврзана со означениот збор. Посебен документ, напишан во HTML формат, се нарекува:

HTML документ;

Веб документ;

Веб страна.

Таквите страници обично се во NTM или HTML формат.

Група веб-страници кои припаѓаат на еден автор или на едно тело на IEDV и меѓусебно поврзани со заеднички хиперврски формираат структура наречена веб-јазол или веб-локација. Секоја HTML страница има своја единствена URL-адреса - агстрдвна интернет.

Рамка (Рамка) - поим кој има две значења. Првата вредност е областа за документи со сопствени ленти за лизгање. Втората е слика 0DNN0H во анимирана графичка датотека (рамка).

Аплет (Аплет) - програма префрлена на клиентскиот компјутер како посебна датотека и стартувана при прегледување на веб-страница.

Скрипта (Скрипта) , или скрипта, е програма вклучена во веб-страница за проширување на нејзините можности. Во одредени ситуации, прелистувачот Internet Explorer ја прикажува пораката: „Дозволи извршување на скрипта на страницата?“ Во овој случај мислиме на скрипти.

CGI (Заеднички Порта Интерфејс) - општо име за програми кои, работејќи на сервер, ви дозволуваат да ги проширите можностите на веб-страниците. Без такви програми е невозможно да се креираат интерактивни веб-страници.

Прелистувач (Прелистувач) - програма за прегледување на веб-страници.

Елемент- Дизајн на HTML јазик. Можете да го замислите како контејнер што содржи податоци и ви овозможува да го форматирате на одреден начин. Секоја веб-страница е збир на елементи. Една од главните идеи на хипертекстот е можноста за вгнездување елементи. На пример:

<Начало элемента>Содржината на елементот, податоците што елементот ги форматира

Означете(на англиски ознака - ознака, дескриптор, ознака) - почетен или завршен маркер на елемент. Ознаките ги дефинираат границите на дејството на елементите и ги одделуваат елементите едни од други. Во текстот на веб-страницата, ознаките се затворени во аголни загради< >, а крајната ознака е секогаш проследена со коса црта. Текстот не е помеѓу овие загради (< >), е целосно видлива кога се гледа во прелистувач. На пример:

<Начальный тег>Содржината на елементот, податоците што

форматира елемент

<Р>Овој текст ќе биде лоциран во посебен параграф

Секоја веб-страница е збир на елементи. Еден од основните принципи на HTML е способноста да се вгнезди еден елемент во друг.

Атрибут- параметар или својство на елемент. Атрибутите се наоѓаат во почетната ознака и се одделени еден од друг со празни места. Ако цементот содржи текст, тогаш атрибутите можат да ја постават бојата и големината на фонтот, усогласувањето текст параграфи така натаму. Ако елементот содржи слика, тогаш атрибутите може да ја специфицираат големината на сликата, присуството и големината на рамката околу сликата итн.

<Р align="center">Овој текст ќе биде порамнет во центарот на екранот

Овој пример повторно користи ознака што ги дефинира почетокот и крајот на параграфот. Сепак, ознаката за почеток содржи атрибут за порамнување, кој го поставува порамнувањето на текстот во центарот на екранот.

Забелешка:

Секоја корисна информација мора да се појави помеѓу ознаките за почеток и крај што го означуваат неговиот формат;

Сите атрибути се наоѓаат во почетната ознака;

За полесно користење, можете да ја напишете почетната ознака со голема (голема) буква (P), а крајната ознака со мала (мала) буква (/p), иако тоа не е неопходно;

Не сите елементи бараат ознака за крај (затворање);

Започнете да го пишувате секој нов елемент на нова линија. Вовлекување вгнездени елементи (таб). Ова повторно не е потребно, но многу ќе ви ја олесни работата.

Веб-страницата е специјално форматиран документ кој може да вклучува текст, графика, хиперврски, аудио, анимација и видео.

Неколку веб-страници кои споделуваат заедничка тема, дизајн и врски и обично се наоѓаат на истиот веб-сервер, формираат веб-локација.

Веб-страница (од англиски. веб-страница: веб- „веб, мрежа“ и сајт- „место“, буквално „место, сегмент, дел од мрежата“) - збирка електронски документи(датотеки) на поединец или организација во компјутерска мрежа, обединети под една адреса (име на домен или IP адреса).

Сите сајтови заедно сочинуваатWorld Wide Web, каде што комуникацијата (веб) обединува сегменти на информации од светската заедница во една единствена целина - база на податоци и комуникации во планетарна скала. Специјално беше развиен протокол за директен пристап на клиентите до страниците на серверите HTTP .

Веб-страницата е структурирана како списание кое содржи информации за одредена тема или прашање. Исто како што списанието се состои од печатени страници, веб-страницата се состои од компјутерски веб-страници.

Програмата што прикажува веб-страница се нарекува веб-прелистувач.

Веб-страниците се креирани со користење на јазикот за означување на хипертекст документот HTML. HTML технологијата се состои од вметнување контролни знаци (ознаки) во обичен текстуален документ и како резултат добиваме веб-страница. Прелистувачот, кога вчитува веб-страница, ја прикажува на екранот во форма наведена со ознаки.

HTML ви овозможува да:

· форматирајте текст;

· вклучува слики и мултимедија во документот;

· Користејќи го овој јазик, се креираат хипертекст врски до други веб-страници.

HTML се користи за креирање на содржина со информации за датотеки и за дефинирање на структурата и форматот на веб-страниците. Бидејќи HTML-датотеките се обични текстуални датотеки, таквата датотека може да се испрати на буквално секој компјутер.

За креирање на веб-страници, се користат едноставни текстуални уредници кои не вклучуваат контролни знаци за форматирање на текст во креираниот документ. Како таков уредник во Windows можете да го користите стандардна апликација„Бележник“.

Вообичаено, датотеката на веб-страница има екстензија .html или .htm.

Покрај тоа, постојат многу технологии во кои основните чекори за креирање веб-страници се веќе автоматизирани; останува само да се направат промени во согласност со вашата тема.

За да видите страница HTML, едноставно внесете ја нејзината URL адреса во лентата за адреси на вашиот веб-прелистувач и потоа следете ги хиперврските. Но, ова е токму главниот проблем - како да ја дознаете адресата на страницата? Најчесто се случува да знаете што треба да најдете, но да не знаете каде точно да барате. За да се реши овој проблем, постојат специјални пребарувачи. Од гледна точка на корисникот, систем за пребарување- ова е редовен сајт на почетна страницакој содржи линкови до други сајтови, поделени во категории („Спорт“, „Бизнис“, „Компјутери“ итн.). Покрај тоа, пребарувачот му овозможува на корисникот да внесе неколку клучни зборови и враќа линкови до страници што ги содржат тие клучни зборови.

Веб-страница

Веб-страница (англиски веб-страница, од веб - веб и сајт - „место“) е збирка документи на приватно лице или организација обединета под една адреса на компјутерска мрежа. Стандардно, се претпоставува дека страницата се наоѓа на Интернет. Сите интернет-страници колективно ја сочинуваат светската мрежа. Протоколот HTTP беше специјално развиен за клиентите директно да пристапуваат до веб-локациите на серверите. Веб-страниците инаку се нарекуваат Интернет застапеност на лице или организација. Кога велат „ваша сопствена страница на Интернет“, тоа значи цела веб-страница или лична страница како дел од туѓа страница. Покрај веб-локациите на Интернет, достапни се и WAP страници за мобилни телефони.

Првично, веб-страниците беа збирки на статични документи. Во моментов, повеќето од нив се карактеризираат со динамичност и интерактивност. За вакви случаи експертите го користат терминот веб апликација - готова софтверски пакетда ги реши проблемите со веб-страницата. Веб апликацијата е дел од веб-локацијата, но веб-апликацијата без податоци е само технички сајт.

Во повеќето случаи на Интернет, една веб-локација одговара на едно име на домен. Токму според имиња на доменилокациите се идентификувани во глобална мрежа. Можни се и други опции: една локација на неколку домени или неколку локации под еден домен. Вообичаено, неколку домени се користат од страна на големите сајтови (веб портали) за логично да се одделат различните видови на обезбедени услуги (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Има и случаи кога се доделуваат посебни домени за различни земјиили јазици. На пример, google.ru и google.fr се логично Google-сајтови на различни јазици, но технички тие се различни сајтови. Комбинирањето на неколку локации под еден домен е типично за бесплатен хостинг. За да се идентификуваат локациите, адресата содржи тилда и името на локацијата по домаќинот: example.com/~my-site-name/.




Врв