HTML - Hipertext Markup Language (Linguagem de Anotação de Hipertexto) - É uma linguagem de "programação" simples para criar documentos HIPERTEXTO, ao qual o texto poderá ser escrito sem se preocupar por qual sistema operacional e/ou computador será lido.
Se trata de uma linguagem interpretada através dos Browsers (navegadores) disponíveis no mercado, cada Browser pode interpretar o HTML com suas particularidades que convém.
A internet é possui sua base em três pilares
URL - Que é um esquema de nomes para localização de fontes de informação na Web
HTTP - Que é um protocolo de acesso para acessar estas fontes
HTML - Que é uma "linguagem" de Hypertexto para fácil navegação entre as fontes de informação.
Alguns especialistas não consideram o HTML como uma linguagem de programação, e sim como uma linguagem de marcação de textos.À princípio, o fato de falar de uma linguagem informática pode fazer com que alguém se desanime, mas não é para se assustar, pois o HTML não deixa de ser mais que uma forma um tanto peculiar de dar formatos aos textos e imagens que pretendemos ver por meio de um navegador.
É importante ter claro tudo isso visto que em função de seus objetivos, pode ser que mais do que aprender HTML, resulte mais interessante aprender o uso de uma aplicação para a criação de páginas.
Sendo assim, uma página é um arquivo onde está contido o código HTML em forma de texto. Estes arquivos tem extensão .html ou .htm (é indiferente qual deles utilizar). De modo que quando programarmos em HTML, o faremos com um editor de textos e salvaremos nossos trabalhos com extensão .html, por exemplo, minhapagina.html.
Conselho: Utilize sempre a mesma extensão em seus arquivos HTML. Isso evitará que você se confunda ao escrever os nomes dos seus arquivos umas vezes com .html e outras com .htm. E se você trabalha com uma equipe em um projeto, é ainda mais importante que todos estejam de acordo com a mesma extensão
Um documento Hypertexto contém trechos de texto parecidos com textos que escrevemos em um editor de textos. Podemos escrever o documento HTML no editor Notepad ou no WordPad por exemplo. O Html é uma linguagem que possui centenas de palavras reservadas e um par de chaves angulares "< >", estas marcações entre estes sinais são chamadas de TAGS.
TAG <HTML> é colocada no começo do documento informando que se trata de um texto HTML
até que seja encontrado a TAB </HTML> informando que chegou o fim do texto HTML.
TAG <HEAD> serve para declarar cabeçalho de uma página, normalmente contém títulos e sub-títulos de uma página. Para finalizar o cabeçalho utiliza-se </HEAD>.
TAG <TITLE> serve para declarar o Título da Página. Finaliza-se com </TITLE>. O texto será mostrado na barra de título do browser.
TAG <BODY> serve para escrever as Linhas detalhes, o texto principal ou desenvolvimento do assunto da página. Finaliza-se com </BODY>
TAG <FONT> especificar as características do fonte, como cor e tamanho da Fonte.
TAG <Hn> usada para criar Tópicos dentro do texto da página. No Exemplo abaixo uso para escrever o tópico: INTRODUÇÃO AO HTML e o sub-tópico: O que é Html. Escreve seus documentos de forma que os níveis dos tópicos e sub-tópicos reflitam sua organização. a TAG <Hn> possui 6 níveis, onde n pode ser numerado de 1 a 6, sendo o 1 o número de maior destaque.
Todo documento começa com a TAG <HTML> e termina com </HTML>.
No código abaixo, perceba que cada TAG é fechada com a barra "/" para sinalizar o fechamento do trecho que está sendo formatado.
Todo documento deve possuir a seção cabeçalho, TAG <HEAD> que contém a TAG<Title>.
Abaixo um código escrito em HTML, o que está em azul são comandos HTML, em vermelho comandos de definições do fonte (cor e tamanho das letras por exemplo). Em pretos são os textos que irá aparecer no Browser.
_________________________________________________________________________________
<HTML>
<!- qualquer tipo de comentário sobre o documento ->
<HEAD>
<TITLE>Primeiro Documento HTML</TITLE>
</HEAD>
<BODY>
<H1>INTRODUÇÃO AO HTML</H1>
<H2>O que é HTML ?</H2>
<Font color="BLUE" size="4">HTML - Hipertext Markup Language(Linguagem de Anotação de Hipertexto) - É uma linguagem de "programação" simples para criar documentos</Font>
<Font color="RED" size="4">HIPERTEXTO</Font>
<H2>Comando Hn para que serve?</H2>
<Font color="BLUE" size="4">Hn (onde n é um número), serve para definir nível de cabeçalho dentro de um texto, o texto "INTRODUÇÃO AO HTML" foi definido com H1, enquanto que os demais como H2, perceba que o título principal possui tamanho maior que os sub-títulos</Font>
</BODY>
</HTML>
_________________________________________________________________________________
Salvar no diretório (exemplo D:\Eder\HTML\primeiro.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\primeiro.html, vejamos o resultado:
Pois bem, agora vamos aprender NOTAÇÕES para FORMATAÇÃO DE TEXTO.
Todo caractere que aparece na página possui seu tamanho, cor e tipo de fonte ao qual pode ser definido para o browser através destas notações:
<I> ... </I> - Texto em Itálico
<B> ... </B> - Texto em Negrito
<U> ... </U> - Texto Sublinhado
<BLINK> ... </BLING> - Texto efeito Piscante
<BIG> ... </BIG> - Texto Maior
<SMALL> ... </SMALL> - Texto Menor
<SUB> ... </SUB> - Texto Subscrito
<SUP> ... </SUP> - Texto Sobrescrito
<CENTER> ... </CENTER> - Texto alinhado no Centro da Página
Vamos acrescentar a formatação Italico no Tópico e vamos sublinhar os sub-tópicos no exemplo abaixo:
____________________________________________________________________
<HTML>
<!- Documento sobre Formatação de Texto ->
<HEAD>
<TITLE>Segundo Documento HTML</TITLE>
</HEAD>
<BODY>
<H1><I>INTRODUÇÃO AO HTML</I></H1>
<H2><U>O que é HTML ?</U></H2>
<Font color="BLUE" size="4">HTML - Hipertext Markup Language(Linguagem de Anotação de Hipertexto) - É uma linguagem de "programação" simples para criar documentos</Font>
<Font color="RED" size="4">HIPERTEXTO</Font>
<H2><U>Comando Hn para que serve?</U></H2>
<Font color="BLUE" size="4">Hn (onde n é um número), serve para definir nível de cabeçalho dentro de um texto, o texto "INTRODUÇÃO AO HTML" foi definido com H1, enquanto que os demais como H2, perceba que o título principal possui tamanho maior que os sub-títulos</Font>
</BODY>
</HTML>
____________________________________________________________________
Salvar no diretório (exemplo D:\Eder\HTML\primeiro.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\primeiro.html, vejamos o resultado:
Bom Agora vamos criar uma página de lista de cardápio de um restaurante, mencionando o prato e o conteúdo deste prato. Para criar Listas usamos a TAG<LI>.
As listas de itens no HTML pode ser:
- Não Numeradas - TAG <UL>
- Numeradas - TAG <OL>
- de definições - TAG <DT> e <DD>
_________________________________________________________________________________
Listas Não Numeradas
Para criar uma lista não numerada, devemos usar a TAB<UL> com o atributo type, onde você pode indicar qual será o indicador de itens da lista. Os possíveis valores são: CIRCLE, DISC, SQUARE,
<HTML>
<!- Documento de HTML referente cardápio ->
<HEAD>
<TITLE>Segundo Documento HTML</TITLE>
</HEAD>
<BODY>
<H1>RESTAURANTE BOM APETITE</H1>
<UL type="disc">
<LI> Contra-Filé à Cubana
<LI> Virado a Paulista
<LI> Macarrão a Moda
<LI> Feijoada da Casa </UL>
</BODY>
</HTML>
Salvar no diretório (exemplo D:\Eder\HTML\segundo.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\segundo.html, vejamos o resultado:
_________________________________________________________________________________
Listas Numeradas
Listas Numeradas
Para criar uma lista numerada, devemos usar a TAB<OL> preenchendo dois atributos START (indica a partir de qual valor a lista será numerada) e TYPE (indica o tipo de marcador).Tipos de Marcador:
A - Sequência em letras maiúsculas.
a - Sequência em letras minúsculas.
I - Algarismos romanos maiúsculos.
i - Algarismos romanos minúsculos.
1 - Sequência numérica.
<HTML>
<!- Documento de HTML referente cardápio ->
<HEAD>
<TITLE>Segundo Documento HTML</TITLE>
</HEAD>
<BODY>
<H1>RESTAURANTE BOM APETITE</H1>
<OL start=1 type=1>
<LI> Contra-Filé à Cubana
<LI> Virado a Paulista
<LI> Macarrão a Moda
<LI> Feijoada da Casa </OL>
</BODY>
</HTML>
Salvar no diretório (exemplo D:\Eder\HTML\terceiro.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\terceiro.html, vejamos o resultado:
_________________________________________________________________________________
Listas de Definições
Uma lista de definições normalmente consiste em alternar os tópicos em tabulação.
<HTML>
<!- Documento de HTML referente lista de definições ->
<HEAD>
<TITLE>Quarto Documento HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT> Contra-Filé à Cubana
<DD> Arroz à Grega
<DD> Bife à Milaneza
<DD> Ervilha na manteiga
<DD> Banana e Abacaxi Empanado
<DD> Bacon
<DT> Virado a Paulista
<DD> Arroz
<DD> Tutu de Feijão
<DD> Couve refogada
<DD> Banana Frita
<DD> Bisteca de Porco
<DT> Macarrão à Moda
<DD> Macarrão espaguete ao Sugo
<DD> Frango Assado
<DT> Feijoada da Casa
<DD> Feijoada
<DD> Couve Refogada e Farofa
<DD> Bisteca de Porco
</BODY>
</HTML>
Salvar no diretório (exemplo D:\Eder\HTML\quarto.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\quarto.html, vejamos o resultado:
_________________________________________________________________________________
Listas Intercaladas
As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo resultados bastante interessantes. A pratica é que vai mostrar qual o número máximo de listas que vale a pena intercalar. Pode-se inclusive ter um parágrafo, intercalando com uma lista que contenha um único item.
<HTML>
<!- Documento de HTML referente lista Intercaladas ->
<HEAD>
<TITLE>Quinto Documento HTML</TITLE>
</HEAD>
<BODY>
<UL>
<LI> Contra-Filé à Cubana
<UL>
<LI> Arroz à Grega
<LI> Bife à Milaneza
<LI> Ervilha na manteiga
<LI> Banana e Abacaxi Empanado
<LI> Bacon
</UL>
<LI> Virado a Paulista
<UL>
<LI> Arroz
<LI> Tutu de Feijão
<LI> Couve refogada
<LI> Banana Frita
<LI> Bisteca de Porco
</UL>
<LI> Macarrão à Moda
<UL>
<LI> Macarrão espaguete ao Sugo
<LI> Frango Assado
</UL>
<LI> Feijoada da Casa
<UL>
<LI> Feijoada
<LI> Couve Refogada e Farofa
<LI> Bisteca de Porco
</UL>
</UL>
</BODY>
</HTML>
Salvar no diretório (exemplo D:\Eder\HTML\quinto.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\quinto.html, vejamos o resultado:
_________________________________________________________________________________
Caracteres Especiais
No texto acima, ou nos exemplos anteriores, as palavras são acentuadas diretamente no editor de texto. Mas nem todos os browsers entendem as letras diferentes do padrão americano. Assim como existe a tabela de ASCII, o HTML tem a sua própria tabela e maneira de codificar caracteres acentuados e caracteres especiais. Algumas situações faz com que seja necessário a utilização dos códigos da tabela do HTML, por exemplo para inserir "<" ou ">" na sua pagína, para que o interpretador não entenda se tratar de uma tag.
<HTML>
<!- Documento de HTML referente lista Intercaladas ->
<HEAD>
<TITLE>Quinto Documento HTML</TITLE>
</HEAD>
<BODY>
<UL>
<LI> Contra-Filé à Cubana
<UL>
<LI> Arroz à Grega
<LI> Bife à Milaneza
<LI> Ervilha na manteiga
<LI> Banana e Abacaxi Empanado
<LI> Bacon
</UL>
</UL>
</BODY>
</HTML>
Salvar no diretório (exemplo D:\Eder\HTML\sexto.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\sexto.html, vejamos o resultado:
Apesar de confuso, este texto poderá ser mostrado em qualquer browser independente de língua ou plataforma. Se fosse utilizado o texto normal (sem notações especiais), talvez algum browser utilizando linguagem diferente não entenderia o caractere.
________________________________________________________________________________
Texto Pré-Formatado
A maracação <PRE> delimita uma área de texto em que espaços, novas linhas e tabulações são mantidas.O texto será apresentado exatamente da forma que foi digitado preservando o formato do texto. Marcação <P> dá espaço entre as linhas. Note neste exemplo o que foi digitado sem a
marcação <PRE> perde a formatação, ao contrario do texto digitado entre a marcação <PRE>.
<HTML>
<!- Documento de HTML referente utilização de Texto Pré-Formatado ->
<HEAD>
<TITLE>Setimo Documento HTML</TITLE>
</HEAD>
<BODY>
Contra-Filé a Cubana
Bife à Milaneza
Ervilha na Manteiga
Banana e Abacaxi Empanado
Bacon
<P>
<P>
<PRE>
Contra-Filé a Cubana
Bife à Milaneza
Ervilha na Manteiga
Banana e Abacaxi Empanado
Bacon
</PRE>
</BODY>
</HTML>
Salvar no diretório (exemplo D:\Eder\HTML\setimo.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\setimo.html, vejamos o resultado:
________________________________________________________________________________
Inserindo Imagens
Antes de tudo, As imagens a ser inseridas no texto deve ser no formato ".gif" , ".jpg", ",png"
Para inserir a imagem no meio do documento, basta utilizar a tag <IMG> com seus respectivos atributos, destacamos neste exemplo:
SRC - Indica o Caminho e o nome do arquivo de imagem que quer exibir na tela
ALT - Representa o texto alternativo.
<HTML>
<!- Documento de HTML referente Inserção de Imagens ->
<HEAD>
<TITLE>Oitavo Documento HTML</TITLE>
</HEAD>
<BODY>
<IMG src="d:\Eder\EBD\BLOG\1002.png" alt="Escola Bíblica">
</BODY>
</HTML>
Salvar no diretório (exemplo D:\Eder\HTML\oitavo.html)
Para executar o texto HTML, entre no browser no local do link digite onde está o documento HTML que deseja interpretar. No caso deve ser D:\Eder\HTML\oitavo.html, vejamos o resultado:
________________________________________________________________________________
Adicionando um Link à Imagem
Também podemos colocar a imagem como um link, quando o usuário clicar na imagem abre uma
outra página. Basta acrescentar a marcação HREF como segue abaixo:
<HTML>
<!- Documento de HTML referente Inserção de Imagens ->
<HEAD>
<TITLE>Oitavo Documento HTML</TITLE>
</HEAD>
<BODY>
<A HREF="setimo.html">
<IMG src="d:\Eder\EBD\BLOG\1002.png" alt="Escola Bíblica">
</A>
</BODY>
</HTML>
________________________________________________________________________________
Alinhamento das imagens
Para alinha a imagem na Tela podemos utilizar os atributos:
ALIGN da tabe <IMG>, os possíveis valores desta atributo são:
TOP, MIDDLE, BOTTOM, LEFT, RIGHT:
<HTML>
<!- Documento de HTML referente Inserção de Imagens ->
<HEAD>
<TITLE>Oitavo Documento HTML</TITLE>
</HEAD>
<BODY>
<A HREF="setimo.html">
<IMG src="d:\Eder\EBD\BLOG\1002.png" alt="Escola Bíblica" align="Botton">
</A>
</BODY>
</HTML>
________________________________________________________________________________
Imagens Mapeadas
Quando se adiciona uma imagem no texto, já vimos que podemos adicionar um link na imagem para que quando o usuario clicar seja chamada uma nova página. Podemos também fazer esta chamada desta link, página ou URL mapeando esta imagem por região, esta seria uma forma gráfica de criar links entre páginas HTML.
Para isso usamos a tag <MAP> ela possui um atributo chamado NAME, este atributo indicar qual mapa será utilizado: CIRC ou CIRCLE, RECT, POLY , ou seja mapeamento em área de círculo, retângulo ou triângulo. Será definido as coordenadas desta área na imagem e quando o usuário estiver nela e clicar, será aberto o link. É viável trabalhar com imagens em um programa específico para tratamento de imagens, onde será possivel conseguir as coordenadas da imagens com as posições corretas.
<HTML>
<!- Documento de HTML referente Imagens Mapeadas ->
<HEAD>
<TITLE>Oitavo Documento HTML</TITLE>
</HEAD>
<BODY>
< MAP name="MAPA">
<AREA shape="circle"
coords="33, 32, 28"
HREF="setimo.html">
<IMG src="d:\Eder\EBD\BLOG\1002.png" alt="Escola Bíblica">
</BODY>
</HTML>
________________________________________________________________________________
Formatando o Corpo de sua página
A tag BODY serve para configurar algumas características de sua página.
vejamos alguns atributos interessantes desta tag:
BACKGROUND
Insere imagem como fundo da tela da página. Tenha cuidado para que a imagem de fundo não prejudique a leitura do texto.
<BODY background="imagem.jpg">
... corpo da página ...
</BODY>
Para que a imagem fique fixa no fundo durante a rolagem de tela, acrescente
<BODY background="imagem.jpg" bgproperties="fixed">
... corpo da página ...
</BODY>
BGCOLOR
serve para definir cor padrão para o fundo da página
<BODY bgcolor="tan">
... corpo da página ...
</BODY>
TEXT
serve para definir cor do texto normal de uma página, exceto os links
Desta forma todo o texto irá aparecer em azul.
<BODY text="blue">
... corpo da página ...
</BODY>
LINK, VLINK, ALINK
serve para definir cor dos links na minha página
LINK - Link ainda não visitado
VLINK - Link já visitado
ALINK - Link ativado
<BODY bgcolor="tan" text="blue" link="white" vlink="red" alink=green>
... corpo da página ...
</BODY>
PADRÕES DE CORES
Você deve tomar cuidado ao definir cores em sua página. Nos exemplos acima estamos utilizando os nomes das cores para fazer nossas definições, é recomendável a utilização dos valores RGB conforme definido na tabela de cores, veja link abaixo.
Clique aqui para obter as tabelas de cores e valores em RGB
Outros Cursos de HTML
Clique para acessar - Curso de HTML - Site Criar Web
http://www.htmlprogressivo.net/2013/04/Que-programa-se-usa-para-criar-um-site.html
http://www.baixaki.com.br/download/adobe-dreamweaver.htm
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Fun%C3%A7%C3%B5es
