Internet I - Aula 03 - O Maravilhoso Mundo do HTML

333 visualizações

Publicada em

Nesse slide eu falo sobre HTML e como dar os primeiros passos para conseguir desenvolver páginas utilizando esse tipo de marcação.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
333
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Internet I - Aula 03 - O Maravilhoso Mundo do HTML

  1. 1. Internet I O Maravilhoso Mundo do HTML Prof. Manoel Afonso
  2. 2. O que é HTML? É de Comer?  Linguagem de desenvolvimento de páginas Web;  HTML é uma Linguagem de Marcação, não é uma Linguagem de Programação, ou seja, você só pode “desenhar” coisas, não pode “programa-las”;  Jamais diga que você programa em HTML;
  3. 3. Como usar essa coisa?  Há diversos editores (IDEs) que trabalham com documentos HTML:  Aptana Studio;  Bloco de Notas;  Notepad++;  IDEs são importantes pois auxiliam em varias coisas:  Pré-visualização;  Autofechamento de Tags;  IntelliSense (autocomplemento);
  4. 4. E vamos usar o...  Notepad++  Pode ser baixado no seguinte link: http://notepad-plus-plus.org/download/  Pode ser usado para muitas linguagens diferentes;  Possui IntelliSense;  É fácil de usar;
  5. 5. Como funciona o HTML?  O HTML funciona na base de tags que são colocadas no código e que representam algum tipo de marcação diferente. Ex:
  6. 6. Identação  É extremamente importante que o espaçamento (identação) seja trabalhado sempre, todo o código deve estar identado da forma correta e que seja de fácil manutenção futura;  Quanto melhor identado o código, mais fácil para você e para os outros entenderem ele.
  7. 7. Seções  Páginas HTML são compostas por seções diferentes, cada seção é focada em um tipo de conteúdo diferente;  <head>  Cabeçalho: tudo que vai aqui são elementos que fornecem informações sobre a página, como o titulo da página;  <body>  Corpo: aqui é colocado tudo que vai aparecer na página, como textos, imagens, tabelas, etc.
  8. 8. Tags <meta>  Sites de busca como o Google e o Bing usam as tags <meta> para priorizar as buscas nos sites;  Para aprimorar sua visibilidade basta colocar “metas” na sua página, sempre na seção <head>
  9. 9. Títulos - Descrição  Os títulos dentro de páginas HTML são marcados com tags que diferenciam o tamanho da fonte a ser aplicada;  As tags títulos são: <h1> <h2> <h3> <h4> <h5> <h6>  Os títulos devem ser priorizados por ordem de importância, como no exemplo dá próxima página...
  10. 10. Títulos - Exemplos
  11. 11. Textos  Textos podem ser escritos usando a tag <p> que significa páragrafo;  Pode-se adicionar quebra de linha usando a tag <br>  Também é possível usar a tag <hr> para adicionar uma linha na página;
  12. 12. Imagens  É possível adicionar imagens na página HTML, podemos fazer isso usando a tag <img>, também podemos adicionar informações a essa imagem usando atributos como “src” e “alt”;  Também é possível mudar o tamanho da imagem usando os atributos “width” e “height”;
  13. 13. Alguém não tem dúvidas?
  14. 14. Exercícios  1) Construa uma página HTML utilizando tudo que foi mostrado em aula para cada item a seguir:  Banda favorita;  Uma série de tv;  Uma página pessoal;  PS: Sim, é para HOJE!
  15. 15. Lista de Tags HTML:  <head> - cabeçalho, com todas as informações da página;  <meta> - mostra informações sobre a página;  <title> - contem o título da página;  <body> - corpo, com todo conteúdo da página;  <h1> - define tamanhos de 1 a 5 para títulos;  <p> - define paragrafo na página;  <br> - quebra de linha;  <hr> - insere uma linha na página;  <img> - tag para imagens com os seguintes atributos:  src – alt – width – height;

×