Se você está experimentando construir seu próprio site ou se alguma vez se perguntou como poderia mudar algo no tema do Tumblr, é importante saber algumas coisas sobre a espinha dorsal da Internet. Saber 'apenas o suficiente para ser perigoso' permite que você entenda o que está acontecendo nos bastidores sem ter que gastar mais de 10.000 horas dominando uma linguagem de codificação. Após quase 20 anos de construção de sites, aqui estão as 10 coisas que acho que todos deveriam saber sobre o código estranho e maravilhoso que constitui a web.
O código do site é composto de HTML, CSS e scripts
Quando você visita o nome de domínio de um site, é provável que veja belas imagens, um layout limpo e um texto além do seu conteúdo. Espreite por trás da cortina desse smorgasboard visual, no entanto, e você encontrará os blocos de construção da web: o código.
Ofertas VPN: Licença vitalícia por US $ 16, planos mensais por US $ 1 e mais
O código do site é composto de três coisas: HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) e scripts. Cada pedaço de código contribui com uma parte valiosa para fazer um site parecer e funcionar da maneira que funciona.
HTML é o código mais visível escondido atrás de um site e pode ser visto exibindo o código-fonte de uma página. Os elementos são compostos por palavras colocadas entre divisas chamadas ''. Um elemento HTML geralmente vem em um par: uma tag de abertura e uma tag de fechamento. Por exemplo:
This is part of the body of the website Alguns elementos HTML não requerem uma tag de fechamento porque tudo acontece dentro da própria tag. Dois exemplos disso são
CSS oculta dentro de uma folha de estilo externa ou dentro de HTML elemento. CSS usa seletores para modificar o estilo e o design dos elementos HTML.
Seu seletor CSS típico pode direcionar um elemento HTML diretamente (se você quiser estilizar o elemento inteiro) ou a classe de um elemento (se você quiser estilizar apenas uma instância do elemento). Em uma folha de estilo, o estilo de um elemento HTML é assim:
body { background: #000; } O estilo da classe de um elemento é assim:
.bodytext { color: #FFF; } Scripts inclua formatos como Javascript, PHP, Ruby e muito mais. Os scripts permitem que seu site exiba conteúdo mais complexo, como animações. Scripts e bancos de dados complexos são o que alimenta os sistemas de gerenciamento de conteúdo (CMS); eles permitem que o proprietário do site edite o texto de sua página e adicione postagens de blog sem nunca ver um lampejo de HTML ou CSS. (Se você usa algo como Tumblr ou Wordpress, esses CMSes são movidos por linguagem de script e bancos de dados.)
O código Javascript simples pode ser encontrado dentro do HTML tag ou em uma folha de script externa. Scripts mais complexos e chamadas de banco de dados são essencialmente ocultos ao visualizar o HTML de um site.
HTML é sobre estrutura; CSS é sobre design
Se você está pensando em editar o código do seu site, precisa saber onde editar antes de mergulhar. HTML e CSS têm seus próprios propósitos em sua página da web - você não pode exigir que uma linguagem execute algo que ela não pode.
O código HTML é quando você deseja editar oestruturade uma página: se você deseja adicionar uma imagem ao cabeçalho do seu site, você deseja editar o seu HTML.
Código CSS é quando você deseja adicionarProjetopara a sua página: se você quiser alterar a forma como uma imagempareceno seu site - altere seu tamanho, adicione uma borda, mova-o pela página - você deseja editar CSS.
melhor mousepad para mouse mágico
HTML e CSS são lineares
Um navegador da web traduz o código de um site no que você vê ao visitar uma página. Seu navegador executa esse código de cima para baixo: por padrão, seus elementos HTML e seu conteúdo são exibidos em uma lista linear.
Seu CSS deve irantes dao código HTML que você deseja estilizar: essencialmente, você está informando ao navegador da webComo aspara estilizar um elemento antes de chegar a esse elemento específico.
Da mesma forma, o CSS é executado de cima para baixo e pode ser substituído: se você especificar na linha 5 de sua folha de estilo que deseja que seus parágrafos tenham texto preto, mas escreva novamente na linha 20 que deseja que seus parágrafos em verde, você verá texto verde, não preto na versão final.
Como identificar um trecho de código que você deseja alterar
Para alterar o conteúdo ou o estilo de um elemento HTML em seu site, você vai querer saber duas coisas: como esse elemento é chamado e se ele tem uma classe CSS específica que você pode usar.
Você pode fazer isso facilmente com o Inspetor do seu navegador da web: Esta é uma janela que aparece junto com a versão visual do seu site que contém todo o seu código HTML e CSS.
Para visualizar o Inspetor no Safari:
- Vou ao Safári menu e selecione Preferências .
- Clique no Avançado guia e verifique o Mostrar ferramentas de desenvolvedor caixa.
- Perto a janela Preferências.
- Clique com o botão direito (ou clique com o botão direito do mouse) em qualquer parte do site que você deseja visualizar e selecione Inspecionar elemento . O Inspetor aparecerá em uma caixa subsequente.
Para visualizar o Inspetor no Chrome:
apple care para apple watch
- Clique com o botão direito (ou clique com o botão direito do mouse) em qualquer parte do site que você deseja visualizar e selecione Inspecionar . O Inspetor aparecerá em uma caixa subsequente.
Assim que o Inspetor estiver aberto, você pode passar o mouse sobre qualquer parte do código e o elemento correspondente em sua página da Web será destacado como uma caixa.
Você pode expandir essas setas suspensas para visualizar os elementos HTML aninhados (partes ocultas dentro de elementos HTML maiores) e identificar a parte do código que deseja alterar. Se quiser ter como alvo uma instância específica de um elemento, você deve procurar a propriedade de 'classe' desse elemento.
Onde você edita seu código
Depois de identificar o que deseja corrigir em um site, você precisa saber para onde ir.
Muitos construtores de sites WYSIWYG iniciantes (o que você vê é o que você obtém) gostam Squarespace não permitirá que você mergulhe diretamente no HTML, mas oferece uma área de 'CSS customizado' no caso de você querer fazer ajustes customizados além do que o editor visual do serviço oferece. Você poderá alterar o design de elementos HTML existentes, mas não poderá adicionar seções inteiramente novas.
Em contraste, alguns serviços de blog como Tumblr permitirá que você adicione CSS personalizadoemergulhe diretamente no código-fonte HTML e CSS. Se um serviço oferecer esse recurso, você verá uma opção que diz Editar em HTML ou editor , que permite editar e alterar diretamente o código HTML e CSS.
Como fazer uma anotação no código
Quando você estiver experimentando seu código pela primeira vez, use notas (ou 'comentários', como são chamados no jargão do desenvolvedor da web). Use-os cedo e frequentemente.Especialmentese você estiver experimentando o código uma hora por vez. Adicionar documentação ao seu código pode ajudá-lo quando você voltar a ele uma semana depois e esquecer completamente o que estava fazendo ou o que aquele bloco de código deve fazer.
Uma nota HTML se parece com isto:
Uma nota dentro de uma folha de estilo CSS tem a seguinte aparência:
/* This is a CSS note */ Eles não aparecerão em nenhum lugar da sua página final, mas estarão dentro do seu código HTML e CSS para sua referência (e qualquer outra pessoa que visualize o seu código-fonte).
A melhor folha de dicas HTML / CSS
Quer fazer algo em HTML ou CSS, mas não sabe como? Precisa de uma referência sobre como funciona um determinado elemento HTML ou propriedade CSS? W3Schools oferece notas detalhadas e explicações para cada código HTML e CSS existente - e também algum Javascript.
Se você realmente quiseraprendercomo codificar do zero, verifique Codecademy fantásticos tutoriais de.
significado de borboleta monarca
Onde encontrar exemplos de projetos
Se você está procurando inspiração para o seu site ou apenas quer ver como algo foi feito, fique à vontade para usar o Inspetor do seu navegador em qualquer página. Você pode obter trechos de código diretamente do inspetor usando copiar e colar.
Se você quiser encontrar algo específico, dê uma olhada Codepen , um bloco de notas de projeto para milhares de desenvolvedores da web. Você pode pesquisar qualquer tipo de código especial: um menu responsivo, botões animados, uma tela de iPhone construída em CSS - o que você quiser.
Como solucionar problemas de um site com comportamento inadequado
Não tem certeza de como resolver um problema ou por que há um problema em primeiro lugar? Gosto de me referir à minha lista 'Você já tentou? ...':
- ... Salvando seu trabalho?
- ... Certificando-se de que suas tags (ou seletores) estão fechadas?
- ... Verificando se há aspas ausentes ou espaços estranhos em seu código?
- ... Certificando-se de que sua classe CSS está definida no elemento HTML que você está alterando?
- ... Ler no W3Schools para ter certeza de que seu estilo CSS pode fazer o que você deseja?
- ... Revertendo para sua última versão de código salva e reiniciando?
- ... Procurando seu problema no Google ou StackOverflow ?
Saiba quando ir embora
Às vezes, um problema é muito grande para você consertar, e tudo bem, especialmente se você está apenas começando com HTML e CSS.
Se for um pequeno problema que eu sei quedevemosconseguir consertar, tiro um tempo longe do projeto e faço algo completamente diferente. O espaço é bom para o seu cérebro e bom para a sua sanidade; sem ele, você pode chegar tão longe em um problema que a solução pode estar na sua cara, mas você está muito zangado ou frustrado para reconhecê-lo.
Também não há nada de errado em buscar a ajuda de programadores experientes em sites como StackOverflow ; muitas vezes, eles podem ajudá-lo a localizar problemas e voltar ao seu caminho.
Se for algo que você não consegue resolver e não quer aprender, considere contratar um desenvolvedor ou designer da web. Existem milhares de programadores incrivelmente talentosos por aí, e se seu projeto exigir um pouco mais de esforço ou profissionalismo do que você está disposto a dedicar seu tempo, suas habilidades podem ser inestimáveis.
Suas dicas favoritas? Questões?
Tem alguma dica obrigatória para começar com o código do site? Tem alguma dúvida sobre minhas sugestões? Deixe-nos saber abaixo.
