Oldalsablon kódja. Széles kerettel. Opcionális címkék a HTML5-ben

A „HTML-oldal létrehozása” című lecke egy nagyon egyszerű weboldal elrendezésének szentel. Megtanulja, hogyan kell helyesen menteni egy HTML-fájlt, beállítani a szükséges kódolást a HTML-oldal megfelelő megjelenítéséhez a böngészőben, valamint szövegeket, listákat és képeket elhelyezni egy weboldalon.

A lecke tanulmányozása után már megtanulhatja, hogyan hozhatja létre első weboldalát, ahogy az 1. ábrán látható.

1. kép

1. HTML dokumentum szerkezet

A HTML-fájlok kiterjesztése van .htm vagy .html.

A címkék általában párosítva vannak: kezdő és záró címkék. A kezdeti -<>, végleges, Például

És

Párosított címkét is hívnak tartály .

Egyes címkék nem rendelkeznek kötelező címkepárral, ezt a címkét hívják egyetlen . Egy ilyen címkét például úgy zárunk le, hogy a zárószögletes zárójel elé jobbra perjelet írunk

A html dokumentum szerkezete így néz ki (2. ábra).

2. ábra

Magyarázatok a 2. ábrán látható listához

Az első sorban a DOCTYPE konstrukció az egyik weboldalelrendezési szabványt jelenti.

Címkék között És tartalmazza a fejléc részt. Tervezést tartalmaz </b>És <b>. Ez a név a böngésző címsorában jelenik meg dokumentum betöltésekor (3. ábra).

3. ábra

Rekord a cirill kódolást jelenti, hogy a betűk helyesen jelenjenek meg a böngészőben. Ha a kódolás nincs megadva, a betűtípusok néha a következőképpen jeleníthetők meg (4. ábra)

4. ábra

Ugyanaz az oldal a kódolás beillesztése után (5. ábra)

5. ábra

Megjegyzés: kódolás helyett charset="windows-1251" használhatod a kódolást charset=" utf -8" , amely lehetővé teszi többnyelvű oldalak létrehozását, hiszen a világ összes szereplője jelen van benne. Ebben az esetben be Jegyzettömb++ szükséges az elrendezés és mentés előtthtml- válassza ki a fájlt a felső menüből Kódolások – Kódolás erre UTF -8 nélkül BOM (UTF-8 anyagjegyzék nélkül)

Ez az információ elegendő az első dokumentum létrehozásához.

1. gyakorlat

1. Hozzon létre egy mappát, nevezze el az énház. Az összes mappa és fájl nevét latin kisbetűkkel kell létrehozni, Orosz nevek nem használhatók. A nevek legyenek rövidek és értelmesek.

A weboldal kódját a Jegyzettömbbe írjuk. Jobb, ha nem a Windowshoz tartozó Jegyzettömböt használod, hanem egy „fejlettebbet”, például a Notepad++-t. terjesztés Jegyzettömb++ a mappában van CD/kör.

2. Nyissa meg a Notepad++ alkalmazást. Győződjön meg arról, hogy az ANSI kódolás be van állítva, ezt a tétel menüjében teheti meg Kódolások, beállított pozíció Kódolás ANSI-ba.

3. Írja be a 2. ábrán látható listából a kódot a Notepad++ alkalmazásba.

A 2. ábra listája kódja a jövőben sablonként fog szolgálni számunkra, hogy ne kelljen minden alkalommal begépelnünk a HTML dokumentum szerkezetét. Másolja ki innen a DOCTYPE konstrukciót (nem kell megjegyezni vagy memorizálni).

4. Mentse el a fájlt másként sablon.html mappában én házam, míg a terepen Fájltípus telepítés Minden típus(6. ábra), különben a weblap nem nyílik meg a böngészőben.

6. ábra

5. Mentés után fuss sablon. html dupla kattintás. Ennek eredményeként a fájl így fog kinézni (7. ábra).

7. ábra

Ha nem a fenti ábrán látható eredményt kapja, az azt jelenti, hogy valószínűleg hiba van a kódban. Elég egy rossz karakter, és a weboldal nem jelenik meg megfelelően. Ellenőrizze újra a kódot a 2. ábrán látható listával.

6. A mappa belsejében én házam hozzon létre egy mappát nyilvános_ html. Ez a név általában az a mappa, amelyben a webhely tárolódik, amikor valódi tárhelyen tárolják (ezt a mappát www-nek is lehet nevezni).

7. Mentse el a fájlt sablon. html mappában nyilvános_ htmlúj néven fő-. html.

8. Egy mappából CD/ html_css_1 nyissa meg a fájlt text_main.txt a Notepad++ alkalmazásban, és nyissa meg a néven mentett fájlt is fő-. html

9. Másolja ki az összes szöveget a fájlból text_main.txtés illessze be a fájlba fő-. html a „Weboldal tartalma” kifejezés helyett. A címkében írja be az "Otthon" szót. Mint ez <b><title>itthon.

10. Mentse el a változtatásokat, és tekintse meg a fájl előnézetét fő-. html a böngészőben. Formázatlan szöveget fog látni. A böngésző nem is csinál olyan sortöréseket, amelyek a forrásszövegben vannak (8. ábra).

8. ábra

2. Formázásweb-oldalak megcímkézveHTML

Ez a HTML-oldal létrehozásának útmutatója a weboldal megjelölésére használt alapvető címkéket ismerteti.

A címkék célja egy weboldal szövegének formázása. A címkék listája részletesebben a mappában tekinthető meg CD/KönyvtárHTML a címtárban html401_ru.chm(a felső menüpontban elemeket).

Nézzünk néhány címkét.

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

A dokumentum törzsének strukturálása az elemen belül történik < test> a h1, h2, h3, h4, h5, h6 elemekkel meghatározott címsorok használatával.

A címsorelemek párosítva vannak, ezért nyílásuknak kell lenniük < h1> és zárás h1> címkéket.

A HTML-nek hat címsorszintje van: h1 (legfelső), h2, h3, h4, h5 és h6 (legfelső). A címsorelemek funkcionalitása hasonló a szövegszerkesztők szokásos címsorstílusaihoz.

E hat címke hatásait az alábbi ábrák mutatják be. Egy képen forrás(9. ábra), másrészt a nézet a böngészőben (10. ábra).

9. ábra

10. ábra

Szöveg felosztása bekezdésekre

Címke < p> beállítja a bekezdés elejét, és szóközt szúr be a bekezdés tetejére – egy behúzás, amely elválasztja ezt a bekezdést az előzőtől.

Kényszervonaltörés

Címke
lehetővé teszi a bekezdés fennmaradó szövegének a következő sorba tördelését. Ez egy párosítatlan címke, és a bekezdéscímkével ellentétben nem növeli a sorok közötti távolságot.

2. gyakorlat

1. Formázza meg az „Építészeti projektek katalógusa” címet címkék segítségével

És

.

2. Formázza meg a „Projektek jövőbeli otthonáért” címet címkék segítségével

És

.

3. Formázza meg a „Házprojektek” és a „Házterületek” címsorokat címkék segítségével

És

.

4. Oszd fel a fő szöveget bekezdésekre egy címke segítségével

Az első két bekezdésben használja a címkét
hogy megszakítson egy sort. Ennek eredményeként a kódnak így kell kinéznie (11. ábra).

5. Tekintse meg az eredményt egy böngészőben.

11. ábra

Felsorolásos és számozott listák

A HTML eszközök segítségével bármilyen listát létrehozhat: számozott (numerikus és alfabetikus) és felsorolásjelekkel különböző típusok markerek.

Címke < ul>…ul> felsorolásjeles listát generál.

Címke < ol>…ol> számozott listát generál.

Egyetlen listaelem, mint a

    , és be
      címke segítségével alakították ki < li> .

      3. gyakorlat

      1. Hozzon létre egy számozott listát a „Házi projektek” címszó alatt.

      2. Hozzon létre egy listajeles listát a „Házterületek” címszó alatt. A kódja így fog kinézni (12. ábra).

      12. ábra

      3. Tekintse meg az oldalt egy böngészőben.

      A listák különböző markerek segítségével egymásba ágyazhatók.

      ábra egy beágyazott listára mutat példát. 13

      4. gyakorlat

      1. Illessze be a 13. ábrán látható kódot egy új fájlba.
      2. Mentse el a fájlt egy mappába én házam néven spisok_ vlozh. html. ábrán látható eredmény. 13

      13. ábra Példa beágyazott listára

      Betűstílusok

      Címke - lehetővé teszi a szöveg félkövér betűtípusú megjelenítését.

      Címke - lehetővé teszi a szöveg dőlt betűs megjelenítését.

      Címke - aláhúzott szöveget jelenít meg.

      Például:

      Ebben az esetben a szöveg jelenik meg félkövér dőlt , de nem aláhúzva.

      És ebben az esetben a szöveg meg lesz írva félkövér aláhúzott dőlt betű .

      Al- és felső indexek

      Címke < alatti> És alatti> lehetővé teszi, hogy a szöveget fél sorral a normál szöveg alá süllyessze.

      Címke < sup> És sup> lehetővé teszi a szöveg fél sorral a normál szöveg fölé emelését. A címkék között található szöveg kisebb betűtípussal jelenik meg, mint a normál szöveg.

      5. gyakorlat

      1. Formázza félkövérrel a myhouse.ru nevet az első bekezdésben (14. ábra).

      14. ábra

      2. Formázza a második bekezdésben aláhúzott dőlt betűvel a „projektek több mint 95%-a” kifejezést (15. ábra).

      15. ábra

      3. Formázza a felső indexeket, ahol négyzetmétert használ (16. ábra).

      16. ábra

      4. Mentse el a fájlt. Megtekintés böngészőn keresztül. A weboldalnak így kell kinéznie (17. ábra).

      17. ábra

      3. Képek beszúrása

      A HTML-oldal létrehozása című cikkünkben megvizsgáljuk, hogyan lehet képeket elhelyezni egy weboldalon.

      A címkét képek beszúrására használják . A címke kötelező attribútuma a következő src(az angol SouRCe - forrásból). Meghatározza a hozzá vezető utat grafikus fájl, amelynek képét meg kell jeleníteni a weboldalon.

      Kép beszúrásához használja a parancsot

      Például: " kép1.jpg" alt="Kép" /> !}

      Az alt attribútum azért szükséges, hogy egy weboldal letiltott képek módban történő megtekintésekor a hiányzó kép helyett egy felirat legyen, ami az alt attribútumban van írva. Szintén ajánlott mindig alt szövegek használata, mert a keresőmotorok kulcsszavakként elemzik őket a képek keresésekor.

      A grafikus fájlok formátumban lehetnek jpg, gif, png és mindig a színes modellbenRGB.

      6. gyakorlat

      1. A házterületek listája után illessze be a nyaralóprojektek képeit a weboldalra projekt_1.jpgÉs projekt_2.jpg mappából CD/html_css_1 . Ehhez először másolja át ezt a két képet abba a mappába, ahol a main.html fájl található. A képbeillesztési kód így fog kinézni (18. ábra).

      18. ábra

      2. Tekintse meg az eredményt a böngészőben (19. ábra).

      19. ábra

      Alapvetően a címkék használatának elveHTMLegyértelműnek kell lennie. Ugyanazon elv szerint használják őket: ha a címke konténer, akkor van nyitó és záró címke. Ha a címke egyszeres, akkor nincs zárócímke; ebben az esetben a jobb perjel kerül a záró szögletes zárójel elé, pl.< br/>. Függetlenül attól, hogy a címke konténer vagy egyedi, mindig megtekintheti a specifikációthtml401_ru.chm az „elemek” részben.

      4. Címzés a webhelyen belül

      Az első leckénkben, a Hogyan készítsünk HTML-oldalt, a HTML-ben történő címzés fogalmait fogjuk megvizsgálni.

      Fontolja meg a címzési lehetőségeket, amikor képeket kell elhelyeznie egy html fájlban, amely a webhely különböző mappáiban található.

      Kétféle címzés létezik:

      • abszolút;
      • relatív.

      Abszolút címzés (számítógép-meghajtónevek használatával) nem használt(20. ábra)

      20. ábra

      Használt relatív címzés - címzés egy dokumentumon vagy dokumentumcsoporton belül egy szerveren. Ha egy webhelyen belüli fájlra szeretne hivatkozni, meg kell adnia a böngészőnek, hogy melyik útvonalon kell eljutnia a kívánt fájlhoz.

      1. példa

      A kép ugyanabban a mappában található, mint a HTML dokumentum (21. ábra). Vagyis a kép és a HTML-fájl ugyanazon a szinten van fájlrendszerés a HTML dokumentum azonnal csatolhatja a képet. Ebben az esetben a kép beszúrása egy weboldalra így fog kinézni.

      / >

      21. ábra

      Gyakorlati feladat7

      Valósítsa meg az 1. példát (hozzon létre egy mappát, egy doc.html fájlt, készítsen bármilyen képet). Kép

      2. példa

      Kép kép. jpg a mappában van mappát_1 . A HTML-dokumentum a_1 mappán kívül található. Azok. A webhely fájlrendszerében a HTML dokumentum egy szinttel magasabban helyezkedik el, mint a kép (22. ábra). Meg kell adnia a mappa_1 mappát, majd csatolni kell a képet

      22. ábra

      Gyakorlati feladat8

      Valósítsa meg a 2. példát (hozzon létre egy mappát, egy doc.html fájlt, készítsen bármilyen képet). A képet be kell illeszteni a doc.html weboldalra.

      3. példa

      Kép kép. jpg a mappában van mappát_1 , ami viszont a mappában fekszik mappát_2 . A HTML-dokumentum ezeken a mappákon kívül található (23. ábra). Így a HTML dokumentum két szinttel magasabb, mint a kép. Szükséges:

      • írja be a mappát mappa_2,
      • majd adja meg a mappa_1 mappát,
      • majd csatolja a képet.

      23. ábra

      Gyakorlati feladat9

      Valósítsa meg a 3. példát (mappák, doc.html fájl létrehozása, bármilyen kép készítése). A képet be kell illeszteni a doc.html weboldalra.

      4. példa

      mappát_1 . A kép a_1 mappán kívül található. Azok. A HTML dokumentum egy szinttel lejjebb található, mint a kép (24. ábra). Ki kell lépnie a_1 mappából, majd csatolnia kell a képet. A mappa elhagyását a konstrukció jelzi ../ (két pont és egy perjel jobbra).

      / >

      24. ábra

      Gyakorlati feladat10

      Valósítsa meg a 4. példát (hozzon létre egy mappát, egy doc.html fájlt, készítsen bármilyen képet). A képet be kell illeszteni a doc.html weboldalra.

      5. példa

      A HTML dokumentum a mappában található mappát_1 , amely viszont a mappában található mappát_2 . A kép ezeken a mappákon kívül található. Így a HTML dokumentum két szinttel lejjebb található, mint a kép (25. ábra). Szükséges:

      • kilépési mappa mappa_1,
      • kilépési mappa mappa_2,
      • csatolj egy képet.

      Mivel kétszer kell kilépni, a design ../ kétszer megismételve.

      / >

      25. ábra

      1. gyakorlat1

      Valósítsa meg az 5. példát (mappák, doc.html fájl létrehozása, bármilyen kép készítése). A képet be kell illeszteni a doc.html weboldalra.

      6. példa (26. ábra)

      Szükséges:

      • kilépési mappa mappa_1,
      • kilépési mappa mappa_2,
      • lépjen a mappa_3 mappába,
      • lépjen a mappa_4 mappába,
      • csatolj képet pic.jpg

      26. ábra

      1. gyakorlat2

      Valósítsa meg a 6. példát (mappák, doc.html fájl létrehozása, bármilyen kép készítése). Kép

      be kell illeszteni a doc.html weboldalra.

      Példa 7 (27. ábra)

      Szükséges:

      • kilépési mappa mappa_1,
      • kilépési mappa mappa_2,
      • kilépési mappa mappa_3,
      • írja be a mappát mappa_4,
      • csatolj képet pic.jpg.

      Mivel háromszor kell kilépnie, a tervezés ../ háromszor megismételve.

      27. ábra

      1. gyakorlat3

      Valósítsa meg a 7. példát (mappák, doc.html fájl létrehozása, bármilyen kép készítése). Kép

      be kell illeszteni a doc.html weboldalra.

      Így akárhányszor kell kilépni, annyiszor tesszük fel a ../ konstrukciót, és ha belépünk, akkor felsoroljuk az útközben talált mappák nevét.

      1. gyakorlat4

      1. Hozzon létre egy html dokumentumot, és illesszen be egy képet úgy, hogy a kép elérési útja a következő legyen.

      " ../../../../../../folder_1/folder_2/folder_3/image.jpg" / >

      2. Készítsen saját példát egy kép beszúrására egy html dokumentumba úgy, hogy az tartalmazza és kijárat mappákból, és bejárat mappákba. A példának különböznie kell a fenti példáktól.

      A témakör befejezésének eredményeként a következő fájlokat kell létrehoznia:

      • sablon.html
      • main.html
      • spisok_vlozh.html
      • a mappán belülén házamlegyen egy mappanyilvános_ htmla leendő webhely fájljaival
      • hét példa a relatív címzésre és két példa kontrollként gyakorlati feladat 14

      Sok nyelvet feltaláltak, de a HTML az egyik különleges és legnépszerűbb nyelv. A programozás számos más kulcsfontosságú fejlesztése kapcsolódik hozzá. Sok minden válik lehetségessé, ha a fejlesztő elméje ismeri a jelölőnyelvet - HyperText Markup Language (HTML).

      Lényegében a HTML-ben nincs semmi bonyolult, és aki távol áll a programozástól és az internettől, pár perc alatt elkészíthet egy HTML oldalt a Jegyzettömbben. Figyelemre méltó példa, egyszerűség, amely valóban mindenki számára elérhető.

      Általános leírása

      A HTML-fájl a webhely egyik oldala, bár ezen lehet vitatkozni, de az a tény, hogy egy fájl egy oldalt tesz ki, kezdetben egyértelmű.

      A HTML-fájl DOCTYPE fejléccel kezdődik, ami azt jelzi, hogy a fájl típusa HTML. Minden oldalelem (címke) szögletes zárójelben van feltüntetve. Minden pár ("<» и «>") tartalmaz egy HTML címkét. A HTML címkék általában párban érkeznek, vagyis minden „tag”-hoz tartozik egy „/tag”. Mindkettő szögletes zárójelben van. Vannak egyedi címkék, amelyek közül a legnépszerűbb a „br/” - átlépés a következő sorba.

      A fájl legnagyobb címke maga a HTML, amely csak két címkét tartalmaz: HEAD és BODY. Az elsőben különféle leírások készülnek, feltüntetve az oldalon szükséges egyéb fájlokhoz mutató hivatkozásokat, amelyek jelen lehetnek PHP szkriptekés JavaScript. A második rögzíti az oldal tartalmát. Címkék és szkriptek formájában is.

      Egyszerű HTML oldal

      Az alábbiakban a cikkben található egy példa egy ilyen oldal létrehozására. Nézzük meg alaposan.

      FEJ rész

      Fő cél - Általános leírása oldalak és általános szkriptek, bár ez utóbbi meglehetősen relatív fogalom. Általában csak két dolognak tulajdonítanak itt jelentős jelentőséget:

      • kulcsszavak és oldalleírás;
      • hivatkozások más fájlokra (*.css és *.js).

      Az oldal tartalmának megjelenítéséhez ennek a szakasznak a tartalma csak közvetve fontos, mivel azt jelzi: valahol más fájlokban vannak CSS-szabályok más nyelvű címkékre és szkriptekre.

      A HTML-oldalak akkor jelennek meg, amikor a látogató arra a lapra viszi az egeret, ahol az oldal nyitva van. Ez fontos pont, hiszen lényegesen bemutathatóbbá, könnyebben mondhatóvá, olvasható szöveggel aláírva teszi az oldalt.

      A META címkék általában fontosak az internetes programozásban, de ha HTML oldalt kell létrehozni a Jegyzettömbben, akkor nem tanácsos felesleges konstrukciókkal telezsúfolni a példát.

      Ha a szkriptelést a HTML ismerete megszerzése után kell megközelíteni, akkor azonnal foglalkozni kell a lépcsőzetes stíluslapokkal. A CSS-fájlok különösen tervezési szabályokat tartalmaznak HTML címkék.

      BODY szakasz

      Valójában a példa HTML oldal a BODY szakasz. Itt található az oldal összes információja, minden tartalma. Minden információ címkék és szkriptek formájában jelenik meg, például JavaScript kód beillesztése vagy PHP programok darabjai.

      Fontos megérteni, hogy egy példa egy HTML weboldalra a böngészőben és ugyanaz a példa egy szövegszerkesztőben, különösen a Jegyzettömbben, nem ugyanaz. Az első esetben van egy kész HTML szövegünk, amelyben az összes szkript lefut. Például a PHP kidolgozta a részét, és kódja helyett a megfelelő helyeken alakította ki a szükséges címkéket. A JavaScript is teljesítette küldetését, bár ez még külön megvitatásra vár.

      A HTML címkék, nem szkriptek. A böngésző végül csak az oldal tartalmát jeleníti meg, csak a címkéit. Ott nincs PHP kód.

      A JavaScript speciális helyzetben van, az a gond, hogy ne csak a betöltés (túlterhelés) pillanatában szolgálja ki az oldalt, hanem akkor is, amikor az oldal a látogató böngészőjében van, és azt tanulmányozza.

      Az alábbiakban egy egyszerű példa látható (csak a BODY szakaszban).

      A látogató böngészőjében pedig így néz ki:

      A kód nem határozta meg, hogy a böngésző által megjelenített elemek hogyan nézzenek ki. Minden látható stílus a CSS-szabályokban található. Ebben az esetben a hivatkozott Mcss/scPhpWordRW.css fájlban (lásd a HTML oldal legelső példáját).

      A HTML-től eltérően a CSS-téma egyszerűbb, vannak nagyon hozzáférhető szabályok és kicsi a számuk, amikor a HTML oldal létrehozásának példája nem igényel mást, mint jegyzettömböt. Minden nagyon hozzáférhető az azonnali elsajátításhoz:

      Ez azt mutatja meg, hogy az scLogo_vDoc címke milyen egyszerűen van leírva, és ez a leírás olyan, hogy normál állapotában a címke a vDoc-logo.png képet jeleníti meg, amikor pedig az egérmutatót, a vDoc-logo-h.png.

      A HTML leírások felépítése

      A nyelv nem tartalmaz semmilyen szerkezetet, és a szintaxis fogalma itt nagyon relatív. Nincsenek változók, de rengeteg lehetőség van. A hipertext alapvető alapja, hogy van egy elem (címke), amelynek szükségszerűen neve van.

      A név páros címke esetén magából a névből (tagName) és szögletes zárójelekből (“<» + tagName +«>"), Ha arról beszélünk a címke kezdetéről, és ""ha a végét rögzítik.

      Az attribútumokat leíró HTML-oldal példa alább található a szövegben.

      A címkéknek lehetnek attribútumai, ebben az esetben a címke neve után szóközzel helyezkednek el a záró szögletes zárójel előtt ">". Az attribútumok, ha egy címkében vannak, csak a címke elejére íródnak. A címke tartalmának azt tekintjük, ami a címke eleje és vége között van.

      A HTML lehetővé teszi blokk és soron belüli elemek leírását. Az előbbiek egy bizonyos területet foglalnak el a böngészőablakban, abszolút, azaz a kívánt helyre helyezhetők el a HTML oldal megjelenítési területén, és meghatározott méretűek.

      A beágyazott elemek általában egy szálban jelennek meg, vagyis ahogyan az oldalfájlban megadták őket, úgy jelennek meg a képernyőn. A teljes folyamat megjelenítése befolyásolható az oldal betöltésekor. A blokkelemek elhelyezése, láthatósága és egyéb tulajdonságai a JavaScript kódon keresztül bármikor befolyásolhatók.

      A HTML az egyszerű elemeken kívül táblázatok és űrlapok leírását is kínálja. Ezekre az elemekre nagy a kereslet a „mindennapi weboldalkészítésben”.

      Táblázat leírása: címkék TABLE, TR, TD

      A TABLE címkével létrehozhat egy táblázatot, megadhat bizonyos számú TR sort és bizonyos számú TD cellát minden sorban. A szokásos táblázatos rendszerezéstől eltérően a HTML jelölés sajátosságai miatt a táblázatos szervezés erre a deklarációra korlátozódik, ezért ha a fejlesztő olyan téglalap alakú táblázatot szeretne, amelyben minden sorban azonos oszlopok száma, akkor ezt maga figyelje.

      A HTML alapelve az, hogy mindent meg kell tenni, ami meg van adva, de semmi olyat, ami nem érthető. Bizonyos esetekben a táblázat egyes soraiban lévő oszlopok száma nem annyira fontos, de ha függőlegesen vagy vízszintesen kell egyesíteni a cellákat, akkor mindent nagyon óvatosan kell számolnia.

      Egy egyszerű táblázatot leíró HTML-oldal példa egyértelműen látható a cikkben.

      Itt egy háromsoros, három oszlopos táblázat látható, és az első sorban a TD címke helyett a TH címkét használták - az oszlopfejlécet. Ez a két címke nem különbözik különösebben, de teljesen lehetséges, hogy az elsőt használjuk a táblázat első sorának megkülönböztetésére, és CSS-ben saját stílust csatolhatunk a TH-hoz, ami megkülönbözteti a többi TD-től.

      Űrlap leírása: FORM, INPUT címkék

      Az űrlapok a HTML-címkék legnépszerűbb részei. Űrlapok segítségével információkat továbbíthat. Valójában maga az oldal az információ kimenete, de a forma a bemenete.

      Példa HTML oldalra, amely egy egyszerű űrlapot ír le:

      Az űrlapok használatára sokkal több lehetőség van, de ezek a fő lehetőségek. Megadhat beviteli mezőket, hozzárendelhet hozzájuk egy tervet és kezelőket a felhasználó által bevitt adatok elemzéséhez. Megadhat rejtett mezőket, és háttérinformációkat továbbíthat az oldalról. Az információ továbbítására gombokat jelölhet ki, amelyekre kattintva elindul az információ továbbítása.

      HTML használata

      A hipertext nyelv ismerete az internetes programozás bármely szakterületén munka, de ha PHP vagy JavaScript nyelven kell programokat írni, akkor tökéletesen ismerni kell a HTML + CSS nyelvet.

      A PHP nyelvet az előző példában jeleztük. A PHP fut a szerveren, így az ezzel az űrlappal ellátott oldal a kitöltött mezőkkel repült a szerverről a böngészőbe. Különösen az INPUT címkében említett TestOnBlur függvény (onblur eseménykezelő) kapott minden paramétert szöveges mezőként.

      A JavaScript fut a böngészőben, és ahhoz, hogy a gomb az adatokat visszaküldje a szerverre, megfelelően működjön, vagyis a konstrukció: onclick=jQuery("#to").val("cart"), szükséges egy ötlet nem csak arról, hogy mi a jQuery, hanem arról is, hogy mi a #to, val, cart. Pontosabban ismernie kell az alapvető HTML címkéket és Általános szabályok CSS stílusok alkalmazása rájuk.

      Ez elég ahhoz, hogy gyorsan javítsa képesítését az internetes programozás bármely szakterületén.

      Sziasztok kedves blog olvasók. Ezzel a cikkel elkezdjük megtanulni az alapokat HTML nyelv.

      Valószínűleg már tudja, hogy az internet fő nyelve az hiperszöveges jelölőnyelv HTML (HyperText Markup Language). Ebben a cikkben megismerjük a HTML alapfogalmait, és megtanuljuk, hogyan készítsünk egyszerű weblapokat.

      Kezdjük a legfontosabbal, nézzük meg, hogyan működik A világháló— Internet. Weboldalak készítéséhez HTML-ben írt fájlokat kell létrehozni, és elhelyezni egy webszerveren. Ezt követően bármely internet-hozzáféréssel rendelkező eszközre telepített böngésző, legyen az számítógép, telefon vagy táblagép, megtalálja weboldalait.

      web szerver- ez egy közönséges számítógép speciális szoftver Internet hozzáféréssel. Folyamatosan figyeli a böngészőktől származó weboldalak, képek, hang- és videofájlok iránti kéréseket. Miután megkapta az egyik ilyen erőforrásra vonatkozó kérést, a szerver megkeresi és elküldi a böngészőnek.

      Böngésző- Ezt speciális program, amelyet például webhelyek böngészésére szánnak internet böngésző. Böngésző használatával a hivatkozásokra kattintva böngészhet a webhelyeken. Minden ilyen kattintás arra készteti a böngészőt, hogy kérést küldjön a HTML-oldalra a webszervernek, választ kapjon, és megjelenítse az oldalt az ablakában. Amikor megjelenik az oldal, akkor kezd el működni a HTML nyelv, amely mindent elmond a böngészőnek a weboldal szerkezetéről és tartalmáról. Parancsok használata - címkéket, a HTML közli a böngészővel, hogy hol kezdődnek a szöveg bekezdései, hogy a szöveg melyik része a címsor, és hova kell beszúrni a táblázatokat, sőt képeket is. A címkék pedig például szögletes zárójelben lévő szavak

      ,

      , .

      Sürgősen szüksége van egy online áruházra, de nincs ideje megtanulni HTML, CSS, PHP és más technológiákat. Ezután egyszerűen bérelhet egy online áruházat teljes körűen megvalósított funkcionalitással és optimalizálással a keresőmotorok számára.

      HTML nyelv és címkéi

      A HTML nyelv első verziója 1992-ben jelent meg. 2013-ban a specifikáció kidolgozás alatt áll új verzió HTML szám 5. Ennek a specifikációnak a fejlesztését a World Wide Web Consortium vagy röviden W3C végzi. A W3C szervezet más webes szabványokat fejleszt. Ezekkel a szabványokkal a www.w3.org webhelyen ismerkedhet meg. Egyébként sok webböngésző már támogatja a HTML 5 bizonyos funkcióit.

      Azt javaslom, hogy azonnal kezdje el tanulni a HTML-t egy példával. Tehát hozzuk létre az első weboldalunkat. Minden szövegszerkesztő alkalmas WEB oldalak létrehozására. Javaslom először a beépített Windows használatát Jegyzettömb(általában a jövőben javaslom a használatát html kód szerkesztéséhez). Megtalálható: „Start->Minden program->Kiegészítők->Jegyzettömb”. Hozzunk létre egy oldalt az autókról. Tehát nyissa meg a Jegyzettömböt, és írja be a következő szöveget:





      Példa weblapra


      Weboldal az autókról.


      Üdvözöljük autóipari weboldalunkon. Itt sok érdekes és hasznos cikket találhat autók. Az oldalon számos import és hazai autó leírása található.





      Ezután mentse a létrehozott weboldalt egy index.html nevű fájlba. Ebben az esetben a fájlmentés párbeszédablakban a kódolást UTF-8-ra kell állítani, és a fájl nevét idézőjelbe kell tenni, ellenkező esetben a Jegyzettömb hozzáadja a txt kiterjesztést, és a fájlunk neve index.htm.txt lesz:

      Most már csak meg kell nyitni a létrehozott fájlt a böngészőben, és megnézni az eredményt. Ehhez használhatja a mellékelt Windows böngésző Microsoft Internet Explorer vagy bármely más, a számítógépére telepített böngésző, ha duplán kattint az index.html fájlra, vagy húzza a fájlt a böngésző ikonjára. Nyisd meg és nézz valami ilyesmit:

      Így létrehoztunk egy weblapot a Jegyzettömbben, bár kissé nem leírható, de már tartalmaz egy nagy címsort és egy szöveges bekezdést, amely automatikusan sorokra van bontva, és félkövéren tartalmaz egy töredéket.

      Mi az a címke?

      Most beszéljünk többet az oldal szerkezetéről. Nézzük a töredéket:

      Weboldal az autókról

      . Itt az oldalon címként megjelenő szöveget látjuk, címkékbe zárva

      És

      . Mi az a címke a HTML-ben?

      HTML tag A közönséges szavak és szimbólumok például szögletes zárójelben vannak

      ,

      , . Tehát tag

      a nyitó tag, címke

      záró címkét, a köztük lévő szöveget pedig a címke tartalmának nevezzük. Címke is

      és tag

      páros címkéknek nevezzük. A nyitó tag, a tartalom és a záró címke együtt egy HTML dokumentumelemet alkot. Vannak olyan elemek is, amelyek egy nyitó címkéből állnak:

      Tehát páros címke

      első szintű fejlécet határoz meg. Összesen hat szintű címsor van, ezek az elemek

      .

      Az elemek lehetnek blokkok vagy szövegközi (szöveg). Blokk elemek végezze el az oldal szerkezeti formázását. A blokkelemek mindig új sorban jelennek meg az oldalon, és behúzódnak a szomszédos elemekből. Inline elemek közvetlen szövegformázás vagy logikai formázás végrehajtása. Elem

      egy blokk elem.

      Nekem ennyi!!! Találkozunk a következő bejegyzésekben!

      : HTML - hiperszöveg jelölőnyelv (vagy hipertext jelölőnyelv).

      Szóval ismerjük meg őt jobban.

      Először hozzon létre egy fájlt a számítógépén bármilyen névvel és kiterjesztéssel.html (a névnek szerepelnie kell angol nyelv - például index.html). Ilyen fájl létrehozásához hozzon létre egy normált Szöveges dokumentum ("Start" - "Minden program" - "Kiegészítők" - "Jegyzettömb")és mentse el ("Fájl" - "Mentés másként") bárhol a név és a kiterjesztés megadásával (előfordulhat, hogy a bővítmény bevezetésekor a Jegyzettömb továbbra is más néven menti el szöveges fájl, és szükségünk van egy webfájlra. Ehhez a mentés előtt válassza ki a fájltípust - "Minden fájl (*.*)").

      Ez nem előfeltétel (hiszen a szerver beállításaiban módosíthatod az első oldal nevét), hanem a jó modor szabálya. Az első oldal neve lehetőleg index (index.html), mivel a szerver elérésekor egy azonos nevű fájlt állít elő - index.

      Helyes mentés esetén a fájl ikonjának a böngésző ikonjára kell változnia (alapértelmezés szerint az Internet Explorer).

      Most nyissa meg ezt a fájlt a Jegyzettömb segítségével, és másolja oda a következő kódot.

      Ez az első weboldal!

      Mentés és megnyitás böngészőben.

      Gratulálunk, most hozta létre első weboldalát.

      Szöveg "Ez az első weboldal!" Bármelyikre módosíthatja, például: „Ez az első weboldalam!!!” menteni, frissíteni a böngészőt, és megcsodálni az eredményt.

      De az oldalunknak nincs címe.

      Ezt ki kell javítanunk - egy kicsit javítjuk a kódot, vagy inkább hozzáadunk egy „Webhely fejlécet” címkék segítségével És .</p><p> <html> <head> <title>Első oldal Ez az első weblapom!!!

      Mentés, frissítés, megcsodálás. Oldalunk már címet is kapott.

      A címkék leírása.

      A legelső címke az (ez a címke párosítva van, azaz a záró címke kötelező) - konténerként használják, amelyben az oldal összes tartalma (szöveg, képek stb.) található. Bár ez a címke ( És) nem kötelező, de használata jó modorra utal. Ezért azt tanácsolom, hogy használja.

      Következő címke - . Ez is egy páros címke ( És). Ez a címke nem jelenik meg az oldalon (kivéve a fejlécben), de jelezni kell további paraméterek oldalak - oldalleírás (keresőmotorok által használt), kulcsszavak (keresők által használtak), stílusok, szkriptek, cím stb.

      Címke </b>- párosított címke ( <title>És), az oldal címének feltüntetéséhez szükséges. Ezenkívül ezt a címkét csak a címkén belül kell elhelyezni !

      És a kódunk utolsó címkéje: . Szintén egy páros címke ( És

      ), amelyen belül található az oldal teljes látható része, azaz. szövegek, képek, linkek, be Általános információ amelyet el szeretne helyezni az oldalon.

      A következő leckében a címkék típusairól és az írásuk szabályairól lesz szó.



       Top