[Em construção] Guia e ajuda de HTML/CSS

por Hyou is mai waifu Dom Mar 01, 2015 6:46 pm

Bem, como eu sei disso e quero ajudar pessoas vou ir fazendo esse post aos poucos.

Se você tem alguma duvida não tenha medo em perguntar

OBSERVAÇÃO: O forumeiros tem estilos pré feitos que modificam os códigos, em breve tentarei colocar os exemplos em outros lugares pra mostrar melhor

Quick Links:

HTML
CSS

HTML

HTML é bem simples, como veremos abaixo, as coisas começaram a complicar mais quando chegarmos em CSS

Estrutura:

A estrutura do HTML é basicamente o abrimento e fechamento de tags, como no BBCode, mas diferente do BBCode se usa os sinais maior-que e menor-que (> <) ao invés de colchetes ([]). Exemplo:

Código:: [center]Esse texto esta centralizado[/center] <center>Esse texto também esta centralizado</center>

Esse texto esta centralizado

Esse texto também esta centralizado

Algumas tags trabalham diretamente dentro de um <>, como por exemplo a tag br

Código:: Esse é um exemplo de como a tag br funciona <br />Esse é um exemplo de como a tag br funciona

Esse é um exemplo de como a tag br funciona
Esse é um exemplo de como a tag br funciona

Principais partes do HTML em um design de pagina:

Se você está querendo fazer algum design de pagina do zero você PRECISA, saber as seguintes tags:

Cabeçalho:

Cabeçalhos são utilizados para titulos e não somente para deixar os textos grandes, tem seis tamanhos de cabeçalho (de h1 (o maior) a h6 (o menor)) e eles mudam de tamanho de acordo com o tamanho da pagina onde ele foi colocado. Veja abaixo os tamanhos de cabeçalhos

Código:: <h1>Largest</h1><h2>Large</h2><h3>Big</h3> <h4>Normal</h4><h5>Small</h5><h6>Smallest</h6>

Largest

Large

Big

Normal

Small

Smallest

(Parece que o fórum coloca automaticamente linhas horizontais nos 3 cabeçalhos maiores, isso não ocorre normalmente)

Quebradores de linha e linha horizontal:

Quebradores de linhas são utilizadas nos códigos por que o código não muda a linha automaticamente quando você aperta "enter" quando você escreve um texto diretamente no código, utiliza-se a tag "br"

Código:: Esse é um exemplo de como a tag br funciona <br />Esse é um exemplo de como a tag br funciona

Esse é um exemplo de como a tag br funciona
Esse é um exemplo de como a tag br funciona

Linha horizontal simplesmente adiciona uma... linha horizontal na sua pagina, utiliza-se a tag "hr"

Código:: Uma linha<hr />Duas linhas<hr />Três linhas<hr />

Uma linha

Duas linhas

Três linhas

Paragrafo:

Muito parecido com o quebrador de linha mas adiciona um espaço entre uma linha e outra, geralmente usado pra texto longo, pode se colocar atributos para cada paragrafo ficar único, utiliza-se a tag "p" (abrindo-a e fechando-a)

Código:: <p>Esse é um exemplo de como a tag p funciona</p><p>Esse é outro exemplo de como a tag p funciona</p>

Esse é um exemplo de como a tag p funciona

Esse é outro exemplo de como a tag p funciona

Links:

Hyperlinks ou URL são endereços que levam a outras paginas, a tag usada é a "a"

Código:: <a href="http://madhouse.forumeiro.com/">Madhouse</a>

Madhouse

Obs: O atributo "href" sempre deve ser utilizado (Há apenas uma exceção, que explicarei logo)
Obs2: Lembre-se sempre de colocar "http://" no link

Imagens:

Essa é meio obvia, se utiliza a tag "img", lembrando que não é preciso fechar a tag como vemos em baixo

Código:: <img src="http://r26.imgfast.net/users/3111/14/96/21/avatars/3228-43.jpg" />

Obs: O atributo "src" é obrigatório, se não o código não funciona

Dica: Pode se utilizar a tag "img" com a tag "a" para se fazer uma imagem com um link

A parte maior vai ser adiada, vou ir colocando coisinhas menores até ter tempo pra realmente colocar a parte grande

por Fuza Seg Mar 02, 2015 4:24 am

Oque dizer desse cara? mal conheço e já considero pacas Happy Rage Guy

, post nem ta pronto ainda mas ja ganho meu like, gostei bastante thumb up

por Nyuu Seg Mar 02, 2015 6:08 pm

Estou ansiosa pela parte de css, afinal, é nessa parte que eu sempre me complico.
Enfim, admiro a sua boa vontade para fazer esse tópico.

por Hyou is mai waifu Seg Mar 02, 2015 6:11 pm

Fuza escreveu:Oque dizer desse cara? mal conheço e já considero pacas , post nem ta pronto ainda mas ja ganho meu like, gostei bastante

Obrigado o/

Nyuu escreveu:Estou ansiosa pela parte de css, afinal, é nessa parte que eu sempre me complico.
Enfim, admiro a sua boa vontade para fazer esse tópico.

A parte de CSS virá em mais ou menos 3 semanas, mas demorará a ser terminada por que tem muita coisa

Alias, atualizei o post principal

por Fuza Seg Mar 02, 2015 6:51 pm

Continue cara mas sem pressa xD vai ser um tópico muito útil aqui no MH.

por Hyou is mai waifu Seg Mar 02, 2015 7:08 pm

Fuza escreveu:Continue cara mas sem pressa xD vai ser um tópico muito útil aqui no MH.

Sim vou continuar fazendo, sem pressa por que se não fica ruim

Alias, podem perguntar coisas sobre HTML ou CSS mesmo sem estar no primeiro tópico, vou tentar responder da melhor maneira possível

por Fuza Seg Mar 02, 2015 8:39 pm

é que manjo o basico, tipo aquelas coisas do orkut sabe?

por Hyou is mai waifu Qua Mar 04, 2015 6:25 pm

Fuza escreveu:é que manjo o basico, tipo aquelas coisas do orkut sabe?

Ai é bem básico mesmo hehe

Bem, atualizei o post, estou quase chegando a parte avançada de HTML, onde vou separar os garotos dos homens e as garotas das mulheres (Vou mais ensinar a mexer no site de tutorias de HTML do que ensinar HTML propriamente dito, mas acredito que vocês vão entender)

por Hyou is mai waifu Dom Mar 08, 2015 6:08 pm

Double post de aviso:

A escola e outras coisas tão caindo em cima e to passando por uns problemas pessoais, então não vou conseguir atualizar esse post, vou continuar ai pelo fórum mas só vou retomar esse tópico daqui a um tempo, espero que entendam

por Conteúdo patrocinado

[Em construção] Guia e ajuda de HTML/CSS