HTML5 Examples

VISOKA TEHNIKA KOLA STRUKOVNIH STUDIJA U SUBOTICI
SZABADKAI MSZAKI SZAKFISKOLA

SUBOTICA TECH COLLEGE OF APPLIED SCIENCES
Examples
VISOKA TEHNIKA KOLA STRUKOVNIH STUDIJA U SUBOTICI | SZABADKAI MSZAKI SZAKFISKOLA | SUBOTICA TECH
24000 SUBOTICA, MARKA OREKOVIDA 16
http://www.vts.su.ac.rs/
HTML5 examples
A simple HTML5 document
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Simple HTML document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Fig 1. A simple HTML5 document
HTML5 New Input Types

Creating HTML5 color input type
<!DOCTYPE html>
<html>
<head lang="en">
<title>HTML5 Color Input Type</title>
</head>
<body>
<form>
<label>
Select Color: <input type="color" name="mycolor">
</label>
</form>
</body>
</html>
Fig 2. Creating HTML5 color input type
Creating HTML5 email input type

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Email Input Type</title>
<style type="text/css">
input[type="email"]:valid{
outline: 2px solid green;
}
input[type="email"]:invalid{
outline: 2px solid red;
}
</style>
</head>
<body>
<form>
<label>
Email Address: <input type="email" name="mycolor"
required>
</label>
</form>
</body>
</html>
Fig 3. Creating HTML5 email input type
Creating HTML5 number input type

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Number Input Type</title>
input[type="number"]:valid{
}
input[type="number"]:invalid{
}
</style>
</head>
<body>
<form>
<label>
Select Number: <input type="number" value="1" min="1"
max="10" step="0.5" name="mynumber">
</label>
</form>
<p><strong>Note</strong>: If you try to enter the number out
of the range (1-10) or text character it will show error.</p>
</body>
</html>
Fig 4. Creating HTML5 number input type
Creating HTML5 range, search and URL input type

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Range, search and URL Input Type</title>
input[type="url"]:valid{
}
input[type="url"]:invalid{
4

}
</style>
</head>
<body>
<form>
<label>
Select Number: <input type="range" value="5" min="1"
max="10" step="0.5" name="mynumber">
</label>
</br>
<label>
Search Website: <input type="search" name="mysearch">
</label>
</br></br>
<label>
Website URL: <input type="url" name="mywebsite"
required>
</label>
<p><strong>Note</strong>: Enter URL in the form like
http://www.google.com</p>
</form>
</body>
</html>
Fig 5. Creating HTML5 range, search and URL input type
HTML5 Audio
Embedding audio in HTML documents
<!DOCTYPE html>
<html lang="en">
<head>
<title>The HTML5 audio Element</title>
5
</head>
<body>
<audio controls="controls" src="birds.mp3">
Your browser does not support the HTML5 audio element.
</audio>
</body>
</html>
Fig 6. Embedding audio in HTML documents
HTML5 Video
Embedding video in HTML documents
<!DOCTYPE html>
<html lang="en">
<head>
<title>The HTML5 video element</title>
</head>
<body>
<video controls="controls" src="big_buck_bunny.mp4">
Your browser does not support the HTML5 Video element.
</video>
</body>
</html>
Fig 7. Embedding video in HTML documents
HTML5 Canvas
Drawing a line onto the canvas
<!DOCTYPE html>
<html lang="en">
<head>
<title>Drawing a Line on Canvas</title>
canvas{
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Fig 8. Drawing a line onto the canvas
Drawing an arc and rectangle onto the canvas

<!DOCTYPE html>
<html lang="en">
<head>
<title>Drawing an Arc on Canvas</title>
canvas{
}
</style>
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 *
Math.PI, false);
context.stroke();
context.rect(50, 50, 200, 100);
context.stroke();
};
</script>
</head>
<body>
</body>
</html>
Fig 9. Drawing an arc and rectangle onto the canvas
Filling color inside a rectangle shape on canvas

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Filling Color inside a
Rectangle</title>
canvas{
}
</style>
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
</body>
</html>
Fig 10. Filling color inside a rectangle shape on canvas
Filling radial gradient inside canvas shapes

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Filling Radial Gradient inside Canvas
Shapes</title>
canvas{
}
</style>
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(150, 100,
10, 160, 110, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
</head>
<body>
</body>
</html>
10
Fig 11. Filling radial gradient inside canvas shapes
HTML5 SVG
Embedding SVG into HTML documents
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedding SVG Into HTML Pages</title>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>
Fig 12. Embedding SVG into HTML documents
11
Creating a line, rectangle, circle and text using SVG

<!DOCTYPE html>
<html lang="en">
<head>
<title>Create a Line with HTML5 SVG</title>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100"
style="fill:orange; stroke:black; stroke-width:3;" />
<line x1="50" y1="50" x2="250" y2="150"
style="stroke:red; stroke-width:3;" />
<circle cx="150" cy="100" r="10" style="fill:lime;
stroke:black; stroke-width:3;" />
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy;
font-size:14px;">
Here you will find lots of useful information.
</text>
</svg>
</body>
</html>
Fig 13. Creating a line, rectangle, circle and text using SVG
12
HTML5 YouTube
<!DOCTYPE html>
<html lang="en">
<head>
<title>Youtube video implementation</title>
</head>
<body>
<h1>Youtube video implementation</h1>
<iframe width="420" height="345"
src="http://www.youtube.com/embed/8NAaRQUTp9g">
</iframe>
</body>
</html>
Fig 14. HTML5 YouTube

Note:
8NAaRQUTp9g is the part of the link https://www.youtube.com/watch?v=8NAaRQUTp9g
13

HTML5 Examples

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML5 Examples

Загружено:

Авторское право:

Доступные форматы

VISOKA TEHNIKA KOLA STRUKOVNIH STUDIJA U SUBOTICI

SZABADKAI MSZAKI SZAKFISKOLA

Fig 1. A simple HTML5 document

HTML5 New Input Types

Fig 2. Creating HTML5 color input type

Creating HTML5 email input type

Fig 3. Creating HTML5 email input type

Creating HTML5 number input type

Fig 4. Creating HTML5 number input type

Creating HTML5 range, search and URL input type

outline: 2px solid red;

Fig 5. Creating HTML5 range, search and URL input type

Fig 6. Embedding audio in HTML documents

Fig 7. Embedding video in HTML documents

Fig 8. Drawing a line onto the canvas

Drawing an arc and rectangle onto the canvas

Fig 9. Drawing an arc and rectangle onto the canvas

Filling color inside a rectangle shape on canvas

Fig 10. Filling color inside a rectangle shape on canvas

Filling radial gradient inside canvas shapes

Fig 11. Filling radial gradient inside canvas shapes

Fig 12. Embedding SVG into HTML documents

Creating a line, rectangle, circle and text using SVG

Fig 14. HTML5 YouTube

Вам также может понравиться