Quem sou eu? Ana Paula Alves de Lima. Formação:

Tamanho: px

Começar a partir da página:

Download "Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com"

João Pedro Silveira Santiago
8 Há anos
Visualizações:

1 Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1

2 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação; Especialista em Gestão do conhecimento e da Tecnologia da Informação; Webdesigner; Projetista em autocad; paulapeniel@gmail.com DESENVOLVIMENTO DE SISTEMAS TÉCNICO EM INFORMÁTICA INTEGRADO AO ENSINO MÉDIO 2

Especialista em Gestão do conhecimento e da Tecnologia da Informação;

3 MÉTODOS DE AVALIAÇÕES Seminários; Trabalhos em grupos ou individuais; Exercícios teórico e práticos; Participações; Avaliações; DESENVOLVIMENTO DE SISTEMAS TÉCNICO EM INFORMÁTICA INTEGRADO AO ENSINO MÉDIO 3

4 Aula de Hoje Como escrevo uma página para a internet? Estrutura básica de um documento HTML Conceitos Algumas formatações em HTML INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 4

5 Tudo na WWW tem HTML? Abrir o Firefox 2. Entrar em um site (digitar URL e teclar enter) 3. Clicar com o botão direito 4. Clicar na opção Código-fonte 5. Irá abrir uma janela com o código HTML Faça esses passos em mais dois sites INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 5

6 O que está acontecendo? INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 6

7 Introdução Criando um documento HTML Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de notas: Arquivo > Salvar como...; Alterar o tipo de arquivo para: Todos os arquivos; Salvar o arquivo com extensão.html; 2

8 Introdução Conceitos básicos sobre HTML Sigla para HyperText Markup Language (Linguagem de Marcação de Hipertexto); HTML é a linguagem utilizada na comunicação entre o desenvolvedor de uma página WEB e o navegador (Internet Explorer, Mozilla Firefox, Safari,...); A HTML utiliza identificadores que são chamados de TAG. Essas TAGs indicam ao navegador o elemento a ser exibido; Cada TAG apresenta uma lista de atributos que podem definir as propriedades dos elementos como aparência, tamanho, posição, cores, fontes, etc. Sintaxe das TAGs As TAGs são palavras definidas, em inglês, e são escritas entre os sinais < e > ; 3

..); A HTML utiliza identificadores que são chamados de TAG.

9 Introdução Sintaxe das TAGs As TAGs são palavras definidas, em inglês, e são escritas entre os sinais < e > ; As TAGs devem ser abertas e fechadas para que o navegador saiba de onde e até onde está definido o elemento. Para se fechar uma TAG é utilizado o sinal /. Algumas poucas TAGs não necessitam ser fechadas, sendo recomendado a inserção do sinal / na TAG de abertura; Exemplos: <tag>... </tag> <tag/> - TAG aberta e fechada; - TAG que não precisa ser fechada; 4

Para se fechar uma TAG é utilizado o sinal /.

10 Introdução Sintaxe das TAGs Os atributos de uma TAG são inseridos dentro da TAG de abertura e seus valores devem estar entre aspas simples ou dupla. Exemplos: <tag atr1='prop1'>... </tag> <tag atr1='prop1' atr2="prop2"/> 5

devem estar entre aspas simples ou dupla.

11 TAGs fundamentais <html> e </html> Usadas em toda página WEB, são a primeira e a última TAGs a serem inseridas num documento HTML. Entre elas fica escrita toda a página. <head> e </head> head (cabeça) é uma TAG de cabeçalho. Nela são inseridas as primeiras configurações da página a serem utilizadas durante a interpretação feita pelo navegador. Algumas dessas configurações são as folhas de estilo, CSS (Cascading Style Sheets), o título da página e scripts de execução; <title> e </title> title (título) é a TAG que define o título da página e fica inserida dentro de head. 6

Nela são inseridas as primeiras configurações da página a serem utilizadas durante a interpretação feita pelo navegador.

12 TAGs fundamentais <body> e </body> body (corpo) é a TAG onde ficam escritos todos os elementos visíveis da página: textos, links, imagens, formulários e etc. Principais atributos de <body> bgcolor conjunto de cores: {blue, red, yellow, green,...}; utilizado para definir a cor de fundo; as cores também podem ser representadas com codificação hexadecimal; o número de cores distintas disponíveis utilizando o sistema RGB (Reb-Green-Blue) de cores (sistema mais simples) supera 16mi. background seleciona uma imagem para plano de fundo; deve ser inserido o endereço da imagem. 7

..}; utilizado para definir a cor de fundo; as cores também podem ser representadas com codificação hexadecimal; o número de cores distintas

13 Na prática... Exemplo 1 - código <html> <head> <title>este é o título</title> </head> <body bgcolor='orange'> Olá. Eu faço parte do corpo da página. </body> </html> 8

14 Na prática... Exemplo 1 - página 9

15 Formatação de textos Quebra de linha e parágrafo <br> quebra de linha; <p> e </p> parágrafo. Principal atributo de <p> align conjunto de valores: {center, left, right, justify}; utilizado para alinhar um texto; caso não seja definido, o valor padrão é left. 10

16 Na prática... Exemplo 2 - código <body> Um parágrafo com quebra de linhas alinhado ao centro:<p align='center'>"quem crer pudera, tempo em fora, no meu verso,<br/>se o vosso alto valor eu proclamasse nele?<br/>então e sabe-o o céu como em tumba, ao inverso,<br/>vossa vida aí oculto e o mais que em vós excele.<br/>dissesse eu o que minha alma em vossos olhos sente,<br/>vossas graças, fiel, todas enumerasse,<br/>e o futuro diria: Este poeta mente;<br/>beleza assim não há da terra sobre a face".</p> </body> 11

fora, no meu verso,<br/>se o vosso alto valor eu proclamasse nele?

17 Na prática... Exemplo 2 - página 12

18 Formatação de textos Títulos <h1> e </h1> título maior; <h2> e </h2> <h3> e </h3> <h4> e </h4> <h5> e </h5> <h6> e </h6> título menor. Principal atributo align. 13

19 Na prática... Exemplo 3 - código <body> <h1>título 1 (esquerda)</h1> <h2 align='left'>título 2 (esquerda)</h2> <h3 align='center'>título 3 (centro)</h3> <h4 align='center'>título 4 (centro)</h4> <h5 align='right'>título 5 (direita)</h5> <h6 align='right'>título 6 (direita)</h6> </body> 14

20 Na prática... Exemplo 3 - página 15

21 Formatação de textos Formatações gerais <b> e </b> <i> e </i> <u> e </u> <s> e </s> <font> e </font> negrito; itálico; sublinhado; riscado; define propriedades da fonte como, tamanho, cor, fundo. Principais atributos de <font> size color conjunto de tamanhos: {1,..., 7}, sendo 1 o menor tamanho; utilizado para definir o tamanho do texto; mesmo conjunto de cores do atributo bgcolor; utilizado para definir a cor da letra. 16

22 Na prática... Exemplo 4 - código <body> <h4>formatações gerais:</h4> Negrito: <b>texto</b><br/> Itálico: <i>texto</i><br/> Sublinhado: <u>texto</u><br/> Riscado: <s>texto</s><br> <font color='red' size='2'>vermelho tamanho 2</font><br/> <font color='#0000ff' size='5'>azul tamanho 5</font> </body> 17

23 Na prática... Exemplo 4 - página 18

24 Trabalhando com figuras Inserção <img> insere uma figura. Principais atributos align; src border height width indica onde está a imagem; define a espessura da borda; define a altura; define a largura. 19

25 Na prática... Exemplo 5 - código <body background='fundo_exemplo.jpg'> <img src='imagem/sol.jpg' border='2px'/> <img src='imagem/sol.jpg' height='100px' width='200px;'/> <img src='imagem/sol.jpg' height='150px'/> </body> 20

26 Na prática... Exemplo 5 - página 21

27 Organização dos elementos Listas <ul> e </ul> <ol> e </ol> <li> e </li> lista não-ordenada (Unordered List); lista ordenada (Ordered List); item da lista (List Item); deve ser utilizado dentro da ol ou da ul. Principal atributo das listas type conjunto de tipos: {1, a, A, i, I, circle, disc, square}; utilizado para definir o marcador a ser utilizado na lista; a TAG ol utiliza apenas os valores {1, a, A, i, I}; a TAG ul utiliza apenas os valores {circle, disc, square}; a TAG li utiliza qualquer um dos tipos apresentados. pode-se usar o type como none para que não mostre nenhum marcador. 22

28 Na prática... Exemplo 6 - código <ol type='i'> <li>cores: <ul type='square'> <li>vermelho</li> <li>verde</li> <li>azul</li> </ul> </li> <li>símbolos <ul> <li>quadrado</li> <li type='disc'>triângulo</li> <li>ponto</li> </ul> </li> </ol> 23

29 Na prática... Exemplo 6 - página 24

30 Interatividade da página Link <a> e </a> tag que permite inserir links ná página; com esta tag torna-se possível a navegação em uma página web. Principais atributos de <a> href target indica a página ou arquivo a ser aberto; indica aonde a página ou arquivo deve ser aberto; conjunto de valores: {_self, _blank, *}. 42

31 Na prática... Exemplo 11 código de paginalink.html <html> <head> <title>título</title> </head> <body> <a href='pagina3.html' target='_self'> Abrir página 3 </a> </body> </html> 44

Documentos relacionados

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam