Elemei web-oldalak

előző ◈ a következő

1. rész: Nyelv HTML

1. Mit jelent a web-site?

Hogy HTML-fájl

Itt van egy egyszerű HTML-dokumentum:

1. példa

Ez a legegyszerűbb példa a HTML-dokumentum.

Ez * .htm fájl lehet nyitni Notepad, és a Netscape. Mentse a módosításokat a Jegyzettömb, egyszerűen kattintson a Reload (újraindítás) a Netscape, hogy ezek a változások végre a HTML-dokumentum.

További padding bevezetni az olvasó kényelmét, de a HTML nem szükséges. A böngészők figyelmen kívül hagyja a sor karaktereket és a többszörös szóközöket HTML-fájlokat. Mint látható a például az összes információt, hogyan lehet formázni egy dokumentum a töredékek között megkötött, a karakterek "<" и ">”. Egy ilyen fragmens (pl ) Van egy címke vagy tag (angolul tag). A legtöbb tag páros (a nyitó és záró zárójelek), azaz az egyes nyitó címke az űrlap Van egy záró tag az űrlap az azonos nevű, de azzal a kiegészítéssel, „/”. Egy ilyen pár címkék néha a tartályt, amelyben az adott tartalmat.

Nagy és kis betűket nem különböztethető meg, például
,
és
egyenlő és egyformán indukálják kényszer átviteli sort a szövegben. Gyakran a fellépés tag intuitív azok számára, akik tudnak angolul:

- Bold (félkövér) - Dőlt (dőlt betűvel szedve)

- § (bekezdés).

Sok tag mellett a név is tartalmazhatnak attribútumokat - elemeket, amelyek további információkat, hogy a böngésző melyik kezelni a jelenlegi címkét. A mi egyszerű dokumentum azonban egyetlen tulajdonság.

Jelenleg kezdődik fokozatos átmenet szigorúbb nyelv Hypertext Markup - XHTML, amely már támogatja több böngésző fejlesztők. Ez jelentősen megnöveli a nyelv képességeit a nyelv a HTML 4, de igényesebb szintaxis. További kompatibilitás kívánatos XHTML 1) kulcsszó nevét és attribútumait rögzített kisbetűvel és 2) az attribútum értékeket mindig meg kell idézett.

Kötelező címkék

címke Meg kell nyitni a HTML-dokumentumot, és tag ki kell töltenie azt.

Egy pár címkék . Ez jelzi a kezdetét és végét a dokumentum címe. Amellett, hogy a dokumentum nevét (lásd. Mark alább), a szolgáltatási információt lehet venni ebben a szakaszban.</p> <p>Minden, ami a címkék között <title> és , értelmezi a böngésző a dokumentum címét jelenik meg a címsorban, és kinyomtatja a bal felső sarokban az egyes oldalak papíron nyomtatva. Azt javasolta, hogy a név nem hosszabb, mint 64 karakter.

Egy pár címkék . Ez jelzi a kezdetét és végét a test HTML dokumentumot, amelyben az a dokumentum tartalmát.

kedves címkék , ahol i - jelentése szám 1-től 6 (-

.
) Ismertesse hat különböző szintű címsor. Cím Az első szinten - a legnagyobb, a hatodik szint - a legkisebb.

Minden, ami között fekszik

és

, Úgy tartják egy bekezdés. Címkék és

tartalmazhatnak align (az angol „align”), attribútum, például:

header központú

vagy

minta bekezdést jobbra van igazítva

Itt egy másik példa a HTML-dokumentum:

hello!

Ez egy kicsit bonyolultabb példát HTML-dokumentum

Most már tudjuk, hogy a folyosón lehet igazítani nem csak a baloldalt,

hanem a közepén

vagy jobbra.

- adja meg a kép.

Az utolsó két tag mellett a nevüket tartalmazhatnak attribútumokat. Például, hogy helyezzen be egy képet a címke , kötelező attribútum src = "file_name.gif". Gyakran előfordul, hogy az attribútum opcionális, és finomítják a megjelenése a tételt.

Most már tudja, ahhoz, hogy hozzon létre egy egyszerű HTML-dokumentumok magad. Ahhoz, hogy javítsuk az egyszerű HTML-dokumentumban, bekezdés formázás.

2. Regisztráció szövegének egy bekezdésben

páratlan címkék

Vannak címkéket, amelyek nem tartoznak a két alapvető szabályai HTML: ők páratlan, és néhány (olyan szekvenciák) kerülnek bevezetésre csak kis betűkkel.

Egyszer jéghideg téli időszakban

Ülök rács mögött börtönben nyers.

Nézek - lassan emelkedik fel a hegyre

Táplálták fogságban sas fiatal.

És ballagott fontosabb, nyugodt higgadt,

Én szomorú barátom, hullámzó szárny,

A csizma és a báránybőr kabát,

Bloody élelmiszer puszit az ablakon.

- vízszintes vonal. Tartalmazhat mérete attribútumot definiáló vonal vastagságát és / vagy szélessége - a vonal szélessége (pixelben vagy százalékban). Például:





olyan szekvenciák. jelek "<" и ">„A böngészők tartják az elején és a végén a HTML-címkéket. Jelenítse meg ezeket a szimbólumokat az árnyékoló -sequence (iskeyp szekvencia). A böngésző megjelenít egy szimbólum a képernyőn "<", когда встречает в тексте последовательность < (less than – меньше, чем). Знак ">A „kódoló szekvencia gt; (Nagyobb, mint - nagyobb mint). A „” szimbólum (és-jel) kódolt szekvenciája - idézőjelek ( „) -” Minden betű kell lennie kisbetűvel (azaz, kicsi), a pontosvessző - kötőelem olyan szekvenciák.

szöveg formázása

HTML lehetővé teszi két megközelítés bolding szöveg töredékek. Közvetlenül is meghatározza, hogy milyen legyen a font egy bizonyos része a szöveg, azaz, hogy módosítsa a fizikai stílus a szöveg. És akkor megjelölheti néhány darab szöveg, amelynek nem normális logika stílusban, így az értelmezés a stílus böngészőt.

Kevesebb fizikai stílus néven közismert közvetlenül jelzi a böngésző, hogy módosítsa az aktuális betűtípust. Például minden, ami a címkék között és , Ez lesz félkövér. A címkék közötti szöveget és Magától dőlt betűvel. A szöveg között elhelyezett címkék és , Ez lesz írva font, hogy szimulálja a írógép, hogy van, amelynek fix szélességű karaktert.

Tag font - beállítja a betűk méretét és színét a szöveg (nem ajánlott). attribútumok:

Méret - állítja a betűméretet. Az alapértelmezett mérete 3. Az értékek: a) rögzített mennyiségű 1-7, és b) a relatív változás „1” és a „-3” egy méret nagyobb és három méretben kisebb. Akkor a pontméretet - pt, pixel - képpont.

Face - meghatároz egy vesszővel elválasztott listáját font neveket. Szín - a szöveg színét. példák: ZÖLD

Betűtípus Arial, Helvetica, sans-serif úgynevezett arányos felszecskázott; Georgia, Times New Roman, serif - arányos serif (serifnye); Courier, mono - arányos betűtípus (betűk azonos szélesség) serif.

Ha logikai stílusok előre nem ismert, amit a felhasználók fogják látni. A különböző böngészők ugyanazok tag logikai stílus másképp. Egyes böngészőkben normál szöveg helyett egy dedikált logikai stílusban. Elosztott következő logikai stílusok: . - az angol hangsúlyt - fókusz, . - nagy hangsúlyt, . - egy töredéke az eredeti szöveg, . - a minta az üzenet, . - azt jelzi, hogy meg kell adnia a billentyűzet, . - írni a változók neveit.

3. Dokumentum Layout

Amint már láttuk a dokumentum szerkezetét, akkor a fejlécek és bekezdések. Ezen túlmenően, a bekezdések szervezhető listákat.

Rendezetlen lista:
    .

A címkék közötti szöveget

    és
, tekintik rendezetlen listát. Minden új elemet a listában kezdődik tag
  • .

    Például, hogy hozzon létre itt egy lista:

    szükség van egy HTML-szöveget:

  • Ivan;
  • Daniel;
  • fehér kanca

    Megjegyzés: a címke

  • Nincs megfelelő záró címke.

    Számozott listák:
      .

    A számozott listák vannak elrendezve, valamint számozatlan, de ahelyett, hogy a karakterek, hogy a termék az új elem, a számokat. Ha módosítja az előző példában:

  • Ivan;
  • Daniel;
  • fehér kanca

    hogy itt egy lista:

    Az elem bármilyen lista tartalmazhat egy listát bármilyen. Száma szintek száma elvileg nem korlátozott, azonban visszaélni ágyazott listákat nem lehet. Beágyazott listák kényelmes előállítására mindenféle tervek és tartalomjegyzék.

    Formázott szöveget: 
    .

    A böngészők általában figyelmen kívül hagyják több szóköz vagy a sor vége. Ugyanakkor a címkék közötti szöveget 

     és
    (Az angol formázva - formázva), a böngésző a képernyőn megjelenő, mivel - az összes szóköz, tab és új sor.

    Építőipari hiperhivatkozások

    A legfontosabb jellemzője a HTML az a képesség, hogy tartalmazza a dokumentumok utalást egyéb dokumentumok. Referenciaként szöveges vagy grafikus lehet használni.

    1. egy távoli HTML-fájl vagy bármilyen fájlt, amely nem egy HTML-dokumentum
    2. egy bizonyos ponton (tag) az aktuális HTML-dokumentumot.

    Egy példa a linket egy másik HTML-dokumentum linkeket más fájlt.

    Miután a fájl nevét 5.htm, szimbólumok közötti> és <. указывается текст (5 класс), на котором производится щелчок для перехода на этот файл.

    A hivatkozás a tag nevét (PN) fel a # jelet. A szimbólumok között> és <располагается текст (Понедельник), на котором производится щелчок для перехода по ссылке.

    tag: hétfő

    4. Elhelyezés információt. asztalok

    Hogyan működik az asztalra?

    Eddig már foglalkozott a dokumentumokat, amelyekben csak egy volt „flow” a szöveget. A gyakorlatban néha szükség van, hogy gondoskodjon a szöveg több oszlopot. A táblázat segítségével. Ezen túlmenően, egy asztal, amely egyetlen sejt, hatékonyan ki egy darab szöveget, amelyre szeretné felhívni az olvasó figyelmét.

    A legegyszerűbb módja annak, hogy megértsük a készülék például az asztalra.

    10. példa

    Egy táblázat lehet egy címet
    Az első oszlop A második oszlop

    Táblázat kezdődik tag

    és végződik
    . A táblázat egy fejlécet (. ) Bár ez nem kötelező. Minden sorban kezdődik a címke és végződik . A tartalma sejtek közé zárt címkék .

    attribútumok tag
    • összehangolása - állítja a helyét az asztalnál kapcsolatos területeken a dokumentumot. Az érvényes értékek: align = "left" - balra igazított, középre - a középső, jobb - jobb.
    • szélesség - a szélessége az asztalra. Meg lehet állítani képpontokban (például, szélesség = 400), vagy százalékában az oldal szélességének (például, szélesség = 80%).
    • határ - beállítja a szélessége a külső keret az asztal és sejtek képpontokban (például határ = 1). Ha az attribútum nincs megadva, a táblázat jelenik meg keret nélkül.
    • cellspacing - a távolság a szomszédos pixelek a táblázatban sejtek és cellpadding - közötti távolság a keret a cella és a szöveg képpontokban (például, cellpadding = 10).

    attribútumok tag

    • összehangolása - vízszintbeállításán szöveget egy cellát a sorban.
    • valign - függőleges igazítás szövegének egy cellát a sorban. Az érvényes értékek: valign = felső - igazítja a felső szélén, középen - a középső, alsó - az alsó szélét.

    attribútumok tag

    • összehangolása és valign - vízszintes és függőleges szöveg a cellában.
    • szélesség és magasság - cella szélessége és magassága képpontokban (például, magasság = 40).
    • nowrap - cella tartalmát meg kell jeleníteni egy sorban.
    • colspan - létrehozza a „nagytakarítás” a horizontális sejtek. rowspan - swing függőleges sejt. Például, colspan = 3 azt jelenti, hogy a cella kiterjed három oszlop, és rowspan = 2 - sejt foglal két sor.

    Ha egy táblázat cella üres, nem rajzolja körül a keretet. Ha a keret van szükség, egy cellában, akkor adjuk meg a szimbólum a nem törhető szóköz -   (Nem törhető szóköz). A sejt üres lesz, de egy keretben. Táblázat sejt tartalmazhat újabb táblázatban.

    2. rész Cascading Style Sheets (CSS)

    1. Alapvető fogalmak CSS

    Mint már tudjuk, a HTML - egy sor konténer tárgyak, mint például a

    .

    , , .
    és mások. Az egyes tárgy, hogy meghatározza annak szabályait megjelenítésére a weboldal, más szóval - stílusban. Szabványos HTML megfelel egy sor beépített stílusok által használt alapértelmezett. Minden stílus határozza meg a sor objektum tulajdonságait.

    CSS technológiával (Cascading stíluslapok - Cascading Style Sheets) lehetővé teszi, hogy felülírják ezeket a tulajdonságokat.

    Például, hogy meghatározza a színét elem „h1”, mint a kék, rögzítésére elegendő:

    Ez ügyben a „szabály CSS» két részből áll:

    választó (h1) és a meghatározás ( "szín: kék).

    Meghatározása is két részből áll: a tulajdonságok ( „szín”) és értéke ( „kék”).

    A fenti példa csak az egyik érinti a tulajdonságait, de ez már egy stíluslapot. Együtt más stílusok, ő határozza meg a végső dokumentum formájában. Listaválasztókkal tulajdonságait és azok lehetséges értékeit meghatározott HTML specifikáció.

    Csatlakozás stílusok HTML-fájl

    Stíluslapok csatolni kell a HTML szöveget. Például:

    Kapcsolódó cikkek

    előző ◈ a következő