Aplicativo aula04

202 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
202
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aplicativo aula04

  1. 1. Aula 004 Aplicativos PRONATEC Programa Nacional de Acesso ao Ensino Técnico e Emprego
  2. 2. PRONATEC Programa Nacional de Acesso ao Ensino Técnico e Emprego
  3. 3. 1. Comandos HTML • Cabeçalhos: H1, H2, ..., H6 são formatos padronizados no HTML para produzir textos de cabeçalho de forma estruturada, assim os textos maiores mais destacados ficam em H1 e os menores e menos destacados em H6 • As tag H tem o parâmetro ALIGN (alinhar) que pode receber os valores “right” (a direita), “left” (a esquerda) ou “center” (ao centro) • Parágrafo: <P>..</P> contem um parágrafo completo e também possui o parâmetro ALIGN • Fonte: <font>..</font> configura o formato do texto a ser exibido. Os parâmetros mais importantes são COLOR para as cores HTML, FACE faz com que um conjunto de fontes auxiliares possam ser usadas caso a principal não esteja instalada, SIZE informa o tamanho da fonte que pode ser absoluto (número) ou relativo (+/-)
  4. 4. 2. Mais comandos HTML • A tag body já vista tem alguns parâmetros importantes: BGCOLOR informa a cor de fundo da sua página, BACKGROUND informa uma imagem para ser mostrada no fundo da página como uma marca d’água,TEXT informa a cor do texto normal, LINK informa a cor dos links para outros documentos e VLINK é a cor dos links já visitados • <center>..</center> centraliza o conteúdo • <hr> pode ter os parâmetros: COLOR para cor da linha, SIZE para o comprimento e WIDTH para a largura do traço que pode ser um valor absoluto ou um valor percentual
  5. 5. 3. Sobre Links • Uma das tags mais importantes do HTML é tag de link para outras páginas html, isso é o conceito principal por trás do hipertexto • <a href=“pagina2.html”>Página 2</a> - essa tag mostra o texto “Página 2” de cor diferenciada indicando que se você passa como o mouse nele e clica irá abrir o documento indicado pelo parâmetro “href” – nesse caso “pagina2.html” • URL – Uniform Ressource Locator – Localizador de Recurso Universal, são assim chamados todos os endereços eletrônicos da internet para se abrir algum site, normalmente se compõe de 3 partes: protocolo, domínio, pasta e documento • Protocolo: http, https, ftp são os mais usados na web. HTTP é o padrão para textos, FTP somente é usado para transferência de arquivos. • Domínio varia de acordo com o nome registrado na internet, por exemplo www.gontijoamaral.com • Pasta e documento, pasta é onde fica no domínio o documento descrito, por exemplo: “aula/aula4.pptx” • Montando a URL: http://www.pronatec.com/aula/Aula4.pptx
  6. 6. 4. Mais sobre Links • Um link pode referenciar uma URL qualquer mas também pode referenciar outra parte da própria página em que está usando. Para isso devemos criar uma âncora com o parâmetro “NAME” e depois referenciá-lo • Ex: <a name=“parte1”>Parte 1</a> depois em outro local do documento você coloca • <a href=“#parte1”>Vai para a parte 1</a> e ao clicar nesse link o navegador volta para o título “Parte 1” que está ancorado como “parte1”. A “#” (tralha) serve para indicar que o link se refere a uma âncora e não a uma URL • Você pode usar URL junto com âncora para ir para um determinado ponto de outro documento. Assim: <a href=“www.pronatec.com/aula4.html#parte1”> indica para o navegador abrir o documento html “aula4.html” no domínio “www.pronatec.com” e deslocar para a âncora “parte1” do mesmo.
  7. 7. 5. Listas • <ul>..</ul> cria uma lista dos textos dentro da tag • <li>..</li> cria um item quando dentro da tag <ul> • Exemplo: <ul> <li>Material da aula 1</li> <li>Material da aula 2</li> <li>Material da aula 3</li> </ul> • Esse exemplo cria uma lista com 3 itens dentro
  8. 8. 6. Imagens • <img> insere um arquivo imagem definido pelo parâmetro “src”. Ex: <img src=“c:foto.jpg”> irá mostrar a imagem do arquivo “c:foto.jpg” no local onde está o comando na página • Use os parâmetros WIDTH e HEIGHT para definir a largura e altura da imagem a ser exibida. Pode ser valor absoluto (pontos) ou percentual • O parâmetro BORDER coloca uma moldura em volta da imagem na cor definida por BORDERCOLOR • VSPACE e HSPACE definem o espaço vertical e horizontal da imagem para o texto onde ela está inserida • ALIGN indica o alinhamento da imagem na linha do texto onde ela é exibida: TOP, MIDDLE, LEFT, RIGHT
  9. 9. 7. Tabelas • Uma tabela é uma planilha: linhas x colunas • <table>..</table> cria uma tabela • <tr>..</tr> cria uma linha na tabela • <td>..</td> cria uma coluna na linha • Então a ordem é: TABELA tem LINHA que tem COLUNA • Exemplo: Cria uma tabela com 3 linhas e 3 colunas <table> <tr> <td>Coluna 1 na Linha 1</td> <td>Coluna 2 na Linha 1</td> <td>Coluna 3 na Linha 1</td> </tr> <tr> <td>Coluna 1 na Linha 2</td> <td>Coluna 2 na Linha 2</td> <td>Coluna 3 na Linha 2</td> </tr> <tr> <td>Coluna 1 na Linha 3</td> <td>Coluna 2 na Linha 3</td> <td>Coluna 3 na Linha 3</td> </tr> </table>
  10. 10. 8. Tabelas - parâmetros <TABLE border=numero cellspacing=numero cellpadding=numero width=numero align=alinhamento bgcolor=cor bordercolor=cor> BORDER: Especifica a largura da linha das bordas que separam as células da tabela. Se não for especificado, não será exibido uma borda para a tabela. CELLSPACING: Especifica o espaçamento em pixels entre as células. CELLPADDING: Espaçamento entre o conteúdo e a borda da célula. WIDTH: Largura da tabela em pixels. ALIGN: Alinhamento da tabela na página. Pode ser right, left ou center. BGCOLOR: Especifica a cor de fundo de toda a tabela BORDERCOLOR: Especifica a cor das bordas da tabela
  11. 11. 9. Linhas - parâmetros <TR align=alinhamento valign=alinhamento bgcolor=cor bordercolor=cor> ALIGN: Alinhamento horizontal do conteúdo da linha: right, left, center ou justify VALIGN: Alinhamento vertical do conteúdo da linha: top, middle ou bottom BGCOLOR: Especifica a cor de fundo da linha BORDERCOLOR: Especifica a cor de borda da linha
  12. 12. 10. Coluna - parâmetros <TD align=alinhamento valign=alinhamento bgcolor=cor bordercolor=cor nowrap colspan=numero rowspan=numero> ALIGN: Alinhamento horizontal do conteúdo da célula: right, left, center ou justify VALIGN: Alinhamento vertical do conteúdo da célula: top, middle ou bottom BGCOLOR: Especifica a cor de fundo da célula BORDERCOLOR: Especifica a cor de borda da célula NOWRAP: Indica para não quebrar a linha dentro da célula COLSPAN: Número de colunas que esta célula deverá ocupar ROWSPAN: Número de linhas que esta célula deverá ocupar

×