A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

HTML - HiperText Markup Language Tecnologia para Web

Apresentações semelhantes


Apresentação em tema: "HTML - HiperText Markup Language Tecnologia para Web"— Transcrição da apresentação:

1

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=“http://endereço”>Texto na página com link</A> Exemplo: <A HREF=“http://www.aes.edu.br”>AES</A>

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=“http://endereço”><IMG 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:

30


Carregar ppt "HTML - HiperText Markup Language Tecnologia para Web"

Apresentações semelhantes


Anúncios Google