AES - Academia de Ensino Superior - 2005 HTML - HiperText Markup Language Tecnologia para Web...

AES - Academia de Ensino Superior - 2005

HTML - HiperText Markup HTML - HiperText Markup LanguageLanguageTecnologia para WebTecnologia para Web

HTML - HiperText Markup HTML - HiperText Markup LanguageLanguageTecnologia para WebTecnologia para Web

Prof.º Enrique Pimentel Leite de OliveiraProf.º Enrique Pimentel Leite de [email protected]@aes.edu.br

HTMLHTMLHTMLHTML

É uma linguagem de marcação que É uma linguagem de marcação que utilizamos para criar páginas Web;utilizamos para criar páginas Web;

O código-fonte é interpretado pelo O código-fonte é interpretado pelo browser (Internet Explorer, Netscape, browser (Internet Explorer, Netscape, etc.);etc.);

HTMLHTMLHTMLHTML

Existem diversos programas de Existem diversos programas de editoração HTML, que tornaria nosso editoração HTML, que tornaria nosso trabalho muito mais simples, porém trabalho muito mais simples, porém poderíamos nos tornar usuários desta poderíamos nos tornar usuários desta ferramenta sem entender o que ferramenta sem entender o que realmente estamos fazendo;realmente estamos fazendo;

Qual quer editor de textos como o bloco Qual quer editor de textos como o bloco de notas no Windows ou o emacs no de notas no Windows ou o emacs no Linux, pode ser utilizado para criação de Linux, pode ser utilizado para criação de documentos html.documentos html.

TAG (ou rótulos)TAG (ou rótulos)TAG (ou rótulos)TAG (ou rótulos)

São elementos HTML. Quando válidos são São elementos HTML. Quando válidos são interpretados pelo navegador (browser); interpretados pelo navegador (browser);

São identificadas por serem envolvidas São identificadas por serem envolvidas pelos sinais < > ou </ >;pelos sinais < > ou </ >;

O formato genérico de uma tag é: O formato genérico de uma tag é:

<Nome da tag><Nome da tag> Texto Texto </Nome da tag></Nome da tag>

Estrutura BásicaEstrutura BásicaEstrutura BásicaEstrutura Básica

<HTML> <HTML> <HEAD> <HEAD>

<TITLE> <TITLE> Título da páginaTítulo da página </TITLE> </TITLE> </HEAD> </HEAD> <BODY> <BODY>

Aqui você coloca os elementos HTML, seus Aqui você coloca os elementos HTML, seus textos e imagens. Importante, as tags HTML textos e imagens. Importante, as tags HTML não são não são case sensitive.case sensitive.

</BODY> </BODY> </HTML></HTML>

ComentáriosComentáriosComentáriosComentários

Não são interpretados pelo browser;Não são interpretados pelo browser;

Sintaxe:Sintaxe:

 -->

Tudo que for escrito nesta tag não Tudo que for escrito nesta tag não aparecerá em sua página.aparecerá em sua página.

Cor de fundoCor de fundoCor de fundoCor de fundo

Para se colocar cor de fundo em uma Para se colocar cor de fundo em uma página é preciso utilizar o argumento página é preciso utilizar o argumento BGCOLOR juntamente com a tag BODY;BGCOLOR juntamente com a tag BODY;

Sintaxe:Sintaxe:

<BODY BGCOLOR=“<BODY BGCOLOR=“CorCor”>”>ElementosElementos</BODY></BODY>

Importante:Importante: A cor pode ser um número em A cor pode ser um número em RGB (#FF0000) ou um nome em Inglês (Red).RGB (#FF0000) ou um nome em Inglês (Red).

Cabeçalhos (Headings)Cabeçalhos (Headings)Cabeçalhos (Headings)Cabeçalhos (Headings)

Utilizado para inserir títulos, ou seja, Utilizado para inserir títulos, ou seja, identificar tópicos ou seções. A letra é identificar tópicos ou seções. A letra é diferenciada do restante do texto;diferenciada do restante do texto;

Sintaxe:Sintaxe:

<Hn><Hn>Texto do CabeçalhoTexto do Cabeçalho</Hn></Hn>onde n pode variar de 1 a 6, sendo o maior onde n pode variar de 1 a 6, sendo o maior cabeçalho H1 e o menor H6.cabeçalho H1 e o menor H6.

ParágrafosParágrafosParágrafosParágrafos

Uma página não reconhece o fim de um Uma página não reconhece o fim de um parágrafo pressionando “Enter”. Para criar parágrafo pressionando “Enter”. Para criar parágrafos, deve-se utilizar uma tag.parágrafos, deve-se utilizar uma tag.

Sintaxe:Sintaxe:

<P><P>TextoTexto</P></P>

Quebra de LinhaQuebra de LinhaQuebra de LinhaQuebra de Linha

A tag <P> insere uma linha em branco A tag <P> insere uma linha em branco imediatamente após sua especificação, em imediatamente após sua especificação, em muitas situações precisaremos apenas muitas situações precisaremos apenas “quebrar” a linha, continuando na linha “quebrar” a linha, continuando na linha seguinte. seguinte.

Sintaxe:Sintaxe:

TextoTexto<BR><BR>TextoTexto

Estilo de TextoEstilo de TextoEstilo de TextoEstilo de Texto

NegritoNegrito

<B><B>TextoTexto</B></B>

ItálicoItálico

<I><I>TextoTexto</I></I>

SublinhadoSublinhado

<U><U>TextoTexto</U></U>

SobrescritoSobrescrito

<SUP><SUP>TextoTexto</SUP></SUP>

SubscritoSubscrito

<SUB><SUB>TextoTexto</SUB></SUB>

Espaçamento Espaçamento RegularRegular

<TT><TT>TextoTexto</TT></TT>

Formatando TextosFormatando TextosFormatando TextosFormatando Textos

A tag FONT é utilizada com argumentos A tag FONT é utilizada com argumentos como:como:

FACE, definirá que tipo de fonte seu texto irá FACE, definirá que tipo de fonte seu texto irá utilizar. O padrão é Times New Roman;utilizar. O padrão é Times New Roman;

COLOR, cor da fonte escolhida que seguirá o COLOR, cor da fonte escolhida que seguirá o padrão de cores RGB ou nome da cor em padrão de cores RGB ou nome da cor em inglês;inglês;

SIZE, definirá qual o tamanho da fonte a ser SIZE, definirá qual o tamanho da fonte a ser utilizada, lembrando que deveremos seguir o utilizada, lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho padrão de hipertexto e usar fontes de tamanho 1 a 7. O padrão é 3.1 a 7. O padrão é 3.

Formatando TextosFormatando TextosFormatando TextosFormatando Textos

Sintaxe:Sintaxe:

<FONT FACE<FONT FACE=“Fonte"=“Fonte" COLOR=“ COLOR=“CorCor" SIZE" SIZE=“Tamanho"=“Tamanho">>

Texto formatado Texto formatado </FONT> </FONT>

Exemplo:Exemplo:<FONT FACE="ARIAL" COLOR="RED" SIZE="3<FONT FACE="ARIAL" COLOR="RED" SIZE="3"">>

Texto formatado Texto formatado </FONT> </FONT>

ListasListasListasListas

Lista não-ordenada. Sintaxe:Lista não-ordenada. Sintaxe:<UL><UL>

<LI><LI>Texto do itemTexto do item</LI></LI>


</UL></UL>

Lista ordenada. Sintaxe:Lista ordenada. Sintaxe:<OL><OL>



</OL></OL>

Alinhamento Alinhamento centralizadocentralizadoAlinhamento Alinhamento centralizadocentralizado

Centraliza um texto, uma imagem ou um Centraliza um texto, uma imagem ou um elemento da página;elemento da página;

Sintaxe:Sintaxe:

<CENTER><CENTER>Essa frase está centralizada na páginaEssa frase está centralizada na página</CENTER> </CENTER>

Linha HorizontalLinha HorizontalLinha HorizontalLinha Horizontal

São utilizadas para dar destaque a títulos São utilizadas para dar destaque a títulos ou para gerar a sensação de quebra entre ou para gerar a sensação de quebra entre um item de informação e outro;um item de informação e outro;

<HR> <HR>

ouou

<HR SIZE=8 WIDTH=70%> <HR SIZE=8 WIDTH=70%>

WIDTH é a porcentagem da largura da WIDTH é a porcentagem da largura da janela do browser;janela do browser;

SIZE número de pixels da espessura.SIZE número de pixels da espessura.

ÂncorasÂncorasÂncorasÂncoras

É um ponto de referência da página que É um ponto de referência da página que será acessado por um link;será acessado por um link;

Sintaxe para criar uma âncora:Sintaxe para criar uma âncora:

<A NAME=“#<A NAME=“#nomedaâncoranomedaâncora”>”>Texto para linkarTexto para linkar</A></A>

Sintaxe para criar um link para a âncora:Sintaxe para criar um link para a âncora:

<A HREF=“#<A HREF=“#nomedaâncoranomedaâncora”>”>Texto usado como linkTexto usado como link</A></A>

LinksLinksLinksLinks

Fazer uma ligação entre um texto e uma Fazer uma ligação entre um texto e uma página;página;

Sintaxe:Sintaxe:

<A HREF=“http://<A HREF=“http://endereçoendereço”>”>Texto na página com linkTexto na página com link</A></A>

Exemplo:Exemplo:<A HREF=“http://<A HREF=“http://www.aes.edu.brwww.aes.edu.br”>”>AESAES</A></A>

ImagensImagensImagensImagens

Sintaxe para inserir uma imagem na Sintaxe para inserir uma imagem na posição atual:posição atual:

<IMG SRC=“<IMG SRC=“Caminho\Imagem.jpgCaminho\Imagem.jpg”>”>

Textos em relação à imagem:Textos em relação à imagem:

<IMG ALIGN=“top” SRC=“<IMG ALIGN=“top” SRC=“Caminho\Imagem.jpgCaminho\Imagem.jpg”>”>

<IMG ALIGN=“middle” SRC=“<IMG ALIGN=“middle” SRC=“Caminho\Imagem.jpgCaminho\Imagem.jpg”>”>

<IMG ALIGN=“bottom” SRC=“<IMG ALIGN=“bottom” SRC=“Caminho\Imagem.jpgCaminho\Imagem.jpg”>”>

Imagens clicáveisImagens clicáveisImagens clicáveisImagens clicáveis

Sintaxe:Sintaxe:

<A HREF=“http://<A HREF=“http://endereçoendereço”><IMG SRC= “”><IMG SRC= “Caminho\Caminho\Imagem.jpgImagem.jpg”></A> ”></A>

Imagens como plano de Imagens como plano de fundofundoImagens como plano de Imagens como plano de fundofundo

Para se colocar uma imagem como plano Para se colocar uma imagem como plano de fundo é preciso utilizar o argumento de fundo é preciso utilizar o argumento BACKGROUND juntamente com a tag BACKGROUND juntamente com a tag BODY;BODY;

Sintaxe:Sintaxe:

<BODY BACKGROUND=“<BODY BACKGROUND=“Caminho\Imagem.gifCaminho\Imagem.gif”> ”> ElementosElementos</BODY></BODY>

TabelasTabelasTabelasTabelas

Para inserir uma tabela:Para inserir uma tabela:<TABLE<TABLE>Elementos</>Elementos</TABLE>TABLE>

Para inserir uma linha:Para inserir uma linha:<TR><TR>ElementosElementos</TR> </TR>

Para inserir uma célula (ou coluna):Para inserir uma célula (ou coluna):<TD><TD>Texto da célulaTexto da célula</TD></TD>

TabelasTabelasTabelasTabelas

Exemplo:Exemplo:<TABLE BORDER=2> <TABLE BORDER=2>

<TR><TR>

<TD><TD>Linha1Coluna1Linha1Coluna1</TD></TD>


</TR> </TR>

<TR> <TR>



<TR> <TR>

</TABLE></TABLE>

Formulários HTMLFormulários HTMLFormulários HTMLFormulários HTML

Elemento formElemento formAtributo Atributo methodmethod

Especifica como os dados do formulário são enviados Especifica como os dados do formulário são enviados para o Web serverpara o Web server

method = method = ““postpost””Adiciona os dados do formulário na requisição do Adiciona os dados do formulário na requisição do navegadornavegador

method = method = ““getget””Adicona os dados do formulário diretamente no final da Adicona os dados do formulário diretamente no final da URLURL

Atributo Atributo actionactionEspecifica a URL que receberá a requisiçãoEspecifica a URL que receberá a requisição

inputinputEspecifica os dados que serão fornecidos a URL Especifica os dados que serão fornecidos a URL contida no atributo actioncontida no atributo action


Elemento Elemento textareatextarea

Atributo Atributo rowsrowsDefine o número de linhasDefine o número de linhas

Atributo Atributo colscolsDefine o número de colunasDefine o número de colunas

Input “Input “passwordpassword””Insere uma caixa de texto para receber senhasInsere uma caixa de texto para receber senhas

Elemento Elemento checkboxcheckboxPermite que usuários escolham um conjunto de Permite que usuários escolham um conjunto de opçõesopções

Elemento Elemento selectselect

Insere um drop-down listInsere um drop-down list


Elemento Elemento selectselect

Insere um drop-down listInsere um drop-down list

Elemento Elemento optionoption

Adiciona itens ao the drop-down listAdiciona itens ao the drop-down list

Atributo Atributo selectedselectedEspecifica qual será o item será exibido como Especifica qual será o item será exibido como selecionadoselecionado

Elementos metaElementos metaElementos metaElementos meta

Especifica informações sobre um Especifica informações sobre um documentodocumento

Atributo Atributo namenameIdentifica o tipo de elemento metaIdentifica o tipo de elemento meta““keywordskeywords” ( ” ( name =name = “ “keywordskeywords” )” )

Fornece uma lista de palavras que descrevem a Fornece uma lista de palavras que descrevem a página (utilizadas por sistemas de busca)página (utilizadas por sistemas de busca)

““descriptiondescription” ( ” ( name = name = ““descriptiondescription” )” )Fornece a descrição de uma siteFornece a descrição de uma site

Atributo Atributo contentcontentFornece informações para um sistema de Fornece informações para um sistema de busca catalogar as páginasbusca catalogar as páginas

<meta http-equiv="Content-Type" <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />content="text/html; charset=utf-8" />

BibliografiaBibliografiaBibliografiaBibliografia

RAMALHO, José Antônio Alves. RAMALHO, José Antônio Alves. Iniciando em HTML. São Paulo: Iniciando em HTML. São Paulo: Makron Books, 1996.Makron Books, 1996.

W3C - HTML 4.01 Specification: W3C - HTML 4.01 Specification: http://www.w3.org/TR/1999/REC-http://www.w3.org/TR/1999/REC-html401-19991224/cover.html#minithtml401-19991224/cover.html#minitococ

AES - Academia de Ensino Superior - 2005 HTML - HiperText Markup Language Tecnologia para Web...

Documents

Transcript of AES - Academia de Ensino Superior - 2005 HTML - HiperText Markup Language Tecnologia para Web...