Para quem queira iniciar a escrever HTML
3 participantes
Página 1 de 1
Para quem queira iniciar a escrever HTML
Olá, nesse tópico eu venho ajudar às pessoas que querem iniciar HTML. Vale lembrar que isso é só pra iniciantes mesmo, uma que se eu fosse aqui informar tudo sobre HTML, daria um livro inteiro. Outra que estou com preguiça kk
Lembre-se: HTML não é uma linguagem de programação, e sim de formatação. Isso guarda diferenças fundamentais entre HTML e JavaScript por exemplo, uma vez que a primeira limita-se apenas a mudar a maneira como os dados são dispostos na tela.
Para melhorar a aparência das webpages é possível usar código CSS(Cascading Style Sheet), que pode ser escrito em um arquivo em separado ou dentro do próprio HTML. É preferível escreve-lo em um arquivo separado, uma vez que isso torna seu código mais reutilizável e, além disso, o uso de CSS torna-se mais eficiente, já que aproveita-se melhor da maneira como o HTTP trabalha, com o navegador baixando uma única vez as informações e guardando-as em cache.
Uma página web apresenta uma série de elementos que serão usados para a interação com o usuário. Há os elementos que são mostrados e os que não são.
Entre os mostrados; temos textos, imagens, áudio, vídeo, botões, hyperlinks, formulários, etc..
E entre os não mostrados; temos os comentários, meta dados(DTD), informações de diagramação e estilo(CSS) e scripts(JavaScript).
Todo documento HTML precisa ter certas tags padronizadas, no mínimo <head> e <body> (sem esquecer de fecha-las com </head> </body> no final da página), pois elas constituem as duas partes básicas de um documento HTML que são: o HEAD (cabeçalho) e o BODY (corpo do documento).
Para começar sua página, você pode iniciar com algo simples. Você precisará apenas de um simples editor de texto. Veja um exemplo abaixo:
A tag <HEAD> contém, no meio de tantas outras coisas, o título da página(<TITLE>), e a tag <BODY> armazena todo o conteúdo da página, como imagens, textos, etc.
Alguns elementos básicos:
♦Títulos
Todo documento HTML deve conter um título, e deve indicar claramente o conteúdo do documento. É colocado entre as tags <title> e </title>.
Exemplo:
♦Cabeçalhos
Os cabeçalhos geralmente são utilizados para títulos e subtítulos de um texto do documento. Tem níveis de 1 a 6. Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois do cabeçalhos.
A tag é usada assim:
<Hx> Texto </Hx>
Onde x é um número de 1 a 6, definindo o nível do cabeçalho.
Exemplos:
♦Parágrafos
A tag <P> é utilizada para definir o início de um parágrafo, criando ma linha em branco entre cada parágrafo, e também é usada para alinhar os parágrafos. Pode utilizado os seguintes alinhamentos:
•> LEFT: Alinhado à esquerda.
•> CENTER: Alinhado ao centro.
•> RIGHT: Alinhado à direita.
•> JUSTIFY: Parágrafo justificado.
É usado assim: <p align="forma de alinhamento> Parágrafo </p>
Exemplo:
♦Quebra de linha
A tag <br> é usada para terminar uma linha sem iniciar um novo parágrafo. Ela provoca uma mudança de linha sem acrescentar espaço extra entre as linhas.
É usada assim:Texto qualquer<br>Abaixo da linha
Exemplo:
♦Comentários
Os comentários são utilizados geralmente para explicar o código fonte para que mais tarde seja possível compreender o que foi feito.
É utilizado assim: <!-- Comentário qualquer -->
Exemplo:
♦Fontes
A tag <font> permite que você insira em sua página um texto com fontes, tamanhos, cores e tipos diferentes.
É usado assim:<FONT SIZE=x FACE=y COLOR=z> Texto </font>
Onde:
•> x, em SIZE, é o tamanho da fonte(1 a 7), que na maioria dos navegadores o padrão é 3;
•> y, em FACE, é o nome da fonte(As fontes-padrões da maiora dos navegadores são ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA).
•> z, em COLOR, é a cor do texto(em hexadecimal).
Pode-se definir mais de uma fonte FACE, pois caso a primeira não esteja instalada no sistema do usuário, o navegador reconhe a próxima fonte definida.
Exemplo:
♦Estilos
Os seguintes estilos podem ser utilizados em textos:
<b> Texto em negrito.</b>
<big> Letra maior.</big>
<em> Texto enfatizado(escrita com caracteres itálicos).</em>
<i> Texto em itálico.</i>
<small> Letra menor.</small>
<strong> Texto forte(escrita com caracteres em negrito).</strong>
<sub> Texto subscrito(alinhado para baixo).</sub>
<sup> Texto sobrescrito(alinhado para cima).</sup>
<blink> Texto pulsante.</blink>
Exemplo:
♦Imagens
A tag <img> é usada para adicionar imagens à pagina. É usada assim: <img src="diretório/arquivo">. Você pode utilizar também imagens de outras páginas da web, exemplo: <img src="https://www.google.com/images/logos/google_logo_41.png">.
Você pode usar atributos, como title, que serve para quando o usuário parar o cursor sobre a imagem por alguns segundos, o texto definido aparecerá. É usado assim: <img title=Google src="https://www.google.com/images/logos/google_logo_41.png">
Você pode dimensionar as imagens inseridas. Utilizamos os atributos WIDHT para altura e HEIGHT para largura, e pode também alinhá-las usando ALIGN. As imagens inseridas em uma página podem ser posicionadas na tela da seguinte forma: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. Exemplo: <img src=”https://www.google.com/images/logos/google_logo_41.png” widht=”150” height=”50” ALIGN=”LEFT”>
Um exemplo de imagem:
♦Links
Use assim para criar um link: <a href="diretório/arquivo”>Texto link ou imagem</a>. Você também pode direcionar à um link de outra página da web. Assim: <a href=”https://www.google.com.br”>Google</a>. Caso o link esteja em um diretório abaixo ao seu documento, você pode usar "../" para voltar um diretório. Exemplo: Você está em site.tal.com/bin/public/docs/html/exemplo.html e quer direcionar para site.tal.com/bin/private/docs/html/exemplo.html, você deverá voltar 3 níveis para chegar em bin, então use assim: <a href="../../../private/docs/html/exemplo.html”>Exemplo</a>.
Em links para e-mail, basta usar <a href=”mailto:endereço”>Texto link ou Imagem</a>.
Exemplo:
♦Formatando blocos de texto
A tag <div> permite alinhar horizontalmente qualquer elemento em sua página. O alinhamento pode ser: left(esquerda), center(centro) ou right(direita). Assim: <div align=”posição”> Elementos para serem alinhados </div>
Exemplo:
@EDIT=Em alguns casos, talvez você precise inserir alguns "códigos" para substituir caracteres especiais. O uso deles se deve ao fato de que alguns caracteres são reservados, facilmente perceptível em "<" e ">" que servem para abrir e fechar tags. Vejamos a lista:
Então galera, é isso. Caso encontrem erros me avisem, críticas, elogios e outros comentários são sempre bem aceitos.
Lembre-se: HTML não é uma linguagem de programação, e sim de formatação. Isso guarda diferenças fundamentais entre HTML e JavaScript por exemplo, uma vez que a primeira limita-se apenas a mudar a maneira como os dados são dispostos na tela.
Para melhorar a aparência das webpages é possível usar código CSS(Cascading Style Sheet), que pode ser escrito em um arquivo em separado ou dentro do próprio HTML. É preferível escreve-lo em um arquivo separado, uma vez que isso torna seu código mais reutilizável e, além disso, o uso de CSS torna-se mais eficiente, já que aproveita-se melhor da maneira como o HTTP trabalha, com o navegador baixando uma única vez as informações e guardando-as em cache.
Uma página web apresenta uma série de elementos que serão usados para a interação com o usuário. Há os elementos que são mostrados e os que não são.
Entre os mostrados; temos textos, imagens, áudio, vídeo, botões, hyperlinks, formulários, etc..
E entre os não mostrados; temos os comentários, meta dados(DTD), informações de diagramação e estilo(CSS) e scripts(JavaScript).
Todo documento HTML precisa ter certas tags padronizadas, no mínimo <head> e <body> (sem esquecer de fecha-las com </head> </body> no final da página), pois elas constituem as duas partes básicas de um documento HTML que são: o HEAD (cabeçalho) e o BODY (corpo do documento).
Para começar sua página, você pode iniciar com algo simples. Você precisará apenas de um simples editor de texto. Veja um exemplo abaixo:
- Spoiler:
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Cabeçalho nível 1 na página.</h1> <b>Texto em negrito na página.</b>
Texto normal na página..
</body>
</html>
A tag <HEAD> contém, no meio de tantas outras coisas, o título da página(<TITLE>), e a tag <BODY> armazena todo o conteúdo da página, como imagens, textos, etc.
Alguns elementos básicos:
♦Títulos
Todo documento HTML deve conter um título, e deve indicar claramente o conteúdo do documento. É colocado entre as tags <title> e </title>.
Exemplo:
- Spoiler:
- <html>
<title>Este é o título</title>
<body>
<h2>Cabeçalho de nível 2</h2>
Texto do documento ...
</body>
</html>
♦Cabeçalhos
Os cabeçalhos geralmente são utilizados para títulos e subtítulos de um texto do documento. Tem níveis de 1 a 6. Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois do cabeçalhos.
A tag é usada assim:
<Hx> Texto </Hx>
Onde x é um número de 1 a 6, definindo o nível do cabeçalho.
Exemplos:
- Spoiler:
- <H1> Cabeçalho nível 1 </H1>
<H3> Cabeçalho nível 3 </H3>
<H6> Cabeçalho nível 6 </H6>
♦Parágrafos
A tag <P> é utilizada para definir o início de um parágrafo, criando ma linha em branco entre cada parágrafo, e também é usada para alinhar os parágrafos. Pode utilizado os seguintes alinhamentos:
•> LEFT: Alinhado à esquerda.
•> CENTER: Alinhado ao centro.
•> RIGHT: Alinhado à direita.
•> JUSTIFY: Parágrafo justificado.
É usado assim: <p align="forma de alinhamento> Parágrafo </p>
Exemplo:
- Spoiler:
- <html>
<head>
<title>Título qualquer</title>
</head>
<body>
<p>Alinhamento padrão dos navegadores da web(esquerdo).</p>
<p align="center">Alinhamento centralizado.</p>
<p align="right">Alinhamento à direita.</p>
</body>
</html>
♦Quebra de linha
A tag <br> é usada para terminar uma linha sem iniciar um novo parágrafo. Ela provoca uma mudança de linha sem acrescentar espaço extra entre as linhas.
É usada assim:Texto qualquer<br>Abaixo da linha
Exemplo:
- Spoiler:
- <html>
<head>
<title>Título qualquer</title>
</head>
<body>
Um exemplo.<br>Apenas isso.
</body>
</html>
♦Comentários
Os comentários são utilizados geralmente para explicar o código fonte para que mais tarde seja possível compreender o que foi feito.
É utilizado assim: <!-- Comentário qualquer -->
Exemplo:
- Spoiler:
- <html>
<head>
<title>Olá</title>
</head>
<body>
Olá! <!-- Apenas um olá -->
</body>
</html>
♦Fontes
A tag <font> permite que você insira em sua página um texto com fontes, tamanhos, cores e tipos diferentes.
É usado assim:<FONT SIZE=x FACE=y COLOR=z> Texto </font>
Onde:
•> x, em SIZE, é o tamanho da fonte(1 a 7), que na maioria dos navegadores o padrão é 3;
•> y, em FACE, é o nome da fonte(As fontes-padrões da maiora dos navegadores são ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA).
•> z, em COLOR, é a cor do texto(em hexadecimal).
Pode-se definir mais de uma fonte FACE, pois caso a primeira não esteja instalada no sistema do usuário, o navegador reconhe a próxima fonte definida.
Exemplo:
- Spoiler:
- <html>
<head>
<title>Título qualquer</title>
</head>
<body><FONT SIZE=7 FACE=Arial COLOR=#FF0000> Texto em fonte arial tamanho 7(máximo) vermelho </font>
</body>
</html>
♦Estilos
Os seguintes estilos podem ser utilizados em textos:
<b> Texto em negrito.</b>
<big> Letra maior.</big>
<em> Texto enfatizado(escrita com caracteres itálicos).</em>
<i> Texto em itálico.</i>
<small> Letra menor.</small>
<strong> Texto forte(escrita com caracteres em negrito).</strong>
<sub> Texto subscrito(alinhado para baixo).</sub>
<sup> Texto sobrescrito(alinhado para cima).</sup>
<blink> Texto pulsante.</blink>
Exemplo:
- Spoiler:
- <html>
<head>
<title>Olá</title>
</head>
<body>
<b> Texto em negrito.</b>
<big> Letra maior.</big>
<em> Texto enfatizado(escrita com caracteres itálicos).</em>
<i> Texto em itálico.</i>
<small> Letra menor.</small>
<strong> Texto forte(escrita com caracteres em negrito).</strong>
<sub> Texto subscrito(alinhado para baixo).</sub>
<sup> Texto sobrescrito(alinhado para cima).</sup>
<blink> Texto pulsante.</blink>
</body>
</html>
♦Imagens
A tag <img> é usada para adicionar imagens à pagina. É usada assim: <img src="diretório/arquivo">. Você pode utilizar também imagens de outras páginas da web, exemplo: <img src="https://www.google.com/images/logos/google_logo_41.png">.
Você pode usar atributos, como title, que serve para quando o usuário parar o cursor sobre a imagem por alguns segundos, o texto definido aparecerá. É usado assim: <img title=Google src="https://www.google.com/images/logos/google_logo_41.png">
Você pode dimensionar as imagens inseridas. Utilizamos os atributos WIDHT para altura e HEIGHT para largura, e pode também alinhá-las usando ALIGN. As imagens inseridas em uma página podem ser posicionadas na tela da seguinte forma: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. Exemplo: <img src=”https://www.google.com/images/logos/google_logo_41.png” widht=”150” height=”50” ALIGN=”LEFT”>
Um exemplo de imagem:
- Spoiler:
- <html>
<head>
<title>Título qualquer</title>
</head>
<body>
<h1>Exemplo de alinhamento</h1>
<p>Alinhamento a Esquerda<br>
<img Title="Google" src="https://www.google.com/images/logos/google_logo_41.png" width="150" height="50"
align="left"><br>
<br><BR><BR><BR><BR><BR>
<p align=right>Alinhamento a Direita<br>
<img title="Google" src="https://www.google.com/images/logos/google_logo_41.png" width="150" height="50"
align="right" >
</body>
</html>
♦Links
Use assim para criar um link: <a href="diretório/arquivo”>Texto link ou imagem</a>. Você também pode direcionar à um link de outra página da web. Assim: <a href=”https://www.google.com.br”>Google</a>. Caso o link esteja em um diretório abaixo ao seu documento, você pode usar "../" para voltar um diretório. Exemplo: Você está em site.tal.com/bin/public/docs/html/exemplo.html e quer direcionar para site.tal.com/bin/private/docs/html/exemplo.html, você deverá voltar 3 níveis para chegar em bin, então use assim: <a href="../../../private/docs/html/exemplo.html”>Exemplo</a>.
Em links para e-mail, basta usar <a href=”mailto:endereço”>Texto link ou Imagem</a>.
Exemplo:
- Spoiler:
- <html>
<head>
<title>Título qualquer</title>
</head>
<body>
<div align="center">
<a href="../../index.html">Apenas um exemplo de link para página da web, voltando 2 diretórios</a>
<a href=”mailto:exemplo@exemplo.com”>Apenas um exemplo de email</a>
</body>
</html>
♦Formatando blocos de texto
A tag <div> permite alinhar horizontalmente qualquer elemento em sua página. O alinhamento pode ser: left(esquerda), center(centro) ou right(direita). Assim: <div align=”posição”> Elementos para serem alinhados </div>
Exemplo:
- Spoiler:
- <html>
<head>
<title>Título qualquer</title>
</head>
<body>
<div align=”center”>
<h1>Exemplo TAG DIV </h1></div>
<div align=”right”>
<p> Isso é um exemplo
<p>Pode utilizar o alinhamento à direita que alinha o seu texto na margem direita da
tela.<br>
Como um texto criado em um editor de texto para ser exibido na página.
</div>
</body>
</html>
@EDIT=Em alguns casos, talvez você precise inserir alguns "códigos" para substituir caracteres especiais. O uso deles se deve ao fato de que alguns caracteres são reservados, facilmente perceptível em "<" e ">" que servem para abrir e fechar tags. Vejamos a lista:
- Spoiler:
Então galera, é isso. Caso encontrem erros me avisem, críticas, elogios e outros comentários são sempre bem aceitos.
Última edição por Robson112011 em Dom Set 01, 2013 6:17 pm, editado 2 vez(es)
Robson112011- Administrador
- Mensagens : 5
Agradecimentos : 2
Data de inscrição : 30/08/2013
Idade : 24
Localização : Candiba-BA
Re: Para quem queira iniciar a escrever HTML
Então era por isso que você não estava me respondendo.
Ygortrola- Membro
- Mensagens : 3
Agradecimentos : 0
Data de inscrição : 31/08/2013
Idade : 24
Localização : SP
Re: Para quem queira iniciar a escrever HTML
wallace_andrade escreveu: Muito bom cara :Dvou postar o link deste seu tópico na pagina
Robson112011- Administrador
- Mensagens : 5
Agradecimentos : 2
Data de inscrição : 30/08/2013
Idade : 24
Localização : Candiba-BA
Tópicos semelhantes
» Não sei nada sobre programaçao, devo desistir de iniciar a faculdade de analise de sistemas ?
» [dica]pra quem esta começando no php
» [dica]pra quem esta começando no php
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|