A HTML (HyperText Markup Language) egy speciális nyelv a szöveges dokumentumok formázására (más néven dokumentum jelölőnyelv - WWW dokumentumnézegető). A HTML egy meglehetősen egyszerű parancskészlet, amely leírja a dokumentum szerkezetét. A HTML lehetővé teszi, hogy különálló logikai részeket jelöljön ki a szövegben (címek, bekezdések, listák stb.), külön elkészített fotót vagy képet helyezzen el egy weboldalon, rendszerezzen az oldalon hivatkozásokat, hogy más dokumentumokra hivatkozzon.

A HTML nem határoz meg konkrét és pontos dokumentumformázási attribútumokat, például a Microsoft Word-t. A dokumentum típusát végül csak a program határozza meg. böngésző a számítógépeden. Éppen egy ilyen megközelítés szükségessége összefügg a hardver heterogenitásával és szoftver az internethez csatlakoztatott számítógépek. A HTML szintén nem programnyelv, de a weboldalak tartalmazhatnak beágyazott programokat - forgatókönyvek Javascriptben és Visual Basic Szkript és programok - kisalkalmazások a Java nyelven.

Szempontból Windows felhasználó, A weboldal egyszerűen egy *.htm vagy *.html fájl, amely egy internetes szerveren található helyi hálózat vagy a gép merevlemezén.

Ne feledje, hogy a HTML nem programozási nyelv, csak dokumentumok jelölésére szolgál. Azok. Valójában egy HTML-oldal létrehozásakor egyszerűen szerkesztheti a szöveget címkék használatával, ugyanúgy, mint egy normál szövegszerkesztőben. Minden címkének megvan a maga tulajdonsága, de mindegyik szögletes zárójelek között van.<" и ">", Például, , .

A HTML-ben minden címke két típusra oszlik – ezek párosított és párosítatlan. A párok azok, amelyek nyitó címkéjéhez zárócímke szükséges. A html-ben a záró címkéket perjellel jelöljük és így írjuk . A párosítatlan címkékhez nincs szükség záró címkére. Ilyen címkékre példa a sortörés címke.
. Vannak kötelező címkék is, amelyeket minden oldalon fel kell használni, és választható címkék is, amelyeket tetszés szerint használunk.

Az interneten található tartalom nagy része weboldal. Történelmileg ez a legelső dokumentumtípus, amelyet a virtuális hálózati térben helyeztek el, de továbbra is megőrzi relevanciáját, és gyakorlatilag nincs egymással versengő formátuma. Mi a weboldalak felépítése? Milyen webfejlesztő eszközöket használnak ezek létrehozásához?

Mi az a weblap?

„Felsoroljuk egy weboldal alapvető elemeit” – mondja egy vizsgáztató egy számítástechnika órán. Mit mondhatunk neki válaszul? Először is beszéljünk arról, hogy elvileg mi is az a weblap.

Az informatikusok körében általánosan elfogadott definíció szerint olyan dokumentumról van szó, amelyet egy speciális programban - böngészőben - nyitnak meg, és amely adatokat tartalmaz különféle hasznos tartalmak számítógép képernyőn történő megjelenítéséhez a megfelelő szoftvertípus segítségével - szövegek, linkek, grafikák, videók, zene stb. A weboldal egy szöveges dokumentum. A böngésző számára releváns adatok a betűk, számok és Különleges szimbólumok, jelölőnyelvi elemként használt - HTML. Ennek segítségével „elmagyarázza” a weblap készítője a böngészőnek, hogyan jelenítse meg ezt vagy azt a tartalmat a képernyőn.

A weboldalak helye és szerepe az oldalak szerkezetében

Mondhatjuk-e, hogy egy weboldal a weboldal fő alkotóeleme? Ez részben igaz. Azonban, ahogy fentebb megjegyeztük, a weboldal csak egy szöveges dokumentum. Az oldal általában képeket, videókat és egyéb multimédiás elemeket is tartalmaz. Egy weboldal nem tartalmazhatja ezeket, de szerkezetében tartalmazhat rájuk mutató hivatkozásokat. Így egy weblap nevezhető az oldal fő összetevőjének abból a szempontból, hogy vezető szerepet tölt be a virtuális tartalom felhasználók számára történő megjelenítésében.

Ritka esetekben természetesen a szóban forgó dokumentum lesz az oldal egyetlen összetevője - ha valamilyen oknál fogva nem biztosítja a grafika, videó és egyéb multimédiás elemek megjelenítését. Különösen a legelső webhelyek - amikor a weboldalak jelölőnyelvei először megjelentek - nem tartalmazták a megfelelő tartalmat. A felhasználó szeme előtt csak szöveg és linkek voltak.

A hipertext használatának elve

Tehát a weblap egy HTML-ben írt dokumentum, amelynek segítségével hipertext jelölést hajtanak végre. De mi is ez a jelenség? Mi az a hipertext? Anélkül, hogy túlságosan elmélyednénk az elméletben, megjegyezzük, hogy ez egy olyan szöveg, amely így vagy úgy lehetővé teszi, hogy gyors hozzáférés a másikhoz linkeken keresztül. Egy normál könyvben ez lehetetlen - van „sima szöveg”. Ahhoz, hogy hozzáférjen kívánt oldalt az olvasónak többször kell lapoznia, miután korábban megismerkedett a tartalommal vagy a lábjegyzetekkel. A "hiperszöveg" módban a munka nagy részét a számítógép végzi - az oldal HTML elemeiben tükröződő információk miatt.

Ha egy informatika tanár azt mondja nekünk: "Felsorolja egy weboldal fő elemeit", akkor helyesen indíthatunk történetet a megfelelő dokumentum összetevőiről, amelyek a nyelv használatával készültek. HTML jelölés. Ezért kezdésként nézzünk meg néhány elméleti pontot a HTML-lel kapcsolatban.

HTML nyelvi szerkezet: címkék

Hogyan olvassa ki a böngésző a weboldalról a szükséges adatokat egy HTML dokumentumból? Nagyon egyszerű.

Alapvető elemek adott nyelv címkék. A legtöbb esetben párosítva vannak - van egy nyitó és egy záró. Az előbbieket csak szögletes zárójelekkel jelöljük. A második hasonló, de a második zárójelet egy perjel – a / szimbólum – előzi meg. A böngésző képes felismerni őket, ezért probléma nélkül megjeleníti a weboldalak tartalmát a dokumentumfejlesztő által készített algoritmusoknak megfelelően.

A nyitó címkét általában nagybetűvel, a záró címkét kis betűkkel írják. Ez egy olyan szabvány, amely az informatikusok körében meghonosodott. A böngésző minden bizonnyal felismeri a HTML parancsot bármilyen betűben, de a webfejlesztőknek továbbra is azt tanácsoljuk, hogy tartsák be a megjelölt címkeírási sémát. Ez megkönnyíti például egy weboldal más szakemberek általi elkészítését.

Attribútumok

A HTML nyelv további fontos elemei az attribútumok. Segítségükkel a weboldal készítője beállíthatja a tartalom tulajdonságait – például a betűmagasságot, színt, az oldalhoz viszonyított pozíciót. Ugyanez vonatkozik a képekre, videókra és egyéb multimédiás összetevőkre. Az attribútumok a nyitó címkébe vannak írva.

Tartalom

A nyitó és záró címkék között található a weboldal következő kulcsfontosságú összetevője, a tartalom. Valójában ez az a tartalom, amelyet a felhasználó előtt kell megjeleníteni a képernyőn. Lehet szöveg, link, kép, videó vagy egyéb multimédiás elem.

Weboldal elemek

„Így sorolja fel végre egy weboldal alapvető elemeit!” - ismétli a tanár. – Örömmel – válaszoljuk neki. Mit tartalmaz a vizsgált dokumentumtípus szerkezete? Egyezzünk meg abban, hogy ezt a szempontot a weboldal HTML elemeivel összefüggésben vesszük figyelembe. Vagyis a böngészőben való megjelenítésük - amit a felhasználó a képernyőn lát - kisebb mértékben fog minket érdekelni. A helyzet az, hogy a megfelelő HTML algoritmusok, amelyek alapján a program ugyanúgy jeleníti meg a tartalmat, eltérőek lehetnek. És ez a HTML nyelv sajátossága: a kívánt kép egy weboldalon többféleképpen is megjeleníthető. Ugyanakkor lehetnek egyenértékűek a weboldal készítőjének munkaerő-költségeit tekintve, vagy eltérő erőfeszítést és időt jelenthetnek a megvalósításukhoz.

Weboldal elemei: fejléc

A weboldal standard elemei, bármennyire is meglepően hangzik, nagyon kis számban vannak jelen. Valójában csak kettő van belőlük - a dokumentum fejléce és törzse. Azonban mindegyiknek meglehetősen összetett szerkezete lehet.

Mik a fejléc sajátosságai? A weboldal legtetején található. A címsort generáló HTML általában azt feltételezi, hogy csak a szöveg van "titkosítva", de szükség esetén a megfelelő elembe kis grafikus betéteket is elhelyezhetünk. És tulajdonképpen ez minden, ami a címről elmondható. Úgy tűnik, hogy szerepe a megfelelő dokumentum szerkezetében jelentéktelen. De nem az. A weboldalak címei nagyon fontosak a webhelyek indexelése szempontjából a keresőmotorokban - Yandex, Google. Ez az elem teljes mértékben kapcsolódnia kell a weboldal tartalmához, valamint az oldal tematikus sajátosságaihoz.

Hogyan rögzíthető egy weboldal címe HTML használatával? Nagyon egyszerű. Először a nyitó címke kerül kiírásra, ami mindig úgy néz ki, mint HEAD szögletes zárójelekkel, majd a címsor tartalma, ezt követően a záró címke. Természetesen a webdokumentum legtetejére vannak írva.

Egy webdokumentum címe tartalmazhat egy sorozatot további elemek. Néha egy weboldal formátuma megkövetelheti, hogy a szöveget egy adott kódolásban jelenítsék meg. Hogyan biztosítható, hogy a webdokumentum megfeleljen ennek a feltételnek? Nagyon egyszerű. A dokumentumfejléc-struktúrának HTML-algoritmusokat kell tartalmaznia, amelyek egy adott nyelvi kódolás használatára utasítják a böngészőt – például cirill. A megfelelő parancsok belül helyezkednek el META tag, amely a többihez hasonlóan nyitó és záródó.

A weboldal fő része

A webdokumentum törzse a BODY címkével nyílik meg, és a megfelelő elemmel zárul, amely perjelet tartalmaz. Ugyanakkor a nyitó és záró címkék között a hiperszöveg jelölőnyelvének rengeteg további parancsa lehet. Ez annak köszönhető, hogy a weboldal fő része hasznos tartalmat - szövegeket, linkeket, grafikákat, videókat, különféle kitöltendő űrlapokat - tartalmazza.

Mindegyik tartalomtípusnak megvan a maga címkéje. A webdokumentum fő részének szerkezete tartalmazhat HTML-parancsokat, amelyek szöveg formázására is használhatók, például adott színt, méretet és egyéb tulajdonságokat adva a betűtípusnak.

Vessünk egy pillantást néhány gyakran használt HTML-címke sajátosságaira. Tulajdonképpen ezek alkotják a weboldal fő elemeit is.

Alapvető HTML-címkék

Tehát a cél érdekében részletes tanulmány Hogy mik a weblap elemei, nézzük meg közelebbről az alapvető HTML-címkék lényegét. Ezek egy részét már fentebb megadtuk - különösen azokat, amelyekkel a böngésző beolvassa a weboldalak fejléceit, és meghatározza, hogy hol található a dokumentum fő része.

A P címke meglehetősen gyakori, a hipertext jelölőnyelv más hasonló elemeihez hasonlóan nyitó és záró is lehet. Ez a címke lehetővé teszi a dokumentum egyetlen bekezdésének formázását. Beállíthat például egy adott betűtípust vagy színt. Ez azonban egy további címke - FONT - segítségével történik. Ezzel egyidejűleg a bekezdés határait jelzőbe kerül - ez lehetővé teszi, hogy a preferált betűtípust tükröző HTML-parancsot ne tegyük ki a weboldal többi elemére.

A táblázatok a TABLE címkével jönnek létre. A megfelelő attribútumok segítségével meghatározhatja a szükséges oszlopok és sorok számát, beállíthatja a szélességüket, a szegélyek sajátosságait, a táblázatban a szöveg betűtípusának méretét és színét.

Felelős a képek böngésző általi feldolgozásáért. Különféle attribútumokat is elhelyezhetünk benne, amelyek szabályozzák a kép méretét, pozícióját az oldalon.

A más webdokumentumokra vagy fájlokra mutató hivatkozásokat az A tag jelzi, amelyen belül általában olyan attribútumok találhatók, amelyek jelzik, hogy a weboldal szerkezete hiperhivatkozás. Ez azt a dokumentumot, fájlt vagy webhelyet jelzi, amelyre vezet.

Gyakori címke a FRAMESET. Ezzel egy weboldal terét több területre - keretekre - oszthatja fel. Mindegyikben lehetőség van webes dokumentumok elkülönítésére. Vagyis a keretek lehetővé teszik, hogy egyszerre két vagy több oldalt helyesen helyezzen el ugyanazon a képernyőn.

A weboldalak kulcsfontosságú elemeiről szóló történet, majd a HTML nyelv segítségével történő formázásuk módjairól szóló történet - valami ilyesmi lesz a vizsgáztató által feltett kérdésre adott válaszunk algoritmusa. Ha megkeresett minket azzal, hogy "sorold fel a weblap főbb elemeit", akkor a megfelelő módszertannal minden esélyünk meglesz a téma feltárására. Vagyis az "elemek" kifejezésen megérthetjük a webdokumentum szerkezetének kulcsfontosságú összetevőit, vagy tartalomtípusokat - szövegeket, képeket, táblázatokat, kereteket, hivatkozásokat, amelyeket a webmester olyan eszközzel, például HTML nyelvvel hoz létre.

A webfejlesztő eszközök sajátosságai

Az elmondottakon felül tisztázhatjuk, hogy a HTML szabványok rengeteg címkét és attribútumot biztosítanak. A HTML mellett a webfejlesztők is használhatják további pénzeszközök hipertext dokumentumok formázása. Például a JavaScript használatával dinamikus weboldalakat hozhat létre - vagyis azokat, amelyeken a tartalom folyamatosan frissül (mind maga a felhasználó tevékenysége miatt, mind a szkriptekben előre megírt algoritmusok szerint).

Hasznos lenne hozzátenni, hogy a webfejlesztő teljes értékű programozási nyelveket használhat a munkájában, mint például a Perl, PHP, Java, Python, amelyek segítségével a hipertext dokumentumokkal való munkavégzés lehetőségei nyílnak meg. még szélesebb. Ennek szükségességét az okozhatja, hogy a webes technológiák alkalmazási területei ma nagyon eltérőek. A modern fejlesztők előtt álló feladatok meglehetősen összetettek lehetnek. Például néha szükséges az orosz nyelven írt weboldalak angolra fordítása. Ebben az esetben a fejlesztő eszköztára lesz a legváltozatosabb.

A weboldal egy speciálisan formázott dokumentum, amely tartalmazhat szöveget, grafikát, hivatkozásokat, hangot, animációt és videót.

Több olyan weboldal, amelyeknek közös a témája, a design és a hivatkozások, és általában ugyanazon a webszerveren találhatók, egy webhelyet alkotnak.

Weboldal ait (angol nyelvből. weboldal: web- "web, hálózat" és webhely- "hely", szó szerint "hely, szegmens, része a hálózatban") - egy magánszemély vagy szervezet elektronikus dokumentumainak (fájljainak) halmaza számítógép hálózat, egy cím alatt (domainnév vagy IP-cím) kombinálva.

Minden oldal együtt alkot a világháló , ahol a kommunikáció (web) egyetlen egésszé egyesíti a világközösség információinak szegmenseit - adatbázist és bolygószintű kommunikációt. A kliensek közvetlen eléréséhez a szervereken lévő webhelyekhez speciális protokollt fejlesztettek ki HTTP .

A webhely felépítése olyan, mint egy magazin, amely egy témával vagy kérdéssel kapcsolatos információkat tartalmaz. Ahogy egy magazin nyomtatott oldalakból áll, a webhely számítógéppel generált weboldalakból áll.

A weboldalt megjelenítő programot webböngészőnek nevezzük.

A webhelyek létrehozása a hipertext dokumentumok HTML jelölőnyelvével valósul meg. A HTML technológia az, hogy a vezérlőkaraktereket (címkéket) beillesztjük egy egyszerű szöveges dokumentumba, és ennek eredményeként egy weblapot kapunk. A böngésző a weboldal betöltésekor a címkék által meghatározott formában jeleníti meg a képernyőn.

A HTML lehetővé teszi:

Szöveg formázása

képeket, multimédiát tartalmazzon a dokumentumban;

Ez a nyelv hipertext hivatkozásokat hoz létre más weboldalakra.

A HTML-t egy fájl információtartalmának létrehozására, valamint a weboldalak szerkezetének és formátumának meghatározására használják. Mivel a HTML fájlok egyszerű szöveges fájlok, az ilyen fájlok gyakorlatilag bármilyen számítógépre elküldhetők.

Weboldalak létrehozásához egyszerű szövegszerkesztőket használnak, amelyek nem tartalmaznak szövegformázási vezérlőkaraktereket a készülő dokumentumban. A Windows ilyen szerkesztőjeként használhatja szabványos alkalmazás"Jegyzetfüzet".

A weblapok kiterjesztése általában .html vagy .htm.

Ezenkívül számos olyan technológia létezik, amelyekben a webhelyek létrehozásának fő lépései már automatizáltak, csak a témájuknak megfelelő változtatásokat kell végrehajtani.

Egy HTML-oldal megtekintése olyan egyszerű, mint beírni az URL-t a webböngésző címsorába, majd követni a hiperhivatkozásokat. De pontosan ez a fő probléma - hogyan lehet megtudni az oldal címét? Leggyakrabban az történik, hogy tudod, mit kell találnod, de nem tudod, hogy pontosan hol keress. A probléma megoldására speciális keresőmotorok állnak rendelkezésre. A felhasználó szemszögéből kereső rendszer- ez egy normál oldal, amelynek főoldalán más oldalakra mutató hivatkozások találhatók címsorok szerint ("Sport", "Üzlet", "Számítógépek" stb.). Ezenkívül a keresőmotor lehetővé teszi, hogy a felhasználó többször is beírjon kulcsszavakatés visszaadja az ezeket a kulcsszavakat tartalmazó oldalakra mutató hivatkozásokat.

Weboldal

Weboldal (eng. Weboldal, webről - web és oldal - "hely") - számítógépes hálózatban, magánszemély vagy szervezet dokumentumainak halmaza, amely egy cím alatt egyesül. Alapértelmezés szerint a webhely az interneten található. Az összes internetes webhely együttesen alkotja a világhálót. A HTTP protokollt kifejezetten a szervereken lévő webhelyekhez való közvetlen kliens elérésére tervezték. A webhelyeket más néven egy személy vagy szervezet internetes képviselete. Amikor azt mondják, hogy „saját oldal az interneten”, az egy teljes webhelyet vagy egy személyes oldalt jelent valaki más webhelyének részeként. Az internetes webhelyek mellett mobiltelefonokhoz készült WAP-oldalak is elérhetők.

Kezdetben a weboldalak statikus dokumentumok gyűjteményei voltak. Jelenleg legtöbbjükre a dinamizmus és az interaktivitás a jellemző. Ilyen esetekre a szakértők a webalkalmazás – kész kifejezést használják Szoftver csomag a weboldal problémáinak megoldására. A webalkalmazás egy webhely része, de az adatok nélküli webalkalmazás csak technikailag webhely.

Az interneten a legtöbb esetben egy webhely egy domain névnek felel meg. A webhelyek azonosítása domain nevek alapján történik globális hálózat. Más lehetőségek is lehetségesek: egy webhely több domainben vagy több webhely egy domain alatt. Általában több domain nagy webhelyeket (webportálokat) használ a logikai elválasztáshoz különböző típusok nyújtott szolgáltatások (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Gyakran előfordulnak olyan esetek is, amikor külön domaineket osztanak ki a számára különböző országok vagy nyelvek. Például a google.ru és a google.fr logikailag egy Google webhely különböző nyelveken, de technikailag különböző webhelyek. Az ingyenes tárhely esetében jellemző, ha több webhelyet egyesít egy domain alatt. A webhelyek azonosításához a címben a gazdagép megadása után van egy tilde és a webhely neve: example.com/~my-site-name/.

Mielőtt elkezdenénk a HTML- és CSS-alapú webhelyek létrehozásáról szóló oktatóanyagokat, fontos megértenünk a két nyelv közötti különbségeket, az egyes nyelvek szintaxisát és néhány alapvető terminológiát.

Mi az a HTML és CSS?

A HTML (HyperText Markup Language) a tartalom szerkezetét és jelentését határozza meg az ilyen tartalmak, például címsorok, bekezdések vagy képek meghatározásával. A CSS (Cascading Style Sheets) vagy a Cascading Style Sheets egy prezentációs nyelv, amely a tartalom megjelenésének megtervezésére szolgál, például betűtípusok vagy színek használatával.

Ez a két nyelv, a HTML és a CSS, független egymástól, és így is kell maradnia. A CSS-t nem szabad HTML dokumentumba írni, és fordítva. Általános szabály, hogy a HTML mindig a tartalmat képviseli, a CSS pedig mindig meghatározza a stílusát.

A HTML és a CSS közötti különbség megértésével merüljünk el részletesebben a HTML-ben.

Alapvető HTML kifejezések

Mielőtt elkezdené a HTML-lel való munkát, valószínűleg új és gyakran furcsa kifejezésekkel találkozik. Idővel mindegyiket részletesebben megismeri, de egyelőre érdemes a három alapvető HTML-kifejezéssel kezdeni – elemek, címkék és attribútumok.

Elemek

Az elemek meghatározzák, hogyan lehet meghatározni az oldalon lévő objektumok szerkezetét és tartalmát. Egyes gyakran használt elemek több szintű címsort tartalmaznak (amelyek a következőkkel vannak meghatározva:

előtt

) és bekezdések (meghatározása:

); tételek hozzáadhatók a listához ,

, , És és sokan mások.

Az elemek azonosítása szögletes zárójelek segítségével történik<>, amely körülveszi az elem nevét. Tehát az elem így fog kinézni:

címkéket

Szögletes zárójelek hozzáadása< и >létrehoz egy úgynevezett címkét egy elem körül. A címkék leggyakrabban nyitó és záró címkepárokban fordulnak elő.

A start címke egy elem kezdetét jelöli. A szimbólumból áll<, затем идёт имя элемента и завершается символом >; Például,

.

A végcímke egy elem végét jelöli. A szimbólumból áll< с последующей косой чертой и именем элемента и завершается символом >; Például,

.

A kezdő és záró címke közötti tartalom az adott elem tartalma. A linknek például nyitócímkéje lesz és záró tag. Ami e két címke között van, az lesz a hivatkozás tartalma.

Tehát a linkcímkék valahogy így néznek ki:

...

Attribútumok

Az attribútumok a biztosításhoz használt tulajdonságok további információ az elemről. A leggyakoribb attribútumok közé tartozik az id attribútum, amely az elemet azonosítja; az osztály attribútuma, amely osztályozza az elemet; az src attribútum, amely a beágyazott tartalom forrását adja meg; és a href attribútum, amely a kapcsolódó erőforrásra mutató hivatkozást ad meg.

Az attribútumok az elem neve utáni nyitó címkében vannak meghatározva. Általában az attribútumok egy nevet és egy értéket tartalmaznak. Ezen attribútumok formátuma az attribútum nevéből áll, amelyet egy egyenlőségjel követ, majd az attribútum értéke idézőjelben. Például elem a href attribútummal így nézne ki:

Shay Howe

Az alapvető HTML-kifejezések bemutatása

Ez a kód a "Shay Howe" szöveget jeleníti meg egy weboldalon, és ha erre a szövegre kattint, a felhasználó a http://shayhoe.com címre viszi. A link elemet egy start tag deklarálja és záró tag befoglaló szöveget, valamint a nyitó címkében a href="http://shayhowe.com" karakterlánccal deklarált link címének attribútuma és értéke.

Rizs. 1.01. A séma HTML szintaxisa elemet, attribútumot és címkét tartalmaz

Most, hogy tudja, mik a HTML elemek, címkék és attribútumok, nézzük meg együtt első weboldalunkat. Ha valami újnak tűnik itt, ne aggódjon – menet közben megfejtjük.

A HTML-dokumentum szerkezetének testreszabása

A HTML-dokumentumok egyszerű szöveges dokumentumok, amelyeket .txt helyett .html kiterjesztéssel mentenek el. A HTML írásának megkezdéséhez először szüksége van szöveg szerkesztő amelyet kényelmesen használhat. Sajnos ebbe nem tartozik bele a Microsoft Word vagy a Pages, mivel ezek összetett szerkesztők. A két legnépszerűbb szövegszerkesztő HTML és CSS írására a Dreamweaver és Magasztos szöveg. Ingyenes alternatívák Lásd még: Notepad++ for Windows és TextWrangler for Mac.

Minden HTML dokumentum tartalmaz egy kötelező szerkezetet, amely a következő deklarációkat és elemeket tartalmazza: , , És .

Közlemény dokumentum típus vagyegy HTML-dokumentum legelején található, és közli a böngészőkkel, hogy a HTML melyik verziója van használatban. Mivel használni fogjuk legújabb verzió HTML, a dokumentumtípusunk egyszerűen az lesz. Utána jön az elem a dokumentum elejét jelöli.

Belül elem meghatározza a dokumentum tetejét, beleértve a különböző metaadatokat (az oldalról szóló kísérő információkat). Tartalom egy elemen belül magán a weboldalon nem jelenik meg. Ehelyett tartalmazhatja a dokumentum címét (amely a böngészőablak címsorában jelenik meg), bármilyen külső fájlra mutató hivatkozást vagy bármilyen más hasznos metaadatot.

A weboldal minden látható tartalma az elemben lesz . Egy tipikus HTML-dokumentum szerkezete így néz ki:

Helló Világ!

Ez egy weboldal.

HTML dokumentum szerkezetének bemutatása

Ez a kód mutatja a bizonylatot, kezdve a bizonylattípus deklarációjával,, majd közvetlenül az elem következik . Belül go elemeket És . Elem tartalmazza az oldal kódolását a címkén keresztül és az elemen keresztül a dokumentum címe

Ideje tesztelni munkánkat, és megnézni, hogyan illeszkedik egymáshoz a HTML és a CSS. Az index.html fájl megnyitása (vagy az oldal frissítése, ha az már nyitva van) a böngészőben kissé eltérő eredményt mutathat, mint korábban.

Rizs. 1.04. Stíluskonferencia webhelyünk CSS-visszaállítással

Demo és forráskód

Alább megtekintheti a Styles Conference weboldalát jelenlegi állapotában, valamint letöltheti forrás webhely jelenleg.

Összegzés

Szóval minden rendben! Ebben az oktatóanyagban nagy lépéseket tettünk.

Gondoljon csak bele, most már ismeri a HTML és a CSS alapjait. Ahogy folytatjuk, és egyre több időt tölt HTML és CSS írásával, sokkal kényelmesebben fog dolgozni ezzel a két nyelvvel.

Emlékezzünk vissza, hogy a következőket vettük figyelembe:

• A HTML és a CSS közötti különbség.
• HTML elemek, címkék és attribútumok bemutatása.
• Az első weboldal szerkezetének beállítása.
• Bevezetés a CSS-szelektorokba, tulajdonságokba és értékekbe.
• Munka CSS-szelektorokkal
• Mutató a CSS-re HTML-ből.
• A CSS visszaállításának jelentősége.

Most nézzük meg közelebbről a HTML-t, és ismerkedjünk meg egy kicsit a szemantikával.

Források és linkek

• Gyakori HTML kifejezések a Scripting Master segítségével
• CSS-kifejezések és meghatározások lenyűgöző webeken keresztül
• CSS-eszközök: Állítsa vissza a CSS-t Eric Meyer segítségével

Egy jó minőségű weboldal elkészítése nem egyszerű, a szép és stílusos dizájnhoz nemcsak tervezői képességekre van szükség, hanem programozási tapasztalatra is. Egy adott webhely létrehozásához szükséges programok összetettsége és mennyisége számos tényezőtől függ, például a felépítéstől, a céltól, a funkcionalitástól, a megbízhatóságtól és a webhelyet a „ragadós” információk (spam, szemét) és vírusok elleni információs támadásoktól védő rendszertől.

A webtechnológia (hipertext technológia) lehetővé tette az interneten közzétett dokumentumok teljes készletének egyetlen rendszerbe - WWW -ba való kapcsolását. A hiperszöveges dokumentum hiperhivatkozásokat tartalmaz. Általában színnel és aláhúzással vannak kiemelve. A hiperhivatkozások segítségével a felhasználó azonnal a kívánt dokumentumra ugorhat, függetlenül annak fizikai helyétől. Ez nagyban megkönnyíti az információkeresést az interneten.

Hipertext bontás használata szöveges dokumentum A modern információs rendszerekben nagyrészt annak a ténynek köszönhető, hogy a hipertext lehetővé teszi az információ nem lineáris megtekintésére szolgáló mechanizmus létrehozását. Az ilyen rendszerekben az adatok nem folyamatos adatfolyamként jelennek meg. szöveges információk, hanem egymással összefüggő összetevők halmaza, amelyeken keresztül az átmenetet hiperhivatkozások segítségével hajtják végre.

Ha beszélünk róla HTML dokumentumok létrehozása, kialakulásának két módját tudjuk elképzelni.

Az első egy meglévő (vagy készülő) dokumentum manuális megjelölése. Ebben az esetben a szerző vagy a szerkesztő jelölőcímkéket ad a dokumentumhoz. Ezt a munkát szövegszerkesztőben, ill HTML szerkesztő, amely speciális vezérlőkkel rendelkezik, amelyek megkönnyítik a címkék beírását. Mindkét esetben a munka HTML nyelven történik, és a munkát végző személynek ismernie kell és tudnia kell ezt a nyelvet.

Egy másik megközelítés alapelvei megérthetők a szövegszerkesztők működésének tanulmányozásával. A dokumentum formázási információi úgy is felfoghatók, mint a formázandó dokumentumhoz hozzáadott "jelölés". A szövegszerkesztő használatához azonban nem szükséges a dokumentumformátum és a "jelölőnyelv" ismerete: a képernyőn megjelenő változtatások automatikusan megtörténik a dokumentumon. Ezt az elvet, amely szerint a képernyőn látható kép igazodik a valódihoz, WYSIWYG-nek (weiseweg) hívták (az angol What You See Is What You Get (voch yu si is voch yu gat) szóból – What you see is what you get).

Lehetővé teszik teljes weboldalak (portálok) létrehozását és az összes modern technológia alkalmazását. Az ilyen webszerkesztők nagyon alkalmasak a szakemberek számára. Ha MS Office-t használ, használhatja a FrontPage-et ebből a csomagból. A Netscape Communicator részeként létezik a Netscape Composer is. Használhatja a Macromedia HomeSite webszerkesztő bemutató verzióját is, ha letölti az Adobe hivatalos webhelyéről: www.adobe.com.

Az első módszer sokoldalúbb, jobb minőségű és változatosabb dokumentumok létrehozását teszi lehetővé. A második módszer könnyebben megtanulható, mivel nem igényel HTML nyelv ismerete. Ebben az esetben azonban a leíró eszközök helyett formázási eszközöket használnak, ami néha nemkívánatos következményekkel járhat.

Tehát weboldalak létrehozásához szöveg- vagy webszerkesztőre lesz szüksége. Meg kell jegyezni, hogy minden webszerkesztőnek tartalmaznia kell egy szövegszerkesztőt is, ma már léteznek webszerkesztők nagyszámú, de három a legerősebb:

1. Macromedia Dreamweaver (macromedia Dreamweaver);

2. Allaire HomeSite (minden kezdőoldal);

3. Microsoft címlap(Microsoft Font Page).

Lehetővé teszik teljes weboldalak (portálok) létrehozását és az összes modern technológia alkalmazását. Az ilyen webszerkesztők nagyon alkalmasak a szakemberek számára. Ha MS Office-t használ, használhatja a FrontPage-et ebből a csomagból. A Netscape Communicator részeként létezik a Netscape Composer is. Használhatja a Macromedia HomeSite webszerkesztő bemutató verzióját is, ha letölti az Adobe (Adobe) hivatalos webhelyéről: www.adobe.com. Böngészővel lépjen a Letöltések / Próbaletöltések szakaszban a megadott webhelyre, és válassza a Macromedia, HomeSite lehetőséget.

Használhatja a FrontPage Express orosz verzióját a honosított Internet Explorerből – ez a FrontPage rövidített változata, de kezdetben nagyon kényelmes. A Visual Workshop webszerkesztő oroszul is ismert (http://www.snkey.net/download/products/index.html).

A modern internetes szolgáltatások kész webhelykészítőket kínálnak. Tekintse meg őket a "Saját webhely" webhelykészítő (www.narod.yandex.ru) példájával. Ezzel helyet kaphat webhelyének ( kezdőlap) és 5 perc alatt készítse el saját weboldalát képekkel, fotókkal stb.

A weboldal fejlesztési folyamat három lépésből áll:

1. bejárat a helyszíni kivitelezőhöz;

2. regisztráció, telephelynév hozzárendelés;

3. oldal tervezése üresek felhasználásával.

Egyedi, kézzel készített webhely létrehozásához más webes eszközökre van szükség.

A HTML- és webhelykészítőkön kívül más weboldal-programozási eszközöket is használhat. Az oldalak egyik programozási eszköze a CGI (CGI AI) (Common Gateway, Common Gateway).

A CGI elve egyszerű és természetes: egy szerveroldali program vesz néhány adatot, feldolgozza azokat, és weboldal formájában választ ad. Ez manapság nagyon gyakori jelenség, és néha nem is sejti, hogy nem egy hétköznapi oldallal, hanem egy CGI script (kód) eredményével van dolgunk. A CGI hatóköre széles, a célok pedig változatosak. A programozási nyelvnek, amelyen a szkriptet írják, rugalmasnak és ugyanakkor hatékonynak kell lennie, mivel nem csak a fájlokkal kell állandóan dolgozni, hanem az adatbázissal, az operációs rendszerrel és a webszerverrel is. A CGI programozáshoz legalkalmasabb nyelvek a C (C++) és a Perl. Ez utóbbit használják leggyakrabban ilyen célokra egyszerűsége, megbízhatósága és a lehetőségek szélessége miatt.

A C nyelv joggal tekinthető univerzálisnak, és megtalálta a helyét a CGI környezetben. Használata természetes a natív elemében - a Unixban, amelyre a legtöbb esetben egy weboldal épül.

A CGI programozáshoz a C++ nyelvet is használják, ami bizonyos objektumok osztályokon keresztül megvalósított létrehozását és megsemmisítését jelenti – tulajdonképpen a felhasználó által definiált adattípusok. Természetes például, hogy létrehozunk egy Guestbook vagy DataBaseEntry osztályt, amely tartalmazza a szükséges változókat és függvényeket. Érdemes megjegyezni, hogy szinte minden új programozási nyelv (Java, JavaScript, Perl) tartalmaz a C konstrukciókhoz hasonló vagy ahhoz hasonló konstrukciókat. pontos másolatok. Ezért javasoljuk, hogy először ezt az alapvető nyelvet tanulja meg.

A Perl nyelv egyedülálló. Először is hiányoznak az adattípusok, ami CGI-szkriptek írásához jó. Másodszor, sok konstrukciót átvesznek a C-ből. Meg kell jegyezni, hogy a Perl gyakran használ a Unix Shell-szkriptekben használt reguláris kifejezésekhez hasonlókat. Van egy kényelmes foreach ciklus és gyönyörű, valójában kifejezésmódosítók. A Perl rendelkezik egy szabványos könyvtárral, amely magában foglalja a keresést, a webszervert, a grafikát és így tovább. Ebből arra következtethetünk, hogy egy Unixban járatos programozó számára nem lesz nehéz megtanulni a Perlt. Egy ilyen program megírásához elegendő, ha a Perl fájljaival, és egy kicsit a webszerver környezeti változóival is dolgozhatunk.

A webes dokumentumok létrehozásának folyamata hasonló a programozáshoz, és szintén hajlamos a hibákra. A dokumentum létrehozásának módjától függetlenül rendszeresen ellenőriznie kell a konzisztenciáját a különböző böngészőkben való megtekintéssel. Az eredményül kapott oldal művészi értékeléséhez független véleményt kell kikérni.

Kérdések az önkontrollhoz:

1. Mit jelent a HTML dokumentum fogalma?

2. Milyen előnyei vannak ennek a dokumentumtípusnak?

3. Mit jelent a "címke" kifejezés?

4. Milyen típusú címkék léteznek?

5. Mit tartalmaznak a címkekezelő objektumok?

www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm

http://dvo.sut.ru/libr/ite/i280levc/index.htm Yu.P. Levchuk, E.P. Okhincsenko, A.D. Szotnyikov, T.A. Fomenko INFORMATIKA 2. rész INTERNETTECHNOLÓGIÁK

1. Weboldal ( HTML dokumentum) képviseli:

a) .txt vagy .doc kiterjesztésű szöveges fájl;

b) .htm vagy .html kiterjesztésű szöveges fájl;

c) bináris fájl .com vagy .exe kiterjesztéssel;

d) .gif vagy .jpg kiterjesztésű grafikus fájl.

2. Az internetes weboldalak megtekintéséhez a következő programokat kell használni:

a) Microsoft Word vagy Word Pad;

b) Microsoft Access vagy a Microsoft Works;

c) Internet Explorer vagy NetScape Navigator;

d) HTMLPad vagy Front Page.

3. A címke:

a) utasítást a böngészőnek, amely jelzi, hogyan kell a szöveget megjeleníteni;

b) speciális karaktereket használó szöveg;

c) egy másik fájlra vagy objektumra mutató mutató;

d) egy weboldalon szereplő programrészlet.

4. A hiperszöveg:

a) nagyon nagy szöveg

b) nagy betűméretet használó szöveg