Curso html
richard_romancini
564 views
6 slides
Oct 21, 2011
Slide 1 of 6
1
2
3
4
5
6
About This Presentation
No description available for this slideshow.
Slide Content
1
HTML
HTML Básico
HTML - HyperText Markup Language (Linguagem de Formatação de Hipertexto) - é
uma codificação padrão para a formatação de páginas da Internet.
Utilizando o HTML puro (que pode ser escrito no Bloco de Notas do Windows e depois
salvo como "html" para ser lido no navegador) é possível escrever toda uma página
para a web.
Os comandos ou instruções de formatação da linguagem HTML são relativamente
simples, e embora praticamente ninguém mais construa páginas escrevendo o código
(os programas de edição para a web, como o Dreamweaver ou o próprio Word geram-
no), seu conhecimento é util, pois utilizando os códigos de formatação é possível
"incrementar" bastante sites e blogs. Sobretudo quando as ferramentas de edição dos
construtores de postagens ou páginas web não possuem recursos relativos a alguns
elementos e atributos que podem ser inseridos via codificação.
Além disso, às vezes, é bem mais fácil alterar a posição de elementos (textos, imagens
etc.) por meio do "recortar/colar" do código. E a compreensão de uma página web
como um suporte aberto a materiais de diferentes procedências - linkados no HTML -
também é favorecida.
A linguagem HTML
O aspecto que singulariza a linguagem HTML é o uso de tags (também chamadas de
etiquetas ou marcações) que são elementos entre os sinais < e > que indicam algum
tipo de formatação. Geralmante as tags aparecem em duplas, uma de abertura e outra
de fechamento, neste caso o sinal "/" acompanha a final, como no exemplo, abaixo:
<tag>exemplo</tag>
Ao mesmo tempo, vale notar que as tags podem possuir atributos, que correspondem
a certos níveis da formatação que serão aplicados ao elemento (texto, imagem etc.)
que estiver entre a tag de abertura e a de fechamento.
<tag atributo1="alguma_coisa" atributo2="outra_coisa">exemplo</tag>
HTML
HTML Básico
HTML - HyperText Markup Language (Linguagem de Formatação de Hipertexto) - é
uma codificação padrão para a formatação de páginas da Internet.
Utilizando o HTML puro (que pode ser escrito no Bloco de Notas do Windows e depois
salvo como "html" para ser lido no navegador) é possível escrever toda uma página
para a web.
Os comandos ou instruções de formatação da linguagem HTML são relativamente
simples, e embora praticamente ninguém mais construa páginas escrevendo o código
(os programas de edição para a web, como o Dreamweaver ou o próprio Word geram-
no), seu conhecimento é util, pois utilizando os códigos de formatação é possível
"incrementar" bastante sites e blogs. Sobretudo quando as ferramentas de edição dos
construtores de postagens ou páginas web não possuem recursos relativos a alguns
elementos e atributos que podem ser inseridos via codificação.
Além disso, às vezes, é bem mais fácil alterar a posição de elementos (textos, imagens
etc.) por meio do "recortar/colar" do código. E a compreensão de uma página web
como um suporte aberto a materiais de diferentes procedências - linkados no HTML -
também é favorecida.
A linguagem HTML
O aspecto que singulariza a linguagem HTML é o uso de tags (também chamadas de
etiquetas ou marcações) que são elementos entre os sinais < e > que indicam algum
tipo de formatação. Geralmante as tags aparecem em duplas, uma de abertura e outra
de fechamento, neste caso o sinal "/" acompanha a final, como no exemplo, abaixo:
<tag>exemplo</tag>
Ao mesmo tempo, vale notar que as tags podem possuir atributos, que correspondem
a certos níveis da formatação que serão aplicados ao elemento (texto, imagem etc.)
que estiver entre a tag de abertura e a de fechamento.
<tag atributo1="alguma_coisa" atributo2="outra_coisa">exemplo</tag>
2
A construção de uma página e as principais marcações
Algumas observações iniciais importantes: 1) ninguém decora TODAS as marcações -
ter em mente as principais, como as de formatações de texto, imagens e links já é
suficiente para muita coisa; 2) o mais interessante no estudo feito aqui é a
compreensão da linguagem; 3) por isso mesmo, abaixo só são indicados algumas das
muitas outras marcações existentes. De qualquer modo, ao fim dessa página, são
sugeridos alguns sites com mais conteúdo sobre o tema, para quem desejar
aprofundar-se e ter como material de consulta; e 4) o HTML não diferencia, na
escritura das tags, o uso de letras maiúsculas ou minúsculas, então, tanto faz na
construção de uma página ou edição de documento como se digita.
A estrutura básica de uma página HTML consiste no seguinte:
<html> - Indica que o documento é o de um arquivo HTML
<head><title>Título do documento (irá aparecer na barra superior do
navegador)</title></head>
<body> - Inicia a página propriamente dita
Aqui estarão os textos...
imagens...
links...
enfim, todos os elementos da janela principal do navegador, vistos no "corpo" do
texto.
</body> - Finaliza o corpo do texto
</html> - Fecha a construção da página
Formatações de texto
Cabe notar que existem dois tipo de formatação para textos e caracteres: a lógica e a
física. A visualização tende a ser parecida, no entanto, a diferença é que a segunda
opera com valores específicos (por exemplo, o tamanho do texto), enquanto a
primeira utiliza instruções que serão interpretadas pelo navegador. Abaixo as
principais formatações, respectivamente em formato lógico e físico.
negrito -
<strong>texto </strong> ou <b>texto</b>
itálico - <em>texto</em>ou<i> texto </i>
tachado - <strike>texto </strike>ou<s> texto</s>
Agora, só formatação lógica:
tamanho maior <big>texto</big>tamanho menor - <small>texto</small>subscrito -
<sub>texto</sub>sobrescrito - <sup>
texto
</sup>máquina de escrever - <tt> texto</tt>
sublinhado - <u>texto</u>
A construção de uma página e as principais marcações
Algumas observações iniciais importantes: 1) ninguém decora TODAS as marcações -
ter em mente as principais, como as de formatações de texto, imagens e links já é
suficiente para muita coisa; 2) o mais interessante no estudo feito aqui é a
compreensão da linguagem; 3) por isso mesmo, abaixo só são indicados algumas das
muitas outras marcações existentes. De qualquer modo, ao fim dessa página, são
sugeridos alguns sites com mais conteúdo sobre o tema, para quem desejar
aprofundar-se e ter como material de consulta; e 4) o HTML não diferencia, na
escritura das tags, o uso de letras maiúsculas ou minúsculas, então, tanto faz na
construção de uma página ou edição de documento como se digita.
A estrutura básica de uma página HTML consiste no seguinte:
<html> - Indica que o documento é o de um arquivo HTML
<head><title>Título do documento (irá aparecer na barra superior do
navegador)</title></head>
<body> - Inicia a página propriamente dita
Aqui estarão os textos...
imagens...
links...
enfim, todos os elementos da janela principal do navegador, vistos no "corpo" do
texto.
</body> - Finaliza o corpo do texto
</html> - Fecha a construção da página
Formatações de texto
Cabe notar que existem dois tipo de formatação para textos e caracteres: a lógica e a
física. A visualização tende a ser parecida, no entanto, a diferença é que a segunda
opera com valores específicos (por exemplo, o tamanho do texto), enquanto a
primeira utiliza instruções que serão interpretadas pelo navegador. Abaixo as
principais formatações, respectivamente em formato lógico e físico.
negrito -
<strong>texto </strong> ou <b>texto</b>
itálico - <em>texto</em>ou<i> texto </i>
tachado - <strike>texto </strike>ou<s> texto</s>
Agora, só formatação lógica:
tamanho maior <big>texto</big>tamanho menor - <small>texto</small>subscrito -
<sub>texto</sub>sobrescrito - <sup>
texto
</sup>máquina de escrever - <tt> texto</tt>
sublinhado - <u>texto</u>
3
Cabeçalhos
Existem 6 níveis de cabeçalho, o primeiro é o maior e depois vai continuamente
diminuindo.
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
Atributos de fonte
Alinhamento
<font align="center">Alinhamento central</font>
À direita
<font align="right">Alinhamento à direita</font>
À esquerda
<font align="left">Alinhamento à esquerda</font>
Cores de fonte
<font color="blue">Texto</font>
<font color="#7CCD7C">Texto</font> - cor em formato hexadecimal, ver tabela aqui
<http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm> .
Tipo da fonte, tamanho e combinação de atributos
<font face="times" size="large" color="green">Texto</font>
Texto animado
As tags <marquee></marquee> permitem fazer com que o texto que aparece na tela
tenha um efeito de animação. Ela possui os seguintes atributos:
<marquee behavior=scroll>texto que aparecerá com animação</marquee>
<marquee behavior=slide direction=right>texto que aparecerá com
animação</marquee> <marquee behavior=scroll direction=left>texto que aparecerá
com animação</marquee>
Cabeçalhos
Existem 6 níveis de cabeçalho, o primeiro é o maior e depois vai continuamente
diminuindo.
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
Atributos de fonte
Alinhamento
<font align="center">Alinhamento central</font>
À direita
<font align="right">Alinhamento à direita</font>
À esquerda
<font align="left">Alinhamento à esquerda</font>
Cores de fonte
<font color="blue">Texto</font>
<font color="#7CCD7C">Texto</font> - cor em formato hexadecimal, ver tabela aqui
<http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm> .
Tipo da fonte, tamanho e combinação de atributos
<font face="times" size="large" color="green">Texto</font>
Texto animado
As tags <marquee></marquee> permitem fazer com que o texto que aparece na tela
tenha um efeito de animação. Ela possui os seguintes atributos:
<marquee behavior=scroll>texto que aparecerá com animação</marquee>
<marquee behavior=slide direction=right>texto que aparecerá com
animação</marquee> <marquee behavior=scroll direction=left>texto que aparecerá
com animação</marquee>
4
Parágrafos, quebra de linha espaçada e linha horizontal
As tags <p> e </p> indicam um parágrafo que terá uma pequena distância do próximo.
Já a tag <br> (que não tem marcação de fechamento) indica uma linha em branco. E
para adicionar uma linha horizontal, basta colocar a tag <hr>, cujo valor em pixels pode
ser indicado, como nesse exemplo: <hr size="8">.
Hiperlinks
Os hiperlinks, ou simplesmente links, são feitos com a tag <a href="endereço para
onde se vai">Link</a>. O caminho (endereço) pode ser relativo ou absoluto. No
primeiro caso, quando ambos os arquivos (âncora, o do link, e do ponto de chegada)
estão no mesmo servidor/diretório, basta colocar esse, por exemplo:
"/imagens/pagina_2.html".
Mas, se o ponto de chegada está em outro servidor, deve-se usar o caminho absoluto,
ou seja, o endereço completo do link, como: "http://www.blogger.com".
É possível usar uma imagem como link (no caso de um botão, por exemplo), o que será
visto a seguir.
Imagens
Quando se faz o upload de uma imagem para o Blogger, ele automaticamente cria a
marcação de inserção da mesma, isto é, ele dá o endereço da qual ela será "puxada"
para a página html em questão, conforme esta marcação:
<img src="localização da
imagem/imagem.extensão da mesma">. O atributo "src" é o que contém o endereço,
e - no caso de imagens de outras páginas que sejam inseridas num arquivo é nele que
o endereço da mesma deve ser colocado. O Blogger também faz isso (a inserção do
código), quando se informa que a imagem será colocada a partir de um endereço. A
tag da imagem é outra que não possui fechamento.
Outros atributos da imagem são alt, width e height, border e align. Abaixo, numa
marcação de imagem com múltiplos atributos explica-se o que cada um deles faz.
<img src="imagem" alt=indica um texto que será visto quando o cursor for colocado
sobre a imagem width=largura da imagem em pixels height=altura da imagem
align=alinhamento da imagem>
Exemplo com explicação de link em imagem
Abaixo três telas que exemplificam várias coisas faladas aqui, notando-se que as duas
primeiras mostram o modo de edição em HTML do blog.
Quanto à inserção de link em imagem, ela é simples, basta colocar entre a imagem as
tags do link, por exemplo:
<a href="endereço para onde se vai"><img
src="foto.jpg"></a>
Parágrafos, quebra de linha espaçada e linha horizontal
As tags <p> e </p> indicam um parágrafo que terá uma pequena distância do próximo.
Já a tag <br> (que não tem marcação de fechamento) indica uma linha em branco. E
para adicionar uma linha horizontal, basta colocar a tag <hr>, cujo valor em pixels pode
ser indicado, como nesse exemplo: <hr size="8">.
Hiperlinks
Os hiperlinks, ou simplesmente links, são feitos com a tag <a href="endereço para
onde se vai">Link</a>. O caminho (endereço) pode ser relativo ou absoluto. No
primeiro caso, quando ambos os arquivos (âncora, o do link, e do ponto de chegada)
estão no mesmo servidor/diretório, basta colocar esse, por exemplo:
"/imagens/pagina_2.html".
Mas, se o ponto de chegada está em outro servidor, deve-se usar o caminho absoluto,
ou seja, o endereço completo do link, como: "http://www.blogger.com".
É possível usar uma imagem como link (no caso de um botão, por exemplo), o que será
visto a seguir.
Imagens
Quando se faz o upload de uma imagem para o Blogger, ele automaticamente cria a
marcação de inserção da mesma, isto é, ele dá o endereço da qual ela será "puxada"
para a página html em questão, conforme esta marcação:
<img src="localização da
imagem/imagem.extensão da mesma">. O atributo "src" é o que contém o endereço,
e - no caso de imagens de outras páginas que sejam inseridas num arquivo é nele que
o endereço da mesma deve ser colocado. O Blogger também faz isso (a inserção do
código), quando se informa que a imagem será colocada a partir de um endereço. A
tag da imagem é outra que não possui fechamento.
Outros atributos da imagem são alt, width e height, border e align. Abaixo, numa
marcação de imagem com múltiplos atributos explica-se o que cada um deles faz.
<img src="imagem" alt=indica um texto que será visto quando o cursor for colocado
sobre a imagem width=largura da imagem em pixels height=altura da imagem
align=alinhamento da imagem>
Exemplo com explicação de link em imagem
Abaixo três telas que exemplificam várias coisas faladas aqui, notando-se que as duas
primeiras mostram o modo de edição em HTML do blog.
Quanto à inserção de link em imagem, ela é simples, basta colocar entre a imagem as
tags do link, por exemplo:
<a href="endereço para onde se vai"><img
src="foto.jpg"></a>
5
Porém, deve-se notar que o Blogger já cria um ponto de chegada, que é para uma
imagem com a imagem isolada. Assim, deve-se apagar o trecho que existe e colocar o
novo endereço: "<a href=novo_endereço>".
Porém, deve-se notar que o Blogger já cria um ponto de chegada, que é para uma
imagem com a imagem isolada. Assim, deve-se apagar o trecho que existe e colocar o
novo endereço: "<a href=novo_endereço>".
6
Páginas com apostilas e material sobre HTML
Introdução ao HTML -
http://www.icmc.usp.br/ensino/material/html/intro.html
Introdução à Linguagem HTML - http://jcmaxwell1.vilabol.uol.com.br/Html/texto.html
Apostila de HTML - http://www.veradias.pro.br/JAVA/html/apostila.htm#_Toc410983591
HTML para blogs - http://www.emblema.art.br/html4blog/index.htm
Páginas com apostilas e material sobre HTML
Introdução ao HTML -
http://www.icmc.usp.br/ensino/material/html/intro.html
Introdução à Linguagem HTML - http://jcmaxwell1.vilabol.uol.com.br/Html/texto.html
Apostila de HTML - http://www.veradias.pro.br/JAVA/html/apostila.htm#_Toc410983591
HTML para blogs - http://www.emblema.art.br/html4blog/index.htm
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 564
- Slides 6
- Favorites 1
- Age 5157 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views