HTML Principios Básicos

7,439 views
7,242 views

Published on

Aula inicial do módulo de HTML ministrada no curso de Web e Design na Microlins Cursos e Treinamentos pela professora Mayza de Oliveira

Published in: Technology, Design

HTML Principios Básicos

  1. 1. HTML – AULA 1Microlins - Web e Design – Capítulo 1Rondonópolis 07 de Maio de 2011Mayza de Oliveira@mayzaoliveiraMayza.deoliveira@gmail.com
  2. 2. INTRODUÇÃO HTML – Hypertext Markup Language; É uma linguagem de marcação utilizadas para produzir páginas web; Formada por sequência de comandos – tags – que são lidas e interpretadas pelo navegador – browser; O HTML trabalha em conjunto com outras tecnologias, como o JavaScript e CSS proporcionando páginas mais dinâmicas e interativas.
  3. 3. CONHECENDO AS TAGS O que é uma tag? <html></html>Essa TAG indica o começo e o final dodocumento HTML.- Instruções - códigos - que possuem funções especificas.- Códigos interpretados pelo navegador.
  4. 4. ESTRUTURA BÁSICA DO DOCUMENTO HTML<html> <head> <title>Título da página</title> </head> <body> Corpo da pagina </body></html>*página 3 da apostila- Escrevam a estrutura utilizando o bloco de notas esalvem com o nome de index.html
  5. 5. ESTRUTURA BÁSICA DO DOCUMENTO HTML <html></html> - indica o início e o fim da estrutura HTML; <head></head> - indica onde começa e termina o cabeçalho do documento html, que contém informações específicas e que não são exibidas no navegador, apesar de existirem e possuírem enorme importância; <title></title> - contém o título da página; <body><body> - é o corpo do documento HTML, é onde são inseridos todos os elementos – textos, links, imagens - que queremos que apareçam na nossa página.
  6. 6. ESTRUTURA BÁSICA DO DOCUMENTO HTML- O navegador interpretou o código HTML e exibiu o layout da página.
  7. 7. ESTRUTURA BÁSICA DO DOCUMENTO HTML - Para visualizar o código da página: Clique com o botão direito do mouse > exibir código fonte.
  8. 8. AS TAGS HTML E SEUS ATRIBUTOSO HTML possui tags além das apresentadas na estrutura básica do documento; Com as tags, podemos formatar a nossa página, por exemplo, determinar fontes, especificar cores e aplicar imagens no fundo da página; Veremos a seguir algumas Tags e as suas funções.
  9. 9. TAG <META> Ordena informações no cabeçalho da página <head> e define o que ele contém; Fornece informações que podem ser utilizadas pelos mecanismos de busca na web.<meta http-equiv=“content-type”content=“text/html; charset=utf-8”>*página 5 da apostilahttp-equiv: Faz uma correspondência com campos decabeçalho do protocolo HTTP. Uma ação é desencadeadaquando lidos pelo navegador;content: Especifica meta-informação para que sejaassociada com o valor especificado no http-equiv.
  10. 10. MAS O QUE É PROTOCOLO HTTP? • Hyper Text Transfer Protocol é o protocolo usado na World Wide Web para a distribuição e recuperação de informação. A troca de informações entre um browser e um servidor Web é toda feita através desse protocolo, que foi criado especificamente para a World Wide Web – www. Outro exemplo de <meta><meta http-equiv=“refresh” content=“10;url=http://google.com”>*página 5 da apostila
  11. 11. ATRIBUTOS DA TAGS <BODY> <body></body> - Corpo da nossa página;<body bgcolor=“#000000” text=“#FFFFFF”>Corpo da página</body>- bgcolor: especifica a cor do fundo da página- – em hexadeciaml;- text: especifica a cor do texto da página;
  12. 12. ATRIBUTOS DA TAGS <BODY> link: especifica a cor do link do documento; vlink: especifica a cor do link visitado; alink: especifica a cor do link ativo; background: indica a cor ou o endereço de uma imagem que será aplicada no fundo da página; bottommargin: especifica o tamanho da margem inferior do documento; topmargin: especifica o tamanho da margem superior do documento; leftmargin: especifica o tamanho da margem esquerda do documento; rightmargin: especifica o tamanho da margem direita do documento;
  13. 13. ATRIBUTOS DA TAGS <BODY><body bgcolor=“#000000” text=“#FFFFFF”link=“#3300cc” vlink=“#FF0000”alink=“#0066CC” leftmargin=“15”topmargin=“15” rightmargin=“12”bottommargin=“12”>Corpo da página</body>*página 5 da apostila
  14. 14. IMPORTANTE: TOP, BOTTOM, LEFT E RIGHT
  15. 15. TAG <H> - NÍVEIS DE TÍTULOS <h> Utilizada para formatar um título ou tópico de uma seção. Disponibiliza 6 níveis - <h1></h1> - <h6></h6>
  16. 16. TAG <H> - NÍVEIS DE TÍTULOS<html> <head> <title>Título da página</title> </head> <body> <h1>Nível 1</h1> <h2>Nível 2</h2> <h3>Nível 3</h3> <h4>Nível 4</h4> <h5>Nível 5</h5> <h6>Nível 6</h6> </body></html>*página 6 da postila
  17. 17. TAG <CENTER> - CENTRALIZAR <center> Utilizada para centralizar blocos de texto, tabelas e etc.
  18. 18. TAG <CENTER> - CENTRALIZAR<html> <head> <title> Título da página</title> </head> <body> <center><h3>Frase centralizadana página</h3></center> </body></html>*página 6 da apostila
  19. 19. TAG <P> - PARÁGRAFO <p> Delimita parágrafos e insere o espaço de uma linha em branco entre eles.
  20. 20. TAG <P> - PARÁGRAFO<html> <head> <title>Título da página</title> </head> <body> <p>Primeiro parágrafo</p> <p>Segundo parágrafo</p> </body></html>*página 6 da apostila
  21. 21. TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS align: define uma posição de alinhamento para o elemento que está sendo formatado pela tag. Os valores podem ser: left: esquerda; center: centralizado; right: direira; justify: justificado; style: os valores do estilo alteram as propriedades da apresentação do texto, como cor, tamanho, estilo do texto, etc.
  22. 22. TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS
  23. 23. TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS<html> <head> <title>Título da página</title> </head> <body> <p align="center"style="color:#006; font-family:Arial, sans-serif; font-size:14px;">Primeiroparágrafo</p> <p>Segundo parágrafo</p> </body></html>
  24. 24. TAG <BR> - QUEBRA DE LINHAS <br> Utilizado quando é necessário que se faça uma quebra de linha em uma frase.
  25. 25. TAG <BR> - QUEBRA DE LINHAS<html> <head> <title>Título da página</title> </head> <body> <p>Casa da colina <br> Av. 21 deJunho, 66 <br> Bairro Centro <br>CEP:16560-000</p> </body></html>*página 7 da apostila
  26. 26. TAG <HR> - LINHA HORIZONTAL <hr> Cria uma linha horizontal no documento, também utilizada para separar seções de informação. Atributos opcionais: align: define o alinhamento da linha que pode ser: left, center ou right; width: determina a largura da linha em pixels; noshade: especifica se a linha deve ser sólida.
  27. 27. TAG <HR> - LINHA HORIZONTAL <html> <head> <title>Título da página</title> </head> <body> <h1>HTML</h1> <hr size="2" width="100%" noshade> </body> </html> *página 7 da apostila
  28. 28. TAG <UL> - LISTAS NÃO ORDENADAS <html> <head> <title>Título da página</title> </head> <body> <ul> <li>Um item da lista</li> <li>Um outro item da lista</li> <li>O último item da lista</li> </ul> </body> </html> *página 7 da apostila
  29. 29. TAG <UL> - LISTA NÃO ORDENADA DEVÁRIOS NÍVEIS O símbolo que rotula o item é substituído a cada mudança de nível.
  30. 30. TAG <UL> - LISTA NÃO ORDENADA DEVÁRIOS NÍVEIS<body> <ul> <li>Documentos avançados</li> <li>Documentos básicos</li> <ul> <li>Formulários</li> <ul> <li>CGI</li> </ul> <li>Contadores</li> <li>Relógios</li> </ul> <li>Outras informações</li> </ul></body>*página 8 da apostila
  31. 31. TAG <UL> - TYPE Utilizando TYPE é possível especificar o tipo de marcador a ser utilizado – square, circle e disc. <body> <ul type="circle"> <li>Documentos avançados</li> <li>Documentos básicos</li> <li>Outras informações</li> </ul> </body> *página 8 da apostila
  32. 32. TAG <OL> - LISTA ORDENADA <html> <head> <title>Título da página</title> </head> <body> <ol> <li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ol> </body> </html> *página 8 da apostila
  33. 33. TAG <OL> - LISTA ORDENADA DE VÁRIOSNÍVEIS Este tipo de lista não apresenta uma numeração de níveis (ex: 1.1, 1.2, 1.1.1.)
  34. 34. TAG <OL> - LISTA ORDENADA DE VÁRIOSNÍVEIS<body> <ol> <li>Documentos avançados</li> <li>Documentos básicos</li> <ol> <li>Formolários</li> <ol> <li>CGI</li> </ol> <li>Contadores</li> <li>Relógios</li> </ol> <li>Outras informações</li> </ol></body>*página 8 da apostila
  35. 35. TAG <OL> - TYPE Com o TYPE na lista ordenada é possível iniciar a numeração da lista. <body> <ol start="5" type="A"> <li>Mato Grosso</li> <li>Espirito Santo</li> <li>Paraná</li> <li>São Paulo</li> <li>Rio de Janeiro</li> </ol> </body> *página 9 da apostila
  36. 36. TAGS <DL> <DT> E <DD> - LISTA DEDEFINIÇÃO O texto é formatado como uma lista de termos na esquerda para direita.
  37. 37. TAGS <DL> <DT> E <DD> - LISTA DEDEFINIÇÃO<body> <dl> <dt>Internet <dd>São milhões decomputadores interligados pelo protocolo deinternet TCP/IP que permitem o acesso ainformações e transferência de dados. <dt>HTML <dd>HiperText Markuplanguagem </dl></body>*página 9 da apostila
  38. 38. VALOR DAS CORES As cores em html são especificadas em padrões alfanuméricos, no modo RGB, com base hexadecimal. RGB Red – vermelho Green – verde Blue – azul Branco = #FFFFFF Preto é a ausência de cores = #000000*página 9 da apostila
  39. 39. EXERCÍCIO Para compreender a utilização simultânea das tags, vamos fazer uma página, utilizando todas as tags e formatações de cores que vimos durante a aula de hoje. Para isso, vamos dividir por seções e criar a página por partes. O Resultado deverá ser semelhante a este:
  40. 40. EXERCÍCIO - RESULTADO
  41. 41. EXERCÍCIO Parte 1 – Bloco do H1: <h1> - Primeira aula de HTML; <p> - Conhecemos durante a aula de hoje a utilização das TAGS básicas do HTML; <center> que envolverá e centralizará a tag <p> abaixo; <p> com style="color:#c1e904; font- size:14px;” - Mas vamos praticar para aprender; <hr> com size="2" width="100%" noshade
  42. 42. EXERCÍCIO Parte 2 – Bloco do H2: <h2> - Vimos como utilizar a tag BR para quebrar linhas; <p> com style="color:#06F000;” - Microlins<br>Curso de Web e Design<br>Horario: <br>16:00 - 19:00 horas; <hr> com size="4" width="100%" noshade
  43. 43. EXERCÍCIO Parte 3 - Bloco do H3 <h3> - Hoje é sabado; <p> com style="color:#F93;“ - Conhecemos também como utilizar as listas não ordenadas; <ul> com type="square“ que envolverá as tags <li> <li> - Primeiro, segundo, terceiro, quarto, quinto; <hr> com size="6" width="100%" noshade
  44. 44. EXERCÍCIO Parte 4 – Bloco do H4 <center> que envolverá a tag <h4>; <h4> - E também aprendemos a utilizar as listas ordenadas; <p> com style="color:#090000“ - Quais são os módulos do curso? <ol> com start="1" type="I“ e que envolverá as tags <li> <li> - Corel Draw, Photoshop, Flash, HTML, Dreamweaver; <hr> com size="9" width="100%" noshade
  45. 45. EXERCÍCIO Parte 5 – Bloco do H5 <h5> - Vimos o que é uma lista de definição; <dl> que envolverá as tags <dt> e <dd>; <dt> - Nível 1 <dd> - Nível 2 <dt> - Nível 1 <dd> - Nível 2 <hr> com size="2" width="100%" noshade
  46. 46. EXERCÍCIO Parte 6 – Bloco do H6 <h6> - As cores são no padrão RGB; <center> que envolverá as tags <p>; <p> com style="color:#F00“ – RED; <p> com style="color:#060“ – GREEN; <p> com style="color:#00F“ – BLUE.

×