Programação para Web HTML - Parte 2

Transcrição

1 Programação para Web HTML - Parte 2 Professor: Harlley Lima [email protected] Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 2 de março 2016

2 Programação para Web Revisão HTML 2/38 Aula de hoje HTML harlley/web/aula04

3 Programação para Web Revisão HTML 3/38 HTML Aula passada Estrutura básica de HTML Formatação de texto Lista

4 Programação para Web Revisão HTML 4/38 HTML Aula de hoje Links e âncoras Imagem Tabela

5 Programação para Web Revisão HTML 5/38 Links Para criarmos um link, devemos utilizar o elemento a. Esse elemento possui um atributo chamado href.

6 Links Programação para Web Revisão HTML 6/38

7 Programação para Web Revisão HTML 7/38 Links Além do atributo href, podemos utilizar o atributo target para informar onde o destino de um link deve ser aberto: blank: Abre o destino do link em uma nova janela ou aba. self: Abre o destino do link na mesma janela ou no mesmo frame que exibe o documento que contém o link.

8 Links Programação para Web Revisão HTML 8/38

9 Programação para Web Revisão HTML 9/38 Âncora Criar um link para uma determinada seção de um documento HTML Primeiro passo: identificar a seção que será o destino do link. Atributo name: identifica a seção. Segundo passo: criar links utilizando identificadores das seções, utilizando #.

10 Âncora Programação para Web Revisão HTML 10/38

11 Âncora Programação para Web Revisão HTML 11/38

12 Programação para Web Revisão HTML 12/38 Search Engine Optimization Sites de busca são hoje a principal fonte de procura de informações da Internet. Google pode ser a diferença entre o sucesso ou fracasso de uma empresa SEO: é um conjunto de técnicas que têm como principal objetivo tornar os sites mais amigáveis para os sites de busca. É o trabalho de otimização realizado para melhorar o posicionamento de sites na tela de resultados gratuitos de sites de busca.

13 Tela de Resultados de Busca (SERP) Resultados pagos Programação para Web Revisão HTML 13/38

14 Tela de Resultados de Busca (SERP) Resultados gratuitos Programação para Web Revisão HTML 14/38

15 Programação para Web Revisão HTML 15/38 Importância do texto âncora do link para o SEO Texto âncora é o texto que vai receber o link: <a href=" esse é o texto ^ancora</a>. É esse texto envolto no link que faz com que o máquinas de busca relacione o conteúdo da página que está sendo referenciada ao link. Qual texto âncora é melhor? 1. Outro artigo interessante é um que escrevi há algumas semanas atrás, sobre rich snippets. 2. Outro artigo interessante é um que escrevi há algumas semanas atrás, sobre rich snippets. Clique aqui e leia mais sobre isso.

16 Programação para Web Revisão HTML 16/38 Importância do texto âncora do link para o SEO O texto âncora deve explicar o que o usuário vai encontrar ao clicar naquele link. Isso impacta o SEO dos dois lados: Caso o texto âncora tenha a ver com o conteúdo que o usuário verá ao clicar no link, a página que recebe o link ganhará relevância. Tendo textos âncoras que reflitam o que o usuário encontrará na outra página, aumenta a confiança dos mecanismos de busca no seu conteúdo.

17 Programação para Web Revisão HTML 17/38 Prática: Página pessoal Pode ser que quem esteja navegando em sua página deseje ter mais informações sobre as instituições de sua formação acadêmica. Insira links para que seja possível acessar as páginas das instituições.

18 Programação para Web Revisão HTML 18/38 Imagens Podemos adicionar imagens em documento HTML com o elemento img. Esse elemento possui um atributo chamado src. Esse atributo indica o caminho absoluto ou relativo da imagem que queremos adicionar.

19 Programação para Web Revisão HTML 19/38 Imagens <img src="tim.jpg" alt="tim Berners-Lee" /> Atributo alt: usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. <img src=" <a href=" src="logo.png"></a>

20 Programação para Web Revisão HTML 20/38 Imagens O atributo title pode ser usado para fornecer uma curta descrição da imagem: <img src="logo.gif" title="aprenda HTML no site HTML.net">

21 Programação para Web Revisão HTML 21/38 Imagens Dois outros atributos importantes são width e height: Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel: unidade de medida usada para medir resolução da tela. <img src="logo.gif" width="32" height="32">

22 Programação para Web Revisão HTML 22/38 Imagem SEO Imagens são cruciais para SEO. Fatores: Nome do arquivo da imagem: use a palavras mais importantes e remova stopwords. Alt tags e Title tags Tempo de carregamento: google privilegia sites mais rápidos. Reduza e comprima as imagens do seu site. Tipo do arquivo de imagem JPEG: imagens mais complexas PNG: gráficos e imagens transparentes GIFS: animações Para saber mais: SEO Image Optimization - Everything You Need To Know

23 Programação para Web Revisão HTML 23/38 Prática: Página pessoal Em um currículo nem sempre é recomendável colocar uma foto, mas em uma página como estamos criando talvez seja interessante.

24 Programação para Web Revisão HTML 24/38 Tabelas Necessidade de exibir dados de forma tabular em páginas web: table. As linhas de uma tabela são definidas com o elemento tr, as células de títulos com o elemento th e as células de dados com o elemento td. Table é definido pelos navegadores como block-level element

25 Tabelas colspan é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula. Programação para Web Revisão HTML 25/38

26 Tabelas Programação para Web Revisão HTML 26/38

27 Programação para Web Revisão HTML 27/38 rowspan Especifica quantas linhas estarão contidas em uma célula.

28 rowspan Programação para Web Revisão HTML 28/38

29 Programação para Web Revisão HTML 29/38 Cabeçalho, corpo e rodapé podemos definir explicitamente o cabeçalho, o corpo e o rodapé de uma tabela através dos elementos thead, tbody e tfoot respectivamente. thead: define o cabeçalho da tabela tfoot: define o rodapé da tabela tbody: define o corpo da tabela

30 Tabelas Programação para Web Revisão HTML 30/38

31 Programação para Web Revisão HTML 31/38 Títulos Também podemos definir um título para uma tabela através do elemento caption.

32 Títulos Programação para Web Revisão HTML 32/38

33 Programação para Web Revisão HTML 33/38 Tables SEO Fatores: Definir uma coluna como tópico da tabela Essa coluna deve ficar em negrito Definir uma legenda para tabela Definir o cabeçalho da tabela com th ou thead Texto próximo à tabela ajuda em identificar o tema da tabela Uma boa tabela não terá muita variância no tamanho de célula para célula ou coluna para coluna Deixe claro a unidade numérica utilizada Saiba mais: BUILDING HTML TABLES THAT GOOGLE SEARCH WILL LOVE

34 Tables SEO Programação para Web Revisão HTML 34/38

35 Programação para Web Revisão HTML 35/38 Prática: Página pessoal Por vezes, é interessante mostrar seu histórico escolar em sua página pessoal (ainda mais se você tiver boas notas). Faça uma tabela para cada ano, contendo os nomes das disciplinas e a nota em cada bimestre.

36 Programação para Web Revisão HTML 36/38 Prática: Página pessoal Complete sua página com informações adicionais como: experiências profissionais, idiomas, habilidades técnicas, etc.

37 Programação para Web Revisão HTML 37/38 Prática: Página pessoal Não deixe de salvar os arquivos criados durante a aula, pois vocês deverão entregar e valerá ponto. Ainda vou definir a data.

38 Programação para Web Revisão HTML 38/38 Dúvidas? harlley/web/aula04