Carregar apresentação
A apresentação está carregando. Por favor, espere
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
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.