A Linguagem HTML

HTML - HyperText HTML - HyperText Markup LanguageMarkup Language

Linguagem simples baseada em hipertexto.

Utiliza marcadores ou tags. Usada para criar documentos para a

Web.

TagsTags

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.

TagsTags

A tag final é idêntica à inicial sendo precedida por uma “/”.

<NOMEDATAG></NOMEDATAG>

Estrutura Básica de um Estrutura Básica de um Documento em HTMLDocumento em HTML

<HTML><BODY>

Conteudo da página: textos, figuras, tabelas, …

<BODY> <HTML>

Estrutura Básica de um Estrutura Básica de um Documento em HTMLDocumento 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>

<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 TextoFormatação de Texto

Formatação de TextoFormatação de TextoAlterar 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ágrafosPará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 LinhaMudanç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 HorizontalLinha Horizontal

<HR> - Cria uma linha horizontal.<HR> - Cria uma linha horizontal.Não possui tag finalNão possui tag final..

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

TabelasTabelas <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áriosComentá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 sim, já aparece no browser

</BODY></HTML>

HiperligaçõesHiperligaçõ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 ImagemInserçã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">

Estrutura básica do Estrutura básica do HTMLHTML

<HTML></HTML>

Inicializa/finaliza uma página.

<HEAD></HEAD>

Inicializa/finaliza o cabeçalho.

<TITLE> </TITLE>

Define o título da sua página na barra de título do Browser.

<BODY></BODY>

Inicializa/finaliza o corpo da página.

<P> Define o início do parágrafo. Pode ou não ter par com </P> (é opcional).

Formatação de TextosFormatação de Textos

<Hn> Texto </Hn>

Cria cabeçalhos com diferentes formatações (onde n vai de 1 à 6).

<BR> Realiza a quebra de linha.

<HR> Cria uma linha horizontal.

<B> Texto </B> Texto em negrito.

<I> Texto </I> Texto em itálico.

<U> Texto </U> Texto sublinhado.

<S> Texto </S> Texto riscado.

ListasListas

<UL> </UL> Cria listas não ordenadas.

<OL> </OL> Cria listas ordenadas.

<LI> </LI> Cria os tópicos das listas.

TabelasTabelas

<TABLE <TABLE border=“1”> border=“1”> </TABLE></TABLE>

Cria uma tabela.Cria uma tabela.

<TR> </TR><TR> </TR> Define as linhas.Define as linhas.

<TD> </TD><TD> </TD> Define as colunas.Define as colunas.

OutrosOutros

<IMG <IMG src=“../figuras/carta.gisrc=“../figuras/carta.gif”>f”>

Insere uma imagem. Insere uma imagem. Não possui tag Não possui tag final.final.

<A> </A><A> </A> Insere uma Insere uma hiperligação.hiperligação.

<!– Isto é um <!– Isto é um comentário-->comentário-->

Insere um Insere um comentário.comentário.

A Linguagem HTML

Documents

Transcript of A Linguagem HTML