cancelar
Showing results for 
Search instead for 
Do you mean 
ChanaDelRey
Dragão
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 😄

 

 

 

Tags (1)
13 RESPOSTAS
SanGrent
Arauto
Arauto

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

Mimicista
Lenda
Lenda

Lindo post!
Diva e gata, amo vc ❤️

eu tbm me amo ❤️
Houndder
Arauto
Arauto

Caramba, você digitou tudo isso, naquele tempo?
Diva demais, oloco.
''Quando perdemos nossos princípios, convidamos o caos''
Aylinn
Rioter
Rioter

oloko o.o

 

Até adicionei TAG nesse tópico ❤️ GGWP

Retorno do Lee I
Aronguejo
Aronguejo

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?

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

MVN
Tropa
Tropa

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

2


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

boa pergunta kkkkkkkkkk

CoNii
Tropa
Tropa

Amei!! Muito obrigado pela ajuda. Irei usar
Demon May Cry
Aronguejo
Aronguejo

Muito útil, obrigado!
Gozei na pia
Tropa
Tropa

Isso foi mt útil, obrigado!!!
SneazyBr
Tropa
Tropa

Coisa bacana é eu ser programador e n saber nda sobre html, e acabar aprendendo em um forum de lol, mec