InícioBuscarRegistrar-seConectar-se

Compartilhe
 

 Introdução a HTML

Ir em baixo 
AutorMensagem
espartans
Administrador
Administrador
espartans

Mensagens Mensagens : 40
Pontos Pontos : 6260
Reputação Reputação : 7
Data de inscrição Data de inscrição : 30/07/2011
Localização Balneário Camboriú

Introdução a HTML Empty
MensagemAssunto: Introdução a HTML   Introdução a HTML Clock-iconTer Ago 09, 2011 8:04 pm

INTRODUÇÃO
HTML significa HyperText Markup Language. Traduzindo para o português seria:
Linguagem de Marcação de Hypertexto.
A linguagem HTML é uma linguagem de formatação de hypertexto, ou seja, HTML não é
uma linguagem de programação como o PHP ou ASP ! Ela apenas delimita um certo
conteúdo através das tags que indicam ao browser como estes devem ser imprimidos na
tela do seu navegador. A HTML é formada por tags, atributos e valores, veja abaixo:


Citação :
<tag atributo="valor">



Devemos destacar também que HTML não é case sensitive, ou seja, tanto faz você
escrever <tag>, <TAG> ou <TaG> que o resultado será o mesmo. Porém por questão de
organização e estética preferimos escrever com todas as letras minúsculas.


ESTRUTURA BÁSICA DE UMA PAGINA HTML

<html>
<head>
<title>
Titulo da Página!
</title>
</head>
<body>
Corpo da Página!
</body>
</html>

<html> : delimita o inicio e o fim dos códigos html
há o atributo version, que permite informar a versão do HTML usado, além do atributo
dir, que serve para indicar a direção do fluxo do texto(pode ser RTL=direita p/ esquerda
ou LTR p/ contrário)
<head> : delimita o cabeçalho de programação da pagina.
Aqui ficam as informações sobre TITULO, NOME DO AUTOR, ...
<title> : determina o texto que será exibido na barra de titulo do browser.
<body> : delimita o corpo da pagina.
Local onde ficam os elementos mostrados ao usuário.

Atributos do <body>

Introdução a HTML 28lbfis


Formatando o Texto:


<p> Delimitador de inicio e fim, definindo um parágrafo.
V Possui o atributo align que permite alinhar os parágrafos. O
alinhamento pode ser:
o Esquerda – left
o Direita – rigth
o Centro – center
o Justifica – justify
Ex: <p align=”center”> Texto Centralizado</p>
<blockquote> Permite a adição de margens à esquerda e à direita, destacando os
elementos em seu interior.
<dd> Cria um parágrafo com recuo
<dt> Cria um parágrafo sem recuo
<pre> Este comando permite que o texto contido nele seja apresentado
exatamente como foi digitado na página.
<marquee> Formata o texto com aspecto de letreiro em movimento. Alguns atributos
são:
• Align: posiciona o texto em relação ao fundo do letreiro.
o Top: posiciona o texto junto à borda superior;
o Middle: posiciona o texto no meio;
o Bottom: posiciona o texto junto à borda inferior;
• Behavior: como deve ser feita a rolagem do texto.
o Scroll: rola o texto da direita para esquerda;
o Slide: rola o texto e depois interrompe a rolagem;
o Alternate: rola o texto uma vez e depois oscila entre as
bordas;
• Direction: define direção de rolagem do texto.
o Left: da direita para esquerda;
o Right: da esquerda para direita;
• Bgcolor: determina a cor de fundo do letreiro.
• Height: define a altura do letreiro em relação à altura da página.
• Hspace: define afastamento horizontal do letreiro com relação
aos demais elementos.
• Loop: define o numero de vezes que o texto rolará na tela
• Scrollamount: define a velocidade de rolagem do texto.
• Scrolldelay: define o tempo entre as rolagens do
texto(em milissegundos)
• Vspace: define afastamento vertical do letreiro com relação aos
• demais elementos.
• Width: define a largura do letreiro em relação à largura da
<br> Define uma qpuáegbrian ad.e linha, se usado isoladamente cria uma linha em branco.
<hr> Cria linhas horizontais e verticais na pagina. Atributos:
• Align: permite alinha horizontalmente a linha.
o Left: alinha junto à margem esquerda;
o Right: alinha junto à margem direita;
o Center: centraliza a linha entre as margens;
• Noshade: remove o aspecto sombreado que simula uma linha em relevo.
• Size: define a espessura da linha em pixels.
• Width: define o comprimento da linha em pixels ou como percentual do tamanho da
tela.
<nobr> Impede quebra de linha, mantendo as palavras ligadas por este comando na mesma linha.
<plaintext> Deste comando para frente tudo é interpretado como texto puro, ignorando os comandos
do HTML, mostrando os comandos junto com o texto.


Sem argumentos o comando <body> adota as seguintes cores:
Texto : preto
Plano de fundo: branco
Links : azuis
OBS: As cores exibidas podem ser diferentes daquelas que programamos, caso o
usuário altere as configurações de exibição de seu navegador;

Cabeçalhos (Headers):

Cabeçalhos podem ser usados em qualquer parte da página em HTML para dar
destaque maior ou menor a algum termo do texto. Existem 6 tamanhos de
cabeçalhos e eles são usados da seguinte forma: <h1> . . . </h1>; permitem
formatar textos de 6 formas diferentes: <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>; o tamanho diminui no sentido que o valor de h aumenta;

Os cabeçalhos têm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabeçalho centralizado</H2>
<H2 ALIGN=RIGHT>Cabeçalho alinhado à direita</H2>
<H2 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default)</H2>
<H2 ALIGN=JUSTIFY>Cabeçalho justificado</H2>

Tipos de Letra:


<b> Exibe o texto em negrito
<i> Exibe o texto em itálico
<u> Exibe o texto em sublinhado
<big> Aumenta o tamanho do texto delimitado
<small> Diminui o tamanho do texto delimitado
<sub> Coloca o texto como subscrito
<sup> Coloca o texto como sobrescrito
<tt> Exibe o texto demarcado com aspecto de maquina de escrever
<blink> Ativa a exibição intermitente do texto delimitado (NETSCAPE)
<em> Exibe texto com um formato diferenciado, similar ao itálico.
<strong> Exibe texto com um formato diferenciado, similar ao negrito.
<cite> Usado em citações de texto
<code> Diferencia textos pertencentes a um programa do restante do texto
< kbd > Indica que parte do texto escrito corresponde a uma tecla a ser pressionada
< var > Permite a indicação de variáveis de um programa


OBS: Todos os comandos acima são usados aos pares, ou seja, tem-se uma tag de
inicio e outra
de fim. Ex: <b> Texto em Negrito </b>

Uso de Fontes:

Basicamente há três atributos para se trabalhar com o comando fonte, por
meio deles vamos definir, tipo, tamanho e cor das fontes a serem utilizadas. Estes são
citados abaixo:

Citação :

<font face=”nome da fonte”> Seleciona o tipo de fonte a ser usada no texto
<font size=”tamanho da fonte”> Seleciona o tamanho da fonte a ser usada
<font color=”cor da fonte”> Seleciona a cor da fonte a ser usada no texto



Ex:<font face=”Arial” size=”2” color=”red”>

Uso de Listas:

Podemos trabalhar com dois tipos de listas, as listas ordenadas, no qual
podemos numerar cada item que a compõe, e as listas não ordenadas, que são
identificadas por marcadores à esquerda dos itens.
Listas Não-Ordenadas
• são delimitadas pelos comandos <ul>...</ul>
• cada elemento da lista deve vir precedido do comando <li>
• o uso desse comando dentro de um bloco já existente permite a criação de
subitens.

Atributos das listas não-ordenadas


Citação :
Type Define o tipo de marcador a ser utilizado em cada item da lista. Algumas
opções são:
V circle – tipo circular
V square – tipo quadrado
V disk – tipo elíptico
dir Define a orientação da lista (pode ser RTL=direita p/ esquerda ou LTR p/
contrário)


Como inserir imagem como marcador:
<ul style="list-style-image: url(sol.jpg);">
OBS: Para criação deste tipo de listas pode-se usar <menu> ou <dir>
Listas Ordenadas :
• são delimitadas pelos comandos <ol>...</ol>
• cada elemento da lista deve vir precedido do comando <li>
• o uso desse comando dentro de um bloco já existente permite a criação de
subitens.

Atributos das listas ordenadas


Citação :
type Define o tipo de marcador a ser utilizado em cada item da lista. Algumas
opções são:
V numeração cardinal
V numeração com letras maiúsculas ou minúsculas
V numeração romana
start Define o numero inicial da numeração
value Quando utilizado com o comando <li> é possível forçar uma numeração.
Dir Define a orientação da lista (pode ser RTL=direita p/ esquerda ou LTR p/
contrário)


Listas de Definições

V Uma lista de definições não é constituída por uma série de itens
mas por termos acompanhados das descrições de seus significados.
V As listas de definições criam-se com o elemento <dl> ("definition list.") O
nome de cada termo fica dentro de um elemento <dt> ("definition term") e
a sua descrição fica num elemento <dd> ("definition description".)
V Estrutura(Exemplo):
<dl>
<dt>HTML</dt>
<dd>Linguagem de Marcação</dd>
<dt>CET</dt>
<dd>Alunos de Web</dd>
</dl>
Dentro de um elemento <dd> podemos colocar parágrafos, quebras de
linha, imagens, outras listas, etc.


<compact> Reduz o espaçamento vertical entre os itens da lista



Uso de Cores:

As cores possuem um papel muito importante na composição de webs. São
indicadas em valores RGB, ou seja, que para conseguir uma cor qualquer
misturaremos quantidades de Vermelho, Verde e Azul.
Os valores RBG são indicados em numeração hexadecimal, em base 16. (Os
dígitos podem crescer até 16). Como não existem tantos dígitos numéricos se utilizam
as letras da A à F.
Para conseguir uma cor, misturaremos valores desta maneira:
RR
GGBB
Onde cada valor pode crescer desde 00 até FF.

O uso de cores torna o processo de comunicação mais eficiente pois:

• deixa os terminais de vídeo mais bonitos e agradáveis
• auxilia a visualização de conexões em desenhos complexos, melhorando a
legibilidade da informação
• permite criar imagens realistas
• possibilita indicar mecanismos de segurança ou que precisem de destaque.

Imagens:

O uso de imagens nas pàginas, pode proporcionar uma visão mais agradável
ao usuário, porem o seu uso deve ser cuidadoso, evitando causar sobrecarga na
pagina, seja pelo uso de muitas imagens, ou do tamanho destas, o uso abusivo de
imagens pode distrair o usuário, dificultando assim o acesso à informação por ele
procurado.
Veremos como inserir e organizar as imagens na pagina de forma a garantir uma
navegação sem dificuldades para o usuário. A etiqueta utilizada para inserir uma
imagem è <img> e juntamente com ela è necessário fazer uso do atributo src que
indica a imagem a ser utilizada. Veja abaixo, como ficaria a sintaxe básica:


<img src="caminho para a imagem">


O atributo src è apenas um dos atributos que podemos utilizar, abaixo estão
descritos outros atributos.



ATRIBUTO | Descrição

Alt Exibe uma breve descrição da imagem
Height Define a altura a imagem em pixels
Width Define a largura a imagem em pixels
Border Define o tamanho em pixels do quadro que rodeia a imagem
Vspace Indica o espaço livre vertical, em pixels, entre a imagens e os
outros elementos a seu redor
Hspace Indica o espaço livre horizontal, em pixels, entre a imagens e os
outros elementos a seu redor
Lowsrc Serve para indicar um arquivo de baixa resolução que vai ser
carregado antes da figura principal, caso esta demore a ser
exibida.



Tipos de Arquivos para Imagens:

Tipos de imagens (usadas na web)
As imagens digitais são compostas por pixels, picture elements.
Cada pixel é composto por um mapa de bits - os bits são unidades de informação
compostas por pontos com sinal elétrico ou sem sinal elétrico.
Os sinais elétricos dos bits formam malhas de sinais com ou sem sinal elétrico que
são representados por 0 ou 1. Um ponto com sinal elétrico é representado por um
algarismo 1 e um ponto sem o sinal elétrico é representado por um 0
De acordo com disposição dos bits nos pixels, as imagens podem ser:

 Imagens bitmap
São as imagens digitalizadas por scanners, fotos digitais, imagens manipuladas em
programas de edição de imagens, como o Photoshop. São compostas por mapas
com as coordenadas de cada ponto do pixel e o seus valores de cor, brilho e
intensidade.
 Imagens Vetoriais
São produzidas a partir de linhas e curvas definidas por objetos matemáticos.
Em Internet se utilizam principalmente dois tipos de arquivos gráficos GIF e
JPG, posteriormente o PNG pensados especialmente para otimizar o tamanho que
ocupam em disco, já que os arquivos pequenos se transmitem mais rapidamente
pela rede.
Os formatos abaixo são utilizados para a publicação de imagens na web. Cada um tem
características e aplicações muito específicas:
‰ GIF (Graphic Interchance Format) - formato adequado para publicar letras, gráficos e
imagens com grandes áreas de cor uniforme.
‰ JPEG (Joint Photographic Experts Group) - adequado para comprimir fotos.
‰ PNG (Portable Network Graphics) - criado mais recentemente (em 1995), é um
formato alternativo ao GIF, que permite o controle da transfarência por percentuais.
GIF : Surgiu em 1987 com a proposta de substituir o formato em branco e preto.
Com este formato gráfico podemos utilizar conjuntos de 256 colores ou menos.
Este é um detalhe muito importante, visto que quanto menos cores utilizarmos na
imagem, em geral, menos ocupará o arquivo. Às vezes, mesmo utilizando menos
cores em um gráfico, este não perde muita qualidade, chegando a ser inapreciável
à vista. Em alguns programas podemos modificar a quantidade de cores ao salvar o
arquivo, em outros, fazemos enquanto criamos o gráfico.
JPG : Foi finalizado em 1992 e usando uma compressão diferente do LZW, usada
pelo GIF, conseguiu um ótimo equilíbrio entre tamanho de arquivo, detalhes e
quantidade de cores da imagem. Apresentou-se como a melhor alternativa para
imagens com mais de 256 cores mantendo o tamanho do arquivo reduzido, ganhou
ainda mais popularidade quando o mosaic, primeiro browser da web, ganhou
suporte a ele. Hoje o JPG (ou JPEG) é o formato mais popular de imagem não só na
web, mas também em equipamentos digitais como máquinas fotográficas.JPG
trabalha sempre com 16 milhões de cores, ideal para fotografias.
PNG : É um formato de código aberto que foi criado em 1995 para resolver
problemas de patentes pelo uso do GIF. Até 2003, toda empresa que quisesse usar
a biblioteca do GIF em seus softwares precisava pagar royalties aos criadores. O
formato PNG permite comprimir as imagens sem perda de qualidade e retirar o
fundo de imagens com o uso do canal alfa. O canal alfa, diferentemente da
transparência do GIF, é capaz de definir o nível de opacidade de cada pixel,
adequando-se a qualquer fundo de um site ou apresentação, sem serrilhamento,
algo que não se consegue com os outros formatos populares. Por isso é um formato
válido para imagens que precisam manter 100% da qualidade para reuso. Possui
tamanho do arquivo um pouco maior que o GIF e JPG, mas seu uso depende muito
do caso e também do tipo de compressão usado.

Links

Com links é possível fazermos ligações de uma região de texto (ou imagem) a um
outro documento,texto ou arquivo. O browser destaca essas regiões e imagens do
texto, indicando que são ligações de hipertexto - também chamadas hypertext links
ou hiperlinks ou simplesmente links.
Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte
forma:

<A HREF = "arq_destino">âncora</A>

onde:
arq_destino
é o URL do documento de destino;
âncora
é o texto ou imagem que servirá de ligação hipertexto do documento sendo
apresentado para o documento de destino.
Em função do destino, os links são classicamente agrupados da seguinte forma:
• Links internos: os que se dirigem a outras partes dentro da mesma
página.
• Links locais: os que se dirigem a outras páginas do mesmo site web.
• Links remotos: os que se dirigem à páginas de outros sites web.
• Links com endereços de correio: para criar uma mensagem de correio
dirigido a um endereço.
• Links com arquivos: Para que os usuários possam fazer download de
arquivos.
EXEMPLOS DE USO:
LINKS INTERNOS
1) Criar o link :
<a href="#abaixo">Ir abaixo</a>
2) Determinar o ponto da página para onde o link aponta:
<a name="abaixo"></a>
LINKS LOCAIS
<a href="arquivo.html">nome do link</a>
LINKS REMOTOS
<a href=http://www.cet.edu.br>Site do CET</a>

LINKS COM ENDEREÇO DE CORREIO

<a href="mailto:marcos@gmail.com">marcos@gmail.com</a>
Além do endereço do correio eletrônico do destinatário, também podemos colocar
no link o assunto da mensagem. Isto se consegue colocando depois do endereço de
correio uma interrogação, a palavra subject, o sinal de igual (=) e o assunto em
concreto.
<a href="malito:marcos@gmail.com?subject=Testando">marcos@gmail.com</a>
Podemos colocar outros atributos de mensagem com uma sintaxe parecida. Neste
caso indicamos também que o correio deve ir com cópia a cet@edu.br
<a href="mailto: marcos@gmail.com?subject=Testando&cc= cet@edu.br"> marcos@gmail.com </a>
LINKS COM ARQUIVOS
<a href="arquivo.zip">Baixar arquivo.zip</a>

Isso ae galera, pra quem tá começando com programação ou Web design é bem útil!!!

Fonte: http://www.marcosfreitasweb.com/Arquivos/HTML.pdf


Introdução a HTML 51460120882973271467
Voltar ao Topo Ir em baixo
https://logdesigner.forumbrasil.net
JuniorSan
Moderador
Moderador
JuniorSan

Mensagens Mensagens : 33
Pontos Pontos : 6237
Reputação Reputação : 1
Data de inscrição Data de inscrição : 06/08/2011
Idade Idade : 30
Localização Parana - Toledo

Introdução a HTML Empty
MensagemAssunto: Re: Introdução a HTML   Introdução a HTML Clock-iconQua Ago 10, 2011 12:50 pm

:pale: nossa muita codigo pra eu gravar nao gravei nem metade disso ai ainda susauhsuhusasuhs

Muito obrigado Spartans vai me ajudar muito na edição do layout 8)


email: moacirbonfimjunior@hotmail.
Voltar ao Topo Ir em baixo
LokurA
Administrador
Administrador
LokurA

Mensagens Mensagens : 28
Pontos Pontos : 6241
Reputação Reputação : 1
Data de inscrição Data de inscrição : 07/08/2011
Idade Idade : 25
Localização My Home

Introdução a HTML Empty
MensagemAssunto: Re: Introdução a HTML   Introdução a HTML Clock-iconQua Ago 10, 2011 10:08 pm

Muito bom man.. levou meu + ^^
Voltar ao Topo Ir em baixo
http://lokuradesign.weebly.com/
Conteúdo patrocinado




Introdução a HTML Empty
MensagemAssunto: Re: Introdução a HTML   Introdução a HTML Clock-icon

Voltar ao Topo Ir em baixo
 
Introdução a HTML
Voltar ao Topo 
Página 1 de 1

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
Log Designer :: Informática :: Programação-
Ir para: