A ULA DE HTML BÁSICO

AULA DE HTMLBÁSICO

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

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 ‘>’; AULA DE HTML BÁSICO 3

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

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: • <tagatr1='prop1'> ... </tag> • <tagatr1='prop1'atr2="prop2"/> AULA DE HTML BÁSICO 5

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

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

Na prática... • Exemplo 1 - código • <html> • <head> • <title>Este é o título</title> • </head> • <bodybgcolor='orange'> • Olá. • Eu faço parte do corpo da página. • </body> • </html> AULA DE HTML BÁSICO 8

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

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

Na prática... • Exemplo 2 - código • <body> • Um parágrafo com quebra de linhas alinhado ao centro:<palign='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

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

Na prática... • Exemplo 3 - código • <body> • <h1>Título 1 (esquerda)</h1> • <h2align='left'>Título 2 (esquerda)</h2> • <h3align='center'>Título 3 (centro)</h3> • <h4align='center'>Título 4 (centro)</h4> • <h5align='right'>Título 5 (direita)</h5> • <h6align='right'>Título 6 (direita)</h6> • </body> AULA DE HTML BÁSICO 14

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

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> • <fontcolor='red'size='2'>Vermelho tamanho 2</font><br/> • <fontcolor='#0000FF'size='5'>Azul tamanho 5</font> • </body> AULA DE HTML BÁSICO 17

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

Na prática... • Exemplo 5 - código • <bodybackground='fundo_exemplo.jpg'> • <imgsrc='imagem/sol.jpg'border='2px'/> • <imgsrc='imagem/sol.jpg'height='100px'width='200px;'/> • <imgsrc='imagem/sol.jpg'height='150px'/> • </body> AULA DE HTML BÁSICO 20

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

Na prática... • Exemplo 6 - código • <oltype='i'> • <li>Cores: • <ultype='square'> • <li>Vermelho</li> • <li>Verde</li> • <li>Azul</li> • </ul> • </li> • <li>Símbolos • <ul> • <li>Quadrado</li> • <litype='disc'>Triângulo</li> • <li>Ponto</li> • </ul> • </li> • </ol> AULA DE HTML BÁSICO 23

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Na prática... • Exemplo 11 – código de paginaLink.html • <html> • <head> • <title>Título</title> • </head> • <body> • <ahref='pagina3.html'target='_self'> • Abrir página 3 • </a> • </body> • </html> AULA DE HTML BÁSICO 44

A ULA DE HTML BÁSICO