A Linguagem HTML. HTML - HyperText Markup Language Linguagem simples baseada em hipertexto. Utiliza...
23
A Linguagem HTML
Transcript of A Linguagem HTML. HTML - HyperText Markup Language Linguagem simples baseada em hipertexto. Utiliza...
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 que aqui está escrito não aparece no browser -->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.
