Eszközök a webhelyen


oktatas:web:html:html5_újdonságai

< HTML

HTML5

Alap

<!doctype html>
<html>
fej
törzs
</html>

A keresőknek célszerű a html számára egy lang attribútum megadása:

<!doctype html>
<html lang="hu">
fej
törzs
</html>

Megjegyzések

<!-- megjegyzés szövege -->

Fejrész

<head>
karakterkészlet megadása
weblap címe
külső stíluslap csatolása
beágyazott stílus
</head>

Karakterkészlet

<meta charset="utf-8">

Weblap címe

<title>Weblapcím</title>

Stíluslap

<link rel="stylesheet" href="style.css">

A link elemmel egy másik állományt kapcsolunk a html fájlunkhoz. A rel attribútum mondja meg, hogy milyen a kapcsolat, illetve a viszony a másik állománnyal. A rel a relation, azaz viszony szóból.

Külső és belső stílusinformáció megadása

style.css
h1 {
	color: blue;
}
index.html
<!doctype html>
<html lang=hu>
<head>
<title>Teszt</title>
<meta charset="utf-8">
 
<link rel="stylesheet" href="style.css">
<style>
h1{
	color: red;
}
</style>
 
</head>
<body>
 
<h1>Az oldal címe</h1>
</body>
</html>

Ha mind a kettő meg van adva, akkor amelyik közelebb van a weblap törzséhez, az felülírja a másikat.

Beépített stíluslap

<style>
CSS kód
</style>

Törzs

Fejezetcímek

<h1>Cím</h1>
<h2>Kettes fejezetcím</h2>
...
<h6>Hatos fejezetcím</h6>

Bekezdés

<p>Bekezdés szövege</p>

Videó

<video src="sample3.ogg" width=300height=300”></video>
  • Működik Firefox, Opera, Chrome alatt
  • IE8 nem jelenít meg semmit

Többféle formátumban felrakva

<video  width=300height=300”>
    <source src="sample3.ogg">
    <source src="sample1.mp4">
</video>

Típusok megadása

<video width="….." height="….." controls>
<source src="….mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="…...webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="…….ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Hang

<audio controls="controls">
  <source src="hangfajl.ogg" type="audio/ogg">
  <source src="hangfajl.mp3" type="audio/mpeg">
A böngésződ nem támogatja az audio elemet. 
</audio>

Fogd és húzd

<!DOCTYPE html>
<html>
<head>
 
<style type="text/css">
#div2 {
    width:70px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
</style>
 
 
<script type="text/javascript">
function allowDrop(ev)
{
    ev.preventDefault();
}
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
 
<img id="drag1" src="lib/images/notify.png" draggable="true"
ondragstart="drag(event)" width="69" height="69">
 
</body>
</html>

Húzd a képet a téglalapra:


HTML5 képesség

Hogy megtudd milyen HTML 5 képességeket tud a böngésződ, látogasd meg az alábbi oldalt:

Az oldal pontozza a böngésző képességét. Néhány mérés:

  • Chrome (fejlesztői ág) 217 pont
  • Safari 5.01 208 pont
  • Firefox 4 béta2 189 pont
  • Firefox 3.6.11 139 pont
  • Opera 10.6 159 pont
  • Internet Explorer 9 előzetes 84 pont

A maximális pontszám: 300

Az adatok régiek. A maximális pontszám már 500 és a Chrome éppen 422 pontos (2012-09-22).

Függelék

index.html
<!doctype html>
<html>
<head>
 
<meta charset="utf-8" />
<title></title>
 
<style>
body {
	margin: 2% 10%;
}
header, nav, footer, article {
	display:block;
	background-color: #858500;
 
}
header {
	padding: 2px;
}
nav {
	float:left; 
	width:14%;
	padding: 1%;
}
article {
	float:right; 
	width:82%;
	padding: 1%;
}
footer {
	clear:both;
	text-align: center;
}
</style>
</head>
<body>
 
 
 
 
<header>
 <h1>Egy kis leíárs rólam</h1>
</header>
<nav>
 <h2>Menu</h2>
 <ul>
	<li><a href=”last.html”>Múlt hét</a></li>
	<li><a href=archive.html”>Archívum</a></li>
 </ul>
</nav>
 
<article>
 <h2>Hétfő</h2>
 <p>Megittunk valamit, valakivel, valahol</p>
</article>
 
 
<article>
  <h2>Kedd</h2>
 <p>Most változatos volt a nap, csak megittunk valamit, valakivel.</p>
</article>
 
<footer>
	<p>
	<small>
	Copyright (c) Sallai András, 2013. Kapcsolatteremtéshez látogasd meg az oktatásoldalt.
	</small></p>
</footer>
 
</body>
</html>

Linkek

Ez a weboldal sütiket használ statisztikai céllal. Ha használod a weboldalt, elfogadod, hogy a számítógépeden sütiket tárolunk.Több információ
oktatas/web/html/html5_újdonságai.txt · Utolsó módosítás: 2017/10/02 20:29 (külső szerkesztés)