SlideShare uma empresa Scribd logo
1 de 4
Baixar para ler offline
RESUMO DO HTML
Select

<form>
<select name="carros">
<option selected value="volvo">Volvo     (Este é o valor default – selected)
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>


TextArea
<trextarea rows=”10” cols=”30”>Valor default que será exibido</textarea>

CheckBox
<form name="input" action="html_form_action.php" method="get">
I have a bike: <input type="checkbox" name="Bike" checked>
<br>
I have a car: <input type="checkbox" name="Car">
<br><input type="submit" value="Submit">
</form>


Radio
<form name="input" action="html_form_action.php" method="get">
Male: <input type="radio" name="Sex" value="Male" checked>
<br>
Female <input type="radio" name="Sex" value="Female">
<br><input type ="submit" value ="Submit Now!">
</form>

Botão do tipo Submit envia o conteúdo do form para o action automaticamente.
Caso precisemos enviar para o action através de uma função em JavaScript, devemos usar
um botão do tipo Button no lugar do tipo Submit.

Campo Desabilitado e Somente Leitura
<input type ="text" value ="Valor" disabled readonly>

MÉTODOS POST E GET (Formulários)
GET - Este método exibe os dados no Browser ao enviar ao Servidor
POST - Este método envia os dados para o servidor sem exibir no Browser (mais seguro,
pois não exibe os dados na URL do browser).




                                                                                   1
Optgroup – Agrupar grandes listas separando por grupos

<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>

<input type=”tipo” name=”nome” value=”valor default>

tipo:
hidden – campo oculto, normalmente para armazenar valores a serem transportados
password – campo tipo senha que mostra asteriscos ao digitar
reset – botão que limpa todos as campos ao ser clicado
file – tipo para upload

Formatação

<b>Negrito</b>
<s>Riscado</s>

<font size="3" color="red">
<FONT FACE = TipoDaFonte>Texto</FONT>
TipoDaFonte: times, arial, courier

<sub>subscrito</sub>

        sobrescrito
<sup>             </sup>

<h1> ... <h6> - Títulos
<h1 align=”center”>Título 1 Centralizado</h1>


<HR> traça uma linha horizontal


Imagem
<img src="angry.gif" alt="Angry" />
<img SRC="NomeImagem.Ext" ALT="Aqui o Texto de Dicas" height=50 width=50>
Height - Altura da imagem e Width - Largura



                                                                                  2
Tabela
<TABLE BORDER = 1>
<TH> Cabeçalho Coluna 1</TH><TH> Cabeçalho Coluna 2</TH>
<TR><TD> Linha1, Coluna1</TD><TD> Linha1, Coluna2</TD></TR>
<TR><TD> Linha2, Coluna1</TD><TD> Linha2, Coluna2</TD></TR>
</TABLE>




Código verde:
<tr><td colspan="4"></td><td></td></tr>
Código azul:
<tr><td colspan="3"></td><td></td><td></td></tr>


<TABLE BORDER=1>
<TR>
<TD rowspan=2>
my first table
</TD>
<TD>
my first table
</TD>
</TR>
<TR>
<TD>
my first table
</TD>
</TABLE>

                              my first table
my first table
                              my first table

colspan – juntar colunas
rowspan – juntar linhas

ÂNCORAS (LINKS)
Abrindo o resultado em uma nova janela. O default, sem target, abre na atual.
<a href=http://www.w3schools.com target="_blank">W3Schools</a>


FRAMES

<a href="planets.htm" target="_blank">View this page for the result</a>
Código de "planets.htm":
<html>
<frameset cols = "25%, 25%,*">
<frame src ="venus.htm" />


                                                                                3
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>
</html>


HTML RESPEITANDO A POSIÇÃO DE DIGITAÇÃO
O comando (tag) para que o HTML respeite a posição de digitação do texto é o <PRE>.

Exemplo:
<PRE> O que for digitado
Será visto na mesma
posição quando usarmos este comando.</PRE>


COMENTÁRIO
Para inserir comentários em páginas HTML use
<!-- para iniciar o comentário
e
--> para finalizar.


QUEBRAR LINHA

<br>


IMAGEM DE FUNDO NA PÁGINA

<BODY BACKGROUND = "http://www.ctonline.hpg.com.br/figura.jpg">
A figura é repetida preenchendo a página.




TABELAS DE CORES HTML

1 - http://www.ufpa.br/dicas/html-cor.htm

2 - http://orbita.starmedia.com/~edaurelio/a12.htm

3 - http://209.135.157.193/html/colortable.html

4 - http://www.geocities.com/ensinandohtml/cores_html.htm




                                                                                  4

Mais conteúdo relacionado

Mais procurados (6)

5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
 
Introducao ao html
Introducao ao htmlIntroducao ao html
Introducao ao html
 
AULA 2 - UTILIZAÇÃO DE TABELAS
AULA 2 - UTILIZAÇÃO DE TABELASAULA 2 - UTILIZAÇÃO DE TABELAS
AULA 2 - UTILIZAÇÃO DE TABELAS
 
Html básico
Html básicoHtml básico
Html básico
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
 
Revisão AP1 Construção de Páginas Web - CEDERJ
Revisão AP1 Construção de Páginas Web - CEDERJRevisão AP1 Construção de Páginas Web - CEDERJ
Revisão AP1 Construção de Páginas Web - CEDERJ
 

Destaque (6)

Presentacion 40 x 40 deportes
Presentacion 40 x 40 deportesPresentacion 40 x 40 deportes
Presentacion 40 x 40 deportes
 
Proyecto 40 x40 deportes
Proyecto 40 x40 deportesProyecto 40 x40 deportes
Proyecto 40 x40 deportes
 
Proyecto 40x40 deportes
Proyecto 40x40 deportesProyecto 40x40 deportes
Proyecto 40x40 deportes
 
Proyecto de 40 x40
Proyecto de 40 x40Proyecto de 40 x40
Proyecto de 40 x40
 
trabajo de 40x40 deportes
trabajo de 40x40 deportes trabajo de 40x40 deportes
trabajo de 40x40 deportes
 
Proyecto de deportes
Proyecto de deportesProyecto de deportes
Proyecto de deportes
 

Semelhante a Resumos html

Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 
Aula 03 - Layout e Integração de formulário com HTML e PHP
Aula 03  - Layout e Integração de formulário com HTML e PHPAula 03  - Layout e Integração de formulário com HTML e PHP
Aula 03 - Layout e Integração de formulário com HTML e PHP
Dalton Martins
 

Semelhante a Resumos html (20)

HTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTMLHTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTML
 
HTML - aula 1
HTML - aula 1HTML - aula 1
HTML - aula 1
 
Aula html5
Aula html5Aula html5
Aula html5
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Html - introdução e exemplos
Html - introdução e exemplosHtml - introdução e exemplos
Html - introdução e exemplos
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Aula 03 - Layout e Integração de formulário com HTML e PHP
Aula 03  - Layout e Integração de formulário com HTML e PHPAula 03  - Layout e Integração de formulário com HTML e PHP
Aula 03 - Layout e Integração de formulário com HTML e PHP
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
 
O que é html
O que é htmlO que é html
O que é html
 
USAR.pptx
USAR.pptxUSAR.pptx
USAR.pptx
 
Angular JS, você precisa conhecer
Angular JS, você precisa conhecerAngular JS, você precisa conhecer
Angular JS, você precisa conhecer
 
HTML - Guia 3
HTML - Guia 3HTML - Guia 3
HTML - Guia 3
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
Angular js
Angular jsAngular js
Angular js
 
HTML
HTML HTML
HTML
 
Formularios
FormulariosFormularios
Formularios
 
SUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosSUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilos
 
Html - capitulo 12
Html - capitulo 12Html - capitulo 12
Html - capitulo 12
 

Resumos html

  • 1. RESUMO DO HTML Select <form> <select name="carros"> <option selected value="volvo">Volvo (Este é o valor default – selected) <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> </form> TextArea <trextarea rows=”10” cols=”30”>Valor default que será exibido</textarea> CheckBox <form name="input" action="html_form_action.php" method="get"> I have a bike: <input type="checkbox" name="Bike" checked> <br> I have a car: <input type="checkbox" name="Car"> <br><input type="submit" value="Submit"> </form> Radio <form name="input" action="html_form_action.php" method="get"> Male: <input type="radio" name="Sex" value="Male" checked> <br> Female <input type="radio" name="Sex" value="Female"> <br><input type ="submit" value ="Submit Now!"> </form> Botão do tipo Submit envia o conteúdo do form para o action automaticamente. Caso precisemos enviar para o action através de uma função em JavaScript, devemos usar um botão do tipo Button no lugar do tipo Submit. Campo Desabilitado e Somente Leitura <input type ="text" value ="Valor" disabled readonly> MÉTODOS POST E GET (Formulários) GET - Este método exibe os dados no Browser ao enviar ao Servidor POST - Este método envia os dados para o servidor sem exibir no Browser (mais seguro, pois não exibe os dados na URL do browser). 1
  • 2. Optgroup – Agrupar grandes listas separando por grupos <select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select> <input type=”tipo” name=”nome” value=”valor default> tipo: hidden – campo oculto, normalmente para armazenar valores a serem transportados password – campo tipo senha que mostra asteriscos ao digitar reset – botão que limpa todos as campos ao ser clicado file – tipo para upload Formatação <b>Negrito</b> <s>Riscado</s> <font size="3" color="red"> <FONT FACE = TipoDaFonte>Texto</FONT> TipoDaFonte: times, arial, courier <sub>subscrito</sub> sobrescrito <sup> </sup> <h1> ... <h6> - Títulos <h1 align=”center”>Título 1 Centralizado</h1> <HR> traça uma linha horizontal Imagem <img src="angry.gif" alt="Angry" /> <img SRC="NomeImagem.Ext" ALT="Aqui o Texto de Dicas" height=50 width=50> Height - Altura da imagem e Width - Largura 2
  • 3. Tabela <TABLE BORDER = 1> <TH> Cabeçalho Coluna 1</TH><TH> Cabeçalho Coluna 2</TH> <TR><TD> Linha1, Coluna1</TD><TD> Linha1, Coluna2</TD></TR> <TR><TD> Linha2, Coluna1</TD><TD> Linha2, Coluna2</TD></TR> </TABLE> Código verde: <tr><td colspan="4"></td><td></td></tr> Código azul: <tr><td colspan="3"></td><td></td><td></td></tr> <TABLE BORDER=1> <TR> <TD rowspan=2> my first table </TD> <TD> my first table </TD> </TR> <TR> <TD> my first table </TD> </TABLE> my first table my first table my first table colspan – juntar colunas rowspan – juntar linhas ÂNCORAS (LINKS) Abrindo o resultado em uma nova janela. O default, sem target, abre na atual. <a href=http://www.w3schools.com target="_blank">W3Schools</a> FRAMES <a href="planets.htm" target="_blank">View this page for the result</a> Código de "planets.htm": <html> <frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> 3
  • 4. <frame src ="sun.htm" /> <frame src ="mercur.htm" /> </frameset> </html> HTML RESPEITANDO A POSIÇÃO DE DIGITAÇÃO O comando (tag) para que o HTML respeite a posição de digitação do texto é o <PRE>. Exemplo: <PRE> O que for digitado Será visto na mesma posição quando usarmos este comando.</PRE> COMENTÁRIO Para inserir comentários em páginas HTML use <!-- para iniciar o comentário e --> para finalizar. QUEBRAR LINHA <br> IMAGEM DE FUNDO NA PÁGINA <BODY BACKGROUND = "http://www.ctonline.hpg.com.br/figura.jpg"> A figura é repetida preenchendo a página. TABELAS DE CORES HTML 1 - http://www.ufpa.br/dicas/html-cor.htm 2 - http://orbita.starmedia.com/~edaurelio/a12.htm 3 - http://209.135.157.193/html/colortable.html 4 - http://www.geocities.com/ensinandohtml/cores_html.htm 4