curso html

Transcrição

curso html

CURSO HTML
www.regilan.com
Parte 1: Introdução ao desenvolvimento WEB
Olá amigos visitantes,
O objetivo deste mini-curso é fornecer os conhecimentos básicos que
permitirão construir um web site. Como partiremos do zero esse curso
não requer qualquer conhecimento prévio de programação.
É bom deixar claro que não ensinaremos tudo, dessa forma é necessário
que você se empenhe, pratique e pesquise sobre os conhecimentos
abordados.
Além do C# e do HTML que começamos a estudar, outros cursos virão
em breve como: Lógica de Programação, SQL, Visual Basic.Net,
ASP.NET, UML, entre outros. É bom lembrar que o curso será feito de
forma incremental no qual a cada semana teremos um novo capitulo do
curso, por isso não deixe de visitar o nosso site para dar continuidade
aos estudos.
Desejo mais uma vez boa sorte a todos que começarão junto comigo
essa jornada!
Prof. Regilan Meira
Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB
Conceitos Básicos
A Internet é um conjunto de redes formado por milhões de computadores em todo o mundo
que permite o acesso a informações e todo tipo de transferência de dados. Alguns dos serviços
disponíveis na Internet, além da Web, são o acesso remoto a outras máquinas (Telnet e SSH),
transferência dearquivos (FTP), correio eletrônico (e-mail normalmente através dos protocolos
POP3 e SMTP), boletins eletrônicos (news ou grupos de notícias), bate-papo online (chat),
mensagens
instantâneas
(ICQ,
YIM,
Jabber,
Messenger,
Blogs),
fóruns,
comunidades
virtuais(Orkut,myspace), blogs, vídeos(you tube), etc.
A World Wide Web, ou "WWW" é uma rede de computadores na Internet que fornece
informação em forma de hipertexto. A HTML utiliza o conceito de hipertexto através de uma
linguagem de marcação usada para documentos da www. HTML foi inventado em 1990 por um
cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca
de informações e de documentação de pesquisas, entre cientistas de diferentes universidades.
HTML é uma linguagem que possibilita apresentar informações na Internet. Quando abrimos uma
página na Internet, o que o navegador (browser) faz é interpretar o código HTML e apresentar
ao usuário.
Agora que sabemos o que é HTML, vamos construir nossos websites. Um site ou Web site é
um conjunto de páginas Web acessível geralmente pelo protocolo HTTP1 na Internet. O conjunto
de todos os sites públicos existentes compõe a World Wide Web.
No nosso curso não utilizaremos de softwares voltados para o desenvolvimento de sites
como o Adobe Dreamweaver ou Microsoft FrontPage. Precisaremos apenas de um simples editor
de textos como o bloco de notas e de um navegador para testar os exemplos.
Criando a Estrutura do Site
O primeiro passo para a construção de um site é a criação da estrutura de pastas e
arquivos que serão posteriormente publicados na internet. É recomendável que esta estrutura seja
a mais clara possível para a organização dos arquivos dentro do site.
Dessa forma crie uma pasta em seu computador onde será criada as será criada as pastas
internas do site e os arquivos html. Crie as seguintes pastas: arquivos, imagens, multimidia, e
1 HTTP significa HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto) e é o
protocolo utilizado por clientes e servidores para transferência de dados hipermídia (imagens,
sons e textos) na World Wide Web.
Página 2
demais pastas necessárias de acordo com a sua necessidade. Cada pasta terá uma função
determinada:
1. A pasta arquivo será o local onde será salvo todos os arquivos não web, ou seja,
arquivos .doc, .psd, .png, .txt, .tif, .cdr, etc. Estes arquivos permanecerão na pasta projeto como
fonte original dos arquivos que foram trabalhadas para web e esta pasta não será publicada.
(atenção esta é um pasta muito pesada pois guarda arquivos de pesados).
2. A pasta imagens será utilizada para guardar os arquivos .jpg e .gif.
3. Dentro da pasta multimídia serão salvos os arquivos som e vídeo.
É importante também que no diretório projeto exista um arquivo que será o responsável
pela entrada no site. O padrão é utilizar o nome index.html.
Publicação do Site
Para publicar seu site você vai precisar de um programa de FTP (File Transfer Protocol)
para executar a tranferência de arquivos do seu micro para o servidor onde seu site ficará
hospedado. Os programas de FTP mais conhecidos são:
WS_FTP.
Filezilla.
CuteFTP, etc.
Um projeto para WEB deve passar pelas seguintes etapas: Criação de uma estrutura de
site com pastas e arquivos, depois do site pronto, deve ser feito o registro do domínio e a
obtenção junto ao provedor de hospedagem da conta de FTP para publicação do site na web. A
partir desse momento o site está disponível para consulta dos usuários da internet.
Tags HTML
Tags são rótulos usados para informar ao navegador como deve ser apresentado o
website. Todas as tags HTML possuem o mesmo formato: começam com um sinal de menor "<" e
acabam com um sinal de maior ">".
Existem dois tipos de tags: tags de abertura: <comando> e tags de fechamento:
</comando>. Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será
processado segundo o comando contido na tag. Existem algumas tags onde a abertura e o
fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo
Página 3
para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é
conseguido com a tag <br />.
Uma tag (marca) de html possui a seguinte estrutura de sintaxe:
<Nome da tag {atributo1="valor" atributo2="valor" ...}> Conteúdo </Nomeda tag>
O texto dentro dos tags não é “Case Sensitive”, ou seja, não faz diferença entre
maiúsculas e minúsculas. Além disso, não se devem usar espaços em branco dentro dos tags, exceto
para se separar o nome de um tag de um nome de um atributo, ou ainda entre os atributos.
Nome do tag = texto entre < e > que define o tag do html.
Atributo = alguns tags da html permitem e/ou exigem que atributos. Os atributos pode ou
não estabelecer um valor para a sua função, que sempre deve estar entre aspas.
Conteúdo = ë tudo que pode ou será modificado por um tag. Basicamente o conteúdo
constituído de texto ou imagem.
Fechamento do tag = texto entre </ e > que define um tag de fechamento.
Todo documento html deve possuir um cabeçalho <HEAD> </HEAD> e um corpo
<BODY> </BODY>, que por sua vez devem estar delimitados respectivamente pelos tags
<HTML> e </HTML>.
<HTML>
<HEAD>
<TITLE> Título do documento </TITLE>
</HEAD>
<BODY>
Conteúdo que deve ser inserido no documento...
</BODY>
</HTML
O navegador lê HTML de cima para baixo e da esquerda para a direita. Assim um
documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina
com a última coisa a aparecer.
A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem
HTML. Isto é feito com a tag <html>. Então, antes de mais nada digite "<html>" na primeira
linha do documento, no Notepad.
Página 4
Como sabemos, <html> é uma tag de abertura e deve ser fechada com a tag de
fechamento quando você acabar de digitar seu documento HTML. Para termos certeza que não
iremos esquecer de fechar a tag HTML, faça isso agora mesmo, digitando "</html>" localizada
a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas <html> e
</html>.
A próxima coisa que o documento precisa é um "head" (cabeçalho), que fornece
informações sobre o documento e um "body" (corpo), que abriga o conteúdo do documento.
Resumindo, nosso documento HTML é composto de duas partes: um head e um body. Na
seção head você escreve informações sobre a página e na seção body você coloca as
informações que constituem a página. Por exemplo, para dar um título ao documento, título este
que apareça no topo da barra do navegador você deverá usar a seção "head". A tag para
acresentar um título é <title>. Veja o exemplo agora com a tag <title>
<HTML>
<HEAD>
<TITLE> Primeira página HTML </TITLE>
</HEAD>
<BODY>
Olá Mundo!!! Essa é minha primeira página feita em HTML.
</BODY>
</HTML
Agora que terminamos de construir nosso primeiro website, basta salvar nosso arquivo no
HD e testar seu funcionamento no navegador.
Se você escreveu esse código HTML no bloco de notas, vá até o menu "Arquivo" no topo
da janela e escolha a opção "Salvar como...".
Escolha "Todos os arquivos" na caixa "Salvar como tipo". Isto é muito importante - caso
você não faça isto, o arquivo será salvo como texto e não como documento HTML.
Salve seu documento com o nome "exemplo1.html" (a extensão ".html" indica que se trata
de um documento HTML). Você pode salvar o documento onde você quiser no seu HD esteja certo de salvar em um lugar que depois você possa achar com facilidade.
Vá ao seu navegador e na barra de endereços digite o caminho onde está o seu arquivo.
Página 5
Você deverá ver o seguinte resultado:
Bem pessoal, por hoje terminamos aqui e espero ter passado alguma informação útil para
vocês. Hoje não evoluímos muito naa TAGS da linguagem, afinal estamos apenas aquecendo as
turbinas para começar a voar. Nas próximas partes deste curso daremos uma avançada maior na
TAGS HTML e faremos alguns exercícios para fixar o conteúdo.
Qualquer dúvida, pergunta ou sugestão, mande um e-mail que responderei o mais rápido
possível.
Prof. Regilan Meira
[email protected]
www.regilan.com
Página 6
CURSO HTML
www.regilan.com
Parte 2: Mais Tags
Estamos na segunda parte do mini-curso HTML. Hoje iremos aprender
algumas tags da linguagem. Mais uma vez quero dizer que ninguém se
tornará um bom criador de websites aprendendo os exemplos contidos
neste mini-curso. O que iremos aprender é simplesmente o básico e a
introdução para criação de Web Sites. Para se tornar um bom
desenvolvedor web você deverá avançar nos estudos e fazer diversos
exemplos para desenvolver a criatividade.
No capítulo passado estudamos sobre a estrutura de uma página HTML
que é formada pelas tags principais: HEAD e BODY. Tente criar
algumas páginas. Por exemplo, construa uma página com um título, um
cabeçalho, algum texto, um subtítulo e mais algum texto. Ou seja, vá
testando os conhecimentos adquiridos.
Hoje iremos estudar algumas tags HTML que o ajudará na criação e
organização de seus sites.
Desejo mais uma vez boa sorte a todos que começarão junto comigo
essa jornada!
Prof. Regilan Meira
Curso de HTML - Parte 2: Mais Tags
Tags de formatação de texto
Vimos que todo documento html deve possuir um cabeçalho <HEAD> </HEAD> e um
corpo <BODY> </BODY>, que por sua vez devem estar delimitados respectivamente pelos tags
<HTML> e </HTML>.
Ex:
<HTML>
<HEAD>
<TITLE> Título do documento </TITLE>
</HEAD>
<BODY>
Conteúdo que deve ser inserido no documento
</BODY>
</HTML>
Inicialmente vamos estudar as tags de formatação que são usadas dentro do conteúdo
presente entre as tags: <BODY> </BODY>, ou seja, na área reservada ao conteúdo do site. Os
comandos ou tags de formatação indicam ao browser exatamente como um texto deve ser
formatado.
Vejamos algumas dessas tags na tabela abaixo:
Tags:
<B> texto em negrito </B>
<I> texto em itálico </I>
<U> texto sublinhado </U>
<STRIKE> texto riscado </STRIKE>
<S> texto tachado </S>
<SUB> texto em subscrito </SUB>
<SUP> texto em sobrescrito </SUP>
<BIG> texto em fonte maior do que o padrão </BIG>
<STRONG> texto destacado </STRONG>
<SMALL> texto em fonte menor do que o padrão </SMALL>
<BLINK> texto piscando </BLINK>
Agora vamos ver um exemplo:
Página 2
<html>
<head>
<title>Exemplo utilizando TAGS </title>
</head>
<body>
<b>ESSE É UM EXEMPLO UTILIZANDO UM TEXTO EM NEGRITO </b>
<b><i><s>POSSO COMBINAR VÁRIAS TAGS SIMULTANEMANTE, DESDE
QUE ESTEJAM ANINHADAS CORRETAMENTE </s></i></b>
<blink>QUE LEGAL ESSE TEXTO PISCANDO</blink>
</body>
</html>
Digite o código acima no bloco de notas e salve como: exemplo2.html. Em seguida abra
seu navegador web e digite o endereço onde se localiza o arquivo exemplo2.html. Veja exemplo:
Quebrando Linhas
As quebras de linha são indicadas por um tag simples <br>. A tag <br> - break row não possui fechamento. Acrescente as tags <br> para quebrar linhas do texto feito no exemplo
anterior. O código deverá ficar assim:
<html>
<head>
</head>
<body>
<b>ESSE É UM EXEMPLO UTILIZANDO UM TEXTO EM NEGRITO </b> <br>
<b><i><s>POSSO COMBINAR VÁRIAS TAGS SIMULTANEMANTE, DESDE QUE
ESTEJAM ANINHADAS CORRETAMENTE </s></i></b> <br>
<blink>QUE LEGAL ESSE TEXTO PISCANDO</blink> <br>
</body>
TAG <BR> quebrando linhas.
</html>
Página 3
Comentários
Um comentário deve ser adicionado ao código, quando você necessitar acrescentar
informações que facilitem o entendimento, incluir dados como data de execução, nome do
desenvolvedor, ou qualquer outra informação complementar, mas que não deva ser exibida ao
visitante.
O comando utilizado para incluir um comentário em sua origem de dados é:

Vejamos um exemplo:
<html>
<head>
</head>
<body>

<b>ESSE É UM EXEMPLO UTILIZANDO COMENTÁRIOS. OBSERVE QUE UM
COMENTÁRIO NÃO É MOSTRADO AO USUÁRIO!</b>
</body>
</html>
Linha horizontal
Outra tag de comando é <hr /> que serve para definir uma linha horizontal ("hr" vem
"horizontal rule" - régua horizontal ). A linha pode ter um valor em pixels ou em porcentagem em
relação à tela do browser.
<html>
<head>
</head>
<body>
<blink>ESSE
É
UM
EXEMPLO
UTILIZANDO
HORIZONTAL!</blink><br>
<hr> <br>
<b><strong>LINHA HORIZONTAL ACIMA </b> <br>
</body>
</html>
A
LINHA
Página 4
Cabeçalhos
Esta tag é responsável pela inserção dos diferentes tamanhos de título que têm como
objetivo ajudar na organização do conteúdo e facilitar a leitura de um documento. Existem 6
níveis de títulos, numerados de H1 a H6.
•
Cabeçalho com: <h1> </h1>
•
•
•
•
•
Vamos testar o exemplo abaixo em nosso navegador:
<html>
<head>
<title>Exemplo utilizando Cabeçalhos</title>
</head>
<body>
<h1> CABELAÇALHO COM H1 </h1> <br>
</body>
</html>
O resultado deverá ser o seguinte:
Página 5
Parágrafos
A tag de parágrafo é utilizada para marcar o início dos parágrafos, de modo a controlar
o espaçamento entre eles. A tag <p> pode ser utilizada como tag vazia, onde um novo
parágrafo termina o anterior, ou como tag de container usando <P> e </P>. Obs: Nesta TAG o
fechamento é opcional.
Agora um exemplo utilizando a tag <p>
<html>
<head>
<title>Exemplo utilizando listas ordenadas</title>
</head>
<body>
<strong>
<h1>Utilizando Parágrafos</h1>
Página 6
<p>A separação dos parágrafos deve ser feita através da tag de
parágrafo.
<p>É aconsenhável usar esta tag no ínicio de cada parágrafo,
para que eles não apareçam juntos.
<p>
</strong>
</body>
</html>
Veja como fica executando o código acima no navegador.
Listas
A Tag de uma lista ordenada é <ol> ... </ol>. O número inicial de uma lista ordenada é
1. Uma lista ordenada possui atributos que indica o número inicial da lista (o padrão é 1) e o tipo
de item que será usado: Letras maiúsculas, letras minúsculas, número romano maiúsculo, números
romano minúsculo e números arábicos (padrão). Na próxima parte deste mini-curso estudaremos
sobre os atributos das tags.
Os atributos possíveis para um item de lista são: <li> <li>
Vamos ver um exemplo utilizando listas ordenadas.
<html>
<head>
</head>
<body>
<strong>
<ol>
<li>Já aprendemos a formatar textos: negrito, ítalo, etc. </li>
<li>Estudamos sobre linhas horizontais, quebrar linhas. </li>
<li>Vimos como adicionar comentários em nossos códigos. </li>
Página 7
<li>Em seguida estudamos sobre como inserir cabeçalhos. </li>
<li>Agora estamos estudando sobre listas ordenadas e não
ordenadas. </li>
</ol>
</strong>
</body>
</html>
Salve o arquivo acima e execute em seu navegador para ver o resultado.
A Tag para uma lista não-ordenada é <ul> ... </ul>. Da mesma forma que na tag <ol>
</ol>, a tag responsável pela entrada de itens na lista é <li>. Vamos testar o mesmo exemplo
acima, só que dessa vez usando listas não ordenadas.
<html>
<head>
</head>
<body>
<strong>
<ul>
<li>Já aprendemos a formatar textos: negrito, ítalo, etc. </li>
<li>Estudamos sobre linhas horizontais, quebrar linhas. </li>
<li>Vimos como adicionar comentários em nossos códigos. </li>
<li>Em seguida estudamos sobre como inserir cabeçalhos. </li>
<li>Agora estamos estudando sobre listas ordenadas e não
ordenadas. </li>
</ul>
</strong>
</body>
</html>
Página 8
Terminamos aqui. Aconselho novamente, a fazer seus próprios exemplos, construindo
algumas páginas usando as tags que aprendemos nesta lição. Na próxima parte do curso,
aprenderemos sobre os atributos das tags. Através dos atributos das tags podemos configurar
nosso site colocando cor, cor de fundo, alinhamento, entre outros estilos. Até a próxima parte!
possível.
Prof. Regilan Meira
[email protected]
www.regilan.com
Página 9
CURSO HTML
www.regilan.com
Parte 3: Atributos das TAGS
Estamos na terceira parte do mini-curso HTML. No capítulo passado
estudamos sobre várias TAGS presentes na HTML. Tente criar algumas
páginas utilizando essas TAGS. Uma tag é um comando para o
navegador (por exemplo, <br /> é um comando para mudar de linha,
<b> </b> que é um comando para que um texto fique em negrito). Em
algumas tags podemos ser mais específico, acrescentando na tag,
informações adicionais de comando. Isto é feito através dos atributos.
Hoje iremos estudar alguns desses atributos presentes nas TAGS já
estudadas. Existem vários atributos e eles podem ser aplicados à
maioria das tags.
Vamos começar então!
Prof. Regilan Meira
Curso de HTML - Parte 3: Atributos das TAGS
Tags de formatação de texto
Uma tag é um comando para o navegador (por exemplo, <br /> é um comando para
mudar de linha, <b> </b> que é um comando para que um texto fique em negrito). Em algumas
tags podemos ser mais específico, acrescentando na tag, informações adicionais de comando. Isto
é feito através dos atributos. Os atributos são definidos dentro da tag de abertura do elemento,
Veja no exemplo abaixo que mostramos o atributo style para configurar o estilo do elemento
parágrafo.
Ex:
<html>
<head>
<title>Exemplos de atributos</title>
</head>
<body>
<p style="color:blue">Parágrafo na cor azul</p>
</body>
</html>
A sintaxe para atributos é definida pelo nome do atributo seguido por um sinal de igual e
depois entre aspas são declaradas as informações do atributo. As informações quando mais de
uma, devem ser separadas por ponto e vírgula.
Na listagem a seguir, temos alguns atributos do elemento BODY.
O atributo bgcolor= permite a seleção da cor de fundo;
O atributo background= permite uma imagem no fundo da página;
O atributo text= permite a seleção da cor do texto principal;
O atributo link= permite a escolha da cor que indicará a existência do link;
O atributo vlink= permite selecionar a cor que indicará um link já visitado;
O atributo alink= permite a escolha da cor que indicará o link que foi ativado;
O atributo marginheigth = elimina a margem esquerda que fica numa página no browser
O atributo marginwidth = elimina a margem no topo da página no browser
O atributo topmargin = elimina a margem no topo da página no browser
O atributo leftmargin = elimina a margem esquerda que fica numa página no browser
Página 2
Vamos ao exemplo. Copie o código abaixo para o bloco de notas, salve com formato
.html e teste no navegador para verificar os resultados.
<html>
<head>
</head>
<body bgcolor="#00CC66" text="#AA00FF" marginheigth=”0” marginwidth=”0”>
<p>Testando atributos do elemento BODY</p>
</html>
Para alterar os tamanhos das fontes, utilize os seguintes comandos:
<font size=”4”> Alterando o tamanho da font </font>
<html>
<head>
</head>
<body
bgcolor="#00CC66"
text="#AA00FF"
marginwidth=”0”>
<font size="9">
<p>Testando o tamanho da fonte</p>
</font>
</html>
marginheigth=”0”
Estudamos que o elemento <p> é usado para parágrafos. Com o atributo align ele
desloca o texto. Veja os exemplos:
Página 3
<html>
<head>
</head>
<body
marginwidth=”0”>
bgcolor="#00CC66"
text="#AA00FF"
marginheigth=”0”
<p align="left"> Minicurso HTML </p> <!—-Alinhamento a esquerda -->
<p align="right">Minicurso HTML </p> <!—-Alinhamento a direita -->
<p align="center">Minicurso HTML </p> <!—-Alinhamento centralizado -->
<p align="justify"> Minicurso HTML </p> <!—-Alinhamento justificado -->
</html>
Nas linhas abaixo temos uma relação de algumas tags com seus atributos.
1. <A> Insere uma âncora para uma ligação de hipertexto.
HREF Referência de hipertexto.
NAME Determina o ponto de destino do hipertexto.
TARGET Abre uma nova janela com o hipertexto indicado.
TITLE Cria um quadro com descrição do hipertexto.
2. <BODY> Contém o corpo do documento HTML.
ALINK Configura a cor do texto do link já visitado.
BACKGROUND Especifica um arquivo gif/jpg como papel de parede.
BGCOLOR Define uma cor de fundo.
BGPROPERTIES Mantém o papel de parede fixo no fundo da tela.
LEFTMARGIN Define um espaço entre a borda esquerda e o texto.
LINK Configura a cor do texto do link.
SCROLL Define se a página terá ou não as barras de rolagens.
TEXT Configura a cor do texto.
TOPMARGIN Define um espaço entre a borda de topo e o texto.
VLINK Configura a cor do link ativo.
3. <FONT> Formata da fonte.
SIZE Altera o tamanho da fonte.
COLOR Altera a cor da fonte.
FACE Define a tipologia da fonte.
4. <H1> <H2> <H3> <H4> <H5> <H6> Seis níveis de cabeçalho.
ALIGN Alinhamento do cabeçalho.
STYLE Insere propriedades de estilo no cabeçalho.
Página 4
<HEAD> Cabeçalho do arquivo HTML.
TITLE Título do arquivo HTML.
ISINDEX
BASE Especifica o endereço base do URL.
LINK Relaciona o documento com outro.
META Adiciona metainformações ao arquivo.
STYLE Adiciona formatação de folha de estilo ao documento.
5. <HR> Horizontal Rule - Linha horizontal.
SIZE Define o tamanho da linha.
WIDTH Define a espessura da linha.
ALIGN Define a margem de alinhamento da linha.
NOSHADE Define uma textura sólida a linha.
COLOR Define a cor da linha.
6. <HTML> Comando de abertura e fechamento do arquivo HTML.
VERSION Informa a versão do HTML usado.
LAN Determina em qual idioma o arquivo está escrito.
DIR Determina a direção do fluxo do texto.
7. <IMG> Insere uma imagem no documento.
ALIGN Define o alinhamento da imagem.
ALT Cria um quadro com informações sobre a imagem.
BORDER Permite criar e formatar a borda da imagem.
HEIGHT Define a altura da imagem.
HSPACE Cria um espaço horizontal entre a imagem e o texto.
ISMAP Mapeamento da imagem controlado pelo servidor.
ONMOUSEOVER
ONMOUSEOUT
SRC Determina a URL do arquivo de imagem.
USEMAP Mapeamento da imagem controlado pelo usuário.
VSPACE Cria um espaço vertical entre a imagem e o texto.
WIDTH Define a largura da imagem.
8. <LINK> Estabelece ligações da página com outros documentos.
HREF Indica o endereço para o qual o link aponta.
REL Explica a relação desse documento com o outro.
METHODS Indica o método usado para acessar o documento.
TITLE Título do documento ao qual o link faz referência.
Página 5
9. <MARQUEE> Cria efeito de movimento ao objeto.
ALIGN Alinhamento do objeto.
BEHAVIOR O objeto desaparece ou não em uma das margens.
BGCOLOR Cor de fundo.
DIRECTION Direção do movimento.
HEIGHT Altura do painel.
HSPACE Largura das margens esquerda/direita.
LOOP Quantas vezes o efeito irá se repetir.
SCROLLAMOUNT Quantidade de pixel utilizada no movimento.
SCROLLDELAY Tempo de deslocamento do objeto.
VSPACE Determina a margem superior e inferior do marquee.
WIDTH Especifica a altura do painel.
10. <OL> Ordered List - Lista ordenada.
TYPE Define o tipo de numeração.
START Indica o valor onde a contagem deve começar.
11. <P> Paragraph - Parágrafo.
ALIGN Alinhamento do parágrafo.
STYLE Formatação de CSS.
12. <TABLE> Declara a formatação de uma tabela.
BACKGROUND Imagem de fundo.
BORDER Borda da tabela.
BORDERCOLOR Cor das bordas.
BORDERCOLORDARK Cor de sombra das bordas.
BORDERCOLORLIGHT Cor da luz das bordas.
CELLSPACING Espaço entre as células.
CELLPADDING Espaço entre o texto e as bordas da célula.
FRAME Define tipos de borda da tabela.
HEIGHT Altura da tabela.
RULES Define tipos de bordas para as células.
SUMMARY Cria um comentário no código fonte da tabela.
WIDTH Largura da tabela.
13. <TD> Célula da tabela.
ALIGN Alinhamento horizontal do conteúdo da célula.
BACKGROUND Textura de fundo.
Página 6
COLSPAN Avanço em colunas.
NOWRAP Célula de tamanho fixo.
ROWSPAN Avanço em linhas.
VALIGN Alinhamento vertical do conteúdo da célula.
WIDTH Largura da célula.
14. <TR> Table Row - Linha da tabela.
ALIGN Alinhamento horizontal do conteúdo da célula.
CHAR Caracter de alinhamento.
CHAROOF Deslocamento do caracter de alinhamento.
VALIGN Alinhamento vertical do conteúdo da célula.
15. <UL> Unordered List - Lista não ordenada.
TYPE Define o tipo de marcação da lista.
Atualmente a HTML possui 91 elementos, sendo que a maioria deles possuem uma série de
atributos. Na relação acima especifiquei 15 elementos com seus atributos. Recomendo que
pesquise ou mesmo compre algum guia de referência da linguagens. Nesses guias podemos
consultar de forma rápida os elementos com seus respectivos atributos.
Terminamos aqui. Aconselho novamente, a fazer seus próprios exemplos, construindo
algumas páginas usando as tags que aprendemos nesta lição. Crie págimas com cores de fundo,
cor no texto, alinhamento de parágrafos. Enfim, tente usar o máximos dos recursos vistos neste
capítulo. Na próxima parte do curso, aprenderemos mais algumas tags HTML.
possível.
Prof. Regilan Meira
[email protected]
www.regilan.com
Página 7
CURSO HTML
www.regilan.com
Parte 4: Mais TAGS: Links e Imagens
Estamos na quarta parte de nosso tutorial HTML. Até o momento
estudamos uma série de TAGS de forma que já podemos fazer
pequenos exemplos de sites.
Com o estudo de hoje deixaremos nosso site mais atraente com a
possibilidade de inserir imagens e também criar ligações (links) entre as
páginas.
Bom Estudo!
Prof. Regilan Meira
Curso de HTML - Parte 4: Mais TAGS: Links e Imagens
Inserção de Imagens
A maioria das imagens que encontramos na Web são GIF ou JPG.
gif: pode ser animado ou não, permite fundos transparentes, e é utilizada mais para
imagens tipo desenho ou mapa (traços ou vetores).
jpg: não pode ser animado enem pode ter fundo transparente, pode ter ótima qualidade
e ser leve, utilizado mais para fotos.
O elemento destinado a inserir uma imagem no documento é a tag img. O elemento img
insere imagens que são apresentadas junto com os textos. Um atributo src deve estar presente, da
seguinte forma:
< img src = "URL da Imagem" />
A URL da imagem é a URL do arquivo que contém a imagem que se quer inserir, que pode
ser uma imagem localizada no próprio servidor ou pode ser referenciada uma imagem que esteja
em outro servidor. A tag <img> não possui tag de encerramento, mas possui vários atributos,
sendo o principal o atributo: "src" que especifica o local onde a imagem está localizada. Veja
exemplo:
<html>
<head>
<title>Utilizando Imagens </title>
</head>
<body>
<p style="color:blue;font-family:Verdana"> Aprendendo a usar imagens <br/>
</p>
<img src = "6630.png" alt="Celular Nokia />
</body>
</html>
Agora veja o resultado do código acima no navegador:
Página 2
Observe que o elemento img possui 3 atributos: src que define o endereço onde se
encontra a imagem, o atributo alt que descreve a imagem e o atributo title que dá um título a
imagem. O título aparecerá no navegador quando o cursor do mouse estive sobre a imagem.
Também é possível alinhar a posição da imagem com relação ao que vem depois dela,
que pode ser um texto ou outra imagem.
<img src= “6630.png” align= “center”>
<img src= “6630.png” align= “left”> Imagem do lado esquerdo e texto do lado direito.
Podemos ainda adicionar bordas em uma imagem:
<img src=”figura.jpg” align=”center” border=”3”>
<img src=”figura.jpg” align=”center” border=”0”>
Um caso muito comum de utilização de imagens é associado ao atributo "background".
Neste caso, não trabalhamos com a tag "src" e sim com o atributo "background". Dessa forma,
este atributo deve estar dentro de uma tag, que podem ser as tags abaixo:
Página 3
<body> - para colocar uma imagem no fundo da página
<td> - para colocar uma imagem no fundo de uma célula de tabela
<tr> - para colocar uma imagem no fundo de uma linha de tabela
<table> - para colocar uma imagem no fundo de uma tabela
Veja exemplo:
<body background=”6630.jpg“>
Podemos também inserir imagens que estão localizadas em outros diretórios ou até mesmo
em outros websites. Veja os exemplos:
<img src="imagens/abacaxi.png">
<img src=” http://img.terra.com.br/capa/imagens/ashley_grosbygroupvirgula_Repre-120x90op.jpg”>
Infelizmente para trabalharmos melhor com tratamento de imagens é necessário um bom
editor de imagens como o Adobe PhotoShop e o Adobe Fireworks.
Links
Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a outro
documento. Para construir links entre páginas precisamos de um elemento conhecido como âncora.
Para inserir um link em um documento, utilizamos a tag <A>, da seguinte forma:
<a href = "pagina_destino"> Clique aqui </a>
pagina_destino : é o URL do documento de destino;
Clique aqui: é o texto ou imagem que servirá de ligação hipertexto do documento
sendo apresentado para o documento de destino.
A tag <a> possui vários atributos, utilizados acordo com a ação associada ao link. Os
mais usados são os dois atributos abaixo:
HREF : Indica o arquivo de destino da ligação de hipertexto.
TARGET : Indica o frame em que será carregado a pagina de destino, por
exemplo: uma nova janela no navegador, na página atual.
Página 4
Podemos também criar links internos, dentro da própria página. Tudo o que precisamos é
usar o atributo id e o símbolo "#".
Use o atributo id para marcar o elemento que é o destino do link. Por exemplo:
<h1 id="inicio"> Inicio do Texto </h1>
Agora podemos criar um link que leve àquele elemento usando o símbolo "#" no atributo
do link. O símbolo "#" informa ao navegador para ficar na mesma página em que está. O
símbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo:
<a href="#inicio">Link para o início do texto </a>
Veja o exemplo completo abaixo:
<html>
<head>
</head>
<body>
<p><a href="#cabecalho1">Link para cabeçalho 1</a></p>
<p><a href="#cabecalho2">Link para cabeçalho 2</a></p>
<h1 id="cabecalho1">Cabeçalho 1</h1>
<p>Texto do cabeçalho 1</p>
<h1 id="cabecalho2">Cabeçalho 2</h1>
<p>Texto do cabeçalho 2</p>
</body>
</html>
Agora se você quer construir links entre páginas de um mesmo website você não precisa
escrever o endereço completo de cada página (URL). Por exemplo, se você tem duas páginas e
salvou as duas em um mesmo diretório você constrói um link de uma para a outra usando somente
o nome do arquivo no link. Veja como fica o exemplo:
<a href="page2.htm">Aqui um link para a pagina 2</a>
Podemos também utilizar imagens como links. Veja exemplo:
Página 5
<a href=" http://www.cefetba.br/Logomarcas/CEFETBA_size01_transp.gif">
<img src="logo.png"></a>
Por último podemos criar link para um endereço de e-mail. Isto é feito de modo
semelhante aos links para documentos.
<a href="mailto:[email protected]">Enviar e-mail para o professor Regilan</a>
Observe que no lugar do endereço do documento escrevemos mailto: seguido pelo
endereço de e-mail. Quando o link é clicado o programa de e-mail padrão do usuário é aberto
com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar
se o usuário tiver um programa de e-mail instalado na sua máquina.
Encerramos por aqui. Na parte 5 deste tutorial estudaremos sobre tabelas, além das tags
<div>, <span> e <blockquote>
Até a próxima parte!
possível.
Prof. Regilan Meira
[email protected]
www.regilan.com
Página 6
CURSO HTML
www.regilan.com
Parte 5: Tabelas, div e span
Estamos na quarta parte de nosso tutorial HTML. Até o momento
estudamos uma série de TAGS de forma que já podemos fazer
pequenos exemplos de sites.
Com o estudo de hoje deixaremos nosso site mais atraente com a
possibilidade de inserir imagens e também criar ligações (links) entre as
páginas.
Bom Estudo!
Prof. Regilan Meira
Curso de HTML - Parte 5: Tabelas, div e span
Tabelas
Em HTML, usamos as tabelas não só para exibir dados como em uma planilha tipo Excel,
mas também para distribuir melhor os objetos na tela. Porém com os padrões web em alta (Web
Standards) as tabelas estão sendo banidas definitivamente para esta última utilidade. As tabelas
estão previstas nas especificações da X(HTML) e devem ser utilizadas para os fins a que se
destinam. O elemento table foi introduzido com a finalidade de apresentar dados tabulares
como, por exemplo: tabelas de pesos e medidas, preços, tabelas de dados gerais, entre outros.
Segundos os princípios da Web Standards as tabelas devem ser utilizadas somente para esses
fins.
O elemento table é apresentado no navegador, como uma espécie de grade, composta
de colunas, linhas e células, podendo conter texto, imagem, link ou qualquer outro tipo de
conteúdo.
Resumindo, as tabelas são definidas conforme abaixo:
uma tabela é composta por linhas e colunas que formam células.
as células podem conter textos, imagens e até outras tabelas.
é feita por meio das tags <table> ... </table>.
a tag <table> possui os atributos [border] [cellpadding] [cellspacing] [width]:
o O atributo [border=“n”] representa a espessura da borda em pixels
o O atributo [cellpadding =“n”] define o enchimento, espaço entre a borda e seu
conteúdo, em pixels
o O [cellspacing =“n”] representa o espaçamento entre as células da tabela, em
pixels .
o O atributo [width =“n”]: fixa um valor determinado, em pixels ou em porcentagem
para a largura das células.
cada linha da tabela é definida por <tr> </tr> (table row)
cada célula na linha é definida por <td> </td> (table data)
Para definir uma tabela, primeiro usamos a tag de abertura: <table>, depois iniciamos a
linha (<tr>) e colocamos as células que a linha contêm. No final colocamos as tag de
fechamente(</td></tr></table>). As linhas devem conter o mesmo número de células para que
não dê erros. Ou seja, dentro das tags <tr> e </tr> devem haver o mesmo número de
<td></td>.
Página 2
Para melhor compreensão, vamos ao exemplo abaixo.
<html>
<head>
</head>
<body bgcolor="#00CC44">
<table border="1" width=”30%”>
<tr>
<td>Destino</td>
<td>Saída</td>
<td>Classe</td>
</tr>
<tr>
<td>Eunápolis</td>
<td>06:30</td>
<td>Comercial</td>
</tr>
<tr>
<td>Ilhéus</td>
<td>08:00</td>
<td>Executiva</td>
</tr>
<tr>
<td>Salvador</td>
<td>19:00</td>
<td>Leito</td>
</tr>
</table>
</body>
</html>
Agora veja o código acima quando executado no navegador.
Página 3
Observe que no código acima utilizamos de atributos nas tabelas. Usamos o atributo
border que é usado para definir a espessura de uma borda em volta da tabela. O atributo width
é utilizado para definir a largura da tabela que é informado em pixels. Temos ainda alguns
outros atributos como o align que define o alinhamento horizontal do conteúdo da tabela, de uma
linha ou de uma célula. Por exemplo, left, center ou right (à esquerda, no centro ou à direita) e o
valign que define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou
bottom (em cima, no meio ou em baixo).
Pode inserir qualquer coisa em uma tabela: texto, links e imagens. MAS, tabelas segundo
os padrões da web destinam-se a apresentar dados tabulares (isto é, dados que devam ser
apresentados em linhas e colunas). Antes as tabelas eram usadas como ferramenta para construir
layout, atualmente fazemos isso através do uso de CSS, que veremos em capítulos futuros
As recomendações do W3C para tabelas prevêem vários elementos e atributos para
marcar adequadamente uma tabela, entre os quais podemos destacar o elemento <th> que é
utilizado em substituição ao elemento td para células que representam o cabeçalho. Veja como
fica o exemplo de tabelas utilizado o atributo <th>
<html>
<head> </head>
<table border="1" width="30%">
<tr>
<th>Destino</th>
<th>Saída</th>
<th>Classe</th>
</tr>
<tr>
<th>Eunápolis</th>
<td>06:30</td>
<td>Comercial</td>
</tr>
<tr>
<th>Ilhéus</th>
<td>08:00</td>
<td>Executiva</td>
</tr>
Página 4
<tr>
<th>Salvador</th>
<td>19:00</td>
<td>Leito</td>
</tr>
</table>
</body>
</html>
A TAG Blockquote
O objetivo da tag Blockquote é aplicar uma endentação (margem esquerda). Vamos fazer
um exemplo utilizando esta tag:
<html>
<head></head>
<p>Inicialmente estamos utilizando um elemento <b>p</b>. Abaixo usamos o elemento
blockquote.
</p>
<blockquote> Este elemento está utilizando a tag blockquote </blockquote>
</html>
Veja agora a execução do código acima no navegador.
Página 5
A TAG Span
A tag "span" não tem função estruturada definida e destina-se a fornecer ao autor um
mecanismo de marcação utilizado em conjunto com os atributos: id e class. Pode ser utilizada para
a configuração de trechos de parágrafos, principalmente para aplicação de folhas de estilo. O
elemento span e div quando empregado com folhas de estilo em cascata (css) constitui um
poderoso mecanismo para construção de websites. Vamos ver um exemplo utilizando essa tag.
<html>
<head>
<title>Trabalhando com span</title>
<style type="text/css">
.configuracao
{
background-color: #BBDD55;
color:#AA5577;
font-family:Verdana;
}
</style>
</head>
<body>
<p> Vamos trabalhar com uma série de parágrafos.</p>
<p>Aqui eu vou selecionar apenas <span class="configuracao">esta parte do
parágrafo</span> para aplicar o estilo de cor de fundo. </p>
<p class="configuracao">Neste aqui vou aplicar um estilo de cor de fundo no
parágrafo todo utilizando a tag "p"</p>
<p> <span class="configuracao">Neste outro, também um parágrafo, usarei o
mesmo estilo, porém selecionado com a tag "span". </span> </p>
</body>
</html>
Veja o resultado agora no navegador.
Página 6
A TAG Div
A tag "div" não tem função estruturada definida e destina-se a fornecer ao autor um
mecanismo de marcação utilizado em conjunto com os atributos: id e class. É utilizada para
configuração de blocos de textos, principalmente quando se trata de CSS. Mas normalmente
atribuímos a ela formatações mais complexas. Esse elemento é bastante utilizado para a
construção dos layouts de sites modernos, substituindo o uso de tabelas. Podemos atribuir a estes
elementos: altura/largura, distância do canto superior esquerdo da janela do navegador
esquerda/superior, opções de fundo ou cor de fundo, entre outros, o que torna esse elemento
bastante popular na construção de sites.
Vamos ver mais um exemplo, só que agora utilizando a tag <div>:
<html>
<head>
<title>Trabalhando com a tag div</title>
<style type="text/css">
/* Configuração geral das divs */
div {
padding: 7px;
}
</style>
</head>
<body>
<div id="ParteSuperior" style="position:absolute; left:11px; top:13px; width:623px; height:98px;
z-index:1; background-color: #AAFFAA; layer-background-color: #FFFFCC; border: 1px none
#000000; overflow: auto;">Parte Superior do Site </div>
<div id="PartePrincipal" style="position:absolute; left:10px; top:129px; width:397px;
height:224px; z-index:2; background-color: #FFBB88; layer-background-color: #FFCC99;
border: 1px none #000000; overflow: auto;">Parte Principal</div>
<div id="ParteSecundaria" style="position:absolute; left:422px; top:129px; width:212px;
height:224px; z-index:3; background-color: #FF9900; layer-background-color: #FF9900;
border: 1px none #000000; overflow: auto;">Parte Secundária</div>
</body>
</html>
Página 7
Nesses dois últimos exemplos utilizamos alguns códigos (css). Talvez você não esteja
familiarizado com o assunto. Sugiro que façam uma pesquisa sobre o assunto para conhecimento
inicial de como trabalhar com folhas de estilo em cascata
Encerramos por aqui.
Até a próxima parte!
possível.
Prof. Regilan Meira
[email protected]
www.regilan.com
Página 8

curso html

Transcrição

Documentos relacionados

revisão - Ficando Fera

roteiro-2-desenv-web - André Moraes [email protected]

Clodoaldo Hiroiti Iamashita

body fit . massageador corporal

TAGS / ETIQUETAS UTILIZADAS NA CONTA DELICIOUS DO CDI

Cascading Style Sheets II

Aula Nº 4 – XHTML+CSS

MODALIDADES BODY SYSTEMS O que é Power Jump? Power

Aula 11

Open day no ginásio Forlife este fim-de-semana