HTML Cheat Sheet New

{ H T M L C H E A T S H E E T}
M ICHELLE C RISTINA DE S OUSA B ALTAZAR

(U NIVERSIDADE F EDERAL DO T RIÂNGULO M INEIRO )
I NTRODUÇÃO AO HTML: I NSERÇÃO DE E LEMENTOS D IVERSOS C OMANDOS D IVERSOS C OMANDOS

- O que é HTML? - Imagens - Links: - Fonte:
HTML e uma abreviação para Hyper Text Markup Para inserir imagens utilizamos a tag img: Uma das tags mais importantes é a href que A tab font define a formatação da fonte. Atual-
Language. É uma linguagem utilizada pra criação <img src=”foto.png”> permite criar um hiperlink referenciando um outro mente tem sido substituída pela utilização de CSS.
de páginas que serão "interpretadas"no navega- elemento (site, imagem, página, etc.)
dor do usuário. A estrutura básica mínima para Podemos ainda acrescentar um texto alterna- <font size=”3” color=”red”>Hello World</font>
criação de uma página é a seguinte: tivo, para o caso do arquivo não carregar e um Link para outra página: <font face="verdana"color="green»
título para a foto: <a href=”pagina2.html”>Página 2</a>
<!DOCTYPE html> <img src=”foto.png” alt=”Texto” title=”Foto”>
<html> Link para um marcador na mesma página: -CSS:
<head> Também podemos definir o tamanho de apresen- <a href=”#paragrafo3”>Ir para o parágrafo 3</a> CSS, do original Cascading Style Sheets é um
<title>Primeira Webpage</title> tação da imagem usando: arquivo que determina como os elementos serão
</head> style=”width:304px; height:228px;” Usando uma imagem como link: mostrados na tela, no papel ou em qualquer outra
<body> media.
<a href=”pag2.html”><img src=”botao.jpg”></a>
<p>Hello, world!</p> Podemos ainda definir uma posição absoluta É utilizado para uniformizar um determinado
</body> em relação à página: estilo em todo o documento HTML. Exemplo:
Link para enviar um e-mail:
</html> style=”position:absolute; top:15px; left:15px;”
<a href=”mailto:email@gmail.com”>Contato</a> body background-color: powderblue;
A estrutura funciona com o formato: Lembrando que as imagem devem ficar na h1 color: blue;
- Alinhamento: p color: red;
<abre>conteúdo</fecha> mesma pasta onde o arquivo HTML se encontra
O alinhamento pode ser fácilmente obtido utili-
ou devemos utilizar o ”endereço” completo do
zando uma destas opções: Outra opção seria:
HTML é formado por TAGs e cada declara- arquivo online para referenciar a imagem.
ção aberta deverá ter sua contrapartida fechando body background-image: url(fundo.jpg);
<div align=”center”>teste centro</div>
e o efeito desejado será aplicado sobre o conteúdo - Tabelas
<div align=”left”>teste esquerdo</div> Que neste caso preenche a página com uma ima-
que estiver entre a declaração. As tabelas devem ser ”desenhadas” indicando-se
<div align=”right”>teste direito</div> gem de fundo previamente escolhido.
doctype - Define o tipo de documento. as linhas e colunas:
html - Delimita todo o conteúdo da página.
A tag div define uma seção em um documento. - Boas Práticas:
Head - Delimita as definições para o corpo do <table border=”1”>
Mas também podemos inserir as opções de
arquivo HTML. <tr> Uso de Indentação ou Recuos:
alinhamento em diversos outros elementos:
body - Delimita o conteúdo do site. <th>cabeçalho1</th> A indentação no HTML não é obrigatória, porém
<p align=”center”>teste centro</center>
<th>cabeçalho2</th> é sempre recomendável a fim de melhorar a
<img src=”foto.png” align=”right”>
- Títulos e Parágrafos: </tr> organização e visualização do código fonte.
<h1 align=”left”>Título Legal</h1>
Existem 6 níveis de títulos já pré-definidos: <tr>
<h1>Título de nível 1</h1> <td>linha1, célula1</td> Inserção de comentários:
- Listas:
<h2>Título de nível 2</h2> <td>linha1, célula2</td> A utilização de comentários é útil para deixar
Para listas, eu uso as tags de início e fim e no meio
... </tr> o código fonte mais facilmente localizável e
vão os tens da lista (li):
<h6>Título de nível 6</h6> <tr> identificável.
<ul>
<td>linha2, célula1</td> Também podemos utilizá-los de forma instrutiva,
<li>isto é uma lista</li>
Parágrafos de texto são gerados na HTML por <td>linha2, célula2</td> explicando as ações tomadas e a forma de utiliza-
<li>usando pontos</li>
meio das tags: </tr> ção.
</ul>
<p>Primeiro parágrafo do texto.</p> </table>
<p>Segundo parágrafo do texto.</p> Retornaria: <!– este é um comentário –>
Obteremos o resultado: <!————————–>
Podemos também simplesmente digitar o texto e • isto é uma lista <!–Tabela inicia aqui——>
apenas usar a tag única <br> para quebrar a linha: cabeçalho1 cabeçalho2
• usando pontos
Primeira linha do texto.<br> linha1, célula1 linha1, célula2
Segunda linha do texto.<br> linha2, célula1 linha2, célula2 Também podemos utilizar a tag <ol> para lista
numerada.

HTML Cheat Sheet New

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Cheat Sheet New

Caricato da

Copyright:

Formati disponibili

{ H T M L C H E A T S H E E T}

M ICHELLE C RISTINA DE S OUSA B ALTAZAR

I NTRODUÇÃO AO HTML: I NSERÇÃO DE E LEMENTOS D IVERSOS C OMANDOS D IVERSOS C OMANDOS

Potrebbero piacerti anche