<!DOCTYPE html>
<html>
<head>
<title>Tags mais usadas da html 5 - Rodolfo Bortoluzzi</title>
</head>
<body>
<p> A intenção deste arquivo é o aprendizado da linguagem HTML 5 </p>
<!--comentários-->
<hr/> <!-- linha horizontal-->
<h1> <span> Aprendendo HTML 5! - Todos os comandos mais utilizados </span> </h1> <!-- O Elemento span é um container genérico em linha (inline), ao contrário do seu parente mais próximo, o elemento div , que é um elemento de bloco (block).-->
<p> Oi sou o <strong>Rodolfo</strong>. Programando em <em>HTML 5</em>.</p> <!-- strong: negrito e em:itálico-->
<p class = "quote"> "Declare variáveis e não guerra" </p> <!-- declaração de variável -->
<p> formatação <br /> This is regular text </p> <!-- br / é uma quebra de linha simples-->
<p><b> bold text </b></p>
<p><big> big text </big></p>
<p><i> italic text </i></p>
<p><small> small text </small></p>
<p><strong> strong text </strong></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><ins> inserted text </ins></p>
<p><del> deleted text </del></p>
<p align ="center"> Alinhando no centro </p>
<p align ="left"> voltando para a esquerda </p>
<hr width="50px" /><br/> <!-- linha de 50 pixels-->
<hr width="50%" /><br/> <!-- linha de 50% da largura -->
<hr width="10%" align="right"/> A próxima é uma imagem bacana <!--mas esta continua sendo um texto--> <br/> <!--linha de 10% da largura alinhada a direita-->
<img src="f:/família/teste html.jpg" alt="se a imagem não apareceu, é mostrado este texto alternativo"/>
<p>e essa é uma forma de redimensionar a imagem utilizando escala de pixels. Nessa usei altura de 150 pixels e largura de 150 pixels.</p>
<img src="f:/família/teste html.jpg" height="150px" width="150px" alt="a imagem não foi encontrada" />
<p>e essa é uma forma de redimensionar a imagem utilizando porcentagens. Nesta vou usar 10% da altura original e 10% da largura original</p>
<img src="f:/família/teste html.jpg" height="10%" width="10%" alt="a imagem não foi encontrada" />
<p>e se eu quiser colocar uma moldura na imagem posso usar assim...</p>
<img src="f:/família/teste html.jpg" height="150px" width="150px" border="6px" alt="a imagem não foi encontrada" />
<p>Mudando de assunto. Para inserir um link na página podes fazer assim: </p>
<a href="https://www.bortoluzzi.services"> Essa é a minha página! </a> <br/><!--dá para linkar também em imagens e textos, basta usar comandos aninhados-->
<a href="https://www.bortoluzzi.services" target="_blank"> Essa é a minha página em nova guia </a> <!-- target ="_blank" faz com que a página do link seja aberta em uma nova guia-->
<p>Agora vamos ver como funcionam as listas. Primeiro a lista ordenada: </p> <br/>
<ol>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
</ol>
<p>Abaixo a lista não ordenada:</p> <br/>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
<p>Vamos ver como fazer tabelas!</p> <br/>
<table>
<tr>
<td> coluna 1 </td>
<td> coluna 2 </td>
<td> coluna 3 </td>
</tr>
</table>
<p>As vezes precisamos formatar as tabelas:</p><br/>
<table border="2"> <!-- adiciona bordas a tabela -->
<tr>
<th>título da coluna 1</th>
<th>título da coluna 2</th>
<th>título da coluna 3</th>
</tr>
<tr> <!-- adiciona a primeira linha-->
<td>Red</td> <!--adiciona a primeira coluna-->
<td>Blue</td> <!-- adiciona a segunda coluna-->
<td>Green</td> <!-- adiciona a terceira coluna-->
</tr> <!-- termina a primeira linha-->
<tr> <!-- adiciona a segunda linha-->
<td><br /></td> <!--coloca uma quebra de linha na primeira coluna e segunda linha-->
<td colspan="2" align="center">centro</td><!--une a segunda e terceira coluna na segunda linha usar colspan para colunas e rowspan para linhas e centra o conteúdo das células-->
</tr> <!-- termina a segunda linha-->
<tr> <td colspan="3" style="color:blue;" bgcolor ="grey" align="center"> azul </td> <!-- style para mudar a cor da fonte e bgcolor para mudar a cor do fundo-->
</tr>
</table>
<!--Em HTML, a maioria dos elementos é definida como um bloco de elementos ou em linha de elementos
Elementos de bloco começam com novas linhas. Por exemplo: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, etc.
Elementos de linha são apresentados sem quebra de linha. Por exemplo: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.
O elemento <div> é um elemento de bloco que geralmente é utilizado como um compartimento para outro elemento HTML.
Quando usado em conjunto com alguns estilos CSS, o elemento <div> pode ser usado como um elemento de estilo do conteúdo de um bloco:-->
<h1>Vamos fazer uma barra verde de título usando o elemento div! </h1>
<div style="background-color:green; color:white; padding:20px;">
<p> Este texto será exibido em branco.</p>
<p> O fundo deve estar verde...eu acho.</p>
</div>
<!--Similarmente, o elemento <span> é usado em linha geralmente utilizado como um compartimento para algum texto.
Quando utilizado em conjunto com CSS, o elemento <span> para estilizar partes de um texto: -->
<h2>Usando o elemento <span style="color:red">span</span> destacamos partes importantes do texto</h2>
<!--Outros elementos podem ser usados como elementos no nível do bloco ou elementos embutidos. Isso inclui os seguintes elementos:
APPLET - applet Java incorporado
IFRAME - quadro embutido
INS - texto inserido
MAP - mapa de imagem
OBJECT - objeto incorporado
SCRIPT - script dentro de um documento HTML
Você pode inserir elementos embutidos dentro dos elementos do bloco.
Por exemplo, você pode ter vários elementos <span> dentro de um elemento <div>.
Os elementos embutidos não podem conter nenhum elemento no nível do bloco.-->
<!--Vamos agora criar formulários para poder trocar informações com o usuário para isso devemos que,
podem ser criados usando o elemento <form>, com suas tags de abertura e fechamento.
Devemos usar o atributo action para endereçar a uma página de internet ou servidor que irá ser carregada pelos dados após a submissão pelo usuário.
<form action="http://www.rlbpc.me">Formulário 1</form>
The method attribute specifies the HTTP method (GET or POST) to be used when forms are submitted (see below for description):
<form action="url" method="GET">
<form action="url" method="POST">
When you use GET, the form data will be visible in the page address.
Use POST if the form is updating data, or includes sensitive information (passwords).
POST offers better security because the submitted data is not visible in the page address.
To take in user input, you need the corresponding form elements, such as text fields.
The <input> element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc.
The example below shows a form requesting a username and password:-->
<p>As vezes precisamos pedir dados aos usuários. Para isso usamos o elemento form. Abaixo um formulário para login:</p> <br/>
<form>
<input type="text" name="username" /> Usuário<br/>
<input type="password" name="password" /> Senha <br/>
</form>
<p>Se necessitamos de uma escolha única usamos o elemento "radio". Por exemplo para verificar se algo é verdadeiro ou falso:</p>
<form>
<input type="radio" name="verdadeiroOuFalso" value="Verdadeiro" /> Verdadeiro <br />
<input type="radio" name="verdadeiroOuFalso" value="Falso" /> Falso <br />
</form>
<p>Se necessitamos de uma escolha multipla usamos o elemento "CheckBox". Por exemplo para selecionar acessórios de um carro...:</p>
<form>
<input type="checkbox" name="acessorio" value="rádio" /> Rádio <br />
<input type="checkbox" name="acessorio" value="computador de bordo" /> Computador de bordo <br />
<input type="checkbox" name="acessorio" value="aros de liga leve" /> Aros de liga leve <br />
<input type="checkbox" name="acessorio" value="bancos de couro" /> Bancos de couro <br />
</form>
<p>Para receber os dados informados por usuários devemos ter um botão para que ele confirme que tudo está pronto para ser enviado a página ou servidor.</p>
<p>Isso é feito utilizando a tag "input" (declara-se o tipo: Neste caso "submit" e o valor "Enviar": </p>
<input type="submit" value="Enviar"/> <!--After the form is submitted, the data should be processed on the server using a programming language, such as PHP.-->
<p>Um formulário de contato pode ser criado com essas mesmas tags:</p>
<h1><span>Entre em contato:</span></h1>
<form>
<input name="name" type="text" /> Seu Nome <br/>
<input name="email" type="email" /> Seu e-mail<br/>
<textarea name="message"> Digite sua Mensagem! </textarea><br/>
<input type="submit" value="Enviar" class="submit" />
</form>
<p>Podemos apresentar vídeos utilizando a tage iframe</p>
<div class="section">
<h1><span> Meu vídeo da aula de resistência de materiais </span></h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Jwucxzx2ahI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<hr/>
<p>Até agora vimos HTML em sua forma mais simples...Da linha em diante vamos para o HTML5...</p>
<hr/>
<p>Trabalhando com dados, podemos usar os métodos sessionStorage e localStorage para guardar dados localmente</p>
localStorage.setItem("key1", "value1");
alert(localStorage.getItem("key1"));
localStorage.removeItem("key1");
localStorage.clear();
</body>
<nav>
<p>Essa é uma seção de navegação tipo "nav" para organizar uma lista de links</p>
<ul>
<li><a href="https://www.bortoluzzi.services">Bortoluzzi Services</a></li>
<li><a href="https://www.rlbpc.me">Minha página pessoal</a></li>
<li><a href="#">Voltar para o topo da página</a></li>
</ul>
</nav>
<article>
<h1>No lugar de div podemos usar article e section para separar seções da página</h1>
<section>
<h1>Esta parte funciona com um item do tipo "article" e funciona independentemente do resto da página</h1>
<p>Pode ser usado como um post, um windget ou como um blog com várias postagens na forma de outros elemetos "article" aninhados</p>
</section>
<aside>
<p> esta é uma parte criada com o comando "aside" cria partes secundárias relacionadas com o conteúdo principal </p>
</aside>
</article>
<hr/>
<p>Colocando um player de audio na página usando "audio controls"</p>
<audio controls> <!--Essa é a forma de colocar um player de audio direto na página com um som bacana já ligado ao audio, podem ser usados os atributos autoplay e loop e os arquivos suportados são mp3, ogg e wav-->
<p>Colocando um player de audio na página usando "audio controls"</p>
<source src="http://www.sololearn.com/uploads/audio.mp3" type="audio/mpeg">
<source src="http://www.sololearn.com/uploads/audio.ogg" type="audio/ogg">
</audio>
<hr/>
<p>Colocando um player de vídeo na página usando "video controls" são suportados MP4, WebM, and OGG."</p>
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Video is not supported by your browser
</video>
<hr/>
<p>Outro elemento muito utilizado é o "progress" bar que tem os atributos min, max e value</p>
Status: <progress min="0" max="100" value="35">
</progress>
<hr/>
<p>Também podemos configurar conteúdo com base na localização do usuário utilizando a geolocalização</p>
navigator.geolocation.getCurrentPosition();
<!--Parameters: showLocation (mandatory): Defines the callback method that retrieves location information.
ErrorHandler(optional): Defines the callback method that is invoked when an error occurs in processing the asynchronous call.
Options (optional): Defines a set of options for retrieving the location information.
The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned.-->
<p>Drag and Drop é outra característica introduzida pelo HTML 5, no código fonte desta página há exemplo de como utilizar.</p>
<!--Making Elements Draggable: The drag and drop feature lets you "grab" an object and drag it to a different location.
To make an element draggable, just set the draggable attribute to true:
<img draggable="true" />
Any HTML element can be draggable.
The API for HTML5 drag and drop is event-based.
Example:
<!DOCTYPE HTML>
<html>
<head>
<script>
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="box" ondrop="drop(event)"
ondragover="allowDrop(event)"
style="border:1px solid black;
width:200px; height:200px"></div>
<img id="image" src="sample.jpg" draggable="true"
ondragstart="drag(event)" width="150" height="50" alt="" />
</body>
</html>
What to Drag
When the element is dragged, the ondragstart attribute calls a function, drag(event), which specifies what data is to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In our example, the data type is "text" and the value is the ID of the draggable element ("image").
Where to Drop
The ondragover event specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event.
Do the Drop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
The preventDefault() method prevents the browser's default handling of the data (default is open as link on drop).
The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.
The dragged data is the ID of the dragged element ("image").
At the end, the dragged element is appended into the drop element, using the appendChild() function.-->
<hr/>
<p>Para desenhar formas como cículos podemos usar uma tag svg, como abaixo:</p>
<svg width="200" height="200">
<circle cx="80" cy="80" r="50" fill="green" />
</svg> <!--
- cx pushes the center of the circle further to the right of the screen
- cy pushes the center of the circle further down from the top of the screen
- r defines the radius
- fill determines the color of our circle
- stroke adds an outline to the circle-->
<hr/>
<p>Para desenhar formas como quadrados e retângulos também usamos uma tag svg, como abaixo:</p>
<svg width="200" height="200">
<rect width="150" height="100" ="20" y="20" fill="green" />
</svg>
<hr/>
<p>Linhas:</p>
<svg width="200" height="200">
<line x1="10" y1="10" x2="200" y2="100" style="stroke:#000000; stroke-linecap:round; stroke-width:20" />
</svg>
<hr/>
<p>Poli-linhas:</p>
<svg width="200" height="200">
<polyline style="stroke-linejoin:miter; stroke:black;
stroke-width:12; fill: none;"
points="100 100, 150 150, 200 100" />
</svg>
<hr/>
<p>Elípses:</p>
<svg height="200" width="500">
<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green" />
</svg>
<hr/>
<p>Polígonos:</p>
<svg width="500" height="200">
<polygon points="100 100, 200 200, 300 0"
style="fill: green; stroke:black;" />
</svg>
<hr/>
<p>Todas as formas SGV podem ser animadas como aparece com o quadrado abaixo:</p>
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>
<!--
attributeName: Specifies which attribute will be affected by the animation
from: Specifies the starting value of the attribute
to: Specifies the ending value of the attribute
dur: Specifies how long the animation runs (duration)
fill: Specifies whether or not the attribute's value should return to its initial value when the animation is finished (Values: "remove" resets the value; "freeze" keeps the “to value”)
repeatCount: Specifies the repeat count of the animation
In the example above, the rectangle changes its x attribute from 0 to 300 in 3 seconds.
To repeat the animation indefinitely, use the value "indefinite" for the repeatCount attribute.
The <path> element is used to define a path.
The following commands are available for path data:
M: moveto
L: lineto
H: horizontal lineto
V: vertical lineto
C: curveto
S: smooth curveto
Q: quadratic Bézier curve
T: smooth quadratic Bézier curveto
A: elliptical Arc
Z: closepath
Define a path using the d attribute:-->
<svg width="500" height="500">
<path d="M 0 0 L200 200 L200 0 Z" style="stroke:#000; fill:none;" />
</svg>
<!--O uso do gráficos mais aprimorados pode ser feito com o canvas, segue um exemplo: (Para desenhar nesse método é utilizada linguagem JavaScript!)
Desenhando uma linha:
moveTo(x,y): Defines the starting point of the line.
lineTo(x,y): Defines the ending point of the line.
Draw a Circle
beginPath(): Starts the drawing.
arc(x,y,r,start,stop): Sets the parameters of the circle.
stroke(): Ends the drawing.
Gradients
createLinearGradient(x,y,x1,y1): Creates a linear gradient.
createRadialGradient(x,y,r,x1,y1,r1): Creates a radial/circular gradient.
Drawing Text on the Canvas
Font: Defines the font properties for the text.
fillText(text,x,y): Draws "filled" text on the canvas.
strokeText(text,x,y): Draws text on the canvas (no fill).
-->
<canvas id="canvas1" width="400" height="300"></canvas>
<script>
var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
ctx.fillStyle="rgba(0,200,0,1)";
ctx.fillRect(20,20,100,100);
</script>
<p> O canvas é um método para utilizar gráficos mais elaborados em páginas web usando html 5. O último desenho foi feito em javaScript dentro de Canvas</p>
<p> Exemplos de manipulação em Canvas</p>
<canvas id="canvas2" width="500" height="500"></canvas>
<script>
var can = document.getElementById("canvas2");
var ctx = can.getContext("2d");
ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);
ctx.translate(100, 150);
ctx.fillText("after translate", 10, 30);
ctx.fillStyle = "#FF0000";
ctx.fillRect(100,10, 15, 15);
ctx.rotate( (Math.PI / 180) * 25); //rotate 25 degrees.
ctx.fillStyle = "#0000FF";
ctx.fillRect(10,10, 10, 10);
ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);
ctx.translate(100, 150);
ctx.fillText("after translate", 0, 0);
ctx.rotate(1);
ctx.fillText("after rotate", 0, 0);
ctx.scale(1.5, 4);
ctx.fillText("after scale", 0,20);
</script>
<footer><hr/><p> Autor: Rodolfo Bortoluzzi</p></footer> <!--Notas de rodapé, vai na parte mais inferior da página com dados de contato, autor, e outros dados importantes-->
</html>
<html>
<head>
<title>Tags mais usadas da html 5 - Rodolfo Bortoluzzi</title>
</head>
<body>
<p> A intenção deste arquivo é o aprendizado da linguagem HTML 5 </p>
<!--comentários-->
<hr/> <!-- linha horizontal-->
<h1> <span> Aprendendo HTML 5! - Todos os comandos mais utilizados </span> </h1> <!-- O Elemento span é um container genérico em linha (inline), ao contrário do seu parente mais próximo, o elemento div , que é um elemento de bloco (block).-->
<p> Oi sou o <strong>Rodolfo</strong>. Programando em <em>HTML 5</em>.</p> <!-- strong: negrito e em:itálico-->
<p class = "quote"> "Declare variáveis e não guerra" </p> <!-- declaração de variável -->
<p> formatação <br /> This is regular text </p> <!-- br / é uma quebra de linha simples-->
<p><b> bold text </b></p>
<p><big> big text </big></p>
<p><i> italic text </i></p>
<p><small> small text </small></p>
<p><strong> strong text </strong></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><ins> inserted text </ins></p>
<p><del> deleted text </del></p>
<p align ="center"> Alinhando no centro </p>
<p align ="left"> voltando para a esquerda </p>
<hr width="50px" /><br/> <!-- linha de 50 pixels-->
<hr width="50%" /><br/> <!-- linha de 50% da largura -->
<hr width="10%" align="right"/> A próxima é uma imagem bacana <!--mas esta continua sendo um texto--> <br/> <!--linha de 10% da largura alinhada a direita-->
<img src="f:/família/teste html.jpg" alt="se a imagem não apareceu, é mostrado este texto alternativo"/>
<p>e essa é uma forma de redimensionar a imagem utilizando escala de pixels. Nessa usei altura de 150 pixels e largura de 150 pixels.</p>
<img src="f:/família/teste html.jpg" height="150px" width="150px" alt="a imagem não foi encontrada" />
<p>e essa é uma forma de redimensionar a imagem utilizando porcentagens. Nesta vou usar 10% da altura original e 10% da largura original</p>
<img src="f:/família/teste html.jpg" height="10%" width="10%" alt="a imagem não foi encontrada" />
<p>e se eu quiser colocar uma moldura na imagem posso usar assim...</p>
<img src="f:/família/teste html.jpg" height="150px" width="150px" border="6px" alt="a imagem não foi encontrada" />
<p>Mudando de assunto. Para inserir um link na página podes fazer assim: </p>
<a href="https://www.bortoluzzi.services"> Essa é a minha página! </a> <br/><!--dá para linkar também em imagens e textos, basta usar comandos aninhados-->
<a href="https://www.bortoluzzi.services" target="_blank"> Essa é a minha página em nova guia </a> <!-- target ="_blank" faz com que a página do link seja aberta em uma nova guia-->
<p>Agora vamos ver como funcionam as listas. Primeiro a lista ordenada: </p> <br/>
<ol>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
</ol>
<p>Abaixo a lista não ordenada:</p> <br/>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
<p>Vamos ver como fazer tabelas!</p> <br/>
<table>
<tr>
<td> coluna 1 </td>
<td> coluna 2 </td>
<td> coluna 3 </td>
</tr>
</table>
<p>As vezes precisamos formatar as tabelas:</p><br/>
<table border="2"> <!-- adiciona bordas a tabela -->
<tr>
<th>título da coluna 1</th>
<th>título da coluna 2</th>
<th>título da coluna 3</th>
</tr>
<tr> <!-- adiciona a primeira linha-->
<td>Red</td> <!--adiciona a primeira coluna-->
<td>Blue</td> <!-- adiciona a segunda coluna-->
<td>Green</td> <!-- adiciona a terceira coluna-->
</tr> <!-- termina a primeira linha-->
<tr> <!-- adiciona a segunda linha-->
<td><br /></td> <!--coloca uma quebra de linha na primeira coluna e segunda linha-->
<td colspan="2" align="center">centro</td><!--une a segunda e terceira coluna na segunda linha usar colspan para colunas e rowspan para linhas e centra o conteúdo das células-->
</tr> <!-- termina a segunda linha-->
<tr> <td colspan="3" style="color:blue;" bgcolor ="grey" align="center"> azul </td> <!-- style para mudar a cor da fonte e bgcolor para mudar a cor do fundo-->
</tr>
</table>
<!--Em HTML, a maioria dos elementos é definida como um bloco de elementos ou em linha de elementos
Elementos de bloco começam com novas linhas. Por exemplo: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, etc.
Elementos de linha são apresentados sem quebra de linha. Por exemplo: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.
O elemento <div> é um elemento de bloco que geralmente é utilizado como um compartimento para outro elemento HTML.
Quando usado em conjunto com alguns estilos CSS, o elemento <div> pode ser usado como um elemento de estilo do conteúdo de um bloco:-->
<h1>Vamos fazer uma barra verde de título usando o elemento div! </h1>
<div style="background-color:green; color:white; padding:20px;">
<p> Este texto será exibido em branco.</p>
<p> O fundo deve estar verde...eu acho.</p>
</div>
<!--Similarmente, o elemento <span> é usado em linha geralmente utilizado como um compartimento para algum texto.
Quando utilizado em conjunto com CSS, o elemento <span> para estilizar partes de um texto: -->
<h2>Usando o elemento <span style="color:red">span</span> destacamos partes importantes do texto</h2>
<!--Outros elementos podem ser usados como elementos no nível do bloco ou elementos embutidos. Isso inclui os seguintes elementos:
APPLET - applet Java incorporado
IFRAME - quadro embutido
INS - texto inserido
MAP - mapa de imagem
OBJECT - objeto incorporado
SCRIPT - script dentro de um documento HTML
Você pode inserir elementos embutidos dentro dos elementos do bloco.
Por exemplo, você pode ter vários elementos <span> dentro de um elemento <div>.
Os elementos embutidos não podem conter nenhum elemento no nível do bloco.-->
<!--Vamos agora criar formulários para poder trocar informações com o usuário para isso devemos que,
podem ser criados usando o elemento <form>, com suas tags de abertura e fechamento.
Devemos usar o atributo action para endereçar a uma página de internet ou servidor que irá ser carregada pelos dados após a submissão pelo usuário.
<form action="http://www.rlbpc.me">Formulário 1</form>
The method attribute specifies the HTTP method (GET or POST) to be used when forms are submitted (see below for description):
<form action="url" method="GET">
<form action="url" method="POST">
When you use GET, the form data will be visible in the page address.
Use POST if the form is updating data, or includes sensitive information (passwords).
POST offers better security because the submitted data is not visible in the page address.
To take in user input, you need the corresponding form elements, such as text fields.
The <input> element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc.
The example below shows a form requesting a username and password:-->
<p>As vezes precisamos pedir dados aos usuários. Para isso usamos o elemento form. Abaixo um formulário para login:</p> <br/>
<form>
<input type="text" name="username" /> Usuário<br/>
<input type="password" name="password" /> Senha <br/>
</form>
<p>Se necessitamos de uma escolha única usamos o elemento "radio". Por exemplo para verificar se algo é verdadeiro ou falso:</p>
<form>
<input type="radio" name="verdadeiroOuFalso" value="Verdadeiro" /> Verdadeiro <br />
<input type="radio" name="verdadeiroOuFalso" value="Falso" /> Falso <br />
</form>
<p>Se necessitamos de uma escolha multipla usamos o elemento "CheckBox". Por exemplo para selecionar acessórios de um carro...:</p>
<form>
<input type="checkbox" name="acessorio" value="rádio" /> Rádio <br />
<input type="checkbox" name="acessorio" value="computador de bordo" /> Computador de bordo <br />
<input type="checkbox" name="acessorio" value="aros de liga leve" /> Aros de liga leve <br />
<input type="checkbox" name="acessorio" value="bancos de couro" /> Bancos de couro <br />
</form>
<p>Para receber os dados informados por usuários devemos ter um botão para que ele confirme que tudo está pronto para ser enviado a página ou servidor.</p>
<p>Isso é feito utilizando a tag "input" (declara-se o tipo: Neste caso "submit" e o valor "Enviar": </p>
<input type="submit" value="Enviar"/> <!--After the form is submitted, the data should be processed on the server using a programming language, such as PHP.-->
<p>Um formulário de contato pode ser criado com essas mesmas tags:</p>
<h1><span>Entre em contato:</span></h1>
<form>
<input name="name" type="text" /> Seu Nome <br/>
<input name="email" type="email" /> Seu e-mail<br/>
<textarea name="message"> Digite sua Mensagem! </textarea><br/>
<input type="submit" value="Enviar" class="submit" />
</form>
<p>Podemos apresentar vídeos utilizando a tage iframe</p>
<div class="section">
<h1><span> Meu vídeo da aula de resistência de materiais </span></h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Jwucxzx2ahI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<hr/>
<p>Até agora vimos HTML em sua forma mais simples...Da linha em diante vamos para o HTML5...</p>
<hr/>
<p>Trabalhando com dados, podemos usar os métodos sessionStorage e localStorage para guardar dados localmente</p>
localStorage.setItem("key1", "value1");
alert(localStorage.getItem("key1"));
localStorage.removeItem("key1");
localStorage.clear();
</body>
<nav>
<p>Essa é uma seção de navegação tipo "nav" para organizar uma lista de links</p>
<ul>
<li><a href="https://www.bortoluzzi.services">Bortoluzzi Services</a></li>
<li><a href="https://www.rlbpc.me">Minha página pessoal</a></li>
<li><a href="#">Voltar para o topo da página</a></li>
</ul>
</nav>
<article>
<h1>No lugar de div podemos usar article e section para separar seções da página</h1>
<section>
<h1>Esta parte funciona com um item do tipo "article" e funciona independentemente do resto da página</h1>
<p>Pode ser usado como um post, um windget ou como um blog com várias postagens na forma de outros elemetos "article" aninhados</p>
</section>
<aside>
<p> esta é uma parte criada com o comando "aside" cria partes secundárias relacionadas com o conteúdo principal </p>
</aside>
</article>
<hr/>
<p>Colocando um player de audio na página usando "audio controls"</p>
<audio controls> <!--Essa é a forma de colocar um player de audio direto na página com um som bacana já ligado ao audio, podem ser usados os atributos autoplay e loop e os arquivos suportados são mp3, ogg e wav-->
<p>Colocando um player de audio na página usando "audio controls"</p>
<source src="http://www.sololearn.com/uploads/audio.mp3" type="audio/mpeg">
<source src="http://www.sololearn.com/uploads/audio.ogg" type="audio/ogg">
</audio>
<hr/>
<p>Colocando um player de vídeo na página usando "video controls" são suportados MP4, WebM, and OGG."</p>
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Video is not supported by your browser
</video>
<hr/>
<p>Outro elemento muito utilizado é o "progress" bar que tem os atributos min, max e value</p>
Status: <progress min="0" max="100" value="35">
</progress>
<hr/>
<p>Também podemos configurar conteúdo com base na localização do usuário utilizando a geolocalização</p>
navigator.geolocation.getCurrentPosition();
<!--Parameters: showLocation (mandatory): Defines the callback method that retrieves location information.
ErrorHandler(optional): Defines the callback method that is invoked when an error occurs in processing the asynchronous call.
Options (optional): Defines a set of options for retrieving the location information.
The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned.-->
<p>Drag and Drop é outra característica introduzida pelo HTML 5, no código fonte desta página há exemplo de como utilizar.</p>
<!--Making Elements Draggable: The drag and drop feature lets you "grab" an object and drag it to a different location.
To make an element draggable, just set the draggable attribute to true:
<img draggable="true" />
Any HTML element can be draggable.
The API for HTML5 drag and drop is event-based.
Example:
<!DOCTYPE HTML>
<html>
<head>
<script>
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="box" ondrop="drop(event)"
ondragover="allowDrop(event)"
style="border:1px solid black;
width:200px; height:200px"></div>
<img id="image" src="sample.jpg" draggable="true"
ondragstart="drag(event)" width="150" height="50" alt="" />
</body>
</html>
What to Drag
When the element is dragged, the ondragstart attribute calls a function, drag(event), which specifies what data is to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In our example, the data type is "text" and the value is the ID of the draggable element ("image").
Where to Drop
The ondragover event specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event.
Do the Drop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
The preventDefault() method prevents the browser's default handling of the data (default is open as link on drop).
The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.
The dragged data is the ID of the dragged element ("image").
At the end, the dragged element is appended into the drop element, using the appendChild() function.-->
<hr/>
<p>Para desenhar formas como cículos podemos usar uma tag svg, como abaixo:</p>
<svg width="200" height="200">
<circle cx="80" cy="80" r="50" fill="green" />
</svg> <!--
- cx pushes the center of the circle further to the right of the screen
- cy pushes the center of the circle further down from the top of the screen
- r defines the radius
- fill determines the color of our circle
- stroke adds an outline to the circle-->
<hr/>
<p>Para desenhar formas como quadrados e retângulos também usamos uma tag svg, como abaixo:</p>
<svg width="200" height="200">
<rect width="150" height="100" ="20" y="20" fill="green" />
</svg>
<hr/>
<p>Linhas:</p>
<svg width="200" height="200">
<line x1="10" y1="10" x2="200" y2="100" style="stroke:#000000; stroke-linecap:round; stroke-width:20" />
</svg>
<hr/>
<p>Poli-linhas:</p>
<svg width="200" height="200">
<polyline style="stroke-linejoin:miter; stroke:black;
stroke-width:12; fill: none;"
points="100 100, 150 150, 200 100" />
</svg>
<hr/>
<p>Elípses:</p>
<svg height="200" width="500">
<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green" />
</svg>
<hr/>
<p>Polígonos:</p>
<svg width="500" height="200">
<polygon points="100 100, 200 200, 300 0"
style="fill: green; stroke:black;" />
</svg>
<hr/>
<p>Todas as formas SGV podem ser animadas como aparece com o quadrado abaixo:</p>
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>
<!--
attributeName: Specifies which attribute will be affected by the animation
from: Specifies the starting value of the attribute
to: Specifies the ending value of the attribute
dur: Specifies how long the animation runs (duration)
fill: Specifies whether or not the attribute's value should return to its initial value when the animation is finished (Values: "remove" resets the value; "freeze" keeps the “to value”)
repeatCount: Specifies the repeat count of the animation
In the example above, the rectangle changes its x attribute from 0 to 300 in 3 seconds.
To repeat the animation indefinitely, use the value "indefinite" for the repeatCount attribute.
The <path> element is used to define a path.
The following commands are available for path data:
M: moveto
L: lineto
H: horizontal lineto
V: vertical lineto
C: curveto
S: smooth curveto
Q: quadratic Bézier curve
T: smooth quadratic Bézier curveto
A: elliptical Arc
Z: closepath
Define a path using the d attribute:-->
<svg width="500" height="500">
<path d="M 0 0 L200 200 L200 0 Z" style="stroke:#000; fill:none;" />
</svg>
<!--O uso do gráficos mais aprimorados pode ser feito com o canvas, segue um exemplo: (Para desenhar nesse método é utilizada linguagem JavaScript!)
Desenhando uma linha:
moveTo(x,y): Defines the starting point of the line.
lineTo(x,y): Defines the ending point of the line.
Draw a Circle
beginPath(): Starts the drawing.
arc(x,y,r,start,stop): Sets the parameters of the circle.
stroke(): Ends the drawing.
Gradients
createLinearGradient(x,y,x1,y1): Creates a linear gradient.
createRadialGradient(x,y,r,x1,y1,r1): Creates a radial/circular gradient.
Drawing Text on the Canvas
Font: Defines the font properties for the text.
fillText(text,x,y): Draws "filled" text on the canvas.
strokeText(text,x,y): Draws text on the canvas (no fill).
-->
<canvas id="canvas1" width="400" height="300"></canvas>
<script>
var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
ctx.fillStyle="rgba(0,200,0,1)";
ctx.fillRect(20,20,100,100);
</script>
<p> O canvas é um método para utilizar gráficos mais elaborados em páginas web usando html 5. O último desenho foi feito em javaScript dentro de Canvas</p>
<p> Exemplos de manipulação em Canvas</p>
<canvas id="canvas2" width="500" height="500"></canvas>
<script>
var can = document.getElementById("canvas2");
var ctx = can.getContext("2d");
ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);
ctx.translate(100, 150);
ctx.fillText("after translate", 10, 30);
ctx.fillStyle = "#FF0000";
ctx.fillRect(100,10, 15, 15);
ctx.rotate( (Math.PI / 180) * 25); //rotate 25 degrees.
ctx.fillStyle = "#0000FF";
ctx.fillRect(10,10, 10, 10);
ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);
ctx.translate(100, 150);
ctx.fillText("after translate", 0, 0);
ctx.rotate(1);
ctx.fillText("after rotate", 0, 0);
ctx.scale(1.5, 4);
ctx.fillText("after scale", 0,20);
</script>
<footer><hr/><p> Autor: Rodolfo Bortoluzzi</p></footer> <!--Notas de rodapé, vai na parte mais inferior da página com dados de contato, autor, e outros dados importantes-->
</html>
Comentários
Postar um comentário
Seu comentário é sempre bem vindo. Em alguns casos analisaremos o conteúdo antes da publicação.