html
DESCRIPTION
Explicação sobre HTMLTRANSCRIPT
![Page 1: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/1.jpg)
Módulo IV
HTML
Web
![Page 2: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/2.jpg)
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
![Page 3: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/3.jpg)
Estrutura Básica
Criar um arquivo com extensão .htm ou .html e abrir no browser
![Page 4: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/4.jpg)
Estrutura Básica
![Page 5: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/5.jpg)
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
![Page 6: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/6.jpg)
Principais Tags
• <b> e </b> ou <strong> e </strong> – texto em negrito
• <u> e </u> – texto sublinhado
• <i> e </i> – texto em itálico
• <sub> e </sub> – texto subscrito
• <sup> e </sup> – texto sobrescrito
• <strike> e </strike> – texto tachado
![Page 7: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/7.jpg)
Inserindo Imagem
<img src="logocamtwo.png">
![Page 8: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/8.jpg)
Tabelas
• <table border=1> indica a tabela, border é
o tamanho da borda
• <tr> indica uma linha
• <td> indica uma coluna
![Page 9: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/9.jpg)
Exemplo Tabelas
![Page 10: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/10.jpg)
Exemplo Tabelas
![Page 11: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/11.jpg)
Links
• link é um redirecionamento para outra página
• <a> tag de criação de um link
• href = passando o endereço
• target="_blank"
![Page 12: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/12.jpg)
Links
![Page 13: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/13.jpg)
Links
![Page 14: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/14.jpg)
Imagem como Link
![Page 15: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/15.jpg)
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)
![Page 16: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/16.jpg)
Formulário
![Page 17: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/17.jpg)
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"/>
![Page 18: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/18.jpg)
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
![Page 19: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/19.jpg)
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
![Page 20: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/20.jpg)
Lista de Seleção - listbox
<select name="cartoes" id="cartoes"> <option value="C">Credicard <option value="M">Mastercard <option value="V" selected>Visa</select>
![Page 21: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/21.jpg)
Área de Texto - textarea
<textarea rows=5 cols=40 name="descricao" id="descricao">
Esse texto aparece dentrodo textarea
</textarea>
![Page 22: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/22.jpg)
Botão de Envio - submit
<input type="submit" value="Confirma">
![Page 23: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/23.jpg)
Referências
• http://pt-br.html.net/tutorials/html/
• http://www.icmc.usp.br/ensino/material/html/
• http://www.w3schools.com/html/default.asp
![Page 24: HTML](https://reader033.vdocuments.net/reader033/viewer/2022052308/56d6c0761a28ab30169a7f11/html5/thumbnails/24.jpg)
Créditos
• Esse material foi elaborado por:
● André Luiz Forchesattoo skype: andre_unoesco e-mail: [email protected] twitter: @forchesatto
● Cristiano Agostio skype: cristiano.agostio e-mail: [email protected] 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.