Supermetas
  • Home
  • Sobre o Autor
  • Nosso Papo
  • Blog
  • Contato
17/03/2020 por Klayton Georgio
Programação

Estrutura básica de uma página: HTML, CSS e JS

Estrutura básica de uma página: HTML, CSS e JS
17/03/2020 por Klayton Georgio
Programação

No post de hoje eu vou falar um pouco (bem pouco) sobre a estrutura básica de um site: a página. É através do conjunto de várias páginas, ou em alguns casos apenas uma, que é composto um site. Mas, antes disso, esses elementos precisam ser moldados para então serem exibidos aos usuários. Confira nos próximos parágrafos como isso é feito.

HTML

Toda página de site é construída usando o HTML, uma linguagem de formatação de conteúdo. Na maioria das vezes, essa página pode ser gerada dinamicamente dentro do próprio servidor e exibida ao usuário pelo navegador (páginas dinâmicas). Em outras, essas páginas são criadas manualmente pelos designers (páginas estáticas). Mas, em todo caso, a estrutura HTML se faz presente.

Enquanto uma forma consome mais recursos do servidor, a outra exige menos processamento. Optar por um dos dois métodos vai da demanda do cliente e das funções que ele necessita.

CSS

Bom… apesar do HTML ser super importante, ele sozinho não garante uma experiência agradável ao usuário. Seus elementos, mesmos incluídos de forma semanticamente correta numa página, não se diagramam sozinhos na extensão de uma tela. Aplicadas de forma direta, as tags não têm cores, formas e alinhamentos Essa parte de estilização de conteúdo fica por conta do CSS, ou folha de estilos.

Existem 3 formas de usar o CSS para estilização de páginas:

  • Externamente – A vantagem da primeira opção é que o CSS pode estilizar diversas páginas de uma só vez;
  • Internamente – Na segunda opção, ele pode estilizar os elementos apenas da página em que se encontra;
  • CSS Inline – Ele só pode ser aplicado através do atributo “style” dentro de um elemento html.

JS (Javascript)

Javascript é uma linguagem de programação que manipula elementos HTML e CSS e que é executada no lado do cliente, ou seja, diretamente no navegador. O que significa isso? Bom… apesar de hoje o CSS executar muitos comportamentos que antes só eram possíveis de serem criados com javascript, é esta linguagem que pode incluir e excluir elementos HTML novos e ainda alterar atributos de tags dentro da página.

A utilização do Javascript numa página garante mais dinamicidade interativa e melhora a experiência do usuário, apesar de ser necessário o uso com moderação, pois pode tornar o carregamento de uma página mais demorado.

Estrutura Básica do HTML

<!DOCTYPE html>
<html>
    <head>
      <title>Título da Página</title>
	  <link href="(endereço para folha de estilo)" rel="stylesheet"/>
	  <script src="(endereço para o script javascript)"></script>
    </head>
    <body>
      Conteúdo da Página
    </body>
</html>

Compartilhe isso:

  • Clique para compartilhar no Twitter(abre em nova janela)
  • Clique para compartilhar no Facebook(abre em nova janela)
  • Clique para compartilhar no LinkedIn(abre em nova janela)
  • Clique para compartilhar no Tumblr(abre em nova janela)
  • Clique para compartilhar no WhatsApp(abre em nova janela)
  • Clique para compartilhar no Pinterest(abre em nova janela)
  • Clique para enviar por e-mail a um amigo(abre em nova janela)

css html javascript UI User Experience User Interface UX Design

Artigo anterior6 coisas a se fazer no design de um site6 coisas a se fazer no design de um sitePróximo artigo Web 3.0: o que você precisa saber?Web 3.0 - O que você precisa saber?
Klayton Georgio(https://supermetas.com.br)
Olá! Meu nome é Klayton Georgio, tenho 31 anos, sou formado em Comunicação Social, com habilitação para Jornalismo. Tenho conhecimento e prática em WebDesign, além de ser especialista em Design Digital. Já trabalhei em agências de publicidade da Região dos Lagos, no Rio de Janeiro, e hoje sou sócio na Editora Comunicação, onde sou Diretor de Arte.

Deixe uma resposta Cancelar resposta

Klayton Georgio

Assinar blog por e-mail

Digite seu endereço de e-mail para assinar este blog e receber notificações de novas publicações por e-mail.

Junte-se a 1.745 outros assinantes

Cursos que Indico

Quer desenvolver seus conhecimentos, seja você um designer, jornalista ou empreendedor? Eu me interesso muito por essas áreas e vivo fazendo cursos sobre esses temas. Se quiser conhecer alguns que eu já fiz, clique aqui e confira na barra oculta. 😉

Sobre o Projeto

O SUPERMETAS nasceu com o intuito de ajudar quem quer montar seu site na internet, mas que ainda não pode investir na contratação de um profissional. Para tanto, eu dou dicas básicas de design, registro de domínios e manutenção de hospedagem.

Recursos do Site

Hospedagem: Editora Comunicação

Plataforma: WordPress

Tema: Rife By Apollo13

Um pouco de CSS extra ^^’

Últimas Publicações

Criando um site com ferramentas gratuitas02/04/2020
O que ainda vamos falar no Supermetas?31/03/2020
3 bancos de imagens gratuitas para seus projetos online26/03/2020
Site mantido por Editora Comunicação (EdiCom)

Cursos para Iniciantes em Designer Gráfico

Separei aqui alguns cursos que eu já fiz e indico para quem está iniciando no mundo do design.

  • DG PRO
  • Profissão Criativo

Cursos de Design para Jornalistas

Aos meus colegas jornalistas também separei alguns cursos de design para nossa área

  • Diagramação para jornalistas
  • Photoshop para Jornalistas

Cursos para Empreendedores

Além de conferir o conteúdo aqui do Supermetas, você pode fazer esse curso que eu super recomendo.

  • Design Gráfico para Empresários

Cursos de Marketing Digital

Eu já fiz vários cursos do Gabriel Wohlfart sobre Mkt Digital e recomendo. O o suporte é excelente e a mensalidade é super em conta. Detalhe: você pode testar todos os planos por 7 dias!

  • Gerenciando Web Academy
loading Cancelar
Post não foi enviado - verifique os seus endereços de e-mail!
Verificação de e-mail falhou, tente novamente
Desculpe, seu blog não pode compartilhar posts por e-mail.