Kas ir tīmekļa lapa? Tas ir dokuments, kas rakstīts hiperteksta iezīmēšanas valodā (HTML), ko var apskatīt, izmantojot pārlūkprogrammu. Tīmekļa lapai var piekļūt, ievadot URL.

Tīmekļa lapā var būt teksts, grafika un hipersaites uz citām lapām un failiem.

Kā atvērt tīmekļa lapu

Lai skatītu tīmekļa lapu, ir nepieciešama pārlūkprogramma (piemēram, Internet Explorer, Edge, Safari, Firefox vai Chrome). Pārlūkprogrammā varat atvērt tīmekļa lapu, ierakstot adreses josla URL. Piemēram, ierakstot “https://www.computerhope.com/esd.htm”, tiks atvērta ESD Computer Hope lapa.

Ja nezināt tās vietnes URL, kuru vēlaties apmeklēt, varat izmantot meklētājs lai atrastu tīmekļa lapu vai izmantotu vietnes meklēšanu.

Kad tika izveidota pirmā tīmekļa lapa?

Pirmo tīmekļa lapu CERN izveidoja Tims Berners-Lī 1991. gada 6. augustā. Pirms tam varat apmeklēt un apskatīt pirmo vietni un pirmo tīmekļa lapu vietnē http://info.cern.ch/.

Kāda ir atšķirība starp vietni un tīmekļa lapu?

Vietne ir vieta, kurā ir vairāk nekā viena tīmekļa lapa. Piemēram, mūsu resurss ir vietne, kas ietver tūkstošiem dažādu tīmekļa lapu, tostarp to, kuru pašlaik lasāt:

Iepriekš minētajā URL piemērā "url.htm" ir tīmekļa lapa, tā vienmēr ir URL pēdējā daļa. URL, kas nebeidzas ar .htm, .html, .php, .cgi, .pl vai citu faila paplašinājumu, serveris pēc noklusējuma ielādē tīmekļa lapu index.htm. Piemēram, kontaktu lapas URL nav tīmekļa lapas. Šajā gadījumā noklusējuma indeksa fails tiek ielādēts no /contact direktorijas.

Web lapu piemēri

Mēs jau minējām, ka tīmekļa lapu apskatei tiek izmantotas pārlūkprogrammas. Tīmekļa lapa sastāv no vairākiem elementiem, tostarp CSS, attēliem un JavaScript. Tīmekļa lapas pamatteksts ir izveidots ar izmantojot HTML. Šo kodu var izveidot, izmantojot HTML redaktoru, rakstīt cilvēks vai ģenerēt, izmantojot servera puses skriptus. Parasti cilvēka izveidota tīmekļa lapa beidzas ar .htm vai .html paplašinājumu. Piemēram, šīs lapas faila nosaukums ir “webpage.htm”. Skripta ģenerētās lapas var beigties ar .cgi, .php, .pl utt.

Kādus elementus satur tīmekļa lapa?

Tālāk ir sniegts galveno elementu sadalījums, lai tīmekļa dizaineri varētu saprast, ko loģiskā struktūra tīmekļa lapas:

Vietnes nosaukums, logotips vai uzņēmuma nosaukums gandrīz vienmēr ir atrodams katras tīmekļa lapas augšējā kreisajā stūrī. Tāpat ir lietderīgi izmantot saukli vai Īss apraksts lapas, lai jaunajiem apmeklētājiem sniegtu priekšstatu par vietni. Šis tīmekļa lapas elements parasti ir saite, kas ved uz sākumlapu;

Meklēšanas josla ļauj apmeklētājiem ātri atrast tīmekļa lapu. Tam jābūt katrā lapā;

Navigācijas josla vai izvēlne parasti atrodas katras tīmekļa lapas augšdaļā vai kreisajā pusē. Tajā jāiekļauj saites uz katru no galvenajām vietnes sadaļām;

Reklāmkarogu reklāmas var parādīties dažādās tīmekļa lapas vietās. Tie parasti tiek parādīti tīmekļa lapas augšpusē, kreisajā, labajā vai apakšā vai iekļauti galvenajā saturā;

Sociālās pogas ļauj apmeklētājiem kopīgot saiti uz tīmekļa lapu sociālo tīklu vietnēs;

Izveidotajās tīmekļa lapās rīvmaize palīdz apmeklētājam saprast, kur viņš atrodas, kā arī pāriet uz citām vietnes sadaļām;

Virsrakstam jābūt katras tīmekļa lapas augšpusē. Tas tiek izveidots, izmantojot HTML tagu.

Sākuma rindkopa ir viens no svarīgākajiem tīmekļa lapas elementiem. Apmeklētāju vajadzētu ieinteresēt lasīt tīmekļa lapas saturu. Viens veids, kā piesaistīt apmeklētāju uzmanību, ir ievietot attēlu blakus sākuma rindkopai;

Katra tīmekļa lapa ir jāsadala zemāka līmeņa virsrakstos, kas ļauj apmeklētājam viegli skenēt saturu un atrast lapā to, kas viņu interesē. Veidojot tīmekļa lapu, to var izdarīt, izmantojot HTML tagus...;

Ieteicams apmeklētājiem nodrošināt saiti vai pogu, kas novirza uz veidlapu. atsauksmes lai viņi varētu jums pateikt, vai tas viņiem bija noderīgi šī tīmekļa lapa vai nē;

Lietotājiem var būt noderīga arī papildu informācija un rīki, piemēram, poga lapas drukāšanai;

Kājenē jāiekļauj Papildus informācija, kas ir svarīgi uzņēmumam vai vietnei. Kā arī saites uz citām interneta lapām;

Autortiesības un visi juridiskie vai konfidenciālie paziņojumi arī ir jāpublicē visās tīmekļa lapās. Tīmekļa lapu dizaina pamatos šis elements var ne tikai izveidot saiti uz atbilstošu juridisko informāciju. Tas arī norāda, ka apmeklētāji ir sasnieguši tīmekļa lapas beigas;

Lapas augšdaļas poga var palīdzēt apmeklētājiem ātri pārvietoties atpakaļ uz tīmekļa lapas sākumu, lai piekļūtu izvēlnes saitēm.

Ko lietotāji var darīt tīmekļa lapā?

Lielākajā daļā tīmekļa lapu ir interesantas hipersaites, uz kurām noklikšķiniet, lai atrastu vairāk informācijas. Varat arī klausīties mūziku, skatīties videoklipus, veikt pirkumus, tērzēt un daudz ko citu.

Pirms sākam HTML un CSS vietņu veidošanas nodarbības, ir svarīgi saprast atšķirības starp abām valodām, katras valodas sintaksi un dažus pamata terminus.

Kas ir HTML un CSS?

HTML (HyperText Markup Language) definē satura struktūru un tā nozīmi, definējot saturu, piemēram, virsrakstus, rindkopas vai attēlus. CSS (Cascading Style Sheets) jeb kaskādes stila lapas ir prezentācijas valoda, kas izveidota projektēšanai izskats saturam, izmantojot, piemēram, fontus vai krāsas.

Šīs divas valodas - HTML un CSS - ir neatkarīgas viena no otras, un tām arī jāpaliek. CSS nedrīkst rakstīt HTML dokumentā un otrādi. Parasti HTML vienmēr attēlo saturu, un CSS vienmēr noteiks stilu.

Izprotot atšķirību starp HTML un CSS, pievērsīsimies HTML sīkāk.

HTML pamatnoteikumi

Pirms sākat strādāt ar HTML, jūs, iespējams, saskarsities ar jauniem un bieži vien dīvainiem terminiem. Laika gaitā jūs iepazīsities ar tiem visiem, taču šobrīd jums vajadzētu sākt ar trim pamata HTML terminiem — elementi, tagi un atribūti.

Elementi

Elementi norāda, kā definēt lapas objektu struktūru un saturu. Daži no parasti izmantotajiem elementiem ietver vairāku līmeņu virsrakstus (definēti kā elementi no līdz ) un rindkopas (definētas kā

); Sarakstā varat iekļaut elementus . . . un daudzi citi.

Elementi tiek identificēti ar leņķa iekavām, kas apņem elementa nosaukumu. Tātad elements izskatīsies šādi:

Tagi

Leņķa kronšteinu pievienošana< и >izveido tā saukto tagu ap elementu. Tagi visbiežāk sastopami atvēršanas un aizvēršanas tagu pāros.

Sākuma tags iezīmē elementa sākumu. Tas sastāv no simbola ; Piemēram, .

Noslēguma atzīme iezīmē elementa beigas. Tas sastāv no simbola< с последующей косой чертой и именем элемента и завершается символом >; Piemēram, .

Saturs, kas parādās starp sākuma un beigu tagiem, ir šī elementa saturs. Piemēram, saitei būs sākuma tags un noslēdzošais tags. Tas, kas atrodas starp šiem diviem tagiem, būs saites saturs.

Tātad saišu tagi izskatīsies apmēram šādi:

...

Atribūti

Atribūti ir rekvizīti, ko izmanto, lai sniegtu papildu informāciju par elementu. Visizplatītākie atribūti ietver atribūtu id, kas identificē elementu; klases atribūts, kas klasificē elementu; atribūts src, kas norāda iegultā satura avotu; un href atribūts, kas norāda saiti uz saistīto resursu.

Atribūti tiek definēti sākuma tagā aiz elementa nosaukuma. Parasti atribūti ietver nosaukumu un vērtību. Šo atribūtu formāts sastāv no atribūta nosaukuma, kam seko vienādības zīme, kam seko atribūta vērtība pēdiņās. Piemēram, elements ar href atribūtu izskatīsies šādi:

Šejs Hovs

HTML pamata terminu demonstrēšana

Šis kods tīmekļa lapā parādīs tekstu "Shay Howe", un, noklikšķinot uz šī teksta, lietotājs tiks novirzīts uz vietni http://shayhowe.com. Saites elements tiek deklarēts, izmantojot sākuma tagu un noslēdzošais tags kas aptver tekstu, kā arī saites adreses atribūtu un vērtību, kas norādīta, izmantojot sākuma tagu, izmantojot href="http://shayhowe.com".

Rīsi. 1.01. HTML sintakse kontūras formā ietver elementu, atribūtu un tagu

Tagad, kad zināt, kas ir HTML elementi, tagi un atribūti, apskatīsim mūsu pirmo tīmekļa lapu. Ja kaut kas šeit izskatās jauns, neuztraucieties — mēs to sadalīsim.

HTML dokumenta struktūras pielāgošana

HTML dokumenti ir vienkārši teksta dokumenti, kas saglabāti ar paplašinājumu .html, nevis .txt. Lai sāktu rakstīt HTML, vispirms ir nepieciešams teksta redaktors, kas jums ir ērti lietojams. Diemžēl tas neietver Microsoft Word vai Pages, jo tie ir sarežģīti redaktori. Divi populārākie teksta redaktori HTML un CSS rakstīšanai ir Dreamweaver un Cildens teksts. Bezmaksas alternatīvas ietver arī Notepad++ operētājsistēmai Windows un TextWrangler operētājsistēmai Mac.

Visi HTML dokumenti satur nepieciešamo struktūru, kas ietver šādas deklarācijas un elementus: , , un .

Dokumenta tipa deklarācija vai atrodas HTML dokumenta pašā sākumā un norāda pārlūkprogrammām, kura HTML versija tiek izmantota. Tā kā mēs izmantosim jaunāko HTML versiju, mūsu dokumenta veids būs vienkārši . Pēc tam parādās elements, kas norāda dokumenta sākumu.

Elementa iekšpusē definē augšējā daļa dokuments, tostarp dažādi metadati (pavadošā informācija par lapu). Elementa saturs netiek parādīts pašā tīmekļa lapā. Tā vietā tas var ietvert dokumenta nosaukumu (kas parādās pārlūkprogrammas loga virsrakstjoslā), saites uz ārējiem failiem vai citus noderīgus metadatus.

Viss redzamais tīmekļa lapas saturs tiks ietverts elementā. Tipiska HTML dokumenta struktūra izskatās šādi:

Sveika pasaule! Sveika pasaule!

Šī ir tīmekļa lapa.

HTML dokumentu struktūras demonstrēšana

Šis kods parāda dokumentu, sākot ar dokumenta tipa deklarāciju, un pēc tam tūlīt pēc tam. Iekšpusē ir elementi un . Elements satur lapas kodējumu caur tagu un dokumenta nosaukumu caur elementu. Elements ietver virsrakstu caur elementu un teksta rindkopu, izmantojot . Tā kā gan virsraksts, gan rindkopa ir ligzdoti elementā, tie ir redzami tīmekļa lapā.

Ja elements atrodas citā elementā, kas pazīstams arī kā ligzdots, ieteicams tam pievienot atkāpi, lai dokumenta struktūra būtu labi sakārtota un lasāma. Iepriekšējā kodā abi elementi ir gan ligzdoti, gan nobīdīti . Elementu atkāpes struktūra turpinās ar jauniem elementiem, kas pievienoti iekšpusē un .

Pašaizvēršanās elementi

Iepriekšējā piemērā elements bija vienīgais tags, kas neietvēra noslēguma tagu. Neuztraucieties, tas tika darīts apzināti. Ne visi elementi sastāv no atvēršanas un aizvēršanas tagiem. Daži elementi vienkārši saņem saturu vai darbību, izmantojot atribūtus vienā tagā. ir viens no šiem elementiem. Elementa saturs piemērā tiek piešķirts, izmantojot charset atribūtu un vērtību. Pie citiem tipiskiem pašaizvēršanās elementiem pieder:

• 
  

Šāda struktūra, kas izveidota, izmantojot dokumenta tipa deklarāciju un elementus , un , ir diezgan izplatīta. Mēs vēlamies saglabāt šo dokumentu struktūru ērtu, jo mēs to bieži izmantosim, veidojot jaunus HTML dokumentus.

Koda apstiprināšana

Neatkarīgi no tā, cik rūpīgi mēs rakstām savu kodu, kļūdas ir neizbēgamas. Par laimi, rakstot HTML un CSS, mums ir pārbaudītāji, lai pārbaudītu mūsu darbu. W3C piedāvā HTML un CSS pārbaudītājus, kas skenē kļūdas kodu. Pārskatot mūsu kodu, tas ne tikai palīdz pareizi atveidot to visās pārlūkprogrammās, bet arī palīdz mācīt koda rakstīšanas paraugpraksi.

Par praksi

Kā tīmekļa dizaineriem un priekšgala izstrādātājiem mums ir greznība apmeklēt vairākas lieliskas konferences, kas veltītas mūsu amatniecībai. Mēs organizēsim paši savu stilu konferenci un nākamo nodarbību laikā izveidosim tai vietni. Kā šis!

Pārslēgsim pārnesumus nedaudz prom no HTML un apskatīsim CSS. Atcerieties, ka HTML nosaka mūsu tīmekļa lapu saturu un struktūru, savukārt CSS nosaka to vizuālo stilu un izskatu.

CSS pamatnoteikumi

Papildus HTML terminiem ir daži pamata CSS termini, kas jums jāiepazīst. Šie termini ietver atlasītājus, rekvizītus un vērtības. Tāpat kā ar HTML terminoloģiju, jo vairāk jūs strādājat ar CSS, jo vairāk šie termini kļūst par otro dabu.

Selektori

Pievienojot tīmekļa lapai elementus, tos var veidot ar izmantojot CSS. Atlasītājs nosaka, kuram HTML elementam vai elementiem atlasīt mērķauditoriju un piemērot stilus (piemēram, krāsu, izmēru un pozīciju). Atlasītāji var ietvert dažādu metrikas kombināciju, lai atlasītu unikālus elementus atkarībā no tā, cik specifiski mēs vēlamies būt. Piemēram, mēs vēlamies atlasīt katru lapas rindkopu vai atlasīt tikai vienu konkrētu rindkopu.

Atlasītāji parasti ir saistīti ar atribūta vērtību, piemēram, ID vai klases vērtību, vai elementa nosaukumu, piemēram, vai .

CSS atlasītāji tiek apvienoti ar krokainajām iekavām (), kas ietver stilus, kas tiek lietoti atlasītajam elementam. Šis atlasītājs ir paredzēts visiem elementiem

P(...)

Īpašības

Kad elements ir atlasīts, rekvizīts nosaka stilus, kas tam tiks lietoti. Rekvizītu nosaukumi ir aiz atlasītāja, cirtainu iekavās () un tieši pirms resnās zarnas. Mēs varam izmantot daudzus rekvizītus, piemēram, fonu, krāsu, fonta lielumu, augstumu un platumu un citus bieži pievienotos rekvizītus. Nākamajā kodā mēs definējam krāsu un fonta lieluma rekvizītus, kas attiecas uz visiem elementiem

P ( krāsa: ...; fonta lielums: ...; )

Vērtības

Līdz šim elementu esam atlasījuši tikai, izmantojot atlasītāju, un noteikuši, kuru stilu mēs vēlētos tam piemērot, izmantojot rekvizītus. Tagad mēs varam iestatīt šī īpašuma darbību, izmantojot vērtību. Vērtības var norādīt kā tekstu starp kolu un semikolu. Zemāk mēs atlasām visus elementus

Un iestatiet krāsas rekvizīta vērtību uz oranžu un fonta lieluma rekvizītu vērtību uz 16 pikseļiem.

P (krāsa: oranža; fonta izmērs: 16 pikseļi;)

Lai to pārbaudītu, CSS mūsu kārtulu kopa sākas ar atlasītāju, kam tūlīt seko cirtaini iekavas. Šajos krokainās iekavās ir deklarācijas, kas sastāv no rekvizītu un vērtību pāriem. Katra deklarācija sākas ar rekvizītu, kam seko kols, īpašuma vērtība un visbeidzot semikolu.

Izplatīta prakse ir pārvietot īpašību un vērtību pārus cirtainajās lencēs. Tāpat kā HTML gadījumā, atkāpe palīdz uzturēt mūsu kodu sakārtotu un skaidru.

Rīsi. 1.03. CSS sintakses struktūra ietver atlasītāju, rekvizītus un vērtības

Pārzinot dažus pamatjēdzienus un vispārīgu CSS sintakse, tas ir lielisks sākums, taču mums ir jāaptver vēl daži punkti, pirms ienirt dziļumos. Jo īpaši mums ir sīkāk jāizpēta, kā atlasītāji darbojas CSS.

Darbs ar selektoriem

Atlasītāji, kā minēts iepriekš, norāda, kuri HTML elementi tiks veidoti. Ir svarīgi pilnībā saprast, kā lietot selektorus un kā tie darbojas. Pirmajam solim vajadzētu būt iepazīšanai dažādi veidi atlasītāji. Sāksim ar visvienkāršākajiem atlasītājiem: veida, klases un identifikatora atlasītājiem.

Tipu atlasītāji

Tipu atlasītāju mērķauditorija tiek atlasīti elementi pēc to veida. Piemēram, ja vēlamies mērķēt uz visiem elementiem, mums jāizmanto div atlasītājs. Šis kods parāda elementu tipa atlasītāju, kā arī atbilstošo HTML.

Div(...)

... ...

Klases

Klases ļauj atlasīt elementu, pamatojoties uz klases atribūta vērtību. Klašu atlasītāji ir nedaudz specifiskāki nekā tipu atlasītāji, jo tie atlasa noteiktu elementu grupu, nevis visus viena veida elementus.

Klases ļauj vienlaikus lietot vienus un tos pašus stilus dažādiem elementiem, vairākiem elementiem izmantojot vienu un to pašu klases atribūta vērtību.

CSS lietotnē klases tiek attēlotas ar sākuma punktu, kam seko klases atribūta vērtība. Zemāk klases atlasītājs atlasa visus elementus, kas satur satriecošā klases atribūta vērtību, tostarp elementus un

Satriecošs(...)

...

Identifikatori

Identifikatori ir pat precīzāki par klasēm, jo ​​tie vienlaikus ir mērķēti tikai uz vienu unikālu elementu. Tāpat kā klases atlasītāji izmanto klases atribūta vērtību, identifikatori izmanto atribūta id vērtību kā atlasītāju.

Neatkarīgi no attēlotā elementa veida atribūta id vērtību var izmantot tikai vienu reizi lapā. Ja ir ID, tie ir jārezervē svarīgiem elementiem.

CSS sistēmā identifikatori tiek attēloti ar hash simbolu priekšā, kam seko id atribūta vērtība. Šeit ID atlasīs tikai to elementu, kas satur id atribūtu ar vērtību shayhowe .

#shayhoe ( ... )

...

Papildu atlasītāji

Selektori ir ārkārtīgi spēcīgas lietas, un iepriekš aprakstītie atlasītāji ir vieni no visbiežāk sastopamajiem atlasītājiem, ar kuriem mēs sastopamies. Šie atlasītāji ir tikai sākums. Ir pieejami daudzi uzlaboti atlasītāji, un tie ir viegli pieejami. Kad esat apmierināts ar tiem, nebaidieties pārbaudīt dažus no uzlabotākajiem.

Labi, sāksim visu likt kopā. Mēs pievienojam elementus lapai mūsu HTML iekšpusē, pēc tam varam atlasīt šos elementus un veidot to stilu, izmantojot CSS. Tagad savienosim punktus starp HTML un CSS, lai abas valodas darbotos kopā.

CSS pievienošana

Lai mūsu CSS runātu ar mūsu HTML, mums jānorāda uz CSS failu no HTML. Laba prakse ir iekļaut visus mūsu stilus vienā ārējā failā, kas norādīts mūsu HTML dokumenta elementā. Izmantojot vienu ārēju CSS, mēs varam lietot vienādus stilus visā vietnē un ātri veikt tajā izmaiņas.

Citas CSS pievienošanas iespējas

Citas CSS iekļaušanas iespējas ietver iekšējo un iekļauto stilu izmantošanu. Jūs varat saskarties ar šīm iespējām patiesībā, taču tās parasti tiek noraidītas, jo tās padara vietņu atjaunināšanu apgrūtinošu un apgrūtinošu.

Lai izveidotu savu ārējo stila lapu, mēs atkal vēlamies izmantot mūsu izvēlēto teksta redaktoru, lai izveidotu jaunu teksta fails ar paplašinājumu .css. Mūsu CSS fails ir jāsaglabā tajā pašā mapē vai apakšmapē, kurā ir mūsu HTML fails.

Elementa iekšpusē tiek izmantots elements, kas nosaka attiecības starp HTML un CSS failiem. Tā kā mēs veidojam saiti ar CSS, mēs izmantojam atribūtu rel ar stila lapas vērtību, lai norādītu to saistību. Turklāt atribūts href tiek izmantots, lai norādītu CSS faila atrašanās vietu vai ceļu.

Nākamajā HTML dokumenta piemērā elements norāda uz ārēju stila lapu.

Lai CSS atveidotu pareizi, atribūta href ceļa vērtībai ir tieši jāatbilst CSS faila glabāšanas vietai. Iepriekšējā piemērā fails main.css tiek glabāts tajā pašā vietā, kur HTML fails, kas pazīstams arī kā saknes mape.

Ja CSS fails atrodas apakšmapē, tad atribūta href vērtībai ir attiecīgi jāatbilst šim ceļam. Piemēram, ja mūsu main.css fails tika saglabāts apakšmapē ar nosaukumu stylesheets, tad atribūta href vērtība būtu stylesheets/main.css. Tas izmanto slīpsvītru (vai slīpsvītru), lai norādītu uz pārvietošanu uz apakšmapi.

Ieslēgts Šis brīdis mūsu lapas sāk atdzīvoties, lēnām, bet noteikti. Mēs vēl neesam pārāk dziļi iedziļinājušies CSS, taču, iespējams, esat ievērojuši, ka dažiem elementiem ir stili, kurus mēs savā CSS nedeklarējām. Tā ir pārlūkprogramma, kas šiem elementiem uzliek savus vēlamos stilus. Par laimi, mēs varam diezgan viegli pārrakstīt šos stilus, ko mēs darīsim tālāk, izmantojot CSS atiestatīšanu.

Izmantojot CSS atiestatīšanu

Katrai pārlūkprogrammai ir savi noklusējuma stili dažādiem elementiem. Kā Google Chrome parāda virsrakstus, rindkopas, sarakstus un tā tālāk, var atšķirties no tā, kā to dara Internet Explorer. Lai nodrošinātu vairāku pārlūkprogrammu saderību, CSS atiestatīšana ir kļuvusi plaši izmantota.

Atiestatīt CSS ņem visus pamata HTML elementus no dots stils un nodrošina konsekventu stilu visām pārlūkprogrammām. Šīs atiestatīšanas parasti ietver izmēru, polsterējuma, piemaļu vai papildu stilu noņemšanu, kas samazina šīs vērtības. Tā kā CSS kaskāde darbojas no augšas uz leju (par to drīz uzzināsit), mūsu atiestatīšanai vajadzētu būt mūsu stila pašā augšgalā. Tas nodrošina, ka šie stili tiek lasīti vispirms, un tas arī viss. dažādas pārlūkprogrammas sāks strādāt no kopīga atskaites punkta.

Ir pieejamas dažādas CSS atiestatīšanas iespējas, kurām visiem ir savs stiprās puses. Viens no populārākajiem no Eric Meyer, viņa CSS atiestatīšana ir pielāgota, lai iekļautu jaunus HTML5 elementus.

Ja jūs jūtaties mazliet piedzīvojumu kārs, ir pieejams arī Normalize.css, ko izveidojis Nikolass Galahers. Normalize.css nekoncentrējas uz visu galveno elementu cieto atiestatīšanu, bet gan uz šo elementu kopīgu stilu iestatīšanu. Tam nepieciešama dziļāka izpratne par CSS, kā arī zināšanas par to, ko vēlaties sasniegt no šiem stiliem.

Saderība starp pārlūkprogrammām un testēšana

Kā minēts iepriekš, dažādas pārlūkprogrammas atveido elementus atšķirīgi. Ir svarīgi apzināties vairāku pārlūkprogrammu saderības un testēšanas nozīmi. Vietnēm nevajadzētu izskatīties vienādi visās pārlūkprogrammās, bet tām jābūt tuvu. Kuras pārlūkprogrammas vēlaties atbalstīt un cik lielā mērā jums būs jāpieņem lēmums, pamatojoties uz to, kas ir vislabākais jūsu vietnei.

Ir vairākas lietas, kurām jāpievērš uzmanība, rakstot CSS. Labā ziņa ir tā, ka jūs varat darīt visu, un ir nepieciešama tikai neliela pacietība, lai to apgūtu.

Par praksi

Atgriezīsimies pie vietas, kur pēdējo reizi pārtraucām mūsu konferences vietni, un redzēsim, kā mēs varam pievienot CSS.

Savā stilu konferences mapē izveidosim jaunu mapi ar nosaukumu aktīvi. Šeit mēs glabāsim visus mūsu vietnes resursus, piemēram, stilus, attēlus, videoklipus utt. Attiecībā uz mūsu stiliem, turpināsim un pievienosim citu stilu lapu mapi īpašumu mapē.

Izmantojot teksta redaktoru, izveidosim jaunu failu ar nosaukumu main.css un saglabāsim to stila lapu mapē, kuru tikko izveidojām.

Apskatot failu index.html pārlūkprogrammā, mēs redzam, ka elementi un

Jau satur noklusējuma stilu. Jo īpaši tiem ir unikāls fonta lielums un vieta ap tiem. Izmantojot Eric Meyer atiestatīšanu, mēs varam mīkstināt šos stilus, ļaujot katram no tiem sākt no vienas bāzes. Lai to izdarītu, apskatiet viņa vietni, nokopējiet kodu un ielīmējiet to faila main.css augšdaļā.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licence: nav (publisks domēns) */ html, pamatteksts, div, span, sīklietotne, objekts, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronīms, adrese, liels, citēt, kods, del, dfn, em, img, ins, kbd, q, s, samp, mazs, streiks, spēcīgs, sub, sup, tt, var, b, u, i, centrs, dl, dt, dd, ol, ul, li, lauka kopa, forma, etiķete, leģenda, tabula, paraksts, tbody, tfoot, thead, tr, th, td, raksts, malā, audekls, informācija, iegult, figūra, attēla paraksts, kājene, galvene, hgroup, izvēlne, navigācija, izvade, rubīns, sadaļa, kopsavilkums, laiks, atzīme, audio, video (piemale: 0; polsterējums: 0; apmale: 0; fonta izmērs: 100%; fonts: mantot; vertikālā līdzināšana: bāzes līnija ; ) /* HTML5 attēlojuma lomas atiestatīšana vecākām pārlūkprogrammām */ raksts, malā, informācija, uzraksts, attēls, kājene, galvene, hgrupa, izvēlne, navigācija, sadaļa ( displejs: bloks; ) pamatteksts ( līnijas augstums: 1; ) ol, ul ( saraksta stils: nav; ) blockquote, q ( pēdiņas: nav; ) blockquote:before, blockquote:after, q:before, q:after ( saturs: ""; saturs: nav; ) tabula ( apmale- sabrukt: sabrukt; apmales atstarpe: 0; )

Mūsu main.css fails sāk veidoties, tāpēc savienosim to ar failu index.html. Atveriet index.html teksta redaktors un pievienojiet elementu , tieši aiz elementa.

Tā kā mēs norādām uz stiliem, izmantojot elementu, pievienojiet atribūtu rel ar vērtību stila lapu .

Mēs iekļausim arī saiti uz mūsu main.css failu, izmantojot atribūtu href. Atcerieties, ka mūsu main.css fails tiek saglabāts stilu lapu mapē, kas atrodas īpašumu mapē. Tātad atribūta href, kas ir ceļš uz mūsu main.css failu, vērtībai jābūt aktīviem/stylesheets/main.css.

Stilu konference

Laiks pārbaudīt mūsu darbu un redzēt, kā mūsu HTML un CSS darbojas kopā. Atverot failu index.html (vai atsvaidzinot lapu, ja tas jau ir atvērts) pārlūkprogrammā, vajadzētu parādīt nedaudz savādāku rezultātu nekā iepriekš.

Rīsi. 1.04. Mūsu Styles Conference vietne ar CSS atiestatīšanu

Demonstrācija un avots

Zemāk varat apskatīt Styles Conference vietni tās pašreizējā stāvoklī, kā arī lejupielādēt vietnes pašreizējo pirmkodu.

Kopsavilkums

Tātad, viss ir kārtībā! Šajā apmācībā mēs spērām dažus lielus soļus.

Iedomājieties, tagad jūs zināt HTML un CSS pamatus. Turpinot un pavadot vairāk laika HTML un CSS rakstīšanai, jums būs daudz ērtāk strādāt ar šīm divām valodām.

Atgādinot, mēs apskatījām sekojošo:

• Atšķirība starp HTML un CSS.
• Ievads HTML elementos, tagos un atribūtos.
• Pirmās tīmekļa lapas struktūras iestatīšana.
• Ievads CSS selektoros, rekvizītos un vērtībās.
• Darbs ar CSS atlasītājiem.
• Rādītājs uz CSS no HTML.
• CSS atiestatīšanas nozīme.

Tagad apskatīsim tuvāk HTML un iepazīsimies ar semantiku.

Resursi un saites

• Izplatīti HTML termini, izmantojot Scripting Master
• CSS termini un definīcijas, izmantojot iespaidīgos tīmekļa vietnes
• CSS rīki: atiestatiet CSS, izmantojot Ēriku Mejeru

Darba mērķis: iepazīstināt studentus ar HTML valodas pamatjēdzieniem, HTML dokumenta uzbūvi, obligātajiem tagiem, komentāriem, teksta formatēšanas metodēm, fiziskajiem un loģiskajiem stiliem un iemaņu apguvi vienkāršu statisku Web dokumentu veidošanā.

Laboratorijas nodarbībās HTML failu sagatavošanai izmantosim Notepad teksta redaktoru, bet kā rīku paveiktā pārraudzībai pārlūkprogrammu Internet Explorer.

Teorētiskā informācija

Pamatjēdzieni

Hiperteksts- informācijas struktūra, kas ļauj izveidot semantiskas savienojumus starp teksta elementiem datora ekrānā tā, lai jūs varētu viegli pāriet no viena elementa uz citu. Praksē hipertekstā daži vārdi tiek izcelti, pasvītrojot vai iekrāsojot tos citā krāsā (hipersaites). Vārda izcelšana norāda uz saistību starp šo vārdu un kādu dokumentu, kurā ar izcelto vārdu saistītā tēma tiek apspriesta sīkāk. Atsevišķs dokuments, kas rakstīts HTML formātā, tiek saukts:

HTML dokuments;

Web dokuments;

Web lapa.

Šādas lapas parasti ir NTM vai HTML formātā.

Web lapu grupa, kas pieder vienam autoram vai vienam IEDV korpusam un ir savstarpēji savienotas ar kopīgām hipersaitēm, veido struktūru, ko sauc par Web mezglu vai vietni. Katrai HTML lapai ir savs unikāls URL — adlppec internetā.

Rāmis (Rāmis) - termins, kam ir divas nozīmes. Pirmā vērtība ir dokumenta apgabals ar savām ritjoslām. Otrais ir 0DNN0H attēls animētā grafiskā failā (rāmī).

Sīklietotne (Sīklietotne) - uz klienta datoru formā pārsūtīta programma atsevišķu failu un tiek palaists, skatot Web lapu.

Skripts (Skripts) , vai skripts, ir programma, kas iekļauta tīmekļa lapā, lai paplašinātu tās iespējas. Dažās situācijās pārlūkprogramma Internet Explorer parāda ziņojumu: "Atļaut skripta izpildi lapā?" Šajā gadījumā mēs domājam skriptus.

CGI (Bieži Vārteja Interfeiss) - vispārīgs nosaukums programmām, kuras, strādājot uz servera, ļauj paplašināt Web lapu iespējas. Bez šādām programmām nav iespējams izveidot interaktīvas Web lapas.

Pārlūkprogramma (Pārlūkprogramma) - programma Web lapu apskatei.

Elements- HTML valodas dizains. Varat to uzskatīt par konteineru, kurā ir dati un kas ļauj tos formatēt noteiktā veidā. Jebkura Web lapa ir elementu kopums. Viena no galvenajām hiperteksta idejām ir elementu ligzdošanas iespēja. Piemēram:

Elementa saturs, dati, kurus elements formatē

Tag(angļu valodā tag - etiķete, deskriptors, etiķete) - elementa sākuma vai beigu marķieris. Tagi nosaka elementu darbības robežas un atdala elementus vienu no otra. Web lapas tekstā atzīmes ir ievietotas leņķa iekavās< >, un beigu tagam vienmēr seko slīpsvītra. Teksts nav starp šīm iekavām (< >), ir pilnībā redzams, skatoties pārlūkprogrammā. Piemēram:

Elementa saturs, dati, kas

formatē elementu

Šis teksts tiks ievietots atsevišķā rindkopā

Jebkura Web lapa ir elementu kopums. Viens no HTML pamatprincipiem ir spēja ievietot vienu elementu citā.

Atribūts- elementa parametrs vai īpašība. Atribūti atrodas sākuma taga iekšpusē un ir atdalīti viens no otra ar atstarpēm. Ja cementā ir teksts, tad atribūti var norādīt fonta krāsu un izmēru, teksta rindkopu līdzinājumu utt. Ja elements satur attēlu, atribūti var norādīt attēla izmēru, rāmja esamību un izmēru ap attēlu utt.

Šis teksts tiks līdzināts ekrāna centram

Šajā piemērā atkal tiek izmantots tags, kas nosaka rindkopas sākumu un beigas. Tomēr sākuma tagā ir līdzināšanas atribūts, kas iestata teksta līdzinājumu ekrāna centrā.

Piezīme:

Jebkurš noderīga informācija jāatrodas starp sākuma un beigu tagiem, kas norāda tā formātu;

Visi atribūti atrodas sākuma tagā;

Lietošanas ērtībai sākuma tagu varat rakstīt ar lielo (lielo) burtu (P), bet beigu tagu ar mazo (mazo) burtu (/p), lai gan tas nav nepieciešams;

Ne visiem elementiem ir nepieciešams beigu (noslēguma) tags;

Sāciet rakstīt katru jauno elementu ar jauna līnija. Ligzdoto elementu atkāpe (cilne). Tas atkal nav nepieciešams, taču tas ievērojami atvieglos jūsu darbu.

Kad lejupielādējat jebkuru dokumentu no WWW, tā teksts pārlūkprogrammas logā tiek parādīts perfekti formatētā, viegli pārskatāmā formā. Tas nozīmē, ka WEB lapas nav parasts teksts, bet satur arī papildu informāciju, lai kontrolētu dokumenta prezentāciju pārlūkprogrammas logā. Tā kā, izstrādājot dokumentu, nav skaidrs, uz kāda veida dators lietotājs to skatīs, WEB lapas nevar sagatavot un uzglabāt konkrētai datora platformai izstrādātā formātā, piemēram, Microsoft Word formātā priekš Windows XP. Lai lietotājs, kas strādā pie jebkura veida datora, redzētu attiecīgi formatētu dokumentu, tiek izmantota speciāli šim nolūkam izstrādāta HTML valoda.

Kas īsti ir HTML?

Ja strādājat ar pārlūkprogrammu, tad izvēlieties izvēlnes komandu View - View HTML code (View - Source). Displejā parādīsies logs ar šīs lapas sākotnējo kodu HTML formātā.

Vai nu nospiediet taustiņu kombināciju CTRL+U

WEB lapu izskats internetā bieži mainās. Bet mums šobrīd tas nav būtiski.

HTML — hiperteksta iezīmēšanas valoda

HTML — hiperteksta iezīmēšanas valoda ir diezgan izplatīta komandu kopa, kas apraksta dokumenta struktūru. Šī iezīmēšanas valoda ļauj izcelt atsevišķas loģiskās daļas dokumentā – virsrakstus, rindkopas, tabulas, sarakstus utt., bet nenorāda konkrētus formatēšanas atribūtus. Konkrēto formatējuma veidu nosaka pati pārlūkprogramma, lasot dokumentu, un pārlūkprogramma to īpaši nodrošina labāks displejs WEB dokuments jūsu ekrānā.

Kā jau minēts iepriekš, WEB lapas var izveidot, izmantojot īpašas redaktora programmas, kas automātiski ģenerē HTML kodu, ar kuru darbam nav nepieciešamas iezīmēšanas valodas zināšanas. Taču šo programmu iespējas bieži ir ierobežotas, tajās ir kļūdas un tās bieži rada sliktu HTML kodu, kas nedarbojas visās platformās. Tāpēc, ja vēlies nopietni apgūt WEB dizainu un izprast WEB dokumentu veidošanas principus, neiztikt bez HTML valodas pamatiem, jo ​​īpaši tāpēc, ka izveidot WEB lapas uz tās nemaz nav grūti. Varbūt tas ir pat vienkāršāk nekā apgūt HTML lapu izveides programmu.

HTML valoda

HTML valodai ir vairāki varianti vai specifikācijas. Tāpat kā programmatūras produktu versijas, specifikācijas ir numurētas: 2.0, 3.0, 3.2, 4.0. Jebkura turpmākā specifikācija ir paplašinājums un papildinājums iepriekšējai specifikācijai. Mēs izmantosim pēdējās konstrukcijas HTML specifikācijas 4.0, kas tiek atbalstīti jaunākās versijas visizplatītākās pārlūkprogrammas.

Dokuments HTML koda logā ir teksta dokuments īpašā formātā. Visiem failiem šajā formātā ir HTML paplašinājums(.html) vai HTM (.htm). HTML dokumentā tiek sajaukts vienkāršs teksts ar iezīmēšanas elementiem, kas ievietoti leņķiekavās< и >, Piemēram, , , , . Šos iezīmēšanas elementus sauc par tagiem. Tagi var būt atsevišķi, atverami un aizverami un sastāv no nākamajām daļām noteiktā secībā:

• kreisā leņķa kronšteins.

Tādējādi sākuma tags, kas parādās HTML dokumenta sākumā un iezīmē tā sākumu, sastāv no HTML nosaukuma un divām leņķa iekavām.< >, un tagā, kas atrodas WEB dokumenta beigās, papildus norādītajām daļām ir arī slīpsvītra / zīme, kas nozīmē beigu tagu un norāda dokumenta beigas. Tags nozīmē dokumentā integrētās skripta programmas koda sākumu. Šis tags papildus skripta nosaukumam satur valodas atribūtu ar vērtību "vbscript", kas nozīmē, ka skripts ir uzrakstīts vbscript valodā.

Tagos var izmantot tikai latīņu rakstzīmes, un atribūtu vērtībās var izmantot jebkuras rakstzīmes. Ja, piemēram, kirilicas rakstzīmes tiek izmantotas kā atribūtu vērtības, tās jāliek pēdiņās, piemēram, name="1. sadaļa".

HTML valoda neatšķir lielos un mazos burtus, tāpēc un tagi ir līdzvērtīgi. Taču 2010. gadā w3c konsorcijs, kas uzņēmās atbildību sakārtot lietas HTML valodas specifikācijas jomā, savā jaunākajā versijā nerimstoši iesaka rakstīt tagus ar mazām rakstzīmēm, citiem vārdiem sakot, nozīmīgos nosacījumus. Tāpēc turpmāk mēs izmantosim tagu rakstīšanu ar mazajiem burtiem.

Tagi kā html bāze

Lielākā daļa tagu ir savienoti pārī: sākuma tagam seko atbilstošs beigu tags, un starp tiem ir teksts vai citi tagi, piemēram:

Interneta grāmatu veikals Trīs soļi

Šādos gadījumos divi tagi un starp tiem esošā dokumenta daļa veido bloku, ko sauc HTML elements. Piemēram, daži tagi ir atsevišķi un tiem nav noslēguma atzīmes. Šādi tagi paši par sevi ir HTML elementi.

Lielākajai daļai tagu var būt viens vai vairāki atribūti — raksturlielumi, kas sniedz papildu informāciju par to, kā pārlūkprogrammai jāapstrādā pašreizējais tags. Bet atribūtu var nebūt vispār. Tag atribūts sastāv no nosaukuma, piemēram, līdzinājums, vienādības zīmes = un vērtības, ko norāda rakstzīmju virkne, piemēram, "center": align="center". Atribūtu vērtības parasti tiek liktas pēdiņās. Bet, ja šīs vērtības izmanto tikai latīņu rakstzīmes, ciparus un defises, pēdiņas var izlaist, piemēram: align=center. Taču citātu izlaišana nav ieteicama vairāku apstākļu dēļ, kas saistīti ar gaidāmo HTML integrāciju ar JavaScript un valodām. Tāpēc izveidojiet ieradumu nekavējoties rakstīt atribūtus pēdiņās.

HTML dokumentu struktūra

Katram HTML dokumentam ir noteikta struktūra, kas izskatās šādi:

…

HTML dokumenta struktūrā ir šādi būtiski elementi:

• tagi un , kas iezīmē dokumenta sākumu un beigas;
• galvene atdalīta ar un ;
• pamattekstu ierobežo tagi….

Nosaukumā, ko norobežo ar un tagiem, tiek izmantoti atzīmes ..., lai definētu dokumenta nosaukumu, kam vajadzētu ieskicēt tā saturu un parasti satur mazāk nekā 5–6 vārdus. Šo nosaukumu pārlūkprogrammas parāda programmas darba loga virsrakstjoslā, un robotprogrammatūra, kas apkopo indeksus meklētājprogrammām, identificē dokumentu, izmantojot tā nosaukumu.

Papildus elementam ... galvenē var būt elementi ..., piemēram, lai norādītu informāciju par dokumentu. Sākuma tagā ir iekļauti pāri name=value, kas raksturo dokumenta īpašības, piemēram, dokumenta veidu, šifrēšanu, autorību, atslēgvārdu sarakstu u.c. Šos datus izmanto arī meklētājprogrammas, indeksējot dokumentus.

HTML (hiperteksta iezīmēšanas valoda) ir īpaša valoda formatēšana teksta dokumenti(to sauc arī par dokumentu iezīmēšanas valodu - WWW dokumentu skatītāju). HTML ir diezgan vienkāršs komandu kopums, kas apraksta dokumenta struktūru. HTML ļauj izcelt atsevišķas loģiskās daļas tekstā (virsrakstus, rindkopas, sarakstus u.c.), ievietot Web lapā atsevišķi sagatavotu fotogrāfiju vai attēlu un sakārtot lapā saites saziņai ar citiem dokumentiem.

HTML nenorāda konkrētus un precīzus dokumenta formatēšanas atribūtus, piemēram, Microsoft Word. Konkrēto dokumenta veidu galu galā nosaka tikai programma - pārlūkprogramma savā datorā. Tieši šādas pieejas nepieciešamība ir saistīta ar aparatūras neviendabīgumu un programmatūra datori, kas savienoti ar internetu. HTML arī nav programmēšanas valoda, taču tīmekļa lapās var būt iegultas programmas - skripti ieslēgts Javascript valodas Un Visual Basic Skripts un programmas - sīklietotnes Java valodā.

No skatu punkta Windows lietotājs, Web lapa ir vienkārši *.htm vai *.html fails, kas atrodas interneta serverī lokālais tīkls vai jūsu mašīnas cietajā diskā.

Atcerieties, ka HTML nav programmēšanas valoda, tā ir paredzēta tikai dokumentu marķēšanai. Tie. būtībā radot HTML lapa, jūs vienkārši rediģējat tekstu, izmantojot tagus, līdzīgi kā parastajā teksta redaktorā. Katram tagam ir savs rekvizīts, taču tie visi ir ievietoti leņķiekavās "", piemēram, , .

Visi tagi HTML ir sadalīti divos veidos – savienotos pārī un nesapārotajos. Pārī savienotie tagi ir tie, kuru sākuma tagam ir nepieciešams beigu tags. Aizverošie tagi HTML tiek apzīmēti ar slīpsvītru un rakstīti šādi. Sapārotiem tagiem nav nepieciešama beigu atzīme. Šādu tagu piemērs ir pārtraukums līdz nākamās rindas tagam
. Ir arī obligātie tagi, kas jāizmanto visās lapās, un izvēles tagi, kurus izmanto pēc vēlēšanās.