Ir para conteúdo
Fórum CódigoFonte.net
Entre para seguir isso  
ray

[Dicas] Linguagem HTML [TAGS]

Recommended Posts

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Tutorial HTML para iniciantes

HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.

A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.

HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo.

Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiper-ligações.

O padrão é independente de outros padrões de processamento de texto em geral.

SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

Hoje em dia é tudo mais fácil com programas do estilo do DreamWeaver + Fireworks, neles é muito pratico, rápido, e facil, porem para ninguem ficar perdidos em algumas "tags" resolvi fazer esse tutorial, para ninguem se perder quando começar fazer algo em HTML.

Toda página em HTML tem que começar e terminar obrigatoriamente assim:

<HTML>.............................................. = ..........A tag marca o início da página.

<head>.................................................. =.......... A tag marca o início do cabeçalho e dentro desse cabeçalho que fica a maioria dos Scripts.

<title>.Titulo da página </title>............. = ..........A tag serve para dar um título a sua pagina.

</head>................................................ = ..........a tag fecha o cabeçalho

<body>.................................................. = ...... ...a tag marca o inicio do corpo , sua página será montada dentro das tags

</body>............................................... . = ..........a tag fecha o fim do conteúdo da página.

</HTML>................................................ = ........ a tag marca o fim da pagina

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como fazer minha pagina ter um titulo?

Basta adicionar o Nome ou titulo da página dentro das tags <title></title>

<title>Minha primeira página na internet</title>

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como posso arrumar as margens da minha página? Modo sem CSS (folha de estilo)

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth ="0">

Explicando as tags:

leftmargin="0"...........=........Margem da esquerda

rightmargin="0" ........=........ Margem da direita

topmargin="0"...........=........ Margem do Topo

bottommargin="0".....=........ Margem Inferior

marginheight="0"........=....... Altura da margem

marginwidth="0"........=........ Largura da margem

0 ................................=........ igual ao valor de espaço da margem podendo ser alterado para qualquer valor numérico

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como escolher cores de links, fonte e fundo da pagina?

<body link="#990000" alink="#000000" vlink="#00FF00" bgcolor="#333333" text="#000000" background="fundo.jpg">

Explicando as tags:

link="#990000".............. ...............=.............. Cor do link

alink="#000000".............. .............=.............. Cor do link quando clicado

vlink="#00FF00".............. .............=.............. Cor do link Visitado

bgcolor="#333333".............. .........=...............Cor do fundo da página

text="#000000".............. ..............=.............. Cor do texto na página

background="fundo.jpg".............. =..............Imagem de fundo da página

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como arrumo fonte, cor do texto, e tamanho em determinados pontos?

Para modificar a fonte de um determinado trecho basta inserir o seguinte código:

<font face="Arial">Meu texto com fonte arial</fonte>

Meu texto com fonte arial

Para modificar a cor de um determinado trecho do texto basta inserir o seguinte código:

<font color="#00FF00">Meu texto de cor verde</font>

Meu texto de cor verde

Para modificar o tamanho da fonte basta inserir o seguinte código:

<font size="+6">Meu texto grande</fonte>

Explicando as tags:

face....... =...... Seleciona a fonte do texto (Arial, helvetica, sans-serif)

color...... = .... Cor

size....... =.......Tamanho, pode-se colocar: +1, +2, +3, +4, +5, +6, -1, -2, -3, -4, -5, -6, ou somente numeros 10, 20, 30, 40

Cara adicionar um cabeçalho (tamanho também) Basta colocar as seguintes tags

<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>

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5

Cabeçalho 6

Também existem tags como

<big><big> = deixando um pouco maior

<small></small> = deixando um pouco menor

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como colocar negrito, itálico, sublinhado ou tachado?

Basta usar as seguintes tags

<b>Texto negrito</b>

<i>Texto Itálico</i>

<u>Texto Sublinhado</u>

<s>Texto Tachado</s>

Texto negrito

Texto Itálico

Texto Sublinhado

Texto Tachado

Explicando tags:

b.. .=....bold (negrito em ingles = bold)

i.. .=.... italic (itálico em inglês = italic)

u.. =.... underline (sublinhando em inglês = underline)

s.. =.... strikethrough (tachado em inglês = strikethrough)

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como alinhar textos?

Formas para alinhamento são:

Dentro da tag <p></p> Incluindo o aling="right" ficando assim:

<p aling="right">Direita</p>

<p aling="center">Centro</p>

<p aling="left">Esquerda</p>

<p aling="justify">Justificar</p>

<center></center>

Direita

Centro

Esquerda

Justificar

Centro

explicando tags:

right:............ Alinha à direita

center:......... Alinha ao centro

left: .............Alinha à esquerda

justify:......... Isso fará com que o navegador ao espaço as palavras de maneira diferente, de modo que eles se alinham com a margem direita

<center>: ......Alinha ao centro, pouco utilizado ultimamente

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu faço para pular linhas?

Simplesmente coloque a tag

<br />

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Hyperlinks, Como criar um link para outras paginas?

Vamos utilizar o elemento <a href="></a> veja como abaixo:

<a href=http://www.google.com.br">Clique aqui</a>

Como fazer para abrir em outra Aba/Janela?

utilizaremos o complemento target="_blank" veja como abaixo:

<a href="http://www.google.com.br" target=_blank">Clique aqui</a>

Explicando as tags:

href.......... =.... destino de origem do arquivo

target....... = ....alvo de onde abrirá a página. Caso a pagina tenha um iframe para abrir dentro do iframe você precisará colocar o nome do iframe no lugar de _blank.

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como criar âncoras?

<a name=sobe"></a>

Esse código você pode colocar no começo da sua página, caso a página seja muito extensa você quer subir rápido sem usar a barra de rolagem ou scroll do mouse você cria o seguinte link

<a href="#sobe">Sobe</a>

caso você tenha que fazer um tutorial ou textos que precisa clicar para achar o ponto certo você cria âncoras que já ira localizar o conteúdo exemplificando

<a href=#1">Criança</a>

<a href="#2">Jovem</a>

<a href="#3">Adulto</a>

<a name="1"></a> A criança com sua alegria...... <a href="#sobe">Sobe</a>

<a name="2"></a> O jovem e seus problemas ...... <a href="#sobe">Sobe</a>

<a name="3"></a> O adulto com suas dores ...... <a href="#sobe">Sobe</a>

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu crio um frame? Como coloco outra pagina dentro da minha?

Para criar um frame você precisará colocar o seguinte código na sua página

<iframe src=http://www.google.com.br" name=centro" width=500" height="500" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" vspace="0" hspace="0"></iframe>

EX: quando abrir sua página, abrirá a pagina do Google dentro da sua página

Explicando as tags:

src.................................... = ...............................Pagina de inicio do iframe, podendo ser um arquivo .html ou uma página externa (p.ex.Google)

name............................... = ...............................Nome do frame, quando linkar um menu para abrir dentro do iframe basta colocar o nome do iframe na target

width.............................. = ...............................Largura do iframe

height............................. = ...............................Altura do iframe

frameborder................... = ...............................bordas --> valores 1 ou 0

Scrilling.......................... =............................... Barra de rolagem --> valores: yes(Com barras), no(sem barras), auto(automarico)

marginwidth...................=............................... Largura da margem do iframe

marginheigth..................=............................... Altura da margem do iframe

vspace............................=............................... Espaço vertical

hspace............................=............................... Espaço horizontal

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como faço para abrir paginas dentro do meu iframe?

Muito simples utilizaremos o seguinte código:

<a href="contato.html" target="centro">Contato</a>

assim ele abrira a pagina dentro do seu iframe

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu coloco uma imagem na minha página HTML?

Para introduzir sua imagem na sua página o seguinte código e utilizado:

<img src=minhafoto.jpg"> (A foto aparecerá em tamanho real na sua página)

<img src=minhafoto.jpg" width="100" heigth="100"> (Foto com tamanho de 100 x 100 Quadrado)

Explicando tags usadas:

src.................................: Destino de onde esta sua imagem

width............................: Largura

heigth...........................: Altura

border...........................: Borda na imagem, pouco utilizado, (caso você link a imagem aparecera uma borda da cor dos links)

alt.................................: Texto alternativo (descrição), quando mouse fica sobre a foto aparece o texto alternativo

title...............................: Texto alternativo (descrição), quando mouse fica sobre a foto aparece o texto alternativo

aling..............................: alinhamento --> Valores: baseline, top, middle, bottom, texttop, absmiddle, absbottom, left, right (Padrão, Linha de base, Superior, Meio, Inferior, Alto do texto, No meio, O mais embaixo, Esquerda, Direita)

vspace...........................: espaçamento vertical

hspace...........................: espaçamento horizontal

Alguns dos formatos mais utilizados são: .gif . jpg .jpeg .png .bmp .tif .pcx . tga

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu crio uma tabela?

O seguinte código tem que ser adicionado.

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td> Minha tabela </td>

</tr>

</table>

Explicando as tags:

table...............................: Inicio da table

width...............................: tamanho da tabela podendo ser utilizando em pixels ou porcentabem

border.............................: borda da tabela

cellspacing.....................: Espaço entre as células

cellpaging.......................: Preenchimento da células

tr........................................: Linhas da tabela

td........................................: Colunas da tabela

Tags que podemos aplicar na tabela:

height......................................: Altura da tabela

aling........................................: alinhamento da tabela linhas ou colunas > valores: Center, Justify , Left, Right (central, Justificado, Esquerda, Direita)

valing.......................................: Alinhamento vertical > Valores: Top, Middle, Bottom, Baseline (Superior, Meio, Inferior, Linha Base)

background.............................: Imagem de fundo, tabela, coluna ou linhas

bgcolor.....................................: Cor do fundo, tabela, coluna ou linhas

bordercolor..............................: Cor da borda da tabela (necessário border="1" ou mais)

bordercolorlight.......................: Cor da linha da borda inferior e direita

bordercolordark........................: Cor da linha da borda superior e esquerda

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como organizar, menu ou textos (estilo parágrafo)

<dl>

<dt>Filosofia</dt>

<dd>A Filosofia é o estudo....</dd>

<dt>Arco-íres</dt>

<dd>O arco-íres contem 7 cores porém na teoria.....<dd>

Filosofia

A filosofia é o estudo...

Arco-íres

O arco-íres contem 7 Cores porém na teoria.....

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Menu com marcadores:

Lista não ordenadas

<ul>

<li>Tutorial</li>

<li>HTML</li>

<li>para</li>

<li>Iniciantes</li>

</ul><br style="">

· Tutorial

· HTML

· para

· iniciantes

Lista Ordenada

<ol>

<li>Tutorial</li>

<li>HTML</li>

<li>para</li>

<li>iniciantes</li>

</ol>

1. Tutorial

2. HTML

3. para

4. Iniciantes

ol : Define uma lista ordenada

ul : Define uma lista não ordenada

li : Define um item de lista

dl: Define uma lista de definições

dt : Define um termo de definição

dd : Define uma descrição de definição

═════════════════════════════════════════════════════════════════════════════════════════════════════════

como remover o marcador da lista não ordenada?

você terá que criar um estilo na tag <ul> Ficando assim

<ul style="list-style-type:none;"> Assim não aparecerá o marcador útil para fazer menus!

════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu posso criar linhas verticais ou horizontais?

Teremos que utilizar a tag <hr>

você pode estilizar ela adicionando as seguintes tags:

width..........................................: largura da linha, pixels ou porcentagem

size.............................................: tamanho em altura (esse seria o height) (para deixa-la na vertical aumente o valor do size e diminua width)

noshade="noshade"....................: desativa o atributo tritimensional da barra, deixando-a apenas com duas dimensoes e com cor cinza-escura

aling............................................: Alinhamento -- > Valores: left, center, right (Esquerda, Central, Direita)

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu deixo a linha <hr> pontilhada ou tracejada?

teremos que adicionar estilo na tag <hr> ficando assim

Pontilhada:

<hr style="border:1px dotted; border-left:none; border-top:none; border-right:none;" />

Tracejada:

<hr style="border:1px dashed; border-left:none; border-top:none; border-right:none;" />

você pode modificar o tamanho da border de 1px pra 2 3 4 5, conforme sua preferência.

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como posso mover o texto na minha pagina de forma fácil?

Você terá que introduzia a tag <Marquee>:

<marquee> Meu texto se movendo </marquee>

Podemos estilizar a posição que ira se movimentar velocidade etc acompanhe as tags que podem ser adicionadas dentro do marquee

behavior................................: Moviemento do marquee > Valores: scroll, slide, alternate( Scroll: faz rolar em um mesmo sentido, slide: Vai de um ponto a outro ate chegar no final da tela, alternate: Vai e volta não sai da tela)

direction................................: Direção que fará > Valores: down , left, right, top (desce, esquerda, direita, sobe)

loop........................................: Quantas vezes a mensagem ira passar

scrolldelayon........................: Serve para selecionar a velocidade, Quanto maior for o numero mais lento fica

MouseOver="stop()".............: serve para para o texto quando fica como mouse sobre

onMouseOut="start()"...........: serve para fazer o texto andar quando tirar o mouse

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como colocar comentários no HTML?

<!-- Escrever aqui -->

Util para você marcar onde começa cada coisa de sua pagina, assim fica mais fácil localiza-lo no Ctrl+F caso esteja perdido

═════════════════════════════════════════════════════════════════════════════════════════

═══════════════════════════════════════════════════════════════════════════════════════════════

═══════════════════════════════════════════════════════════════════════════════════════════════════

═══════════════════════════════════════════════════════════════════════════════════════════════════════

═══════════════════════════════════════════════════════════════════════════════════════════════════════════

═══════════════════════════════════════════════════════════════════════════════════════════════════════════════

Até o próximo tutorial

HTML para iniciantes – Intermediario

Tutorial desenvolvido por raynnerb

Site: http://www.webdesign...ite.com/raynner

Abraço a todos espero que vocês possam tirar duvidas e entenderem mais HTML!

Atenciosamente: Raynner (Y)

═══════════════════════════════════════════════════════════════════════════════════════════════════════════════

═══════════════════════════════════════════════════════════════════════════════════════════════════════════

═══════════════════════════════════════════════════════════════════════════════════════════════════════

═══════════════════════════════════════════════════════════════════════════════════════════════════

══════════════════════════════════════════════════════════════════════════════════════════════

══════════════════════════════════════════════════════════════════════════════════════════

Compartilhar este post


Link para o post
Compartilhar em outros sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...
Entre para seguir isso  

×
×
  • Criar Novo...