|
<article>
|
Cikk definiálása a
dokumentumban.
|
|
<aside>
|
Az oldal tartalmától
eltekintve tartalmakat határoz meg.
|
|
<bdi>
|
A szöveg egy részét
elszigeteli a többitől, amely így pl. más irányban formázható.
|
|
<details>
|
További hozzáadott
tartalmak, amely a felhasználó által látható vagy nem.
|
|
<dialog>
|
Dialógus boxot vagy
ablakot definiál.
|
|
<figcaption>
|
A <figure>
elem számára határoz meg címet.
|
|
<figure>
|
Önálló tartalom
meghatározása.
|
|
<footer>
|
A dokumentum vagy
egyes rész számára határoz meg láblécet.
|
|
<header>
|
A dokumentum vagy
egyes rész számára határoz meg fejlécet.
|
|
<main>
|
A dokumentum fő
tartalmát határozza meg.
|
|
<mark>
|
Kijelölt/átszínezett
tartalmaz határoz meg.
|
|
<menuitem>
|
Egy felbukkanó
menüből hívható parancsot/menürészletet határoz meg.
|
|
<meter>
|
Ismert tartományon
belüli skaláris mérést határoz meg.
|
|
<nav>
|
Navigációs linkek
meghatározása.
|
|
<progress>
|
A feladat
előrehaladását jelzi.
|
|
<rp>
|
Meghatározza a ruby
nyelveket nem támogató böngészők által megjelenített tartalmakat.
|
|
<rt>
|
Az egyes karakterek magyarázata/kiejtése
(főleg Kelet-Ázsiai nyelveknél).
|
|
<ruby>
|
Ruby megjegyzést
definiál (főleg Kelet-Ázsiai nyelveknél).
|
|
<section>
|
A dokumentum egy
részletét határozza meg.
|
|
<summary>
|
Meghatározza a
<details> elem látható fejrészét.
|
|
<time>
|
Dátum/idő meghatározása.
|
|
<wbr>
|
Az esetleges
sortörés meghatározása.
|
2020. június 29., hétfő
HTML5 új elemek
HTML5 bevezetés
A jól ismert HTML4-es szabványt az internet folyamatos
változása miatt meg kellett újítani. Ez lett a HTML5. Elég sok régi taget
eltöröltek, valamint egyszerűsítettek, de több újdonság is bevezetésre került.
Bevezetésként itt van egy sima kódlap:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A dokumentum fejléce</title>
</head>
<body>
A lap tartalma…
</body>
</html>
Ez láthatólag jóval
egyszerűbb lett! A legfontosabb: minden modern böngésző támogatja!
Az érdekesebb újítások (többek között):
1.
Új szemantikus elemek, mint: heater, footer,
article, section.
2.
A form-elemek új attribútumai, pl.: number,
date, time, calendar, range.
3.
Új grafikus elemek, mint: svg, canvas, Google
Maps.
4.
Új multimédia elemek, mint: audio és video.
Szintén újításokat hoztak az API-k (applikációs szoftver
interfészek)
- HTML Geolokalizáció
- HTML Húzd és dobd (Drag and drop)
- HTML helyi tárolás
- HTML Applikációs cache
- HTML Web bedolgozó modulok
- HTML SSE
Visual Studio code kezdjük telepíteni
Érdemes telepíteni az Emmet Live plug in !+enter
automatikusan generál egy html fájlt.
az alábbi sorral pedig automatikusan generál tetszőleges
méretű felsorolást: pl.5
ul>li*5
h1+div>h3+ul>li*5 és enter automatikusan beszúrja:
<h1></h1>
<div>
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Kipróbáltam táblázattal is nagyon szépen működik:
table>tr*x>td*y –ahol az x ahány sort akarok, az y
pedig ahány oszlopot automatikusan létre hozza.
A következő bővítményeket telepítettem:
1. Live Server
2. Material Theme
3. Auto Rename Tag
4. CSS Peek
5. Live Sass Compiler
6. Bracket Pair Colorizer az sass.css halmozott zárójeleit
szinezi ki
7. Prettier - Code formatter
Live server plug in automatikusan megnyitja a fájlunkat egy
local hoston
p vel hozzunk létre egy paragrafust
lorem50-el létre hoz egy bekezdést
a view toggle word wrap tördeli a szöveget automatikusan
material theme megváltoztatjuk a színeket material theme
palenight high contrast jól elkülöníti az elemek közti színkülönbséget
autorename plug in átírja a záró tag-et ha pl. a h1-et
átírjuk h2-re
hozzunk létre egy body {backgroundcolor:blue} a head részbe
írjuk be link automatikusan az emmet felkínálja, hogy mit csatoljon hozzá és
kék lesz a háttér
Feliratkozás:
Bejegyzések (Atom)