M3 - Criação de Páginas Web
1. Construção de páginas Web
A internet, quando acedida através de um browser, permite-nos interagir com conteúdos multimédia tais como vídeos, músicas, imagens, animações e muitos outros. A forma como são construídas as páginas Web é na sua essência muito simples. A Internet usa uma linguagem denominada de HTML (Hipertext Markup Language) que se limita a formatar o conteúdo de uma página Web, sendo responsável pelo posicionamento de texto, imagem, vídeo, animações e ainda por estabelecer hiperligações.
Os ficheiros HTML podem apresentar dois tipos de extensões: html ou htm
Hoje em dia, podemos usar a extensão html sem problemas, uma vez que são apenas os sistemas operativos MS-Dos e as versões do Windows a 16 bits as únicas que não suportam extensões com mais de três caracteres.
De seguida encontra-se a estrutura básica de uma página Web.
<html>
<head>
<title>
Título aqui
</title>
</head>
<body>
Olá Mundo!!!
</body>
</html>
AULA 1 - EXERCÍCIO 1
Copie para o Bloco de Notas o código anterior e grave a página como AULA1_1.html
Abra-a com o seu browser e verifique o resultado.
O nome atribuído às palavras entre os sinais de menor e maior < >, denominam-se de tags ou etiquetas <nome da tag>. A zona de aplicação de uma tag situa-se entre a tag de abertura <nome da tag> e a tag de fecho </nome da tag>. Como é visível, qualquer tag de fecho é sempre igual à de abertura precedida de /
1.1 Etiquetas mais comuns em HTML
Como vimos, a estrutura básica de uma página Web pode ser representada apenas por quatro etiquetas (tags). Vejamos para que servem:
<html> indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;
<head> tag de cabeçalho. Habitualmente, onde se encontra o título da página que irá ser mostrado na barra de título do web browser. Existem outras tags para além do <title> que podem ser colocadas dentro do cabeçalho, como iremos ver mais à frente;
<title> título da página;
<body> zona onde deve ser colocada toda a informação a ser apresentada na página Web.
Esta são as etiquetas base de um documento html. No entanto, existem muitas mais, que serão apresentadas gradualmente ao longo do módulo.
Todas elas, não são case sensitive, isto é não são sensíveis a caracteres maiúsculos ou minúsculos: (ex: <body> igual a <BODY> igual a <Body>)
RECONHECIMENTO DE CARACTERES ESPECIAIS PORTUGUESES
Para que o HTML reconheça os caracteres especiais portugueses é necessário colocar na <head> o seguinte código:
<meta charset="utf-8"/>
1.2 Propriedades e formatação de páginas Web
A parte mais importante de um site é o seu conteúdo, isto é, a informação textual. Esta informação, à semelhança do que acontece quando escrevemos um texto, necessita de ser formatada. Neste ponto introduzem-se as tags responsáveis pela formatação de texto.
Formatação básica de texto
Seguem-se as tags responsáveis pela formatação básica de texto:
<b> negrito </b>
<i> itálico </i>
<u> sublinhado </u>
<s> rasurado </s>
<sub> índice ex: H2O (o número 2 é o índice) </sub>
<sup> expoente ex: 2n (n é o expoente) </sup>
<big> aumenta um valor ao tipo de letra standard </big>
<small> diminui um valor ao tipo de letra standard </small>
<br> passagem de linha (simula a tecla Enter)
Todas as tags anteriores, com excepção da tag <br> necessitam ser fechadas ou serão aplicadas desde que são abertas até aos final do código HTML.
AULA 1 - EXERCÍCIO 2
Crie no "bloco de notas" o código que para o resultado abaixo. Grave com o nome AULA1_2.html
De seguida abra-o no seu browser para verificar o resultado.
Títulos
Os títulos são as referências do nosso texto. Quando escrevemos um texto os títulos dividem os assuntos tratados ao longo da redacção. Uma página Web funciona da mesma forma. As tags responsáveis pela inserção de títulos são as <h1> até <h6>. Quanto menor a ordem do número, maior o tamanho do título, como se pode verificar no exemplo seguinte:
Exemplo:
(...)
<body>
<h1> Títulos H1 </h1>
<h2> Títulos H2 </h2>
<h3> Títulos H3 </h3>
<h4> Títulos H4 </h4>
<h5> Títulos H5 </h5>
<h6> Títulos H6 </h6>
</body>
(...)
Parágrafos
Os parágrafos são representados pela tag <p>. Não necessitam obrigatoriamente da tag de fecho. Contudo, quando esta tag contém atributos deve ser fechada </p>. A tag apresenta como atributo mais importante o align.
Exemplo:
(...)
<body>
<p align="left"> Parágrafo alinhado à esquerda!</p>
<p align="center"> Parágrafo alinhado ao centro!</p>
<p align="right"> Parágrafo alinhado à direita!</p>
<p style="text-align:justify"> Parágrafo justificado!</p>
<p> </p> <!-- parágrafo em branco -->
<p> </p>
<p> </p>
Frase após 3 parágrafos em branco
</body>
(...)
Resultado:
AULA 2 - EXERCÍCIO 1
Crie no "bloco de notas" o código que para o resultado abaixo. Grave com o nome AULA2_1.html
De seguida abra-o no seu browser para verificar o resultado.
Aula 3
Cor de fundo
Mudar a cor de fundo de uma página Web é uma das primeiras mudanças que qualquer um gosta de realizar. Para o fazermos usamos o atributo style com o parâmetro background-color: na tag <body>, embora este possa ser utilizado em outras tags que não esta, como veremos mais à frente. Os atributos são formas de personalizarmos o conteúdo das nossas tags. Neste caso permite-nos mudar a cor de fundo da nossa página.
O parâmetro background-color: aceita valores como, palavras entre aspas (blue, red, yellow, green, chocolate, etc) ou valores hexadecimais #461B7E (neste caso seria cor púrpura). Estes valores correspondem ao RGB, isto é, cada grupo de dois dígitos indica o valor para Red, Green e Blue. Assim, no exemplo anterior, R=46, G=1B e B=7E.
Podem aceder ao URL http://www.computerhope.com/htmcolor.htm para obterem mais cores.
Exemplo:
(...)
<body style="background-color:chocolate">
<!-- seria o mesmo que se introduzíssemos
<body style="background-color:#C85A17"> -->
</body>
(...)
Espaço em branco
Por mais espaços em branco que se dê entre duas palavras o resultado visível num browser é de apenas um. Para poder dar mais do que esse espaço é necessário introduzir a seguinte sequência de caracteres:
Apesar de não se tratar de uma tag, nem sequer de um atributo, pode ser usado no código HTML, sem este o confundir com caracteres de uma frase.
Texto pré-formatado
Numa página HTML, independentemente da forma como escrevemos os nossos textos, espaços a mais ou mudanças de linhas não são visualizados (como já se referiu) a não ser que se apliquem as tags ou códigos para esse efeito. Contudo, existe uma tag que nos permite que a formatação do texto apareça no browser tal e qual como está no código HTML.
Para isso, envolvemos o texto que pretendemos na tag <pre>
Exemplo:
(...)
<body>
<pre> Quando pretendo que apareça no browser
exactamente o que escrevo em código
como por exemplo, saltar linhas ou inserir espaços u s o a t a g pre
</pre>
</body>
(...)
Resultado:
Formatação avançada de texto
A formatação avançada de texto é possível através do atributo style.
Através deste podemos alterar o tipo de letra, o seu tamanho ou mesmo a cor de um conjunto de caracteres, etc.
A atributo pode ser usado em diversas tag's nomeadamente <p>, <h1>, ...,<h6>, etc e aceita os seguintes parâmetros:
font-family: mudar o tipo de letra
color: mudar a cor da letra
font-size: mudar o tamanho da letra
text-align: muda os alinhamentos do texto
Exemplo
(...)
<body>
<p style="font-family:Comic Sans MS;color:green;font-size:15pt">Alteração das propiedades da letra!</p>
</body>
(...)
Resultado:
Linhas horizontais
A tag responsável por criar linhas horizontais é a <hr>. Servem principalmente para dividir os conteúdos de uma página.
Aceita os atributos width, height, size, color e align.
Exemplo:
(...)
<body>
<hr width="5%" color="blue" size="6" align="right">
<hr width="10%" color="red" size="3" align="right">
<hr width="15%" color="blue" size="6" align="right">
<hr width="20%" color="red" size="3" align="right">
<hr color="blue" size="6">
</body>
AULA 3 - EXERCÍCIO 1 formatação de texto
Escreva uma página html, com o seguinte texto:
1º parágrafo: "SISTEMAS DE INFORMAÇÃO" formatando o texto com as seguintes características:
- cor azul,
- tamanho 20
- tipo de letra Verdana.
2º parágrafo: "Módulo 3 - Criação de Páginas Web" formatando o texto com as seguintes características:
- cor vermelho,
- tamanho 14
- tipo de letra Arial.
Centre também todo o texto na página.
Grave a página como AULA3_1.html e abra-a no seu browser para verificar o resultado.
AULA 3 - EXERCÍCIO 2
Escreva uma página html, da forma mais parecida possivel à imagem, sabendo que a letra usada nos textos foi:,
- tamanho 14
- tipo de letra Arial.
Signos:
- usar cores da paleta de cores
- tamanho 12
- tipo de letra Comic Sans MS.
Grave a página como AULA3_2.html e abra-a no seu browser para verificar o resultado
Citações e avanços
A tag responsável para citações é a <q>. Serve para dar enfâse ao texto.
Exemplo:
(...)
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
A tag <blockquote> define uma seção citada de outra fonte, também serve para dar um avanço à esquerda (similar à tecla TAB )
Exemplo:
(...)
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.
</blockquote>
</body>
Container's
Em linha (<SPAN>)
O elemento <span> serve para formatar de forma diferenciada uma seção de texto num mesmo parágrafo ou área.
Exemplo:
(...)
<body>
<p>A minha mãe tem olhos<span style="color:blue;font-weight:bold">azuis</span> e o meu pai tem <span style="color:darkolivegreen;font-weight:bold">verde escuro</span>.</p>
</body>
Integração de imagens
As imagens são dos componentes mais importantes de uma página web. Quando se inserem imagens num web site, devemos preocupar-nos com quem a vai visitar. A espera prolongada para que um site carregue, pode fazer desistir quem os visita. As imagens são as maiores responsáveis por esses atrasos. Deve-se por isso, inserir imagens que ocupem o mínimo de espaço possível em disco, para serem carregadas rapidamente.
Para inserir uma imagem em HTML, usa-se a tag <img src="caminho para a imagem">
Para além do atributo obrigatório src existem outros opcionais:
align - alinhar a imagem no ecrã
border - alterar a espessura da borda à volta da imagem
width - alterar largura da imagem
height - alterar a altura da imagem
Exemplo
<html>
<body>
<img src="http://codeweekeu.s3.amazonaws.com/event_picture/Logo_AEE-ON_Azul_Final.jpg" align="right" border="8" width="150" height="150">
<img src="escola.jpg">
</body>
</html>
Imagem de Fundo
As imagens de fundo distinguem-se das anteriores porque não necessitam de uma tag específica para serem introduzidas. Como a imagem irá ocupar toda a página usa-se o atributo style com a propriedade na background-image: url(' ') tag <body>. Este atributo aceita vários tipos de imagens: gif, bmp, jpg, png, etc.
Exemplo
<html>
<body style="background-image: url('img_girl.jpg');">
<h2>Background Image</h2>
</body>
</html>
Listas
Para ordenarmos um conjunto de itens necessitamos de utilizar listas:
-
lista ordenada (ordered list) usamos a tag <ol>.
-
lista não ordenada (unordered list) usamos a tag <ul>.
Ambas necessitam da tag respectiva de fecho.
Dentro de qualquer uma das tags, os itens a ser ordenados devem ser precedidos da sub-tag <li>. Estas não necessitam obrigatoriamente de ser fechadas.
A tag <ol> aceita:
type: - tipo de numeração ( 1 | a | A | i )
line-height: Espaçamento entrelinhas medido em %
start - valor a começar a numeração (sempre um valor numérico)
A tag <ul> aceita:
list-style-type: pode tomar valores circle, square, disc
line-height: Espaçamento entrelinhas medido em %
Exemplo
<html>
<body>
<p>Lista ordenada
<ol type="a" start="3">
<li>HTML
<li>CSS
<li>JavaScript
</ol>
<p>Lista não ordenada
<ul style="list-style-type:square">
<li>HTML
<li>CSS
<li>JavaScript
</ul>
</body>
</html>
Resultado
Tabelas
As tags que vão formar a estrutura básica de uma tabela em HTML são as tags <tr> e <td>. A tag <tr> representa uma linha e a tag <td> representa uma célula. Desta forma, a criação de colunas em uma tabela HTML é feita automaticamente através da quantidade de células incluídas dentro de uma linha. Por exemplo, vejamos na imagem abaixo como essa estrutura é formada:
Exemplo:
<table border="1">
<tr>
<td>Nome</td>
<td>Idade</td>
<td>Profissão</td>
</tr>
<tr>
<td>Ted</td>
<td>22</td>
<td>Estudante</td>
</tr>
<tr>
<td>Ralf</td>
<td>26</td>
<td>Designer</td>
</tr>
</table>
Atributos tabelas
<TABLE BORDER=…>
As tabelas são apresentadas por defeito sem bordas. A presença do atributo BORDER indica a espessura da borda que deve ser desenhada em torno de cada célula da tabela.
BORDER=… - Especificação da espessura da borda em pixels.
Um exemplo:
<TABLE BORDER=4 >
<TABLE WIDTH=…>
Especifica a largura da tabela, que pode ser definida em pixels ou como sendo uma percentagem da largura da janela. Caso não seja especificado o atributo WIDTH, o próprio browser encarrega-se de determinar a largura mais adequada.
Um exemplo:
<TABLE BORDER=4 WIDTH=90% >
<TABLE CELLSPACING=…>
Define o espaço entre as células, ou seja, a largura das linhas de grade (as bordas que envolvem as células). Especificado em pixels.
Um exemplo:
<TABLE BORDER=10 WIDTH=75% CELLSPACING=6>
<TABLE CELLPADDING=…>
Determina, em pixels, o intervalo de espaço entre o conteúdo e as bordas da célula.
Um exemplo:
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=9
<TR ALIGN=…>
Indica se o conteúdo das células de uma linha deve estar alinhado horizontalmente à esquerda (ALIGN=left), à direita (ALIGN=right), ou centralizadas (ALIGN=center). Por defeito, o alinhamento horizontal é à esquerda das células, e centralizado para células de cabeçalho .
<TR VALIGN=…>
Indica o alinhamento vertical dentro das células de uma linha. Pode ser superior (VALIGN=top), inferior (VALIGN=bottom), ou centralizado (VALIGN=middle). Por defeito, o alinhamento vertical das células é centralizado.
<TD ALIGN=… VALIGN=…>
Dentro de uma célula estes atributos assumem os mesmos valores e possuem as mesmas funções que quando aplicados à uma linha inteira, sendo que o alinhamento definido aplica-se somente a própria célula. Caso seja definido um alinhamento para a linha e outro para a célula, este último sobrepõe-se ao primeiro.
<TD COLSPAN=…>
Especifica o número de colunas de uma tabela a serem ocupados por uma célula. Utilizado portando para expandir uma célula horizontalmente, tempor defeito o valor 1 em todas as células. Se atribuirmos COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma célula para a direita, assim esta linha deverá possuir uma célula a menos do que as outras, já que uma de suas células "vale" por duas.
<TD ROWSPAN=…>
Especifica o número de linhas a serem ocupados por uma célula. Utilizado para expandir uma célula verticalmente, também assume o valor por defeito de 1 em todas as células. A expansão ocorre para baixo, assim ao atribuir ROWSPAN =2 para uma célula, diminiu em 1 o número de células da linha de baixo.
Hiperligações
A internet não faria sentido sem o conceito de hiperligação (Hyperlink). Os hiperlinks permitem-nos navegar na Internet de página em página, figura em figura, vídeo em vídeo e muito mais. Na linguagem HTML, existem dois tipos de Hiperlinks, embora os dois utilizem a tag <a>. Esta tag tem obrigatoriamente de ser fechada e tem de usar o atributo href.
Hiperlinks externos
Para inserirmos um Hiperlink para o exterior em HTML é obrigatório que a referência http:// esteja presente.
Exemplo:
(...)
<body>
<a href="http://www.google.pt"> Site de pesquisa Google </a>
</body>
(...)
No exemplo anterior a frase "Site de pesquisa Google" será o Hiperlink. No entanto, em vez de texto, o Hiperlink poderia ser uma imagem ou vídeo, bastava para isso substituir a frase "Site de pesquisa Google" pelo código de uma imagem ou vídeo, tal como mostra no exemplo seguinte:
Exemplo (com imagem):
(...)
<body>
<a href="http://www.google.pt"> <img src="logotipo.jpg"> </a>
</body>
(...)
Hiperlinks internos
Existem dois tipos de Hiperlinks internos. Quando pretendemos aceder a uma outra página, imagem ou vídeo presente no nosso Web site, isto é, aceder a ficheiros que se encontram no nosso servidor, a forma de o fazer é similar ao exemplo de cima, apenas com uma ligeira diferença, como se pode verificar no exemplo seguinte:
Exemplo:
(...)
<body>
<a href="outra_pagina.html"> Outra página </a>
<a href="pasta2/imagem.jpg"> Imagem numa pasta diferente </a>
</body>
(...)
No exemplo anterior, encontram-se dois Hiperlinks. O primeiro para uma página que se encontra no mesmo directório que contém este código HTML.
O seguinte para uma imagem que se encontra numa pasta com o nome "pasta2". A raiz será sempre onde se encontra gravada a página que se está a desenvolver. Quando pretendemos Hiperlinks para outras páginas ou ficheiros, que não se encontrem na mesma pasta que a nossa página, é necessário preceder o nome dessa página ou ficheiro com o caminho até ele (path).
Os tipos de Hiperlinks internos são os que nos levam para diferentes partes do mesmo documento. Este tipo de Hiperlinks é muito utilizado para páginas muito extensas em que os links nos transportam directamente para a zona do documento que pretendemos.
Exemplo:
(...)
<body>
<a href="#texto"> Clicar para ir para a zona da página pretendida </a>
<!-- RESTO DO CÓDIGO AQUI -->
<a name="texto"> Colocar na zona da página que se pretende aceder </a>
</body>
(...)
Como se pode verificar no exemplo anterior é necessário criar uma referência para uma zona algures da página. Assim o atributo href da primeira tag <a> contém o nome da referência onde se encontra a informação pretendida. Esta é precedida de # que indica que esta referência aponta para uma zona na própria página e não para o exterior. Mais abaixo é necessário colocar de novo uma tag <a> com o atributo name igual ao da referência criada (neste caso texto)
Ao clicar no Hiperlink "Clicar para ir para zona da página pretendida" somos levados automaticamente para a zona da página onde diz "Colocar na zona da página à qual se pretende aceder".
Atributos:
O target atributo especifica onde abrir o documento vinculado.
Valores do target:
_self- Padrão. Abre o documento na mesma janela / guia em que foi clicado
_blank - Abre o documento em uma nova janela ou guia
_parent - Abre o documento no quadro pai
_top - Abre o documento em todo o corpo da janela
Exemplo
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Formulários
Um formulário é uma área que pode conter elementos de formulário.
Os elementos de formulário são elementos que permitem o utilizador colocar informação (como campos de texto, campos de área de texto, menus drop-down, botões radio, caixas de seleção, etc.) num formulário.
Um formulário é definido pela tag <form>.
Tags de Formulário
Entrada (Input)
A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo type (tipo). Os tipos de input mais cumumente usados são explicados abaixo.
Campos de Texto
Os campos de texto são usados quando quer que o utilizador digite letras, números, etc. em um formulário.
<form>
Primeiro nome: <input type="text" name="firstname"><br>
Último nome: <input type="text" name="lastname">
</form>
Como aparece no navegador:
Observe que o formulário propriamente não está visivel. Também observe que em muitos navegadores, o comprimento do campo de texto é de 20 caracteres por padrão (default).
Botões Radiais
Botões Radiais são usados quando se quer que o utilizador selecione uma entre uma quantidade limitada de escolhas.
<form>
<input type="radio" name="sex" value="male"> Masculino <br>
<input type="radio" name="sex" value="female"> Feminino
</form>
Como aparece no navegador:
Caixas de Seleção
As Caixas de Seleção são usadas quando quer que o utilizador selecione uma ou mais opções de uma quantidade limitada de escolhas.
<form>
<input type="checkbox" name="bike"> Eu tenho uma bicicleta <br>
<input type="checkbox" name="car"> Eu tenho um carro
</form>
Como aparece no navegador:
O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit)
Quando o utilizador clica no botão "Enviar", o conteúdo do formulário é enviado para outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida.
<form name="input" action="html_form_action.asp" method="post">
<label>Nome do Utilizador:</label> <input type="text" name="user">
<input type="submit" value="Enviar">
</form>
Como aparece no navegador:
Se digitar alguns caracteres no campo de texto acima, e clicar no botão Enviar", irá enviar a sua entrada para a página chamada "html_form_action.asp".
O elemento <select>
O <select>elemento define uma lista suspensa:
<label>Escolhe um carro:</label>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Os <option>elementos definem uma opção que pode ser atualizada.
Por padrão, o primeiro item da lista suspensa é selecionado.
Para definir uma opção pré-definida, atributo o selected atributo à opção:
<option value="fiat" selected>Fiat</option>
O elemento <textarea>
O <textarea>elemento define um campo de entrada multilinhas (uma área de texto):
<textarea name="message" rows="10" cols="30">
Deixe o seu comentário.
</textarea>
O rows atributo especifica o número visível de linhas em uma área de texto.
O cols atributo especifica a largura visível de uma área de texto.
É assim que o código HTML acima será aplicado em um navegador:
Video
Para mostrar um vídeo em HTML, use o <video>elemento:
Exemplo:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Como funciona
O controls atributo adiciona controles de vídeo, como reprodução, pausa e volume.
É uma boa ideia sempre incluir os atributos width e height. Se a altura e a largura não forem definidas, a página pode piscar enquanto o vídeo carrega.
O <source>elemento permite que especifique arquivos de vídeo alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido.
O texto entre as tags <video>e </video>só será exibido em navegadores que não suportam o <video>elemento.
Para iniciar um arquivo de video automaticamente, use o atributo autoplay.
Áudio
O <audio>elemento HTML é usado para reproduzir um arquivo de áudio
Exemplo:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Como funciona
O controls atributo adiciona controles de áudio, como reprodução, pausa e volume.
O <source>elemento permite que especifique arquivos de áudio alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido.
Para iniciar um arquivo de áudio automaticamente, use o atributo autoplay.
Reproduzindo um vídeo do YouTube em HTML
Para reproduzir o seu vídeo numa página da web, faça o seguinte:
-
Envie o vídeo para o YouTube
-
Anote o ID do vídeo
-
Defina um <iframe>elemento em sua página da web
-
Deixe o src atributo apontar para o URL do vídeo
-
Use os atributos width e height para especificar a dimensão da tela
-
Adicione quaisquer outros parâmetros ao URL (veja abaixo)
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>