Mint már említettük, a HTML ma az alapja a világháló bármely weboldalának írásának. Használata CSS létrehozása A HTML nyelv kódja alapvetően megváltozik. Búcsút inthet az ügyetlen újrafelhasználásnak HTML címkék csak hogy az egyiket vagy a másikat megszerezze vizuális effektek. Bizonyos HTML-címkékről vagy attribútumokról, például az elavult címkéről...

itthon

Rendeljen weboldalt és vállalkozzon!

Ez a mondat sok oldalon hallható és látható, és nem hiába!

Weboldal — a cég arca. És ez a legmodernebb és leghatékonyabb kommunikációs csatorna a potenciális fogyasztókkal. Csak az internetes oldal lehetőségei teszik lehetővé az összes jelentéstételi mód teljes körű használatát információs üzenet a felhasználón múlik. Szöveges, hang- és videoinformáció egy oldalon belül küldhető be, hogy megismertesse a fogyasztót velük.

Használva szoftver oldalon fogadhat fizetést, beszélhet telefonon, karbantarthat adatbázisokat, küldhet és fogadhat faxot, válthat SMS üzenetekés sok más dolgot is csinál. Modern internet a weboldal nemcsak bármely cég információs központja, hanem bármely internetfelhasználó számára is.

És ez egy mindenki számára előnyös módja annak, hogy ötleteit vagy fejlesztéseit hatékonyan, ugyanakkor egyszerűen és vizuálisan mutassa be a legszélesebb közönségnek. És ma továbbra is a HTML hiperszöveg jelölőnyelven írt webdokumentumok jelentik az adatábrázolás fő formáját a webes környezetben.

A HTML fő előnyei:

• egyszerűség, amely lehetővé teszi a HTML megtanulását a lehető legrövidebb idő alatt.
• saját létrehozásának lehetősége weboldalak
• és a HTML pontosan ugyanúgy működik minden ma létező platformon, nincs szükség további hardver vásárlására. És csak használja bármelyik elérhető szövegszerkesztőt, például a Jegyzettömböt.

Ezen az oldalon igyekeztem részletesen leírni a saját webhelyem létrehozásának teljes folyamatát, nevezetesen egy kész projekt közzétételét az Interneten, hogy minden felhasználó számára elérhetővé tegyen.

Remélem, sok cikkem nagyon hasznos lesz, mert én magam nem vagyok programozó, de nagyon inspirál ez a munka.

HTML- a dokumentum hipertext jelölésének nyelve. Ezzel szövegeket írhat más oldalakra mutató hivatkozásokkal, táblázatokat, listákat hozhat létre, képeket tartalmazhat és még sok mást. Ezt a nyelvet weboldalak írásához használják.

» html kezdőknek

» Főoldal

» html kezdőknek

A html nyelv alapvető címkéi (leírói).

A klasszikus HTML oktatóanyagok hagyományai szerint a legegyszerűbb hipertext dokumentumot mutatjuk be.

Itt van az első szintű címsor

Üdvözöljük az Interneten!

Első és utolsó bekezdés.

Ebben a példában a következő hipertext kifejezéseket (úgynevezett címkéket) használtuk:

A dokumentum neve

Ez nem szabály, de még csak nem is törvény, ez tény:

Minden HTML dokumentumnak van címe.

Más böngészők a HTML-dokumentum neve alapján találhatnak információkat. A cím helye mindig meghatározott - a képernyő tetején található, és elkülönül a dokumentum tartalmától. A név maximális hossza 40 karakter.

Formázás

A formázás lehet közvetlen vagy szerzői. Ha a címkét használja

A következő címkék a közvetlen formázásra vonatkoznak:

Bekezdés.

Sortörés.

Címsorok és alcímek

A HTML nyelv lehetővé teszi, hogy hat szintű címsorral dolgozzon. Az első címsor a legfontosabb. Meg van szólítva Speciális figyelem. Más címsorok stílusozhatók, pl. kiemelten vagy nagybetűvel.

A HTML-ben az első címsor jelölése:

:

Szöveg

Az n a címsor szintjére utal, azaz az 1, 2, 3, 4, 5 vagy 6 számokra.

A HTML-ben az első címsor megegyezhet a dokumentum címével.

A listák számozatlan részekre vannak osztva:

Listaelem

számozott:

Listaelem

leírásokkal:

Kutya (elem)

Az ember barátja (elem leírása)

és beágyazott:

Primus

Újabb primus

Szöveg kiválasztása

A HTML-dokumentumban lévő szöveget a következő módok egyikével lehet kiemelni:

- idézet

- programkód

- meghatározás

- logikus hangsúly

- billentyűzet bemenet

- számítógépes üzenetek

- erős akcentussal

- változók

Egy nagy bekezdés

A sortörés nem fontos a HTML-ben. Ez azt jelenti, hogy a dokumentumban bárhol megtörheti a sorokat. Ez annak a ténynek köszönhető, hogy egy hipertext dokumentumban az egymást követő szóközök eggyé alakulnak. De! Ha a szóköz a címke után van

Ezt figyelembe veszik. Ha bármilyen címke figyelmen kívül hagyja, akkor a térközt is figyelembe veszi. Más esetekben a böngésző kihagyja a szóközt.

A HTML lehetővé teszi, hogy szöveget vagy képet más hipertext dokumentumokhoz kapcsoljon. A szöveg általában színes vagy aláhúzott.

A címkét erre használják. . Ne feledje, hogy az A betű után szóköznek kell lennie.

¦ tárcsázza

¦ írja be: HREF=”fájlnév”>

¦ típusú címkét

Bob

Itt a Bob szó a BobAnapa.html dokumentumra utal, hipertext hivatkozást képezve.

Bob

Ha teljes képzésű fájlnevet szeretne megadni, akkor UNIX szintaxist kell használnia.

protokoll: //hostport/útvonal

Szöveg előzetes formázása

Címke

Lehetővé teszi szöveg létrehozását egyszóközű betűtípussal.

 
Használja ezt a címkét a programlisták megtervezéséhez.
 
Bővített idézetek
 
Címke 
lehetővé teszi, hogy idézetet foglaljon egy magányos objektumban.

 
Címke 
lehetővé teszi, hogy információkat generáljon a HTML dokumentum szerzőjéről.

 
Kényszerített soremelés
 
Címke 
csak egy sort fordít le, vagyis extra szóköz nélkül.
 
Vízszintes elválasztók
 
Címke 
vízszintes vonalat képez az ablak teljes szélességében.

 
Beágyazott képek
 
Képeket ágyazhat be a dokumentumba.  A szövegközi kép szintaxisa a következő:
 

 
Itt az image_URL egy képfájlra mutató mutató, amelynek szintaxisa megegyezik egy HTML hivatkozáséval.
A mai cikk egy nagyon fontos témát érint a kezdő programozók és webtervezők körében, nevezetesen a HTML-szerkesztő kiválasztásának témáját.  A speciális szoftverek teljes listájának bemutatása után nehéz a legjobb választást meghozni a helyszínen - minden program exkluzív, és számos saját tulajdonsággal, előnyével és hátrányával rendelkezik.  Szerencsére a fenti szakmák nagyszámú embere körében, eredményes munkájuk évei alatt, kialakult egy "munkalista" a legoptimálisabb HTML-dokumentumok és különösen az internetes oldalak készítésére és szerkesztésére szolgáló programokról.  Ez az anyag hat HTML szerkesztő figyelembevételével foglalkozik.  Figyelembe véve a keletkezett cikk nagy terjedelmét, nem késlekedünk a bevezetéssel, és azonnal nekilátunk a dolognak.
Tehát az első HTML-szerkesztő, amelyre megakadt a szemünk, a Macromedia HomeSite volt.
A Macromedia HomeSite talán az egyik legnépszerűbb HTML-dokumentumszerkesztő eszköz az oldalak kézi kódolását kedvelő felhasználók körében.  Ugyanakkor a HomeSite lehetővé teszi, hogy jelentősen felgyorsítsa magát a létrehozási folyamatot, és megkönnyítse a fejlesztő munkáját.
Kép nagyítása
A program munkaterülete feltételesen három részre osztható: az első, a legnagyobb - a tényleges ablak a dokumentum tartalmával, a második rész, amely balra található, alapértelmezés szerint a lemezen elérhető dokumentumok listáját tartalmazza.  És végül a tetején a hagyományos menü mellett több panel is található a leggyakrabban használt funkciókkal, amelyek megjelenése azonban ízlés szerint testreszabható.
A Macromedia HomeSite kényelmes szintaxiskiemelést biztosít nemcsak HTML-oldalakhoz, hanem PHP, Perl, ASP, MySQL és más népszerű fejlesztőeszközökhöz is.  Ez a tény azoknak a tapasztalt felhasználóknak fog tetszeni, akik nem korlátozódnak a hipertext jelölőnyelv eszközeire, és bonyolultabb webes programozási nyelveket használnak.  Ha nem elégedett a jelenlegi szintaxis kiemelő színsémával, akkor ez nem probléma - szerkesztheti a meglévőt, vagy akár saját dokumentumtervezési sémát is készíthet.  A HomeSite egy hatékony súgórendszerrel rendelkezik, amely a HTML nyelvi specifikációs program képességeinek leírásán kívül tartalmaz egy címke hivatkozást, valamint kényelmes eszköztippeket tartalmaz az aktuális leíróhoz - ezek meghívásához csak nyomja meg az F2 billentyűt, és a felhasználónak megjelenik az összes lehetséges attribútum. ehhez a címkéhez.
A gyakran használt címkecsoportokhoz való hozzáférés felgyorsítása érdekében a jobb felső sarokban több panel található, amelyek megjelenése és elhelyezkedése is módosítható.
A panel több lapra van felosztva, amelyek mindegyike egy csoporthoz tartozó címkéket tartalmaz.  Például a Betűtípusok lap gombokat tartalmaz a betűméret gyors növelésére, a stílus megváltoztatására, a vonalhoz viszonyított helyzetére, valamint három szintű címsor beszúrására.
A címke összes attribútumának manuális megadásának alternatív módja az úgynevezett Címkeszerkesztő - egy címkeszerkesztő, amely nagyban megkönnyítheti a különböző attribútumokhoz való értékek hozzárendelését.
Külön érdemes megjegyezni a táblák és keretek létrehozására és konfigurálására szolgáló eszközöket - Table Wizard és Frame Wizard, amelyek lehetővé teszik a fejlesztő életének jelentős megkönnyítését összetett szerkezetű táblázatok és keretek létrehozásakor.
Képzeld csak el, mennyi időbe telne egy ilyen asztal kézzel történő elkészítése!
Meg kell jegyezni, hogy a Homesite tartalmaz egy beépített helyesírás-ellenőrzőt, amely nemcsak a használt leírók helyességét ellenőrzi, hanem magának a szövegnek a helyességét is, valamint egy szerkesztőt a CSS-fájlokhoz - a TopStyle nevű lépcsőzetes stíluslapokat.
A dokumentumok létrehozásának felgyorsítása érdekében használhatja a billentyűkódokat – a HomeSite hatalmas tevékenységi területet biztosít a billentyűzet szerelmeseinek.  Például címke 
megfelel a Ctrl+Break billentyűkombinációnak.  A felhasználó azonban szabadon hozzárendelhet kényelmes billentyűparancsot szinte minden parancshoz.
Profik.  A program előnyei közé tartozik a funkcionalitás, a sokoldalúság, a különböző programozási nyelvek támogatása, az áttekinthető felület, a rengeteg lehetőség és a hatékony súgórendszer.  Mínuszok.  Az orosz nyelv támogatásának hiánya, magas ár, legalább felületes HTML nyelvtudás kell az oldalak létrehozásához, a program magas ára.
A Macromedia HomeSite legújabb verzióját innen töltheti le.
A SiteEdit programot az orosz EdgeStile cég hozta létre, és a fejlesztők tartalomkezelő rendszerként helyezték el.  A HomeSite-tel ellentétben a SiteEdit az úgynevezett vizuális fejlesztő eszközökhöz tartozik - WYSIWYG szerkesztőkhöz (a nagybetűvel kifejezések Amit látsz, azt kapod – "amit látsz, azt kapod").
A program első indítása után megjelenik kész sablon weboldal.
A teljes csomópont szerkezetét a következőképpen ábrázoljuk különféle oldalak több szakaszt tartalmaz.  Egy szakasz viszont több bejegyzést vagy objektumot is tartalmazhat.  Szerkesztési módba kapcsolva (alapértelmezett F9) lehetőségünk van a szerkesztésre meglévő szakaszokés új bejegyzéseket adjon hozzá, módosítsa egy meglévő bejegyzés szövegét vagy adjon hozzá új bejegyzést.
A "Szakasz módosítása" gombra kattintás után egy új ablak jelenik meg, amelyben ezt az egyszerű műveletet végezheti el:
A közvetlen szövegszerkesztésen túlmenően a felhasználó hozzáférhet a betűstílus megváltoztatására, kép beillesztésére szolgáló gombokhoz, mostani dátum, táblázat hozzáadása, hiperhivatkozás beszúrása, felsorolásjeles vagy számozott lista létrehozása – mindezt egyetlen egérkattintással.  Aki ismeri a HTML nyelvet, az nem korlátozódhat a fenti funkciókra, hanem egyszerűen kézzel írja meg a szükséges kódot.  Mivel a szerkesztőablakban nincsenek olyan sallangok, mint a szintaktikai kiemelés, a HTML gombra kattintva külső szerkesztőt hívhatunk, amelyben minden szükséges változtatást elvégezhetünk.
A program számos tervezési sablont kínál: könyv, galeon, kafe, palm_skin, stroitel, amelyeknek köszönhetően jelentősen megváltoztathatja az egész webhely megjelenését.
Minden oldalelem szerkeszthető.  A radikálisabb dizájnváltoztatáshoz létezik egy tervezési szerkesztő, amely a legszélesebb lehetőségeket kínálja az oldalon található összes elem megváltoztatására.


kép nagyítása
A bal oldalon az elemek listája, a jobb oldalon - az oldalon való megjelenésük, alulról ablakok találhatók egy adott leíró attribútumainak értékeinek megváltoztatásához.  Például a következő attribútumok állnak rendelkezésre a Font címkéhez: szín, méret, súly, stílus, ferde aláhúzás, térköz.  A kezdőknek tetszeni fog a mezők kitöltésének módja - nem kell semmit kézzel beírnia, csak válassza ki a kívánt elemet a legördülő listából.  A szín kiválasztása szintén nem nehéz - a paletta a felhasználó rendelkezésére áll, csak el kell döntenie a kívánt árnyalatot, és íme, a hexadecimális kódja már megjelenik a megfelelő mezőben.
A program tartalmaz egy kész sablont, amely utánozza a webhelyet építőipari cég amely az Ön igényei szerint testreszabható.
Érdekes, hogy nem lehet közvetlenül menteni az oldal kódját a programból, ehhez ki kell választani az "Oldal megtekintése a böngészőben" elemet, és csak a böngészőből mentheti az oldalt html fájlként.  Ez a megközelítés nyilvánvalóan annak köszönhető, hogy a SiteEdit program Standard és Business verziójában lehetőség van a teljes projekt azonnali feltöltésére a tárhelyre, de ingyenes verzió Rajt ez a lehetőség sajnos hiányzik.  Ezért a következetlenségek.
Profik.  Egyszerű felület - gyakorlatilag nem szükséges HTML ismerete, funkcionalitás, a disztribúciós készlet alacsony súlya, orosz interfész nyelv, ingyenes kezdő verzió.
Mínuszok.  Képtelenség közvetlenül a programból menteni a fájlokat, helyesírási hibák.
A SiteEdit tökéletes személyes oldalak és egyszerű webes projektek létrehozására kezdőknek, de még azok számára is, akik nem ismerik a HTML-t.
A SiteEdit három fő verzióban érhető el - Start, Standard, Business és két további -Partner.  A SiteEdit Start verzióját innen töltheti le.
Egy másik ingyenes program, amely áttekintésünkbe került, a HTML Source.  Az első dolog, ami megakadt, a program terjesztési csomagjának kis mérete volt - mindössze 1,5 MB!  Ez szkeptikus gondolatokhoz vezetett a program funkcionalitását és képességeit illetően.  Mi azonban kellemesen meglepődtünk.


kép nagyítása
A program felülete a HomeSite-éhoz hasonlít, de természetesen sokkal kevesebb az eszköz és a képesség.  A bal oldalon található az Intéző ablak, amelyben kiválaszthatja a megnyitandó fájlokat.  Középen - közvetlenül a webes dokumentumok szerkesztésére szolgáló ablak.  A jobb oldalon van egy paletta, és nagyon kényelmes módban működik.  Ha az egérmutatót a paletta egyik vagy másik része fölé viszi, azonnal megjelenik az RGB paletta egyes színeinek összetevője, és egy kicsit lejjebb - maga a szín.  Sőt, ha rákattint a kívánt területre, egy hexadecimális színkód azonnal bekerül a dokumentumba.  Nagyon kényelmes.
A program munkaterületének tetején található egy szokásos eszköztár, amely gombokat tartalmaz új dokumentum létrehozásához, meglévő fájlok megnyitásához, fájl nyomtatásához, helyesírás-ellenőrzéshez és egyéb gyakori műveletekhez.  Minden ikon jó stílusban készült, de az egyetlen kiábrándító dolog az eszköztippek hiánya, amikor egy adott akcióikon fölé viszi az egérmutatót.  Figyelemre méltó, hogy a program maga határozza meg, hogy mely böngészők vannak telepítve a rendszerben, és az eszköztáron ikonok találhatók a dokumentum megtekintéséhez a felhasználó számára elérhető böngészőkben.  Az én esetemben a szabványon kívül internet böngésző, Opera és Mozilla Firefox, amint azt a program mutatja.
Most folytassuk közvetlenül a program képességeinek leírásával.  A HTML Source, ahogy a neve is sugallja, csak a kódoló munkáját hivatott megkönnyíteni, nem pedig teljesen helyettesíteni.  A programból hiányzik az oldalak vizuális fejlesztésének képessége, pl.  Azok számára, akik nem ismerik a hipertext jelölőnyelv alapjait, ez a termék nem fog működni.  Azonban azok számára, akik inkább manuálisan fejlesztenek webes dokumentumokat, a HTML Source egy jó eszközkészlettel rendelkezik a kódolási folyamat felgyorsítására.
A HTML Source szintaxiskiemelést kínál a HTML-fájlokhoz, azonban véleményem szerint ennek a funkciónak a megvalósítása a programban némileg gyengébb, mint a HomeSite-ban.  Először is, a kódnak a stílusok meghatározására vonatkozó része egyáltalán nem került kiemelésre.  Másodszor pedig nincs lehetőség önbeállítás színséma, amely ugyanazon a HomeSite-on volt jelen.
A "Beszúrás" menüben a felhasználónak lehetősége van dátumok beszúrására, speciális HTML karakterek, képek, valamint hangulatjelek széles választéka.  Nagyon eredeti döntés a fejlesztőktől, akik egy ilyen szokatlan funkciót vettek fel programjukba.  A virtuális kommunikáció rajongóinak ez tetszeni fog.
A "Címkék" menü tartalmazza a HTML-leírók fő csoportjait.
A legnagyobb érdeklődés az "Eszközök" menü tartalma, amely ennek a szoftvereszköznek az összes eszközét tartalmazza.  Nézzük meg közelebbről a tartalmát.
A "Kisbetűk konvertálása" elem lehetővé teszi a betűk kis- és nagybetűinek megváltoztatását, pl.  vagy fordítsa meg, vagy állítsa be egy konkrétra.  A következő „Kódoldal konvertálása” elem lehetővé teszi a teljes oldal kódolásának gyors megváltoztatását.  A további pontok közül meg kell említeni a beépített helyesírás-ellenőrzőt, valamint a Tidy nevű HTML kód optimalizáló eszközt, amely a dokumentum megjelenését a hipertext jelölőnyelvi szabványokat fejlesztő W3C szervezet követelményeinek megfelelően hozza. .
Meg kell jegyezni a HTML Source program fejlett súgórendszerét, amely magában foglalja Teljes leírás programfunkciókat, valamint a HTML nyelvi specifikációt, beleértve a CSS-t is.
Előnyök: Kompakt elosztási méret, eredeti funkciók, fejlett referenciarendszer.
Hátrányok: A dokumentumok vizuális fejlesztésének lehetőségeinek hiánya, a program felállításának szerény lehetőségei, az oroszosítás hiánya.
Így a HTML-forrás vonzó lesz a tapasztalt fejlesztők számára, nem csak fejlesztői eszközként, hanem referenciaeszközként is.  A HTML-forrást innen töltheti le
A következő program, amely véleményünkre került, az AG FreeSoft által fejlesztett Magic HTML Studio volt.  A program elindítása után szokatlan kép tárult elénk - a Magic HTML Studio dizájnja fájdalmasan szokatlan volt.
Lehet, hogy valakinek tetszik ez a felület, de véleményem szerint nem túl jó megoldás egy ilyen programhoz.  Az is csalódott volt, hogy nem volt szintaktikai kiemelés a dokumentumban.  Nos, oké, vessünk el minden igényt a tervezésre, és nézzük meg, hogyan áll a Magic HTML Studio a funkcionális komponenssel.
És itt minden csak azért van legmagasabb szint!  Mit érnek az olyan eszközök, mint a Java Constructor és a CQI QuickBuilder?  De először a dolgok.
A bal oldalon a gombok találhatók gyors formázás szöveg, az írás típusának és a szöveg oldali pozíciójának megváltoztatása.  Ikonok is rendelkezésre állnak a különböző szintű címsorok dokumentumba történő beillesztéséhez.  A jobb oldalon a felhasználó hozzáférhet egy bizonyos színű szöveg beillesztésére szolgáló gombokhoz, de a helyet nagyon irracionálisan használják - minden színhez külön gomb van hozzárendelve, bár kényelmesebb lenne például egy normál palettát használni. , mint a HTML program forrás.
Most térjünk át a Magic HTML Studio egyedi szolgáltatásaira és eszközeire.  A Java Constructor egy hatékony és egyben egyszerű eszköz JavaScript szkriptek létrehozására, és ehhez a felhasználónak egyáltalán nincs szüksége tudásra adott nyelv programozás.  A konstruktor segítségével naptárat vagy órát illeszthet az oldalára, készíthet dinamikus vagy legördülő menüt, készíthet egyszerű több képből álló bannert és néhány hasznos dinamikus elemet.


kép nagyítása
A tervező automatikusan elkészíti a szükséges szkriptet, és csak be kell illesztenie a dokumentum megfelelő helyére.
A program generátort is tartalmaz CGI szkriptek, amellyel konferenciát hozhat létre, vendégkönyv vagy cseveghet egyetlen kattintással, a szkript paramétereinek beállítása után.
Sajnos nem volt lehetőségünk a gyakorlatban tesztelni ezt az eszközt – ehhez kellett fájlokat feltölteni egy CGI szkripteket támogató szerverre.  Térjünk át a program egyéb funkcióira.  Tehát az Opciók menü segítségével végrehajthatja a Flash betöltő szkript hozzáadását, az elemszerkesztő meghívását, valamint a betűtípus megváltoztatását és az űrlap hozzáadását.
Meg kell jegyezni egy jó orosz nyelvű súgórendszert is, amely a program összes fő funkciójának leírását tartalmazza.
Előnyök: fejlett JavaScript és CGI szkriptkészítők, széles lehetőségek dinamikus elemek hozzáadására, orosz nyelvű súgórendszer.
Hátrányok: nem egészen jó design, hiányzik a szintaxis kiemelése, hiányoznak a vizuális fejlesztőeszközök.
A Microsoft FrontPage mellékelve Microsoft csomag Az Office egy klasszikus WYSIWYG szerkesztő, amely azonban képes manuálisan szerkeszteni a kódot.
A program felülete nagyon hasonló a programhoz Microsoft Word, ami egyáltalán nem meglepő - a megjelenés egységesítése segít a kezdőknek gyorsan elsajátítani a FrontPage főbb funkcióit.
A program három móddal dolgozik egy dokumentummal: Normál, HTML és Előnézet.  Normál módban a weboldal normál szöveges fájl az összes elem szerkesztésének lehetőségével - a szövegtől a képekig.


kép nagyítása
A HTML mód lehetővé teszi az oldal kódjának megtekintését és ennek megfelelően szerkesztését.  Ebben a módban a FrontPage szintaktikai kiemelést biztosít, de meglehetősen közepes – a leírók kékkel vannak kiemelve, minden más fekete.
Végül Előnézet módban láthatja, hogyan fog kinézni az oldala a böngészőablakban.
A FrontPage más Microsoft-termékekkel való szoros integrációjának köszönhetően lehetővé teszi a webdokumentumba történő beszúrást Különféle típusok objektumok: képektől és diagramoktól a Microsoft Excel lapokig.
Természetesen a FrontPage rendelkezik egy táblázatkészítővel, amely sokkal egyszerűbbé teszi a táblázatok létrehozását.
A program egyik fő előnye az nagyszámú rendelkezésre álló sablonok, amelyek lehetővé teszik a felhasználó számára, hogy ne törje az agyát a projekt tervezésén.
A szükséges sablon kiválasztása után közvetlenül folytathatja az oldal tartalommal való feltöltését.  Itt jelenik meg a FrontPage szépsége: a HTML-oldal létrehozásának folyamata nem különbözik egy normál szöveges dokumentum Microsoft Word-ben történő létrehozásától.  Ugyanezek az eszközök állnak a felhasználó rendelkezésére a szöveg szerkesztéséhez, formázásának megváltoztatásához, táblázatok létrehozásához és szerkesztéséhez, különféle objektumok és képek beszúrásához.  A program segítségével könnyedén készíthetünk pontozott, számozott és többszintű listákat – és mindezt a HTML nyelv ismerete nélkül!
A FrontPage a munkaterületet több blokkra osztja, amelyek bizonyos oldalelemeket tartalmaznak – képek, szövegek, címsorok stb.  Minden blokkhoz hozzárendelheti saját formázási beállításait és az oldalhoz viszonyított helyét.
Az éremnek van egy hátoldala is - a kapott kód összetettsége és nehézkessége, ami természetesen befolyásolja a dokumentum végső méretét.  A jövőben nagyon nehéz lesz módosítani egy ilyen dokumentumot.  De ez inkább nem egy adott termék, hanem szinte az összes WYSIWYG szerkesztő hátránya.
Előnyök: ismerős felület az MS Office termékekhez, jó sablonkészlet, integráció más programokkal az MS Office csomagból.
Hátrányok: egy kis fejlesztői eszközkészlet, a program külön megvásárlásának lehetetlensége.  A Microsoft FrontPage elsőre jó választás HTML-szerkesztőnek, de a felhasználói igények növekedésével a képességei nem biztos, hogy elegendőek.
És végül legújabb program A terjesztési készlet mérete (62 MB) lehetővé teszi, hogy sokat várjunk ettől a HTML-szerkesztőtől.  A Macromedia Dreamweaver MX 2004 képességei valóban lenyűgözőek.  A telepítés után a felhasználónak meg kell választania kinézet program, amely a webes dokumentumok létrehozásának megközelítésétől függően eltérő.  A "Kód" kiválasztásakor a programfelület a kódoló, a "Design" kiválasztásakor pedig a tervező igényeihez igazodik.  E két mód között azonban mindig van lehetőség váltani, és egy harmadik, kombinált mód is elérhető - a program munkaterülete két részre oszlik.


kép nagyítása
A jobb oldalon egy másik többszintű menü, amely különösen az aktuális leíró súgójának megjelenítésére szolgáló elemeket, a használt képek listáját, egy felfedezőt és néhány egyéb elemet tartalmaz.
További segítséget nyújtson a fejlesztőnek helyi menük, amelyek a főmenüből meghívott fő funkciókat duplikálják.  Például vizuális módban dolgozva egy elemre jobb gombbal kattintva megváltoztathatjuk a használt betűtípust, annak stílusát, színét és egyéb attribútumait, valamint lehetőség van a használt címke attribútumaira is.
A program fő jellemzői pontosan a vizuális mód használatában rejlenek.  Az eszköztár ikonjai a leggyakoribb műveletekért felelősek: hiperhivatkozás hozzáadása, kép beszúrása, táblázat összeállítása, aktuális dátum hozzáadása stb.
A HTML nyelv képességeit ismerő felhasználók számára javasoljuk a Tag Chooser nevű eszköz használatát, amellyel nem csak bármilyen HTML címkét, hanem olyan programozási nyelvek alapvető kifejezéseit és operátorait is beillesztheti, mint a JavaScript, ASP. Net, PHP, WML és coldfusion.  Mindez új távlatokat nyit meg a szoftver eszköz használatához különféle, szerveroldali programozási nyelveket használó komplex projektek fejlesztésében.
A kombinált mód kényelme abban rejlik, hogy az összes végrehajtott változtatás azonnal megjelenik mindkét ablakban.  Azaz, ha módosítja a dokumentum kódját, azonnal megjelenik az eredmény a szomszédos ablakban, és fordítva, amikor kiválaszt egy elemet, megjelenik a megfelelő kód.
A "Kód" módban végzett munka során a program munkaterülete a HomeSite-hoz hasonlít - érezhető, hogy a termékeknek egy alkotója van, de a Dreamweaver funkcionalitása még mindig magasabb.  Amit csak egy táblázattervező ér, ami soha nem látott rugalmasságot biztosít a fejlesztőnek a táblázatok elkészítésekor.  Sőt, egy táblázat készítésekor a program felajánlja az egyik tervezősablon használatát, amelyekből több tucat van, és egy adott sablon kiválasztásakor egyes attribútumainak módosításával azonnal testreszabhatja azt az Ön igényei szerint.  A táblázat létrehozása és tartalommal való feltöltése után elérhetővé válik a táblázat tetszőleges oszlop szerinti rendezése.  És mindez - vizuális módban maga a kód természetesen automatikusan változik.
A Macromedia Dreamweaver MX 2004 más vállalati termékekkel együtt is használható - Macromedia Fireworks, Flash stb.
Ha egy olyan felhasználó választása, aki inkább vizuális módban szeretne dokumentumokat létrehozni, szinte nyilvánvaló, akkor a "kódoló" nehéz feladat elé néz két Macromedia termék közül: HomeSite vagy Dreamweaver MX 2004?  Megjegyzendő, hogy a Dreamweaver MX 2004 képességei feleslegesek lesznek a kódoló számára, azonban ha nagy térfogatú rutinmunka, teljes mértékben ki tudja használni a vizuális módot - ha a program felajánlja, akkor miért ne próbálná ki?  A HomeSite felhasználóit megfosztják egy ilyen lehetőségtől, de a program minden szükséges eszközkészletet kínál számukra a különböző bonyolultságú webes dokumentumok kényelmes fejlesztéséhez.
Így mindenki szabadon választhatja ki a neki szükséges terméket a célok és a rendelkezésre álló ismeretek figyelembevételével.  Természetesen az ár is kérdés – mindkét Macromedia terméket Shareware-ként terjesztik, de 30 napos próbaidőszakig ingyenesen használhatók.  Ez az idő elegendő a választáshoz.
Előnyök: hatalmas eszközkészlet a dokumentumok vizuális fejlesztéséhez, áttekinthető felület, kódoló módban való munkavégzés, kész sablonkészlet.
Hátrányok: nagy forgalmazási mennyiség, a termék magas ára.
És a nyelv HTML, a legfontosabb meghatározás a " címke"(az angol "tag" szóból néha írd "tag"-ot is). Címke- ez egy szimbolikus vagy szöveges kifejezés (az érthetőség kedvéért engedjünk meg magunknak egy nem egészen helyes analógiát a programozási nyelvekből származó "parancs" vagy "operátor" kifejezésekkel), amely arra utasít, hogy valamilyen konkrét műveletet hajtsunk végre közvetlenül jelölésÉs formázás képernyős bemutató weboldalak.
Vagyis ez semmi esetre sem operátor vagy parancs, hanem csak jelzés (például balra behúzás, jobbra egy adott méretű illusztrációt helyez el, alá pedig - hiperhivatkozás).
A tényleges címkéken kívül a nyelven hipertext jelölés attribútumaikat használják.
Dekoráció címke a dokumentumtömbben szögletes zárójelekkel történik, ami lehetővé teszi a tolmács számára, hogy különbséget tudjon tenni a szöveg (tematikus tartalom) és közvetlenül HTML-kód, helyesen jeleníti meg az információkat a weboldalon.
A címkék párosíthatók (vagyis elválaszthatatlan kötegben használhatók egymással).  Ebben az esetben a feltételek NyításÉs záró címkéket.  A párosított címkék szintaxisa változatlanul a következő:
Dokumentumtöredék...,
Ezenkívül a címke által előírt utasítások a köztük jelzett dokumentum teljes töredékére vonatkoznak.  A címkék lehetnek egyszeresek, vagyis a záró tag szabványos HTML nem biztosított.
HTML nyelvi elemek
A HTML nyelv minden eleme kivétel nélkül címke vagy attribútuma;  nincsenek parancsok, nincsenek feltételek nyelv hipertext jelölés egyszerűen nem létezik (lásd alább a speciális osztályú META címkéket).  Aktív elemek és dinamikus hatások honlap független és teljes, a hipertext kódba épített modulokkal hajtják végre, amelyek bármelyik klasszikus programozási nyelven már megvalósítottak (például a JavaScrypt nagyon népszerű a webhelyeken), vagy szerver programozási módszerekkel.
Szimbolizmus META



HTML. Címke


Támogató témák:


Web design. HTML. Címke


Az érettségi projektben a HTML hiperszöveg jelölőnyelvet használták szoftvereszközként statikus tartalom kitöltésére.
A HTML (Hyper Text Markup Language – Hypertext Markup Language) egy számítógépes programozási nyelv, amelyet weboldalak vagy más szóval HTML dokumentumok fejlesztésére terveztek.  A HTML nyelv vezérlőkarakterek gyűjteménye – leírók, amelyekkel hozzáadhat és formázhat egy dokumentum elemeit.  Az oldalelemek megjelenésének és működésének testreszabásához be kell állítani az attribútumokat.
A böngészők felismerik a HTML nyelvi címkéket, és a dokumentum kódját weblappá alakítják, amely a böngészőablakban jelenik meg.  A böngészőalkalmazások fejlesztése a globális HTML nyelvi szabványok alapján történik, ami biztosítja, hogy a weboldalak ugyanúgy nézzenek ki, függetlenül attól, hogy melyik böngészőablakban jelennek meg.
A HTML szabványosítását a World Wide Web Consortium (W3C) végzi.  Annak ellenére, hogy biztosítani kell a weboldalak teljes szoftver- és hardverfüggetlenségét, meglehetősen nehéz ezeket az elveket maradéktalanul megvalósítani.  Az egyik probléma az, hogy a nyelvvel kapcsolatos munka folytatódik.  Megjelentek a HTML új verziói, amelyek további lehetőségeket kínálnak a weboldal-fejlesztők számára.
Számos speciális HTML-szerkesztő létezik, amelyek nagyjából két típusra oszthatók:
vizuális HTML szerkesztők, azaz WYSIWIG típusú szerkesztők (például Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold stb.).  Amikor ezekben a programokban dolgozik, a felhasználó grafikus képekkel foglalkozik HTML elemek, nem a dokumentumazonosítóval.  A Word-ben és a Word Perfect-ben készített szöveges dokumentumokhoz egyébként léteznek konverterek HTML-fájlokká;
tényleges HTML szövegek szerkesztői, amelyek lehetővé teszik a kód beírásának és szerkesztésének automatizálását (például HomeSite, HotDog, Ken Nesbitt Web Editor és még sokan mások).  Ezek a programok lehetővé teszik a felhasználó számára, hogy gyorsan és egyszerűen illesszen be HTML-elemeket a dokumentumokba, ellenőrizze a parancsok szintaxisát, futtassa és hibakereshesse az oldalt a szerkesztőablak elhagyása nélkül.  Általában az ilyen szerkesztőkkel való munka olyan interaktív programozási környezetben való munkához hasonlít, mint a Delphi vagy a Visual Basic.
A fenti két kategória mellett léteznek olyan programok, amelyek egyesítik a szöveges és a vizuális HTML-szerkesztők tulajdonságait, ilyen programok közé tartozik a SoftQuad Software által fejlesztett HotMetal.
A modern HTML-szerkesztők funkciói nagyon sokrétűek: némelyikük például csak egyes oldalak kialakítását biztosítja, mások pedig éppen ellenkezőleg, teljes webhelyek tervezésére szolgálnak, majd feltöltik őket az internet távoli szervereire.  Ma már nehéz meghúzni a határt a professzionális HTML-szerkesztők és az amatőr webkészítésre szánt szerkesztők között.
Az egyes elemek használatánál fontos tudni, hogy milyen elemek helyezhetők el benne, illetve milyen elemek lehetnek benne.  Tehát a HTML, HEAD, TITLE és BODY elemek relatív pozíciójának minden oldalon szabványosnak kell lennie, azonban olyan esetekben, amikor nem használunk kereteket.  Ha az oldal keretelrendezésű dokumentum (erről bővebben a 3. fejezet Keretek című részében olvashat), akkor a BODY elem helyett a FRAMESET elemet használjuk.
Vannak elemcsoportok, amelyeket együtt használnak.  Ide tartoznak a táblázatok, listák, keretek létrehozására szolgáló elemek.  Ebben az esetben az elemek egymásba ágyazási sorrendjét az oldalon lévő egyik vagy másik objektum létrehozásának logikája határozza meg: itt emlékeznie kell az egyszerű tervezési szabályokra.  A táblázatok és keretek gyakran az oldal részleteinek (képek, szövegek stb.) meghatározott sorrendbe rendezésére szolgálnak.  Például, ha egy képet elhelyez egy táblázat cellájába, elérhet egy bizonyos pozíciót.  Ilyen esetekben az elemek egymásba ágyazását a weboldal fejlesztője határozza meg, és sok múlik az ő fantáziáján és ügyességén.
A szöveg formázására használt nagyszámú elem sokféle beágyazási lehetőséget tesz lehetővé.  És maguknak is belül kell lenniük bizonyos elemeket.  Itt a józan észnek kell vezérelnie: minden elem egy adott funkciót lát el, és van egy bizonyos hatóköre.
Az alábbi példa két bekezdést tartalmaz (az első zöld mezőben) és egy táblázatot:
<Р
style="border: Зрх solid дгееп">1. bekezdés szövege

. . . 
<Р>2. bekezdés szövege
A táblázat ebben az esetben független elem.  Például a szöveg többi részétől függetlenül igazítható.
Más kódot is használhat:
<Р
style="border: Зрх solid дгееп">1. bekezdés szövege

. . . 
<Р>2. bekezdés szövege
Az első bekezdés végcímkéje eltűnt.  A táblázat immár az első bekezdés része, és a zöld keret fogja közre a táblázatot és a szöveget.
Megfordítva, egy P elem lehet egy táblázatban: például egyetlen TD cellaelem több P bekezdést is tartalmazhat.
A beágyazási szabályok megsértése az egyik leggyakoribb hiba a weboldalak létrehozása során.  Az ilyen hibák elkerülése érdekében olyan hiperszöveg-szerkesztőket kell használni, amelyek automatikusan vezérlik a szintaktikai szabályok végrehajtását.  Az alábbiakban egy tipikus beágyazott elemhibát tartalmazó sor látható:
<Н1>1. címsor<Н2>2. címsor

Ha az oldal megjeleníthető, akkor figyelmeztető üzenetek nélkül jelenik meg. A program bizonyos módon értelmezi a hibásan elhelyezett címkéket, és a fejlesztői által lefektetett logika szerint képet generál. Ebben az esetben előfordulhat, hogy az oldal megjelenése nem felel meg a szerző szándékának. És csak nagyon súlyos hibák vagy nyilvánvaló ellentmondások esetén jelenít meg a böngésző üzenetet az oldal megjelenítésének képtelenségéről. A jelölési hiba közvetett jele lehet a HTML kódrészletek megjelenése az oldalon. Azok a felhasználók, akik sokat dolgoznak az internettel, nyilvánvalóan találkoztak ezzel a helyzettel. A szintaktikai szabályok a kezdő és záró címkék, attribútumok és elemtartalom használatára is vonatkoznak. Ne keverje össze az "elem" és a "címke" fogalmát. Az elem egy tároló, amely attribútumokat tartalmaz a kezdő címkén belül, és hasznos információkat tartalmaz a kezdő és záró címke között. A címke egy szögletes zárójelekbe zárt konstrukció, amely egy elem hatókörének jelzésére szolgál.

Egyes elemeknek nincs végcímkéje. Nyilvánvaló, hogy a BR elemnek, amely egy sor végét jelöli, nincs szüksége végcímkére. Egyes elemek zárócímkével vagy anélkül is használhatók. A legfigyelemreméltóbb példa a P bekezdés elem, amelynek lehet záró címkéje, de ha ez a címke nincs beállítva, akkor az elem lezárója a következő elem, amely logikusan meghatározhatja az aktuális bekezdés végét: egy másik P elem, egy IMG rajzelem, UL listaelem , TABLE táblázatelem stb. hasznos információk Az egyik elem elemének vagy az elem kezdő és záró címkéje között, vagy az elem kezdő címkéje és a következő elem kezdő címkéje között kell lennie. Az oldalra beírt tetszőleges szövegeket a böngésző megjelenítendőnek érzékeli, és ezért a szöveget körülvevő elemeknek megfelelően formázza. Ez nem veszi figyelembe a szöveg szövegszerkesztőben kapott sorokra osztását. Elméletileg egy egész weblap elfér egy hosszú sorban. A sorvégi karakterek, például a Jegyzettömbbe beírtak, segíthetnek a HTML-kód beolvasásában, de a böngésző nem jeleníti meg őket. Utóbbi az oldal képernyőn való megjelenítésekor a Hn, P vagy BR elemek elrendezésének megfelelően megtörheti a sort, más esetekben pedig tetszőlegesen formázza a bekezdéseket, a szöveg mennyiségétől, a betűmérettől és az aktuális ablaktól függően méret. Ezért a weblapokat úgy kell elrendezni, hogy megjelenésük ne változzon drámaian a különböző monitorfelbontások, képernyőméretek, böngészőablak méretek, valamint teljes képernyős vagy ablakos módok esetén. Egy nagyon fontos szabály, amely alól nincs kivétel, az elemattribútumok elhelyezése a start tagon belül.

A szögletes zárójelben lévő karakterek HTML-parancsok, amelyek segítségével a "böngésző" tudja, hogyan kell átalakítani a parancsok közé zárt szövegrészeket.

A dokumentum egészét HTML dokumentumként kell megjelölni. Ehhez egy paranccsal kell kezdődnie, és egy paranccsal kell végződnie.

A dokumentum 2 részből áll:

fejléc (Head).

dokumentum (Body).

A HTML-parancsok írásakor nem mindegy, hogy kis- vagy nagybetűkkel írod a parancsokat.

A cím információkat tartalmaz a dokumentumról, például a címet és a tartalom leírását szolgáló módszertani információkat. A törzs tartalmazza magát a dokumentum tartalmát (ami a böngészőablakban jelenik meg).

Minden címke egy névből áll, amelyet opcionálisan az opcionális attribútumok listája követ, mindezt szögletes zárójelben< >.

A zárójelek tartalma soha nem jelenik meg a böngészőablakban. A címke neve általában a funkciójának rövidítése, így könnyebben megjegyezhető. Az attribútumok olyan tulajdonságok, amelyek kiterjesztik vagy finomítják a címke funkcióját. Általános szabály, hogy a címkén belüli név és attribútumok nem különböztetik meg a kis- és nagybetűket. Címke ugyanúgy fog működni . Bizonyos attribútumok értékei azonban megkülönböztethetik a kis- és nagybetűket. Ez különösen a fájlnevekre és az URL-ekre vonatkozik. A dokumentum általános sémája az 1.1. ábrán látható.

1.1. ábra. Általános séma HTML dokumentum

A címkéknek van egy kezdő (nyitó vagy kezdő) és egy vég (záró) címkéje. A címkék közötti szöveg a bennük található utasításokat követi. Például:

Az én első honlap

Eredmény: az enyém első Honlap.

A zárócímke neve megegyezik a kezdő címkével, de perjel (/) előzi meg. Ez felfogható "kapcsoló" címkének. A zárócímke soha nem tartalmaz attribútumokat.

a szöveg címkével kezdődik . Záró címkét igényel A, amely a dokumentum végét jelzi. A beágyazásban a dokumentum címe és a tartalomcímkék következnek. A fejléccímkén belül a dokumentumra vonatkozó információk (címe, leírása, kódolási táblázata stb.) vannak írva. Maga a címcímke így van írva . Záró címkét igényel. A dokumentumtartalom címke határozza meg információs rész oldalleírások. Szöveget, képeket és egyéb elemeket tartalmaz. A leírás címke (oldal törzse) így néz ki: ....

Írjunk egy példát egy egyszerű dokumentumra:

<ТIТLЕ>Minta HTML oldal

<ВОDY>Ez egy egyszerű oldal, amely egy HTML-beli leírás szerkezetét mutatja be.

Címke

Richard Bach

az egyetlen

Hosszú utat tettünk meg, nem?

Huszonöt éve találkoztunk először. Aztán pilóta voltam, lenyűgözött a repülés, és a műszerek leolvasásában próbáltam megtalálni az élet értelmét. Húsz évvel ezelőtt utunk egy új, szokatlan világba vezetett, amelyet a Sirály szárnyai nyitottak meg előttünk.

A böngészőablak az 1.4. ábrán látható módon jelenik meg.

1.4. ábra. Bekezdésekre bontás.