curso desenvolvimento web com php - html

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 protected]”> 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?

[email protected]

Bibliografia

[email protected] [email protected]

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>

curso desenvolvimento web com php - html

Technology