Tags Html

•

UAM

5

0

5

0

Mayara Gundhner

30/08/2018

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 8 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 8 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

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação Html

281 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

<html> 
*Abertura do documento. 
 
<head> 
*Cabeçalho do documento 
Pode colocar informações como: 
*Quem é que está desenvolvendo a página. 
*Titulo dela. 
*E outras informações. 
 
<title> titulo da página </title> 
*Fica dentro da tag <head> 
 
<body> 
*Corpo do documento. 
 
<p> frase que quiser </p> 
*Essa tag é para parágrafo. 
 
<span> frase que quiser </span> 
*Essa tag faz a frase continuar na mesma linha. 
 
<hr/> 
*Não precisa ser fechada como as outras. 
*Faz uma linha horizontal.
 
TAG DE TÍTULOS 
<h1>  <h2>  <h3> <h4>  <h5>  <h6> 
*Toda vez que trabalhar com títulos usar tag que começam com a letra h. 
*Existem 6 tipos 
*Título da página fica em negrito e fonte maior. 
*Tag <h1> é o título maior que se pode declarar dentro de um documento html. 
*Depois da tag <h1> as outras tag tem tamanhos menores.
 
<center> 
*Centralizar a informação que desejar. 
Ex: centralizar título 
 <center> 
 <h1> título</h1> 
 </center>
 
<br/> 
*Quebra de linha. 
*Não precisa ser fechada como as outras. 
*Pode ser usada em qualquer lugar do texto que deseja “quebrar”. 
*Pode ser usado dentro de outras tag. 
*Pode ser usado quantas vezes quiser.
 
TAG DE LISTA 
<ul> 
*Coloca uma bolinha na frente de cada item. 
*Lista não ordenada. 
*Deve ser usada em conjunto com uma outra tag, sendo ela <li> 
 
<ol> 
* Coloca números na frente de cada item. 
*Lista ordenada. 
*Deve ser usada em conjunto com a tag <li>. 
 
<li> 
*Deve ser usada dentro da <ul> ou <ol>. 
*Essa tag deve ser usada em cada item. 
Ex: <li> item qualquer </li> 
 <li> item qualquer </li> 
*Pode ser usada outras tag dentro dela, como, <p>, <center>, <br/>, tag de títulos, 
entre outros. 
*Posso usar uma lista dentro da minha lista. 
Ex: <ul> 
  <li> texto qualquer, imagine um texto muito foda. 
  <ul> 
 <li> item qualquer </li> 
 <li> item qualquer </li> 
  </ul> 
  </li> 
 </ul> 
 
<dl> 
*Lista de definição. 
*Essa tag começa a lista. 
* Usado com as tags <dt> e <dd>. 
*Intuito… contém um item com um titulo e também com a sua descrição. 
 
<dt> 
*Título da descrição. 
*Abrir e fechar tag em cada título. 
 
<dd> 
*Usado para descrição. 
*Cada descrição tem que abrir e fechar a tag. 
 
<strog> ou <b> 
*Ambas deixam a fonte em negrito.
 
TAG DE TABELA 
*Composto de linhas e colunas! 
*Começar pela linha para especificar as colunas para ai sim colocar o conteúdo. 
 
<table> 
*Abri com a tag <table> para começar a tabela. 
*Pode por quantos atributos quiser. 
 
<thead> 
*Cabeçalho. 
*Tem que usar tag <tr>. 
* Dentro dessa tag podemos usar a tag <th> para ajudar. 
*Tag opcional. 
 
<th> 
*Deixa a letra em negrito. 
*Quando usada no cabeçalho não precisa por a tag <td>. Pois serve para fazer 
colunas. 
*Tag opcional. 
*Já centraliza. 
Ex: <thead> 
 <tr> 
 <th> palavra</th> 
 <th> palavra</th> 
 <th> palavra</th> 
 </tr> 
 
<tbody> 
*Corpo da tabela. 
*Tag opcional. 
*Colocar logo depois que acaba o cabeçalho, ou seja, depois da tag 
 </thead>. 
*Sem influência direta, mais por organização. 
 
<tr> 
*Definir uma nova linha. 
*Quanto mais linhas mais tag. 
Ex: <tr> </tr> 
 <tr> </tr> 
 <tr> </tr> 
*Dentro dela podemos especificar o número de colunas, com a tag <td>. 
*Toda linha deve ter o mesmo número de coluna. ( estética) 
 
<td> 
*Definir colunas 
*Pode por outras tag dentro como as de títulos entre outras. 
*Quanto mais colunas mais tag. 
Ex: <tr> 
 <td> </td> 
 <td> </td> 
 <td> </td> 
 </tr> 
 
TAG DE LINK 
<a> 
*Essa tag é específica para link. 
*Significa ANCHOR=ANCORA. 
*Usar atributo 
 -href(referência) 
 -target 
Ex: <a href=” link que quiser.pdf”>Baixar</a> 
*Não colocar endereço absoluto, coloque relativo 
Ex: <a href=” ./index.html”>01 Mayara</a> 
Ou seja, coloque ./  e o final do link. 
O . significa que é pra gerar o endereço relativo ao endereço base. 
 
<nav> 
*Indica que aquele grupo é uma seção de navegação. 
* Quando tem vários links de navegação seguidos.
 
TAG DE IMAGEM 
<img/> 
*Não precisa ser fechada com outra tag. 
*Colocá-la dentro de tabelas, parágrafos etc. 
*Pode incluí link a tag. 
*Usar atributo para imagem 
 - src =”” 
 -width=””(largura) 
 -height=””(altura) 
Ex: <img src=” endereço da img”/> 
 
TAG PARA FORMULÁRIOS 
*Trabalha com um conjunto agregados de tag. 
 
<form> 
*Inicia o formulário. 
*Tag tem q ser fechada. 
*Dentro dela haverá outras tags como 
<input> <> <> 
 
<textarea> 
*Campo de texto para usuário escrever mais livremente. 
*Pode se usar: 
-cols=”” 
-rows=”” 
 
<input/> 
*Campo de texto 
*Não precisa ser fechada com outra tag. 
*Usada em quase todo formulário. 
*Tem atributo como 
-type(informar algo) 
 
<label> 
*Mostra que campo é. 
*Própria para informar. 
Ex: <label>Nome</label> 
 <input type=”text”/> 
Informa para que é o campo do <input>. 
 
<select> 
*Cria uma caixa de seleção. 
*Usada em conjunto com outra tag chamada <option> cria uma caixa de seleção. 
 
<option> 
*Cria opção. 
*Usar quantas vezes quiser. 
*Usar em caixa opção. 
*Usada com a tag anterior cria uma caixa de seleção. 
Ex:<select> 
 <option>laranja<option> 
 </select> 
<iframe> 
*Não é muito utilizado e nem muito aconselhável. 
*Pode se usar o atributo src=”” para introduzir uma outra pág dentro da sua pág. 
Colocando o link. 
*Pode usar o atributo frameborder=”” para colocar uma borda envolta do link, 
como se fosse uma “caixa” 
* Pode usar os atributos width=”” e height=”” para definir a largura e altura da 
“caixa”. Se colocar 100% na width=”” será proporcional ao height=””. 
*scrolling=””  cria uma barra de rolamento. 
*marginheight=”” margem de altura em relação a borda do <iframe>. 
*marginwidth=”” margen de largura em relação a borda do <iframe>. 
*vspace=”” espaço vertical em relação ao documento html. 
*hspace=”” espaço horizontal em relação ao documento html.
 
TAG DE VÍDEO 
<video> 
*Tem início e fim. 
*Pode definir largura e altura: 
-width=”” 
-height=”” 
-controls 
 
</source> 
*Não precisar ser fechada como as outras 
*Pode colocar: 
-src=”” 
-type=”” (tipo de vídeo) 
 
<audio> 
*Pode usar: 
-controls 
-src=”” 
-type=”””
 
META TAGS 
<meta> 
*Tem como principal funcionalidade a definição de informações específicas de 
acordo com cada tag definida. 
*Utiliza-la sempre dentro da tag <head>. 
<meta charset> 
<meta name> nomear o tipo de tag que deseja estar utilizando. 
Ex: keywords que basicamente vai estar utilizando palavras chaves no qual vai estar 
relacionando a pag ou aplicativo para realizar buscas diretamente no google. 
Não entendi nada.