Introdução
A Linguagem HTML (Hyper Text Language Markup – Linguagem de Marcação de Hypertexto – É onde você vê textos, imagens, vídeos, animações) é utilizada para a criação de páginas para a Internet. Diferente de uma linguagem de programação, onde você cria códigos para criar um programa, por exemplo: para desenhar, jogos, o HTML utiliza Tags (comandos que ficam entre os sinais de menor e maior). Exemplo: <title> à é uma tag utilizada para especificar o título que a página tem e que aparecerá na Barra de Título (primeira barra de uma janela normalmente na cor azul) do Browser.
Estrutura de pastas para criação de um projeto
Antes de começarmos um projeto de construção de um 2Site, é necessário criarmos pastas, para armazenar as páginas, imagens, animações, vídeos, etc. Abaixo está um exemplo de estrutura:
Projeto Html
imagens
animações
Na Área de Trabalho, dê um duplo clique na pasta Meus documentos.
Dê um clique com o botão direito do mouse onde não haja nenhum elemento (ícone, nome de pasta, nome de arquivo).
No menu que abriu, selecione: Novo e depois Pasta.
Apague e coloque seu nome.
Crie as pastas, conforme o exemplo de estrutura acima.
Estrutura de uma página em HTML
A estrutura de uma página em HTML é a seguinte:
<html>
<head>
<title>Primeira Página
</title>
</head>
<body>
</body>
</html>
Na primeira linha, tem a tag <html>. Ela indica o início da página. Na segunda linha, tem a tag <head>. Ela indica a existência do cabeçalho da página (primeira linha do browser). Na terceira linha, tem a tag <title>. É aí que você coloca o título da página, que aparecerá no cabeçalho da página do browser, na barra de título. Na quarta linha, tem a tag </title>. Esta tag indica que é o final do título. Normalmente uma tag aberta, tem que ser fechada, colocando antes da mesma, a / (barra). Na quarta linha, tem a tag </head>. Ela fecha a tag de cabeçalho, indicando também que o cabeçalho encerrou. Na sexta linha, tem a tag <body>, e na próxima tem a </body> que a fecha. É dentro delas que colocamos o conteúdo da página, que aparecerá quando o usuário visitar o site, ou seja: textos, imagens, vídeos, músicas, etc. Na última linha, encerramos a página, com a tag </html>.
Como você pode ver, o mínimo para uma página aparecer sem conteúdo nenhum, e com o título está descrito acima.
Para cria-la, utilizamos normalmente o Bloco de Notas. Para salvar, temos que colocar o nome da página com extensão .htm ou .html, já que no Bloco de Notas, a extensão é .txt.
Salvando a página
Depois de digitado a estrutura acima, clique no Menu Arquivo / Salvar. Localize a pasta onde você criou para salvar seu projeto. Coloque o nome: primeira.htm e clique no botão Salvar. Clique no botão Minimizar. Abra a pasta Meus documentos, e localize a página. Ela estará com ícone do navegador (Chrome, Firefox, etc).
Localizando a página salva
Minimize o Bloco de Notas. Abra a pasta Meus documentos. Abra a pasta do seu projeto.
Deverá aparecer a página salva, com o ícone do navegador.
Dê um duplo clique no mesmo para exibir a página.
Na Barra de Tarefas, será exibido além do ícone do Bloco de Notas, o da página que você acabou de salvar.
Alterando a cor da página e do texto
A tag <bgcolor> é utilizada para colocar cor na página.
São 216 cores utilizadas na 5Web. Elas são obtidas através das cores primárias:
vermelho, verde e azul. No HTML, para obtermos, por exemplo, a cor azul, coloca assim: 0000ff, ou seja: As duas letras f no final, indica azul. Para colocar vermelho: ff0000. Para colocar verde: 00ff00. No final desta apostila, você tem uma tabela das cores.
Definindo o tamanho da fonte com a tag de cabeçalho
A tag <h1> é que coloca o maior tamanho de fonte, já que é o primeiro nível e é o principal, por isso é o maior tamanho, e <h6> a menor.
<h1>Primeira Página</h1>
<h2>Primeira Página</h2>
<h3>Primeira Página</h3>
<h4>Primeira Página</h4>
<h5>Primeira Página</h5>
<h6>Primeira Página</h6>
Volte a estrutura da página que você está criando e clique no final da linha da tag <body>, onde você colocou a cor da página na tag body, e pressione a tecla Enter.
Digite o seguinte: <h1>Primeira Página</h1>
Salve e na Barra de Tarefas, clique no ícone primeira página. Pressione a tecla F5, para atualizar.
Centralizando o título acima
Volte a estrutura da página e antes do sinal de >, acrescente o atributo:
align=”center”.
A linha deverá ficar assim: <h1 align="center">Primeira Página</h1>.
Salve e na Barra de Tarefas, clique no ícone primeira página. Pressione a tecla F5, para atualizar.
Iframes são quadros que podem ser adicionados no conteudo de uma página HTML, exibindo o conteúdo de uma outra página. Utilizamos IFRAMES para exibir o Mural de Recados, serviço oferecido gratuitamente aqui, permitindo que seu visitante interaja com seu site de forma fácil e segura.
Linha horizontal
A tag <hr> coloca uma linha horizontal.
Volte a estrutura da página. Clique no final da linha acima (depois de </h1>) e pressione a tecla Enter.
Digite a tag <hr>.
Salve e na Barra de Tarefas, clique no ícone primeira página. Pressione a tecla F5, para atualizar.
Atributos da tag <hr>.
size n: espeficica em pixel a altura da linha. Exemplo: <hr size=”3”>.
width n: espeficica em pixel ou em % a largura da linha. Exemplo: <hr size=”3” width=”50%”>.
color n: espeficica a cor. <hr size=”3” width=”50%” color=”#ff0000”>.
Marquee
O elemento html <marquee> é usado para inserir uma área de rolagem de texto"scrolling" , similar a um letreiro. Você pode controlar o comportamento do conteúdo fornecendo alguns atributos extras.
behavior
Define como o texto é rolado dentro da área do letreiro. Os valores possíveis são scroll, slide e alternate. Se nenhum valor for especificado, o valor padrão será scroll.
bgcolor
Define a cor do plano de fundo do letreiro através do nome da cor (ex: red, blue) ou de um valor hexadecimal.
direction
Define a direção da rolagem do texto dentro do letreiro, os possíveis valores são: left, right, up & down. Se nenhum valor for especificado, o valor padrão será "left".
height
Define a altura do letreiro em pixeis ou em um valor percentual.
hspace
Aplica a margem horizontal.
loop
Define o número de repetições da animação do letreiro. Se nenhum valor for especificado assumirá o valor padrão de -1, que significa que a animação será repetida infinitamente.
scrollamount
Define em pixeis o tamanho de rolagem em cada intervalo, o valor padrão é 6.
scrolldelay
Define o intervalo de tempo entre cada animação de rolagem em milissegundos. O valor padrão é 85. Qualquer valor menor que 60 será ignorado e o valor 60 será usado, a menos que seja especificado como truespeed.
truespeed
Por padrão, valores abaixo de 60 milissegundos são ignorados, a menos que o valor truespeed esteja presente, caso esteja estes valores são aceitos.
vspace
Aplica uma margem vertical em pixel ou em valor percentual.
width
Define a largura em pixel ou em um valor percentual.
Exemplo: <marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833" scrollamount="2">Texto que se move entre as margens esquerda e direita</marquee>
Alterando a fonte, tamanho e cor do texto.
Tag <font>.
Alterando a fonte: <font face=”arial”>.
Alterando o tamanho: <font size=”5”>.
Alterando a cor: <font color=”#993300”>.
Para alterar dois ou mais atributos acima, você pode colocar assim:
<font face=”arial” size=”4” color=”#993300”>Linguagem HTML</font>.
Volte à estrutura da página e digite a linha acima. Salve e teste com a tecla F5.
Tag <font>.
Alterando a fonte: <font face=”arial”>.
Alterando o tamanho: <font size=”5”>.
O código do iframe é bem simples e possui alguns atributos que já conhecemos em outras TAGs, como o IMG.
<iframe width='LARGURA' height='ALTURA' frameborder='0' src='http://URL_DA_PAGINA/pagina.html'></iframe>
Explicando os atributos do IFRAME (nem todos foram utilizados no nosso código por serem opcionais):
src = pagina.html - Determina a página ou arquivo que será carregado na região correspondente.
width=x - Especifica o largura do IFRAME, onde x é o valor sendo tanto em pixels quanto porcentagem, por exemplo: 100px
height=x - Especifica o altura do IFRAME, onde x é o valor sendo tanto em pixels quanto porcentagem, por exemplo 200px.
frameborder=x - Determina a espessura da linha divisória que aparece entre a página e o IFRAME. Sendo que x é o valor da linha em pixels.
scrolling = valor - Determina se aparecerá barra de rolagem. Os valores podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de rolagem só aparecerá quando o conteúdo da página ultrapassar o tamanho do frameset).
marginwidth = x - Determina a largura em pixels da margem horizontal.
marginheight = x - Determina a largura em pixels da margem vertical.
vspace=x - Determina o espaço vertical entre o IFRAME e o documento HTML, sendo que x é o valor do espaço em pixels.
hspace=x - Determina o espaço horizontal entre o IFRAME e o documento HTML, sendo que x é o valor do espaço em pixels.
Exemplo:<iframe name="conteudo" width="1000" height="700" frameborder="0" scrolling="auto" src="home.html"> </iframe>
