Olá, queridos leitores do blog. Hoje eu gostaria de falar sobre por que você pode precisar de conhecimento da linguagem HTML ao trabalhar com um site (leia sobre o que é), os fundamentos para trabalhar com folhas de estilo CSS em cascata (você encontrará um artigo introdutório sobre o tema), bem como compreender pelo menos os fundamentos e princípios de construção de programas em PHP e a lógica de trabalho com bancos de dados MySQL.

permite que você crie sites sem possuir toda a sabedoria mencionada acima, mas ao mesmo tempo, enquanto você trabalha, provavelmente terá dúvidas e problemas que não conseguirá resolver nem mesmo com o CMS mais sofisticado (Joomla, WordPress, Drupal, etc.).

Por que você pode precisar de conhecimento de linguagens (marcação, estilos, programação de servidor) ao trabalhar em um site?

Ou você não encontrará tal item no painel de administração do CMS entre muitas outras configurações (a lógica dos autores do mecanismo ao colocar alguns itens de configuração permanece obscura e, talvez, a força do hábito do próprio autor desempenhe um certo papel aqui), ou os desenvolvedores não incluirão tal item no painel de administração do sistema de gerenciamento de conteúdo. É impossível implementar configurações para tudo através do painel de administração - geralmente apenas as configurações mais necessárias e usadas com frequência são exibidas lá.

Muitas vezes acontece mais fácil de resolver o problema não com as ferramentas padrão fornecidas no painel de administração do motor, mas diretamente, editando algo no banco de dados ou ajustando o conteúdo de determinados arquivos do motor através do acesso a eles via FTP.

Sim, isso exigirá gastar tempo aprendendo pelo menos o básico da linguagem de marcação HTML, entendendo como as folhas de estilo em cascata influenciam a aparência das páginas da web, bem como entendendo a estrutura do banco de dados e aprendendo como fazer alterações nele. E, talvez, o mais difícil seja entender os princípios básicos de escrever código em PHP para entender o que e onde pode ser alterado sem dor e o que não deve ser alterado.

Vou, claro, começar pelo design das páginas web (na verdade, neste momento já concluí esta tarefa e vocês podem ver os resultados e). Como já mencionei em um dos posts anteriores, até recentemente todos os recursos consistiam em páginas em formato HTML. Além disso, foram especificados o conteúdo do site (textos, imagens, tabelas) e seu design (cores, fundo, recuos).

No entendimento moderno de layout correto, o conteúdo deve ser realizado usando tags de linguagem de marcação de hipertexto, e o design desse conteúdo deve ser feito usando arquivos de folha de estilo externos. Essa separação permite que você liberte a página do site de códigos de serviço desnecessários.

O facto é que os motores de busca estão muito próximos observe a proporção do componente de informação código da página web (texto exibido no navegador) e seu componente de serviço (tags, scripts diversos, etc.). Portanto, ao ultrapassar os limites desta página tudo o que não carrega uma componente informativa, mas é responsável apenas pelo design das páginas, melhoramos a atitude dos motores de busca em relação ao nosso projeto (bem, pelo menos em teoria).

Além disso, a lista de regras CSS, colocada em um arquivo separado, permite unificar o design do recurso. Se necessário, você sempre pode alterar algo no design sem editar o código de todas as páginas da web, porque neste caso, bastará corrigir as existentes ou adicionar novas propriedades de estilo na folha de estilos comuns a todas as páginas.

Com o advento das folhas de estilo, muitas tags de linguagem de marcação de hipertexto e seus atributos começou a ser considerado obsoleto e não recomendado para uso. Em vez disso, é recomendado usar propriedades CSS que executem as mesmas ações. Isso não significa que não haja mais necessidade de aprender HTML, apenas que diminuiu o número de tags e seus atributos que você precisa conhecer e poder usar para criar e manter um site. Tentarei falar sobre as tags que eu mesmo uso constantemente.

Qual editor é melhor para editar ou fazer alterações no código?

Não há nada de complicado nisso, porque em essência não se trata nem de uma linguagem de programação, mas de marcação de hipertexto, algo semelhante à sintaxe da língua russa. O que você gostaria de aconselhar imediatamente, com base em sua própria experiência? Tente escrever tags você mesmo no bloco de notas, como Bloco de notas++(leia o meu), e não em programas como o Dreamviewer. Por que?

Sim, porque neste caso você vai melhorar e se lembrar da escrita de tags e atributos. Sim, é mais conveniente fazer o layout em programas como o Dreamviewer, porque... você pode visualizá-lo imediatamente no navegador e as opções de ortografia para uma tag específica podem ser selecionadas na lista suspensa.

Mas o fato é que você basicamente terá que editar o código existente nos arquivos do seu motor e será muito mais conveniente se você se lembrar de escrever todas as tags e seus atributos de cor (felizmente não existem muitas). Por que abrir um arquivo em um Dreamview complicado para corrigir uma tag, quando para esses fins um bloco de notas normal, bem, ou seu análogo avançado chamado Notepad plus plus (o link é fornecido logo acima), é suficiente.

Porém, esta é minha opinião pessoal (IMHO) e cabe a você decidir o que é mais conveniente. Por exemplo, Evgeniy Popov, em cujos cursos estudei todo esse assunto, aparentemente é um adepto do Dreamviewer. Em princípio, uma coisa é importante - que você edite o código em um editor que seja capaz de salvar todas as alterações feitas e que possa, se desejar, devolver tudo como estava(para trás).

Nesse caso, não importa o quanto você estrague, tudo terá solução. E, claro, o destaque da sintaxe da linguagem na qual você escreve ou edita o código é muito conveniente. Notepad++ é definitivamente minha escolha! Falei sobre suas capacidades no artigo acima.

Provavelmente não é totalmente correto falar sobre marcação e seu design um por um, então tentarei falar sobre seu uso combinado. Deve-se entender que as propriedades CSS são escritas em um ou mais arquivos separados, que você pode encontrar facilmente no tema utilizado para o seu mecanismo.

Embora as tags de páginas da web em um CMS moderno não sejam escritas em um ou mais arquivos, como era antes, mas são geradas (interpretadas) a partir de PHP. E é o código HTML já gerado desta forma que é inserido no navegador para que este, por sua vez, o interprete em uma forma de página da Internet que seja compreensível para nós. Complicado, não é?

É por isso editando tags em qualquer CMS não é uma tarefa tão trivial, mesmo se você estiver totalmente confortável com a linguagem de marcação de hipertexto. Afinal, você terá que editar tags em arquivos PHP e, portanto, precisará conhecer pelo menos seus conceitos básicos e sintaxe.

Mas não se preocupe, você não precisará de muito conhecimento de PHP para editar o design. As etiquetas ficam ali, por assim dizer, na superfície e não é difícil identificá-las e corrigi-las se necessário.

Quais ferramentas você pode usar?

O problema geralmente surge em outro lugar. Como encontrar o arquivo com extensão PHP no qual o fragmento de tags desejado é formado? Aqui está uma questão de perguntas. Sim, claro, se você tem experiência em trabalhar com esses motores, acho que vai pegar o jeito. Mas se você é iniciante e não sabe qual das centenas de arquivos PHP é responsável por quê?

Um excelente plugin para um navegador igualmente excelente irá ajudá-lo aqui, assim como o já mencionado Notepad++, que não é desconhecido para muitos. Este pacote de programas irá ajudá-lo a mover montanhas e economizar muito tempo.

Nos próximos posts contarei detalhadamente como usar esses programas para resolver de forma eficaz os problemas que surgem com o site. Sim, quase me esqueci do programa indispensável que permite o acesso via FTP - FileZilla (já existe um artigo sobre este assunto). Bem, é claro, também falaremos sobre isso.

Pois bem, os objetivos estão traçados, as tarefas definidas, só falta realizá-las. Para isso, permita-me despedir-me.

Boa sorte para você! Nos vemos em breve nas páginas do blog

Você pode estar interessado

Lindas fontes russas para site e computador no serviço online Google Font - onde baixar e como instalar Design adaptativo (responsivo) - otimizando o site para visualização em dispositivos móveis
Gif, Png ou Jpg - formatos gráficos raster para a web, seus prós e contras quando usados ​​em um site

O código CSS pode estar localizado no documento HTML ou em um arquivo separado com a mesma extensão. Se o CSS estiver em um arquivo externo e não funcionar, a primeira coisa a fazer é verificar o link no código HTML.

O link (href) deve ser escrito em uma única tag de link. O conteúdo do link em HTML5 deve ficar assim: href=”style.css” rel=”stylesheet”. Não se esqueça de que a própria tag do link está localizada entre as tags principais emparelhadas.

Após o valor href, é indicado o nome do arquivo css que deve ser anexado ao documento (não é necessariamente estilo). Se o arquivo com estilos estiver localizado em outra pasta, você deverá especificar o caminho para ele usando uma barra (/).

Sintaxe CSS

Se estiver tudo bem com o link, mas o CSS ainda não funcionar, é necessário verificar a sintaxe do código.

Primeiro, verifique o seletor. O seletor deve corresponder ao que você escreveu no arquivo html. Ou seja, se class = “container” for selecionado em html, então “.container” será escrito em CSS no lugar do seletor. Observe o ponto antes do título. O período é colocado apenas antes das aulas. Se você estiver especificando um estilo para títulos h1, nenhum ponto final será necessário.

O próprio bloco, onde o estilo é declarado, é escrito após o nome do seletor entre chaves. Dois pontos são colocados entre o nome da propriedade e seu valor, seguidos por um ponto e vírgula.

Navegador

Se o navegador no qual você está testando seu código CSS já estiver desatualizado, ele não será capaz de exibir a linguagem CSS3 corretamente. Portanto, caso o código não funcione, atualize seu navegador para a versão mais recente.

Use navegadores diferentes para testar: Opera, Google Chrome, Firefox. Não é recomendado confiar no Internet Explorer pois não é o foco principal da Microsoft, o que o torna “inconsistente” com o CSS3.

Novas versões de navegadores para depuração de código contêm um módulo especial que permite editar o código diretamente no navegador. Para fazer isso, clique em “Mostrar código-fonte” no menu de contexto da janela.

Herança

A coisa mais difícil de entender em CSS é a herança. Embora na maioria das vezes seja a base de código que não funciona.

CSS funciona com o mesmo princípio das bonecas aninhadas. Um recipiente é inserido em outro, um terceiro nele, etc. Para aprender todos os meandros da herança, você precisa gastar uma quantidade considerável de tempo. Você pode começar com o básico.

Primeiro, tente identificar logicamente onde exatamente ocorre o erro no código CSS. Você entenderá isso facilmente, porque... Como resultado do erro, um dos elementos, ao ser exibido no navegador, sairá da imagem que você apresentou.

Quando você encontrar um contêiner ou outro elemento que tenha um estilo aplicado que não funcionou, observe atentamente onde o elemento está "aninhado".

Talvez o elemento pai contenha uma propriedade que impede o funcionamento de outra propriedade no elemento filho. Você pode ler mais sobre herança em qualquer livro de referência CSS.

O que é esse CSS

CSS pode ser chamado de linguagem formal para descrever a aparência visual de um documento. CSS completo parece Folhas de estilo em cascata, que um russo entende Cascading Style Sheets, ou seja, CSS. Claro que ninguém usa CTS, mas é comum usar CSS. A linguagem CSS foi introduzida em 17 de dezembro de 1996.

Por que precisamos de estilos CSS em um arquivo separado?

Para escrever estilos em HTML, você precisa entrar .. escreva suas regras na tag

dentro do qual as regras são escritas. Ele também se inscreveu

— Se você decidir especificar o estilo diretamente conteúdo interno , então você deve usar o parâmetro estilo = "..."

Regras corretas para CSS e como comentar em CSS

Aqui, é claro, você pode escrever uma grande quantidade de teoria, mas não temos um livro de referência aqui. Vou mostrar tudo usando um exemplo simples, o principal a lembrar é que existem seletores, propriedades e valores. O seletor é onde as regras serão aplicadas, a propriedade é o tipo de regras que usaremos e o valor é o valor. (propriedade + valor = regra)

A escrita fica assim seletor(propriedade:valor;), se você precisar aplicar vários seletores, escreva-os usando vírgula, se várias regras forem usadas ponto e vírgula. Sempre no final ponto e vírgula.

Para comentar qualquer texto em CSS você precisa colocar o texto entre aspas como esta /* texto */ e isso é tudo :)

Como prometido, exemplos visuais de CSS :

p(
família de fontes: Verdana;
fundo: branco;
cor vermelha;
}

O seletor aqui é p, ou seja, para qualquer parágrafo com tags essas regras serão aplicadas. O que quer que você escreva no topo, o parágrafo será branco com texto vermelho na fonte Verdana. Mesmo que o fundo geral seja amarelo e a fonte seja diferente.

• Tutorial

Escrevi erros e dicas com base em minha própria experiência. Se houver erros como “maus conselhos”, ficarei feliz em ouvir críticas construtivas. O post é destinado a iniciantes no aprendizado de HTML e CSS, mas talvez especialistas também tenham interesse em ler este material.

1. Validador W3C

Recomenda-se verificar o HTML e CSS do site através do serviço validator.w3.org. Este serviço irá escanear o código e exibir erros, por exemplo:

• tag não fechada;
• caracteres não recomendados em links;
• Uma tag não recomendada é usada;
• atributo obrigatório não especificado;
• e outro.

2. Layout em formato UTF-8

Ao criar o layout da página, você precisa ter certeza de que a codificação do arquivo está definida como UTF-8 (sem lista técnica). Cada editor de texto define a codificação de maneira diferente.

Um arquivo no formato UTF-8 permite usar caracteres não padrão (por exemplo, símbolos de vários idiomas, símbolos de moeda e outros).

Você também precisa informar aos navegadores que a página está aberta na codificação UTF-8. Isso é feito através da tag abaixo:

3. Vários elementos possuem o mesmo id

O valor do atributo id no código HTML não deve ser repetido.

4. Sprites

Recomenda-se combinar várias imagens pequenas em um arquivo (este arquivo é chamado de sprite). Isso reduzirá o número de solicitações ao site e melhorará a velocidade de carregamento da página.

Hoje em dia também é popular usar fontes com ícones em vez de sprites. Aqueles. Em vez de letras, são exibidos ícones de engrenagem, carinhas sorridentes e outros ícones. Um exemplo são os glifos usados ​​no Twitter Bootstrap.

As vantagens das fontes para sprites são a preservação da qualidade ao alterar o tamanho dos ícones e seu tamanho menor. Mas a desvantagem é que você não pode usar mais de uma cor em um ícone.

5. Muitos seletores

Não é recomendado usar mais de três seletores, pois isso afeta o desempenho do site.

/* não recomendado, aninhamento grande */ .page .item .title a () /* pode ser abreviado */ .page .item a ()
Os navegadores leem CSS da direita para a esquerda. Aqueles. no código acima, primeiro serão selecionados todos os links que estão na página, e depois serão selecionados aqueles links que estão dentro do elemento .item.

6. Estilos HTML

HTML destina-se à exibição de informações (texto, imagens). O design do conteúdo (alterar tamanho, cor, fonte) ocorre em CSS.

Erro no código

Erro no código

7. Nomes de classes incorretos

Muitos designers de layout, quando precisam deixar o texto verde, anexam a classe .green a ele.

Mensagem de texto

Isso está errado, porque... Ao alterar o design, muitas cores podem mudar, por exemplo, o texto da mensagem pode aparecer em azul em vez de verde. Então você terá que procurar todas as tags que possuem a classe .green e substituí-la por .blue.

Mensagem de texto

Mensagem de texto

8. Pixels em valores fracionários

Alguns navegadores permitem especificar pixels em valores fracionários, como "1,5px". Mas isso está errado, porque... Um pixel é uma unidade indivisível. Em vez de "1,5px" é melhor usar "1,5em".

P ( /* incorreto */ espaçamento entre letras: 1,5px; /* correto */ espaçamento entre letras: .005em; )

9. Usando classes em vez de ids

Recomenda-se selecionar por classe em vez de id, pois seletores com id têm mais peso que os de classes e será difícil substituí-los.

#modal a ( color: blue; ) /* a cor abaixo não pode ser substituída, porque #modal tem mais peso que classes */ .modal-header a ( color: #333; ) /* neste caso você terá que adicionar #modal */ #modal .modal-header a ( color: #333; )
Também não é recomendado usar!importante, porque seu peso é maior que o do atributo id e também será difícil de substituir.

10. Cardápio

O menu deve ser formatado como uma lista.

Início Notícias Sobre a empresa

• lar
• Notícias
• Sobre companhia

11. Alt ausente para fotos

O atributo alt deve ser especificado nas tags (pode estar vazio).

12. Etiquetas

Deve haver apenas um título por tag por página

. Basicamente, esta tag contém o título da página.

13. Transcrição

Os nomes de todos os elementos devem ser escritos em tradução para o inglês. Mesmo que você não saiba como uma palavra é escrita em inglês, existem muitos serviços gratuitos que podem traduzi-la. Quando os nomes dos elementos aparecem na transcrição, parece pouco profissional.

/* incorreto */ .tovar () .stranica () .zapros () /* correto */ .product () .page () .query ()

14. Correção clara

É difícil escrever sobre clearfix em poucas palavras, mas vou salientar que, na minha opinião, muitos designers de layout cometem erros.

O class.clearfix deve ser especificado na tag pai e não colocado próximo a ela.

15. HTML - linguagem de programação

Algumas pessoas novas em HTML pensam que HTML é uma linguagem de programação. Na verdade, HTML não é uma linguagem de programação; pode ser comparado ao Microsoft Word. Por exemplo, para deixar o texto em negrito, você precisa clicar em um botão no Word e em HTML você precisa escrever o código. Aqueles. HTML é simplesmente uma ferramenta que adiciona texto, imagens, tabelas e outros elementos.

Cascading Style Sheets (CSS) são usados ​​para tornar uma página da web atraente aos olhos dos visitantes. Além disso, as folhas de estilo CSS simplificam muito o processo de criação de uma página da web. CSS também permite fazer alterações em um só lugar, em vez de editar o site inteiro. Dessa forma, você não precisa visitar todas as páginas do site e editá-las.

CSS economiza tempo e energia valiosos. As folhas de estilo em cascata, como o nome sugere, definem um estilo específico para elementos em páginas da web com base em uma lista de prioridades, comumente chamada de "cascata". Além disso, também permite gerenciar diversos elementos nas páginas do seu site. Uma única folha de estilo CSS pode controlar a fonte, a formatação, o tamanho do texto, o posicionamento, o estilo e a cor de um site inteiro. Embora as Cascading Style Sheets possam alterar a apresentação e a aparência do seu site, elas não têm nada a ver com o design do site.

CSS pode ajudar um webmaster de várias maneiras. Graças ao CSS, seu site terá um design mais atraente. Dito isto, até mesmo os motores de busca preferem sites baseados em CSS quando se trata de classificá-los no índice de pesquisa.

Separar a apresentação de um site do seu conteúdo.

Com CSS você pode ter muito controle sobre a aparência do seu site, pois essa tecnologia permite associar diferentes folhas de estilo ao texto do seu site. Como resultado, se você precisar alterar a aparência de qualquer elemento em uma página da web, precisará editar apenas um arquivo de folha de estilo CSS externo e isso será refletido em todo o site. Essa abordagem não apenas fornece um processo flexível de gerenciamento de sites, mas também economiza tempo significativamente.

Aumentando a velocidade de carregamento do site.

Como as folhas de estilo em cascata são arquivos de texto, elas são leves e usam menos largura de banda, o que aumenta a velocidade de carregamento do seu site. Segundo as estatísticas, um site que usa folhas de estilo externas baseadas em CSS carrega aproximadamente sete vezes mais rápido do que um site semelhante sem essa tecnologia. Como os documentos de texto carregam muito rapidamente, as páginas da web serão renderizadas em quase questão de segundos, o que terá um impacto positivo na experiência geral do visitante ao visitar seu site.

CSS facilita a alteração da posição de qualquer elemento em uma página da web. Por exemplo, o menu pode ser colocado em qualquer lugar: esquerda, direita, superior ou inferior. Ao mesmo tempo, o principal objetivo desse posicionamento de elementos é garantir que os robôs dos mecanismos de pesquisa rastreiem primeiro o conteúdo principal do seu site. Para conseguir isso, você precisa colocar todos os elementos auxiliares, como menus, após o conteúdo principal do código HTML.

Compatibilidade CSS com navegadores modernos.

Como atualmente existem muitos navegadores diferentes, é difícil para um webmaster verificar a funcionalidade de um site em absolutamente todos os navegadores. No entanto, se você seguir um layout padrão baseado em CSS, esse problema será facilmente resolvido.

Como pode ser visto acima, a tecnologia CSS, além de fornecer ferramentas para a criação de sites modernos e atraentes, também ajuda a solucionar uma série de problemas. O que por si só determina a grande importância do CSS.

Um dos serviços mais antigos da Internet são os fóruns. Estas plataformas de comunicação foram das primeiras a surgir e permaneceram praticamente inalteradas desde então. Mas, apesar da idade avançada, eles ainda cumprem suas funções. Aqui as pessoas se comunicam, fazem perguntas e obtêm respostas.