Como aprender html (com imagens)

Nesta aula abordaremos os temas relacionados à
motivação para se aprender processamento digital de
imagens e serão fornecidas algumas informações
preliminares referentes ao curso.

Importante: O resumo abaixo deve ser complementado,
pelo aluno, com a leitura dos textos sugeridos na bibliografia do curso.

   

Diferenças
entre conceitos

:  síntese de imagens, processamento
digital de imagens e análise de imagens

  • Síntese de imagens:
    tem por objetivo a geração de imagens a partir de
    modelos matemáticos  com uso extensivo de técnicas
    de computação gráfica. Utilizado para
    criar imagens de protótipos industriais, imagens ambientais com
    cores e sombras, simular ambientes, etc. Neste processo a entrada
    é, em geral, um ou mais modelos geométricos e a
    saída é uma imagem gerada a partir desse modelo. A figura
    abaixo mostra exemplos de imagens
    sintetizadas.
Como Aprender HTML (com Imagens) Como Aprender HTML (com Imagens)
Como Aprender HTML (com Imagens) Como Aprender HTML (com Imagens)

Figura: Sintetização de imagens a partir de modelos
matemáticos

    Veja também filmes sintetizados da pixar em: http://www.pixar.com/shorts//

  • Processamento digital de imagem:
    a partir de uma imagem sintetizada ou de imagens reais, captadas por
    sensores locais ou remotos,
    tem por objetivo aplicar transformações nas imagens para
    melhor observar informações da cena. Utilizado
    principalmente sobre imagens fotografadas por microscópios,
    câmeras digitais, sensores remotos, etc… Neste processo a
    entrada é sempre uma imagem e a saída uma nova imagem
    transformada. As figuras abaixo são exemplos de resultados
    (imagens da direita) fornecidos por processamentos sobre imagens
    digitais (imagens da esquerda).
Como Aprender HTML (com Imagens) Como Aprender HTML (com Imagens)

Figura: Processamento para realce de uma imagem digital

Como Aprender HTML (com Imagens) Como Aprender HTML (com Imagens)

Figura: Processamento para detecção de bordas de uma
imagem digital

Como Aprender HTML (com Imagens) Como Aprender HTML (com Imagens)

Figura: Processamento para remoção de ruidos e realce de
uma
imagem digital

  • Análise de imagens ou
    reconhecimento de padrões- se utiliza de imagens, reais
    em geral, e tem por objetivo
    uma análise global ou local da imagem para se separar ou
    identificar elementos ou padrões da mesma. Utilizado em sistemas
    de reconhecimento de padrões para uso principalmente em
    robótica. A entrada é uma imagem e a saída
    é um modelo matemático ou uma tabela descrevendo
    propriedades da imagem ou de objetos da imagem. Por exemplo, uma
    análise pode ter como resultado o a área de todos os
    objetos presentes em uma imagem, como mostrado na figura abaixo.
  • Figura: Análise de uma imagem
    digital para obter-se as áreas de classes de geologia
  • processamento digital
    de imagens
  • PDI.

    O presente curso tratará apenas de temas
relacionados ao daqui por diante tratado como 
    Entre as principais áreas de
aplicação das técnicas de processamento digital de
imagens pode-se citar:  Medicina, Meteorologia,
Agricultura,
Geologia, Cartografia:

  •     Exemplo de Imagens Médicas:  

Figura: Varises no interior do
esôfago em diferentes tamanhos

  • Exemplo de Imagens de Sensoriamento Remoto aplicadas a
    Ciências Ambientais (Meteorologia, Agricultura,
    Geologia, Cartografia, etc…)

Figura: Imagens de Sensoriamento Remoto com aplicações em
Meteorologia, Agricultura e Cartografia

    Imagens de Sensoriamento Remoto do satélite
chino-brasileiro CBERS podem ser baixadas, sem custo, de www.dgi.inpe.br  .
    Veja, ainda, exemplo de aplicação em
gerenciamento de recursos urbanos utilizando imagens de satélite
(mais outras informacoes geograficas) no CD cidade viva.,
disponibilizado pela prefeitura de São José dos Campos,
cujo conteúdo está descrito abaixo.

Conteúdo do Banco de Dados:

  • Imagem de satélite abrangendo todo o município;
  • Planta da cidade contendo informações de vias,
    bairros e logradouros;
  • Limite do município;
  • Perímetros urbano, expansão urbana e rural;
  • Drenagem municipal (córregos e rios);
  • Planta de zoneamento;
  • Áreas de Proteção Ambiental;
  • Carta Geotécnica do município;
  • Uso da Terra ( área urbanizada, água,
    reflorestamento ,mata/capoeira).

 

Sistemas de Visualização e
Processamento de Imagens

    Existem muitos sistemas de
visualização e processamento de imagem, mas utilizaremos
no curso o
SPRING e o IrfanView que são  distribuidos como freeware.

    Figura: Janela
principal do software IrfanView

    Figura: Janela
principal do software SPRING

    Mais informações gerais em: Visão Geral de PDI no SPRING
.     Além dos sistemas acima, utilizaremos ainda o
Devc-C++, cuja janela principal
é mostrada abaixo, para compilar e gerar
alguns programas em C para transformação de Imagens.
Outros programas também podem ser usados
  

Figura Tela principal do compilador C-C++ Devcpp

    Veja uma Introdução
ao uso do DevC++  .  Como primeiro exemplo podemos editar
e executar o famoso programa “Hellow World”  no DevC++.

  1. Explique resumidamente a diferença entre os conceitos de
    sintese, processamento e análise de imagens.
  2. Explique qual a diferença entre um arquivo binário
    e um arquivo ASCII (texto).
  3. Faça um um programa em Java, ou em C ou C++, para criar
    uma
    cópia perfeita de um arquivo binário. O programa deve ler
    um arquivo binário de entrada, criar um arquivo de saída
    (com nome diferente do de entrada) e escrever, num arquivo ASCII, um
    relatório sobre o arquivo lido. Nesse relatório deve
    estar escrito o nome do arquivo de entrada e o tamanho, em bytes desse
    arquivo. Dicas: 1. Se o programa for em C, ou C++, utilize os comandos
    fopen, fclose, fread e fwrite. 2. Se o programa for em Java utilize os
    comandos FileInputStream e FileOutputStream, quando for manipular
    arquivos binários e os comandos FileReader e FileWriter quando
    for manipular arquivos textos.
  1. Pesquise sobre 3 novas áreas de aplicação,
    além das citadas no texto acima, de processamento de imagens.
  2. Pesquise sobre outros sistemas de visualização
    e  processamento de imagens digitais. Compare suas capacidades de
    manipulação das imagens.

HTML img: inserindo imagens em sua página

Neste tutorial, vamos aprender como utilizar o HTML img para inserir imagens e gifs em nossas páginas HTML. Portanto, você encontrará aqui os seguintes tópicos:

A tag do HTML

Logo no inicio da web, as páginas continham apenas conteúdos de textos e links. Isso tornava os conteúdos um tanto quanto limitados e monótonos. Não demorou muito para serem criados recursos de inclusão de imagens nas páginas.

No HTML, a tag responsável pela inserção de imagens é a tag . Porém, o HTML tecnicamente não faz a inclusão da imagem em si, o que ele faz é linkar a imagem para a página, de forma que ela seja aberta como se estivesse inserida na mesma, parecido com o processo da tag link .

Dessa forma, podemos adicionar imagens tanto localmente quanto de forma global, ou seja, através de uma URL externa ao domínio principal.

Além disso, também é importante reforçar que a tag não possui uma tag de fechamento e traz consigo o padrão de display inline-block do CSS além de ajuste de largura e altura no padrão automático.

Como Aprender HTML (com Imagens)

Inserindo imagem localmente através do HTML img

Para inserir uma imagem no HTML basta utilizar a tag  com o atributo src. Ou seja: o atributo src, ou source, vai conter a url da imagem que será inserida.

Diante disso, a sintaxe final será:

<img src=”url”>

<img src=”url”>

Para inserir uma imagem local, podemos apenas incluir o nome da imagem com sua extensão, como no exemplo abaixo:

Se ela estiver contida dentro de uma pasta local, nós devemos referenciar a pasta também. Por exemplo, se minha página principal está contida na pasta public_html e dentro dela temos uma pasta chamada imagens, onde está a nossa imagem, utilizaremos a seguinte url:

Agora digamos que temos uma pasta public_html onde dentro dela temos as pastas imagens e pages, onde a nossa página esta dentro da pasta pages e a imagem está dentro da pasta imagens. Dessa forma, utilizamos ../ para poder voltar uma pasta e assim entrar na pasta que queremos.

Como Aprender HTML (com Imagens)

Por outro lado, podemos ainda incluir a url completa da nossa imagem. Digamos que nosso domínio é https://meudominio.com e utilizando o exemplo anterior. Dessa forma, utilizaremos o seguinte código:

Com isso, já estamos prontos para incluir qualquer imagem localmente a nossa página, utilizando o recurso HTML img.

Inserindo imagem global através do HTML img

Agora que já aprendemos a sintaxe básica do HTML img e como inserir imagens locais, vamos estudar como inserir uma imagem global, ou seja, que se encontra fora do nosso servidor, fora do nosso domínio. Para isso, basta adicionarmos a URL absoluta da imagem no atributo src.

Digamos que você queira uma imagem que se encontra na URL absoluta https://www.outrodominio.com/galeria_de_fotos/foto_01.png . Dessa forma, basta utilizar o seguinte código:

Porém, encontramos um problema ao utilizar imagens externas: ficamos dependendo que o outro domínio esteja sempre funcionando, pois se em algum momento ele ficar fora do ar, a imagem não será carregada.

Para evitarmos problemas com a sua HTML img, recomendamos que evite o uso de imagens externas. Além disso, outro grande problema pode ser a utilização de imagens que contêm direitos autorais.

Portanto, esteja sempre atento a essas questões e, quando necessário, lembre-se de referenciá-las devidamente.

Título e texto alternativo

Além do atributo src, a tag possui outros atributos que complementam a sua estrutura: podemos, por exemplo, incluir um atributo de título para a imagem.

Esse título será mostrado apenas quando o usuário passar o mouse sobre a imagem.  Portanto, para incluir o título a imagem, basta chamar pelo atributo title=”…”.

Vejamos então o exemplo abaixo:

<img src=”/logo.png” title=”Logo da HomeHost”>

<img src=”/logo.png” title=”Logo da HomeHost”>

Com isso, teremos o seguinte resultado:

Como Aprender HTML (com Imagens)

Da mesma forma, também podemos incluir a nossa imagem, um texto alternativo. Esse texto será mostrado no local da imagem caso a URL da imagem esteja errada, a imagem não esteja em um formato suportado ou até que a imagem seja baixada.

Leia também:  Como brincar com seu cachorro: 13 passos (com imagens)

Para incluir o texto alternativo basta chamar pelo atributo alt=”…”. Também é uma prática muito bem vista pelos mecanismos de buscas, portanto muito utilizado para otimização de SEO.

Vejamos abaixo um exemplo de como utilizar o texto alternativo na HTML img:

Largura e altura do HTML img

A tag traz consigo o padrão de altura e largura automática, de forma que ela irá incluir o tamanho original da imagem, sem distorções, ou irá ajustar dentro do container a qual ela for inserido.

Porém, podemos manipular esse tamanho diretamente através do CSS ou ainda através do atributos height (altura) e width (largura). Se utilizarmos apenas um deles, o outro irá se ajustar automaticamente, proporcionalmente, sem distorcer a imagem.

Utilizando os dois, ele irá conter exatamente a altura e a largura definidas, portanto poderá distorcer a imagem.

Além disso, se você utilizar imagens com baixa resolução em tamanhos acima da original, muito provavelmente a mesma também ficará distorcida, por isso é muito importante usar imagens com uma resolução adequada para suas páginas. Vamos utilizar no exemplo abaixo o logo da Home Host:

Como Aprender HTML (com Imagens)

Inicialmente, iremos definir apenas uma largura de 100px para a logo.

  • Dessa forma, o resultado da nossa imagem será:
  • Observe que mesmo com ajuste apenas da largura, a altura se ajustou automaticamente, sem distorcer a imagem.
  • Vejamos agora com a aplicação tanto de uma largura quanto de uma altura, ambas de 200px, o que acontecerá:

Aprender HTML: acelere o seu processo de aprendizagem de HTML

HTML, ou Hypertext Markup Language, é uma das formas mais comuns de código no mundo.

Ele é usado em praticamente todas as páginas da Web existentes e permite que os web designers apresentem textos, imagens, vídeos e outros conteúdos de maneira clara e concisa.

Naturalmente, muitos iniciantes escolhem essa linguagem para aprender primeiro, mas encontram dificuldade para entender qual é a melhor maneira de aprender HTML.

Se você quer se tornar um desenvolvedor web de front-end, você tem que aprender HTML.

Para sua sorte, existem centenas de sites que ensinam noções básicas de HTML que permitirão que você crie uma página HTML simples.

No entanto, esses sites nem sempre ensinam a você a maneira mais eficiente de aprender HTML. Eles nem sempre ensinam a versão mais atualizada da linguagem e nem sempre ensinam tudo o que você precisa saber.

O objetivo deste tutorial HTML simples é, portanto, fornecer uma visão sobre HTML, o que é html, como aprendê-lo e como usá-lo. Veremos por que você deve levar o HTML a sério e veremos a melhor maneira de aprender HTML e alguns dos outros recursos que você pode usar.

Para começar, vamos ver o que é HTML e por que você deve aprender HTML.

O que é HTML e por que o devo aprender?

Como observamos acima, o HTML é incrivelmente difundido. Ele é usado principalmente pelos desenvolvedores Web de front-end para estilizar e apresentar conteúdos na Web de maneira legível.

Usos para Tags HTML

Um dos principais recursos dessa linguagem é o uso de tags HTML para estilizar texto e outros elementos visuais. Alguns exemplos dessas tags HTML incluem:

  • , que são tags de parágrafo. Eles dizem ao seu navegador que tudo entre as tags pertence a um parágrafo.
  • , que informa ao seu navegador qual é o título da página.
  • , que permite inserir um vídeo diretamente na sua página.

Como você pode estar percebendo, as tags HTML têm alguns recursos que são claros e universais:

  • A maioria das tags HTML começa com uma tag de abertura, e termina com uma tag de fechamento, . No entanto, apenas alguns possuem uma tag de abertura.
  • Na maioria dos casos, o conteúdo que queremos que seja definido pelas tags fica inserido entre as tags de abertura e de fechamento. Às vezes, elas são incluídas na tag de abertura.

HTML e CSS

Embora possa ser usado sozinho, é muito raro alguém usar HTML por si só. O uso mais comum é HTML e CSS juntos. O HTML é usado para definir o layout geral e a aparência de uma página Web, enquanto uma outra linguagem, CSS, é usado para estilizar o conteúdo.

A principal razão para isso é porque o HTML é limitado no que ele pode fazer. Usando HTML você tem estilo limitado de texto e propriedades de imagem.

Você pode definir o tipo de texto que deseja incluir, criar tabelas e listas e incorporar itens como imagens e vídeos.

No entanto, é difícil alterar coisas como a fonte, a cor do texto e o posicionamento exato dos elementos em uma página da web.

Por isso, é recomendável aprender HTML e CSS juntos.

Por que devo aprender HTML?

Dissemos que o HTML é uma linguagem essencial para qualquer pessoa que pretenda se tornar um desenvolvedor web de front-end. Isso ocorre porque ele é usado em praticamente todas as páginas Web existentes, simplificando a criação de conteúdo atraente de forma que os navegadores Web possam entender e que seja simples de aprender e fácil de usar.

Algumas das outras razões pelas quais você deve considerar seriamente aprender HTML incluem:

  • É simples. Se você tem zero conhecimento de programação, mas gostaria de se tornar um programador, o HTML é um ótimo lugar para começar. É fácil de aprender e usar, fornecerá uma boa introdução à codificação e ajudará você a se concentrar nos conceitos básicos da programação.
  • Pode ajudá-lo a encontrar um emprego. Programação e codificação, em geral, são habilidades sob demanda que empresas em todo o mundo estão procurando. Basta ter algum conhecimento básico sobre HTML para colocar em seu currículo para se tornar mais empregável e encontrar um emprego.
  • Isso pode resultar em uma promoção ou aumento de salário. Como dissemos antes, as habilidades de codificação estão em alta demanda no mundo moderno. Mesmo os programadores mais básicos estão cobrando até US $ 100 por hora, o que significa que ter habilidades de programação pode ajudá-lo a obter sua próxima promoção ou aumento de salário.

Como você pode ver, há vários motivos pelos quais o HTML é uma excelente linguagem para aprender. Mantendo esses motivos em mente, vamos passar para as pessoas que devem pensar em aprender HTML.

Quem deve aprender HTML?

Na seção anterior, dissemos que o HTML pode fornecer uma introdução básica à codificação, que poderia ajudá-lo a encontrar trabalho e que poderia fornecer a base para um aumento salarial. Em linha com isso, aqui estão três grupos de pessoas que devem pensar seriamente sobre aprender HTML:

Aspirantes a desenvolvedores de front-end 

HTML, CSS e JavaScript formam a base do desenvolvimento web front-end. Isso significa que se você quer se tornar um desenvolvedor front-end, precisará aprender HTML. O fato de ser simples e fácil de aprender significa que muitas vezes é a primeira linguagem que os aspirantes a desenvolvedores se interessam.

Pessoas que trabalham em gerenciamento de conteúdo ou outros campos relacionados à Internet

Qualquer pessoa que trabalhe com gerenciamento de conteúdo, escrita ou qualquer outra coisa relacionada a conteúdo digital poderá se beneficiar do conhecimento prático de HTML.

Por exemplo, digamos que você precise escrever artigos para o site de um cliente, mas precisa publicá-los diretamente no site.

Claro, você provavelmente poderia gerenciar sem conhecer HTML – sistemas de gerenciamento de conteúdo como o WordPress e Wix estão aí pra isso – mas será muito mais fácil se você entender como formatar uma página HTML simples.

Proprietários de sites / blog

Se você possui e gerencia seu site ou blog, pode achar muito benéfico aprender os conceitos básicos de HTML.

Ao fazer isso, você tem mais flexibilidade quando se trata de formatar seu site e seu conteúdo, economizando seu dinheiro.

Afinal, os desenvolvedores web são caros, e pode custar uma pequena fortuna empregar um desenvolvedor por algumas horas. Seria muito melhor se você fosse capaz de fazer pequenas alterações no HTML sozinho.

Qual é a melhor maneira de aprender HTML?

Agora, antes de entrarmos em mais detalhes, temos que notar uma coisa muito importante:

    Não há um único ‘melhor caminho’ para aprender HTML .

Algumas pessoas serão mais adequadas a diferentes métodos de ensino, e a melhor maneira de aprender HTML para uma pessoa não será necessariamente a melhor maneira para outra. Tenha isso em mente ao ler os parágrafos a seguir.

Para a maioria das pessoas, acreditamos que a melhor maneira de começar a aprender HTML é através de um curso html interativo na internet. Como uma linguagem que foi desenvolvida para uso na internet, faz sentido usar a internet para aprender o básico de HTML . Algumas das características dos cursos HTML online que acreditamos que fazem deles a melhor maneira de aprender incluem:

  • Eles são divertidos e envolventes. Isso significa que eles facilitam a motivação, o que reduz o risco de você desistir antes de terminar o curso.
  • Eles cobrem o básico primeiro, o que significa que você não está desperdiçando seu tempo aprendendo informações irrelevantes no começo.
  • Muitos cursos HTML online permitem que você escreva códigos diretamente no seu navegador enquanto aprende, ensinando bons hábitos desde o início.
Leia também:  Como aprender músicas de ouvido no piano: 9 passos

Se você acha que gostaria de aprender HTML e que um curso HTML online seria um bom lugar para começar, então confira os cursos na plataforma BitDegree.

Como Aprender HTML (com Imagens)

Se você tiver pouco tempo e deseja obter uma breve visão geral do HTML, recomendo começar com o Curso HTML para iniciantes . Este curso ensinará os fundamentos da codificação HTML, juntamente com algumas das sintaxes mais importantes, em menos de uma hora de tutoriais em vídeo.

Alternativamente, você poderia começar com um curso mais avançado, como o Tutorial de HTML5 . Este curso contém pouco menos de 5 horas de aulas em vídeo e ensinará princípios básicos de HTML, como implementar esses princípios em um site e como o HTML é usado em aplicativos.

A última opção, o Curso interativo de HTML para iniciantes, é perfeita para pessoas que estão a caminho de se tornarem desenvolvedores de front-end. Ele ensina HTML e CSS lado a lado, mostrará como usá-los juntos e também apresentará os fundamentos do design Web responsivo.

Quais outros recursos devo usar?

Ao pesquisar na internet a resposta sobre como aprender HTML, você descobrirá muitos recursos diferentes. Alguns deles são gratuitos, alguns deles são pagos (mais sobre isso na próxima seção), mas o único tema comum é que todos eles afirmam ser os melhores.

No entanto, muitos desses recursos estão desatualizados. Isso não significa que não haja bons recursos por aí, mas você deve ser cuidadoso. Considere os itens a seguir para ajudá-lo a aprender o básico do HTML junto com o seu curso principal:

Vídeos do YouTube

Assistir a vídeos que abordam conceitos difíceis ou confusos pode ser uma ótima maneira de entender coisas que você está enfrentando. Se você está tendo problemas com um conceito específico – ou simplesmente gostaria de uma explicação mais profunda do que o curso oferece – pesquise as respostas no YouTube.

Guias de Referência de uma linguagem

Os guias de referência são um ótimo recurso que você pode usar para descobrir novas sintaxes, lembrar-se de alguma sintaxe ou aprender praticamente qualquer outra coisa sobre uma linguagem de programação. Um dos melhores guias de referência HTML na Internet é o Guia de Referência HTML do Mozilla Developers.

Como Aprender HTML (com Imagens)

Fóruns online

Se você não conseguir encontrar as respostas para suas perguntas em nenhum outro lugar, poderá sempre perguntar a outras pessoas que tenham um melhor entendimento de como aprender HTML do que você.

Fóruns online e salas de bate-papo são um ótimo recurso para pessoas que estão tentando aprender uma linguagem de programação como o HTML.

Use-os para fazer perguntas, participar de discussões e descobrir as soluções até para seus problemas mais difíceis.

Recursos Gratuitos vs Recursos Pagos

Agora que abordamos os tipos de recursos disponíveis para os alunos de HTML, é hora de dar uma olhada rápida em um debate que cresceu em magnitude nos últimos anos – recursos grátis versus recursos pagos.

É muito simples encontrar cursos de programação gratuitos e outros recursos na internet, mas eles valem a pena? Ou você deveria estar pagando por seus cursos para se certificar de que está aprendendo tudo o que pode?

Abaixo, vamos dar uma olhada rápida nos prós e contras de recursos gratuitos e recursos pagos:

Recursos pagos

Historicamente, as pessoas tiveram que pagar para acessar materiais de aprendizagem de alta qualidade. Há uma variedade de tais recursos na internet, que vão desde tutoriais pagos a mentores pagos.

Prós de usar Recursos Pagos:

  • Você aprenderá com profissionais da indústria que sabem sobre as coisas que estão ensinando. Isso pode ajudar a reduzir o risco de aprender informações incorretas ou maus hábitos.
  • Quando você paga por algo, é mais provável que você o use. Isso ajudará você a se manter motivado e pode resultar em melhores resultados no processo de aprendizado.
  • Você provavelmente descobrirá que os cursos pagos são muito bem organizados e contêm todas as informações relevantes.

Contras:

  • Cursos pagos são, bem … eles são pagos. Eles custam dinheiro. Nem todo mundo pode pagar por eles.
  • Algumas pessoas querem se aprofundar na codificação sem se comprometerem. Pagar por um curso pode parecer um compromisso para alguns.
  • Cursos pagos nem sempre fornecem as respostas para perguntas simples de forma rápida e eficiente. Se você quer aprender como fazer uma coisa específica, procure por recursos livres.

Recursos Gratuitos

A ascensão de fontes alternativas de renda como publicidade na internet e cursos ‘freemium’ fizeram com que um grande número de cursos gratuitos e outros recursos gratuitos se tornassem disponíveis online nos últimos anos. Este artigo é um ótimo exemplo de um recurso gratuito de alta qualidade!

Prós:

  • Recursos gratuitos são gratuitos. Eles não exigem nenhum compromisso financeiro, o que é ótimo para pessoas com pouco dinheiro.
  • Se você não gosta de um recurso gratuito, basta escolher outro sem perder nada do ponto de vista financeiro.
  • Recursos gratuitos são acessíveis a qualquer pessoa com uma conexão à internet e um pouco de tempo. Isso significa que as pessoas podem explorar as noções básicas de como escrever uma página HTML simples sem se comprometer com um curso.

Contras:

  • Recursos gratuitos podem ser de qualidade inferior aos recursos pagos. Isso ocorre porque às vezes são criados por pessoas que são entusiastas mas não são exatamente profissionais. Então esses recursos podem conter informações incorretas e podem omitir detalhes importantes.
  • Há tantos recursos gratuitos por aí que pode ser super difícil encontrar um que seja relevante para si.

Click Art Tecnologia

Talvez você não tenha notado ainda o quanto o HTML é poderoso, a partir do estudo dos atributos HTML essa afirmação vai ficar cada vez mais clara para você.

Vamos começar respondendo para que serve os atributos.

Os atributos fornecem informações a mais sobre os elementos HTML, ou seja, além da função principal do elemento, os atributos dizem, por exemplo, o tamanho, no caso de imagens e contêineres, o destino de um link, a cor de um texto, a quantidade de caracteres que podem ser escrito em uma caixa de texto num formulário, enfim, os atributos deixam os elementos mais dinâmicos e com características além de simplesmente organizar o conteúdo.

Veja as principais características dos atributos.

  • Todo elemento HTML pode ter atributos;
  • Atributos fornecem informações adicionais aos elementos;
  • Atributos são sempre escritos na tag de início;
  • A grande maioria dos atributos vêm em pares (nome/valor), nome do atributo e valor do atributo.

Talvez você gostaria de conhecer agora os principais atributos e quais tags eles acompanham.

ATRIBUTO HREF

Como vimos no capítulo anterior, a tag é o elemento que determina um link em HTML, mas para onde esse link direciona o usuário quando clicado? É aí que entra o atributo href. O endereço do link é especificado em href. Vamos ao exemplo:

Link Link

Esse é um dos atributos da tag , mais para frente nós vamos falar sobre essa tag e todas as suas façanhas bem detalhadamente.

ATRIBUTOS DA TAG

Nós também estudamos a tag , que determina a visualizações de uma imagem no HTML. O caminho/nome da imagem que irá ser mostrada é definida no atributo src.

Na tag nós ainda podemos atribuir a largura e altura da imagem, quem faz isso são respectivamente os atributos width e height (apesar de uma prática melhor é usa CSS para controlar largura e altura de imagens).

Atenção: Os valores de width e height são dados em pixels (px). Logo width=”100″ é igual a 100px de largura.

O atributo alt também é muito útil para esse elemento . Ele específica um texto alternativo caso a imagem não possa ser exibida. Ele também pode ser lido pelos leitores de tela. Imagine que alguém esteja escutando o site, quando chegar nas imagens, o leitor vai procurar esse atributo para ler.

Veja o que acontece se tentarmos inserir uma imagem que não existe ou que esteja com problemas de visualização e usarmos o alt nesse elemento:

Nós teremos um capítulo inteiro dedicado ao tratamento de imagens pelo HTML.

ATRIBUTO STYLE

Esse atributo é muito útil para especificar um estilo para o elemento, ele pode ser usado em todos os elementos e tudo que você escreve em CSS pode ser escrito dentro desse atributo. É o que chamamos de CSS inline ou style inline.

Esse atributo tem prioridade no estilo, ou seja, se você escreve um arquivo CSS para estilizar um link, mas no link você insere o atributo style e digita valores diferentes da folha de estilo CSS inserida no arquivo HTML, o navegador vai priorizar o CSS inline, ou seja, o que está diretamente escrito na tag.

Aqui esta um parágrafo.

No HTML podemos declarar a linguagem do documento, isso é muito importante para leitores de tela, buscadores e outros aplicativos de acessibilidade. Essa linguagem é declarada com o atributo lang.

DOCTYPE html> …

As duas primeiras letras (pt) indicam o idioma, se houver um dialeto, variações da linguagem, usamos as outras duas (BR). Como o português é falado em vários outros países, nós especificamos que a linguagem usada é o português do Brasil, se escrevêssemos pt-PT então seria português de Portugal.

Leia também:  Como ajustar, inclinar e girar a tela do windows

ATRIBUTO TITLE

O title pode ser usado em diversos elementos HTML. Ele funciona como uma dica para o elemento quando um usuário passar o mouse por cima dele.

Aqui está o parágrafo Home

Você provavelmente já entendeu a função dos atributos. Eu poderia dizer o quão importante é o uso correto dos atributos, mas sei que você já deve ter percebido isso. Então vamos partir para as boas práticas recomendadas pela W3C para o uso dos atributos.

BOAS PRÁTICAS – USO DE ASPAS

O HTML não exige o uso de aspas nos atributos, mas é uma recomendação de boas práticas da W3C que nós façamos uso delas.

Jeito ruim Jeito bom

As vezes o uso das aspas é necessário. O exemplo abaixo não exibirá o atributo title corretamente porque tem um espaço entre as palavras, se fosse uma única palavra não haveria problema, mas quando são duas ou mais, as aspas são obrigatórias para o funcionamento do atributo.

Para deixar claro, sempre use aspas, mesmo que o atributo tenha um valor sem espaços em branco porque assim você evita possíveis erros.

Eu sempre uso aspas e a maioria (99,9%) dos programadores também usam.

Você pode usar aspas simples ou aspas duplas, tanto faz. Se pegarmos os códigos escritos pela W3C vamos encontrar sempre aspas duplas, mas isso não quer dizer que aspas simples terá um efeito diferente.

As vezes pode ser que seja o caso de usar as duas juntas, quando o próprio valor do atributo contém aspas.

  • ou

Quem sabe você gostaria de ter uma lista completa dos atributos para cada elemento da HTML: Em breve esterá disponível no site uma Referência de atributos HTML e você poderá consultar a sintaxe e explicação de cada um deles.

Eu poderia dizer para você estudar bem os atributos HTML e que eles são muito importantes, mas eu prefiro deixar você descobrir isso sozinho. Como disse Lao Tsé

Limitações dos e-mails em HTML

A maioria dos clientes de e-mail não aceita todos os tipos de conteúdo HTML encontrados na web. Enquanto os navegadores podem exibir scripts, animações e menus de navegação complexos, as caixas de entrada típicas não foram feitas para processar esse tipo de conteúdo.

Neste artigo, você vai aprender sobre os tipos de conteúdo que devem ser evitados no design dos seus e-mails e o que deve ser usado no lugar deles.

A tecnologia de visualização de um cliente de e-mail típico não é tão atual quanto a de um navegador. Os navegadores exibem conteúdos interativos e dinâmicos, e são atualizados com frequência. Mas elementos interativos como Flash, javaScript ou formulários em HTML não funcionam na maioria das caixas de entrada de e-mail.

Saiba mais na tabela a seguir.

É seguro usarUse com cautelaNão use
layouts estáticos baseados em tabelatabelas em HTML e tabelas aninhadaslargura de modelo de 600 px a 800 pxCSSsimples em linhafontes seguras para a web imagens de plano de fundofontes da web personalizadaslayouts largosmapas de imagemCSS incorporado JavaScriptFlasháudio incorporadovídeo incorporadoformuláriosdisposição em camadas

Você pode incluir nos seus modelos do Mailchimp determinados elementos, como imagens de plano de fundo e fontes personalizadas. Nem todos os clientes de e-mail aceitam esses elementos, por isso recomendamos que você visualize e teste totalmente as suas campanhas antes de enviá-las ao público todo.

Alguns clientes de e-mail não aceitam GIFs animados, mas se quiser incluir um GIF na sua campanha, é possível fazer isso diretamente a partir do Giphy.

Se for carregar um GIF diretamente no Mailchimp, geralmente é melhor editar o conteúdo animado antes. Nosso Editor de fotos altera os arquivos de imagem para editá-los, e esse processo não foi projetado para conteúdos animados, o que pode corromper os GIFs.

Confira o guia da Litmus para ver mais informações úteis sobre GIFs animados com quais clientes de e-mail eles são compatíveis.

O Mailchimp aceita imagens de plano de fundo nas seções de pré-cabeçalho, cabeçalho, corpo, coluna e rodapé dos modelos de arrastar e soltar.

Se você usar um modelo HTML personalizado, pode adicionar uma imagem de plano de fundo com o nosso construtor de modelos.

As imagens de plano de fundo não são reproduzidas em todos os clientes de e-mail e podem ser exibidas de forma diferente nos clientes de dispositivos móveis, por isso é importante visualizar e testar totalmente suas campanhas antes de enviá-las ao público.

  • Adicionar uma imagem de fundo a uma campanha
  • Adicionar uma imagem de fundo a um modelo HTML personalizado
  • Visualizar e testar uma campanha de e-mail

A barra de ferramentas do Editor do Mailchimp permite usar fontes padrão e algumas fontes da web personalizadas. Se um cliente de e-mail não aceitar a fonte da web usada na sua campanha, ela será substituída por uma fonte padrão.

Confira a tabela a seguir para saber quais clientes de e-mail aceitam ou não as fontes da web.

Aceita fontes da webNão aceita fontes da web
Apple Mail Lotus Notes 7
Lotus Notes 8 Lotus Notes 8.5
Outlook 2011 para Mac Gmail
iOS Mail Yahoo!
Outlook 2016 Outlook.com
Android App Outlook 2003
Android Mail 2.3 Outlook 2007
Android Mail 4.2 Outlook 2010
Android Mail 4.4 Outlook 2013
Thunderbird
IBM Notes 9
AOL
Blackberry
Alto

Seus assinantes muitas vezes abrem as campanhas em dispositivos móveis ou no painel de visualização de clientes de e-mail no computador. Os painéis de visualização de e-mail são estreitos, por isso eles podem cortar sua mensagem se ela tiver largura maior do que 600 a 800 pixels.

Os elementos abaixo são bloqueados por quase todos os principais clientes de e-mail. A compatibilidade é inexistente ou extremamente limitada.

JavaScript é uma linguagem de programação que torna o conteúdo da internet interativo. Ela é comum em sites, mas a grande maioria dos clientes de e-mail bloqueia os scripts, pois eles podem ocultar conteúdo mal-intencionado. Evite o JavaScript de modo geral.

Use gifs para deixar o seu conteúdo mais interativo.

Um (quadro embutido) é um elemento de HTML que incorpora conteúdo de um site em outro site. Os quadros embutidos costumam ser usados para inserir anúncios, vídeo, áudio ou formulários em outros sites. Os Iframes muitas vezes contêm scripts, por isso são bloqueados pela maioria dos clientes de e-mail.

  1. No lugar deles, crie um link para o conteúdo que você quer exibir na campanha.
  2. O Flash exibe animações e gráficos em sites, mas é bloqueado pela maioria dos clientes de e-mail.
  3. No lugar dele, use gifs para deixar o conteúdo mais interativo.

Campos de texto, entradas de texto, botões de opção e caixas de seleção são elementos de formulário em HTML simples, mas o botão de envio geralmente usa JavaScript. Alguns clientes de e-mail exibem formulários, mas infelizmente os assinantes não conseguem enviá-los. Evite formulários em HTML e considere usar alternativas.

Por exemplo, experimente uma enquete simples ou uma integração de pesquisa Mailchimp para reunir as respostas dos assinantes, ou insira o link para um formulário online.

Mídias de reprodução automática ou por clique não são executadas na caixa de entrada, a menos que o cliente de e-mail do seu assinante aceite as etiquetas de HTML5 e . Apenas um entre os principais clientes de e-mail, o Apple Mail, aceita essas etiquetas, por isso é melhor evitar mídias incorporadas e pensar em uma alternativa.

Uma opção é compartilhar o link de um reprodutor de vídeo usando as etiquetas de mesclagem do Mailchimp ou os blocos de conteúdo de vídeo. Para enviar arquivos de áudio, compartilhe o link de um arquivo de áudio.

Nota

Se você estiver familiarizado com programação ou tiver acesso a um desenvolvedor, é possível criar modelos com código personalizado contendo elementos de HTML com compatibilidade limitada com clientes de e-mail, mas, de forma geral, não recomendamos isso. Tenha em mente que os agentes de suporte do Mailchimp não poderão ajudá-lo a resolver problemas do código personalizado.

Se você usar um elemento não compatível, terá que segmentar o público por cliente de e-mail e criar a campanha para um cliente específico. Por exemplo, você pode usar uma imagem de fundo para os assinantes do AOL Mail, já que o serviço aceita CSS de imagem de fundo.

Consulte a página de suporte a CSS por cliente de e-mail e o quadro de recursos dos clientes de e-mail na Wikipediapara saber se o cliente de e-mail do seu assinante aceita o código personalizado.

  • Se você é iniciante em HTML ou já programou muitos e-mails antes, estes recursos podem ajudá-lo a criar modelos que ficam ótimos em diversos clientes de e-mail.
  • Oferece recursos de design, métodos de desenvolvimento, amostras de código e planos gráficos de e-mails que podem ser baixados para ajudar você a criar e compor seus e-mails.
  • Oferece dicas de estilo, design e layout de campanhas em forma de artigo.

Seja o primeiro a comentar

Faça um comentário

Seu e-mail não será publicado.


*