Embed Size (px)
Citation preview
INTRODUÇÃO A INTRODUÇÃO A PROGRAMAÇÃO PROGRAMAÇÃO
HTMLHTML
Os slides que seguem mostram os Os slides que seguem mostram os principais comandos da linguagem HTML. principais comandos da linguagem HTML.
Conhecer o código HTML possibilita a Conhecer o código HTML possibilita a criação de páginas leves que contenham criação de páginas leves que contenham apenas os comandos necessários ao fim apenas os comandos necessários ao fim a que se destinam, além de facilitar ao a que se destinam, além de facilitar ao a que se destinam, além de facilitar ao a que se destinam, além de facilitar ao desenvolvedor integração com outras desenvolvedor integração com outras
linguagens. Muitos geradores de código linguagens. Muitos geradores de código podem ser utilizados para agilizar o podem ser utilizados para agilizar o
desenvolvimento de sites, originando, no desenvolvimento de sites, originando, no entanto, um código menos legível.entanto, um código menos legível.
CONCEITO DE INTERNETCONCEITO DE INTERNET
Rede mundial de Rede mundial de computadores com milhões computadores com milhões de usuários, consiste em de usuários, consiste em de usuários, consiste em de usuários, consiste em uma rede composta por uma rede composta por várias outras redes.várias outras redes.
ORIGEM DA INTERNETORIGEM DA INTERNET
HTML X JAVASCRIPTHTML X JAVASCRIPT
COMANDOS HTMLCOMANDOS HTML
Os comandos html possibilitam a criação de conteúdos Os comandos html possibilitam a criação de conteúdos estáticos que podem ser visualizados em um navegador estáticos que podem ser visualizados em um navegador de internet, todo comando html também, conhecido de internet, todo comando html também, conhecido como tag html, deve estar entre os sinais de maior e como tag html, deve estar entre os sinais de maior e menor. Para que um comando html perca seu efeito menor. Para que um comando html perca seu efeito digitadigita--se o nome do comando precedido por uma barra se o nome do comando precedido por uma barra digitadigita--se o nome do comando precedido por uma barra se o nome do comando precedido por uma barra entre os sinais de maior e menor. Exemplo:entre os sinais de maior e menor. Exemplo:
<B>seja bem vindo ao meu site</B><B>seja bem vindo ao meu site</B>
No caso acima, o texto entre <B> e </B>, ficaria em No caso acima, o texto entre <B> e </B>, ficaria em negrito.negrito.
CARACTERES ACENTUADOSCARACTERES ACENTUADOS Para garantir que uma página de Internet possa ser visualizada no Para garantir que uma página de Internet possa ser visualizada no
navegador de qualquer Sistema Operacional, não se deve utilizar navegador de qualquer Sistema Operacional, não se deve utilizar palavras acentuadas ou cedilha. Para isso, existem códigos de palavras acentuadas ou cedilha. Para isso, existem códigos de acentuação que devem ser colocados no lugar da letra acentuada. acentuação que devem ser colocados no lugar da letra acentuada. UtilizaUtiliza--se:se:
& + letra + nome do acento em inglês + ;& + letra + nome do acento em inglês + ;
Exemplo:Exemplo:Exemplo:Exemplo:
Ô = Ô;Ô = Ô;
á = á;á = á;
õ = õ;õ = õ;
à = à;à = à;
ç = çç = ç
ESTRUTURA DE UMA PÁGINA HTMLESTRUTURA DE UMA PÁGINA HTML
Toda página html inicia e termina com o comando Toda página html inicia e termina com o comando <HTML>, havendo um espaço para cabeçalho <HEAD>, <HTML>, havendo um espaço para cabeçalho <HEAD>, título <TITLE> e corpo da página <body>. Exemplo:título <TITLE> e corpo da página <body>. Exemplo:
<HTML><HTML>
<<!COMENTÁRIOS!>!COMENTÁRIOS!>
<HEAD><HEAD><HEAD><HEAD>
<TITLE> TÍTULO DO DOCUMENTO </TITLE><TITLE> TÍTULO DO DOCUMENTO </TITLE>
</HEAD></HEAD>
<BODY> <BODY>
Textos, imagens, links, etc...Textos, imagens, links, etc...
</BODY></BODY>
</</HTML>HTML>
PLANO DE FUNDOPLANO DE FUNDO
A cor de fundo ou papel de parede de A cor de fundo ou papel de parede de uma página HTML pode ser informada no uma página HTML pode ser informada no comando <bgcolor> ou <background>. comando <bgcolor> ou <background>. Exemplo:Exemplo:
Para cor de fundoPara cor de fundoPara cor de fundoPara cor de fundo
<BODY BGCOLOR=<BODY BGCOLOR=#2F4F4F#2F4F4F>>Para usar uma imagem como fundoPara usar uma imagem como fundo
<BODY BACKGROUND=imagem.jpg><BODY BACKGROUND=imagem.jpg>
Obs: <bgcolor> e <background> podem ser aplicados a outras Obs: <bgcolor> e <background> podem ser aplicados a outras tags. Também podetags. Também pode--se utilizar se utilizar bgcolor=‘transparent’ bgcolor=‘transparent’ allowtransparency=‘trueallowtransparency=‘true ‘‘ para fundo transparente.para fundo transparente.
FORMATAÇÃO DE TEXTOFORMATAÇÃO DE TEXTO Vários comandos podem ser utilizados para Vários comandos podem ser utilizados para
formatação de texto em páginas HTML, dentre formatação de texto em páginas HTML, dentre eles destacameles destacam--se:se:
<H1>texto destacado</H1><H1>texto destacado</H1> <B>texto em negrito</B><B>texto em negrito</B> <B>texto em negrito</B><B>texto em negrito</B> <I>texto em itálico</I><I>texto em itálico</I> <U>texto sublinhado</U><U>texto sublinhado</U> <BR>quebra linha<BR>quebra linha <P>novo parágrafo<P>novo parágrafo
No lugar de <H1> podeNo lugar de <H1> pode--se utilizar <h2>, <h3>, etc. Além do se utilizar <h2>, <h3>, etc. Além do comandos citados acima, existem outros disponíveis para comandos citados acima, existem outros disponíveis para pesquisas em diversos sites na Internet.pesquisas em diversos sites na Internet.
ALINHAMENTO DE TEXTOALINHAMENTO DE TEXTO
Para deixar um texto centralizado, alinhado Para deixar um texto centralizado, alinhado a esquerda ou a direita, utilizaa esquerda ou a direita, utiliza--se os se os seguinte comandos:seguinte comandos:
<p align=‘center’>centraliza texto</p><p align=‘center’>centraliza texto</p> <p align=‘center’>centraliza texto</p><p align=‘center’>centraliza texto</p>
<p align=‘Left’>texto a esquerda</p><p align=‘Left’>texto a esquerda</p>
<p align=‘right’>texto a direita</p><p align=‘right’>texto a direita</p>
<p align=‘justify’>texto justificado</p><p align=‘justify’>texto justificado</p>
TAMANHO, COR E TIPO DA FONTETAMANHO, COR E TIPO DA FONTE
Para definir cor, tipo ou tamanho da fonte Para definir cor, tipo ou tamanho da fonte utilizautiliza--se o comando <font>. Exemplo:se o comando <font>. Exemplo:
<font color=#ffffff size=3 face=arial><font color=#ffffff size=3 face=arial><font color=#ffffff size=3 face=arial><font color=#ffffff size=3 face=arial>
Onde: color é cor, size é tamanho e face é o Onde: color é cor, size é tamanho e face é o tipo. tipo.
faça uma pesquisa na web e descubra faça uma pesquisa na web e descubra milhares de códigos de cores HTML.milhares de códigos de cores HTML.
EXIBIÇÃO DE IMAGENSEXIBIÇÃO DE IMAGENS
Para exibir uma imagem em uma página Para exibir uma imagem em uma página HTML utilizaHTML utiliza--se o comando <img>. se o comando <img>. Exemplo:Exemplo:
<img src=imagem.jpg border=0><img src=imagem.jpg border=0>
Onde: src é especifica a imagem a ser Onde: src é especifica a imagem a ser exibida e border a grossura da borda exibida e border a grossura da borda desta imagem.desta imagem.
LARGURA E ALTURA DE COMPONENTESLARGURA E ALTURA DE COMPONENTES
Para especificar a largura e altura dos diversos Para especificar a largura e altura dos diversos componentes de uma página HTML utilizacomponentes de uma página HTML utiliza--se os se os comandos width e height. Exemplo:comandos width e height. Exemplo:
<img src=imagem.jpg border=0 width=300 <img src=imagem.jpg border=0 width=300 <img src=imagem.jpg border=0 width=300 <img src=imagem.jpg border=0 width=300 height=200>height=200>
Onde: width é a largura em pixels e height a Onde: width é a largura em pixels e height a altura. Tais comandos podem ser utilizados altura. Tais comandos podem ser utilizados dentro de diversas tags HTML como vídeos, dentro de diversas tags HTML como vídeos, tabelas, etc.tabelas, etc.
ESPAÇAMENTO ENTRE PALAVRASESPAÇAMENTO ENTRE PALAVRAS
Em programação HTML, ainda que seja dado Em programação HTML, ainda que seja dado mais de um espaço entre duas palavras apenas mais de um espaço entre duas palavras apenas um terá efeito. Para mais de um espaço podeum terá efeito. Para mais de um espaço pode--se se utilizar o comando utilizar o comando
Exemplo:Exemplo:
Valor         150,00Valor         150,00
Uma marca de tabulação pode ser conseguida Uma marca de tabulação pode ser conseguida com o comando:com o comando: <p style=‘margin<p style=‘margin--left: 16’>left: 16’>
LISTAS DE DEFINIÇÃO NÃO NUMERADASLISTAS DE DEFINIÇÃO NÃO NUMERADAS
Para organizar listas de conteúdos podePara organizar listas de conteúdos pode--se utilizar o comando <ul> com diferentes se utilizar o comando <ul> com diferentes tipos de marcadores como: type=disc, tipos de marcadores como: type=disc, type=circle, type=square. Exemplo:type=circle, type=square. Exemplo:type=circle, type=square. Exemplo:type=circle, type=square. Exemplo:
<ul type=disc><ul type=disc>
<li> tópico numero um<li> tópico numero um
<li> tópico número dois<li> tópico número dois
</ul></ul>
LISTAS DE DEFINIÇÃO NUMERADASLISTAS DE DEFINIÇÃO NUMERADAS
Para organizar listas de conteúdos Para organizar listas de conteúdos numerados podenumerados pode--se utilizar o comando se utilizar o comando <ol>. Exemplo:<ol>. Exemplo:
<ol><ol><ol><ol>
<li> tópico numero um<li> tópico numero um
<li> tópico número dois<li> tópico número dois
</ol></ol>
CRIAÇÃO DE TABELASCRIAÇÃO DE TABELAS
Tabelas HTML podem ser criadas com os Tabelas HTML podem ser criadas com os seguintes comandos:seguintes comandos:
<table border=1> <table border=1> marca o início de uma tabela e a marca o início de uma tabela e a espessura de sua borda;espessura de sua borda;
<tr> <tr> cria/finaliza linhas em uma tabela;cria/finaliza linhas em uma tabela;
<td></td> <td></td> cria/finaliza colunas nas linhas de uma cria/finaliza colunas nas linhas de uma tabela;tabela;
</table></table> finaliza uma tabela.finaliza uma tabela.
EXEMPLO DE TABELAEXEMPLO DE TABELA
Tabela com uma linha e duas colunas:Tabela com uma linha e duas colunas:
<TABLE BORDER=1><TABLE BORDER=1>
<TR><TR>
<TD><TD>
linha1 coluna1linha1 coluna1
</TD></TD>
<TD><TD>
linha1 coluna2linha1 coluna2
</TD></TD>
</TR></TR>
</TABLE></TABLE>
CRIAÇÃO DE LINKSCRIAÇÃO DE LINKS
Links para outras páginas HTML ou sites podem ser Links para outras páginas HTML ou sites podem ser criados com o comando <a href>. Exemplo:criados com o comando <a href>. Exemplo:
Para abrir o link na mesma aba ou janelaPara abrir o link na mesma aba ou janela
<a href=‘http://www.google.com’>Google</a><a href=‘http://www.google.com’>Google</a>
Para abrir o link em outra aba ou janelaPara abrir o link em outra aba ou janela
<a href=‘home.htm’ target=‘_blank’>Pagina Inicial</a><a href=‘home.htm’ target=‘_blank’>Pagina Inicial</a><a href=‘home.htm’ target=‘_blank’>Pagina Inicial</a><a href=‘home.htm’ target=‘_blank’>Pagina Inicial</a>
Para abrir o link em um framePara abrir o link em um frame
<a href=‘pagina.htm’ target=‘nomeframe’>Pagina Inicial</a><a href=‘pagina.htm’ target=‘nomeframe’>Pagina Inicial</a>
Onde: href é igual a página ou endereço a ser aberto e Onde: href é igual a página ou endereço a ser aberto e target onde ele deverá ser aberto.target onde ele deverá ser aberto.
CRIAÇÃO DE FRAMESCRIAÇÃO DE FRAMES
Uma mesma página HTML pode ser dividida em Uma mesma página HTML pode ser dividida em diversas áreas denominadas frames, um dos comandos diversas áreas denominadas frames, um dos comandos mais utilizados para criação dessas áreas é o iframe. mais utilizados para criação dessas áreas é o iframe. Exemplo:Exemplo:
<iframe name=area1 src=pagina1.htm width=100% <iframe name=area1 src=pagina1.htm width=100% <iframe name=area1 src=pagina1.htm width=100% <iframe name=area1 src=pagina1.htm width=100% height=50%>height=50%>
<iframe name=area2 src=pagina2.htm width=100% <iframe name=area2 src=pagina2.htm width=100% height=50%>height=50%>
Onde: name é igual ao nome do frame, src a página HTML Onde: name é igual ao nome do frame, src a página HTML a ser aberta no frame, width e height largura e altura de a ser aberta no frame, width e height largura e altura de cada frame.cada frame.
OUTROS PARAMETROS DE UM IFRAMEOUTROS PARAMETROS DE UM IFRAME
Dentro de um comando iframe podem ser informados diversos Dentro de um comando iframe podem ser informados diversos parâmetros como:parâmetros como:
Scrolling=yes ou no.Scrolling=yes ou no.
Determina se aparecerá barra de rolagem ou nãoDetermina se aparecerá barra de rolagem ou não
Marginwidth e MarginheightMarginwidth e MarginheightMarginwidth e MarginheightMarginwidth e Marginheightlargura da margem horizontal e vertical.largura da margem horizontal e vertical.
Frameborder Frameborder
Largura da linha divisória entre os frames.Largura da linha divisória entre os frames.
Vspace e HspaceVspace e Hspace
Espaço vertical e horizontal entre o frame e o resto da Espaço vertical e horizontal entre o frame e o resto da página HTML.página HTML.
FORMULÁRIO FORMULÁRIO –– COMANDO FORMCOMANDO FORM
Comando utilizado para demarcar início e fim de Comando utilizado para demarcar início e fim de um formulário.um formulário.
<form name=dados action=pagina.php <form name=dados action=pagina.php method=post>method=post>method=post>method=post>... Comandos... Comandos
</form></form>
Onde: name é igual ao nome do formulário, action Onde: name é igual ao nome do formulário, action o programa para o qual os dados serão o programa para o qual os dados serão enviados e method o método de envio de dados enviados e method o método de envio de dados que pode ser get ou post.que pode ser get ou post.
FORMULÁRIO FORMULÁRIO –– TEXTO SIMPLESTEXTO SIMPLES
Campo simples para digitação de texto.Campo simples para digitação de texto.
Nome:<input name=nome value=‘seu nome’ Nome:<input name=nome value=‘seu nome’ size=50 maxlength=50>size=50 maxlength=50>size=50 maxlength=50>size=50 maxlength=50>
Onde: name é igual ao nome do campo, Onde: name é igual ao nome do campo, value um valor prévalue um valor pré--definido do campo, definido do campo, size tamanho do campo e maxlength size tamanho do campo e maxlength quantidade de caracteres.quantidade de caracteres.
FORMULÁRIO FORMULÁRIO –– COMANDO TEXTAREACOMANDO TEXTAREA
Comando que cria um campo para digitação de Comando que cria um campo para digitação de texto organizado em mais de uma linha.texto organizado em mais de uma linha.
Observação:Observação:<textarea name=observacao cols=60 rows=5><textarea name=observacao cols=60 rows=5><textarea name=observacao cols=60 rows=5><textarea name=observacao cols=60 rows=5>
textotexto</textarea></textarea>
Onde: name é igual ao nome do campo, texto um Onde: name é igual ao nome do campo, texto um valor prévalor pré--definido do campo, cols a quantidade definido do campo, cols a quantidade de colunas e rows a quantidade de linhas.de colunas e rows a quantidade de linhas.
FORMULÁRIO FORMULÁRIO –– COMANDO BUTTONCOMANDO BUTTON
Comando que cria um botão.Comando que cria um botão.
<input type=button name=ajuda value=ajuda><input type=button name=ajuda value=ajuda>
Onde type é igual ao tipo de campo que será Onde type é igual ao tipo de campo que será criado.criado.
FORMULÁRIO FORMULÁRIO –– COMANDO SUBMITCOMANDO SUBMIT
Comando que cria um botão que submete Comando que cria um botão que submete os dados do formulário ao programa os dados do formulário ao programa especificado em action.especificado em action.
<input type=submit name=enviar <input type=submit name=enviar value=‘enviar dados’>value=‘enviar dados’>
Onde type é igual ao tipo de campo que será Onde type é igual ao tipo de campo que será criado.criado.
FORMULÁRIO FORMULÁRIO –– COMANDO SELECTCOMANDO SELECT
Comando que cria uma caixa de seleção.Comando que cria uma caixa de seleção.
<select name=sexo><select name=sexo>
<option value=‘’>selecione um sexo<option value=‘’>selecione um sexo
<option value=M>Masculino<option value=M>Masculino<option value=M>Masculino<option value=M>Masculino
<option value=F>Feminino<option value=F>Feminino
</select></select>
Onde option especifica as opções da caixa de Onde option especifica as opções da caixa de seleção.seleção.
FORMULÁRIO FORMULÁRIO –– COMANDO RADIOCOMANDO RADIO
Comando que cria campos para marcação Comando que cria campos para marcação de uma única alternativa.de uma única alternativa.
<input type=radio name=sexo value=M <input type=radio name=sexo value=M checked> Masculinochecked> Masculinochecked> Masculinochecked> Masculino
<input type=radio name=sexo value=F> <input type=radio name=sexo value=F> FemininoFeminino
Onde checked deixa uma alternativa préOnde checked deixa uma alternativa pré--selecionada.selecionada.
FORMULÁRIO FORMULÁRIO –– COMANDO CHECKBOXCOMANDO CHECKBOX
Comando que cria campos para marcação Comando que cria campos para marcação de várias alternativas.de várias alternativas.
<input type=checkbox name=opc1 value=1 <input type=checkbox name=opc1 value=1 checked> alternativa 1checked> alternativa 1checked> alternativa 1checked> alternativa 1
<input type=checkbox name=opc2 value=2> <input type=checkbox name=opc2 value=2> alternativa 2alternativa 2
Onde checked deixa uma alternativa préOnde checked deixa uma alternativa pré--selecionada.selecionada.
FORMULÁRIO FORMULÁRIO –– COMANDO PASSWORDCOMANDO PASSWORD
Comando que cria campos para digitação Comando que cria campos para digitação de senhas.de senhas.
Senha:<input type=password name=senha Senha:<input type=password name=senha Senha:<input type=password name=senha Senha:<input type=password name=senha value=‘’>value=‘’>
O conteúdo digitado não é mostrado.O conteúdo digitado não é mostrado.
FORMULÁRIO FORMULÁRIO –– COMANDO HIDDENCOMANDO HIDDEN
Comando que cria campos para digitação Comando que cria campos para digitação de senhas.de senhas.
<input type=hidden name=senha value=‘’><input type=hidden name=senha value=‘’><input type=hidden name=senha value=‘’><input type=hidden name=senha value=‘’>
O conteúdo digitado não é mostrado.O conteúdo digitado não é mostrado.
