Programação para Internet. Prof. Hebert B. Alquimim

(1)

Programação para Internet

Prof. Hebert B. Alquimim

(2)

Bibliografia

Marcondes, Christian Alfim, HTML 4.0 Fundamental: A Base da Programação para Web. São Paulo: Editora Érica, 2005

(3)

Referências para consulta:

Relação de Tags - W3C

(4)

Conceitos

WWW - A World Wide Web -- "a Web" ou "WWW" para

encurtar -- ("teia do tamanho do mundo", traduzindo literalmente) é uma rede de computadores na Internet que fornece informação em forma de hipertexto.

(5)

Conceitos

Internet - É uma rede de redes em escala mundial de milhões de

computadores. Ao contrário do que se pensa comumente, Internet não é sinônimo de World Wide Web. Esta é parte daquela, sendo a World Wide Web, que utiliza hipermídia em sua formação

básica, um dos muitos serviços oferecidos na Internet. A Web é um sistema de informação muito mais recente que emprega a Internet como meio de transmissão.

(6)

Conceitos

HTTP - Significa HyperText Transfer Protocol (Protocolo de

Transferência de Hipertexto) protocolo é o conjunto de regras que permite a transferência de informações na Web e permite que os autores de páginas de hipertextos incluam comandos que

possibilitem saltos para recursos e outros documentos disponíveis em sistemas remotos, de forma transparente para o usuário.

(7)

Conceitos

Browser - Um navegador (também conhecido como web browser

ou simplesmente browser) é um programa que habilita seus

usuários a interagirem com documentos HTML hospedados em um servidor Web. É o tipo mais comumente usado de agente. A maior coleção interligada de documentos hipertexto, dos quais os documentos HTML são uma substancial fração, é conhecida com a World Wide Web.

(8)

Conceitos

URL - Um Universal Resource Locator (URL) é o endereço de

um recurso disponível na Internet.Um URL tem a seguinte estrutura: protocolo://máquina/diretório/arquivo ou protocolo: //endereço:porta/diretório/arquivo. O protocolo poderá ser ftp, entre outros. A máquina designa o servidor que disponibiliza o documento ou recurso designado.

(9)

Conceitos

HTML - A sigla HTML deriva da expressão Hyper Text Markup Language. Trata-se de uma linguagem de marcação utilizada para produzir páginas na Internet. Esses códigos podem ser

interpretados pelos browsers para exibir as páginas da World Wide Web. http://pt.wikipedia.org/wiki/HTML

(10)

Conceitos

TAG - São estruturas de marcação que consistem em breves instruções, tendo uma marca de início e outra de fim. Há uma tendência nos dias atuais para se usar as tags apenas como

delimitadores de estilo e/ou conteúdo, tanto em HTML quanto em XML.

(11)

Estrutura básica de uma página HTML

Dividido em: Cabeçalho: <head></head> Corpo da página <body></body> Tudo dentro das tags

(13)

Estrutura básica de uma página HTML

<html> <head> <title>Título da página</title> </head> <body> Corpo da página </body> </html>

(14)

Tags Meta

deve constar no cabeçalho da páguna HTML entre <head></head>

(15)

Tags Meta

Exemplos de tags meta:

(16)

Comentário em HTML

Dentro da página html o que estiver entre  estará comentado, exemplo:

(17)

Corpo da página HTML

<body></body> Atributo: Bgcolor="cor" Exemplo: <html> <head><title>Teste</title></head> <body bgcolor="#0000ff">

Com Texto </body>

(18)

Cores em HTML

1. Em Inglês, exemplo:

red, blue, green, black

2. Em Hexadecimal, no padrão RGB, exemplos: Vermelho: #ff0000 Verde: #00ff00 Azul: #0000ff Branco: #ffffff Preto: #000000 Cinza: #cccccc

(19)

Quebra de linha

<br> Exemplo: Linha1<br>Linha2 Saída: Linha1 Linha2

(20)

Caracteres especiais

Espaço em branco   < < > > Exemplo: <body> <tag> </body> Saída <tag>

(21)

Título de Texto

O número representa a prioridade ou importância do título <h1></h1>, <h2></h2>, ..., <h6></h6>

Atributo:

align="left" / "center" / "right" Exemplo:

(22)

Parágrafo

<p></p> Atributo

align="left" / "center" / "right" Exemplo:

<p> Parágrafo alinhado à esquerda</p>

<p align="center"> Parágrafo alinhado ao centro <br> com quebra de linha</p>

(23)

Linha Horizontal

<hr>

Atributos:

align="left" / "center" / "right"

size="número", espessura da linha

width="número" / "%número", largura da linha Exemplo:

(24)

Formatação de texto - Font

Tag depreciada, não se usa mais. Atributos:

size="1"/ "2" ... "7" face="nome da fonte" color="cor"

(25)

Formatação de texto - Span

Um substituo da <font>

Exemplos de utilização com style: style="color: cor"

style="font-size:tamanho"

style="font-family: Nome_da_fonte" Exemplo completo:

<span style="color: #0000ff; font-size: 18pt; font-family: arial" >Texto Formatado</span>

Saída:

(26)

Formatação de texto

<strong></strong>, <b></b> Negrito <em></em>, <i></i> Itálico <sup></sup> Texto sobrescrito <sub></sub> Texto subscrito <pre></pre> Texto pré-formatado ou mono espaçado <blockquote> </blockquote> Gera o efeito de tabulação

(27)

Bloco de texto - Div

<div></div> Atributos:

align = "left" / "center" / "right" style

Exemplo:

<div style="border: 1px solid #cccccc;" align="center">Bloco de texto<br> com borda</div>

Saída:

Bloco de texto com borda

(28)

Listas

De definição; Não ordenadas; Ordenadas.

(29)

Listas - Definição

<dl></dl>, tag para lista de definição <dt></dt>, termo da lista

(30)

Listas - Definição - Exemplo

<dl>

<dd>Protocolo de transferência de hipertexto</dd> <dt>FTP</dt>

<dd>Protocolo de transferência de arquivo</dd> </dl>

Saída

HTTP

Protocolo de transferência de hipertexto FTP

(31)

Listas - Não ordenadas

<ul></ul>, tags para listas não ordenadas <li></li>, item para lista

Atributos para <ul> e <li>

type="disc" / "circle" / "square" Exemplo <ul> <li>Tag</li> <li type="circle">Atributo</li> <li type="square">Valor</li> </ul>

(32)

Listas - Ordenadas

<ol></ol>, tags para listas ordenadas <li></li>, item para lista

Atributos para <ol> e <li>

type="1" / "I" / "i" / "A"/ "a" Atributo para <ol>

start="número" Exemplo:

<ol start="5" type="A"> <li>Entrada</li>

<li>Processamento</li> <li>Saída</li>

(33)

Links e âncoras

<a></a> Atributos:

href="endereço" / "url" / "arquivo" title="texto"

target="_blank" / "_self" / "_top" / "janela" name="nome da âncora"

(34)

Links e âncoras

Exemplos de links:

<a href="http://www.uninove.br" target="_blank" title="Uni9" >Uninove</a>

<a href="mailto:hebertphp@gmail.com" title="E-mail" >hebertphp@gmail.com</a>

(35)

Links e âncoras

Exemplo de âncora:

<a name="topo"></a> <p>Texto gigante...</p>

(36)

Imagem

<img>

Atributos:

src="endereço_da_imagem" alt="texto"

hspace="número", espaço horizontal vspace="número", espaço vertical

border="número", espessura da borda

align="top" / "middle" / "bottom" / "left" / "right" width="número", largura da imagem

(37)

Imagem

Exemplo de Imagem

<img src="img/imagem.gif" alt="Imagem"> Link com Imagem

(38)

Imagem

Centralizar uma imagem na horizontal Exemplos:

ou

ou

(39)

Imagem - Exemplo 1

Exemplo de Imagem

<img src="img/imagem.gif" alt="Imagem"> Link com Imagem

(40)

Imagem - Exemplo 2

<img src="img/firefox_words.png" alt="Firefox" height="75" border="1" align="top">align=top<br>outra linha, abaixo da imagem

<hr>

<img src="img/firefox_words.png" alt="Firefox" height="75" border="1" align="middle">align=middle<br>outra linha, abaixo da imagem

<hr>

<img src="img/firefox_words.png" alt="Firefox" height="75" border=" 1" align="bottom">align=bottom<br>outra linha, abaixo da imagem <hr>

<img src="img/firefox_words.png" alt="Firefox" height="75" border=" 1" align="left">align=left<br>outra linha, ao lado da imagem

<img src="img/firefox_words.png" alt="Firefox" height="75" border=" 1" align="right">align=right<br>outra linha, ao lado da imagem

(41)

Imagem - Exemplo 2

- Saída

(42)

Tabela

Tag <table></table> Atributos:

bgcolor ="cor", cor de fundo

align = "left" / "center" / "right", alinha a tabela no browser width = "número" / "porcentagem", largura

height = "número", altura

border = "número", espessura

cellpadding = "número" - dist. entre o conteúdo e a celula cellspacing ="número", espaçamento entre as células

(43)

Tabela

Tag <tr></tr>, representa a linha da tabela Atributos:

bgcolor ="cor", cor de fundo da linha

align = "left" / "center" / "right", alinha o conteúdo de todas as células na linha da tabela

valign = "top" / "middle" / "bottom" , alinhamento vertical do conteúdo de todas as células na linha da tabela

(44)

Tabela

Tag <td></td> ou <th></th>, representam as células da tabela Atributos:

align = "left" / "center" / "right", alinha o conteúdo de todas as células na linha da tabela

valign = "top" / "middle" / "bottom" , alinhamento vertical do conteúdo de todas as células na linha da tabela

width = "número" / "porcentagem", largura da célula height = "número", altura da célula

colspan = "número", mesclar células na horizontal rowspan = "número", mesclar células na vertical

(45)

Tabela - Exemplo 1

<table align="center" border="1" width="400" cellspacing="0" cellpadding="0"> <tr bgcolor="#cccccc"> <th>Nome</th> <th>RA</th> <th>Nota</th> </tr> <tr align="center"> <td >Cleomilda</td> <td>123456789</td> <td style="color:#ff0000">3.0</td> </tr> </table>

(46)

(47)

Tabela - Exemplo2 - Código

<table width="500" align="center" border="1"> <tr> <th bgcolor="#00ff00" width="150">Coluna1</th> <th width="350">Coluna2</th> </tr> <tr align="center"> <td>L2C1</td> <td>L2C2</td> </tr> <tr bgcolor="#ccccff"> <td>L3C1</td> <td align="right">L3C2</td> </tr> </table>

(48)

(49)

Tabela - Exemplo3 - Código

(50)

(51)

Tabela - Exemplo4 - Código

(52)

(53)

Iframe

src="endereço_da_página" name="nome_da_janela"

width="número", largura do iframe height="número", altura do iframe frameborder="0" / "1"

(54)

Iframe - Exemplo

<a href="http://www.google.com" target="j1">Google</a><br> </td>

</td> </tr>

(55)

(56)

Formulário - Form

<form></form> Atributos

name="texto"

method ="get" / "post" action="endereço"

target="alvo" Exemplo:

(57)

Formulário - Campo Texto - Text

<input type="text"> Atributos: name="nome_do_campo" size="número" maxlenght ="número" id="texto" readonly disabled value="valor_do_campo" Exemplo:

Login <input type= "text" name="login" id="login" size="31" maxlength="30">

(58)

Formulário - Campo Senha - Password

<input type="password"> Atributos: name="nome_do_campo" size="número" maxlenght ="número" id="texto" readonly disabled value="valor_do_campo" Exemplo:

Senha <input type= "password" name="senha" id="senha" size="21" maxlength="31">

(59)

Formulário - Campo Oculto - Hidden

<input type="hidden"> Atributos: name="nome_do_campo" id="texto" value="valor_do_campo" Exemplo:

(60)

Formulário- Múltiplas Opções - Checkbox

<input type="checkbox"> Atributos: name ="nome_do_campo" value ="valor_do_campo" checked id ="texto" readonly disabled Exemplo:

<input type="checkbox" name="veja" value="Veja"> Veja<br> <input type="checkbox" name="exame" value="exame" checked> Exame<br>

(61)

Formulário- Opção Simples - Radio

<input type="radio"> Atributos: name ="nome_do_campo" value ="valor_do_campo" checked id ="texto" readonly disabled Exemplo:

<input type="radio" name="so" value="Windows"> Windows<br> <input type="radio" name="so" value="Linux" checked> Linux<br>

(62)

Formulário- Botão de Envio - Submit

<input type="submit"> Atributos: name ="nome_do_campo" value ="valor_do_campo" id ="texto" disabled Exemplo:

(63)

Formulário- Botão para Limpar (resetar)

<input type="reset"> Atributos: name ="nome_do_campo" value ="valor_do_campo" id ="texto" disabled Exemplo:

(64)

Formulário- Área de Texto

<textarea></textarea> Atributos: name ="nome_do_campo" id ="texto" rows="número" cols="número" readonly disabled Exemplo:

Observação: <textarea name="obs" rows="5" cols="40"> Digite </textarea>

(65)

Formulário- Lista de Seleção

<select></select> Atributos: name ="nome_do_campo" size="número" id ="texto" disabled multiple <option></option> Atributos: value="valor_da_opção" selected

(66)

Formulário- Lista de Seleção - Exemplo

UF <select name="uf">

<option value="">Selecione</option> <option value="RJ">RJ</option>

(67)

Formulário - Exemplo completo - 1

Login <input type= "text" name="login" id="login" size="31" maxlength="30"><br>

Senha <input type= "password" name="senha" id="senha" size="21" maxlength="31"><br>

(68)

Formulário - Exemplo completo - 2

<h3>Revistas</h3>

<input type="checkbox" name="exame" value="exame" checked> Exame<br>

<h3>Sistema Operacional</h3>

<input type="radio" name="so" value="Windows"> Windows<br> <input type="radio" name="so" value="Linux" checked> Linux<br>

(69)

Formulário - Exemplo completo - 3

UF <select name="uf">

<option value="">Selecione</option>

</select><br>

Observação: <textarea name="obs" rows="5" cols="40" >Digite</textarea><br>

(70)

(71)

Propriedades - CSS

color background-color font-size font-family border text-decoration width height