curso php básico -...

33
Curso PHP Básico Jairo Charnoski do Nascimento

Upload: lamkhue

Post on 19-Oct-2018

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Curso PHP Básico

Jairo Charnoski do Nascimento

Page 2: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Ferramentas necessárias

Introdução HTML

HTML? Tags

Construindo seu primeiro website

Observações sobre a estrutura

Mais tags

Atributos

Agenda

Page 3: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Cores

Links

Imagens

Tabelas

Website

Agenda

Page 4: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Aprender HTML

Desenvolver um website

Metas

Page 5: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Navegador Editor de texto simples

Servidor web Apache

Servidor PHP

Gerenciador de banco de dados MySQL

Não é preciso estar online!

Ferramentas necessárias

Page 6: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Inventado em 1990 por Tim Berners-Lee. Troca de informações entre cientistas.

Pré-requisito para a construção de websites.

Introdução HTML

Page 7: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Hyper – oposto de linear.

Text – texto.

Mark-up – escrita do texto.

Language.

HTML?

Page 8: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

É simples e lógico.

O navegador lê html de cima para baixo, da esquerda para a direita.

O navegador conversa com o documento .html através de tags.

HTML

Page 9: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

São rotulos!

<comando></comando>

<comando />

Aprender HTML é aprender a usar diferentes tags!

<html>Tags</html>

Page 10: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

As tags HTML não são case-sensitive. <ComaNdo></comanDO>

Padrão: minúscula

<comando></comando>

Elas devem estar em um documento HTML.

Como e onde?

Page 11: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<b>Negrito</b>

Exemplos de tags

Page 12: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Usados para títulos, subtítulos, etc...

<h1>Cabeçalho de maior nível</h1>

<h6>Cabeçalho de menor nível</h6>

Exemplos de tags

Page 13: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<html> informa ao navegador que é html <head> informações sobre o documento

</head>

<body> conteúdo do documento

</body>

</html>

Construindo seu primeiro website

Page 14: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Observe bem a estrutura do código ◦Linhas diferentes

◦Indentação

Um código bem estruturado é mais fácil de se manter.

Observações sobre a estrutura

Page 15: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<title>Curso básico de PHP - Itatechjr</title> - título que aparece na barra do navegador, deve ser inserido no head.

Um dos itens de maior peso nos mecanismos de busca é o título do seu website!

<p>Bem vindo ao curso básico de PHP!!!</p> - parágrafo.

Conteúdo do seu primeiro website

Page 16: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Vocês já sabem utilizar: ◦<p></p>

◦<b></b>

◦<h1></h1>

◦... ... ◦<h6></h6>

Adicionem essas tags no seu website, faça-o da sua maneira.

Continuando o seu website

Page 17: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<i>Itálico</i>

<small>letras pequenas</small>

<br /> - quebra de linha

<hr /> - régua horizontal

<!-- Comentário -->

Vamos ver mais tags!

Page 18: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<ul> ◦<li>Um item</li>

◦<li>Outro item</li>

</ul>

<ol> ◦<li>Primeiro item</li>

◦<li>Segundo item</li>

</ol>

E mais tags!

Page 19: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<BIG> TEXTO EM FONTE MAIOR </BIG>

<BLINK> EXIBE TEXTO PISCANDO </BLINK>

<U>EXIBE O TEXTO SUBLINHADO </U>

<STRIKE>TEXTO RISCADO </STRIKE>

<SUB>TEXTO EM SUBSCRITO </SUB>

<SUP>TEXTO SOBRESCRITO </SUP>

Page 20: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

O uso de mais de uma tag é permitido.

Respeitando o aninhamento.

<b><i>Texto</i></b>

Uso de várias de tags simultaneamente

Page 21: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Tags podem ter atributos específicos.

<body style=“background-color:#ff0000;”>

Texto com plano de fundo

</body>

O atributo style adiciona estilização e layout ao seu website.

Atributos

Page 22: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Número hexadecimal (HEX)

Cada cor é representada por um (HEX): ◦Branco #ffffff ◦Preto #000000

◦Azul #0000ff ◦Verde #00ff00

#ff0000 ???????

Page 23: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Formato #(Red)(Green)(Blue)

Existem mais de 1000 códigos HEX

É dever de todo desenvolvedor web saber de todas as cores em HEX!

Mais sobre cores!

Page 24: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<a href=“http://endereço”>O texto do link</a>

Na mesma pasta: <a href=“pagina2.html”>Página Dois</a>

Em um subdiretório: <a href=“subdiretorio/ pagina2.html”>Página Dois</a>

Links

Page 25: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Num diretório pai: <a href=“../ pagina2.html”>Página Dois</a>

Para subir mais ainda basta adicionar ../../... Ou utilizar o endereço completo do arquivo.

Links

Page 26: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Sumário: <a href=#cabecalho1”>Cabeçalho 1</a>

<a href=#cabecalho2”>Cabeçalho 2</a>

Contéudo: <h1 id=“cabecalho1”>Cabeçalho 1</h1>

<h1 id=“cabecalho2”>Cabeçalho 2</h1>

Links internos

Page 27: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<img src=“imagem.jpg” alt=“texto alternativo” title=“texto que aparece ao passar o mouse” width=“largura” height=“altura” />

O navegador reconhece 3 tipos de imagem: ◦GIF

◦JPG / JPEG

◦PNG

Inserindo imagens

Page 28: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

GIF são melhores para gráficos e desenhos; ◦256 cores; ◦Maior compressão; ◦Carregamento mais rápido;

JPEG para fotografias; ◦Milhões de cores; ◦Menor compressão; ◦Carregamento mais lento;

PNG o novato; ◦Milhões de cores; ◦Compressão efetiva;

Em geral

Page 29: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

São utilizadas para apresentar dados tabulares! Ohhhhhhhh

Tabelas

Page 30: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

<table> - começa a tabela

<tr> - Table Row ou linha da tabela <td>Célula 1</td> - Table Data ou dados da tabela

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

</table>

Estrutura

Page 31: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

border: define a espessura da borda de uma tabela; width: define a largura em pixels ou proporção (%); align: alinhamento horizontal (left, center ou right); valign: alinhamento vertical (top, middle ou bottom);

Atributos de uma tabela T_T

Page 32: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

colspan: quantida de colunas de uma célula

rowspan: quantidade de linhas de uma célula

Mais atributos de tablelas

Page 33: Curso PHP Básico - itatechjr.com.britatechjr.com.br/wp-content/uploads/2012/02/Curso-PHP-Básico-html.pdf · Curso básico de PHP - Itatechjr - título

Contruir

WebSite