Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
HTML básico_ Códigos HTML para Iniciantes
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Marcar como concluído Anotar Código fonte Artigos HTML e CSS HTML básico - códigos HTML Ao acessar uma página web através de um navegador, ele é capaz de interpretar o código HTML e renderizá-lo de forma compreensível para o usuário �nal, exibindo textos, botões etc. com as con�gurações de�nidas por meio das diversas tags que essa linguagem dispõe. Atualmente a HTML encontra-se na versão 5 e é padronizada pelo W3C (World Wide Web Consortium), uma organização internacional responsável por estabelecer padrões para a internet, como a linguagem XML, CSS e o SOAP. Estrutura básica de uma página HTML A estrutura básica de uma página HTML pode ser vista na Listagem 1, na qual podemos ver as principais tags que são necessárias para que o documento seja corretamente interpretado pelos browsers. Listagem 1. Estrutura básica de uma página HTML Linha 1: a instrução DOCTYPE deve ser sempre a primeira a aparecer em uma página HTML para indicar ao browser qual versão da linguagem usada. Nesse caso, estamos trabalhando com a HTML5, versão na qual a declaração do DOCTYPE é bastante simples, como podemos ver na listagem; Linhas 2 e 10: abertura e fechamento da tag html , que delimita o documento. Sendo assim, todas as demais tags da página devem estar nesse espaço; Linhas 3 e 6: abertura e fechamento da tag head , que de�ne o cabeçalho do documento. O conteúdo nesse espaço não é visível no browser, mas contém instruções sobre seu conteúdo e comportamento. Dentro dessa tag, por exemplo, podem ser inseridas folhas de estilo e scripts; Linha 4: a tag meta , nesse caso, especi�ca qual conjunto de caracteres (character set ou charset) será usado para renderizar o texto da página. O UTF-8 contém todos os caracteres dos padrões Unicode e ASCII, sendo, portanto, o mais utilizado em páginas web. A mesma tag meta , porém com outros atributos, pode ser utilizada para outros �ns, como na SEO (Search Engine Optimization); Linha 5: a tag title de�ne o título da página, aquele que aparece na janela/aba do navegador; Linhas 7 e 9: abertura e fechamento da tag body , marcando o espaço no qual deve estar contido o conteúdo visual da página. As demais tags que representam texto, botões etc. devem ser adicionadas nesse intervalo; Linha 8: nessa linha podemos observar a sintaxe para adição de comentários em HTML. Esse trecho não é renderizado pelo browser. Para desenvolver páginas com HTML basicamente precisamos de um editor de texto, como o Bloco de Notas do Windows, Nano e Emacs no Linux, entre vários outros. Há, ainda, editores com opções avançadas, como recursos de syntax hilghligt e autocomplete, como Sublime Text, Atom, Brackets e Visual Studio Code, que podem ser usados para editar documentos HTML. Independentemente do editor utilizado, podemos simplesmente copiar o código da Listagem 1 para um deles e salvar o arquivo com extensão .html . Em seguida, podemos abrir esse arquivo em um browser. Tags do HTML Um documento HTML é composto por tags, as quais possuem um nome e aparecem entre os sinais < e > , como vimos na Listagem 1, por exemplo, em <html> e <head> . Naquele exemplo também vimos que algumas tags precisam ser abertas e fechadas, como em <body> </body> . Nesse caso, a tag de fechamento deve conter a barra / antes do nome. Outras, porém, não precisam ser fechadas, como a tag <meta> . Nesses casos, a adição da barra / no �nal da própria tag, como vemos na Linha 4 da Listagem 1 é opcional. Outro aspecto importante da linguagem é que ela é case insensitive, ou seja, não leva em consideração a diferença entre letras maiúsculas e minúsculas. No entanto, o uso apenas de letras minúsculas tem sido utilizado como padrão pelos desenvolvedores. Além dessas características, as tags também possuem atributos, como vemos na Linha 4 da Listagem 1, na qual a tag meta possui o atributo charset=”UTF-8” . Essas propriedades de�nem algumas características adicionais de cada tag e em alguns casos são obrigatórias. Seus valores devem aparecer entre aspas duplas, como no exemplo acima, ou em aspas simples, caso o próprio valor contenha aspas duplas. Cabeçalhos do HTML Cabeçalhos são normalmente utilizados para identi�car páginas e seções e possuem aparência diferenciada do restante do texto. No HTML há seis níveis de cabeçalhos/títulos que podem ser utilizados por meio das tags h1 , h2 , h3 , h4 , h5 e h6 , sendo h1 o maior/mais relevante e h6 o menor/menos relevante. Na Listagem 2 podemos ver como utilizar essas tags, e na Figura 1 temos o resultado desse código. Para testar esse código, basta copiá-lo para o espaço indicado na Linha 8 da Listagem 1 e salvar o documento com a extensão .html. Listagem 2. Diferentes níveis de cabeçalho Execute o código Figura 1. Diferentes níveis de cabeçalho Parágrafos no HTML Parágrafos de texto são gerados na HTML por meio das tags <p> </p> . Esse é um exemplo de tag cuja disposição na tela se dá em forma de bloco, ou seja, um parágrafo é posto sempre abaixo do outro. O código da Listagem 3 adiciona três parágrafos, que podem ser visualizados na Figura 2. Listagem 3. Adicionando parágrafos Execute o código Figura 2. Parágrafos visualizados na página Imagens no HTML A inserção de imagens em uma página HTML pode ser feita por meio da tag img , que recebe no atributo src o endereço do arquivo a ser carregado. Além desse, outros dois atributos importantes são o alt , que indica um texto alternativo que será exibido caso o arquivo não possa ser carregado, e title , que indica o texto que aparecerá como tooltip ao passar o mouse sobre a �gura. O código da Listagem 4 insere uma imagem a partir do arquivo avatar.png , localizado na mesma pasta do arquivo HTML, e uma tag img apontando para um arquivo inexistente. Observe na Figura 3 que enquanto a primeira aparece corretamente, a segunda é exibida com um ícone de erro o texto alternativo que informamos. Note, ainda, que sobre a primeira �gura está sendo exibido o tooltip de�nido no atributo title . Listagem 4. Inserindo imagem Execute o código Exemplos de uso da tag img Figura 3. Exemplos de uso da tag img No caso da tag img , ainda temos as tags figure e figcaption que serão abordadas no tópico de HTML Semântico, porém, a sua estrutura é simples e é representada pelo código abaixo: Listagem 4.1. Imagem com legenda Links no HTML Links são normalmente utilizados para direcionar o usuário para outras páginas, ou para outras partes da mesma página. Nos dois casos, utilizamos a tag a , que possui o atributo href no qual indicamos o destino daquele link. A Listagem 5 mostra como adicionar um link para outra página, neste caso, indicada pelo arquivo pagina2.html. Listagem 5. Inserindo link Já a Listagem 6 mostra como adicionar um link para um elemento na mesma página. Nesse caso, ao clicar no link o browser mudará o foco para o elemento que possui o atributo id igual àquele indicado no href . Listagem 6. Inserindo link com id Note também que nesse caso o href requer ainda o sinal de cerquilha ( # ) antes do id do elemento que será o foco do link. Tabelas no HTML Tabelas são elementos utilizados com frequência para exibir dados de forma organizada em linhas e colunas. No HTML, elas são formadas por três tags básicas: table , para delimitar a tabela; tr , para indicar as linhas; e td para formar as colunas. A Listagem 7 mostra um exemplo simples de tabela com três linhas e duas colunas, e seu resultado pode ser visto na Figura 4. Listagem 7. Exemplo de uso de tabelas Execute o código Exemplo de tabela com três linhas e duas colunas Figura 4. Exemplo de tabela com três linhas e duas colunas Existem ainda outras três tags utilizadas para delimitar, de forma mais organizada, as partes da tabela: thead para o cabeçalho; tbody para o corpo; e tfoot para o rodapé. A Listagem 8 traz um exemplo de tabela mais complexa, utilizando todas as tags. Seu resultado é apresentado na Figura 5. Listagem 8. Tabela com cabeçalho e rodapé Execute o códigoTabela com cabeçalho e rodapé Figura 5. Tabela com cabeçalho e rodapé Listas no HTML Listas são elementos úteis para organizar e ordenar itens que estão relacionados de alguma forma. No HTML é possível criar três tipos de listas: ordenadas (com a tag ol ), não ordenadas (com a tag ul ), e de de�nição (por meio da tag dl ). Na Listagem 9 temos um exemplo de lista ordenada, enquanto a Listagem 10 traz um exemplo de lista não ordenada. Em seguida, a Figura 6 mostra o resultado dos dois códigos. Observe que cada item das primeiras listas é de�nido pela tag li . Listagem 9. Lista ordenada Execute o código Listagem 10. Lista não ordenada Execute o código Listas ordenada e não ordenada Figura 6. Listas ordenada e não ordenada No caso das listas ordenadas temos o atributo type que permite especi�car o tipo de marcador a ser usado: números (padrão), números romanos ou letras. Listagem 9.1. Lista ordenada por número romano maiúsculo Os valores permitidos para esse atributo são: 1 - números (padrão) i - números romanos minúsculos I - números romanos maiúsculos a - letras minúsculas A - letras maiúsculas As listas de de�nição têm um comportamento um pouco diferente, uma vez que cada item é composto por um título ( dt ) e uma de�nição ( dd ), semelhante ao que ocorre em dicionários, nos quais temos os verbetes e suas de�nições. Na Listagem 11 temos um exemplo desse tipo de lista, com seu resultado ilustrado na Figura 7. Listagem 11. Exemplo de lista de de�nição Execute o código Listas de de�nição Figura 7. Listas de de�nição Formulários no HTML Formulários são normalmente utilizados para integrar a página HTML a algum processamento no lado servidor. Nesses casos, a página envia dados para uma aplicação (Java, PHP, .NET etc.), que os recebe, trata e retorna algum resultado. No HTML, geralmente usamos a tag form para delimitar a área na qual se encontram os campos a serem preenchidos pelo usuário, a �m de serem enviados para processamento no back-end (enquanto a página HTML é chamada de front-end da aplicação). A Listagem 12 mostra um exemplo de formulário com vários tipos de campos para entrada de dados e um botão para submetê-los ao servidor. Na Figura 8 vemos seu resultado. Listagem 12. Formulário com campos Execute o código HTML básico - códigos HTML Figura 8. Formulário para envio de dados Formatação de texto As tags de formatação de texto ajudam a destacar trechos da parte escrita da página, seja para �ns de SEO ou por requisitos do conteúdo. Formatações como negrito e itálico podem ser aplicadas com facilidade utilizando as várias tags disponíveis para esse �m: b e strong para negrito/texto forte; i e em para itálico/ênfase; sup e sub para sobrescrito e subscrito, respectivamente; ins e del para indicar trechos que foram incluídos ou removidos, respectivamente; small para textos menores que o padrão; mark para texto destacado. Na Listagem 13 vemos exemplos de uso dessas tags, e seu resultado pode ser observado em seguida, na Figura 9. Listagem 13. Tags de formatação de texto Execute o código Textos com formatação especial Figura 9. Textos com formatação especial Áudio no HTML Com HTML também é possível inserir áudio e vídeo nas páginas com facilidade. Para áudio, podemos utilizar a tag audio , da mesma forma que apresentada na Listagem 14. Listagem 14. Inserindo áudio Na tag audio, o atributo src aponta para o arquivo de áudio que será executado (MP3, OGG ou WAV). Já o atributo controls indica que devem ser exibidos os controles de gerenciamento do áudio (botões play, pause etc.). Além dele, outros também merecem destaque: autoplay , para fazer com que o áudio seja executado assim que for carregado; loop , para que o áudio seja executado repetidas vezes. Também podemos informar mais de um arquivo de áudio (opções alternativas de formato, por exemplo). Nesse caso, precisamos utilizar a tag source , como no exemplo da Listagem 15. Listagem 15. Inserindo áudio com a tag source Dessa vez, os arquivos serão buscados na ordem em que aparecem na lista. Caso um não seja localizado ou não possa ser carregado, o browser buscará imediatamente o próximo. A Figura 10 ilustra o resultado desses códigos, com o controle de áudio exibido no browser. Note também que no topo da janela (na aba do navegador) é exibido um ícone informando ao usuário que essa página está executando um áudio. HTML básico - códigos HTML Figura 10. Áudio em execução na página Vídeo no HTML Semelhante ao áudio, também podemos inserir vídeos nas páginas HTML utilizando a tag video , adicionada na HTML5, como na Listagem 16. Listagem 16. Inserindo vídeo Dessa vez, além dos atributos já vistos no áudio, também precisamos informar a largura ( width ) e a altura ( height ) do vídeo, a �m de mantê-lo adequado ao layout. O código da Listagem 17 pode ser utilizado quando desejarmos informar mais de um arquivo de vídeo como opções de carregamento, da mesma forma que vimos na tag audio . Nesse caso, os formatos suportados são MP4, WebM e Ogg. Listagem 17. Inserindo vídeo O resultado agora pode ser visto na Figura 11. Vídeo em execução na página Figura 11. Vídeo em execução na página Div e Span no HTML As tags div e span são duas das mais utilizadas no HTML, com objetivos distintos, porém com grande importância para a composição do layout das páginas e formatação do texto. As divs são normalmente utilizados para representarem containers para outros elementos, agrupando-os visualmente dentro de um bloco que pode conter dimensões e posição de�nidas. Por padrão, uma div não possui aparência características visuais de�nidas, isso precisa ser feito via CSS ao atribuir bordas, cores etc. Sua principal característica, no entanto, é que essa tag representa um elemento do tipo bloco, ou seja, que quando adicionado na página, automaticamente gera uma nova linha no layout (semelhante a um parágrafo), ao invés de ser alocado lateralmente nos demais componentes. O código da Listagem 18 demonstra um uso básico das divs. Listagem 18. Inserindo divs Execute o código Perceba no resultado da Figura 12 que, enquanto os dois primeiros inputs são dispostos lateralmente, os dois últimos aparecem um abaixo do outro, uma vez que estão dentro de divs diferentes. Exemplo de uso das DIVs Figura 12. Exemplos de uso das divs Já a tag span é um elemento do tipo inline , ou seja, quando adicionado na página, ele é inserido lateralmente após os demais componentes, diferente das divs que são elementos do tipo bloco. Elementos span , por padrão, também não possuem nenhuma característica visual de�nida, isso precisa ser feito via CSS para destacar ou aplicar uma formatação especial para um certo trecho do texto. Por exemplo, a Listagem 19 demonstra o uso do span em dois casos. No primeiro, a tag não conta com nenhum atributo adicional; no segundo, adicionamos a ela uma aparência diferenciada via CSS. Listagem 19. Trabalhando com span Execute o código O resultado pode ser visto na Figura 13 e, como esperado, no primeiro caso não conseguimos perceber nenhuma diferença visual devido ao uso do span. Exemplo de uso do SPAN Figura 13. Exemplo de uso do span Neste artigo vimos uma breve introdução à linguagem HTML, uma das bases do desenvolvimento web e que atualmente também vem sendo amplamente utilizada na criação de aplicativos mobile híbridos. Portanto, conhecer essa linguagem é fundamental para quem deseja desenvolver aplicações Tecnologias: HTML Marcar como concluído Anotar Inicie agora sua carreira de programador por apenas R$49,90/mês Ainda está em dúvida? Experimente a plataforma grátis durante 7 dias. Faça um teste grátis BENEFÍCIOS Saiba mais Por Joel Em 2019 RECEBA NOSSAS NOVIDADES Informe o seu e-mail Receber Newsletter Menu Tecnologias Exercicios Cursos Artigos Revistas Fale conosco Trabalhe conosco Assinatura para empresas Assine agora Tecnologias Fundamentos .NET PHP Python Java Delphi HTML e CSS JavaScript NodeReact Native Flutter Banco de Dados Mobile Spring Arquitetura Automação Engenharia + Assuntos Hospedagem web por Porta 80 Web Hosting Artigo HTML básico - códigos HTML Aprenda os princípios básicos para confecção de um site em HTML para que você possa fazer o seu primeiro site. Invista em você! Saiba como a DevMedia pode ajudar sua carreira. Por que eu devo ler este artigo: HTML (abreviação de Hypertext Markup Language) é uma linguagem de marcação utilizada na estruturação de páginas web. Sua sintaxe é bastante simples e, assim como a XML é baseada em tags, que representam os diversos elementos de uma página, como imagens e links. Tire sua dúvida DOCTYPEDOCTYPE htmlhtml htmlhtml headhead metameta charsetcharset UTF-8UTF-8 titletitle DocumentDocument titletitle headhead bodybody <!-- Conteúdo --><!-- Conteúdo --> bodybody htmlhtml <!<! >> << >> << >> << =="" ""/>/> << >> </</ >> </</ >> << >> </</ >> </</ >> 11 22 33 44 55 66 77 88 99 1010 De acordo com as regras de SEO, é recomendado que uma página possua apenas uma tag <h1> que indique seu assunto, pois essa tag informa aos motores de busca qual sua principal palavra-chave. h1h1 Título de nível 1Título de nível 1 h1h1 h2h2 Título de nível 2Título de nível 2 h2h2 h3h3 Título de nível 3Título de nível 3 h3h3 h4h4 Título de nível 4Título de nível 4 h4h4 h5h5 Título de nível 5Título de nível 5 h5h5 h6h6 Título de nível 6Título de nível 6 h6h6 << >> </</ >> << >> </</ >> << >> </</ >> << >> </</ >> << >> </</ >> << >> </</ >> 11 22 33 44 55 66 pp Primeiro parágrafo do texto.Primeiro parágrafo do texto. pp pp Segundo parágrafo do texto.Segundo parágrafo do texto. pp pp Terceiro parágrafo do texto.Terceiro parágrafo do texto. pp << >> </</ >> << >> </</ >> << >> </</ >> 11 22 33 imgimg srcsrc avatar.pngavatar.png altalt Texto alternativoTexto alternativo titletitle AvatarAvatar imgimg srcsrc arquivo_inexistente.jpgarquivo_inexistente.jpg altalt Texto alternativoTexto alternativo titletitle Outra figuraOutra figura << =="" "" =="" "" =="" "" />/> << =="" "" =="" "" =="" ""/>/> 11 22 figurefigure imgimg srcsrc http://meusite.com.br/assets/imagem.jpghttp://meusite.com.br/assets/imagem.jpg altalt ImagemImagem figcaptionfigcaption Legenda da figura 1Legenda da figura 1 figcaptionfigcaption figurefigure << >> << =="" "" =="" "">> << >> </</ >> </</ >> 11 22 33 44 55 aa hrefhref pagina2.htmlpagina2.html Página 2Página 2 aa<< =="" "">> </</ >>11 aa hrefhref #paragrafo3#paragrafo3 Ir para o parágrafo 3Ir para o parágrafo 3 aa <!--outros elementos--><!--outros elementos--> pp idid paragrafo3paragrafo3 Parágrafo no rodapé.Parágrafo no rodapé. pp << =="" "">> </</ >> << =="" "">> </</ >> 11 22 33 tabletable trtr tdtd Linha 1, Coluna 1Linha 1, Coluna 1 tdtd tdtd Linha 1, Coluna 2Linha 1, Coluna 2 tdtd trtr trtr tdtd Linha 2, Coluna 1Linha 2, Coluna 1 tdtd tdtd Linha 2, Coluna 2Linha 2, Coluna 2 tdtd trtr trtr tdtd Linha 3, Coluna 1Linha 3, Coluna 1 tdtd tdtd Linha 3, Coluna 2Linha 3, Coluna 2 tdtd trtr tabletable << >> << >> << >> </</ >> << >> </</ >> </</ >> << >> << >> </</ >> << >> </</ >> </</ >> << >> << >> </</ >> << >> </</ >> </</ >> </</ >> 11 22 33 44 55 66 77 88 99 1010 1111 1212 1313 1414 tabletable theadthead trtr thth ProdutoProduto thth thth PreçoPreço thth thth QuantidadeQuantidade thth trtr theadthead tbodytbody trtr tdtd FeijãoFeijão tdtd tdtd R$ 8,75R$ 8,75 tdtd tdtd 11 tdtd trtr trtr tdtd ArrozArroz tdtd tdtd R$ 4,99R$ 4,99 tdtd tdtd 22 tdtd trtr tbodytbody tfoottfoot trtr tdtd TotalTotal tdtd tdtd tdtd tdtd R$ 18,73R$ 18,73 tdtd trtr tfoottfoot tabletable << >> << >> << >> << >> </</ >> << >> </</ >> << >> </</ >> </</ >> </</ >> << >> << >> << >> </</ >> << >> </</ >> << >> </</ >> </</ >> << >> << >> </</ >> << >> </</ >> << >> </</ >> </</ >> </</ >> << >> << >> << >> </</ >> << >></</ >> << >> </</ >> </</ >> </</ >> </</ >> 11 22 33 44 55 66 77 88 99 1010 1111 1212 1313 1414 1515 1616 1717 1818 1919 2020 2121 2222 2323 2424 2525 2626 2727 2828 Por padrão, as tabelas não possuem bordas. Isso deve ser adicionado por meio das CSS. olol lili Item 1Item 1 lili lili Item 2Item 2 lili lili Item 3Item 3 lili olol << >> << >> </</ >> << >> </</ >> << >> </</ >> </</ >> 11 22 33 44 55 ulul lili Item 1Item 1 lili lili Item 2Item 2 lili lili Item 3Item 3 lili ulul << >> << >> </</ >> << >> </</ >> << >> </</ >> </</ >> 11 22 33 44 55 olol typetype II lili Item 1Item 1 lili lili Item 2Item 2 lili lili Item 3Item 3 lili olol << =="" "">> << >> </</ >> << >> </</ >> << >> </</ >> </</ >> 11 22 33 44 55 dldl dtdt Título 1Título 1 dtdt dddd Definição 1Definição 1 dddd dtdt Título 2Título 2 dtdt dddd Definição 2Definição 2 dddd dtdt Título 3Título 3 dtdt dddd Definição 3Definição 3 dddd dldl << >> << >> </</ >> << >> </</ >> << >> </</ >> << >> </</ >> << >> </</ >> << >> </</ >> </</ >> 11 22 33 44 55 66 77 88 formform actionaction salvar_dados.phpsalvar_dados.php methodmethod postpost inputinput typetype texttext placeholderplaceholder Digite aquiDigite aqui brbr inputinput typetype checkboxcheckbox Checkbox Checkbox brbr inputinput typetype radioradio Radio button Radio button brbr inputinput typetype rangerange brbr inputinput typetype submitsubmit valuevalue EnviarEnviar formform << =="" "" =="" "">> << =="" "" =="" "">> << />/> << =="" "">> << />/> << =="" "">> << />/> << =="" "">> << />/> << =="" "" =="" "">> </</ >> 11 22 33 44 55 66 77 Apesar da tag <b> e <strong> terem resultados visualmente idênticos, eles têm usos diferentes. A tag <b> deve ser utilizada quando quer se destacar algo que é apenas visual, como por exemplo, deixar um link com mais visível. A tag <strong> por sua vez, além de destacar o visual, dá um destaque semântico ao texto, então se o conteúdo que você quer dar destaque é uma parte relevante do texto, utilize a tag <strong> . O mesmo vale para as tags <i> e <em> , onde a tag <i> é utilizada apenas para formatação visual e a tag <em> dá ênfase semântica ao texto, não devendo ser utilizada para uso puramente estético. pp Texto em negrito com Texto em negrito com bb boldbold bb e e strongstrong strongstrong strongstrong .. pp pp Texto em itálico com Texto em itálico com ii italicsitalics ii e e emem emphasisemphasis emem .. pp pp Texto Texto supsup sobrescritosobrescrito supsup e e subsub subscritosubscrito subsub .. pp pp Texto Texto insins inseridoinserido insins e e deldel excluídoexcluído deldel .. pp pp Texto Texto smallsmall pequenopequeno smallsmall e e markmark destacadodestacado markmark .. pp << >> << >> </</ >> << >> </</ >> </</ >> << >> << >> << >> << >> </</ >> </</ >> << >> << >> </</ >> << >> </</ >> </</ >> << >> << >> </</ >> << >> </</ >> </</ >> << >> << >> </</ >> << >> </</ >> </</ >> 11 22 33 44 55 audioaudio controlscontrols srcsrc musica.mp3musica.mp3 Seu browser não suporta áudio.Seu browser não suporta áudio. audioaudio << =="" "" >> </</ >> 11 22 33 Caso o browser não ofereça suporte a essa tag, o texto contido eu seu interior será exibido. audioaudio controlscontrols srcsrc musica.mp3musica.mp3 sourcesource srcsrc musica.oggmusica.ogg typetype audio/oggaudio/ogg sourcesource srcsrc musica.mp3musica.mp3 typetype audio/mpegaudio/mpeg audioaudio << =="" "" >> << =="" "" =="" "">> << =="" "" =="" "">> </</ >> 11 22 33 44 videovideo srcsrc video.mp4video.mp4 widthwidth 640640 heightheight 480480 controlscontrols Seu browser não suporta vídeo HTML5.Seu browser não suporta vídeo HTML5. videovideo << =="" "" =="" "" =="" "" >> </</ >> 11 22 33 videovideo widthwidth 640640 heightheight 480480 controlscontrols sourcesource srcsrc video.webmvideo.webm typetype video/webmvideo/webm sourcesource srcsrc video.mp4video.mp4 typetype video/mp4video/mp4 videovideo << =="" "" =="" "" >> << =="" "" =="" "">> << =="" "" =="" "">> </</ >> 11 22 33 44 inputinput typetype texttext valuevalue input 1input 1 inputinput typetype texttextvaluevalue input 2input 2 divdiv inputinput typetype texttext valuevalue input 3input 3 divdiv divdiv inputinput typetype texttext valuevalue input 4input 4 divdiv << =="" "" =="" "">> << =="" "" =="" "">> << >><< =="" "" =="" "">></</ >> << >><< =="" "" =="" "">></</ >> 11 22 33 44 pp Este é um texto com um Este é um texto com um spanspan trecho em destaquetrecho em destaque spanspan .. pp pp Este é um texto com um Este é um texto com um spanspan stylestyle background: #1abc9c; border-radius:5px; padding:5pxbackground: #1abc9c; border-radius:5px; padding:5px trecho em destaquetrecho em destaque spanspan .. pp << >> << >> </</ >> </</ >> << >> << =="" "">> </</ >> </</ >> 11 22 33 44 55 66 77 Tire sua dúvida Suporte em tempo real Certi�cado de autoridade Exercícios para praticar Estudo gami�cado Planos de estudo para cada carreira de programador Suporte ao aluno - Tire a sua dúvida. 450 450 TESTE GRÁTISTecnologias Exercite Contrate um programador Navegue Buscar https://www.devmedia.com.br/artigos/ https://www.devmedia.com.br/artigos/front-end-web https://jsfiddle.net/a67mo21L/ https://jsfiddle.net/gdugd0ce/ https://jsfiddle.net/qem4rfcv/ https://www.devmedia.com.br/html-semantico-conheca-os-elementos-semanticos-da-html5/38065#tag-figure https://www.devmedia.com.br/html-semantico-conheca-os-elementos-semanticos-da-html5/38065#tag-figure https://jsfiddle.net/r52ud9nf/ https://jsfiddle.net/2dyrLpL9/ https://jsfiddle.net/vs41kusf/ https://jsfiddle.net/oa4pftkh/ https://jsfiddle.net/Lv7vy6kk/ https://jsfiddle.net/s9jtkoL4/ https://jsfiddle.net/5L5g3fhn/ https://www.devmedia.com.br/como-centralizar-divs-em-html-e-css/37568 https://www.devmedia.com.br/como-centralizar-divs-em-html-e-css/37568 https://jsfiddle.net/oe7ghfrz/ https://jsfiddle.net/wk2kguqn/ https://www.devmedia.com.br/html/ https://www.devmedia.com.br/pro/ https://www.devmedia.com.br/pro/ https://www.devmedia.com.br/perfil/joel-rodrigues https://www.devmedia.com.br/tecnologia/ https://www.devmedia.com.br/tecnologia/novos-desafios/ https://www.devmedia.com.br/cursos/ https://www.devmedia.com.br/artigos/ https://www.devmedia.com.br/revistas/ https://www.devmedia.com.br/fale-conosco/ https://www.devmedia.com.br/perfil/empresarial/devmedia https://www.devmedia.com.br/empresarial/ https://www.devmedia.com.br/shop/ https://www.devmedia.com.br/guias/fundamentos https://www.devmedia.com.br/guias/net https://www.devmedia.com.br/guias/php https://www.devmedia.com.br/guias/python https://www.devmedia.com.br/guias/java https://www.devmedia.com.br/guias/delphi https://www.devmedia.com.br/guias/html-e-css https://www.devmedia.com.br/guias/javascript https://www.devmedia.com.br/guias/node-js https://www.devmedia.com.br/guias/react-native https://www.devmedia.com.br/guias/flutter https://www.devmedia.com.br/guias/banco-de-dados https://www.devmedia.com.br/guias/mobile https://www.devmedia.com.br/guias/spring https://www.devmedia.com.br/guias/arquitetura https://www.devmedia.com.br/guias/automacao-comercial https://www.devmedia.com.br/guias/engenharia-de-software https://www.devmedia.com.br/guias/mais-assuntos https://github.com/DevMedia https://www.facebook.com/devmedia.com.br/ http://twitter.com/devmedia https://www.instagram.com/devmedia.com.br/ https://www.youtube.com/c/DevmediaBrasil https://www.devmedia.com.br/guia/html/38051 https://www.devmedia.com.br/guia/html/38051 https://www.devmedia.com.br/ https://www.devmedia.com.br/join/ https://www.devmedia.com.br/tecnologia/novos-desafios https://www.devmedia.com.br/empresarial/
Materiais relacionados
53 pág.
Perguntas relacionadas
Compartilhar