Módulo IV

HTML

Web

Objetivos

• Criação de páginas estáticas para web

• Para isso:

Ferramenta de programação: bloco de notas

prática: solução de exercícios

• Pré-requisitos:

Conhecimento básico de web

Estrutura Básica

Criar um arquivo com extensão .htm ou .html e abrir no browser

Estrutura Básica

Principais Tags

• center: centralizar <center></center>

• br: pular linha <br/>

• <div> e </div> – coloca o conteúdo, entre as tags, em um quadro. Funciona como parágrafo, mas não forma espaço entre eles

• <ul> e </ul> – inicia e finaliza uma lista de tópicos não ordenada – com o símbolo ponto (bullet) no início de cada linha

• <li> e </li> – inicia e finaliza cada linha de uma lista de tópicos ordenada e não ordenada

Principais Tags

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

• <u> e </u> – texto sublinhado

• <i> e </i> – texto em itálico

• _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 página

• <a> tag de criação de um link

• href = passando o endereço

• target="_blank"

Links

Links

Imagem como Link

Formulário

• Forma de envio dos dados digitados para o servidor

• post: forma de envio sem mostrar na barra de endereço, pode enviar uma quantidade ilimitada de caracteres

• get: mostra na barra, envia no máximo 255 caracteres

• action: ação que será executada ao dar um submit (envio)

Formulário

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"/>

Botões de Rádio - 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 Verificação - 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 /> Televisão

Lista de Seleção - 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 dentrodo textarea

</textarea>

Botão de Envio - submit

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

Referências

• http://pt-br.html.net/tutorials/html/

• http://www.icmc.usp.br/ensino/material/html/

• http://www.w3schools.com/html/default.asp

Créditos

• Esse material foi elaborado por:

● André Luiz Forchesattoo skype: andre_unoesco e-mail: andre.forchesatto@camtwo.com.bro twitter: @forchesatto

● Cristiano Agostio skype: cristiano.agostio e-mail: cristiano.agosti@camtwo.com.bro twitter: @agosti

Esse material pode ser publicamente distribuído, desde que seu conteúdo não seja alterado e que seus créditos sejam mantidos.

Ele não pode ser usado para ministrar qualquer outro curso, porém pode ser utilizado como referência e material de apoio.