A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

AULA DE HTML BÁSICO.

Apresentações semelhantes


Apresentação em tema: "AULA DE HTML BÁSICO."— Transcrição da apresentação:

1 AULA DE HTML BÁSICO

2 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; AULA DE HTML BÁSICO 2

3 Introdução Conceitos básicos sobre HTML Sintaxe das TAGs
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 ‘>’; AULA DE HTML BÁSICO 3

4 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 aberta e fechada; <tag/> - TAG que não precisa ser fechada; AULA DE HTML BÁSICO 4

5 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"/> AULA DE HTML BÁSICO 5

6 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. AULA DE HTML BÁSICO 6

7 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. AULA DE HTML BÁSICO 7

8 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> AULA DE HTML BÁSICO 8

9 Na prática... Exemplo 1 - página AULA DE HTML BÁSICO 9

10 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. AULA DE HTML BÁSICO 10

11 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> AULA DE HTML BÁSICO 11

12 Na prática... Exemplo 2 - página AULA DE HTML BÁSICO 12

13 Formatação de textos Principal atributo 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. AULA DE HTML BÁSICO 13

14 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> AULA DE HTML BÁSICO 14

15 Na prática... Exemplo 3 - página AULA DE HTML BÁSICO 15

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

17 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> AULA DE HTML BÁSICO 17

18 Na prática... Exemplo 4 - página AULA DE HTML BÁSICO 18

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

20 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> AULA DE HTML BÁSICO 20

21 Na prática... Exemplo 5 - página AULA DE HTML BÁSICO 21

22 Organização dos elementos
Listas <ul> e </ul>  lista não-ordenada (Unordered List); <ol> e </ol>  lista ordenada (Ordered List); <li> e </li>  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. AULA DE HTML BÁSICO 22

23 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> </ol> AULA DE HTML BÁSICO 23

24 Na prática... Exemplo 6 - página AULA DE HTML BÁSICO 24

25 Organização dos elementos
Tabelas <table> e </table>  tabela; <tr> e </tr>  linha da tabela (Table Row); <td> e </td>  célula (Table Data Cell); <th> e </th>  célula cabeçalho (Table Header Cell). Principais atributos de <table> border, width, bgcolor, background. Principais atributos de <tr> align, bgcolor; valign  alinha o conteúdo do elemento verticalmente;  conjunto de valores: {bottom, middle, baseline, top}. AULA DE HTML BÁSICO 25

26 Organização dos elementos
Principais atributos de <td> e <th> align, valign, bgcolor, background; colspan  define a quantidade de colunas ocupadas pela célula. AULA DE HTML BÁSICO 26

27 Na prática... Exemplo 7 - código <table border='1px'> <tr>
<th colspan='3'>Dados</th> </tr> <th>Nome</th> <th>Sobrenome</th> <th>Idade</th> <td>Fernanda</td> <td>Diniz Santana</td> <td>22</td> </table> AULA DE HTML BÁSICO 27

28 Na prática... Exemplo 7 - página AULA DE HTML BÁSICO 28

29 Organização dos elementos
Atributos de espaçamento de <table> cellspacing  define o espaço entre as células de uma tabela; cellpadding  define o espaço entre o conteúdo de uma célula e sua borda. AULA DE HTML BÁSICO 29

30 Na prática... Exemplo 8 - código
<table border='1px' cellspacing='60px' cellpadding='20px'> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <td>Célula 3</td> <td>Célula 4</td> </table> AULA DE HTML BÁSICO 30

31 Na prática... Exemplo 8 - página AULA DE HTML BÁSICO 31

32 Estruturação da página
Frames <frameset> e </frameset>  define a disposição dos frames (quadros) na página; * Não pode ser usado junto com a tag body; <frame> e </frame>  cria um frame;  deve ser usado dentro da tag frameset. Principais atributos de <frameset> border; cols  define quantas colunas conterão frames, informando suas larguras respectivamente. AULA DE HTML BÁSICO 32

33 Estruturação da página
Principais atributos de <frame> src; name  define um nome para o elemento; frameborder  define se o frame terá borda ou não;  conjunto de valores: {no, yes}; noresize  matém fixo o tamanho do frame. AULA DE HTML BÁSICO 33

34 Na prática... Exemplo 9 - código <html> <head>
<title>Título</title> </head> <frameset cols='30%,55%,15%' border='5px'> <frame name='frame1' src='pagina1.html' frameborder='no' noresize/> <frame name='frame2' src='pagina2.html' frameborder='no'/> <frame name='frame3' src='pagina3.html'/> </frameset> </html> AULA DE HTML BÁSICO 34

35 Na prática... Exemplo 9 – código de pagina1.html <html>
<head> <title>Título</title> </head> <body bgcolor='orange'> Página 1<br/> Laranja </body> </html> AULA DE HTML BÁSICO 35

36 Na prática... Exemplo 9 – código de pagina2.html <html>
<head> <title>Título</title> </head> <body bgcolor='blue'> Página 2<br/> Azul </body> </html> AULA DE HTML BÁSICO 36

37 Na prática... Exemplo 9 – código de pagina3.html <html>
<head> <title>Título</title> </head> <body bgcolor='yellow'> Página 3<br/> Amarelo </body> </html> AULA DE HTML BÁSICO 37

38 Na prática... Exemplo 9 - página AULA DE HTML BÁSICO 38

39 Estruturação da página
Frames <iframe> e </iframe>  tag que permite inserir frames dentro da tag body;  uma vez que não se pode utilizar frameset junto com body deve-se usar iframe quando precisar inserir algum frame em body. Principais atributos de <iframe> frameborder, height, name, src, width. AULA DE HTML BÁSICO 39

40 Na prática... Exemplo 10 – código <body>
<table width='700px' border='1px'> <tr height='300px'> <td width='150px' valign='top'> Fora do frame! </td> <td> <iframe src='pagina1.html' width='100%' height='100%' frameborder='no'></iframe> </tr> </table> </body> AULA DE HTML BÁSICO 40

41 Na prática... Exemplo 10 - página AULA DE HTML BÁSICO 41

42 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  indica a página ou arquivo a ser aberto; target  indica aonde a página ou arquivo deve ser aberto;  conjunto de valores: {_self, _blank, *}. AULA DE HTML BÁSICO 42

43 Na prática... Exemplo 11 – código
<table width='700px' border='1px'> <tr height='300px'> <td width='150px' valign='top'> <a href='pagina1.html' target='meuFrame'>Página 1</a><br/> <a href='paginaLink.html' target='meuFrame'>Página com link</a> </td> <td> <iframe name='meuFrame' src='pagina1.html' width='100%' height='100%' frameborder='no'></iframe> </tr> </table> AULA DE HTML BÁSICO 43

44 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> AULA DE HTML BÁSICO 44

45 Na prática... Exemplo 11 - página AULA DE HTML BÁSICO 45


Carregar ppt "AULA DE HTML BÁSICO."

Apresentações semelhantes


Anúncios Google