Maloma Maloma  • 09.09.17 7:50

[APRENDENDO HTML E CSS ~ Tutorial #1] Criando uma página HTML básica. Empty [APRENDENDO HTML E CSS ~ Tutorial #1] Criando uma página HTML básica. 09.09.17 7:50

Reputação da mensagem: 100% (1 votos)
Olá Convidado, tudo bom?
Eu estava pensando, muitas pessoas gostam de programar, queriam aprender pelo menos o básico de HTML e CSS. Aqui estou eu, ensinando com um tutorial e aprendendo com o mesmo, quando fazemos um tutorial, até aprendemos algumas coisas que não tínhamos prestado atenção antes, mas, não desviando o assunto, começaremos aqui uma série de tutoriais ensinando o básico de HTML e CSS, quem sabe passaremos para o avançado mais para frente.

Começando aqui sabemos que um website é feito essencialmente de documentos HTML. Para aprender ou então por em prática os conhecimentos, iremos criar uma página básica HTML com elementos essenciais.

CRIANDO O DOCUMENTO

Para começar, abra seu editor de texto de sua preferência e crie um novo arquivo, nesse arquivo lembre-se de que o arquivo precisará ser com a extensão “.html”. Nesse novo arquivo, salvaremos o mesmo com o nome de “index.html”.

ESTRUTURANDO O DOCUMENTO

Com o HTML5, ficou muito simplificado na hora de iniciar uma nova página. Iremos ver as tags essenciais para um novo documento HTML, as mesmas são:

doctype, especificando o tipo do documento;
html com o atributo lang, para identificar a língua do conteúdo que será escrito;
head, com as informações de cabeçalho não visíveis da página;
meta especificando a codificação da página (charset);
title com o título da página;
body, que conterá o conteúdo da página;

Nós podemos começar com o doctype:
Código:
<!doctype html>
Essa tag é especial, especifica que o documento é HTML e que ele deve ser renderizado conforme o modo pradrões web do navegador.

Em seguida, abrimos a tag html:
Código:
<html lang="pt-BR">
Perceba o atributo lang, identificando a língua na qual o conteúdo da página será escrito.

Em seguida, a tag head:
Código:
<head>
A tag head contém, em geral, informações sobre a página (como títulos e metadados), além de chamadas para outros arquivos, como documentos CSS e JavaScript.

Dentro da tag head, colocaremos primeiro a tag meta especificando a codificação.
Código:
<meta charset="UTF-8">
A tag meta é uma tag vazia e que na qual trabalhamos apenas com seus atributos.

Na sequência, inserimos a tag title:
Código:
<title>HTML e CSS ~ power-pixel.net</title>
A tag title é uma tag simples, com abertura, fechamento e conteúdo no seu interior. Esse texto é o texto que irá aparecer no título da janela ou aba do seu navegador.

Com isso, fechamos a tag head e abrimos a tag body que irá conter o conteúdo da página:
Código:

</head>
<body>
<!-- conteúdo da página -->
</body>
A tag body é justamente o “corpo” da página, onde iremos colocar toda a estrutura e o conteúdo de texto e imagens da página.

A outra tag que você vê, começando com <!— e terminando com --> é um comentário HTML. Comentários são elementos neutros que não influem em nada dentro de uma página.

Abaixo temos o código completo de nossa página em HTML:
Código:
<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>HTML e CSS ~ power-pixel.net</title>
</head>
<body>
<!-- conteúdo da página -->
</body>
</html>

Até o próximo tópico ensinando mais sobre HTML e CSS
Clique aqui para ir ao próximo tutorial ~ ppF

The Flash The Flash  • 09.09.17 9:45

[APRENDENDO HTML E CSS ~ Tutorial #1] Criando uma página HTML básica. Empty Re: [APRENDENDO HTML E CSS ~ Tutorial #1] Criando uma página HTML básica. 09.09.17 9:45

Uma dica para quem quer praticidade, baixem o Atom.io
É um dos editores de código mais utilizados no mundo.
Nele, basta você digitar simplesmente "html" e dar enter que ele já irá criar a estrutura toda.
Isso é muito bom, pois economiza tempo em uma estrutura que é simlles de fazer, mas gasta um certo tempinho.

Wiz-Khalifa Wiz-Khalifa  • 09.09.17 10:33

[APRENDENDO HTML E CSS ~ Tutorial #1] Criando uma página HTML básica. Empty Re: [APRENDENDO HTML E CSS ~ Tutorial #1] Criando uma página HTML básica. 09.09.17 10:33

Flash Reverso escreveu:Uma dica para quem quer praticidade, baixem o Atom.io
É um dos editores de código mais utilizados no mundo.
Nele, basta você digitar simplesmente "html" e dar enter que ele já irá criar a estrutura toda.
Isso é muito bom, pois economiza tempo em uma estrutura que é simlles de fazer, mas gasta um certo tempinho.

Vou pegar essa sua dica

Saigon Saigon  • 09.09.17 12:32

[APRENDENDO HTML E CSS ~ Tutorial #1] Criando uma página HTML básica. Empty Re: [APRENDENDO HTML E CSS ~ Tutorial #1] Criando uma página HTML básica. 09.09.17 12:32

Belo tutorial, e com uma bela dica do Flash.
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.