⚡ HTML összes, kezdőknek és karrierváltóknak ⚡
ฝัง
- เผยแพร่เมื่อ 11 ก.ย. 2024
- ⚡ HTML összes, kezdőknek és karrierváltóknak ⚡
0:44 Átfogó kép a webfejlesztésről
10:35 Fejlesztői környezet kialakítása
19:20 HTML és CSS kód ellenőrzése
22:00 HTML alapjai
27:15 Főcím, alcímek
33:45 Paragrafusok
38:20 Ezeket ne használd (hr és br)
41:20 Szövegek HTML formázása
55:30 Megjegyzések
57:20 Hivatkozások
1:11:00 Képek
1:23:20 Táblázatok
1:36:40 Listák
1:40:40 Block, inline és inline-block megjelenítés
1:48:00 Szemantikus elemek
1:55:30 Multimédia beszúrása
2:02:25 Űrlapok
2:38:20 Tovább a CSS irányába
★☆★ JELENTKEZZ KARRIERVÁLTÓ PROGRAMOUNKRA! ★☆★
programozaskar...
★☆★ LEHET BELŐLEM PROGRAMOZÓ? ★☆★
Töltsd ki a tesztet a Programozás Karrier oldalán!
programozaskar...
★☆★ INGYENES HTML-CSS ÉS WORDPRESS TANFOLYAMOK ★☆★
programozas-ka...
programozas-ka...
★☆★ NÉZD MEG AZ ÖSSZES PROGRAMOZÁS KARRIER TANFOLYAMOT! ★☆★
programozas-ka...
★☆★ OLVASS BELE INGYENES TARTALMAINKBA! ★☆★
programozaskar...
★☆★ TÖLTSD LE KÖNYVEINKET! ★☆★
Mi kell a programozói karrierváltáshoz?
leanpub.com/mi...
Programozás, Karrier, Python - Kézikönyv a szoftverfejlesztői karrier hatékony építéséhez
leanpub.com/pr...
Modern JavaScript a Gyakorlatban
leanpub.com/mo...
★☆★ CSATLAKOZZ ZÁRTKÖRŰ FACEBOOK CSOPORTUNKBA! ★☆★
/ programozaskarrier
A videó jól magyaráz, hhasznos tartalom. Viszont amilyen lassan indult a tananyag, 2 óra környékén már előjött a programozó éned és eléggé felgyorsult a tudás átadása :)
Nagyon köszi a videot, sokat segített :D
hasznos videó és teljesen érhetően magyarázol .
Szia. Nagyon köszönöm a videót. Este végignézem.
Isten áldjon meg!
Profi, élvezetes, MÁR SZEDEM IS LE! 🤭 Köszönöm a munkádat! ❤
Nagyon jó a videó és érthető az egész!
nagyon szuper köszönöm :))
01:35:13 - vannak olyan esetek, amikor az inline stílusmegadás nem kerülendő - persze rendszertől és hozzáféréstől függ (pl. nincs hozzáférés a CSS-hez), mert így felül lehet bírálni a külső CSS-ben definiált tulajdonságokat (a böngésző így értelmezi a sorrendet), meg hát sok JS megoldás is inline módosítja a stílust.
Az akadálymentesítés alapja, hogy CSS nélkül értelmezhető legyen az oldal. Ez nem jelenti azt, hogy minél több stíluselemet HTML-be kellene tennünk. Egy HTML tag értelmezhető ugyanis az alapértelmezett stílusában. Szemantikailag nincs szükség extra dekorációra. Gyakorlatias szempontból feltételezem, hogy a legtöbb normális projektnek a közönségében elhanyagolható a CSS-t nem használó, de nem akadálymentesítésre szoruló eset.
A modern Js megoldások csak látszólag teszik a JavaScriptet inline, mert a legtöbb egy egyedi osztályt generál nekik és legenerálja a CSS-t is (pl. Styled Components). Ugyanakkor ha egy Js könyvtár tényleg inline stílust módosít, akkor is maguk a módosítások a könyvtáron belül maradnak izoláltan, így nehezebben keletkezik karbantartási probléma.
@@programozaskarrier tudom, valóban így van, és úgy is elegáns/olvasható a kód, csak azért jegyeztem meg, mert 13 év alatt SEO-sként kb. 2-300 oldalon dolgoztam különböző rendszerekkel és hozzáférési jogosultságokkal, volt pár példa arra, hogy csak admin felület állt rendelkezésre, fájlszintű hozzáférés nem, ilyenkor pedig jó tudni, miként értelmezi a browser a sorrendet. (SEO/accessibility szempontjából pl volt, hogy a h2 tag-ek a p-vel szinte megegyező stílust kaptak, és nem volt lehetőség megadni külső Css-ben a szabályt, így mehetett az inline körmölés...)
Persze ez szőrszálhasogatásnak tűnik, de nem annak szántam, csak nagyon sok wp (vagy akár joomla) oldal van még a kkv szektorban, ezek ráadásul sokszor 10-15 pluginnel vannak telepítve, minden frissítésük felülír valamit, no és ott a modern js kb. kilőve.
Egyértelmű, hogy saját fejlesztésű site esetén a logikus felépítésre kell törekedni, és az a legjobb megoldás :-)
Így már érthető. Kedvencem amikor alkalmazottként rajtam kérték számon, hogy volt egy CMS-ünk custom HTML-lel, és az ügyfél Word-öt konvertált HTML-lé, de azt se tudta, hogy mi az a jól formált HTML, ezért folyton elszúrta az oldalt. Sajnos azzal főzünk, amink van.
@@programozaskarrier igen, és ezek a gyakorlatban nem ritkák. Ezért talán jobbak valahol azok a CMS-editorok, amelyek eldobják a formázás jó részét, vagy különféle jogosultsághoz van rendelve. Más kérdés, hogy pl. WP-nél maradva ez mennyire lehetséges - mert így is gigantikusra hízott már az a rendszer a block editortól kezdve a bővítményekig és theme frameworkökig (ezt leszámítva a 'vanilla WP' szemantikailag nagyon jó alapsablonokkal érkezett.)
Hogy a ne legyen olyan unalmas:
body {
background: #333;
color: #fff
}
mark {
border-left: 1px solid red;
}
#mark {
--mark-color: hsl(47 90% 72%/.6);
--mark-skew: 0.25em;
--mark-height: 1em;
--mark-overlap: 0.3em;
margin-inline: calc(var(--mark-overlap) * -1);
padding-inline: var(--mark-overlap);
border-bottom: 1px solid red;
background-color: transparent;
background-image:
linear-gradient(
to bottom right,
transparent 50%,
var(--mark-color) 50%
),
linear-gradient(
var(--mark-color),
var(--mark-color)
),
linear-gradient(
to top left,
transparent 50%,
var(--mark-color) 50%
)
;
background-size:
var(--mark-skew) var(--mark-height),
calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
var(--mark-skew) var(--mark-height)
;
background-position:
left center,
center,
right center
;
background-repeat: no-repeat;
color: inherit;
}
A mark felhasználási területe.
Egy háttér kiemelés lehetséges formája, mely eltér a szokványos használattól.
Egy háttér kiemelés lehetséges formája, mely eltér a szokványos használattól.
Szia! Nagyon köszi a videót, szuper hasznos! :)
Van ötleted, hogy miért nem akarja elküldeni a Formspreenek a kitöltött űrlapot?
Sőt, az Adatok törlése gomb sem akar működni nálam... :/
Na ez az amire a youtube kommentben levelezés alkalmatlan.
Sziasztok! Nekem az lenne a kérdésem, hogy letöltöttem a videó elején említett kiegészítéseket, de sajnos a live server nekem nem működik. Van tippetek, hogy mi lehet a probléma?
Látatlanban csak annyit tudunk mondani, hogy működnie kell ha a megfelelő lépéseket csinálod végig, nekünk rendszeresen működik. Ilyenkor a hétvégi órákon szoktuk megnézni a karrierváltó programon belül, hogy mi a probléma, de nem találkoztunk még ezzel a problémával, hogy valakinek ne működne a live server.
@@programozaskarrier köszönöm a gyors választ, megpróbáltam újra telepítéssel de sajnos így sem működik. Ennek ellenére hasznos a tartalom amiért hálás vagyok!
Az lenne a kerdesem , hogy hogy birtad mukodesre a live servert ?
Helló!
Kezdő érdeklődőként szeretném megkérdezni, hogy ha letöltöm az említett verziót a Visual studio code -t ez ingyenes teljesen?
Igen.
Igen, ingyenes a Visual Studio Code.
Magam is most kezdtem programozást tanulni és a Pythonhoz ezt és a Pycharm-ot ajánlják 👍
Egy hiba: a p tag-be nem teheted az address tag-et. A w3c validator meg is mondja ha behúzod a kódot.
Nekem a "Lorem..." szöveget nem tördeli be a VS Code, ezt hol lehet beállítani?
nekem se valamiért, pedig felraktam a Prettier extensiont.
A jelenség neve sortörés (word wrap) és kis google-zés után az Alt+Z (macos: option+Z) billentyűkombináció is megtalálható, amely ki-be tudja kapcsolni a sortörést.
@@programozaskarrier Thx😁