Ir para conteúdo

[Tutorial][HMTL/CSS]Conceitos e estrutura básica!

Guest Dêemezeká

Por Guest Dêemezeká
em Tutoriais

 Compartilhar

Posts Recomendados

Guest Dêemezeká

Guest Dêemezeká

Postado
Postado
Falae zueiros, zueiras e três pernas do GamersBoard :p
Hoje eu vou começar uma série de tutoriais de HTML & CSS pra servirem de base para vocês começarem a fazer seus proprios sites sozinho e não ficar dependendo mais de templates ._.
 
O que é HTML?
HTML é a linguagem usada para criar sites na web, é a linguagem base de todos os sites. A sigla HTML significa em inglês Hypertext Markup Language que em português é Linguagem de Marcação de Hipertexto.
Porém HTML não é a unica linguagem usada para fazer sites, também existe o CSS, que trabalha lado a lado com o HTML, ele é responsavel pela parte visual da página, enquanto o HTML é o "esqueleto". Existem outras linguagens que também são usadas para criar sites como o JavaScript que no caso não irei ensinar nestes tutoriais, já que o HTML/CSS são os essenciais e com essas duas linguagens você já pode criar um site muito bonito :)

 

O que é preciso para começar?
Basta você ter um editor de texto, desde o mais simples ao mais avançado. Abaixo segue o link do editor que eu uso que é o sublime text 3, ele é bonito e facil de mexer:
Depois de baixar, crie um novo arquivo de texto com a extenção .html ou .php (se você pretende um dia transformar sua página mais dinamica usando PHP eu recomendo que coloque a extenção .php pra não ter que ficar mudando no futuro).
 
Neste primeiro tutorial (focado no HTML) eu vou ensinar a estrutura básica para a criação de uma página da web.
 
Na primeira linha do nosso arquivo digitaremos o seguinte código: <!DOCTYPE html>, ele se parece com uma tag html mas na verdade é uma instrução para que browsers e motores de busca saibam que a página deve ser interpretada em HTML, e como estamos usando HTML5 não é preciso colocar mais nada neste código.
 
Depois do DOCTYPE, vem as tags do html.
Existem dois tipos de tags:
  • As que contém informações, estas precisam ser fechadas depois de aberta, Ex.: <div> Conteudo </div>
  • As que não contem informações, estas não precisam ser fechadas, Ex.: <br> ou <br/> (line break / quebra de linha)
As tags de fechamento são compostas da mesma tag de abertura acrescida de / depois do <. Ex: <head> </head>
 
Continuando na parte das tags, nós fazemos a estrutura de nossa página:
<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
  		<meta charset="UTF-8">
 		<title>GamersBoard</title>
	</head>
	<body>
 	
	</body>
</html>
Como no código acima temos a tag <html> e o atributo de linguagem dela (no caso PT-BR), repare que essa mesma tag <html> do começo se repete no final acrescida de / (</html>).
Depois da tag <html> vem a tag <head> e <body>

 

Na <head> (cabeça/cabeçalho da página) ficam as informações que são carregadas antes do conteudo da página, como o título, o tipo de codificação e etc.
Dentro da <head> tem o <title>, e dentro dele vem o título da página, aquele que aparece bem na aba do seu navegador: 5z59EFc.png
Também temos a metatag(irei explicar sobre as metatags mais pra frente) charset, ela indica qual será a codificação da página, no caso iremos sempre usar UTF-8 para que sejam exibidos acentos, caracteres especiais e etc.
 

Depois de fechar a tag <head> vem a tag <body>. Aqui é onde fica todo o conteúdo visível da página como os textos, imagens e outros elementos

Obs: não importa a sequencia da <head> e <body>, uma pode vir primeiro que a outra, mas é de custume deixar a <head> na frente

 

Bom este tutorial fica por aqui, no próximo irei ensinar sobre mais tags importantes!

Caso tenha alguma duvida/sugestao/critica poste nos comentários :)
0
Link para o comentário
Compartilhar em outros sites
Guest Dêemezeká

Guest Dêemezeká

Postado
Postado
#Continua!
Concerteza :D  

 

Bom tutorial, podia ser era de PHP ne?
De vez enquando eu posso fazer uns tuto de php tb :p  

 

Ótimo tutorial , ja sabia de algumas coisas, mais quero aprender mesmo é php .. Ta ai uma sugestão, fazer tuto de php , queria aprender sistema de login com Php , MySQL e CSS..

Fica dica :)

quem sabe um dia desses eu faço :)  

 

Muito Bom Tutorial 
vlw manolo :)  

 

Muito bom, continua :3
claro :D vlw  

 

nescau nescau nescau
2.0 carai huheuhue
0
Link para o comentário
Compartilhar em outros sites

Participe da Conversa

Você pode postar agora e se cadastrar mais tarde. Se você tiver uma conta, a class='ipsType_brandedLink' href='https://gamersboard.com.br/login/' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title='Sign In Now'>acesse agora para postar com sua conta.
Observação: sua postagem exigirá aprovação do moderador antes de ficar visível.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

Processando...
×
 Compartilhar
Ir para a lista de tópicos

  • Quem está navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...