1_tags_visao_geral

•

IFMG

Ana Paula

20/03/2020

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 7 páginas

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes

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

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 7 páginas

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

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Construção de Páginas para Web

101 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Instituto Federal do Sudeste de Minas Gerais, Câmpus Barbacena
Curso Superior de Tecnologia em Sistemas para Internet
Professor: Rafael José de Alencar Almeida
Disciplina: Desenvolvimento de Páginas Web
Assunto: Visão geral das tags HTML
Referência: http://www.w3.org/TR/html5
ESTRUTURA BÁSICA
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>Página básica</title> 
 </head> 
 <body> 
 <!-- Conteúdo visível da página --> 
 </body> 
</html> 
META TAGS
• Fornecem metadados sobre a página, que não são exibidos no seu conteúdo visual. Utilizadas
principalmente pelos mecanismos de busca.
• Devem ser inseridas no cabeçalho da página <head>. Exemplos:
<meta name="author" content="Nome do Autor" /> 
<meta name="description" content="Descrição do site" /> 
<meta name="keywords" content="web, sites, html, css" /> 
<meta name="robots" content="index,follow" /> 
<meta name="robots" content="noindex,nofollow" />
FAVICON (favorite icon)
• Ícone associado a um site, tanto na sua aba quanto em listas de histórico e favoritos do navegador.
• Incrementa a acessibilidade do site, pois facilita sua identificação visual.
• Deve ser inserido no cabeçalho <head>, de preferência na extensão .ico, para manter
compatibilidade com o navegador Internet Explorer.
<link rel="shortcut icon" href="imagem.ico" />
• Ferramenta online para auxiliar na produção de favicons: http://www.favicon.cc/
TAGS (etiquetas) 
• Podem ocorrer em pares: <p>Parágrafo</p> ou individualmente: <img /> 
• São incrementadas por meio de atributos: <img src="imagem.jpg" /> 
• Comentário:
 <!-- Não aparece na página, apesar de ter um custo de carregamento -->
http://www.w3.org/TR/html5/
http://www.favicon.cc/
TAGS SEMÂNTICAS DA HTML5
HTML 5 – Mudanças na estrutura e semântica: http://tableless.com.br/html5-estrutura-semantica/
http://tableless.com.br/html5-estrutura-semantica/
QUEBRA DE LINHA - <br /> 
• Usada para separar dados que fazem parte de uma mesmo conteúdo, como um endereço:
<p>Rua Monsenhor José Augusto, nº 204<br />
Bairro São José<br />
Barbacena - MG</p>
CABEÇALHOS - <h1> até <h6> 
• <h1> é o mais importante e destacado (semântico) .
• Os cabeçalhos sempre forçam quebra de linha! 
PARÁGRAFO - <p> 
• Como nos parágrafos em livros, força a quebra de linha também! 
SEÇÃO - <div> 
• Usada para envolver seções lógicas do documento HTML. 
• Força a quebra de linha! 
• Útil para aplicar seletores CSS/JS em trechos do HTML. 
 SPAN - <span> 
• Permite envolver um texto ser realizar quebra de linha. 
• Útil para aplicar seletores CSS/JS em trechos de um texto. 
LISTAS 
Não-ordenadas: 
<ul> 
 <li>C</li> 
 <li>C++</li> 
 <li>Java</li> 
</ul> 
Ordenadas: 
<ol> 
 <li>C</li> 
 <li>C++</li> 
 <li>Java</li> 
</ol> 
Podemos ter listas dentro de listas! 
<ol> 
 <li>Tópico 1</li> 
 <li>Tópico 1 
 <ul> 
 <li>Item A</li> 
 <li>Item B</li> 
 </ul>
 </li>
</ol> 
QUEBRA TEMÁTICA - <hr/> 
<div>
 Conteúdo 1
</div>
<hr /> <!-- Traça uma linha separadora -->
<div>
 Conteúdo 2
</div>
ÊNFASE E "FORÇA" DO TEXTO - <em> e <strong> 
• <em> é usado para dar ênfase semântica a um texto, geralmente sendo renderizado como
itálico .
• <strong> é usado para dar destaque semântico forte a um texto, geralmente sendo renderizado
como negrito.
• <b> não deve ser usado para negrito no HTML5, pois isso é tarefa do CSS.
• <i> não deve ser usado para itálico no HTML5, pois isso é tarefa do CSS.
IMAGENS - <img> 
• Permite inserir imagens na página. 
• Atributos principais: 
<img src="caminho_da_imagem"
 alt="Texto alternativo caso não seja possível visualizar a imagem" 
 title="Texto geralmente é exibido quando o mouse é posicionado sobre ela"
 width="250px" 
 height="200px" />
• O texto alternativo tem função de acessibilidade, e deve descrever corretamente a imagem. Usar
alt="imagem" não adianta nada!
• Não se deve redimensionar uma imagem via HTML! Usar width e height com o tamanho exato
da imagem para o navegador saber quanto espaço reservar na renderização, antes mesmo de
obter a imagem.
LINKS - <a> 
• Permite referenciar outros recursos na Web (outra página, outro site, uma imagem, um PDF, etc.).
Estrutura básica: 
<a href="endereço_do_recurso" target="_blank ou _self">elemento</a>
• _blank: abre o link em outra aba.
• _self: abre o link na mesma aba.
• Será exibido como link o elemento que fica entre o fechamento e a abertura da tag.
• Em links para endereços de e-mail, deve-se usar mailto: 
<a href="mailto:email@gmail.com">contato</a> <!-- Cuidado com o spam! -->
• Transformando uma imagem em link: 
<a href="http://www.google.com">
<img src="google.png" alt="Logotipo do Google" />
</a> 
TABELAS - <tr>, <th> e <td> 
<table> <!-- A borda é tarefa do CSS --> 
 <tr> <!-- linha da tabela --> 
 <th>Matéria</th> <!-- coluna (cabeçalho) --> 
 <th>Nota</th> <!-- coluna (cabeçalho) --> 
 </tr> 
 <tr> <!-- linha da tabela --> 
 <td>Java</td> <!-- coluna --> 
 <td>80</td> <!-- coluna --> 
 </tr> 
 <tr> 
 <td>Redes</td> 
 <td>65</td> 
 </tr> 
</table> 
• Tabelas servem apenas para exibir dados tabulares!
• Nunca usar tabelas para definir layout e posicionamento!
• Tabelas semânticas: http://tableless.com.br/tabelas-semanticas/
http://tableless.com.br/tabelas-semanticas/
http://www.google.com/
mailto:email@gmail.com
FORMULÁRIOS E CAMPOS
• Permite que usuários enviem dados para o servidor.
<form method="POST" action="processa_dados.php"> 
 <label for="nome">Nome:</label> 
 <input type="text" id="nome" name="nome"
 placeholder="Nome de usuário" /> 
 <label>
 Senha:<input type="password" id="senha" name="senha" /> 
 </label>
 <p> 
 <input type="checkbox" id="ativo" name="ativo" value="ativo" /> 
 <label for="ativo">Manter login ativo</label> 
 </p> 
 <p> 
 <input type="radio" name="tipo_pessoa" id="aluno" value="A" /> 
 <label for="aluno">aluno</label> 
 <input type="radio" name="tipo_pessoa" id="professor" value="P" /> 
 <label for="professor">professor</label> 
 </p> 
 <p> 
 <label for="campus">Câmpus:</label> 
 <select id="campus" name="campus"> 
 <option value="RT">Reitoria</option> 
 <option value="BQ" selected="selected">Barbacena</option> 
 <option value="RP">Rio Pomba</option> 
 </select> 
 </p> 
 <label for="turno">Turno(s):</label> 
 <p> 
 <select id="turno" multiple="multiple"> 
 <option value="M">Manhã</option> 
 <option value="T">Tarde</option> 
 <option value="N">Noite</option> 
 </select> 
 </p> 
 <label for="msg">Mensagem complementar:</label> 
 <p> 
 <textarea id="msg" name="msg">Exemplo</textarea> 
 </p> 
 <input type="submit" value="Enviar" /> 
</form>
• O atributo method define qual método HTTP será usado no envio dos dados. GET envia os dados
codificados na própria URL (www.site.com/pesquisa.php?termo=carros&ano=2010), e
POST usa o cabeçalho HTTP da requisição.
• O atributo action define qual página irá receber os dados do formulário.
• A tag label é opcional, mas é muito importante para a acessibilidade e usabilidade do formulário.
• Observe que o atributo type permite transformar a tag input em diferentes campos de formulário!
• Para que inputs do tipo radio sejam mutuamente exclusivos, eles devem possuir valores idênticos
no atributo name.
• A evolução dos formulários em HTML 5: http://minim.in/2RU
http://minim.in/2RU