Hozz létre egy saját portfolió oldalt
Az előző gyakorlatban csináltunk egy saját weboldalt és host-oltuk (elérhetővé tettük) lokális hálózaton. Most létrehozunk egy portfolió weboldalt saját magunknak HTML, Javascript és CSS segítségével.
1., Egészítsük ki a html kódunkat
- Induljunk ki az előző gyakorlat végéből. Innen letöltheted a kódot
- https://github.com/czimerk/web-part1
- Írd be az "npm i" parancsot a terminal-ba, hogy telepítse a package-eket
- Írd be az "npm start" parancsot, hogy megnyíljon a chrome localhost:8080 címen
- Ahhoz, hogy létrehozzunk egy ilyen oldalt meg kell ismerkednünk néhány új HTML elemmel.
- <div> - létrehoz egy szekciót
- <a> - létrehoz egy hivatkozást, href egy ún. attribútum, ahol megadhatod, milyen címre mutasson a link (pl esetünkben majd egy másik html oldalra)
- Adjuk hozzá a következő html kódot az index.html fájlhoz és mentsük el.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portfolio</title>
</head>
<body>
<div>
<h1>Home</h1>
</div>
<div>
<div>
<a href="index.html">Home</a>
<a href="aboutme.html">About me</a>
<a href="works.html">My works</a>
</div>
<div>
Home page content
</div>
</div>
</body>
</html>
- Hozzunk létre további két oldalt egy aboutme.html-t, és egy works.html-t és cseréljük ki a vastaggal szedett sorokat a megfelelőre (About me, About me content...)
- Mentsük el az összes dokumentumot és F5-tel frissítsük az oldalt.
- A főoldalt látjuk. És el tudunk navigálni az About me-re vagy a My works-re (Rólam, Munkáim, ha magyar oldalt szeretnél)
- A böngésző címsor is ennek alapján változik (pl localhost:8080/aboutme.html)
2., Adjuk hozzá egy kis Javascriptet
A Javascript nyelvet eredetileg azért hozták létre, hogy dinamikus tartalmakat adjanak hozzá az oldalakhoz, HTML elemeket manipuláljanak, gombnyomásra reagáljanak, eltárolják átmeneti számítások eredményeit kliens oldalon. A legtöbb böngésző támogatja (persze az újabb JS verziókat már nem biztos, hogy egyes böngészők támogatják e.g. Internet Explorer). Mi pedig arra szeretnénk használni, hogy a navigációs linkeket dinamikusan hozzuk létre. Ehhez- Be kell hivatkoznunk egy main.js fájlt a HTML dokumentumunkban
- El kell kérnünk a böngészőtől egy hivatkozást arra a <div> elemre, ahol felsoroljuk a hivatkozásokat
- Létre kell hoznunk a linkeket az oldalakra, és hozzá kell adnunk a navigációs <div> gyerekeihez.
<script src="main.js"></script>kódot a </body> tag fölé. Aztán hozzuk létre és nyissuk meg a main.js fájlt. Írjuk bele, hogy
alert('Hello javascript!');Ha most ráfrissítesz az oldalra, egy felugró ablakot látsz a "Hello javascript" szöveggel. Na ezt a sort most törölhetjük is. (Ez gyakori ebben a szakmában, hozzádunk kódokat, törlünk kódokat, rájövünk, hogy nem kellett volna törölni...)
2., A HTML dokumentumban egy elemre document.getElementById(...)-vel tudsz hivatkozni, Itt a ... helyére egy szöveges paramétert kell írni - az elem azonosítóját (id). Az id is egy HTML attribútum (olyan mint korábban a href a <a> elemre), tehát ezt az attribútumot meg kell adni a div-re ami majd tartalmazza a navigációs linkjeinket. Cseréljük le ezt
<div>
<a href="index.html">Home</a>
<a href="aboutme.html">About me</a>
<a href="works.html">My works</a>
</div>
erre
<div id="navigation-bar"></div>A javascript fájlba pedig írjuk be
var navigationBar = document.getElementById("navigation-bar");3. A linkek létrehozása és hozzáadása pedig így történik
var aboutLink= document.createElement("a"); //create the element <a></a>Megjegyzés: Ez így még mindig sok ismétlés csak most már javascriptben (Home, My works etc). de JS-ben létre tudunk hozni függvényeket, ahol paraméterekre cseréljük le a változó részeket. Ezzel a main.js tartalma a következőre változik.
aboutLink.setAttribute("href", "aboutme.html"); //set href to "aboutme.html"
aboutLink.innerHTML = "About me"; //set text of navigation link
navigationBar.appendChild(aboutLink); //add link to navigation bar
var navigationBar = document.getElementById("navigation-bar");Ha most létre akarunk hozni egy új oldalt és hozzáadni a navigációhoz, az már csak ennyi kódba kerül. (például, ha az oldal neve tutorials.html)
addNavLink(navigationBar, "index.html", "Home");
addNavLink(navigationBar, "aboutme.html", "About me");
addNavLink(navigationBar, "works.html", "My works");
function addNavLink(navBarElement, page, label){
var link = document.createElement("a");
link.setAttribute("href", page);
link.innerHTML = label;
navBarElement.appendChild(link);
}
addNavLink(navigationBar, "tutorials.html", "Tutorials");
Fontos: A main.js fájlt be kell hivatkozni az aboutme.html-be és a works.html-be is különben itt nem jelenik meg a navigációs sáv.
Ha most frissíted az oldalt Ctrl + F5 -tel (talán oldalanként is szükséges nyomni egyet a cache-elés miatt), akkor a navigációnak működnie kell, és minden oldal a saját tartalmát jeleníti meg.
3., Adjuk hozzá a stílus lapot (CSS)
Tehát működik a navigáció, tartalmat is tudunk hozzáadni, de ez az oldal még nem jutna a web dizájner verseny döntőjébe. A navigáció összefolyik, ráadásul a címsor és az oldal tartalom között van. Hogyan tudnánk legalább az elrendezésen javítani?Hozzunk létre egy main.css fájlt a public mappába, az alábbi kóddal.
body{Adjuk hozzá ezt a sort a <title> tag alá minden html fájlban (index, aboutme, works), ezzel hivatkozzuk be a css-t.
color: #ddd;
background-color: #1b1a1a;
}
<link rel="stylesheet" href="main.css">Frissítsük az oldalt és máris egy szemkímélő sötét oldal tárul elénk. Ideális, ha épp éjszakai vezetés közben akarjuk nézegetni a saját portfóliónkat.
Megtörténhet, hogy valami ilyesmi lesz az eredmény, ahol ugye az a gond, hogy a sötétség nem terjeszkedik ki a teljes oldalra.
body{
color: #ddd;
background-color: #1b1a1a;
display: flex;
flex-flow: column;
height: -webkit-fill-available;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A weboldalunk így fog kinézni, felül lesz egy címsor, balra a navigációs sáv, jobbra pedig a tartalom.
A body-ban már beállítottuk, hogy az elemek fentről lefelé kövessék egymást. Most már csak azt kell megadni, hogy a h1 elem fix magasságú legyen. Ez 42px lesz, a maradék magasságot pedig a navigáció és a tartalom (left-pane, content) fogja kitölteni.
A CSS-ben a legtöbbször az alábbiak szerint hivatkozunk html elemekre
- név alapján - e.g. body above will impact display of all body elements on the page
- class(osztály) név alapján - lásd alább class="page-content" osztályt adunk meg a <div> elem class attribútumnak, és a CSS-ben .page-content ként hivatkozunk rá
- id alapján - hasonló mint az osztály, de az attribútum id="navigation-bar" a hivatkozás pedig #navigation-bar{} a CSS-ben.
A CSS-ről itt tudhatsz meg mindent
https://www.w3schools.com/css/default.asp
A page-content-et class szerint hivatkozzuk, ezért adjuk hozzá a class attribútumot a <div>-hez a <h1> sor alatt
https://www.w3schools.com/css/default.asp
A page-content-et class szerint hivatkozzuk, ezért adjuk hozzá a class attribútumot a <div>-hez a <h1> sor alatt
<div class="page-content">
<div id="navigation-bar" class="left-pane">
</div>
<div class="content">
Home page content
</div>
</div>
A main.css-be pedig ez kerül
body {
margin: 0px;
color: #ddd;
background-color: #1b1a1a;
display: flex;
flex-flow: column;
height: -webkit-fill-available;
border: 1px solid black;
}
h1 {
text-align: center;
flex: 0 0 42px;
}
.page-content {
flex: 1;
display: flex;
flex-flow: row;
}
.left-pane {
display: flex;
flex-flow: column;
flex: 0 0 100px;
padding: 10px;
}
.content {
flex: 1;
padding: 10px;
}
A fentiekhez némi magyarázat
- flex: 0 0 42px - azt jelenti, hogy a h1 elem nem tud nőni, zsugorodni, 42px lesz magasságban, mivel a body oszlopszerű elrendezést biztosít
- flex: 1 - azt jelenti, hogy az elem arányosan 1 egységnyi részt tölt ki, de mivel az egyetlen másik elem fix méretű ezért az egész maradék oldalt elfoglalja a page-content
- flex-flow: row; - Ez megváltoztatja az elemek elrendezését úgy, hogy azok már egy sorban követik egymást. Mivel az első elem (left-pane) fix méretű, a maradék (page-content) ki fogja tölteni a többi helyet az egész sorban.
4., Tippek és trükkök
- A böngésző cache-elést ki tudod kapcsolni Chrome-ban F12, network tab -> disable cache
- Ha F12-t nyomsz az Elements fülön az egérrel böngészni tudod meddig terjednek az egyes elemek az oldalon, ha fölé viszed az egeret.
- A gyarkolat anyag végső változata itt érhető el https://github.com/czimerk/web-part2-htmlJsCss
Kérlek, ha van pár perced segítsd a blog működését azzal, hogy névtelen visszajelzést adsz
Nincsenek megjegyzések:
Megjegyzés küldése