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 HTTP 1 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
Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB 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
Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB 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. Então, antes de mais nada digite "" na primeira linha do documento, no Notepad. Página 4
Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB Como sabemos, é 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 "" localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas e. 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
Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB 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. possível. Qualquer dúvida, pergunta ou sugestão, mande um e-mail que responderei o mais rápido Prof. Regilan Meira regilan@gmail.com www.regilan.com Página 6
CURSO HTML www.regilan.com Parte 2: Mais Tags Olá amigos visitantes, 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. Tags: Vejamos algumas dessas tags na tabela abaixo: <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
Curso de HTML - Parte 2: Mais Tags <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> 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: <head> <title>exemplo utilizando TAGS </title> </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. Página 3
Curso de HTML - Parte 2: Mais Tags 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: <!-- COMENTÁRIOS --> <head> <title>exemplo utilizando TAGS </title> </head> <body> <!-- DESENVOLVEDOR: REGILAN MEIRA OBJETIVO: MOSTRAR A UTILIZAÇÃO DE COMENTÁRIOS DATA: 03/01/2008 --> <b>esse É UM EXEMPLO UTILIZANDO COMENTÁRIOS. OBSERVE QUE UM COMENTÁRIO NÃO É MOSTRADO AO USUÁRIO!</b> </body> 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. <head> <title>exemplo utilizando TAGS </title> </head> <body> <blink>esse É UM EXEMPLO UTILIZANDO A LINHA HORIZONTAL!</blink><br> <hr> <br> <b><strong>linha HORIZONTAL ACIMA </b> <br> </body> Página 4
Curso de HTML - Parte 2: Mais Tags 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> Cabeçalho com: <h2> </h2> Cabeçalho com: <h3> </h3> Cabeçalho com: <h4> </h4> Cabeçalho com: <h5> </h5> Cabeçalho com: <h6> </h6> Vamos testar o exemplo abaixo em nosso navegador: <head> <title>exemplo utilizando Cabeçalhos</title> </head> <body> <h1> CABELAÇALHO COM H1 </h1> <br> <h2> CABELAÇALHO COM H2 </h2> <br> <h3> CABELAÇALHO COM H3 </h3> <br> <h4> CABELAÇALHO COM H4 </h4> <br> <h5> CABELAÇALHO COM H5 </h5> <br> <h6> CABELAÇALHO COM H6 </h6> <br> </body> O resultado deverá ser o seguinte: Página 5
Curso de HTML - Parte 2: Mais Tags 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> <head> <title>exemplo utilizando listas ordenadas</title> </head> <body> <strong> <h1>utilizando Parágrafos</h1> Página 6
Curso de HTML - Parte 2: Mais Tags <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> 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. <head> <title>exemplo utilizando listas ordenadas</title> </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
Curso de HTML - Parte 2: Mais Tags ordenadas. </li> </ol> </strong> </body> <li>em seguida estudamos sobre como inserir cabeçalhos. </li> <li>agora estamos estudando sobre listas ordenadas e não 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. <head> <title>exemplo utilizando listas ordenadas</title> </head> <body> <strong> <ul> ordenadas. </li> </ul> </strong> </body> <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 Página 8
Curso de HTML - Parte 2: Mais Tags 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. Qualquer dúvida, pergunta ou sugestão, mande um e-mail que responderei o mais rápido Prof. Regilan Meira regilan@gmail.com www.regilan.com Página 9
CURSO HTML www.regilan.com Parte 3: Atributos das TAGS Olá amigos visitantes, 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: <head> <title>exemplos de atributos</title> </head> <body> <p style="color:blue">parágrafo na cor azul</p> </body> 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
Curso de HTML - Parte 3: Atributos das TAGS 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. <head> <title>exemplos de atributos</title> </head> <body bgcolor="#00cc66" text="#aa00ff" marginheigth= 0 marginwidth= 0 > <p>testando atributos do elemento BODY</p> Para alterar os tamanhos das fontes, utilize os seguintes comandos: <font size= 4 > Alterando o tamanho da font </font> <head> <title>exemplos de atributos</title> </head> <body bgcolor="#00cc66" text="#aa00ff" marginheigth= 0 marginwidth= 0 > <font size="9"> <p>testando o tamanho da fonte</p> </font> Estudamos que o elemento <p> é usado para parágrafos. Com o atributo align ele desloca o texto. Veja os exemplos: Página 3
Curso de HTML - Parte 3: Atributos das TAGS <head> <title>exemplos de atributos</title> </head> <body bgcolor="#00cc66" text="#aa00ff" marginheigth= 0 marginwidth= 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 --> 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
Curso de HTML - Parte 3: Atributos das TAGS <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
Curso de HTML - Parte 3: Atributos das TAGS 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. BGCOLOR Cor 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. BGCOLOR Cor de fundo. Página 6
Curso de HTML - Parte 3: Atributos das TAGS BORDERCOLOR Cor das bordas. BORDERCOLORDARK Cor de sombra das bordas. BORDERCOLORLIGHT Cor da luz das bordas. 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. BGCOLOR Cor de fundo. BORDERCOLOR Cor das bordas. BORDERCOLORDARK Cor de sombra das bordas. BORDERCOLORLIGHT Cor da luz das bordas. 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. Qualquer dúvida, pergunta ou sugestão, mande um e-mail que responderei o mais rápido Prof. Regilan Meira regilan@gmail.com www.regilan.com Página 7
CURSO HTML www.regilan.com Parte 4: Mais TAGS: Links e Imagens Olá amigos visitantes, 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: <head> <title>utilizando Imagens </title> </head> <body> <p style="color:blue;font-family:verdana"> Aprendendo a usar imagens <br/> </p> </body> <img src = "6630.png" alt="celular Nokia /> Agora veja o resultado do código acima no navegador: Página 2
Curso de HTML - Parte 4: Mais TAGS: Links e Imagens 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
Curso de HTML - Parte 4: Mais TAGS: Links e Imagens <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-120x90- op.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
Curso de HTML - Parte 4: Mais TAGS: Links e Imagens 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: <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> 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
Curso de HTML - Parte 4: Mais TAGS: Links e Imagens <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:regilan@gmail.com">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. Qualquer dúvida, pergunta ou sugestão, mande um e-mail que responderei o mais rápido Prof. Regilan Meira regilan@gmail.com www.regilan.com Página 6
CURSO HTML www.regilan.com Parte 5: Tabelas, div e span Olá amigos visitantes, 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
Curso de HTML - Parte 5: Tabelas, div e span Para melhor compreensão, vamos ao exemplo abaixo. <head> </head> <body bgcolor="#00cc44"> <table border="1" width= 30% > <tr> <td>destino</td> <td>saída</td> <td>classe</td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </table> <td>eunápolis</td> <td>06:30</td> <td>comercial</td> <td>ilhéus</td> <td>08:00</td> <td>executiva</td> <td>salvador</td> <td>19:00</td> <td>leito</td> </body> Agora veja o código acima quando executado no navegador. Página 3
Curso de HTML - Parte 5: Tabelas, div e span 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> <head> </head> <body bgcolor="#00cc44"> <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
Curso de HTML - Parte 5: Tabelas, div e span <tr> </tr> </table> </body> <th>salvador</th> <td>19:00</td> <td>leito</td> A TAG Blockquote O objetivo da tag Blockquote é aplicar uma endentação (margem esquerda). Vamos fazer um exemplo utilizando esta tag: <head></head> <body bgcolor="#00cc44"> <p>inicialmente estamos utilizando um elemento <b>p</b>. Abaixo usamos o elemento blockquote. </p> <blockquote> Este elemento está utilizando a tag blockquote </blockquote> Veja agora a execução do código acima no navegador. Página 5
Curso de HTML - Parte 5: Tabelas, div e span 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. <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> Veja o resultado agora no navegador. Página 6