Carregar apresentação
A apresentação está carregando. Por favor, espere
2
HTML - HiperText Markup Language Tecnologia para Web
Prof.º Enrique Pimentel Leite de Oliveira
3
HTML É uma linguagem de marcação que utilizamos para criar páginas Web; O código-fonte é interpretado pelo browser (Internet Explorer, Netscape, etc.);
4
HTML Existem diversos programas de editoração HTML, que tornaria nosso trabalho muito mais simples, porém poderíamos nos tornar usuários desta ferramenta sem entender o que realmente estamos fazendo; Qual quer editor de textos como o bloco de notas no Windows ou o emacs no Linux, pode ser utilizado para criação de documentos html.
5
<Nome da tag> Texto </Nome da tag>
TAG (ou rótulos) São elementos HTML. Quando válidos são interpretados pelo navegador (browser); São identificadas por serem envolvidas pelos sinais < > ou </ >; O formato genérico de uma tag é: <Nome da tag> Texto </Nome da tag> Os comandos em HTML são chamados de tags, e eles irão dizer ao browser como o texto, a informação e as imagens serão exibidas. Por exemplo, uma tag pode dizer que um texto será exibido em negritoa , itálico e com um tipo de fonte qualquer. Além de formatação de texto um tag também pode dizer que na verdade um determinado pedaço do texto é um endereço para outra página Web, que será acessado ao dar um click no endereço.
6
Estrutura Básica <HTML> <HEAD> <TITLE> Título da página </TITLE> </HEAD> <BODY> Aqui você coloca os elementos HTML, seus textos e imagens. Importante, as tags HTML não são case sensitive. </BODY> </HTML> A TAG <HTML> –será colocado no início e no final do documento , delimitando a área onde serão colocados os TAGS HTML . A TAG <HEAD> - servirá para delimitar uma área de cabeçalho com poucos TAGS (não é necessário ter esse TAG para sua página funcionar) A TAG <TITLE> - servirá apenas para colocar um título que aparecerá na barra de título do seu browser. Dentro das TAGS <BODY> </BODY> serão colocados todos os comandos , textos e imagens da sua página . Será o corpo da sua página.
7
<!-- Comentário -->
Comentários Não são interpretados pelo browser; Sintaxe: <!-- Comentário --> Tudo que for escrito nesta tag não aparecerá em sua página.
8
<BODY BGCOLOR=“Cor”>Elementos</BODY>
Cor de fundo Para se colocar cor de fundo em uma página é preciso utilizar o argumento BGCOLOR juntamente com a tag BODY; Sintaxe: <BODY BGCOLOR=“Cor”>Elementos</BODY> Importante: A cor pode ser um número em RGB (#FF0000) ou um nome em Inglês (Red).
9
Cabeçalhos (Headings)
Utilizado para inserir títulos, ou seja, identificar tópicos ou seções. A letra é diferenciada do restante do texto; Sintaxe: <Hn>Texto do Cabeçalho</Hn> onde n pode variar de 1 a 6, sendo o maior cabeçalho H1 e o menor H6.
10
<P>Texto</P>
Parágrafos Uma página não reconhece o fim de um parágrafo pressionando “Enter”. Para criar parágrafos, deve-se utilizar uma tag. Sintaxe: <P>Texto</P>
11
Texto<BR>Texto
Quebra de Linha A tag <P> insere uma linha em branco imediatamente após sua especificação, em muitas situações precisaremos apenas “quebrar” a linha, continuando na linha seguinte. Sintaxe: Texto<BR>Texto
12
Estilo de Texto Negrito <B>Texto</B> Itálico
<I>Texto</I> Sublinhado <U>Texto</U> Sobrescrito <SUP>Texto</SUP> Subscrito <SUB>Texto</SUB> Espaçamento Regular <TT>Texto</TT>
13
Formatando Textos A tag FONT é utilizada com argumentos como:
FACE, definirá que tipo de fonte seu texto irá utilizar. O padrão é Times New Roman; COLOR, cor da fonte escolhida que seguirá o padrão de cores RGB ou nome da cor em inglês; SIZE, definirá qual o tamanho da fonte a ser utilizada, lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho 1 a 7. O padrão é 3.
14
Formatando Textos Sintaxe: Exemplo:
<FONT FACE=“Fonte" COLOR=“Cor" SIZE=“Tamanho"> Texto formatado </FONT> Exemplo: <FONT FACE="ARIAL" COLOR="RED" SIZE="3">
15
<LI>Texto do item</LI>
Listas Lista não-ordenada. Sintaxe: <UL> <LI>Texto do item</LI> </UL> Lista ordenada. Sintaxe: <OL> </OL>
16
Alinhamento centralizado
Centraliza um texto, uma imagem ou um elemento da página; Sintaxe: <CENTER>Essa frase está centralizada na página</CENTER>
17
<HR SIZE=8 WIDTH=70%>
Linha Horizontal São utilizadas para dar destaque a títulos ou para gerar a sensação de quebra entre um item de informação e outro; <HR> ou <HR SIZE=8 WIDTH=70%> WIDTH é a porcentagem da largura da janela do browser; SIZE número de pixels da espessura.
18
Âncoras É um ponto de referência da página que será acessado por um link; Sintaxe para criar uma âncora: <A NAME=“#nomedaâncora”>Texto para linkar</A> Sintaxe para criar um link para a âncora: <A HREF=“#nomedaâncora”>Texto usado como link</A>
19
Links Fazer uma ligação entre um texto e uma página; Sintaxe: Exemplo:
<A HREF=“ na página com link</A> Exemplo: <A HREF=“
20
<IMG SRC=“Caminho\Imagem.jpg”>
Imagens Sintaxe para inserir uma imagem na posição atual: <IMG SRC=“Caminho\Imagem.jpg”> Textos em relação à imagem: <IMG ALIGN=“top” SRC=“Caminho\Imagem.jpg”> <IMG ALIGN=“middle” SRC=“Caminho\Imagem.jpg”> <IMG ALIGN=“bottom” SRC=“Caminho\Imagem.jpg”>
21
Imagens clicáveis Sintaxe:
<A HREF=“ SRC= “Caminho\Imagem.jpg”></A>
22
Imagens como plano de fundo
Para se colocar uma imagem como plano de fundo é preciso utilizar o argumento BACKGROUND juntamente com a tag BODY; Sintaxe: <BODY BACKGROUND=“Caminho\Imagem.gif”> Elementos</BODY>
23
Tabelas Para inserir uma tabela: Para inserir uma linha:
<TABLE>Elementos</TABLE> Para inserir uma linha: <TR>Elementos</TR> Para inserir uma célula (ou coluna): <TD>Texto da célula</TD>
24
Tabelas Exemplo: <TABLE BORDER=2> <TR>
<TD>Linha1Coluna1</TD> <TD>Linha1Coluna2</TD> </TR> <TD>Linha2Coluna1</TD> <TD>Linha2Coluna2</TD> </TABLE>
25
Formulários HTML Elemento form Atributo method Atributo action input
Especifica como os dados do formulário são enviados para o Web server method = “post” Adiciona os dados do formulário na requisição do navegador method = “get” Adicona os dados do formulário diretamente no final da URL Atributo action Especifica a URL que receberá a requisição input Especifica os dados que serão fornecidos a URL contida no atributo action
26
Formulários HTML Elemento textarea Elemento checkbox Elemento select
Atributo rows Define o número de linhas Atributo cols Define o número de colunas Input “password” Insere uma caixa de texto para receber senhas Elemento checkbox Permite que usuários escolham um conjunto de opções Elemento select Insere um drop-down list
27
Formulários HTML Elemento select Elemento option
Insere um drop-down list Elemento option Adiciona itens ao the drop-down list Atributo selected Especifica qual será o item será exibido como selecionado
28
Elementos meta Especifica informações sobre um documento Atributo name
Identifica o tipo de elemento meta “keywords” ( name = “keywords” ) Fornece uma lista de palavras que descrevem a página (utilizadas por sistemas de busca) “description” ( name = “description” ) Fornece a descrição de uma site Atributo content Fornece informações para um sistema de busca catalogar as páginas <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
29
Bibliografia RAMALHO, José Antônio Alves. Iniciando em HTML. São Paulo: Makron Books, 1996. W3C - HTML 4.01 Specification:
Apresentações semelhantes
