cancelar
Showing results for 
Search instead for 
Do you mean 

[GUIA] O que são HTML e como usar !

Highlighted
Dragão

[GUIA] O que são HTML e como usar !

 

O que é HTML?

HTML (abreviação de Hypertext Markup Language) é uma linguagem de marcação utilizada na estruturação de páginas web. Sua sintaxe é bastante simples e, assim como a XML é baseada em tags, que representam os diversos elementos de uma página, como imagens e links.

 

Vou passar alguns HTML para criarem Tópicos ou outras coisas, usem com MODERAÇÃO !

 

Tags estruturais <!– –>

Cria um comentário

<html> </html>

Envolve todo um documento html

<head> </head>

Envolve o cabeçalho de um documento html

<meta >

Fornece informações gerais sobre o documento

<style> </style>

Informações de estilo

<script> </script>

Linguagem script

<noscript> </noscript>

Conteúdo alternativo para quando a linguagem script não for suportada

<title> </title>

O título do documento

<body> </body>

Envolve o corpo (texto e tags) do documento html

  • bgcolor – Cor de fundo #RRGGBB
  • background – Imagem como plano de fundo
  • text – Cor do texto principal
  • link – Cor dos links existentes na página
  • vlink – Cor do link já visitado
  • alink – Cor do link que foi ativado
  • marginheight – Elimina a margem esquerda apenas no Netscape
  • marginwidth – Elimina a margem no topo da página apenas no Netscape
  • topmargin – Elimina a margem no topo da página apenas no Internet Explorer
  • leftmargin – Elimina a margem esquerda apenas no Internet Explorer
Cabeçalhos <hn> </hn>

Cabeçalho nível n para n de 1 a 6

Parágrafos <p> </p>

Um simples páragrafo

  • align – Alinhamento do parágrafo: left, right, center e justify
Links <a> </a>

Cria um link e inclui atributos em comum

  • href – O URL do documento que será vinculado a este. Para e-mail: mailto e link externo: http
  • name – O nome da âncora
  • target – Identifica a janela ou local em que o link deverá ser aberto: blank, self, top, parent
  • rel – Define os tipos de link que avançam
  • rev – Define os tipos de link que revertem a ação
  • acesskey – Atribui uma tecla de atalho para este elemento
  • shape – Para uso com formas de objeto
  • coords – Para uso com formas de objeto
  • tabindex – Determina a ordem das guias
  • onclick – É um evento JavaScript
  • onmouseover – É um evento JavaScript
  • onmouseout – É um evento JavaScript
Listas <ol> </ol>

Uma lista ordenada

  • start – Define a partir de qual número a listagem começa
  • type – Tipos de caracteres ordenados: A, a, I, i, 1
<ul> </ul>

Uma lista não ordenada

  • type – Tipos de caracteres não ordenados: disk, square, circle
<li> </li>

Um item da lista

  • value – Numeração individual do item da lista
  • type – Tipos de caracteres ordenados: A, a, I, i e 1 para listagem ordenada e disk, square e circle para não ordenada
<menu> </menu>

Um menu com uma lista de itens

<dir> </dir>

Uma listagem de diretórios

<dl> </dl>

Uma lista de definições ou glossário

<dt> </dt>

Marca o texto especificado como um termo de definição de um glossário

<dd> </dd>

Especifica o texto referente a um termo criado pela tag <dt> dentro de uma lista de definição

Formatação de caracteres <em> </em>

Maior ênfase em itálico

<strong> </strong>

Maior ênfase em negrito

<code> </code>

Amostra de código

<kbd> </kbd>

Texto a ser digitado

<var> </var>

Uma variável ou espaço reservado para um outro valor

<samp> </samp>

Texto de amostra

<dfn> </dfn>

Aplica um formatação no texto definido como termo de um glossário

<cite> </cite>

Uma citação

<b> </b>

Texto em negrito

<i> </i>

Texto em itálico

<u> </u>

Texto sublinhado

<tt> </tt>

Fonte monoespaçada (texto semelhante à maquina de escrever)

<pre> </pre>

Texto pré-formatado

<strike> </strike>

Texto riscado

<s> </s>

Texto tachado

<sub> </sub>

Texto subscrito

<sup> </sup>

Texto sobrescrito

<big> </big>

Texto em fonte maior do que o padrão

<small> </small>

Texto em fonte menor do que o padrão

<blink> </blink>

Texto piscando somente no Nestcape

<marquee> </marquee>

Texto animado no Internet Explorer

Outros elementos <hr>

Uma régua horizontal

  • size – Espessura da linha em pixels
  • width – Largura da linha em pixels ou porcentagem
  • align – Alinhamento da linha em center, left, right
  • color – Cor da linha em #RRGGBB
  • noshade – Linha sólida
<br>

Uma quebra de linha

<center> </center>

Centralizar

<div> </div>

Conteúdo

  • align – Alinhamento: left, center e right
<blockquote> </blockquote>

Texto com mais margem

<address> </address>

Assinaturas ou informações gerais sobre o autor de um documento

<font> </font>

Alterna tamanho , cor e tipo de fonte exibida

  • size – O tamanho da fonte varia de 1 a 7
  • color – A cor da fonte #RRGGBB
  • face – O tipo da fonte
<basefonte>

Define o tamanho padrão para a fonte na página atual

  • size – O tamanho da fonte varia de 1 a 7
Imagens <img>

Insere uma imagem in-line no documento e inclui atributos comuns

  • usemap – Um mapa de imagens do lado cliente
  • src – O URL da imagem
  • alt – Uma string de texto que será exibida em navegadores que não possam suportar imagens
  • align – Determina o alinhamento de uma determinada imagem: top, middle, bottom, left e right
  • height – É a altura sugerida em pixels
  • width – É a extensão sugerida em pixels
  • vspace – O espaço entre a imagem e o texto acima e abaixo dela
  • hspace – O espaço entre a imagem e o texto à esquerda e à direita dela
  • border – Largura da borda
Frames <frameset> </frameset>

Define um frameset

  • rows – Número de linhas no frame
  • cols – Número de colunas no frame
  • frameborder – Borda do frame
  • framespacing – Espaçamento
  • onload – É um evento intrínseco
  • onunload – É um evento intrínseco
<frame> </frame>

Define um frameset

  • name – É o nome do frame-alvo
  • src – Chama a fonte de conteúdo do frame
  • frameborder – Determina a borda do frame
  • marginheight – Determina a largura das margens
  • noresize – Determina a capacidade de redimensionar frames
  • scrolling – Determina a capacidade de rolagem dentro dos frames: auto, yes e no
<iframe> </iframe>

Define um frame in-line

<noframes> </noframes>

Alterna o conteúdo quando os frames não são suportados

Tabelas <table> </table>

Cria uma tabela

  • background – Imagem de plano de fundo
  • bgcolor – Cor de plano de fundo
  • border – Largura da borda em pixels
  • cols – Número de colunas
  • cellpadding – Espaçamento nas células
  • cellspacing – Espaçamento entre as células
  • width – Largura da tabela
  • align – Alinhamento da tabela: left, center, right
  • bordercolor – Cor na borda da tabela
<caption> </caption>

A legenda para a tabela

<tr> </tr>

Uma linha na tabela

  • align – O alinhamento horizontal do conteúdo das células dentro dessa linha com os valores possíveis left, right, center, justify e char
  • bgcolor – Cor de fundo
  • valign – o alinhamento vertical do conteúdo das células dentro dessa linha com os valores possíveis top, middle, bottom e baseline
  • background – Figura como plano de fundo
<th> </th>

Um cabeçalho de célula da tabela

  • align – Alinhamento horizontal
  • valign – Alinhamento vertical
  • bgcolor – Cor de plano de fundo
  • rowspan – O número de linhas pelo qual essa célula se expandirá
  • colspan – O número de colunas pelo qual essa célula se expandirá
  • nowrap – Desliga o enquadramento de texto em uma célula
<td> </td>

Define uma célula de dados da tabela

  • align – Alinhamento horizontal
  • valign – Alinhamento vertical
  • bgcolor – Cor de plano de fundo
  • rowspan – O número de linhas pelo qual essa célula se expandirá
  • colspan – O número de colunas pelo qual essa célula se expandirá
  • nowrap – Desliga o enquadramento de texto em uma célula
  • width – Largura da célula
  • height – Altura da célula
Formulários <form> </form>

Define um formulário

  • action – Responsável por determinar o exato local para onde as informações coletadas no formulário deverão ser enviadas
  • method – Método de empacotamento dos dados do formulário: get, post e enctype="multipart/form-data"
  • name – Nome do objeto
<input>

Caixa de texto

  • type – Tipo de dado: text, file, radio, checkbox, hidden, password, submit, reset, button, image
  • name – Identificação do campo
  • size – Largura
  • maxlength – Número máximo de caracteres permitidos
  • value – Texto que aparece dentro da caixa ou nome do botão
  • checked value – Valor assumido quando este campo for selecionado
<textarea> </textarea>

Permite criar elementos de entrada com características de texto

  • rows – Tamanho da linha da caixa de texto
  • cols – Tamanho da coluna da caixa de texto
  • name – Identificação do campo
  • wrap – Quebra de linha da caixa de texto: off, virtual, physical
<select> </select>

Seleção

  • name – Identificador
<option> </option>

Opção

  • value – Valor do campo

 

Para usar basta ir 

 

 

HTML

 

Existe tambem uma HTML que é usada para por a Imagem ao lado, é simples , bastar ir no Topíco de @Houndder 

 

https://forum.br.leagueoflegends.com/t5/Discuss%C3%B5es-sobre-o-F%C3%B3rum/Guia-Ferramenta-para-post...

 

Espero que tenha ajudado Smiley Very Happy

 

 

 

Tags (1)
11 RESPOSTAS
Arauto

Re: [GUIA] O que são HTML e como usar !

A oscilação entre tópicos desnecessários/ruins/overdose e educabons é incrível. Tópico útil e necessário
 Let's raise the stakes

Re: [GUIA] O que são HTML e como usar !

Lindo post!
Diva e gata, amo vc <3
Dragão

Re: [GUIA] O que são HTML e como usar !

eu tbm me amo <3
Arauto

Re: [GUIA] O que são HTML e como usar !

Caramba, você digitou tudo isso, naquele tempo?
Diva demais, oloco.
Rioter

Re: [GUIA] O que são HTML e como usar !

oloko o.o

 

Até adicionei TAG nesse tópico <3 GGWP

Aronguejo

Re: [GUIA] O que são HTML e como usar !

não costumo usar a aba de HTML, então uma pergunta, preciso iniciar o comentário com "<!DOCTYPE>" ? ou o código é so o do head e do body?

Re: [GUIA] O que são HTML e como usar !

Não sei exatamente como funciona o HTML do Fórum mas geralmente eu uso na criação dos sites, mas a regra seria
<!DOCTYPE html>
<html>
<head>
<title>titulo</title>( não necessário)
</head>

<body>
( aqui entra todo o texto, imagem e etc ) podendo usar as tags de <h1><h2><h3> ( tags de tamanho de letra ) como por exemplo:
<h1>TEXTO GRANDE</h1>
<h2>TEXTO MENOS GRANDE</h2> e por assim vai até o <h6>.
</body>


Você pode tentar digitar o texto no modo normal e mudar para o html para adicionar as tags desejadas, como por exemplo por uma letra maior e etc....

Mas o ruim é que do jeito que disse acima ele nao vem identado ( espaço para de visualizar melhor o codigo ) entao pode parecer um amaranhado de letras e simbolos. 

Um site ótimo que você pode se iniciar na Linguagem de Marcação é o W3Schools que eu também uso na hora de fazer alguns trabalhos escolares. Espero ter ajudado

Tropa

Re: [GUIA] O que são HTML e como usar !

Favoritei, mas queria entender pq faria em HTML .. ?

Re: [GUIA] O que são HTML e como usar !


@ MVN@  escreveu:
Favoritei, mas queria entender pq faria em HTML .. ?

boa pergunta kkkkkkkkkk

Tropa

Re: [GUIA] O que são HTML e como usar !

Amei!! Muito obrigado pela ajuda. Irei usar
Aronguejo

Re: [GUIA] O que são HTML e como usar !

Muito útil, obrigado!