html básico

Prévia do material em texto

<p>ULA DE</p><p>BÁSICO</p><p>2</p><p>Introdução</p><p>◊ Criando um documento HTML</p><p>AULA DE HTML BÁSICO</p><p>• Menu Iniciar > Programas > Acessórios > Bloco de notas;</p><p>• No Bloco de notas: Arquivo > Salvar como...;</p><p>• Alterar o tipo de arquivo para: Todos os arquivos;</p><p>• Salvar o arquivo com extensão .html;</p><p>3</p><p>Introdução</p><p>◊ Conceitos básicos sobre HTML</p><p>AULA DE HTML BÁSICO</p><p>• Sigla para HyperText Markup Language (Linguagem de</p><p>Marcação de Hipertexto);</p><p>• HTML é a linguagem utilizada na comunicação entre o</p><p>desenvolvedor de uma página WEB e o navegador (Internet</p><p>Explorer, Mozilla Firefox, Safari, ...);</p><p>• A HTML utiliza identificadores que são chamados de TAG.</p><p>Essas TAGs indicam ao navegador o elemento a ser exibido;</p><p>• Cada TAG apresenta uma lista de atributos que podem</p><p>definir as propriedades dos elementos como aparência,</p><p>tamanho, posição, cores, fontes, etc.</p><p>◊ Sintaxe das TAGs</p><p>• As TAGs são palavras definidas, em inglês, e são escritas</p><p>entre os sinais ‘’;</p><p>4</p><p>Introdução</p><p>◊ Sintaxe das TAGs</p><p>AULA DE HTML BÁSICO</p><p>• As TAGs são palavras definidas, em inglês, e são escritas</p><p>entre os sinais ‘’;</p><p>• As TAGs devem ser abertas e fechadas para que o</p><p>navegador saiba de onde e até onde está definido o elemento.</p><p>Para se fechar uma TAG é utilizado o sinal ‘/’. Algumas poucas</p><p>TAGs não necessitam ser fechadas, sendo recomendado a</p><p>inserção do sinal ‘/’ na TAG de abertura;</p><p>• Exemplos:</p><p>... - TAG aberta e fechada;</p><p>- TAG que não precisa ser fechada;</p><p>5</p><p>Introdução</p><p>AULA DE HTML BÁSICO</p><p>◊ Sintaxe das TAGs</p><p>• Os atributos de uma TAG são inseridos dentro da TAG de</p><p>abertura e seus valores devem estar entre aspas</p><p>simples ou dupla.</p><p>• Exemplos:</p><p>...</p><p>6</p><p>TAGs fundamentais</p><p>AULA DE HTML BÁSICO</p><p>◊ e</p><p>• Usadas em toda página WEB, são a primeira e a última TAGs</p><p>a serem inseridas num documento HTML. Entre elas fica</p><p>escrita toda a página.</p><p>◊ e</p><p>• head (cabeça) é uma TAG de cabeçalho. Nela são inseridas</p><p>as primeiras configurações da página a serem utilizadas</p><p>durante a interpretação feita pelo navegador. Algumas dessas</p><p>configurações são as folhas de estilo, CSS (Cascading Style</p><p>Sheets), o título da página e scripts de execução;</p><p>• e  title (título) é a TAG que define o</p><p>título da página e fica inserida dentro de head.</p><p>7</p><p>TAGs fundamentais</p><p>AULA DE HTML BÁSICO</p><p>◊ e</p><p>• body (corpo) é a TAG onde ficam escritos todos os</p><p>elementos visíveis da página: textos, links, imagens,</p><p>formulários e etc.</p><p>◊ Principais atributos de</p><p>• bgcolor</p><p> utilizado para definir a cor de fundo; as cores também</p><p>podem ser representadas com codificação hexadecimal;</p><p>o número de cores distintas disponíveis utilizando o</p><p>sistema RGB (Reb-Green-Blue) de cores (sistema mais</p><p>simples) supera 16mi.</p><p> conjunto de cores: {blue, red, yellow, green, ...};</p><p>• background</p><p> deve ser inserido o endereço da imagem.</p><p> seleciona uma imagem para plano de fundo;</p><p>8</p><p>Na prática...</p><p>AULA DE HTML BÁSICO</p><p>◊ Exemplo 1 - código</p><p>Este é o título</p><p>Olá.</p><p>Eu faço parte do corpo da página.</p><p>9</p><p>Na prática...</p><p>AULA DE HTML BÁSICO</p><p>◊ Exemplo 1 - página</p><p>10</p><p>Formatação de textos</p><p>AULA DE HTML BÁSICO</p><p>◊ Quebra de linha e parágrafo</p><p>•  quebra de linha;</p><p>• e  parágrafo.</p><p>◊ Principal atributo de</p><p>• align</p><p> utilizado para alinhar um texto;</p><p> caso não seja definido, o valor padrão é left.</p><p> conjunto de valores: {center, left, right, justify};</p><p>11</p><p>Na prática...</p><p>AULA DE HTML BÁSICO</p><p>◊ Exemplo 2 - código</p><p>Um parágrafo com quebra de linhas alinhado ao</p><p>centro:"Quem crer pudera, tempo em</p><p>fora, no meu verso,Se o vosso alto valor eu</p><p>proclamasse nele?Então – e sabe-o o céu – como</p><p>em tumba, ao inverso,Vossa vida aí oculto e o</p><p>mais que em vós excele.Dissesse eu o que minha</p><p>alma em vossos olhos sente,Vossas graças, fiel,</p><p>todas enumerasse,E o futuro diria: Este poeta</p><p>mente;Beleza assim não há da terra sobre a</p><p>face".</p><p>12</p><p>Na prática...</p><p>AULA DE HTML BÁSICO</p><p>◊ Exemplo 2 - página</p><p>13</p><p>Formatação de textos</p><p>AULA DE HTML BÁSICO</p><p>◊ Títulos</p><p>• e  título maior;</p><p>• e</p><p>• e</p><p>• e</p><p>• e</p><p>• e  título menor.</p><p>◊ Principal atributo</p><p>• align.</p><p>14</p><p>Na prática...</p><p>AULA DE HTML BÁSICO</p><p>◊ Exemplo 3 - código</p><p>Título 1 (esquerda)</p><p>Título 2 (esquerda)</p><p>Título 3 (centro)</p><p>Título 4 (centro)</p><p>Título 5 (direita)</p><p>Título 6 (direita)</p><p>15</p><p>Na prática...</p><p>AULA DE HTML BÁSICO</p><p>◊ Exemplo 3 - página</p><p>16</p><p>Formatação de textos</p><p>AULA DE HTML BÁSICO</p><p>◊ Formatações gerais</p><p>• e  negrito;</p><p>• e  itálico;</p><p>• e  sublinhado;</p><p>• e  riscado;</p><p>• e  define propriedades da fonte como,</p><p>tamanho, cor, fundo.</p><p>◊ Principais atributos de</p><p>• color  mesmo conjunto de cores do atributo bgcolor;</p><p>• size  conjunto de tamanhos: {1, ..., 7}, sendo 1 o</p><p>menor tamanho;</p><p> utilizado para definir a cor da letra.</p><p> utilizado para definir o tamanho do texto;</p><p>17</p><p>Na prática...</p><p>AULA DE HTML BÁSICO</p><p>◊ Exemplo 4 - código</p><p>Formatações gerais:</p><p>Negrito: texto</p><p>Itálico: texto</p><p>Sublinhado: texto</p><p>Riscado: texto</p><p>Vermelho tamanho</p><p>2</p><p>Azul tamanho 5</p><p>18</p><p>Na prática...</p><p>AULA DE HTML BÁSICO</p><p>◊ Exemplo 4 - página</p>