SlideShare une entreprise Scribd logo
1  sur  20
1ª Aula PHP

 Revisão HTML
Introdução
• HTML – HyperText Markup Language(Linguagem de formatação
  de hipertexto), é uma linguagem de formatação.

• Todo documento HTML é composto de Tags. Este é o nome dados
  aos comandos HTML.

Exemplo:

<xxxx>
</xxxx>
•   Para iniciar a escrever HTML sempre começamos pela estrutura básica da
    página, que é a seguinte:


<html>
<head>
<title>Titulo da página</title>
<meta http-equiv="content-language" content="pt-br" />
<meta name="language" content="pt-br" />
<meta name="keywords" content="minhas, palavras, chave, entram, aqui" />

<link type="text/css" rel="stylesheet" href="estilo.css" />
<script src="funcoes.js" type="text/javascript" language="javascript"></script>

</head>
<body>

Conteudo da página

</body>
</html>
Tags de Título
• Exemplo:

<H1> Este é o primeiro nível </H1>
<H2> Este é o segundo nível </H2>
<H3> Este é o terceiro nível </H3>
<H4> Este é o quarto nível </H4>
<H5> Este é o quinto nível </H5>
<H6> Este é o sexto nível </H6>
Fontes
•   Usar fontes mais comuns;

•   Usamos a tag <font>, e o fechamento </font>;

•   Dentro desta tag, na de abertura somente, inserimos os atributos, que
    servem para reforçar um comando. Eles são separados uns dos outros por
    um espaço, e seus valores devem estar entre aspas. Veja um exemplo:
    <font face="arial" size="4" color="#ff0000">Olá pessoal</font>

•   Podem ser utilizados o nome em inglês para as cores mais comuns (como
    'red' para vermelho), ou o código hexadecimal dela. Exemplo:
    Preto: #000000
    Vermelho: #FF0000
    Verde: #00FF00
Formatação de Texto
• <strong> Texto </strong> ou <b> Texto </b> -
  Texto fica em Negrito.

• <u> Texto </u> - Texto fica Sublinhado.

• <em> Texto </em> ou <i> Texto </i> - Texto fica
  em Itálico.

• <center> Texto </center> Texto fica
  centralizado.
Páragrafos
• Basta envolver o texto em <p></p> para indicar que ele pertence a
  uma paragrafo.

  Exemplo:

  <p>Texto do paragrafo 1</p>
  <p>Texto do paragrafo 2</p>
Quebras de Linha
• Caso você queira simplesmente mudar de
  linha, ao invés de mudar de parágrafo,
  coloque a tag <br />.
Listas
• Você pode usar listas para criar menus
  simples ou organizar temas e textos em
  sua página.
• O HTML permite definir duas categorias
  distintas de listas: Ordenadas e Não
  Ordenada.
Lista Ordenada
Exemplo:

<OL>
<LI> Primeiro item de uma lista ordenada</LI>
<LI> Segundo item de uma lista ordenada</LI>
<LI> Terceiro item de uma lista ordenada</LI>
</OL>

Produz o seguinte resultado:

1. Primeiro item de uma lista ordenada
2. Segundo item de uma lista ordenada
3. Terceiro item de uma lista ordenada
Lista Não Ordenada
Exemplo:

<UL>
<LI> Primeiro item de uma lista não ordenada</LI>
<LI> Segundo item de uma lista não ordenada</LI>
<LI> Terceiro item de uma lista não ordenada</LI>
</UL>

Produz o seguinte resultado:

> Primeiro item de uma lista não ordenada
> Segundo item de uma lista não ordenada
> Terceiro item de uma lista não ordenada
Alinhamentos
• Os atributos de alinhamento são:

- Left: Alinhamento à esquerda
- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado
Imagens
A tag para inserir uma imagem em sua
  página é a seguinte:

<img src="nome do arquivo de imagem que vai aparecer" alt="Texto
   Alternativo para o caso da imagem não ser carregada"
   border="espessura da borda da imagem" />
Links
• Links são os pontos clicáveis do
  documento HTML que levam a qualquer
  outro documento da sua página ou site na
  Internet.
  Exemplo:
 <a href="nome do lugar a ser levado" title="Titulo do Link">descrição</a>
Linhas
Com as linhas é possível que você crie separações entre
  textos e imagens. É muito simples criar uma linha. Basta
  incluir a tag <hr />.

Ela possui os seguintes atributos:
- Width (largura)
- Align
- Color
- Noshade (Define se a linha vai ter um efeito
   tridimensional. Se você não incluir este atributo, a linha
   terá o efeito tridimensional.)
Formulários
• Os formulários são áreas reservadas para a entrada de dados,
  onde o internauta pode preencher livros de visitas, pedidos de
  compra, cadastros, enfim, várias possibilidades exsitem para o uso
  de formulários.

  Exemplo:
  <form name="nome_do_formulario" action="url" method="método">
• Atributos que podem ser usados com a
  tag <form>:


• Name;
• Action;
• Method;
• Objetos de controle do formulário:
- Input:
   Indica um tipo de objeto inserido no formulário, TYPE é o seu parâmetro
   principal.
   Tipos suportados pelo parâmetro TYPE.

   Text;
   Checkbox;
   Radio;
   Reset;
   Submit;
   Password;

- Além de INPUT, temos também o objeto <textarea>...</textarea>. Ele é
   usado para campos onde os textos serão longos.

- Finalizando temos um objeto chamado <select>, que assim como o
   <textarea>, não utiliza a marcação padrão <input type> para campos de
   formulário.
Tabelas
• As tabelas são definidas com a tag <table>.
• Use <tr> para uma nova linha;
• Use <td> para uma nova célula;
  Exemplo:

  <table border="1">
  <tr>
  <td>linha 1, célula 1</td>
  <td>linha 1, célula 2</td>
  </tr>
  <tr>
  <td>linha 2, célula 1</td>
  <td>linha 2, célula 2</td>
  </tr>
  </table>
HTML e os caracteres especiais
 A linguagem HTML permite que caracteres especiais sejam
 representados por seqüências de escape, indicadas por três partes:
 um & inicial, um número ou cadeia de caracteres correspondente
 ao caractere desejado, e um ; final. Isso é muito útil para quando
 você tiver problemas de codificação de texto em sua página.

 Exemplos:
 Entidade Caractere

 &aacute;    á
 &acirc;     â
 &agrave;    à
 &atilde;    ã

Contenu connexe

Tendances (20)

Criação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTMLCriação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTML
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Html
HtmlHtml
Html
 
HTML
HTML HTML
HTML
 
Como usar o word pad
Como usar o word padComo usar o word pad
Como usar o word pad
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
Html básico
Html básicoHtml básico
Html básico
 
Formulários em html
Formulários em htmlFormulários em html
Formulários em html
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Exerciciohtml2
Exerciciohtml2Exerciciohtml2
Exerciciohtml2
 
Html
HtmlHtml
Html
 
Apostila De Html
Apostila De HtmlApostila De Html
Apostila De Html
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
HTML introdução
HTML  introduçãoHTML  introdução
HTML introdução
 
html
html html
html
 
Html - capitulo 05
Html - capitulo 05Html - capitulo 05
Html - capitulo 05
 
Dream 06
Dream 06Dream 06
Dream 06
 
HTML
HTMLHTML
HTML
 
Html 01
Html 01Html 01
Html 01
 
4 si introdução ao desenvolvimento web - formulários (pt 1)
4   si introdução ao desenvolvimento web - formulários (pt 1)4   si introdução ao desenvolvimento web - formulários (pt 1)
4 si introdução ao desenvolvimento web - formulários (pt 1)
 

Similaire à 1ª aula php

Portifolio net
Portifolio netPortifolio net
Portifolio netlaerciopds
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
Tecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesTecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesRangel Javier
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptxssusercbd9c4
 
Manual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfManual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfElsioDeMelo
 
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML -  Listas, Estilos, Tabelas, Div, Span, FormulárioHTML -  Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Listas, Estilos, Tabelas, Div, Span, FormulárioArthur Emanuel
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLDra. Camila Hamdan
 
Introdução à XML - Serviço de Biblioteca da EEFE-USP
Introdução à XML - Serviço de Biblioteca da EEFE-USPIntrodução à XML - Serviço de Biblioteca da EEFE-USP
Introdução à XML - Serviço de Biblioteca da EEFE-USPUniversidade de São Paulo
 

Similaire à 1ª aula php (20)

O que é html
O que é htmlO que é html
O que é html
 
Portifolio net
Portifolio netPortifolio net
Portifolio net
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Tutorial html
Tutorial htmlTutorial html
Tutorial html
 
Apostila html
Apostila htmlApostila html
Apostila html
 
Tecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesTecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing Pages
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
USAR.pptx
USAR.pptxUSAR.pptx
USAR.pptx
 
Php Básico - Parte 2
Php Básico - Parte 2Php Básico - Parte 2
Php Básico - Parte 2
 
Manual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfManual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdf
 
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML -  Listas, Estilos, Tabelas, Div, Span, FormulárioHTML -  Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
HTML - Guia 1 e 2
HTML - Guia 1 e 2HTML - Guia 1 e 2
HTML - Guia 1 e 2
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Introdução à XML - Serviço de Biblioteca da EEFE-USP
Introdução à XML - Serviço de Biblioteca da EEFE-USPIntrodução à XML - Serviço de Biblioteca da EEFE-USP
Introdução à XML - Serviço de Biblioteca da EEFE-USP
 
Aula 2 - Conceitos básicos
Aula 2 - Conceitos básicosAula 2 - Conceitos básicos
Aula 2 - Conceitos básicos
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Apostila de html
Apostila de htmlApostila de html
Apostila de html
 
Minicurso HTML
Minicurso HTMLMinicurso HTML
Minicurso HTML
 

1ª aula php

  • 1. 1ª Aula PHP Revisão HTML
  • 2. Introdução • HTML – HyperText Markup Language(Linguagem de formatação de hipertexto), é uma linguagem de formatação. • Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Exemplo: <xxxx> </xxxx>
  • 3. Para iniciar a escrever HTML sempre começamos pela estrutura básica da página, que é a seguinte: <html> <head> <title>Titulo da página</title> <meta http-equiv="content-language" content="pt-br" /> <meta name="language" content="pt-br" /> <meta name="keywords" content="minhas, palavras, chave, entram, aqui" /> <link type="text/css" rel="stylesheet" href="estilo.css" /> <script src="funcoes.js" type="text/javascript" language="javascript"></script> </head> <body> Conteudo da página </body> </html>
  • 4. Tags de Título • Exemplo: <H1> Este é o primeiro nível </H1> <H2> Este é o segundo nível </H2> <H3> Este é o terceiro nível </H3> <H4> Este é o quarto nível </H4> <H5> Este é o quinto nível </H5> <H6> Este é o sexto nível </H6>
  • 5. Fontes • Usar fontes mais comuns; • Usamos a tag <font>, e o fechamento </font>; • Dentro desta tag, na de abertura somente, inserimos os atributos, que servem para reforçar um comando. Eles são separados uns dos outros por um espaço, e seus valores devem estar entre aspas. Veja um exemplo: <font face="arial" size="4" color="#ff0000">Olá pessoal</font> • Podem ser utilizados o nome em inglês para as cores mais comuns (como 'red' para vermelho), ou o código hexadecimal dela. Exemplo: Preto: #000000 Vermelho: #FF0000 Verde: #00FF00
  • 6. Formatação de Texto • <strong> Texto </strong> ou <b> Texto </b> - Texto fica em Negrito. • <u> Texto </u> - Texto fica Sublinhado. • <em> Texto </em> ou <i> Texto </i> - Texto fica em Itálico. • <center> Texto </center> Texto fica centralizado.
  • 7. Páragrafos • Basta envolver o texto em <p></p> para indicar que ele pertence a uma paragrafo. Exemplo: <p>Texto do paragrafo 1</p> <p>Texto do paragrafo 2</p>
  • 8. Quebras de Linha • Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag <br />.
  • 9. Listas • Você pode usar listas para criar menus simples ou organizar temas e textos em sua página. • O HTML permite definir duas categorias distintas de listas: Ordenadas e Não Ordenada.
  • 10. Lista Ordenada Exemplo: <OL> <LI> Primeiro item de uma lista ordenada</LI> <LI> Segundo item de uma lista ordenada</LI> <LI> Terceiro item de uma lista ordenada</LI> </OL> Produz o seguinte resultado: 1. Primeiro item de uma lista ordenada 2. Segundo item de uma lista ordenada 3. Terceiro item de uma lista ordenada
  • 11. Lista Não Ordenada Exemplo: <UL> <LI> Primeiro item de uma lista não ordenada</LI> <LI> Segundo item de uma lista não ordenada</LI> <LI> Terceiro item de uma lista não ordenada</LI> </UL> Produz o seguinte resultado: > Primeiro item de uma lista não ordenada > Segundo item de uma lista não ordenada > Terceiro item de uma lista não ordenada
  • 12. Alinhamentos • Os atributos de alinhamento são: - Left: Alinhamento à esquerda - Rigth: Alinhamento à direita - Center: Centralizado - Justify: Texto justificado
  • 13. Imagens A tag para inserir uma imagem em sua página é a seguinte: <img src="nome do arquivo de imagem que vai aparecer" alt="Texto Alternativo para o caso da imagem não ser carregada" border="espessura da borda da imagem" />
  • 14. Links • Links são os pontos clicáveis do documento HTML que levam a qualquer outro documento da sua página ou site na Internet. Exemplo: <a href="nome do lugar a ser levado" title="Titulo do Link">descrição</a>
  • 15. Linhas Com as linhas é possível que você crie separações entre textos e imagens. É muito simples criar uma linha. Basta incluir a tag <hr />. Ela possui os seguintes atributos: - Width (largura) - Align - Color - Noshade (Define se a linha vai ter um efeito tridimensional. Se você não incluir este atributo, a linha terá o efeito tridimensional.)
  • 16. Formulários • Os formulários são áreas reservadas para a entrada de dados, onde o internauta pode preencher livros de visitas, pedidos de compra, cadastros, enfim, várias possibilidades exsitem para o uso de formulários. Exemplo: <form name="nome_do_formulario" action="url" method="método">
  • 17. • Atributos que podem ser usados com a tag <form>: • Name; • Action; • Method;
  • 18. • Objetos de controle do formulário: - Input: Indica um tipo de objeto inserido no formulário, TYPE é o seu parâmetro principal. Tipos suportados pelo parâmetro TYPE. Text; Checkbox; Radio; Reset; Submit; Password; - Além de INPUT, temos também o objeto <textarea>...</textarea>. Ele é usado para campos onde os textos serão longos. - Finalizando temos um objeto chamado <select>, que assim como o <textarea>, não utiliza a marcação padrão <input type> para campos de formulário.
  • 19. Tabelas • As tabelas são definidas com a tag <table>. • Use <tr> para uma nova linha; • Use <td> para uma nova célula; Exemplo: <table border="1"> <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </table>
  • 20. HTML e os caracteres especiais A linguagem HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere desejado, e um ; final. Isso é muito útil para quando você tiver problemas de codificação de texto em sua página. Exemplos: Entidade Caractere &aacute; á &acirc; â &agrave; à &atilde; ã