Mdulo IV

HTML
Web

Objetivos

Criao de pginas estticas para web

Pr-requisitos:
Conhecimento bsico de web

Para isso:
Ferramenta de programao: bloco de notas
prtica: soluo de exerccios

Estrutura Bsica

Criar um arquivo com extenso .htm ou .html e abrir no browser

Estrutura Bsica

Principais Tags

center: centralizar <center></center>

<ul> e </ul> inicia e finaliza uma lista de tpicos no ordenada

com o smbolo ponto (bullet) no incio de cada linha

<li> e </li> inicia e finaliza cada linha de uma lista de tpicos

ordenada e no ordenada

br: pular linha <br/>

<div> e </div> coloca o contedo, entre as tags, em um quadro.
Funciona como pargrafo, mas no forma espao entre eles

Principais Tags

<b> e </b> ou <strong> e </strong> texto em negrito

<u> e </u> texto sublinhado
<i> e </i> texto em itlico
_e texto subscrito
^e texto sobrescrito
<strike> e </strike> texto tachado

Inserindo Imagem
<img src="logocamtwo.png">

Tabelas

<table border=1> indica a tabela, border

o tamanho da borda

<tr> indica uma linha

<td> indica uma coluna

Exemplo Tabelas

Exemplo Tabelas

Links

link um redirecionamento para outra

pgina

<a> tag de criao de um link

href = passando o endereo

target="_blank"

Links

Links

Imagem como Link

Formulrio

Forma de envio dos dados digitados para o servidor

post: forma de envio sem mostrar na barra de

endereo, pode enviar uma quantidade ilimitada de
caracteres

get: mostra na barra, envia no mximo 255

caracteres

action: ao que ser executada ao dar um submit

(envio)

Formulrio

Caixa de Texto - input text

<br/>Digite seu nome:
<br/><input type="text" size=20 name="nome" id="nome"/>
<br/>Digite sua idade:
<br/><input type="text" size=8 name="idade" id="idade"/>

Botes de Rdio - radio

<br/><input name="sexo" type="radio"
value="M" id=sexo checked /> Masculino
<br/><input name="sexo" type="radio"
value="F" id=sexo/> Feminino

Caixa de Verificao - checkbox

<br/><input name="divulgacao" type="checkbox
value="I" id=divulgacao checked /> Internet
<br/><input name="divulgacao" type="checkbox
value="J" id=divulgacao /> Jornal
<br/><input name="divulgacao" type="checkbox
value="T" id=divulgacao checked /> Televiso

Lista de Seleo - listbox

<select name="cartoes" id="cartoes">
<option value="C">Credicard
<option value="M">Mastercard
<option value="V" selected>Visa
</select>

rea de Texto - textarea

<textarea rows=5 cols=40
name="descricao" id="descricao">
Esse texto aparece dentro
do textarea
</textarea>

Boto de Envio - submit

<input type="submit" value="Confirma">

Referncias

http://pt-br.html.net/tutorials/html/
http://www.icmc.usp.br/ensino/material/html/
http://www.w3schools.com/html/default.asp

Crditos

Esse material foi elaborado por:

Andr Luiz Forchesatto

o skype: andre_unoesc
o e-mail: andre.forchesatto@camtwo.com.br
o twitter: @forchesatto
Cristiano Agosti
o skype: cristiano.agosti
o e-mail: cristiano.agosti@camtwo.com.br
o twitter: @agosti
Esse material pode ser publicamente distribudo, desde que seu contedo no seja alterado e
que seus crditos sejam mantidos.
Ele no pode ser usado para ministrar qualquer outro curso,
porm pode ser utilizado como referncia e material de apoio.