muitos pensão que é difio aprender HTML mas não assim tão dificio só prescisa se dedicar
agora chega de conversa fiada ao trabalho
vamos começar
tudo que voce prescisa para aprender HTML é o navegador exemplo(voce esta lendo isto em um navegador) e voce tambem prescisa de um editor de texto (bloco de notas) ou (notpad) ou outro editor de texto
para poder acessar o editor de texto vá em: (Iniciar » Programas » Acessórios):
2ª passo
oque sao tags HTML?
SAO rotulos usadas para indicar como seu site deve ser apresentado ao navegador
existem 2 tipos de tags tags de abertura exemplo " <aqui > e código de fechamento " </aqui o comando>" oque diferencia é uma "/"
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.
Mas como tudo ele tem sua exceção por exemplo a TAG para pular de linha é
<br /> e nao prescisa fecha-la
EXEMPLOS:
tudo que contiver aqui dentro desas tags ficarao em negrito<b>aqui dentro sua frase<b>
como voce pode observar acima abrimos com e fechamos com
mas no lugar do b pode colocar outros comandos
as tags <h1>Este é um título</h1>
<h2>Este é um sub título</h2><h3>este é um sub-subtitulo</h3>este é um titulo
este é um subtitulo
o
um subtitulo
o
este é um su-subtitulo subtitulo
e assim vai diminuindo(mas lembrando quanto maior o numero menor o titulo)
exercitando
olhe este código:
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>Um cabeçalho</h1>
<p>texto, texto texto, texto</p>
<h2>Subtítulo</h2>
<p>texto, texto texto, texto</p>
</body>
</html>
copie e cole este código em azul no seu editor de texto e salve no
desktop da seguinte forma: teste.html
coloque o nome que quiser mas salve com .html
depois clik e abra seu primeiro site
Mais tags HTML
voce ja deve ter feito as paginas como na liçao anterior né? se nao fez fassa.
agora voce aprendera mais tags
abaixo você verá uma tag para colocar sua letra em italico (aqui esta escrito italico) olhe:
<i>esta é a tag aqui você coloca sua frases</i>
será exibido dessa forma:
esta é a tag aqui você coloca sua frases.
deixar a letra negrito E italico negrito e italico (negrito e italico)
<i><b>Este texto deve ser itálico.</b></i>
Este texto deve ser itálico.
você tem que fechar as "<>" na ordem que abrio por exemplo
<i><b>conteudo</i></b> (nao dara cero porque voce tem que fechar
oque abrir primeiro e neste caso o "<b>" esta aberto primeiro mas o que fecha primeiro é o "</i>"
forma correta: <b><i>Este texto deve ser itálico.
agora voce apenderá como deixar as letra pequenas olhe:
<small>Este texto deve ser com letras em tamanho small.</small>
vai fica assim:
Este texto deve ser com letras em tamanho small. agora você aprenderá como faezr uma linha horizontal
<hr />
será exibido assim:
_____________________________________
outra tag para faezr listas
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
será exibido assim:
- Um item de lista
- Outro item de lista
outra tag
para fazer listas mas numeradas
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>
será exibido assim:
- Primeiro item da lista
- Segundo item da lista
agora aconselhamos que voce fassa outra pagina HTML ou edite a outra que você fez
aula 7
a tag a seguir é para mudar a cor de sua letra
<h2 style="background-color:#ff0000;">aqui a sua frase</h2>
para mudar a cor de fundo de sua pagina htm inteirra edite o "<body>"
de sua pagina da seguinte forma
<html>
<head>
</head>
<body style="background-color:#ff0000;">
</body>
</html>
a pagina ficou vermelha nao é mesmo?
para colocar outra coisa edite o background-color:#ff0000
edite a #ff0000
abaixo segue alguns códigos de cores
Branco: #ffffff
Preto: #000000 (zeros)
Vermelho: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarelo: #ffff00
Para algumas cores, você pode usar o nome das cores em inglês
(white, black, red, blue, green e yellow - significados - branco,
preto, vermelho, azul, verde,
amarelo).
exemplo:
<body style="background-color: red;">
aula 8
Links
<a href="http://codtn.blogspot.com/">aqui vai o nome do seu link</a>
TRADUÇAO
<a href="LINK DO LUGAR ONDE QUER QUE ENTRE QUADO CLIKAR">aqui vai o nome do seu link</a>
vai ficar assim:
aqui vai o nome do seu link
agora voce aprenderá como colocar o link de outra pagina html sua
no lugar o link de um site
<a href="page2.htm">aqui vai o nome do seu link</a>
<a href="aqui o nome de sua pagina,exemplo:(teste.html)">aqui vai o nome do seu link</a>
mas se o "aquivo.html" estiver em uma pasta será feito dessa forma
<a href="nomedapasta/arquivo.htm">aqui vai o nome do seu link</a>
lembre-se de colocar ".html" html é uma estençao
Você agora pode 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 que está. O símbolo "#" deve ser seguido pelo nome do
arquivo para onde o link vai. Por exemplo:
<a href="#heading1">Link para o cabeçalho 1</a>
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link para cabeçalho 1</a></p>
<p><a href="#heading2">Link para cabeçalho 2</a></p>
<h1 id="heading1">Cabeçalho 1</h1>
<p>Texto texto texto texto</p>
<h1 id="heading2">Cabeçalho 2</h1>
<p>Texto texto texto texto</p>
</body>
</html>
LINK PARA ENVIAR E-MAIL:
<a href="seunome@servidor.com">Enviar e-mail</a>
servidor (hotmail,yahoo,gmail etc..)
aula9 enviar imagen
<img src="tim.jpg" alt="Tim Berners-Lee" />
"tim.jpg" é o nome do arquivo da imagem que você quer inserir na página.
".jpg" é a extensão do tipo de imagem. Tal como a extensão ".htm" para
arquivos de documentos HTML, ".jpg" informa ao navegador
que o arquivo é uma imagem. São três os tipos de imagens que você pode
inserir na sua página:
existem outras estençoes de fotos coloque a estençao de sua imagen
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Existem mais algumas coisinhas que você precisa saber.Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites:
Exemnplo: 1<img src="nomedapasta/nomedafoto.png">
Exemplo:2
<img src="url do site/nomedafoto.png">
Segundo, imagens podem ser links:
Exemplo:3
<a href="http://codtn.blogspot.com">
<img src="nomedaimagen.png"></a>
O atributo alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. Isto é particularmente importante para usuários com restrições visuais ou quando a imagem é carregada muito lentamente. Em conseqüência, sempre use o atributo alt:
Exemplo 5:
<img src="logo.gif" alt="logotipo do HTML.net">
Alguns navegadores mostram uma caixa pop-up com o conteúdo do atributo alt quando o usuário passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt é a de fornecer uma alternativa textual para imagem. O atributo alt não deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passarão uma mensagem que não descreve a imagem para os usuários com restrições visuais.
atributo title pode ser usado para fornecer uma curta descrição da imagem:
Exemplo 6:
<img src="logo.gif" title="codigos tecnologias e noticias"> Lição 10: Tabelas
Criar tabelas em HTML pode parecer complicado, mas se você ficar frio e acompanhar passo a passo a explicação, verá que tudo é evidente - tal como acontece com tudo no HTML.
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
aparecerá assim
Célula 1 Célula 2 Célula 3 Célula 4
3 tags básicas são usadas para inserir tabelas:
<table> começa e termina uma tabela. Evidente.<tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. Também evidente.<td> significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela. Tudo simples e evidente.
Eis o acontece no Exemplo 1: a tabela começa com <table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e <td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. A nova linha também contém duas células. A tabela termina com </table>.
Célula 1 Célula 2 Célula 3 Célula 4
Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna.
No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número ilimitado de linhas e colunas.
Exemplo 2:
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
<td>Célula 6</td>
<td>Célula 7</td>
<td>Célula 8</td>
</tr>
<tr> <td>Célula 9</td>
<td>Célula 10</td>
<td>Célula 11</td>
<td>Célula 12</td>
</tr>
</table>
Será exibido no navegador assim:
Célula 1 Célula 2 Célula 3 Célula 4
Célula 5 Célula 6 Célula 7 Célula 8
Célula 9 Célula 10 Célula 11 Célula 12
exercitando
olhe este código:
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>Um cabeçalho</h1>
<p>texto, texto texto, texto</p>
<h2>Subtítulo</h2>
<p>texto, texto texto, texto</p>
</body>
</html>copie e cole este código em azul no seu editor de texto e salve no
desktop da seguinte forma: teste.html
coloque o nome que quiser mas salve com .html
depois clik e abra seu primeiro site
Mais tags HTML
voce ja deve ter feito as paginas como na liçao anterior né? se nao fez fassa.
agora voce aprendera mais tags
abaixo você verá uma tag para colocar sua letra em italico (aqui esta escrito italico) olhe:
<i>esta é a tag aqui você coloca sua frases</i>
será exibido dessa forma:
esta é a tag aqui você coloca sua frases.
deixar a letra negrito E italico negrito e italico (negrito e italico) <i><b>Este texto deve ser itálico.</b></i>
Este texto deve ser itálico.
você tem que fechar as "<>" na ordem que abrio por exemplo<i><b>conteudo</i></b> (nao dara cero porque voce tem que fechar
oque abrir primeiro e neste caso o "<b>" esta aberto primeiro mas o que fecha primeiro é o "</i>"forma correta: <b><i>Este texto deve ser itálico.</i></b>
agora voce apenderá como deixar as letra pequenas olhe:
<small>Este texto deve ser com letras em tamanho small.</small>vai fica assim:
Este texto deve ser com letras em tamanho small. agora você aprenderá como faezr uma linha horizontal
<hr />
será exibido assim:
_____________________________________
outra tag para faezr listas
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
será exibido assim:
Este texto deve ser com letras em tamanho small. agora você aprenderá como faezr uma linha horizontal
<hr />
será exibido assim:
_____________________________________
outra tag para faezr listas <ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>será exibido assim:- Um item de lista
- Outro item de lista
para fazer listas mas numeradas
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>será exibido assim:- Primeiro item da lista
- Segundo item da lista
aula 7
a tag a seguir é para mudar a cor de sua letra <h2 style="background-color:#ff0000;">aqui a sua frase</h2>
para mudar a cor de fundo de sua pagina htm inteirra edite o "<body>"de sua pagina da seguinte forma <html>
<head>
</head>
<body style="background-color:#ff0000;"></body> </html>
a pagina ficou vermelha nao é mesmo? para colocar outra coisa edite obackground-color:#ff0000
edite a #ff0000 abaixo segue alguns códigos de cores Branco: #ffffff Preto: #000000 (zeros) Vermelho: #ff0000 Azul: #0000ff Verde: #00ff00 Amarelo: #ffff00
Para algumas cores, você pode usar o nome das cores em inglês
(white, black, red, blue, green e yellow - significados - branco,
preto, vermelho, azul, verde,
amarelo). exemplo:<body style="background-color: red;"> aula 8 Links
<a href="http://codtn.blogspot.com/">aqui vai o nome do seu link</a>
TRADUÇAO
<a href="LINK DO LUGAR ONDE QUER QUE ENTRE QUADO CLIKAR">aqui vai o nome do seu link</a>
<a href="LINK DO LUGAR ONDE QUER QUE ENTRE QUADO CLIKAR">aqui vai o nome do seu link</a>
vai ficar assim: aqui vai o nome do seu link agora voce aprenderá como colocar o link de outra pagina html sua no lugar o link de um site <a href="page2.htm">aqui vai o nome do seu link</a>
<a href="aqui o nome de sua pagina,exemplo:(teste.html)">aqui vai o nome do seu link</a>
mas se o "aquivo.html" estiver em uma pasta será feito dessa forma <a href="nomedapasta/arquivo.htm">aqui vai o nome do seu link</a>
lembre-se de colocar ".html"html é uma estençao
Você agora pode 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 que está. O símbolo "#" deve ser seguido pelo nome do
arquivo para onde o link vai. Por exemplo: <a href="#heading1">Link para o cabeçalho 1</a><html>
<head>
</head>
<body>
<p><a href="#heading1">Link para cabeçalho 1</a></p>
<p><a href="#heading2">Link para cabeçalho 2</a></p>
<h1 id="heading1">Cabeçalho 1</h1>
<p>Texto texto texto texto</p>
<h1 id="heading2">Cabeçalho 2</h1>
<p>Texto texto texto texto</p>
</body>
</html>LINK PARA ENVIAR E-MAIL:
<a href="seunome@servidor.com">Enviar e-mail</a>servidor (hotmail,yahoo,gmail etc..) aula9 enviar imagen <img src="tim.jpg" alt="Tim Berners-Lee" />
"tim.jpg" é o nome do arquivo da imagem que você quer inserir na página.
".jpg" é a extensão do tipo de imagem. Tal como a extensão ".htm" para
arquivos de documentos HTML, ".jpg" informa ao navegador
que o arquivo é uma imagem. São três os tipos de imagens que você pode
inserir na sua página: existem outras estençoes de fotos coloque a estençao de sua imagen - GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Existem mais algumas coisinhas que você precisa saber.
Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites:
Exemnplo: 1
<img src="nomedapasta/nomedafoto.png">
Exemplo:2<img src="url do site/nomedafoto.png"> Segundo, imagens podem ser links: Exemplo:3 <a href="http://codtn.blogspot.com">
<img src="nomedaimagen.png"></a>alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. Isto é particularmente importante para usuários com restrições visuais ou quando a imagem é carregada muito lentamente. Em conseqüência, sempre use o atributo alt:Exemplo 5:
<img src="logo.gif" alt="logotipo do HTML.net">
alt quando o usuário passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt é a de fornecer uma alternativa textual para imagem. O atributo alt não deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passarão uma mensagem que não descreve a imagem para os usuários com restrições visuais.atributo
title pode ser usado para fornecer uma curta descrição da imagem: Exemplo 6:
<img src="logo.gif" title="codigos tecnologias e noticias"> Lição 10: Tabelas
Criar tabelas em HTML pode parecer complicado, mas se você ficar frio e acompanhar passo a passo a explicação, verá que tudo é evidente - tal como acontece com tudo no HTML.
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>aparecerá assim
|
<table>começa e termina uma tabela. Evidente.<tr>significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. Também evidente.<td>significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela. Tudo simples e evidente.
<table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e <td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. A nova linha também contém duas células. A tabela termina com </table>.| Célula 1 | Célula 2 |
| Célula 3 | Célula 4 |
Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna.
No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número ilimitado de linhas e colunas.
Exemplo 2:
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
<td>Célula 6</td>
<td>Célula 7</td>
<td>Célula 8</td>
</tr>
<tr> <td>Célula 9</td>
<td>Célula 10</td>
<td>Célula 11</td>
<td>Célula 12</td>
</tr>
</table>
| Célula 1 | Célula 2 | Célula 3 | Célula 4 |
| Célula 5 | Célula 6 | Célula 7 | Célula 8 |
| Célula 9 | Célula 10 | Célula 11 | Célula 12 |
Nenhum comentário:
Postar um comentário
retirei ENVIO anonimo porque algumas pessoas faziam perguntas anonimamente e eu não tinha como contacta-los
para duvidas pode enviar um e-mail para
rpgmak@rpgmak.tk