Aula 004

Aplicativos

PRONATECPrograma Nacional de Acesso ao

Ensino Técnico e Emprego

PRONATECPrograma Nacional de Acesso ao

Ensino Técnico e Emprego

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 (+/-)

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

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

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.

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

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

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>

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. Senã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 tabelaBORDERCOLOR: Especifica a cor das bordas da tabela

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 justifyVALIGN: Alinhamento vertical do conteúdo da linha: top, middle ou bottomBGCOLOR: Especifica a cor de fundo da linhaBORDERCOLOR: Especifica a cor de borda da linha

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 justifyVALIGN: Alinhamento vertical do conteúdo da célula: top, middle ou bottomBGCOLOR: Especifica a cor de fundo da célulaBORDERCOLOR: Especifica a cor de borda da célulaNOWRAP: Indica para não quebrar a linha dentro da célulaCOLSPAN: Número de colunas que esta célula deverá ocuparROWSPAN: Número de linhas que esta célula deverá ocupar