curso desenvolvimento web com php - html
Post on 29-Jun-2015
3.226 Views
Preview:
DESCRIPTION
TRANSCRIPT
Desenvolvimento WEB com PHP
<html>
Quem sou eu?
WILLIAN MAGALHÃES
Bacharel em Sistemas de Informação(UNIPAR 2007)
Pós-graduado em Desenvolvimento de sistemas para WEB (UEM 2010)
Cronograma
1 aula - Introdução, Padrões WEB e HTML
1 aula - CSS e layouts
8 aulas - PHP (projeto completo)
Sequência das aulas
Rendimento da turma
Rápida
Introdução
Entendendo a WEB
Server sidePHP
MySQLApache
Client sideHTMLCSSJavaScript
Pensamento interessante...
Web Stadards
Web Standards
Conjunto de tecnologias criadas pelo W3C
HTML, XHTML, CSS, entre outras
Padronização na exibição (browsers)
Maior facilidade na manutenção
Ranking sites de busca (bem escrito)
Otimização de páginas web (performance)
Web Standards
Garantindo Acessibilidade e Portabilidade
Aplicações do tipo cross-browser
Estatísticas de browsers
Fonte: www.w3schools.com
HTML / XHTML
Conceitos básicos
HTML (Linguagem de Marcação de Hiper Texto)
documento de texto contendo tags de marcação que informam ao browser como exibir a página
XHTML (eXtensible Markup Language)
versão melhorada do HTML baseada na XMLsintaxe regular e previsível que facilita a leitura einterpretação por softwares (browsers)
Características da XHTML
Tags devem ser escritas em letras minúsculas
Tags devem ser aninhadas
Uso de Tags de fechamento obrigatório
Elementos vazios devem ser fechados
Valores dos atributos devem estar entre “aspas”
Estrutura do documento XHTML
Declaração que identifica um documento como XHTML DOCTYPE html
Um cabeçalho para o documento head
Um corpo para o documento body
Identificação do documento
DOCTYPE (Document Type Definition – DTD)
Identifica a versão do XHTML, indicando como o navegador interpretará
Possui três versões
Identificação do documento
XHTML 1.0 Transitional: constitui elementos HTML e atributos de apresentação (tanto CSS quanto elementos em desuso)
XHTML 1.0 Strict: separa a estrutura dos elementos da apresentação. Não permite atributos de apresentação nem elementos em desuso. Uso de folhas de estilo (CSS).
XHTML 1.0 Frameset: inclui os elementos HTML (Transitional), inclusive elementos que possibilitam o uso de frames.
Olá HTML
indentação / .HTM .HTML .XHTML
Formatação básica
Títulos
Parágrafos
Quebra de linha
Divisão de seções
<h1> Título </h1>
<p> Parágrafo </p>
<br />
<hr />
Listas
Ordenadas<ol> <li> Introdução </li> <li> Conceitos básicos </li> <li> Conceitos avançados </li></ol>
Listas
Não-ordenadas<ul> <li> Pentium 100MHz </li> <li> 8MB de Ram </li> <li> HD de 2GB </li></ul>
Listas
Definição<dl> <dt> Pentium 100MHz </dt> <dd> Processador fabricado pela empresa INTEL, componente responsável pelo processamento.
</dd></dl>
Imagens
Tag <img>
Atributos
<img src=“imagem.jpg” />
<img src=“imagem.jpg” alt=“foto linda” />
Hiperlinks
Entre páginas
Caminho absoluto / Caminho relativo
Atributo target
<a href=“pagina2.html”> Ir para página 2 </a>
<a href=“http://www.site.com/pasta/pagina.html”> ...<a href=“pasta/pagina.html”> ...
<a href=“pagina2.html” target=“_blank”> Página 2 </a>
Hiperlinks
Âncoras
E-mails
<a name=“topo”> Parte superior do documento </a><a href=“#topo”> Ir a parte superior </a>
<a href=“mailto:email@email.com”> E-Mail </a>
Tabelas
Estrutura básica<table> <tr> <th> Janeiro </th> <th> Fevereiro </th> </tr> <tr> <td> 10% </td> <td> 20% </td> </tr></table>
Tabelas
Mesclando células... <tr> <td colspan=“2”> Conteúdo </td> </tr>... <tr> <td rowpan=“2”> Conteúdo </td> </tr>...
Formulários
Estrutura básica<form method=“GET” action=“valida.html”> ... <input type=“submit” /></form>
Formulários
Campo de texto
Campo de senha
Caixa de seleção
Botões de opção
<input type=“text” />
<input type=“password” />
<input type=“checkbox” value=“valor” />
<input type=“radio” name=“sexo” value=“masc” /><input type=“radio” name=“sexo” value=“fem” />
Formulários
Listas ou menus
Campo de texto com várias linhas
<select size=“1”> <option value=“azul”> Azul </option> <option value=“verde”> Verde </option></select>
<textarea rows=“5” cols=“50”> </textarea>
Formulários
Botão simples
Botão de reset
Botão enviar<input type=“submit” value=“enviar” />
<input type=“reset” value=“limpar” />
<input type=“button” value=“pressione aqui” />
Organizado os dados
Conjunto de campos
Rótulos
...<fieldset> <legend> Título </legend></fieldset>...
...<label for=“nomeCampo”> Rótulo </label>...
Entendendo os frames
Frames
Estrutura básica
Iframe
<frameset cols=“100px,*”> <frame src=“pagina1.html noresize /> <frame src=“pagina2.html name=“principal” /></frameset>
<iframe src=“www.google.com" width=“200" height="300"> <p> Seu Browser não suporta iframes </p></iframe>
Dúvidas? Sugestões?
will_magalhaes@yahoo.com.br
Bibliografia
alexandre.chokito@gmail.com will_magalhaes@yahoo.com.br
Livro Guia de consulta rápida HTML 4
Sites www.apostilando.com www.leandrovieira.com www.maujor.com www.w3schools.com
Slides disponíveis em:
www.slideshare.com/wmagalhaes
JBRIGADO!
</html>
top related