Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
<p>HTML 5</p><p>TAGS BÁSICAS E ESTRUTURAIS</p><p>Prof. Rosemary Melo</p><p>TAGS BÁSICAS DA LINGUAGEM</p><p> TAG <html></p><p>Indica que está criando uma página html</p><p> TAG <head></p><p>Área contém informação sobre a página</p><p> TAG <body></p><p> especifica o conteúdo da página</p><p>Obs.: Quase todas as tags em html é representada no código por</p><p>uma tag de início (exemplo: <html>) e uma de fim (exemplo:</p><p></html>).</p><p>Estrutura básica do HTML5</p><p><!DOCTYPE html></p><p><html lang="pt-br"></p><p><head></p><p><meta charset="utf-8"/></p><p><title>Entendendo a estrutura e semântica do HTML5</title></p><p></head></p><p><body></p><p><p>Olá mundo !</p></p><p></body></p><p></html></p><p>Informa ao navegador que tem que renderizar uma página html</p><p>Informa o tipo de linguagem vai usar no html</p><p>Informa que tipo de caracter vai ser usado na tela</p><p>ca</p><p>b</p><p>e</p><p>ça</p><p>lh</p><p>o</p><p>co</p><p>rp</p><p>o</p><p>TAGS BÁSICAS DA LINGUAGEM</p><p>TAGS BÁSICAS DA LINGUAGEM</p><p>TAG <DOCTYPE></p><p>Indica o tipo de documento que será aberto.</p><p>TAG <head></p><p>Área só de informação para a página, não é vista pelo</p><p>usuário</p><p>Tudo que é especifico fica nesta área</p><p>Serve para informar o título da página</p><p> Apresenta as informações meta</p><p> Informar se tem código JavaScript e CSS</p><p>TAGS BÁSICAS DA LINGUAGEM</p><p>Comandos encontrados no <head> :</p><p> Definição de cabeçalho</p><p><title> representa o título do documento </title></p><p> Ligação com arquivos CSS externos</p><p><link rel=“stylesheet” href=“mystyle.css”></p><p>Traz código do css para dentro do html</p><p> Definição de Metas</p><p><meta charset="utf-8"/></p><p> Comando para chamada de rotinas em JavaScript</p><p><script></p><p>function myFunction {</p><p>document.getElementById(“demo”).innerHTML=“Hello JavaScript”;</p><p>}</p><p></script></p><p>muito usado para validação do formulário</p><p>TAGS BÁSICAS DA LINGUAGEM</p><p>Comandos encontrados no <head> :</p><p>TAG <meta></p><p> serve para informar o navegador que vai renderizar sua página o que ele</p><p>deve fazer.</p><p>deve colocar os comandos <meta> separados para cada coisa para o</p><p>navegador renderizar a página mais rápido.</p><p>EXEMPLO DE TAGs <meta></p><p><head></p><p><meta charset="utf-8"/></p><p><meta name=“description” content=“Páginas para alunos da Estácio”/></p><p><meta name=“keywords” content=“HTML,CSS,XML,JAVA SCRIPT”/></p><p><meta name=“author” content=“ João Silva”></p><p><meta http-equiv=“refresh” content=“30”></p><p></head></p><p>Dica: usar aplicativos da web que definem como montar meta</p><p>“Como montar meta para página na web ?”</p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>A semântica das novas marcações do HTML5</p><p>Em todas as páginas da Web existem divisões básicas referentes aos tipos de</p><p>conteúdo que são colocados em cada parte do layout, como cabeçalho, rodapé</p><p>ou menu de navegação.</p><p>Nas versões anteriores do HTML não haviam tags com uma semântica</p><p>apropriada para cada uma dessas divisões.</p><p>Os desenvolvedores acabavam usando a tag <div> para todas as situações, e</p><p>criando seus próprios padrões de nomeclaturas através dos</p><p>atributos id ou class.</p><p>No HTML5 foram criadas diversas tags semânticas para indicar quais conteúdos</p><p>estão sendo inseridos em cada uma das divisão da página, organizando e</p><p>padronizando o desenvolvimento.</p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>NOVOS ELEMENTOS DE ESTRUTURA (RESUMO)</p><p> são como se fosse <div> destinadas a uma determinada tarefa</p><p>utilizados no html 4.</p><p> foco na semântica (significado do comando) de modo que o</p><p>navegador entenda a que se refere cada conteúdo da página.</p><p> visa facilitar o mecanismo de busca para que possa identificar o</p><p>que é o quê na página html.</p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>NOVOS ELEMENTOS DE ESTRUTURA</p><p><header> - cabeçalho da página ou seção (não confundir com o</p><p><head>)</p><p><footer> - rodapé da página ou seção</p><p><section> - seção do conteúdo</p><p><article> - um item dentro da página ou seção</p><p><nav> - conjunto de links que formam a navegação (pode ser o</p><p>menu principal do site ou links relacionados ao conteúdo da</p><p>página)</p><p><aside> - conteúdo relacionado ao artigo (igual aos arquivos e</p><p>posts relacionados a um blog).</p><p>TAGS ESTRUTURAIS DO HTML 5 – NOVOS ELEMENTOS</p><p>TAGS ESTRUTURAIS DO HTML 5 – NOVOS ELEMENTOS</p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>ESPECÍFICOS</p><p><SECTION></p><p> representa uma seção genérica dentro de um documento.</p><p>Usado quando se deseja dar um significado semântico a um</p><p>contéudo de uma página e não só estilização independente.</p><p> pode conter um agrupamento de textos com vários capítulos,</p><p>seções numeradas etc.</p><p>pode-se ter n seções dentro de uma página</p><p>TAG <SECTION></p><p>Exemplo: o exemplo abaixo várias contém várias seções com</p><p>assuntos distintos</p><p><body></p><p><section></p><p><h1>O HTML 5 </h1></p><p><p>Surgimento do html 5</p></p><p></section></p><p><section></p><p><h1>Tags h1</h1></p><p><p>Comandos de criação de páginas</p></p><p></section></p><p></body></p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>ESPECÍFICOS</p><p><ARTICLE></p><p>representa uma composição independente em um documento, página,</p><p>aplicação, ou site, ou que é destinado a ser distribuído de forma</p><p>independente ou reutilizável.</p><p>Ex.: artigo de revista ou jornal, post de um fórum ou blog, um comentário</p><p>enviado por usuário, ou qualquer outra forma de conteúdo independente.</p><p> um artigo pode está dentro de uma seção ou não.</p><p>Imagine um jornal com as seções de esportes, fofocas etc. Dentro de cada</p><p>seção existem vários artigos sobre textos específicos, por exemplo, na seção</p><p>de esportes pode ter um artigo falando sobre o time A, outro sobre time B e</p><p>o outro sobre o time C.</p><p>Um artigo pode conter um elemento <header> que é o título e um</p><p>elemento <footer> que representa o rodapé.</p><p>TAG <ARTICLE></p><p>Exemplo:</p><p><!DOCTYPE html></p><p><html lang="pt-br"></p><p><head></p><p><meta charset="utf-8"/</p><p><title>Entendendo a estrutura e semântica do HTML5</title></p><p></head></p><p><body></p><p><article></p><p><header></p><p><h1>Nova Vitória !</h1></p><p></header></p><p><p>O time A ganhou novamente, se continuar assim será líder do</p><p>campeonato...</p></p><p><p>...</p></p><p><footer></p><p><a href="?comments=1">Comentários</a></p><p></footer></p><p></article></p><p></body></p><p></html></p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>ESPECÍFICOS</p><p><HEADER></p><p>utilizado para delimitar o título da seção</p><p> não é obrigatório.</p><p><FOOTER></p><p>este comando contém, basicamente, as informações sobre o</p><p>conteúdo da seção, como por exemplo o autor, links relacionados,</p><p>etc.</p><p>TAGS <HEADER> E <FOOTER></p><p>Exemplo:</p><p><!DOCTYPE html></p><p><html lang="pt-br"></p><p><head></p><p><meta charset="utf-8"/</p><p><title>Entendendo a estrutura e semântica do HTML5</title></p><p></head></p><p><body></p><p><article></p><p><header></p><p><h1>Nova Vitória !</h1></p><p></header></p><p><p>O time A ganhou novamente, se continuar assim será líder do</p><p>campeonato...</p></p><p><p>...</p></p><p><footer></p><p><a href="?comments=1">Comentários</a></p><p></footer></p><p></article></p><p></body></p><p></html></p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>ESPECÍFICOS</p><p><HGROUP></p><p>também usado para delimitar o título da seção.</p><p>TAG <HGROUP></p><p><!DOCTYPE html></p><p><html lang="pt-br"></p><p><head></p><p><meta charset="utf-8"/></p><p><title>Entendendo a estrutura e semântica do HTML5</title></p><p></head></p><p><body></p><p><article></p><p><hgroup></p><p><h1>Livro sobre HTML</h1></p><p><h2>Como criar uma página </h2></p><p></hgroup></p><p><p> O curso de html é muito importante </p></p><p><section></p><p><h1>O HTML 5 </h1></p><p><p>Surgimento do html 5</p></p><p></section></p><p><section></p><p><h1>Tags h1</h1></p><p><p>Comandos de criação de páginas</p></p><p></section></p><p></article></p><p></body></p><p></html></p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>ESPECÍFICOS</p><p><NAV></p><p> onde fica as informações de navegação da página.</p><p> neste comando são colocados geralmente as ligações (links</p><p>internos) para a própria página ou ligações externas para outras</p><p>páginas de sites externos.</p><p>TAG <NAV></p><p>Exemplo:</p><p><!DOCTYPE html></p><p><html lang="pt-br"></p><p><head></p><p><meta charset="utf-8"/></p><p><title>Entendendo a estrutura e semântica do HTML5</title></p><p></head></p><p><body></p><p><header></p><p><nav></p><p><h1>Menu Principal</h1></p><p><ul></p><p><li><a href="articles.html">índice de artigos</a></li></p><p><li><a href="http://www.estacio.br"> Site da Estácio</a></li></p><p></ul></p><p></nav></p><p></header></p><p></body></p><p></html></p><p>TAGS ESTRUTURAIS DO HTML 5</p><p>ESPECÍFICOS</p><p><ASIDE></p><p>Neste comando estão contidas as informações que não estão</p><p>relacionadas diretamente com o texto. Como exemplo:</p><p>comerciais pagos, links promocionais etc.</p><p>TAG <ASIDE></p><p>Exemplo:</p><p><!DOCTYPE html></p><p><html lang="pt-br"></p><p><head></p><p><meta charset="utf-8"/></p><p><title>Entendendo a estrutura e semântica do HTML5</title></p><p></head></p><p><body></p><p><aside></p><p><h1>Tenha uma graduação !!! </h1></p><p><p><a href=“http://www.estacio.br”> Estude na estácio</a></p></p><p></aside></p><p></body></p><p></html></p><p>Exemplo: Estrutura 1</p><p><body></p><p><header></p><p><h1>Aula de HTML5 </h1></p><p></header></p><p><nav></p><p><h1>Menu Principal</h1></p><p><ul></p><p><li><a href="articles.html">índice de artigos</a></li></p><p><li><a href="http://www.estacio.br"> Site da</p><p>Estácio</a></li></p><p></ul></p><p></nav></p><p>.... Continuação próxima página</p><p>Exemplo: Estrutura 1</p><p>.... <section></p><p><article></p><p><header> <h1>Nova Vitória !</h1> </header></p><p><p>O time A ganhou novamente, se continuar assim será</p><p>líder do campeonato...</p></p><p><p>...</p></p><p><footer></p><p><a href="?comments=1">Comentários</a></p><p></footer></p><p></article></p><p></section></p><p><aside></p><p><h1>Tenha uma graduação !!! </h1></p><p><p><a href=“http://www.estacio.br”> Estude na estácio</a></p></p><p></aside></p><p></body></p>Mais conteúdos dessa disciplina
Curso de HTML e CSS - Estrutura básica do HTML - Aula 1 - Resumo- PORTFÓLIO - ADSIS - IMERSÃO PROFISSIONAL_ APLICANDO ORIENTAÇÃO A OBJETOS - 54_2025 docx (13)
- PORTFÓLIO - ADSIS - IMERSÃO PROFISSIONAL_ APLICANDO ORIENTAÇÃO A OBJETOS - 54_2025 docx (12)
- PORTFÓLIO - ADSIS - IMERSÃO PROFISSIONAL_ APLICANDO ORIENTAÇÃO A OBJETOS - 54_2025 docx (11)
- PORTFÓLIO - ADSIS - IMERSÃO PROFISSIONAL_ APLICANDO ORIENTAÇÃO A OBJETOS - 54_2025 docx (10)
- PORTFÓLIO - ADSIS - IMERSÃO PROFISSIONAL_ APLICANDO ORIENTAÇÃO A OBJETOS - 54_2025 docx (9)
- PORTFÓLIO - ADSIS - IMERSÃO PROFISSIONAL_ APLICANDO ORIENTAÇÃO A OBJETOS - 54_2025 docx (8)
- Fase 2 Estrutura Acadêmica (Associações e Relacionamentos) (3)
- Fase 2 Estrutura Acadêmica (Associações e Relacionamentos) (2)
- Projeto Sistema de Gestão Educacional Você foi contratado pela EduConnect, uma startup de tecnologia educacional que fornece sistemas para universidades e escolas O des
- Você foi contratado pela EduConnect, uma startup de tecnologia educacional que fornece sistemas para universidades e escolas O desafio é desenvolver um Sistema de Gestão Educacional (SGE)
- Prova - Estudos contemporâneos
- Dentre as ações administrativas adotadas para melhor gestão da SMSU a seguir, qual não faz parte? Opção A Qualificar as atribuições, inclusive ativida
- Qual das alternativas abaixo explica corretamente a principal diferença entre a unidade de medida pixel (PX) e a unidade de medida EM no desenvolvime
- Qual correta? A comunicação em saúde está amparada em vertentes importantes, como o tema transversal, central e estratégico, que são essenciais na tra
- Qual é um exemplo de uma característica comportamental? radio_button_unchecked Características da orelha radio_button_unchecked Voz radio_butto...
- Analisando as tecnologias atuais, por exemplo, a de dispositivos como os smartphones, comparando com a tecnologia ____________, fica fácil constata...
- É importante que os profissionais da área estejam sempre atualizados das diretrizes das principais entidades do setor, como a W3C (World Wide Web C...
- Quais são os marcadores para comentário de única linha de de múltiplas linhas em C? Escolha uma opção: a. Para única linha: // para múltipla linha: //
- Em um sistema de automação industrial utilizando a rede Profibus DP, deseja-se realizar 0 controle eletrônico da velocidade de um motor trifásico d...
- cadu Antes da proposta da linguagem de marcação HTML por Tim Berners-Lee, outros sistemas de publicação de conteúdo voltados para tipos específicos de
- Assinale a alternativa CORRETA: H1,000 + H₂O₁₁₁ H₃O'(1) +1 to A.( ) Somente a sentença I está correta. B.( ) As sentenças II e III estão corretas. ...
- A tag em HTML que permite especificar um novo parágrafo é: a. br b. head c. a d. p e. body
- Documentoscopia: O que são elementos de segurança? O que faz com que determinados documentos necessitem de elementos de segurança? O que determin...
- São estratégias pedagógicas que auxiliam os estucantes com TDAH: Questão 7Escolha uma opção: Fazer avaliações orais e utilizar mais imagens que textos
- Captura de tela 2024-10-21 220148
- Captura de tela 2024-10-21 220313