Koda predloge strani. S širokim okvirjem. Izbirne oznake v HTML5

Lekcija "Kako ustvariti stran HTML" je namenjena postavitvi najpreprostejše spletne strani. Naučili se boste, kako pravilno shraniti datoteko HTML, nastaviti potrebno kodiranje za pravilen prikaz strani HTML v brskalniku ter umestiti besedila, sezname in slike na spletno stran.

Po preučitvi te lekcije se boste že naučili ustvariti prvo spletno stran, kot je prikazano na sliki 1.

Slika 1

1. Struktura html dokumenta

html datoteke imajo pripono .htm oz .html.

Običajno so oznake seznanjene: začetna in končna oznaka. Začetno -<>, končni , na primer

in

Imenuje se tudi oznaka para posoda .

Nekatere oznake nimajo obvezne parne oznake, takšna oznaka se imenuje samski . Takšno oznako zapremo tako, da na primer pred oklepajem zapišemo desno poševnico

Struktura html dokumenta je videti tako (slika 2).

Slika 2

Pojasnila za seznam na sliki 2

V prvi vrstici konstrukt DOCTYPE pomeni enega od standardov postavitve spletne strani.

Med oznakami in vsebuje glavo. Vključuje oblikovanje </b> in <b>. To ime se prikaže v naslovni vrstici brskalnika, ko je dokument naložen (slika 3).

Slika 3

Snemanje pomeni kodiranje cirilice, tako da so črke pravilno prikazane v brskalniku. Če kodiranje ni določeno, so lahko pisave včasih prikazane na naslednji način (slika 4)

Slika 4

Ista stran po vstavitvi kodiranja (slika 5)

Slika 5

Opomba: namesto kodiranja charset="windows-1251" lahko uporabite kodiranje charset=" utf -8" , ki vam omogoča ustvarjanje večjezičnih spletnih mest, saj so v njem prisotni vsi simboli, ki obstajajo na svetu. V tem primeru v Beležnica++ je potrebno pred postavitvijo in shranjevanjemhtml-datoteko izberite v zgornjem meniju Kodiranja - kodiraj v UTF -8 brez BOM (UTF-8 brez BOM)

Ti podatki so dovolj za ustvarjanje prvega dokumenta.

Vaja 1

1. Ustvarite mapo in jo poimenujte mojhiša. Imena vseh map in datotek morajo biti ustvarjena z malimi latiničnimi črkami, Ruskih imen ni mogoče uporabiti. Naj bodo imena kratka in smiselna.

Kodo spletne strani bomo zapisali v beležnici. Bolje je, da ne uporabljate Beležnice, ki je priložena sistemu Windows, ampak bolj "napredne", kot je Notepad ++. Distribucija Beležnica++ je v mapi cd/distr.

2. Odprite Notepad++. Prepričajte se, da je za to nastavljeno kodiranje ANSI v meniju v elementu Kodiranja, nastavite položaj Kodiraj v ANSI.

3. V Notepad++ vnesite kodo iz seznama na sliki 2.

Koda v listingu na sliki 2 nam bo v prihodnje služila kot predloga, da vsakič ne bomo vnašali strukture html dokumenta. Kopirajte konstrukcijo DOCTYPE od tukaj (ni vam je treba zapomniti in zapomniti).

4. Shranite datoteko z imenom template.html v mapi moja hiša, medtem ko je na terenu Vrsta datoteke namestite Vse vrste(Slika 6), sicer se vaša spletna stran kasneje ne bo odprla v brskalniku.

Slika 6

5. Po shranjevanju zaženite vzorec. html dvojni klik. Posledično bo vaša datoteka videti tako (slika 7).

Slika 7

Če ne dobite rezultata, kot je na zgornji sliki, je najverjetneje v kodi napaka. Dovolj je en napačen znak in spletna stran ne bo prikazana pravilno. Znova preverite kodo s seznamom na sliki 2.

6. Znotraj mape moja hiša ustvarite mapo javnosti_ html. To ime je običajno mapa, v kateri je spletno mesto shranjeno, ko je postavljeno na pravo gostovanje (ta mapa se lahko imenuje tudi www).

7. Shranite datoteko vzorec. html v mapi javnosti_ html pod novim imenom glavni. html.

8. Iz mape CD/ html_css_1 odpreti datoteko text_main.txt v Notepad++ in odprite tudi datoteko, shranjeno pod imenom glavni. html

9. Kopirajte celotno besedilo iz datoteke text_main.txt in prilepite v datoteko glavni. html namesto besedne zveze "vsebina spletne strani". V oznaki napišite besedo "dom". Všečkaj to <b><title>domov.

10. Shranite spremembe in si oglejte datoteko glavni. html v brskalniku. Videli boste neoblikovano besedilo. Tudi prelomov vrstic, ki so v izvornem besedilu, brskalnik ne naredi (slika 8).

Slika 8

2. Oblikovanjesplet- stran označenaHTML

Ta vadnica, Kako ustvariti stran HTML, pokriva osnovne oznake, ki se uporabljajo za označevanje spletne strani.

Oznake se uporabljajo za oblikovanje besedila spletne strani. Podrobnejši seznam oznak najdete v mapi CD/ImenikHTML v imeniku html401_en.chm(v zgornjem elementu menija elementi).

Oglejmo si nekaj oznak.

Elementi h 1, h 2, h 3, h 4, h 5, h 6

Strukturiranje telesa dokumenta poteka znotraj elementa < telo> s pomočjo naslovov, ki jih določajo elementi h1, h2, h3, h4, h5, h6.

Elementi naslova so parni, zato morajo imeti odprtino < h1> in zapiranje h1> oznake.

HTML ima šest ravni naslovov: h1 (zgornja), h2, h3, h4, h5 in h6 (spodnja). Funkcija elementov naslovov je podobna običajnim slogom naslovov v urejevalnikih besedil.

Delovanje teh šestih oznak je prikazano na spodnjih slikah. Na eni sliki vir(Slika 9), na drugi - pogled v brskalniku (Slika 10).

Slika 9

Slika 10

Delitev besedila na odstavke

Oznaka < str> nastavi začetek odstavka in vstavi presledek nad odstavkom - zamik za ločitev tega odstavka od prejšnjega.

Prisilni prelom vrstice

Oznaka
vam omogoča, da preostali del besedila odstavka prelijete v naslednjo vrstico. To je neparna oznaka in za razliko od oznake odstavka ne poveča razmika med vrsticami.

Vaja 2

1. Oblikujte naslov "Katalog arhitekturnega oblikovanja" z oznakami

in

.

2. Oblikujte naslov "Projekti za vaš prihodnji dom" z oznakami

in

.

3. Oblikujte naslova "Načrti hiš" in "Hišni prostori" z oznakami

in

.

4. Z oznako razdelite telo besedila na odstavke

Znotraj prvih dveh odstavkov uporabite oznako
prekiniti črto. Kot rezultat bi morala biti vaša koda videti takole (slika 11).

5. Oglejte si rezultat v brskalniku.

Slika 11

Označeni in oštevilčeni seznami

Z orodji HTML lahko ustvarite poljubne sezname: oštevilčene (številske in abecedne) in označene z različni tipi markerji.

Oznaka < ul>…ul> ustvari seznam z oznakami.

Oznaka < ol>…ol> ustvari oštevilčen seznam.

Ločen element seznama kot v

    , kot tudi v
      oblikovan z oznako < li> .

      Vaja 3

      1. Ustvarite oštevilčen seznam pod naslovom "Hišni projekti".

      2. Ustvarite seznam z oznakami pod naslovom Območja hiš. Vaša koda bo videti tako (slika 12).

      Slika 12

      3. Oglejte si stran v brskalniku.

      Sezname je mogoče ugnezditi drug v drugega z uporabo različnih označevalcev.

      Primer ugnezdenega seznama je prikazan na sl. 13

      Vaja 4

      1. Implementirajte kodo, prikazano na sliki 13, v novo datoteko.
      2. Shranite datoteko v mapo moja hiša pod imenom seznam_ vlozh. html. Rezultat na sl. 13

      Slika 13. Primer ugnezdenega seznama

      Slogi pisave

      Oznaka - omogoča prikaz besedila v krepkem tisku.

      Oznaka - omogoča prikaz besedila v ležečem tisku.

      Oznaka - prikaže podčrtano besedilo.

      Na primer:

      V tem primeru se prikaže besedilo krepko poševno vendar ni podčrtano.

      V tem primeru bo besedilo napisano krepko podčrtano poševno .

      Indeksi in nadnapisi

      Oznaka < sub> in sub> vam omogoča, da spustite besedilo pol vrstice pod običajno besedilo.

      Oznaka < sup> in sup> vam omogoča dvig besedila za pol vrstice nad običajnim besedilom. Besedilo med tema oznakama bo prikazano z manjšo pisavo kot običajno besedilo.

      Vaja 5

      1. Oblikujte ime myhouse.ru v krepkem tisku v prvem odstavku (slika 14).

      Slika 14

      2. Besedno zvezo »Več kot 95 % projektov« v drugem odstavku oblikujte s podčrtanim poševnim tiskom (slika 15).

      Slika 15

      3. Oblikujte nadnapise, kjer so uporabljeni kvadratni metri (slika 16).

      Slika 16

      4. Shranite datoteko. Ogled prek brskalnika. Spletna stran bi morala izgledati tako (slika 17).

      Slika 17

      3. Vstavite slike

      V našem članku Kako ustvariti stran HTML si bomo ogledali, kako postaviti slike na spletno stran.

      Oznaka se uporablja za vstavljanje slik. . Zahtevani atribut za to oznako je src(iz angleškega SourCe - vir). Določa pot do grafično datoteko, katerega slika naj bo prikazana na spletni strani.

      Če želite vstaviti sliko, uporabite ukaz

      Na primer: " slika1.jpg" alt="Slika" /> !}

      Atribut alt je potreben, da bo pri ogledu spletne strani v načinu onemogočenih slik namesto manjkajoče slike napis, ki je napisan v atributu alt. Priporočljivo je tudi, da vedno uporabljate nadomestna besedila, saj iskalniki jih pri iskanju slik razčlenijo kot ključne besede.

      Grafične datoteke so lahko v formatu jpg, gif, png in nujno v barvnem modeluRGB.

      Vaja 6

      1. Po seznamu površin hiš na spletno stran vstavite slike projektov koč projekt_1.jpg in projekt_2.jpg iz mape cd/html_css_1 . Če želite to narediti, najprej kopirajte ti dve sliki v mapo, kjer se nahaja datoteka main.html. Koda za vstavljanje slik bo videti tako (slika 18).

      Slika 18

      2. Oglejte si rezultat v brskalniku (slika 19).

      Slika 19

      V bistvu princip uporabe oznakHTMLmora biti jasno. Uporabljajo se po istem principu: če je oznaka kontejnerska oznaka, potem obstajata odpiralna in zapiralna oznaka. Če je oznaka enojna, potem ni zaključne oznake, v tem primeru je desna poševnica napisana pred zaključnim oglatim oklepajem, npr.< št/>. Ne glede na to, ali je oznaka vsebnik ali ena oznaka, lahko vedno pogledate v specifikacijohtml401_ru.chm v razdelku "elementi".

      4. Naslavljanje znotraj spletnega mesta

      V naši prvi vadnici, "Kako ustvariti stran HTML," bomo raziskali koncepte naslavljanja v HTML.

      Razmislite o možnostih naslavljanja, ko morate slike postaviti v datoteko html, ki se lahko nahaja v različnih mapah na spletnem mestu.

      Obstajata dve vrsti naslavljanja:

      • absolutno;
      • relativno.

      Absolutno naslavljanje (z uporabo imen računalniških pogonov) se ne uporablja(slika 20)

      Slika 20

      rabljeno relativno naslavljanje - naslavljanje znotraj dokumenta ali zbirke dokumentov na istem strežniku. Če se želite sklicevati na datoteko znotraj spletnega mesta, morate brskalniku povedati, katero pot naj ubere, da pride do želene datoteke.

      Primer 1

      Slika se nahaja v isti mapi kot dokument HTML (slika 21). To pomeni, da sta slika in datoteka HTML na isti ravni datotečni sistem in dokument HTML lahko takoj priloži sliko. V tem primeru bo vstavljanje slike na spletno stran videti takole.

      / >

      Slika 21

      Praktična naloga7

      Izvedite primer 1 (ustvarite mapo, datoteko doc.html, posnemite poljubno sliko). Slika

      Primer 2

      Slika pic. jpg je v mapi mapo_1 . Dokument HTML se nahaja zunaj mape_1. Tisti. v datotečnem sistemu spletnega mesta se dokument HTML nahaja en nivo višje od slike (slika 22). Vnesti morate folder_1 in priložiti sliko

      Slika 22

      Praktična naloga8

      Izvedite primer 2 (ustvarite mapo, datoteko doc.html, posnemite poljubno sliko). Sliko je treba vstaviti na spletno stran doc.html.

      Primer 3

      Slika pic. jpg je v mapi mapo_1 , ki je v mapi mapo_2 . Dokument HTML se nahaja zunaj teh map (slika 23). Tako je dokument HTML dve ravni višji od slike. Potrebno:

      • vnesite mapo folder_2,
      • nato vnesite mapo folder_1,
      • nato priložite sliko.

      Slika 23

      Praktična naloga9

      Izvedite primer 3 (ustvarite mape, datoteko doc.html, posnemite poljubno sliko). Sliko je treba vstaviti na spletno stran doc.html.

      Primer 4

      mapo_1 . Slika je zunaj mape_1. Tisti. Dokument HTML je en nivo pod sliko (slika 24). Zapustiti morate mapo folder_1 in priložiti sliko. Izhod iz mape je označen s konstrukcijo ../ (dve piki in poševnica na desni).

      / >

      Slika 24

      Praktična naloga10

      Izvedite primer 4 (ustvarite mapo, datoteko doc.html, posnemite poljubno sliko). Sliko je treba vstaviti na spletno stran doc.html.

      Primer 5

      Dokument HTML je v mapi mapo_1 , ki se nahaja v mapi mapo_2 . Slika je zunaj teh map. Tako se dokument HTML nahaja dve ravni nižje od slike (slika 25). Potrebno:

      • izhod iz mape folder_1,
      • izhod iz mape folder_2,
      • priloži sliko.

      Ker je treba dvakrat izstopiti, potem konstrukcija ../ ponovi dvakrat.

      / >

      Slika 25

      Vaja 11

      Izvedite primer 5 (ustvarite mape, datoteko doc.html, posnemite poljubno sliko). Sliko je treba vstaviti na spletno stran doc.html.

      Primer 6 (slika 26)

      Potrebno:

      • izhod iz mape folder_1,
      • izhod iz mape folder_2,
      • pojdite v mapo folder_3,
      • pojdite v mapo folder_4,
      • priloži sliko pic.jpg

      Slika 26

      Vaja 12

      Izvedite primer 6 (ustvarite mape, datoteko doc.html, posnemite poljubno sliko). Slika

      je treba vstaviti na spletno stran doc.html.

      Primer 7 (slika 27)

      Potrebno:

      • izhod iz mape folder_1,
      • izhod iz mape folder_2,
      • izhod iz mape folder_3,
      • vnesite mapo folder_4,
      • priloži sliko pic.jpg.

      Ker morate trikrat izstopiti, potem konstrukcija ../ ponovi trikrat.

      Slika 27

      Vaja 13

      Izvedite primer 7 (ustvarite mape, datoteko doc.html, posnemite poljubno sliko). Slika

      je treba vstaviti na spletno stran doc.html.

      Torej, kolikokrat morate izstopiti, tolikokrat postavimo konstrukcijo ../, in če vstopimo, izpišemo imena map, ki jih srečamo na poti.

      Vaja 14

      1. Ustvarite dokument html in vanj prilepite sliko, tako da bo pot do slike naslednja.

      " ../../../../../../mapa_1/mapa_2/mapa_3/image.jpg" / >

      2. Razvijte svoj primer vstavljanja slike v dokument html tako, da vsebuje in izhod iz map in vhod v mape. Primer naj se razlikuje od vseh zgornjih primerov.

      Kot rezultat te teme bi morali imeti naslednje datoteke:

      • template.html
      • main.html
      • list_vlozh.html
      • znotraj mapemoja hišamora biti mapajavnosti_ htmlz datotekami prihodnje strani
      • sedem primerov za relativno naslavljanje in dva primera kot nadzor iz praktična naloga 14

      Veliko jezikov je bilo izumljenih, vendar je HTML eden izmed posebnih in najbolj iskanih jezikov. Z njim so povezane številne druge ključne programske pobude. Veliko postane na voljo, ko je znanje o označevalnem jeziku - HyperText Markup Language (HTML) prisotno v mislih razvijalca.

      V bistvu v HTML ni nič zapletenega in v nekaj minutah bo vsaka oseba, ki je najbolj oddaljena od programiranja in interneta, ustvarila stran HTML v beležnici. Primer, ki si zasluži pozornost, je preprostost, ki je pravzaprav dostopna vsem.

      splošen opis

      Datoteka HTML je ena stran spletnega mesta, čeprav je temu mogoče trditi, vendar je dejstvo, da ena datoteka sestavlja eno stran, jasno za začetek.

      Datoteka HTML se začne z glavo DOCTYPE, ki označuje, da je vrsta datoteke HTML. Vsi elementi strani (oznake) so navedeni v oglatih oklepajih. Vsak par ("<» и «>") vključuje eno samo oznako HTML. Običajno so oznake HTML seznanjene, kar pomeni, da za vsako "tag" obstaja "/tag". Oba sta v oglatih oklepajih. Obstajajo posamezne oznake, od katerih je najbolj priljubljena "br/" prehod v naslednjo vrstico.

      Največja oznaka v datoteki je sam HTML, ki vsebuje samo dve oznaki: HEAD in BODY. V prvem so narejeni različni opisi, navedene so povezave do drugih datotek, ki jih potrebuje stran, morda obstajajo PHP skripte in JavaScript. Drugi beleži vsebino strani. Tudi v obliki oznak in skriptov.

      Enostavna stran HTML

      Primer ustvarjanja takšne strani je podan spodaj v članku. Pazljivo razmislimo.

      Oddelek HEAD

      Glavni namen je splošen opis strani in običajnih skriptov, čeprav je slednje precej relativen pojem. Običajno sta tukaj pomembni samo dve stvari:

      • ključne besede in opis strani;
      • povezave do drugih datotek (*.css in *.js).

      Za prikaz vsebine strani je vsebina tega razdelka pomembna le posredno, saj nakazuje, da nekje v drugih datotekah obstajajo pravila CSS za oznake in skripte drugih jezikov.

      Stran HTML ima, ki se prikaže, ko obiskovalec premakne miško nad zavihek, kjer je stran odprta. to pomembna točka, ker stran naredi veliko bolj predstavljivo, z drugimi besedami, podpisano z berljivim besedilom.

      Oznake META so pomembne pri internetnem programiranju na splošno, toda ko morate ustvariti stran HTML v beležnici, ni zaželeno, da bi primer natrpali z nepotrebnimi konstrukcijami.

      Če se je treba skriptiranja lotiti, ko je znanje HTML utrjeno, se je treba takoj lotiti kaskadnih slogovnih listov. Datoteke CSS zagotavljajo zlasti pravila za oblikovanje oznak HTML.

      Rubrika TELO

      Pravzaprav je vzorčna stran HTML razdelek BODY. Tukaj so vse informacije, vsa vsebina strani spletnega mesta. Vse informacije so predstavljene v obliki oznak in skriptov, kot je vstavljanje kode JavaScript ali delov programov PHP.

      Pomembno je razumeti, da primer HTML spletne strani v brskalniku in istem primeru v urejevalniku besedil, zlasti v beležnici, to še zdaleč ni isto. V prvem primeru imamo že pripravljeno besedilo HTML, v katerem se izvajajo vsi skripti. PHP je na primer izdelal svoj del in namesto kode na pravih mestih oblikoval potrebne oznake. Tudi JavaScript je izpolnil svoje poslanstvo, čeprav o tem še ni treba posebej govoriti.

      HTML so oznake in ne skripti. Navsezadnje brskalnik prikaže samo vsebino strani, le njene oznake. Tam ni kode PHP.

      JavaScript je v posebnem položaju, njegova skrb je služiti strani ne samo v trenutku nalaganja (ponovnega nalaganja), ampak tudi v trenutkih, ko je stran v brskalniku obiskovalca in jo ta preučuje.

      Preprost primer (samo razdelek BODY) je naveden spodaj.

      In v brskalniku obiskovalca je videti takole:

      Koda ni določala, kako naj bodo videti elementi, ki jih prikaže brskalnik. Vsi vidni slogi so v pravilih CSS. V tem primeru v navedeni datoteki Mcss/scPhpWordRW.css (glejte primer prve strani HTML).

      Za razliko od HTML je tema CSS enostavnejša, pravila so zelo dostopna in njihovo število je majhno, ko primer ustvarjanja strani HTML ne zahteva ničesar drugega kot beležnico. Vse je zelo dostopno za takojšen razvoj:

      To kaže, kako preprosto je opisana oznaka scLogo_vDoc, pri čemer je opis tak, da oznaka običajno prikaže sliko vDoc-logo.png, ko je miška nad, pa prikaže sliko vDoc-logo-h.png.

      Struktura HTML opisov

      Jezik ne implicira nobene strukture in pojem sintakse je tukaj zelo relativen. Tukaj ni spremenljivk, je pa veliko možnosti. Temeljna osnova hiperteksta je, da obstaja element (tag), ki mora imeti ime.

      Ime je v primeru seznanjene oznake sestavljeno iz dejanskega imena (tagName) in oglatih oklepajev ("<» + tagName +«>«), če pogovarjamo se o začetku oznake in "” če je njen konec zabeležen.

      Primer strani HTML, ki opisuje atribute, se nahaja spodaj v besedilu.

      Oznaka ima lahko atribute, v tem primeru so postavljeni s presledkom za imenom oznake pred oglatim oklepajem ">". Atributi, če jih oznaka ima, so zapisani samo na začetku oznake. Vsebina oznake je tisto, kar je med začetkom in koncem oznake.

      HTML vam omogoča opis blokovnih in vgrajenih elementov. Prvi zasedajo določeno območje v oknu brskalnika, lahko so postavljeni absolutno, to je na pravo mesto v prikaznem območju strani HTML, in imajo določeno velikost.

      Elementi v vrstici so običajno prikazani v enem toku, to je, kot so bili podani v datoteki strani, in so prikazani na zaslonu. Na prikaz skupnega toka lahko vplivate, ko je stran naložena. Na postavitev, vidnost in druge lastnosti elementov na ravni bloka lahko kadar koli vplivate prek kode JavaScript.

      Poleg preprostih elementov HTML ponuja opis tabel in obrazcev. Ti elementi so zelo iskani pri "vsakdanji gradnji spletnih strani".

      Opis tabele: oznake TABLE, TR, TD

      Z oznako TABLE lahko ustvarite tabelo, določite določeno število vrstic TR in v vsaki vrstici določeno število celic TD. Za razliko od običajne tabelarične organizacije je zaradi posebnosti označevanja HTML tabelarna organizacija omejena na to deklaracijo, tako da če želi razvijalec imeti pravokotno tabelo, v kateri je število stolpcev v vseh vrsticah enako, mora slediti to po svoje.

      Načelno stališče HTML je, da naredi vse, kar je določeno, vendar nič, kar ni razumljeno. V nekaterih primerih število stolpcev v vsaki vrstici tabele ni tako pomembno, če pa morate celice združiti navpično ali vodoravno, boste morali vse zelo natančno izračunati.

      V članku je jasno prikazan primer strani HTML, ki opisuje preprosto tabelo.

      Tukaj je tabela velikosti tri vrstice s tremi stolpci, v prvi vrstici pa je bila namesto oznake TD uporabljena oznaka TH, naslov stolpca. Ti dve oznaki nimata posebne razlike, vendar je povsem mogoče uporabiti prvo za razlikovanje prve vrstice tabele, v CSS pa lahko TH pripnete svoj slog, ki ga razlikuje od drugih TD.

      Opis obrazca: OBRAZEC, oznake INPUT

      Obrazci so najbolj zahtevan del oznak HTML. Za pošiljanje informacij se lahko uporabljajo obrazci. Pravzaprav je stran sama izhod informacij, oblika pa je njen vnos.

      Primer strani HTML, ki opisuje preprost obrazec:

      Obstaja veliko več možnosti za uporabo obrazcev, vendar so glavne značilnosti naslednje. Določite lahko vnosna polja, jim dodelite načrt in obravnave za razčlenjevanje uporabniškega vnosa. Določite lahko skrita polja in posredujete informacije o ozadju s strani. Določite lahko gumbe za prenos informacij, s klikom na katere se začne postopek prenosa informacij.

      Uporaba HTML

      Poznavanje jezika hiperteksta je delo v kateri koli specializaciji na področju internetnega programiranja, če pa morate pisati programe v PHP ali JavaScript, potem morate odlično poznati HTML + CSS.

      Jezik PHP je bil določen v prejšnjem primeru. PHP teče na strežniku, zato je stran s tem obrazcem priletela s strežnika v brskalnik z izpolnjenimi polji. Zlasti funkcija TestOnBlur, omenjena v oznaki INPUT (obravnavalec dogodkov onblur), je prejela vse parametre kot besedilna polja.

      JavaScript deluje v brskalniku in za pravilno delovanje gumba za pošiljanje podatkov nazaj na strežnik, torej konstrukcije: onclick=jQuery("#to").val("cart"), morate imeti ideja ne le o tem, kaj je jQuery, ampak tudi, kaj je #to, val, cart. Natančneje, poznati morate osnovne oznake HTML in splošna pravila z uporabo slogov CSS zanje.

      To je povsem dovolj, da hitro izboljšate svoje sposobnosti v kateri koli specializaciji na področju internetnega programiranja.

      Pozdravljeni dragi bralci bloga. S tem člankom se bomo začeli učiti osnov jezika HTML.

      Verjetno že veste, da je glavni jezik interneta Hiperbesedilni označevalni jezik (HTML). V tem članku bomo spoznali osnovne pojme HTML in se naučili izdelati najenostavnejše SPLETNE strani.

      Začnimo z najpomembnejšim, razmislite o tem, kako deluje Svetovni splet— Internet. Če želite pridobiti spletne strani, ustvarite datoteke, napisane v HTML, in jih postavite na spletni strežnik. Po tem lahko vsak brskalnik, nameščen na napravi z dostopom do interneta, naj bo to računalnik, telefon ali tablica, najde vaše spletne strani.

      spletni strežnik je navaden računalnik s posebnim programsko opremo z dostopom do interneta. Nenehno čaka na zahteve brskalnikov za spletne strani, slike, avdio in video datoteke. Ko strežnik prejme zahtevo za enega od teh virov, jo poišče in pošlje brskalniku.

      Brskalnik- To poseben program, namenjen na primer ogledu spletnih mest internet Explorer. Z brskalnikom brskate po spletu s klikanjem povezav. Vsak tak klik povzroči, da brskalnik spletnemu strežniku pošlje zahtevo za stran html, prejme odgovor in prikaže stran v svojem oknu. Ko se stran prikaže, pride v poštev jezik HTML, ki brskalniku pove vse o strukturi in vsebini spletne strani. S pomočjo ukazov - oznake, HTML pove brskalniku, kje se začnejo odstavki besedila, kateri del besedila je naslov, in pove, kam naj vstavi tabele in celo slike. In oznake so na primer besede v oglatih oklepajih

      ,

      , .

      Spletno trgovino nujno potrebujem, vendar ni časa za učenje HTML, CSS, PHP in drugih tehnologij. Potem lahko enostavno najamete spletno trgovino s polno implementirano funkcionalnostjo in optimizacijo za iskalnike.

      Jezik HTML in njegove oznake

      Prva različica HTML se je pojavila leta 1992. V letu 2013 je specifikacija v razvoju nova različica HTML številka 5. To specifikacijo je razvil World Wide Web Consortium ali na kratko W3C. W3C razvija tudi druge spletne standarde. S temi standardi se lahko seznanite na njihovi spletni strani www.w3.org. Mimogrede, številni spletni brskalniki že podpirajo nekatere funkcije HTML 5.

      Predlagam, da se takoj začnemo učiti jezika HTML s primerom. Ustvarimo našo prvo spletno stran. Za izdelavo spletnih strani, poljubnih urejevalnik besedil. Predlagam, da začnete z uporabo vgrajenega sistema Windows Beležnica(na splošno vam v prihodnje za urejanje kode html svetujem uporabo ). Najdete ga: "Start-> Vsi programi-> Pripomočki-> Beležnica". Ustvarimo stran o avtomobilih. Torej, odprite beležnico in vnesite naslednje besedilo:





      Primer spletne strani


      Spletna stran o avtomobilih.


      Dobrodošli na naši avtomobilski strani. Tukaj boste našli veliko zanimivih in koristnih člankov o avtomobili. Spletno mesto vsebuje opise številnih uvoženih in domačih avtomobilov.





      Nato shranimo ustvarjeno spletno stran v datoteko z imenom index.html. Hkrati moramo v pogovornem oknu za shranjevanje datoteke nastaviti kodiranje UTF-8 in ime datoteke dati v narekovaje, sicer ji bo Beležnica dodala pripono txt in naša datoteka se bo imenovala index.htm. txt:

      Zdaj je treba odpreti ustvarjeno datoteko v brskalniku in pogledati rezultat. Če želite to narediti, lahko uporabite priloženo brskalnik Windows Microsoft Internet Explorer ali kateri koli drug brskalnik, nameščen v vašem računalniku, tako da dvokliknete datoteko index.html ali povlečete datoteko na ikono brskalnika. Odpremo ga in vidimo nekaj takega:

      Tako smo v Beležnici ustvarili spletno stran, ki je malce omamna, vendar že vsebuje velik naslov in odstavek besedila, ki se samodejno razdeli v vrstice in vsebuje krepko besedilo.

      Kaj je oznaka?

      Zdaj pa se pogovorimo več o strukturi strani. Razmislite o izrezku:

      Spletna stran o avtomobilih

      . Tukaj vidimo besedilo, ki je prikazano na strani kot naslov, obdano z oznakami

      in

      . Kaj je oznaka v jeziku html?

      HTML oznaka so navadne besede in simboli v oglatih oklepajih, npr.

      ,

      , . torej označite

      je začetna oznaka, oznaka

      zaključna oznaka, besedilo vmes pa se imenuje vsebina oznake. Tudi označi

      in oznako

      se imenujejo parne oznake. Začetna oznaka, vsebina in končna oznaka skupaj tvorijo element dokumenta html. Obstajajo tudi elementi, sestavljeni iz ene same začetne oznake:

      Torej oznaka za par

      definira element naslova prve ravni. Skupaj je šest ravni naslovov, to so elementi

      .

      Elementi so bloki in male črke (besedilo). Elementi blokov izvedite strukturno oblikovanje strani. Elementi bloka so vedno prikazani na strani v novi vrstici in so zamaknjeni od sosednjih elementov. Inline elementi izvedite neposredno oblikovanje besedila ali logično oblikovanje. Element

      je blok element.

      To je vse zame!!! Se vidimo v naslednjih objavah!

      : HTML - Hypertext Markup Language (ali Hypertext Markup Language).

      Spoznajmo ga torej bolje.

      Za začetek v računalniku ustvarite datoteko s poljubnim imenom in pripono.html (naslov mora biti v angleščini)- na primer index.html). Če želite ustvariti takšno datoteko - ustvarite običajno Besedilni dokument ("Start" - "Vsi programi" - "Pripomočki" - "Beležnica") in shrani ("Datoteka" - "Shrani kot") kjer koli z vnosom imena in končnice (se zgodi, da ko vnesete razširitev, jo beležka še vedno shrani kot besedilna datoteka, in potrebujemo spletno datoteko. Če želite to narediti, pred shranjevanjem izberite vrsto datoteke - "Vse datoteke (*. *)").

      To ni pogoj (saj lahko spremenite ime prve strani v nastavitvah strežnika), ampak pravilo dobrega okusa. Ime prve strani je zaželeno indeks (index.html), saj strežnik ob dostopu izda datoteko z enakim imenom - indeks.

      Če je datoteka pravilno shranjena, bi se morala ikona datoteke spremeniti v ikono brskalnika (privzeto Internet Explorer).

      Zdaj odprite to datoteko z beležko in vanjo kopirajte naslednjo kodo.

      To je prva spletna stran!

      Shranite in odprite prek brskalnika.

      Čestitamo, pravkar ste ustvarili svojo prvo spletno stran.

      Besedilo "To je prva spletna stran!" lahko jo spremenite v katero koli drugo, na primer - "To je moja prva spletna stran!!!". shranite, posodobite brskalnik, občudujte rezultat.

      Toda naša stran nima glave.

      To moramo popraviti - nekoliko bomo prilagodili kodo ali bolje rečeno, ji dodali "vodjo spletnega mesta" z uporabo oznak in .</p><p> <html> <head> <title>Prva stran To je moja prva spletna stran!!!

      Shranite, posodobite, uživajte. Zdaj ima naša stran glavo.

      Opis oznak.

      Prva oznaka je (ta oznaka je seznanjena, tj. zaključna oznaka obvezno) - uporablja se kot vsebnik, v katerem je vsa vsebina strani (besedilo, slike itd.). Čeprav ta oznaka ( in) ni obvezna, vendar njena uporaba kaže na dobro vedenje. Zato vam svetujem, da ga uporabite.

      Naslednja oznaka - . To je tudi oznaka za par ( in). Ta oznaka ni prikazana na strani (razen naslova), vendar je obvezna za prikaz dodatni parametri strani – opis strani (ki ga uporabljajo iskalniki), ključne besede (ki jih uporabljajo iskalniki), slogi, skripti, naslov in drugo.

      Oznaka </b>- oznaka za par ( <title>in) je potrebno določiti naslov strani. In ta oznaka mora biti nameščena samo znotraj oznake !

      In zadnja, v naši kodi, oznaka - . Tudi oznaka za par ( in

      ), znotraj katerega je celoten vidni del mesta, tj. besedila, slike, povezave, splošne informacije ki jih želite postaviti na spletno stran.

      V naslednji lekciji bomo govorili o vrstah oznak in pravilih za njihovo pisanje.



       Vrh