/ / Hogyan lehet weboldalt létrehozni a Jegyzettömbben? Valódi példa

Hogyan lehet weboldalt létrehozni a Jegyzettömbben? Valódi példa

Sokan azt gondolják, hogy a saját webhely létrehozása aztrükkös üzlet, amely komoly előkészítést és komplex eszközök használatát igényli. Valójában, kezdetben, elegendő tudás és a legalapvetőbb Windows program - a Jegyzettömb - elég. A webhely létrehozásáról a Notepadban egyszerű utasításokat követve néhány órán belül elkészítheti az első teljes oldalt.

A Notepad előnyei

Professzionális webfejlesztők, tapasztalta webhely készítői nagyon ritkán használják a Jegyzettömböt a folyamatban, de két felhasználói kategória létezik, akik számára ez a program kiváló választás:

  • kezdő betűkészlet;
  • olyan emberek, akik újak a weblapok létrehozásának folyamatában, és nem akarják megtanulni a bonyolult szerkesztőket, hogy egyszerű névjegykártya-helyet írjanak.

Sok szakember megismerte az elrendezést és aHTML, megértése, hogyan lehet webhelyet létrehozni a Jegyzettömb segítségével. Ez lehetővé tette számukra, hogy biztonságosan és gyorsan összegyűjtsék az összes megszerzett tudást. A Jegyzettömböt nem úgy tervezték, hogy a kóddal és a jelöléssel együtt dolgozzon, nincs beépített tippe, automatikus kiegészítése és más chipek sem a modern programokban, ami azt jelenti, hogy a fejlesztő csak magára és memóriájára támaszkodhat.

A Jegyzettömb szövegszerkesztője a leg szerényebbminimalista felület, ami azt jelenti, hogy sokáig nem kell megértenie a program összetett funkcióit. Ez nagyon vonzó azoknak a felhasználóknak, akik nem tervezik időt tölteni olyan eszköz tanulására, amelyet gyakran nem fognak használni.

Munka alapjai

A HTML webhely létrehozásáról a Notepadban lépésről lépésre a program megnyitásával kezdődik. A Jegyzettömb legegyszerűbben a Windows Start menüjében található, a Kellékek részben.

A megnyitott új fájlt a következővel kell mentenihtml kiterjesztés. Ez nagyon fontos, mert ezzel a kiterjesztéssel a böngésző megérti, hogy van egy weboldala előtte. A Fájl menü Mentés másként parancsa új ablakot nyit meg. Itt meg kell neveznie az index.html dokumentumot, ki kell választania az utf-8 kódolást és a menteni kívánt mappát.

Fájl mentése a Jegyzettömbbe

Most bármikor megnyithatja ezt a fájlt, duplán kattintva rá, vagy a jobb gombbal kattintva a helyi menüre, és kiválasztva az „Megnyitás a Jegyzettömbvel” lehetőséget.

Az oldalt már létrehozták, és láthatja, hogyan néz ki a böngészőben. Számos módszer nyílik meg a dokumentum megnyitására egy internetes böngészőben:

  • a jobb gombbal rákattintva és a megjelenő menüben válassza a „Megnyitás a Google Chrome-mal” (vagy egy másik böngészőt) lehetőséget;
  • csak húzza az ikont a nyitott böngésző fülsávjába;
  • beírja a böngésző címsorába a dokumentum teljes címét, kezdve a protokoll fájllal: //
fájl: /// C: /Users/UserName/Desktop/my-site/index.html

Most az oldal kiszámíthatatlanul szűz, az ideje kitölteni az információkat.

Hipertext jelölőnyelv

Az összes weboldal a világhálónspeciális HTML nyelven írva (hipertext jelölő nyelv). Az alapok megértése nagyon fontos annak megértéséhez, hogyan lehet webhelyet létrehozni a Jegyzettömbben vagy bármilyen más szerkesztőben. A HTML segítségével a fejlesztő megmondja a böngészőnek az oldal kinézetét. Ezért fontos a helyes fájlkiterjesztés beállítása.

A nyelv címkékre épül - a szögletes zárójelbe zárt karakterkombinációk.

Címkepéldák:

1. szintű címsor

Dőlt szöveg

A nyitó és záró címkék közötti szöveget a böngésző speciálisan feldolgozza.

Az oldalon közvetlenül megjelenített adatok mellett az oldal létrehozásakor meg kell határoznia a maga szolgáltatásának a saját böngészőhöz való speciális szolgáltatási adatait is.

Első tervezetek

A html-dokumentum helyes kialakításával kell kezdenie a munkát. Az oldal alapvető felépítése a következő:






 A világ legjobb oldala 






Az egyes elemek értéke:

  • DOCTYPE - a böngésző műszaki adatai, amelyek megmutatják, hogyan kell érzékelnie a kódot;
  • html - az oldal gyökércímkéje;
  • fej - a szolgáltatási információk egy része, amely a webhely látogatói számára nem látható;
  • meta - szolgáltatáscímke, a karakterkészlet-attribútum határozza meg a szöveg kódolását;
  • cím - a böngésző lapon megjelenített oldal neve;
  • szerv - a dokumentum törzse, amely közvetlenül megjelenik az oldalon.

A kód mentése és a fájl újbóli megnyitása (vagy újratöltése) után a böngészőben láthatja az első változást - a lap neve megjelent a lapon.

Téma és felépítés

Mielőtt megérti, hogyan hozhat létre saját HTML-webhelyet a Jegyzettömb segítségével, világosan el kell képzelnie, hogyan kell kinéznie ennek a webhelynek. Vegyük például egy John Doe személyes blogját.

Webhely létrehozása a Jegyzettömbben

Az oldal szerkezetének fő elemei:

  • kalap logóval és az első szint címsorával;
  • vízszintes navigációs sáv;
  • a fő tartalom, amelyet három cikk képvisel, amelyek mindegyike címsorból, rövid leírásból és a teljes szöveghez mutató hivatkozásból áll;
  • alagsor szerzői joggal.

Az oldal HTML kódja így néz ki:






 A világ legjobb oldala 




John Doe

A weboldal leírására a HTML5 szabvány szemantikai címkéit használják: header, legfontosabb, nav, Lábjegyzet, cikk.

Kód magyarázat:

  • A fejlécben egy hivatkozásba csomagolt kép található. Segítségével a felhasználó visszatérhet a főoldalra a webhely bármely pontjáról.
  • Maga a kép a mappában található képek öblítse le a fájlt index.html. Az attribútumot használó kódban szélesség szigorúan beállítva 100 pixelre.
  • A cím meg van címkézve x1, amely hangsúlyozza annak jelentőségét.
  • A navigációs menüt rendezetlen lista képviseli, és minden elem hivatkozik a weboldal megfelelő oldalára. Ezek a szakaszok még nem állnak rendelkezésre, de a jövőben létrehozhatók.
  • A cikk címsorához használja a címkét x2.
  • A Watch link egy külön oldalra vezet, amely a teljes cikket részletesebben tartalmazza. Ezek az oldalak még hiányoznak.
  • Az összes tartalmat egy közös blokkba csomagolják az osztály csomagolás. Az osztályattribútumokat általában az elemek stílusához használják.

Az oldal így néz ki:

Weblap nézet stílus nélkül

Ez a nézet nem nagyon hasonlít a tervezetthez. A helyzet javításához meg kell adnia a tervezést.

Ehhez létre kell hoznia egy másik fájlt a mellette index.html és hívd fel style.css. Be fogja illeszteni az összes szükséges stílust.

Jelenleg a projekt szerkezete így néz ki:

Telephely felépítése

Stílus kialakítása

Folytatva annak kitalálását, hogyan lehet webhelyet létrehozni a Jegyzettömbön, egy új szintre lépünk - stíluslap összekapcsolása.

Annak érdekében, hogy a böngésző megértse, hol szerezheti meg a formatervezést, meg kell adnia a css fájl címét. Ez szolgáltatási információ, amelyet a szakaszba kell helyezni fej.



 A világ legjobb oldala 

Most mindent, amit a fájl ismertet style.css, a böngésző az oldalra vonatkozik. Például változtassa meg a háttér színét:

test {
háttér: # 89745d;
}

A stíluslap teljes tartalma így néz ki:

test {
párnázás: 0;
font-family:talpatlan;
betűméret: 16 képpont;
háttér: # 89745d;
}
.wrapper {
párnázat: 20 képpont;
margin-left: auto;
jobb oldali margó: automatikus;
szélesség: 960px;
}
a {
szövegdíszítés: nincs;
}
fejléc img {
függőleges igazítás: közép;
jobb margó: 20 képpont;
}
h1 fejléc {
kijelző: inline-block;
függőleges igazítás: közép;
szín: # f8d9b7;
}
nav {
padding-top: 20 képpont;
padding-bottom: 20px;
}
nav ul {
margin: 0;
szöveg igazítás: középpont;
}
nav ul li {
kijelző: inline-block;
lista stílus: nincs;
párnázat: 0px 15px;
}
nav ul li a {
szín: # f8d9b7;
szövegdíszítés: nincs;
}
nav ul li a: hover {
szövegdíszítés: aláhúzás;
}
cikk {
párnázat: 20 képpont;
margó: 20 képpont 0;
háttér: # f8d9b7;
box-shadow: 0 0 15px # f8d9b7;
}
h2 cikk {
margin-top: 0px;
margó alja: 15 képpont;
szín: # d57106;
}
cikk a {
betűméret: 14 képpont;
betűtípus: dőlt;
szín: # d57106;
}
lábléc {
párnázat: 20 képpont;
szöveg igazítás: jobbra;
szín: # f8d9b7;
betűméret: 14 képpont;
betűsúly: félkövér;
}

A stílusok magyarázata:

  • Az alap betűtípus-paramétereket a törzs elemhez állítják be: a sans-serif család és a méret 16 pixel.
  • A fő tartály állandó szélessége 960 pixel és középpontjában van.
  • A menülista elemeit sorblokk-elemekként deklarálják, ez lehetővé teszi, hogy azokat egy sorba helyezze. Az alsó pontszámot eltávolítják a linkektől, most csak akkor jelenik meg, ha az egérmutatót fölé viszi.
  • A cikkblokk kontrasztos háttérrel és enyhe árnyalattal rendelkezik.

Ha frissíti a dokumentumot egy böngészőben, láthatja annak végső nézetét. Az első weboldal sikeresen létrejött!

A blog azonban nem lehet csak a főoldalak cikkek listájával. Valahogy külön üzenet jelenik meg a teljes szöveggel, ráadásul a navigációs menüben megjelölt oldalak már meg vannak tervezve.

Az internet legfontosabb fogalma az egyes dokumentumok linkeken keresztüli összekapcsolása. Hogyan lehet webhelyet létrehozni hiperhivatkozásokkal a Notepadban?

Oldalak hozzáadása

Valójában mindent megtettünk. Menüelemek és mutatók "Nézet" részletesebben csomagolva egy speciális címkébe és, amely felelős a hiperhivatkozás kialakításáért. A kívánt címet az attribútum jelzi href. Csak maguk az oldalak készítése és a fájl mellé helyezése index.html.

Példakód egy fotóalbum oldalra (gallery.html):





 A világ legjobb oldala 



John Doe

A fő szerkezet, a fejléc, a navigáció és az alagsor teljesen megismétli a fő oldalt, csak a szakasz változik legfontosabbamely most egy blokkot tartalmazó galériát tartalmaz ábra. Minden blokkban van egy kép és egy felirat.

Ugyanazt a fájlt használják az oldal tervezéséhez. style.cssa szakaszon belül csatlakoztatva fej. A galériához több szabályt kell hozzátenni:

.gallery {
betűméret: 0;
}
ábra {
megjelenítéséhez:inline-block;
függőleges igazítás: alul;
szélesség: 33,3333%;
dobozméret: keretes doboz;
párnázat: 10x15px;
margin: 0px;
betűméret: 14 képpont;
szín: # f8d9b7;
szöveg igazítás: középpont;
}
ábra img {
szélesség: 100%;
margó alja: 10 képpont;
}

A css technikát használja, amely lehetővé teszi a blokkok egymásba sorolását és pontosan egyharmadának a szülőtartály szélességének beállítását.

A galéria végső nézetét az alábbiakban mutatjuk be.

Fotóalbum oldalnézete

A hiperhivatkozások a weblap oldalai között mozognak: a menüből eljuthat a „Fotóalbumhoz”, és a logóra kattintva visszaléphetnek a főoldalra.

Webhely elhelyezése

Tehát lépésről lépésre kitaláltuk, hogyan lehet weblapot létrehozni a Jegyzettömbön. De most senki sem látja őt! De személyes blogokat hoznak létre annak érdekében, hogy megosszák az életed az egész világgal.

A helyzet javításához el kell helyeznieaz összes létrehozott fájlt a tárhelyen, és egy speciális szolgáltatás használatával válassza ki a webhely domainjét. Nagyon sok tárhely-szolgáltató nyújt szolgáltatást minden ízlésnek és költségvetésnek.

Miután megállapodást kötött a házigazdával, megjelenik a hozzáférés a központhoz, ahol az összes létrehozott fájlt átviheti. Jelenleg a projekt felépítése a következő:

A projekt felépítése

Itt kell hozzáadni a weboldal többi oldalának HTML-fájljait is.

Kódszerkesztők

Most már tudja, hogyan hozhat létre html webhelyetA Jegyzettömbnek azonban vannak kényelmesebb módjai. A szakemberek speciális szerkesztőket használnak, amelyek célja a kód kezelése. Számos kényelmes lehetőséget kínálnak, amelyek megkönnyítik a webhelyek létrehozását és szerkesztését.

Legnépszerűbb eszközök - Visual StudioKód, Sublime Text, Notepad ++. Ne félj összetettségüktől. Tudva, hogyan hozhat létre webhelyet a Notepad használatával, könnyen kitalálhatja, mi az. Ezeknek a szerkesztőknek az összes kiegészítő funkciója célja a webmester munkájának megkönnyítése, és nem zavarhatja meg a folyamatot.

Jegyzettömb program

A webhely létrehozása a Jegyzettömb segítségével csak egy hosszú, érdekes út kezdete a webfejlesztők számára.

tetszett:
0
y