Tudo o que o visitante vê nas páginas do site é exibido pelo navegador com base em instruções detalhadas enviadas a ele pelo servidor. Essas instruções são chamadas de código html da página e são compostas de "tags" separadas que descrevem o tipo, aparência e localização de cada elemento individualmente. Para colocar qualquer novo elemento (por exemplo, uma imagem) em uma página, você precisa adicionar uma instrução correspondente - uma tag - ao seu código-fonte. Considere a maneira mais fácil de fazer isso.
Instruções
Passo 1
Se você usa qualquer tipo de sistema de gerenciamento de conteúdo, é muito provável que inclua um editor de páginas. Primeiro, você precisa abrir a página desejada neste editor. Além disso - as opções são possíveis. Na melhor das hipóteses, o editor de página terá um "modo visual", em outras palavras - "modo WYSIWYG" (o que você vê é o que você obtém - "o que você vê é o que você obtém"). Neste modo, você não precisará lidar com o código html original! A página do editor ficará igual à do site, bastando colocar o mouse no local desejado e clicar no botão "inserir imagem" no painel do editor.
Passo 2
Como resultado, uma caixa de diálogo será aberta na qual você precisa selecionar a imagem desejada. Se você ainda não fez o upload, há também um botão para selecionar uma imagem no seu computador e fazer o upload para o servidor. Além disso, nesta caixa de diálogo você pode definir a cor e a largura do quadro ao redor da imagem, a distância e a cor do preenchimento entre o quadro e a imagem, o texto para a dica de ferramenta. Não é necessário especificar as dimensões aqui, mas por razões de acelerar o carregamento da página e para evitar distorções do design, ainda é melhor fazer isso. Quando todos os campos obrigatórios da caixa de diálogo estiverem preenchidos, clique em "OK" e salve a página editada.
etapa 3
Por não haver um padrão único para sistemas de controle, o procedimento de inserção de uma imagem no modo visual do seu sistema pode diferir um pouco, mas o princípio será o mesmo. Pelo mesmo motivo, o modo WYSIWYG pode não aparecer no sistema de gerenciamento do seu site. Depois, você ainda terá que editar o código-fonte da página em HTML (HyperText Markup Language - "linguagem de marcação de hipertexto"). Você precisará inserir uma tag no lugar certo no código que instrui o navegador a mostrar a imagem aqui. Em sua forma mais simples, deve ter a seguinte aparência: Aqui está o "endereço relativo" da imagem - neste endereço, o navegador deve entrar em contato com o servidor para obter o arquivo de imagem dele. Se o endereço for relativo, o navegador assumirá que o arquivo está na mesma pasta do servidor que a própria página (ou em uma subpasta). Mas, para não se enganar, é melhor especificar o "endereço absoluto" - por exemplo, assim: Naturalmente, para que o servidor encontre e envie a imagem para o navegador, ela deve ser enviada para o especificado localização. A maneira mais fácil de fazer isso é através do gerenciador de arquivos, que está presente em todos os sistemas de gerenciamento de conteúdo, bem como no painel de controle de sua empresa de hospedagem. Você também pode fazer isso usando o protocolo FTP (File Transfer Protocol - "protocolo de transferência de arquivos"), usando um programa especial - cliente FTP. Existem muitos deles, pagos e gratuitos - por exemplo, Cute FTP, FlashFXP, WS FTP, etc. Mas, é claro, instalar, dominar e configurar o programa vai levar tempo, então um gerenciador de arquivos para baixar tudo que você precisa um navegador é uma opção mais fácil.
Passo 4
Além do endereço na tag html da imagem, você pode especificar informações adicionais - "atributos" da tag. Por exemplo, o atributo alt="Image" contém o texto para a dica de ferramenta que aparece quando você passa o cursor do mouse sobre a imagem: Ele pode ser substituído pelo atributo - title: - O tamanho do retângulo no qual o navegador deve a exibição da imagem é definida pelos atributos de largura e altura: - O atributo borda especifica a largura da borda ao redor da imagem (em pixels): Se a imagem for transformada em um link, o navegador desenhará uma borda azul em torno dela. Para se livrar dele, defina o valor da borda para zero: - Os outros dois atributos contêm informações sobre a quantidade de recuo da imagem de elementos adjacentes (de linhas de texto, outras imagens, etc.) - hspace define o tamanho do recuo horizontalmente (esquerda e direita), vspace - verticalmente (inferior e superior):
