HTML Principios Básicos

1. HTML – AULA 1 Microlins - Web e Design – Capítulo 1 Rondonópolis 07 de Maio de 2011 Mayza de Oliveira @mayzaoliveira Mayza.deoliveira@gmail.com

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. CONHECENDO AS TAGS  O que é uma tag? <html></html> Essa TAG indica o começo e o final do documento HTML. - Instruções - códigos - que possuem funções especificas. - Códigos interpretados pelo navegador.

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 e salvem com o nome de index.html

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. ESTRUTURA BÁSICA DO DOCUMENTO HTML - O navegador interpretou o código HTML e exibiu o layout da página.

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. 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. 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 apostila http-equiv: Faz uma correspondência com campos de cabeçalho do protocolo HTTP. Uma ação é desencadeada quando lidos pelo navegador; content: Especifica meta-informação para que seja associada com o valor especificado no http-equiv.

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. 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. 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. 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. IMPORTANTE: TOP, BOTTOM, LEFT E RIGHT

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. 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. TAG <CENTER> - CENTRALIZAR  <center> Utilizada para centralizar blocos de texto, tabelas e etc.

18. TAG <CENTER> - CENTRALIZAR <html> <head> <title> Título da página </title> </head> <body> <center><h3>Frase centralizada na página</h3></center> </body> </html> *página 6 da apostila

19. TAG <P> - PARÁGRAFO  <p> Delimita parágrafos e insere o espaço de uma linha em branco entre eles.

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. 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. TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS

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;">Primeiro parágrafo</p> <p>Segundo parágrafo</p> </body> </html>

24. TAG <BR> - QUEBRA DE LINHAS  <br> Utilizado quando é necessário que se faça uma quebra de linha em uma frase.

25. TAG <BR> - QUEBRA DE LINHAS <html> <head> <title>Título da página</title> </head> <body> <p>Casa da colina <br> Av. 21 de Junho, 66 <br> Bairro Centro <br>CEP: 16560-000</p> </body> </html> *página 7 da apostila

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. 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. 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. TAG <UL> - LISTA NÃO ORDENADA DE VÁRIOS NÍVEIS  O símbolo que rotula o item é substituído a cada mudança de nível.

30. TAG <UL> - LISTA NÃO ORDENADA DE VÁ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. 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. 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. TAG <OL> - LISTA ORDENADA DE VÁRIOS NÍVEIS  Este tipo de lista não apresenta uma numeração de níveis (ex: 1.1, 1.2, 1.1.1.)

34. TAG <OL> - LISTA ORDENADA DE VÁRIOS NÍ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. 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. TAGS <DL> <DT> E <DD> - LISTA DE DEFINIÇÃO  O texto é formatado como uma lista de termos na esquerda para direita.

37. TAGS <DL> <DT> E <DD> - LISTA DE DEFINIÇÃO <body> <dl> <dt>Internet <dd>São milhões de computadores interligados pelo protocolo de internet TCP/IP que permitem o acesso a informações e transferência de dados. <dt>HTML <dd>HiperText Markup languagem </dl> </body> *página 9 da apostila

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. 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. EXERCÍCIO - RESULTADO

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. 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. 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. 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. 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. 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.

HTML Principios Básicos

HTML Principios Básicos

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a HTML Principios Básicos

Similar a HTML Principios Básicos(20)

Último

Último(14)

HTML Principios Básicos