Html veb səhifəsidir. Veb səhifələrin yaradılması. HTML dilini öyrənmək. Veb səhifə elementləri: başlıq

HTML və CSS veb saytlarının qurulması dərsləri ilə səyahətimizə başlamazdan əvvəl iki dil arasındakı fərqləri, hər bir dilin sintaksisini və bəzi əsas terminologiyanı başa düşmək vacibdir.

HTML və CSS nədir?

HTML (HyperText Markup Language) başlıqlar, paraqraflar və ya şəkillər kimi məzmunu təyin edərək məzmunun strukturunu və mənasını müəyyən edir. CSS (Cascading Style Sheets), məsələn, şriftlər və ya rənglərdən istifadə edərək məzmunun görünüşünü tərtib etmək üçün yaradılmış təqdimat dilidir.

Bu iki dil - HTML və CSS - bir-birindən müstəqildir və belə qalmalıdır. CSS HTML sənədinin içərisində və əksinə yazılmamalıdır. Bir qayda olaraq, HTML həmişə məzmunu təmsil edəcək və CSS həmişə üslubu müəyyən edəcəkdir.

HTML və CSS arasındakı fərqi belə başa düşərək, HTML-ə daha ətraflı baxaq.

Əsas HTML Şərtləri

HTML ilə işləməyə başlamazdan əvvəl çox güman ki, bəzi yeni və çox vaxt qəribə terminlərlə qarşılaşacaqsınız. Zaman keçdikcə siz onların hamısı ilə daha yaxından tanış olacaqsınız, lakin hələlik üç əsas HTML termini ilə başlamalısınız - elementlər, teqlər və atributlar.

Elementlər

Elementlər səhifədəki obyektlərin strukturunun və məzmununun necə təyin olunacağını müəyyənləşdirir. Tez-tez istifadə olunan elementlərdən bəziləri çox səviyyəli başlıqları əhatə edir (elementlər kimi müəyyən edilir

əvvəl

) və paraqraflar (kimi müəyyən edilmişdir

); Siyahıya elementləri daxil edə bilərsiniz ,

, , və bir çox başqaları.

Elementlər bucaqlı mötərizələr vasitəsilə müəyyən edilir<>, element adını əhatə edir. Beləliklə, element belə görünəcək:

Teqlər

Bucaq mötərizələrinin əlavə edilməsi< и >element ətrafında etiket kimi tanınan şeyi yaradır. Teqlər ən çox açılış və bağlanma teqlərinin cütlüyündə olur.

Açılış etiketi elementin başlanğıcını qeyd edir. Simvoldan ibarətdir<, затем идёт имя элемента и завершается символом >; Misal üçün,

.

Bağlama etiketi elementin sonunu qeyd edir. Simvoldan ibarətdir< с последующей косой чертой и именем элемента и завершается символом >; Misal üçün,

.

Açılış və bağlanış teqləri arasında görünən məzmun həmin elementin məzmunudur. Linkdə, məsələn, açılış etiketi olacaq və bağlama etiketi. Bu iki teq arasında olan əlaqənin məzmunu olacaq.

Beləliklə, link teqləri belə görünəcək:

...

Atributlar

Atributlar təmin etmək üçün istifadə olunan xüsusiyyətlərdir əlavə informasiya element haqqında. Ən ümumi atributlara elementi müəyyən edən id atributu daxildir; elementi təsnif edən sinif atributu; daxil edilmiş məzmunun mənbəyini təyin edən src atributu; və əlaqəli resursa keçidi təyin edən href atributu.

Atributlar element adından sonra açılış teqində müəyyən edilir. Ümumiyyətlə, atributlara ad və dəyər daxildir. Bu atributların formatı atribut adından, ardınca bərabərlik işarəsindən, ardınca dırnaq içərisində atribut dəyərindən ibarətdir. Məsələn, element href atributu ilə belə görünəcək:

Shay Howe

Əsas HTML terminlərinin nümayişi

Bu kod veb-səhifədə "Shay Howe" mətnini göstərəcək və bu mətnə ​​kliklədikdə istifadəçini http://shayhowe.com saytına aparacaq. Bağlantı elementi açılış teqindən istifadə etməklə elan edilir və bağlama etiketi mətni, həmçinin açılış teqində href="http://shayhowe.com" vasitəsilə elan edilmiş link ünvanının atributunu və dəyərini əhatə edir.

düyü. 1.01. Kontur şəklində HTML sintaksisinə element, atribut və teq daxildir

İndi HTML elementlərinin, teqlərinin və atributlarının nə olduğunu bildiyiniz üçün ilk veb səhifəmizə nəzər salaq. Burada nəsə yeni görünürsə, narahat olmayın - getdikcə onu parçalayacağıq.

HTML sənəd strukturunun fərdiləşdirilməsi

HTML sənədləri .txt deyil, .html genişlənməsi ilə saxlanılan sadə mətn sənədləridir. HTML yazmağa başlamaq üçün əvvəlcə sizə lazımdır mətn redaktoru, istifadə etməyiniz üçün əlverişlidir. Təəssüf ki, bu daxil deyil Microsoft Word və ya Səhifələr, çünki bunlar mürəkkəb redaktorlardır. HTML və CSS yazmaq üçün ən məşhur iki mətn redaktoru Dreamweaver və Sublime Text-dir. Pulsuz Alternativlər həmçinin Windows üçün Notepad++ və Mac üçün TextWrangler.

Bütün HTML sənədləri aşağıdakı bəyannamələri və elementləri ehtiva edən tələb olunan strukturu ehtiva edir: , , Və .

Sənəd növü bəyannaməsi və yaHTML sənədinin ən əvvəlində yerləşir və brauzerlərə HTML-nin hansı versiyasından istifadə olunduğunu bildirir. Çünki biz istifadə edəcəyik son versiya HTML, sənəd tipimiz sadə olacaq. Bundan sonra element gəlir sənədin başlanğıcını göstərir.

İçəri element müxtəlif metadata (səhifə haqqında müşayiət olunan məlumat) daxil olmaqla, sənədin yuxarı hissəsini müəyyən edir. Element daxilində məzmun veb səhifənin özündə görünmür. Bunun əvəzinə, o, sənədin başlığını (brauzer pəncərəsinin başlıq çubuğunda görünür), hər hansı xarici fayllara keçidləri və ya hər hansı digər faydalı metadatadan ibarət ola bilər.

Veb səhifənin bütün görünən məzmunu elementdə olacaq . Tipik bir HTML sənədinin strukturu belə görünür:

Salam Dünya!

Salam Dünya!

Bu veb səhifədir.



HTML sənəd strukturunun nümayişi

Bu kod sənəd növü bəyannaməsindən başlayaraq sənədi göstərir., sonra dərhal element gəlir . İçəri elementlər gəlir Və . Element teq vasitəsilə səhifə kodlamasını ehtiva edir və element vasitəsilə sənədin başlığı . Element <body>element vasitəsilə başlığı ehtiva edir <h1>və mətnin bir paraqrafı<р>. Çünki həm başlıq, həm də abzas elementin içərisindədir <body>, onlar internet səhifəsində görünür.</p><p>Element başqa elementin içində olduqda, həmçinin iç içə kimi tanınan, sənəd strukturunu yaxşı təşkil edilmiş və oxunaqlı saxlamaq üçün onu abzas etmək yaxşı fikirdir. Əvvəlki kodda hər iki element <head>Və <body>element daxilində yuvalanmış və sürüşdürülmüşdür <html>. Elementlər üçün girinti strukturu içəriyə əlavə edilən yeni elementlərlə davam edir <head>Və <body> .</p><h3>Özünü bağlayan elementlər</h3><p>Əvvəlki nümunədə element <meta>bağlanış etiketi olmayan yeganə teq idi. Narahat olmayın, bu qəsdən edilib. Bütün elementlər açılış və bağlanma teqlərindən ibarət deyil. Bəzi elementlər sadəcə bir teq daxilində atributlar vasitəsilə məzmun və ya davranış alır. <meta>bu elementlərdən biridir. Element məzmunu <meta>misalda charset atributundan və dəyərdən istifadə etməklə təyin edilir. Digər tipik öz-özünə bağlanan elementlərə aşağıdakılar daxildir:</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>Sənəd növü bəyannaməsindən istifadə edərək azaldılmış struktur<!DOCTYPE html>və elementlər <html> , <head>Və <body>, olduqca yaygındır. Biz bu sənəd strukturunu rahat saxlamaq istəyirik, çünki yeni HTML sənədləri yaratarkən ondan tez-tez istifadə edəcəyik.</p><h3>Kodun Təsdiqlənməsi</h3><p>Kodumuzu nə qədər diqqətlə yazsaq da, səhvlər qaçılmazdır. Xoşbəxtlikdən, HTML və CSS yazarkən işimizi yoxlamaq üçün validatorlarımız var. W3C kodu səhvlər üçün skan edən HTML və CSS təsdiqləyiciləri təklif edir. Kodumuzu nəzərdən keçirmək təkcə onun bütün brauzerlərdə düzgün göstərilməsinə kömək etmir, həm də kod yazarkən ən yaxşı təcrübələri öyrətməyə kömək edir.</p><h2>Təcrübədə</h2><p>Veb dizaynerləri və qabaqcıl tərtibatçılar olaraq, sənətimizə həsr olunmuş bir sıra möhtəşəm konfranslarda iştirak etmək lüksümüz var. Biz öz Üslublar Konfransını təşkil edəcəyik və növbəti dərslər ərzində onun üçün vebsayt yaradacağıq. Bunun kimi!</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>Gəlin dişliləri HTML-dən bir az uzaqlaşdıraq və CSS-ə nəzər salaq. Unutmayın ki, HTML veb səhifələrimizin məzmununu və strukturunu, CSS isə onların vizual üslubunu və görünüşünü müəyyən edir.</p><h2>Əsas CSS Şərtləri</h2><p>HTML şərtlərinə əlavə olaraq, bəzi əsas CSS şərtləri var ki, onlarla tanış olmaq lazımdır. Bu terminlərə seçicilər, xassələr və dəyərlər daxildir. HTML terminologiyasında olduğu kimi, CSS ilə nə qədər çox işləsəniz, bu terminlər bir o qədər ikinci xarakterə çevrilir.</p><h3>Seçicilər</h3><p>Veb səhifəyə elementlər əlavə etdiyiniz zaman CSS-dən istifadə etməklə onları tərtib etmək olar. Selektor HTML-də hansı elementin və ya elementlərin hədəflənəcəyini və üslubların (məsələn, rəng, ölçü və mövqe) tətbiq ediləcəyini müəyyən edir. Seçicilər, bizim nə qədər konkret olmaq istədiyimizdən asılı olaraq unikal elementləri seçmək üçün müxtəlif ölçülərin birləşməsini daxil edə bilər. Məsələn, biz səhifədəki hər bir abzas seçmək və ya yalnız bir xüsusi abzas seçmək istəyirik.</p><p>Seçicilər adətən id və ya sinif dəyəri kimi atribut dəyəri və ya element adı ilə əlaqələndirilir, məsələn <h1>və ya<р> .</p><p>CSS-də seçicilər seçilmiş elementə tətbiq olunan üslubları əhatə edən əyri mötərizələrlə () birləşdirilir. Bu seçici bütün elementləri hədəfləyir <span><p>P(...)</p><h3>Xüsusiyyətlər</h3><p>Element seçildikdən sonra xassə ona tətbiq olunacaq üslubları müəyyən edir. Xüsusiyyət adları seçicidən sonra, içəridə gəlir <a href="https://5visa.ru/az/installation-and-configuration/kvadratnye-skobki-v-vorde-kak-ubrat-kvadratnye-i-figurnye.html">buruq mötərizələr</a>() və kolondan dərhal əvvəl. İstifadə edə biləcəyimiz bir çox xüsusiyyət var, məsələn, fon, rəng, şrift ölçüsü, hündürlük və genişlik və digər ümumi əlavə edilmiş xüsusiyyətlər. Aşağıdakı kodda biz bütün elementlərə aid olan rəng və şrift ölçüsü xassələrini müəyyən edirik <span><p>P (rəng: ...; şrift ölçüsü: ...; )</p><h3>Dəyərlər</h3><p>Hələlik biz yalnız selektor vasitəsilə element seçmişik və xassələr vasitəsilə ona hansı üslubu tətbiq etmək istədiyimizi müəyyən etmişik. İndi biz bu xüsusiyyətin davranışını dəyər vasitəsilə təyin edə bilərik. Dəyərlər iki nöqtə və nöqtəli vergül arasında mətn kimi göstərilə bilər. Aşağıda bütün elementləri seçirik <p >Rəng xüsusiyyətinin dəyərini narıncı, şrift ölçüsünün dəyərini isə 16 piksel olaraq təyin edin.</p><p>P (rəng: narıncı; şrift ölçüsü: 16px; )</p><p>Bunu yoxlamaq üçün CSS-də bizim qaydalar dəstimiz selektorla başlayır və dərhal sonra əyri mötərizələrlə başlayır. Bu qıvrım mötərizələrdə xüsusiyyətlər və dəyərlər cütlərindən ibarət bəyannamələr var. Hər bir bəyannamə əmlakla başlayır, ondan sonra iki nöqtə, əmlakın dəyəri və nəhayət nöqtəli vergül qoyulur.</p><p>Ümumi bir təcrübə, cüt xassələri və dəyərləri qıvrımlı mötərizələrin içərisində dəyişdirməkdir. HTML ilə olduğu kimi, abzas kodumuzu mütəşəkkil və aydın saxlamağa kömək edir.</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>düyü. 1.03. CSS sintaksis strukturuna selektor, xassələr və dəyərlər daxildir</p><p>Bir neçə əsas termini və ümumi CSS sintaksisini bilmək əla başlanğıcdır, lakin dərinliklərə getməzdən əvvəl əhatə edəcəyimiz bir neçə məqam daha var. Xüsusilə, seçicilərin CSS-də necə işlədiyinə daha yaxından nəzər salmalıyıq.</p><h2>Seçicilərlə işləmək</h2><p>Seçicilər, əvvəllər qeyd edildiyi kimi, hansı HTML elementlərinin üslublanacağını göstərir. Selektorların necə istifadə olunacağını və onların necə işlədiyini tam başa düşmək vacibdir. İlk addım tanış olmaq olmalıdır <a href="https://5visa.ru/az/education/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">müxtəlif növlər</a> seçicilər. Biz ən əsas seçicilərlə başlayacağıq: növ, sinif və identifikator seçiciləri.</p><h3>Tip seçiciləri</h3><p>Tip seçiciləri elementləri növlərinə görə hədəfləyir. Məsələn, bütün elementləri hədəfləmək istəsək <div>div selektorundan istifadə etməliyik. Aşağıdakı kod elementlər üçün tip seçicisini göstərir <div>, həmçinin müvafiq HTML.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Dərslər</h3><p>Siniflər sinif atributunun dəyərinə əsaslanaraq elementi seçməyə imkan verir. Sinif seçiciləri tip seçicilərindən bir az daha spesifikdir, çünki onlar eyni tipli bütün elementləri deyil, müəyyən bir qrup elementləri seçirlər.</p><p>Siniflər birdən çox element üçün eyni sinif atribut dəyərindən istifadə etməklə eyni üslubları eyni anda müxtəlif elementlərə tətbiq etməyə imkan verir.</p><p>CSS-də siniflər sinif atributunun dəyərindən sonra baş nöqtə ilə təmsil olunur. Aşağıdakı sinif seçicisi elementlər daxil olmaqla, zəhmli sinif atributunun dəyərini ehtiva edən bütün elementləri seçir <div>Və <span><p>Möhtəşəm(...)</p><p> <div class="awesome">...</div> </p><h3>İdentifikatorlar</h3><p>İdentifikatorlar siniflərdən daha dəqiqdir, çünki onlar bir anda yalnız bir unikal elementi hədəfləyirlər. Sinif seçiciləri sinif atributunun dəyərindən istifadə etdiyi kimi, identifikatorlar da seçici kimi id atributunun dəyərindən istifadə edirlər.</p><p>Göstərilən element növündən asılı olmayaraq, id atribut dəyəri səhifədə yalnız bir dəfə istifadə edilə bilər. İdlər varsa, onlar vacib elementlər üçün qorunmalıdır.</p><p>CSS-də identifikatorlar qarşısında hash simvolu, ardınca id atributunun dəyəri ilə təmsil olunur. Burada id yalnız shayhowe dəyəri olan id atributunu ehtiva edən elementi seçəcək.</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Əlavə seçicilər</h3><p>Seçicilər son dərəcə güclü şeylərdir və yuxarıda təsvir edilənlər rastlaşdığımız ən çox yayılmış seçicilər arasındadır. Bu seçicilər yalnız başlanğıcdır. Bir çox qabaqcıl seçicilər mövcuddur və onlar asanlıqla mövcuddur. Onlarla rahatlaşdıqdan sonra, daha inkişaf etmiş bəzilərini yoxlamaqdan qorxmayın.</p><p>Yaxşı, hər şeyi birləşdirməyə başlayaq. Biz HTML daxilində səhifəyə elementlər əlavə edirik, sonra həmin elementləri seçib CSS-dən istifadə edərək onlara stil verə bilərik. İndi iki dilin birlikdə işləməsi üçün HTML və CSS arasında nöqtələri birləşdirək.</p><h2>CSS birləşdirilir</h2><p>CSS-imizi HTML ilə danışdırmaq üçün HTML-dən CSS faylını göstərməliyik. Yaxşı təcrübə, bütün üslublarımızı element daxilində göstərilən bir xarici fayla daxil etməkdir <head>HTML sənədimiz. Bir xarici CSS-dən istifadə etmək bizə eyni üslubları saytda tətbiq etməyə və ona tez dəyişikliklər etməyə imkan verir.</p><h3>CSS əlavə etmək üçün digər seçimlər</h3><p>CSS-i daxil etmək üçün digər seçimlərə daxili və daxili üslublardan istifadə daxildir. Siz reallıqda bu seçimlərlə qarşılaşa bilərsiniz, lakin saytların yenilənməsini çətin və çətinləşdirdiyinə görə onlar ümumiyyətlə xoşagəlməzdir.</p><p>Xarici üslub cədvəlimizi yaratmaq üçün yenisini yaratmaq üçün yenidən seçdiyimiz mətn redaktorundan istifadə etmək istəyirik <a href="https://5visa.ru/az/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">mətn faylı</a>.css uzantısı ilə. CSS faylımız HTML faylımızla eyni qovluqda və ya alt qovluqda saxlanmalıdır.</p><p>Bir elementin içərisində <head>element tətbiq olunur <link>HTML və CSS faylları arasındakı əlaqəni təyin edən . CSS ilə əlaqə qurduğumuz üçün onların əlaqəsini göstərmək üçün üslub cədvəli dəyəri ilə rel atributundan istifadə edirik. Bundan əlavə, href atributu CSS faylının yerini və ya yolunu göstərmək üçün istifadə olunur.</p><p>Aşağıdakı nümunədə HTML sənədi, element <head>xarici stil faylına işarə edir.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>CSS-nin düzgün göstərilməsi üçün href atributunun yol dəyəri birbaşa CSS faylının saxlandığı yerə uyğun olmalıdır. Əvvəlki nümunədə main.css faylı HTML faylı ilə eyni yerdə saxlanılır, bu da kök qovluq kimi tanınır.</p><p>Əgər CSS faylı alt qovluqda yerləşirsə, o zaman href atributunun dəyəri müvafiq olaraq həmin yola uyğun olmalıdır. Məsələn, əgər main.css faylımız stil cədvəlləri adlı alt qovluqda saxlanılıbsa, o zaman href atributunun dəyəri stylesheets/main.css olacaq. Bu, alt qovluğa keçidi göstərmək üçün irəli slash (və ya slash) istifadə edir.</p><p>Aktiv <a href="https://5visa.ru/az/firmware/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">Bu an</a> səhifələrimiz yavaş-yavaş amma əminliklə canlanmağa başlayır. Biz hələ CSS-i çox dərindən araşdırmamışıq, lakin siz bəzi elementlərin bizim CSS-də bəyan etmədiyimiz üslublara malik olduğunu görmüsünüz. Bu elementlərə öz üstünlük verdiyi üslubları tətbiq edən brauzerdir. Xoşbəxtlikdən, biz bu üslubları çox asanlıqla yenidən yaza bilərik, CSS-in sıfırlanmasından istifadə edərək bundan sonra bunu edəcəyik.</p><h2>CSS sıfırlama istifadə edərək</h2><p>Hər bir brauzerin öz standart üslubları var <a href="https://5visa.ru/az/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">müxtəlif elementlər</a>. Necə <a href="https://5visa.ru/az/navigation/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Google Chrome</a> başlıqları, paraqrafları, siyahıları və s. göstərir, necə olduğundan fərqli ola bilər <a href="https://5visa.ru/az/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">internet Explorer</a>. Brauzerlər arası uyğunluğu təmin etmək üçün CSS sıfırlaması geniş şəkildə istifadə edilmişdir.</p><p>CSS sıfırlaması müəyyən bir üslubla bütün əsas HTML elementlərini götürür və bütün brauzerlərdə ardıcıl üslub təmin edir. Bu sıfırlamalar adətən ölçülərin, dolğunluğun, kənarların və ya bu dəyərləri aşağı salan əlavə üslubların silinməsini əhatə edir. CSS kaskadı yuxarıdan aşağıya işlədiyi üçün (bu barədə tezliklə öyrənəcəksiniz) - sıfırlamamız üslubumuzun ən başında olmalıdır. Bu, bu üslubların əvvəlcə oxunmasını təmin edir və bu da budur. <a href="https://5visa.ru/az/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">müxtəlif brauzerlər</a>ümumi istinad nöqtəsindən işə başlayacaq.</p><p>Tətbiq etmək üçün müxtəlif CSS sıfırlamaları var, onların hamısının öz xüsusiyyətləri var <a href="https://5visa.ru/az/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">güclü tərəflər</a>. Eric Meyer-in ən populyarlarından biri, onun CSS sıfırlaması yeni HTML5 elementlərini daxil etmək üçün uyğunlaşdırılıb.</p><p>Bir az macəraçı hiss edirsinizsə, Nicholas Gallagher tərəfindən yaradılmış Normalize.css də var. Normalize.css bütün əsas elementlər üçün sərt sıfırlamadan istifadə etməyə deyil, bunun əvəzinə həmin elementlər üçün ümumi üslubların qurulmasına diqqət yetirir. Bu, CSS-i daha dərindən başa düşməyi, həmçinin üslublardan nə əldə etmək istədiyinizi bilmək tələb edir.</p><h3>Brauzerlər arası uyğunluq və sınaq</h3><p>Daha əvvəl qeyd edildiyi kimi, müxtəlif brauzerlər elementləri fərqli şəkildə təqdim edir. Brauzerlər arası uyğunluğun və testin əhəmiyyətini dərk etmək vacibdir. Saytlar bütün brauzerlərdə eyni görünməməli, yaxın olmalıdır. Hansı brauzerləri dəstəkləmək istədiyiniz və nə dərəcədə saytınız üçün ən yaxşısına əsaslanaraq qərar verməli olacaqsınız.</p><p>CSS yazarkən diqqət etməli olduğunuz bir neçə şey var. Yaxşı xəbər budur ki, siz hər şeyi edə bilərsiniz və bunu mənimsəmək üçün bir az səbr lazımdır.</p><h2>Təcrübədə</h2><p>Konfrans saytımızda sonuncu qaldığımız yerə qayıdaq və CSS-ni necə əlavə edə biləcəyimizi görək.</p><ol><li>Stillər-konfrans qovluğumuzda aktivlər adlı yeni qovluq yaradaq. Üslublar, şəkillər, videolar və s. kimi veb saytımız üçün bütün resursları burada saxlayacağıq. Üslublarımız üçün davam edək və aktivlər qovluğuna başqa üslub cədvəlləri qovluğu əlavə edək.</li><li>Mətn redaktorundan istifadə edərək main.css adlı yeni fayl yaradaq və onu indicə yaratdığımız stylesheets qovluğunda saxlayaq.</li><p>Brauzerdə index.html faylına baxsaq elementlərin olduğunu görə bilərik <h1>Və <p>Artıq standart üslubu ehtiva edir. Xüsusilə, onların ətrafında unikal şrift ölçüsü və boşluq var. Eric Meyer-in sıfırlamasından istifadə edərək, bu üslubları yumşalda, onların hər birinə eyni bazadan başlamağa imkan verə bilərik. Bunu etmək üçün onun veb saytına nəzər salın, kodu kopyalayın və main.css faylımızın yuxarı hissəsinə yapışdırın.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Lisenziya: heç biri (ictimai domen) */ html, bədən, div, span, applet, obyekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, ünvan, big, sit, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, sahə dəsti, forma, etiket, əfsanə, cədvəl, başlıq, tbody, tfoot, thead, tr, th, td, məqalə, kənara, kətan, detallar, yerləşdirmə, rəqəm, figcaption, altbilgi, başlıq, hgroup, menyu, naviqasiya, çıxış, ruby, bölmə, xülasə, vaxt, işarə, audio, video ( haşiyə: 0; padding: 0; haşiyə: 0; şrift ölçüsü: 100%; şrift: miras; şaquli align: baza xətti ; ) /* Köhnə brauzerlər üçün HTML5 ekran rolunun sıfırlanması */ məqalə, kənara, təfərrüatlar, təsvir, şəkil, altbilgi, başlıq, hqrup, menyu, naviqasiya, bölmə ( displey: blok; ) gövdə ( sətir hündürlüyü: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:fore, blockquote:sonra, q:fore, q:sonra ( content: ""; content: none; ) table ( border- çökmək: yıxılmaq; sərhəd aralığı: 0; )</p><li>Bizim main.css faylımız formalaşmağa başlayır, ona görə də onu index.html faylına birləşdirək. Mətn redaktorunda index.html açın və element əlavə edin <link>V <head>, elementdən dərhal sonra <title> .</li><li>Element vasitəsilə üslublara işarə etdiyimiz üçün <link>dəyər üslub cədvəli ilə rel atributunu əlavə edin.</li><p>Biz həmçinin href atributundan istifadə edərək main.css faylımıza keçid daxil edəcəyik. Unutmayın ki, main.css faylımız aktivlər qovluğunda yerləşən stil cədvəlləri qovluğunda saxlanılır. Beləliklə, main.css faylımıza gedən yol olan href atributunun dəyəri assets/stylesheets/main.css olmalıdır.</p><p> <head> <meta charset="utf-8"> <title>Üslublar Konfransı

İşimizi yoxlamaq və HTML və CSS-nin birlikdə necə işlədiyini görmək vaxtıdır. Brauzerdə index.html faylının açılması (və ya artıq açıqdırsa, səhifənin təzələnməsi) əvvəlkindən bir qədər fərqli nəticə göstərməlidir.

düyü. 1.04. CSS sıfırlama ilə Üslublar Konfransı saytımız

Demo və mənbə kodu

Aşağıda Stillər Konfransı veb-saytını indiki vəziyyətdə görə bilərsiniz, həmçinin yükləyə bilərsiniz mənbə hazırda sayt.

Xülasə

Beləliklə, hər şey yaxşıdır! Bu dərslikdə bəzi böyük addımlar atdıq.

Düşünün, indi HTML və CSS-in əsaslarını bilirsiniz. Biz davam etdikcə və siz HTML və CSS yazmağa daha çox vaxt sərf etdikcə, bu iki dillə işləmək daha rahat olacaq.

Xülasə etmək üçün aşağıdakıları əhatə etdik:

  • HTML və CSS arasındakı fərq.
  • HTML elementləri, teqləri və atributlarına giriş.
  • İlk veb səhifənizin strukturunun qurulması.
  • CSS seçicilərinə, xassələrə və dəyərlərə giriş.
  • CSS seçiciləri ilə işləmək.
  • HTML-dən CSS-ə göstərici.
  • CSS sıfırlamasının əhəmiyyəti.

İndi HTML-ə daha yaxından nəzər salaq və semantika ilə bir az tanış olaq.

Resurslar və bağlantılar

  • Scripting Master vasitəsilə ümumi HTML şərtləri
  • Etkileyici Veblər vasitəsilə CSS Şərtləri və Tərifləri
  • CSS Alətləri: Eric Meyer vasitəsilə CSS-i sıfırlayın

İnternetdə təqdim olunan məzmunun əsas hissəsi veb səhifələrdir. Bu, tarixən virtual şəbəkə məkanında yerləşdirilməsi üçün nəzərdə tutulan ilk sənəd növüdür, lakin o, hələ də aktuallığını qoruyur və praktiki olaraq heç bir rəqabət aparan formata malik deyil. Veb səhifələrin strukturu necədir? Yaratmaq üçün hansı veb inkişaf alətlərindən istifadə olunur?

Veb səhifə nədir?

"Veb səhifənin əsas elementlərini sadalayın" deyə imtahan verən informatika dərsində bizə deyir. Biz ona cavab olaraq nə deyə bilərik? Əvvəla, biz internet səhifəsinin prinsipcə nə olduğundan danışacağıq.

İT mütəxəssisləri arasında ümumi qəbul edilmiş tərifə görə, bu, ixtisaslaşdırılmış proqramda - brauzerdə açılması nəzərdə tutulan və müxtəlif faydalı məzmunlu proqram təminatının müvafiq növündən - mətnlərdən istifadə edərək kompüter ekranında göstərmək üçün məlumatları ehtiva edən bir sənəddir. , keçidlər, qrafiklər, videolar, musiqi və s. Veb səhifə mətn sənədidir. Brauzer üçün müvafiq məlumatlar hərflər, rəqəmlər və Xüsusi simvollar, işarələmə dili elementləri kimi istifadə olunur - HTML. Məhz onun köməyi ilə veb-səhifənin yaradıcısı brauzerə bu və ya digər məzmunu ekranda necə göstərməyi “izah edir”.

Saytların strukturunda veb-səhifələrin yeri və rolu

Veb səhifənin veb-saytın əsas komponenti olduğunu deyə bilərikmi? Bu qismən doğrudur. Bununla belə, yuxarıda qeyd etdiyimiz kimi, veb səhifə sadəcə mətn sənədidir. Saytda, bir qayda olaraq, şəkillər, videolar və digər multimedia elementləri də var. Veb səhifə onları ehtiva edə bilməz, lakin strukturunda onlara keçidlər ola bilər. Beləliklə, virtual məzmunun istifadəçilər qarşısında nümayiş etdirilməsində dominant roluna görə veb səhifəni saytın əsas komponenti adlandırmaq olar.

Nadir hallarda, əlbəttə ki, sözügedən sənəd saytın yeganə komponenti olacaq - əgər nədənsə qrafika, video və digər multimedia elementlərinin nümayişini təmin etmirsə. Xüsusilə, ilk veb-saytlar - Veb səhifə işarələmə dilləri ilk dəfə göründüyü zaman - müvafiq məzmunu ehtiva etmirdi. İstifadəçinin gözü qarşısında yalnız mətn və keçidlər var idi.

Hipermətndən istifadə prinsipi

Beləliklə, Web səhifəsi üzərində tərtib edilmiş sənəddir HTML dili, hipermətn işarələmək üçün istifadə olunur. Bəs bu fenomen nədir? Hipermətn nədir? Nəzəriyyəyə çox dərindən girmədən qeyd edirik ki, bu, bu və ya digər şəkildə əldə etməyə imkan verən mətndir. sürətli giriş digərinə - bağlantılar vasitəsilə. Adi bir kitabda bu mümkün deyil - "sadə mətn" var. İstədiyiniz səhifəyə daxil olmaq üçün oxucu bir neçə növbə etməli, əvvəlcə məzmun cədvəlini və ya qeydləri oxumalıdır. Hipermətn rejimində işin çox hissəsi səhifənin HTML elementlərində əks olunan məlumatlardan istifadə etməklə kompüter tərəfindən yerinə yetirilir.

İnformatika müəllimi bizə deyirsə: "Veb səhifənin əsas elementlərini sadalayın", onda HTML işarələmə dilindən istifadə edərək yaradılmış müvafiq sənədin komponentləri haqqında çox düzgün danışmağa başlaya bilərik. Buna görə də əvvəlcə HTML ilə bağlı bəzi nəzəri məqamlara nəzər salaq.

HTML dili strukturu: teqlər

Brauzer HTML sənədindən veb səhifə haqqında lazımi məlumatları necə oxuyur? Çox sadə.

Vacib elementlər bu dildən- bunlar etiketlərdir. Əksər hallarda, onlar qoşalaşırlar - açılış da var, bağlanan da. Birincilər yalnız bucaqlı mötərizələrdən istifadə etməklə göstərilir. İkincilər oxşardır, lakin ikinci mötərizədən əvvəl kəsik işarəsi var - simvol /. Brauzer onları tanıya bilir və buna görə də veb-səhifələrin məzmununu sənəd tərtibatçısının yaratdığı alqoritmlərə uyğun olaraq heç bir problem olmadan nümayiş etdirir.

Açılış etiketi adətən böyük hərflərlə, bağlanış etiketi kiçik hərflərlə yazılır. Bu, İT mütəxəssisləri arasında formalaşmış bir standartdır. Brauzer, əlbəttə ki, HTML əmrini istənilən hərflərlə tanıyacaq, lakin veb tərtibatçılarına hələ də işarələnmiş etiket yazma sxeminə riayət etmək tövsiyə olunur. Bu, məsələn, digər mütəxəssislərin veb səhifəni təkmilləşdirməsini asanlaşdıracaq.

Atributlar

HTML dilinin digər mühüm elementləri atributlardır. Onların köməyi ilə veb-səhifənin yaradıcısı məzmunun xüsusiyyətlərini - məsələn, şriftin hündürlüyünü, rəngini, səhifəyə nisbətən mövqeyini təyin edə bilər. Eyni şey şəkillər, videolar və digər multimedia komponentlərinə də aiddir. Atributlar açılış etiketində yazılır.

Məzmun

Açılış və bağlanma teqləri arasında veb səhifənin növbəti əsas komponenti - məzmun yerləşir. Bu, əslində, ekranda istifadəçinin qarşısında göstərilməli olan məzmundur. Bu mətn, keçid, şəkil, video və ya başqa multimedia elementi ola bilər.

Veb səhifə elementləri

"Beləliklə, nəhayət, veb səhifənin əsas elementlərini sadalayın!" - müəllim təkrar edir. "Məmnuniyyətlə" deyə cavab veririk. Baxılan sənəd növünün strukturuna nə daxildir? Razılaşaq ki, biz bu aspekti veb-səhifənin HTML elementləri kontekstində nəzərdən keçirəcəyik. Yəni onların brauzerdə göstərilməsi - istifadəçinin ekranda gördüyü şey bizi az dərəcədə maraqlandıracaq. Fakt budur ki, proqramın məzmunu eyni şəkildə göstərdiyi müvafiq HTML alqoritmləri fərqli ola bilər. Bu da HTML dilinin xüsusiyyətidir: Veb-səhifədə istədiyiniz şəkil göstərilə bilər fərqli yollar. Eyni zamanda, onlar ya veb səhifə yaradıcısının əmək xərcləri baxımından ekvivalent ola bilər, ya da onların həyata keçirilməsi üçün fərqli səy və vaxt tələb edə bilər.

Veb səhifə elementləri: başlıq

Veb səhifənin standart elementləri nə qədər təəccüblü görünsə də, çox az miqdarda təqdim olunur. Əslində, onlardan yalnız ikisi var - sənədin adı və əsas hissəsi. Eyni zamanda, onların hər biri kifayət qədər mürəkkəb bir quruluşa sahib ola bilər.

Başlığın xüsusiyyətləri nələrdir? Veb səhifənin ən yuxarı hissəsində yerləşir. Başlığı təşkil edən HTML kodu adətən yalnız mətni “şifrələmək” üçün nəzərdə tutulub, lakin lazım gələrsə, müvafiq elementə kiçik qrafik əlavələr də yerləşdirilə bilər. Və bu, əslində, başlıq haqqında deyilə biləcək hər şeydir. Belə görünür ki, müvafiq sənədin strukturunda onun rolu əhəmiyyətsizdir. Amma bu doğru deyil. Veb səhifə başlıqları axtarış sistemlərində - Yandex, Google-da saytların indeksləşdirilməsi baxımından çox əhəmiyyətlidir. Bu element veb-səhifənin məzmununa, eləcə də saytın tematik xüsusiyyətlərinə tamamilə uyğun olmalıdır.

HTML istifadə edərək veb səhifənin başlığı necə alınır? Çox sadə. Birincisi, həmişə bucaq mötərizələri ilə HEAD kimi görünən açılış teqi, sonra başlıq məzmunu, sonra bağlanma teqi yazılır. Onlar, əlbəttə ki, veb sənədin ən yuxarı hissəsində yazılır.

Veb sənədin başlığına bir sıra əlavə elementlər daxil ola bilər. Bəzən veb səhifənin formatı mətnin xüsusi kodlaşdırmada göstərilməsini tələb edə bilər. Veb sənədinizin bu meyara cavab verdiyinə necə əmin ola bilərsiniz? Çox sadə. HTML alqoritmləri sənədin başlıq strukturunda yerləşdirilməlidir, brauzerə xüsusi bir dil kodlaşdırmasından - məsələn, kirildən istifadə etməyi tapşırır. Müvafiq əmrlər digərləri kimi açılıb bağlana bilən META teqində yerləşdirilir.

Veb səhifənin əsas hissəsi

Veb-sənədin əsas hissəsi BODY teqi ilə açılır və kəsik işarəsi daxil olmaqla müvafiq elementlə bağlanır. Üstəlik, açılış və bağlama teqləri arasında çoxlu sayda əlavə hipermətn işarələmə dili əmrləri ola bilər. Bu onunla bağlıdır ki, veb səhifənin əsas hissəsində onun faydalı məzmunu - mətnlər, keçidlər, qrafiklər, videolar, doldurulması üçün müxtəlif formalar var.

Müvafiq məzmun növlərinin hər birinin öz etiketləri var. Veb-sənədin əsas hissəsinin strukturunda HTML əmrləri ola bilər ki, bunlar da mətni formatlaşdırmaq üçün istifadə olunur - məsələn, şriftə müəyyən rəng, ölçü və digər xüsusiyyətlər vermək.

Tez-tez istifadə olunan bəzi HTML teqlərinin xüsusiyyətlərinə nəzər salaq. Əslində, onlar veb səhifənin əsas elementlərini təşkil edirlər.

Əsas HTML Teqləri

Beləliklə, veb səhifənin elementlərinin nə olduğunu ətraflı öyrənmək üçün əsas HTML teqlərinin mahiyyətini daha ətraflı öyrənək. Onların bəzilərini yuxarıda verdik - xüsusən də brauzerin veb səhifələrin başlıqlarını oxuduğu və sənədin əsas hissəsinin harada yerləşdiyini müəyyənləşdirdiyi.

P teqi kifayət qədər geniş yayılmışdır.O, hipermətn işarələmə dilinin digər oxşar elementləri kimi açılıb bağlana bilər. Bu teq sənədin bir paraqrafını formatlamağa imkan verir. Siz, məsələn, onun üçün xüsusi şrift növü və ya rəngi təyin edə bilərsiniz. Bununla belə, bu, əlavə teqdən - FONT-dan istifadə etməklə həyata keçirilir. Bu halda, o, paraqrafın sərhədlərini qeyd edənin içərisinə yerləşdiriləcək - bu, üstünlük verilən şrift növünü əks etdirən HTML əmrinin veb səhifənin digər elementlərinə paylanmasının qarşısını alacaq.

Cədvəllər TABLE teqindən istifadə etməklə yaradılır. Müvafiq atributlardan istifadə edərək, lazımi sayda sütun və sətirləri təyin edə, onların enini, xüsusi sərhədlərini, cədvəldəki mətnin ölçüsünü və şrift rəngini təyin edə bilərsiniz.

Brauzer tərəfindən şəkillərin işlənməsinə cavabdehdir. Siz həmçinin şəklin ölçüsünü və səhifədəki mövqeyini tənzimləyən müxtəlif atributlar yerləşdirə bilərsiniz.

Digər veb-sənədlərə və ya fayllara keçidlər A teqindən istifadə etməklə göstərilir.Bir qayda olaraq, onun daxilində veb-səhifənin strukturunda hiperlinkin olmasını göstərən atributlar var. Bu halda onun rəhbərlik etdiyi sənəd, fayl və ya sayt göstərilir.

Ümumi etiket FRAMESET-dir. Onun köməyi ilə veb səhifənin məkanını bir neçə sahəyə - çərçivələrə bölmək olar. Onların hər birində ayrıca veb sənədlərdən istifadə edə bilərsiniz. Yəni, çərçivələr eyni anda bir ekranda iki və ya daha çox səhifəni düzgün yerləşdirməyə imkan verir.

Veb səhifələrin əsas elementləri haqqında hekayə və HTML dilindən istifadə edərək onları formatlaşdırma vasitələri haqqında sonrakı hekayə - təxminən bu, imtahan verənin bizə verdiyi suala cavab alqoritmi olacaq. Əgər o, bizə “Web səhifənin əsas elementlərini sadalayın” deyərək gəlsə, o zaman müvafiq metodologiyadan istifadə edərək mövzunu açmaq üçün hər cür şansımız olacaq. Yəni, "elementlər" termini ilə biz veb-sənəd strukturunun əsas komponentlərini və ya məzmun növlərini - mətn, şəkillər, cədvəllər, çərçivələr, vebmasterin HTML dili kimi bir alətdən istifadə edərək yaratdığı bağlantıları başa düşə bilərik. .

Veb inkişaf vasitələrinin xüsusiyyətləri

Deyilənlərə əlavə olaraq, HTML standartları tərəfindən təmin edilən çoxlu sayda etiket və atributların olduğunu izah edə bilərik. HTML ilə yanaşı, veb tərtibatçıları hipermətn sənədləri üçün əlavə formatlaşdırma vasitələrindən istifadə edə bilərlər. Məsələn, ilə JavaScript istifadə edərək dinamik Web səhifələri yarada bilərsiniz - yəni məzmunun daim yeniləndiyi səhifələr (həm istifadəçinin özünün hərəkətləri, həm də skriptlərdə əvvəlcədən yazılmış alqoritmlərə uyğun olaraq).

Əlavə etmək faydalı olardı ki, veb tərtibatçı öz işində tam hüquqlu proqramlaşdırma dillərindən, məsələn, Perl, PHP, Java, Python kimi istifadə edə bilər ki, onların köməyi ilə hipermətn sənədləri ilə işləmək imkanları yaranır. daha da geniş. Buna ehtiyac, bu gün veb texnologiyalarının tətbiq sahələrinin çox fərqli olması ilə əlaqədar ola bilər. Müasir tərtibatçıların üzləşdiyi problemlər olduqca mürəkkəb ola bilər. Məsələn, bəzən rus dilində yazılmış Web-səhifələri ingilis dilinə tərcümə etmək lazım gəlir. Bu vəziyyətdə, geliştiricinin alətləri çox müxtəlif olacaqdır.

İşin məqsədi: tələbələri HTML dilinin əsas anlayışları, HTML sənədinin strukturu, məcburi teqlər, şərhlər, mətnin formatlaşdırılması üsulları, fiziki və məntiqi üslublarla tanış etmək, sadə statik Veb sənədləri yaratmaq bacarıqlarına yiyələnmək.

Laboratoriya dərslərində HTML faylları hazırlamaq üçün Notepad mətn redaktorundan, görülən işlərə nəzarət etmək üçün isə Internet Explorer brauzerindən istifadə edəcəyik.

Nəzəri məlumat

Əsas anlayışlar

Hipermətn- kompüter ekranında mətn elementləri arasında semantik əlaqələri bir elementdən digərinə asanlıqla keçə biləcəyiniz şəkildə qurmağa imkan verən informasiya strukturu. Təcrübədə hipermətndə bəzi sözlərin altını çəkmək və ya başqa rənglə (hiperlink) rəngləməklə vurğulanır. Sözün vurğulanması bu sözlə vurğulanan sözlə əlaqəli mövzunun daha ətraflı müzakirə olunduğu bəzi sənəd arasında əlaqəni göstərir. HTML formatında yazılmış ayrıca sənəd adlanır:

HTML sənədi;

Veb sənəd;

Veb səhifə.

Belə səhifələr adətən NTM və ya HTML formatında olur.

Bir müəllifə və ya bir IEDV orqanına aid olan və ümumi hiperlinklərlə bir-birinə bağlı olan Web-səhifələr qrupu Veb qovşağı və ya Veb sayt adlanan strukturu əmələ gətirir. Hər bir HTML səhifəsinin özünəməxsus URL-i var - adsəhec internetdə.

Çərçivə (Çərçivə) - iki məna daşıyan termin. Birinci dəyər öz sürüşdürmə çubuqları olan sənəd sahəsidir. İkincisi, cizgi qrafik faylında (çərçivə) 0DNN0H təsviridir.

applet (Applet) - müştəri kompüterinə ayrıca fayl kimi ötürülən və Veb səhifəyə baxarkən işə salınan proqram.

skript (Skript) , və ya skript, imkanlarını genişləndirmək üçün Veb səhifəyə daxil edilmiş proqramdır. Müəyyən hallarda, Internet Explorer brauzeri "Səhifədə skriptin icrasına icazə verilsin?" mesajını göstərir. Bu halda biz skriptləri nəzərdə tuturuq.

CGI (Ümumi Gateway İnterfeys) - serverdə işləyərək Web-səhifələrin imkanlarını genişləndirməyə imkan verən proqramların ümumi adı. Belə proqramlar olmadan interaktiv Web səhifələr yaratmaq mümkün deyil.

Brauzer (Brauzer) - Veb səhifələrə baxmaq üçün proqram.

Element- HTML dili dizaynı. Siz onu məlumatları saxlayan və müəyyən bir şəkildə formatlamağa imkan verən konteyner kimi düşünə bilərsiniz. İstənilən veb səhifə elementlər toplusudur. Hipermətnin əsas ideyalarından biri elementlərin yuvalanmasının mümkünlüyüdür. Misal üçün:

<Начало элемента>Elementin məzmunu, elementin formatlaşdırdığı məlumatlar

Tag(ingilis dilində tag - etiket, deskriptor, etiket) - elementin başlanğıc və ya bitiş işarəsi. Teqlər elementlərin hərəkətinin sərhədlərini müəyyənləşdirir və elementləri bir-birindən ayırır. Veb səhifənin mətnində teqlər bucaqlı mötərizədə yerləşdirilir< >, və son etiketdən sonra həmişə kəsik işarəsi gəlir. Mətn bu mötərizələr arasında deyil (< >), brauzerdə baxdıqda tamamilə görünür. Misal üçün:

<Начальный тег>Elementin məzmunu, məlumatları

elementi formatlaşdırır

<Р>Bu mətn ayrıca bir paraqrafda yerləşəcəkdir

İstənilən veb səhifə elementlər toplusudur. HTML-nin əsas prinsiplərindən biri bir elementi digərinin içərisinə yerləşdirmək qabiliyyətidir.

Atribut- elementin parametri və ya xassəsi. Atributlar başlanğıc etiketinin içərisində yerləşir və bir-birindən boşluqlarla ayrılır. Sementdə mətn varsa, o zaman atributlar şriftin rəngini və ölçüsünü, hizalanmasını təyin edə bilər mətn paraqrafı və s. Əgər elementdə şəkil varsa, o zaman atributlar şəklin ölçüsünü, şəklin ətrafındakı çərçivənin mövcudluğunu və ölçüsünü və s.

<Р align="center">Bu mətn ekranın mərkəzinə uyğunlaşdırılacaq

Bu nümunə yenidən paraqrafın əvvəlini və sonunu təyin edən etiketdən istifadə edir. Bununla belə, başlanğıc teqində mətnin düzülməsini ekranın mərkəzinə təyin edən align atributu var.

Qeyd:

İstənilən faydalı məlumat onun formatını göstərən başlanğıc və son teqlər arasında görünməlidir;

Bütün atributlar başlanğıc etiketində yerləşir;

İstifadə rahatlığı üçün başlanğıc teqini böyük (böyük) hərflə (P), son etiketi isə kiçik (kiçik) hərflə (/p) yaza bilərsiniz, baxmayaraq ki, bu lazım deyil;

Bütün elementlər son (bağlama) etiketini tələb etmir;

Hər yeni elementi yeni sətirdə yazmağa başlayın. İç-içə daxil edilmiş elementləri daxil edin (tab). Bu, yenə də lazım deyil, ancaq işinizi xeyli asanlaşdıracaq.

Veb səhifə mətn, qrafika, hiperlink, audio, animasiya və videonu özündə birləşdirə bilən xüsusi formatlaşdırılmış sənəddir.

Ümumi mövzunu, dizaynı və bağlantıları paylaşan və adətən eyni veb serverdə yerləşən bir neçə veb səhifə veb-sayt təşkil edir.

Veb sayt (ingilis dilindən. vebsayt: veb- “veb, şəbəkə” və Sayt- "yer", hərfi mənada "yer, seqment, şəbəkənin bir hissəsi") - toplu elektron sənədlər bir şəxsin və ya təşkilatın (faylları). kompüter şəbəkəsi, bir ünvan altında birləşir (domen adı və ya IP ünvanı).

Bütün saytlar birlikdə təşkil edirWorld Wide Web, burada rabitə (veb) dünya birliyindən məlumat seqmentlərini vahid bir bütövdə - verilənlər bazası və planetar miqyasda rabitədə birləşdirir. Müştərilərin serverlərdəki saytlara birbaşa çıxışı üçün xüsusi olaraq protokol hazırlanmışdır HTTP .

Veb sayt müəyyən bir mövzu və ya məsələ haqqında məlumatları ehtiva edən bir jurnal kimi qurulmuşdur. Jurnal çap səhifələrindən ibarət olduğu kimi, veb sayt da kompüterin veb səhifələrindən ibarətdir.

Veb səhifəni göstərən proqrama veb brauzer deyilir.

Veb saytlar hipermətn sənədinin işarələmə dili HTML-dən istifadə etməklə yaradılır. HTML texnologiyası adi mətn sənədinə nəzarət simvollarının (teqlərin) daxil edilməsindən ibarətdir və nəticədə biz Web səhifəsi alırıq. Brauzer veb səhifəni yükləyərkən onu etiketlərlə müəyyən edilmiş formada ekranda təqdim edir.

HTML sizə imkan verir:

· mətni formatlaşdırmaq;

· sənədə şəkillər və multimedia daxil etmək;

· Bu dildən istifadə etməklə digər Veb səhifələrə hipermətn keçidləri yaradılır.

HTML fayl məlumat məzmununu yaratmaq və Veb səhifələrin strukturunu və formatını müəyyən etmək üçün istifadə olunur. HTML faylları düz mətn faylları olduğundan, belə fayl faktiki olaraq istənilən kompüterə göndərilə bilər.

Web-səhifələrin yaradılması üçün yaradılmış sənəddə mətnin formatlaşdırılmasına nəzarət simvolları daxil edilməyən sadə mətn redaktorlarından istifadə olunur. Windows-da belə bir redaktor kimi istifadə edə bilərsiniz standart tətbiq"Notebook".

Tipik olaraq, Veb səhifə faylı .html və ya .htm uzantısına malikdir.

Bundan əlavə, veb saytların yaradılması üçün əsas addımların artıq avtomatlaşdırıldığı bir çox texnologiya var; qalan şey mövzunuza uyğun olaraq dəyişikliklər etməkdir.

HTML səhifəsinə baxmaq üçün sadəcə veb brauzerinizin ünvan çubuğuna onun URL-ni daxil edin və sonra hiperlinkləri izləyin. Ancaq bu, əsas problemdir - səhifənin ünvanını necə tapmaq olar? Çox vaxt belə olur ki, siz nə tapmaq lazım olduğunu bilirsiniz, amma dəqiq hara baxacağınızı bilmirsiniz. Bu problemi həll etmək üçün xüsusi axtarış sistemləri var. İstifadəçinin nöqteyi-nəzərindən, axtarış sistemi- bu adi saytdır ana səhifə kateqoriyalara bölünmüş digər saytlara keçidləri ehtiva edən (“İdman”, “Biznes”, “Kompüterlər” və s.). Bundan əlavə, axtarış sistemi istifadəçiyə bir neçə açar söz daxil etməyə imkan verir və həmin açar sözlər olan səhifələrə keçidləri qaytarır.

Veb sayt

Veb sayt (ingiliscə Vebsayt, web - web və saytdan - “yer”) kompüter şəbəkəsində bir ünvan altında birləşmiş fərdi şəxsin və ya təşkilatın sənədlər toplusudur. Varsayılan olaraq, saytın İnternetdə yerləşdiyi güman edilir. Bütün İnternet saytları birlikdə Ümumdünya Şəbəkəsini təşkil edir. HTTP protokolu müştərilərin serverlərdəki veb-saytlara birbaşa daxil olması üçün xüsusi olaraq hazırlanmışdır. Veb saytlar başqa cür bir şəxsin və ya təşkilatın İnternet təmsilçisi adlanır. "İnternetdəki öz səhifəniz" dedikdə, bu, başqasının saytının bir hissəsi kimi bütöv bir veb sayt və ya şəxsi səhifə deməkdir. İnternetdəki saytlarla yanaşı, mobil telefonlar üçün WAP saytları da mövcuddur.

Əvvəlcə veb-saytlar statik sənədlər toplusu idi. Hal-hazırda, onların əksəriyyəti dinamikliyi və interaktivliyi ilə xarakterizə olunur. Belə hallar üçün ekspertlər veb proqram - hazır terminindən istifadə edirlər proqram paketi veb sayt problemlərini həll etmək üçün. Veb tətbiqi veb saytın bir hissəsidir, lakin məlumatı olmayan bir veb tətbiqi yalnız texniki bir saytdır.

İnternetdə əksər hallarda bir veb sayt bir domen adına uyğun gəlir. Məhz uyğun olaraq domen adları yerləri müəyyən edilir qlobal şəbəkə. Digər variantlar mümkündür: bir neçə domendə bir sayt və ya bir domen altında bir neçə sayt. Tipik olaraq, bir neçə domen böyük saytlar (veb portallar) tərəfindən təqdim olunan müxtəlif xidmət növlərini məntiqi olaraq ayırmaq üçün istifadə olunur (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Ayrı-ayrı domenlərin ayrıldığı hallar da var müxtəlif ölkələr və ya dillər. Məsələn, google.ru və google.fr məntiqi olaraq müxtəlif dillərdə olan Google saytlarıdır, lakin texniki cəhətdən fərqli saytlardır. Bir domen altında bir neçə saytın birləşdirilməsi xarakterikdir pulsuz hosting. Saytları müəyyən etmək üçün ünvanda tilde işarəsi və hostdan sonra sayt adı var: example.com/~my-site-name/.




Üst