WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo qual iremos estudar padrões de programação, uso de CSS e HTML de forma correta. Prof. Paulo Trentin 2
Uso dos elementos HTML Como visto anteriormente, os elementos HTML adicionam um valor semântico ao site. O que é um valor semântico? É um significado para determinado conteúdo. Por exemplo, se iremos fazer uma receita de bolo, é importante deixarmos os itens do bolo em uma lista, logo usaremos o elemento HTML UL (Unordered List). Prof. Paulo Trentin 3
Uso dos elementos HTML Qual a importância de usar o elemento correto? Além de auxiliar usuários com necessidades especiais, aumentando a acessibilidade de um site, o uso correto dos elementos garante eficiência para os buscadores de conteúdo como Google e Bing. Em resumo, se você não o fizer corretamente seu site, ele não aparecerá nas pesquisas e menos grupos de usuários poderão acessá-lo. Prof. Paulo Trentin 4
Web Standards O que é? Os Padrões Web são um movimento da World Wide Web Consortium (W3C) para definir normas, recomendações, artigos e tutoriais para que se desenvolva uma Web acessível a todos. No futuro tudo estará armazenado em um padrão, facilitando a consulta e separação de informações. Prof. Paulo Trentin 5
Web Semântica O que é? É o futuro da Web, também chamada de Web 3.0. Nada mais é que a organização dos documentos web disponíveis de tal forma que as máquinas os entendam. Com a revolução da internet, gerou-se muito conteúdo, porém também muito lixo. Os robôs de busca e sistemas, tem muita dificuldade em encontrar resultados eficientes com a web atual. A Web Semântica pretende resolver este problema. Prof. Paulo Trentin 6
HTML 5 O que é? A quinta versão da linguagem HTML. Está em desenvolvimento ainda, porém já pode ser usada com certas restrições. Irá aumentar a acessibilidade dos sites, e auxiliará na semântica destes. Contém players de Audio e Video nativos. Prof. Paulo Trentin 7
Elementos HTML O que é? Como vimos, é importante usarmos os elementos certos para cada tipo de conteúdo. Durante o decorrer curso, iremos conhecer a fundo cada elemento necessário para uma boa estruturação de um website. Prof. Paulo Trentin 8
Elementos HTML onde inserir Tendo o corpo do site pronto (html, head, body) podemos começar a programar os elementos HTML que serão exibidos. Onde inserir? A maior parte deles, inserimos dentro do elemento body, que é o corpo do site. Prof. Paulo Trentin 9
Elementos HTML - table O que faz? Define uma estrutura de apresentação de dados em tabela. Exemplo de uso: <table border= 1 > -> Inicia tabela com um pixel de borda <tr> -> Linha da tabela <th> </tr> <tr> </tr> </table> </th> <td> </td> -> Cabeçalho da célula na tabela Nomes -> Nova Célula Ronaldo Prof. Paulo Trentin 10
Elementos HTML - table cont... Implemente uma tabela que gere a seguinte saída no navegador: Prof. Paulo Trentin 11
Elementos HTML - table cont... Podemos ter títulos que usem mais que uma coluna: <table border= 1 > <tr> <th colspan=2> Nomes </th> </tr> <tr> <td> Ronaldo </td> <td> Ivan </td> </tr> </table> Prof. Paulo Trentin 12
Elementos HTML - table cont... E também colunas que usem mais que uma linha: <table border= 1 > <tr> <th colspan= 2 > Nomes </th> </tr> <tr> <td rowspan= 2 >Ronaldo</td> <td>ivan</td> </tr> <tr> <td>syluan</td> </tr> </table> Prof. Paulo Trentin 13
Elementos HTML - table cont... Podemos alterar a altura e largura das células da tabela. O atributo width altera a largura e o atributo height a altura: <table border="1"> <tr> <th colspan="2" width="200"> Nomes </th> </tr> <tr> <td rowspan="2" height="100">ronaldo</td> <td>ivan</td> </tr> <tr> <td>syluan</td> </tr> </table> Prof. Paulo Trentin 14
Elementos HTML - table cont... Resultado da alteração da largura (width) e da altura (height) das células da tabela. Prof. Paulo Trentin 15
Elementos HTML - p O que faz? Cria um parágrafo. Exemplo de uso: <p>isso é um parágrafo</p> <p>este é outro parágrafo</p> <p>repare a distância entre nós</p> Implemente o código acima e verifique o resultado no navegador. Prof. Paulo Trentin 16
Elementos HTML - strong O que faz? Como o nome já diz, é um elemento forte. Usado para representar maior importância ao texto que contém. Leitores de voz irão alterar o tom na hora de ler o texto dentro de uma tag strong. Exemplo de uso: <p> </p> Este parágrafo contém um elemento <strong>que é importante</strong> chamado strong. Implemente o código acima e verifique o resultado no navegador. Prof. Paulo Trentin 17
Elementos HTML - small O que faz? Representa um texto de comentário como um copyright. Exemplo de uso: <p> </p> Este parágrafo contém um <small>texto pequeno</strong> que está dentro do das tags <FONT COLOR="blue">small</font>. Implemente o código acima e verifique o resultado no navegador. Prof. Paulo Trentin 18
Elementos HTML - br O que faz? O line break (para de linha) é responsável por gerar uma quebra de linha. O mesmo efeito da tecla Enter no Word. Exemplo de uso: Este texto está na primeira linha<br/> Este está na segunda linha Repare que ele fecha com o atalho, igual ao elemento img, porém não necessita de nenhum atributo. Implemente o código acima e verifique o resultado no navegador. Prof. Paulo Trentin 19
Elementos HTML - ul O que faz? É uma Unordened List (lista não ordenada). Deve ser usado para criar lista de itens semelhantes como ingredientes de um bolo. A lista deve conter elementos li - List Item (Itens da lista). Exemplo de uso: <ul> </ul> <li>duas xícaras de chá de leite</li> <li>oito ovos batidos</li> Implemente o código acima e modifique a lista não ordenada (ul) por uma lista ordenada (ol) e veja a diferença na exibição no navegador. Prof. Paulo Trentin 20
Elementos HTML - img O que faz? Insere uma imagem em uma página HTML. 1º - Crie uma pasta chamada imagens, dentro da pasta meusite. 2º - Copie alguma imagem com extensão jpg da internet e salve como imagem.jpg dentro desta pasta criada. 3º - Crie o elemento img como segue o exemplo: <img src= imagens/imagem.jpg alt= meu bolo /> Observação: O atributo alt é obrigatório. Prof. Paulo Trentin 21
Elementos HTML img cont... Atributo alt e title O atributo alt é obrigatório e funciona como uma descrição breve do que se vê na imagem. Ele aparece ao usuário quando a imagem não está disponível. Navegadores como Internet Explorer exibem esse texto ao passar o mouse em cima da imagem. O elemento img suporta o atributo title que é um complemento, e é usado por outros navegadores como Chrome para exibir a descrição da imagem ao passar o mouse em cima dela. Use tais atributos e faça os testes alterando nome de origem da imagem no atributo src e passando o mouse sobre a imagem. Prof. Paulo Trentin 22
Atividade Aplicando conhecimento Analisando a imagem do slide a seguir, crie sua própria página de receita usando os mesmos elementos nela usados: ol, strong, h2, ul, li, p, h1, small, br, table, tr, td e atributos para a exibição do texto ao passar o mouse sobre a imagem. A receita pode ser de sua autoria e não precisa necessariamente funcionar. Observação: A receita mais criativa ganhará meio ponto na nota. Prof. Paulo Trentin 23
Prof. Paulo Trentin 24