1 / 23

A Linguagem HTML

A Linguagem HTML. HTML - HyperText Markup Language. Linguagem simples baseada em hipertexto. Utiliza marcadores ou tags. Usada para criar documentos para a Web. Tags. São marcas padrões utilizadas para dar todas as indicações necessárias ao browser. São delimitadas pelos sinais de < e >:

amiel
Download Presentation

A Linguagem HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. A Linguagem HTML

  2. HTML - HyperText Markup Language • Linguagem simples baseada em hipertexto. • Utiliza marcadores ou tags. • Usada para criar documentos para a Web.

  3. Tags • São marcas padrões utilizadas para dar todas as indicações necessárias ao browser. • São delimitadas pelos sinais de < e >: <NOMEDATAG> • Na sua maioria, são do tipo início-fim, ou seja trabalham em pares, delimitando um determinado conteúdo.

  4. Tags • A tag final é idêntica à inicial sendo precedida por uma “/”. <NOMEDATAG></NOMEDATAG>

  5. Estrutura Básica de um Documento em HTML <HTML> <BODY> Conteudo da página: textos, figuras, tabelas, … <BODY> <HTML>

  6. Estrutura Básica de um Documento em HTML • <HTML></HTML> - Indica o início e o fim do documento. • <BODY></BODY> - Indica o corpo do documento. Entre estas marcas estará contida a maior parte do conteúdo a ser apresentado, como os textos, figuras, tabelas, … • <HEAD></HEAD> - Indica o cabeçalho do documento. • <Hn> Texto </Hn> - Cria cabeçalhos com diferentes formatações (onde n vai de 1 à 6).

  7. Envio de conteúdo para o browser de modo a ser visível pelo utilizador: <HTML> <BODY> Isto é um teste </BODY> </HTML>

  8. <HTML> <HEAD> Exercício:</HEAD> <BODY> Isto é um teste </BODY> </HTML>

  9. Formatação de Texto • <FONT> - Permite mudar os parâmetros dos textos escritos. Ex: tamanho, cor e tipo de letra. <HTML> <BODY> <FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> isto é um teste </FONT> </BODY> </HTML>

  10. Formatação de Texto Alterar o estilo do texto escrito: • <I> </I> - para colocar o texto em itálico. • <B></B> - para colocar o texto em negrito. • <U></U> - para sublinhar o texto. • <S></S> - para riscar o texto. <HTML> <BODY> <I> Texto em itálico </I> <B>Texo em negrito </B> <U>Texto sublinhado </U> <S> Texto riscado </S> </BODY> </HTML>

  11. Parágrafos • <P> - Inserir um parágrafo. A tag final é opcional. <HTML> <BODY> <P><FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> isto é um teste </FONT></P> E isto já é outro teste </BODY> </HTML>

  12. Mudança de Linha • <BR> - Efectua a mudança de linha. Funciona como um “Enter” no mesmo parágrafo. Não possui tag final. <HTML> <BODY> <P><FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> isto é um teste </FONT></P> e isto <BR> já <BR> outro teste </BODY> </HTML>

  13. Linha Horizontal • <HR> - Cria uma linha horizontal. Não possui tag final.

  14. Listas • <UL> </UL> - Cria listas não ordenadas; • <OL></OL> - Cria listas ordenadas; • <LI></LI> - Cria os tópicos das listas. <HTML> <BODY> <UL> Disciplinas <LI> Português </LI> <LI> Matemática</LI> <LI> Inglês</LI> <LI> Filosofia</LI> </UL> </BODY> </HTML>

  15. Tabelas • <TABLE></TABLE> - Cria uma tabela. • <TR></TR> - Define as linhas. • <TD></TD> - Define as colunas dessa mesma linha. <HTML> <BODY> <TABLE BORDER=”1”> <TR> <TD> Esta é a primeira linha, primeira coluna </TD> <TD> Esta é a primeira linha, segunda coluna </TD> </TR> <TR> <TD> Esta é a segunda linha, primeira coluna </TD> <TD> Esta é a segunda linha, segunda coluna </TD> </TR> </TABLE> </BODY> </HTML>

  16. Comentários • <!— —> - Permite introduzir comentários no código. É muito útil, quando o código HTML é muito extenso uma vez que permite comentar o que está criado em vários pontos do script. <HTML> <BODY> <!-- isto que aqui está escrito não aparece no browser --> isto sim, já aparece no browser </BODY> </HTML>

  17. Hiperligações • <A> </A> - Cria uma hiperligação para outra página. <HTML> <BODY> <A HREF=”outrapagina.html”>Consultar outra página</A> </BODY> </HTML>

  18. Inserção de Imagem • <IMG> - Permite mostrar uma imagem no browser. <HTML> <BODY> <IMG SRC=”nomedaimagem.gif”> </BODY> </HTML> Caso a imagem esteja num directório diferente da do documento, é necessário indicar o directório através de "../nome_do_diretório". Ex: <IMG SRC="../figuras/carta.gif">

  19. Estrutura básica do HTML

  20. Formatação de Textos

  21. Listas

  22. Tabelas

  23. Outros

More Related