ADS da depressão
Bem Vindo Ao ADS da Depressão, Estamos Criando um fórum melhor para vocês a cada dia, por favor, registre-se para poder compartilhar informações e tirar duvidas conosco, e disponha de nosso chat para todo tipo de conversas xD,

Bem Vindos!

Para quem queira iniciar a escrever HTML

Ir em baixo

Para quem queira iniciar a escrever HTML

Mensagem por Robson112011 em Dom Set 01, 2013 4:41 pm

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:

Spoiler:

<html>
<head>
<title>T&iacute;tulo da p&aacute;gina</title>
</head>
<body>
<h1>Cabeçalho nível 1 na p&aacute;gina.</h1> <b>Texto em negrito na p&aacute;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)
avatar
Robson112011
Administrador
Administrador

Mensagens : 5
Agradecimentos : 2
Data de inscrição : 30/08/2013
Idade : 19
Localização : Candiba-BA

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Para quem queira iniciar a escrever HTML

Mensagem por Ygortrola em Dom Set 01, 2013 4:45 pm

Então era por isso que você não estava me respondendo.

Ygortrola
Membro
Membro

Mensagens : 3
Agradecimentos : 0
Data de inscrição : 31/08/2013
Idade : 18
Localização : SP

Ver perfil do usuário

Voltar ao Topo Ir em baixo

RE

Mensagem por wallace_andrade em Dom Set 01, 2013 5:12 pm

Muito bom cara Very Happy vou postar o link deste seu tópico na pagina
avatar
wallace_andrade
Dono
Dono

Mensagens : 34
Agradecimentos : 11
Data de inscrição : 30/08/2013

Ver perfil do usuário http://adsd.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Para quem queira iniciar a escrever HTML

Mensagem por Robson112011 em Dom Set 01, 2013 5:26 pm

wallace_andrade escreveu: Muito bom cara :Dvou postar o link deste seu tópico na pagina
Very Happy 
avatar
Robson112011
Administrador
Administrador

Mensagens : 5
Agradecimentos : 2
Data de inscrição : 30/08/2013
Idade : 19
Localização : Candiba-BA

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Para quem queira iniciar a escrever HTML

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum