280 likes | 465 Views
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 >:
E N D
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 >: <NOMEDATAG> • Na sua maioria, são do tipo início-fim, ou seja trabalham em pares, delimitando um determinado conteúdo.
Tags • A tag final é idêntica à inicial sendo precedida por uma “/”. <NOMEDATAG></NOMEDATAG>
Estrutura Básica de um Documento em HTML <HTML> <BODY> Conteudo da página: textos, figuras, tabelas, … <BODY> <HTML>
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).
Envio de conteúdo para o browser de modo a ser visível pelo utilizador: <HTML> <BODY> Isto é um teste </BODY> </HTML>
<HTML> <HEAD> Exercício:</HEAD> <BODY> Isto é um teste </BODY> </HTML>
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>
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>
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>
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>
Linha Horizontal • <HR> - Cria uma linha horizontal. Não possui tag final.
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>
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>
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>
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>
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">