Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML Básico

    Загружено:

    Leandro Nascimento
    20 просмотров66 страниц

    Оригинальное название

    HTML BÁSICO.pptx

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PPTX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    20 просмотров66 страниц

    HTML Básico

    Загружено:

    Leandro Nascimento

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 66

    O QUE HTML

    HyperText Markup Language uma linguagem utilizada na construo de pginas WEB. Ela composta por vrios comandos que o browser interpreta e monta graficamente um resultado. Qualquer erro que ocorra em uma pgina WEB, ao contrrio de outras linguagens, ignorada pelo browser.

    O QUE SO OS TAGS Tags so os comandos da liguagem HTML. Eles devem sempre aparecer entre os sinais de menor e maior (< >). Alm disso eles tm uma sintaxe de "liga" e "desliga", por exemplo: <center>Texto a ser centralizado</center> No existe nenhuma diferenciao entre maisculas e minsculas.

    FORMATO DE UM ARQUIVO HTML


    Um arquivo HTML deve conter alguns comandos bsicos, apesar de que o browser pode at interpretar o arquivo sem eles.So eles: <html>...</html> indica que comandos HTML se encontraro entre os tags. Eles indicam o incio e o fim do arquivo. <head>...</head> indica o cabealho da pgina, com diversas informaes como por exemplo o ttulo. <title>...</title> especifica o ttulo da pgina que mostrado na barra de ttulos do navegador. <body>...</body> contm o corpo do arquivo HTML, ou seja o contedo em si da pgina, com todos os demais comandos que a compe.

    Vejamos um exemplo de arquivo html:


    <html> <head> <title>Alo mundo!</title> </head> <body> Alo mundo! Este e o meu primeiro arquivo HTML! </body> </html>

    Resultado:

    Vejamos um alguns comandos html:


    Cabealho. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6>

    Entre eles as letras vo diminuindo de tamanho. Por exemplo <html> <head> <title>Exemplo de Cabecalho</title> </head> <body> <h1>Exemplo de cabecalho h1</h1> <h2>Exemplo de cabecalho h2</h2> <h3>Exemplo de cabecalho h3</h3> <h4>Exemplo de cabecalho h4</h4> <h5>Exemplo de cabecalho h5</h5> <h6>Exemplo de cabecalho h6</h6> </body> </html>

    Resultado:

    Pargrafos
    Existe duas maneiras de se criar quebra de linha:

    <p> <br>

    Para criar um pargrafo novo, ou seja pulando uma linha. Para ir para a linha de baixo.

    Pargrafos
    Por exemplo:
    <html> <head> <title>Exemplo de Pargrafos</title> </head> <body> Este e o primeiro paragrafo.<p>Este e o segundo paragrafo<p> Este e o terceiro paragrafo com<br>quebra de linha </body> </html>

    Resultado:

    Formatao de texto
    Vamos ver algumas tags usadas para formatao de textos.
    <center></center> - Centraliza o texto entre as marcas. <b></b> - O texto ficar em negrito. <i></i> - O texto ficar itlico. <strike></strike> - Mostra o texto riscado. <sub></sub> - Texto subscrito. <sup></sup> - Texto sobescrito. <cite></cite> - Parecido com a funo de <i></i>, mas especifica uma citao. <address></address> - Formata texto como um endereo, e-mail ou URL(Uniform Resource Locator). <font face = ... size = ... color = ... ></font> - Configura a fonte usada.

    Barra de Diviso
    Deve ser usado o seguinte TAG: <hr> <html> <head> <title>Exemplo de Barra de Diviso</title> </head> <body> Este e o primeiro conjunto de texto.<p> <hr> Este e o segundo conjunto de texto. </body> </html>

    Resultado:

    Alinhamento
    Para alinhar um pargrafo, usaremos um parmetro do tag <p>: <p align=> Podemos usar as opes:

    <p align=left> ... </p> o padro e alinha o texto esquerda.


    <p align=right> ... </p> Alinha o texto direita.

    <p align=center> ... </p> Centraliza o texto.

    Vejamos um exemplo:
    <html> <head> <title>Exemplo de Barra de Alinhamento</title> </head> <body> <p align=left>Alinha o texto a esquerda.</p> <p align=right>Alinha o texto a direita.</p> <p align=center>Centraliza o texto.</p> </body> </html>

    Resultado:

    Cores
    Para trabalharmos com cor, usaremos um parmetro do TAG <body>, mas antes disso temos que saber como funciona o processo de criao de uma cor em HTML. HTML usa o padro de codificao RGB em hexadecimal. RGB (Red Green Blue) usa a quantidade de cada uma das cores bsicas (vermelho, verde e azul) para se criar uma cor. Para se formar uma cor usa-se a seguinte codificao:

    #RRGGBB

    onde:
    RR indica um nmero com a quantidade de vermelho (de 00 FF) GG indica um nmero com a quantidade de vermelho (de 00 FF) BB indica um nmero com a quantidade de vermelho (de 00 FF) Por exemplo: Branco -> #FFFFFF Preto -> #000000 Vermelho -> #FF0000 Verde -> #00FF00 Azul -> #0000FF

    Usaremos os seguintes parmetros do TAG <body>:


    Bgcolor Text Link Alink Vlink Cor do fundo. Cor do texto. Cor do link. Cor do link no momento que acessado. Cor do link anteriormente visitado.

    Vejamos um exemplo:
    <html> <head> <title>Exemplo de Cores</title> </head> <body bgcolor=#000000 text=#FFFFFF link=#FF0000 alink=#00FF00 vlink=#0000FF> Exemplo do uso de cores </body> </html>

    Resultado:

    Imagens
    Existem dois tipos de imagens que podemos utilizar: papel de parede e imagens propriamente ditas. Papel de parede,vejamos um exemplo: <html> <head> <title>Exemplo de Papel de Parede</title> </head> <body background="c:\imagens\figura1.jpg"> Este texto vem por cima da figura. </body> </html>

    Resultado:

    Agora usaremos o TAG </IMG> para adicionarmos uma imagem na pgina acima: <html> <head> <title>Exemplo de Imagens</title> </head> <body background="c:\imagens\figura1.jpg"> Este texto vem por cima da figura1. <img src="http://www.teste.com/figura2.gif"> E este vem ao lado. </body> </html>

    Resultado:

    Hyperlinks
    Hyperlinks so comandos HTML para conectarmos pginas independentes umas com as outras, ou a um arquivo. Para isso usaremos o TAG </a> e seu parmetro href. <a href=http://www.teste.com/fotos.html>FOTOS</a> <a href=figura01.jpg>nome da figura</a>

    Veja o exemplo:
    <html> <head> <title>Exemplo de Hyperlinks</title> </head> <body> Esta frase vem antes desta <a href="http://www.teste.com/pagina.html"> serie de palavras</a>que ligam o texto a outra pagina. </body> </html>

    Resultado:

    Tabelas
    O conceito mais simples de tabelas que elos so formados por linhas e colunas e suas interseces so chamadas de clulas. Voc pode inserir em uma clula praticamente qualquer tipo de elemento html tais como links, imagens, listas e outras tabelas. <table> </table> - estas marcas delimitam toda a tabela. Todas as outras marcas referentes a tabela devem estar entre estas marcas. <caption> </caption> - este um elemento opcional onde vamos definir o ttulo da nossa tabela.

    Sem nenhum parmetro, o ttulo aparecer acima da tabela e centralizado em relao a ela. <tr> </tr> - define uma linha da tabela. O nmero de linhas da tabela corresponde ao nmero de <tr></tr>. As linhas so formadas de clulas, isto quer dizer que dentro das linhas devemos definir as clulas. <td></td> - define o dado da tabela. Estas marcas devem estar entre as marcas de linha (<tr></tr>) e podem conter todos os elementos de um documento html.

    O alinhamento horizontal padro esquerda e centralizado verticalmente. <th></th> - define as clulas de cabealho. Seu uso idntico ao <td> mas com alinhamento horizontal centralizado e fonte em negrito.
    EXEMPLO:tabela.html

    <html> <title>Tabela Simples.</title> <body> <table> <caption>1exemplo de tabela </caption> <tr> <th>-</th> <th>coluna 1 </th> <th>coluna 2</th> </tr> <tr> <th>Linha 1 </th> <th>Clula 1-1 </th> <th>Clula 1-2</th>

    <tr> <th>Linha 2 </th> <th>Clula 2-1 </th> <th>Clula 2-2 </th> </tr> <tr> <th>Linha 3 </th> <th>Clula 3-1 </th> <th>Clula 3-2 </th> </tr> </table> </body> </html>

    Parmetros para <table>:


    border - indica qual deve ser a espessura da borda (em pixels) de cada clula. Ex.: <table border = 2>. width - indica largura da tabela, podendo ser especificado em pixels ou porcenta-gem referente largura da janela. No sendo especificado, o tamanho da tabela se adapta ao tamanho do texto inserido nas clulas. Ex.: <table width = 50%>.

    cellspacing - define o espaamento entre as clulas, ou seja, a largura das linhas de grade. Ex.: <table cellspacing = 3>. cellpadding - determina, em pixels, o espao entre o contedo e as bordas da clula. Ex.: <table cellpadding = 5>. align - define o alinhamento horizontal da tabela com relao aos outros elemen-tos da pgina. Pode conter os valores center, left e right. bgcolor - define a cor de fundo da tabela.

    Tabela2.html
    <html> <title>Tabela usando os parmetros de TABLE</title> <body> <table border = 1 width = 50% cellpadding = 5 bgcolor skyblue> <caption> 1 exemplo de tabela</caption> <tr> <th>-</th> <th>coluna 1 </th> <th>coluna 2 </th> </tr>

    <tr> <th>Linha 1 </th> <td>Clula 1-1 </td> <td>Clula 1-2 </td> <tr> <th>Linha 2</th> <td>Clula 2-1 </td> <td>Clula 2-2 </td> </tr> <tr> <th>Linha 3 </th> <td>Clula 3-1 </td> <td>Clula 3-2 </td> </table> </body> </html>

    Parmetros para <tr>:


    align - faz o alinhamento horizontal das clulas contidas na linha, O padro, se omitido, o alinhamento esquerda para <td> e centralizado para <th>. valign - faz o alinhamento vertical dos elementos contidos na clula da linha. Pode conter os valores top, middle e bottom. O padro ao meio (middle). bgcolor - define a cor de fundo da linha.

    Parmetros para <td> e <th>


    align - define o alinhamento horizontal do contedo da
    clula. valign - define o alinhamento vertical do contedo da clula. Pode ter os valores top, middle e bottom. width - define a largura da clula. Seu valor pode ser em pixels ou porcentagem. bgcolor - Define a cor de fundo da clula. nowrap - A clula que conter este parmetro no vai permitir a quebra de linha do texto contido nela.

    Parmetros para <td> e <th>


    colspan - Especifica o nmero de colunas de uma tabela a ser ocupado por uma clula. Sua funao e expandir uma clula horizontalmente. Atribuir colspan = 2 a uma clula ela ocupar seu espao e mais o espao da clula a sua direita. rowspan - define o nmero de linhas que uma clula ocupar. Expande a clula verticalmente. Seu funcionamento igual a colspan.

    Tabela3.html
    <htmf> <title>Tabela Completa </ttle> <body text = red bgcolor = black> <table width = 50% border = 0 cellspacing = 0 cellpadding = 5 bgcolor = skyblue> <caption> l exemplo de tabela </caption> <tr align = center> <td colspan = 3 align = center> <i><font size = +2>Tabela Completa <hr size = 5></font></i> </td> <td> </td> <td> </td>

    </tr> <th>-</th> <th>Coluna 1 </th> <th>Coluna 2 </th> </tr> <tr align = center> <th>Linha 1 </th> <td bgcolor = lightgreen>Clula 1-1 </td> <td bgcolor = lightgreen>Clula 1- 2 </td> </tr> <tr align = center> <th>Linha 2</th> <td bgcolor = lightgreen>Clula 2-1 </td> <td bgcolor = lightgreen>Clula 2-2 </td> </tr> <tr align = center> <th>Linha 3</th> <td bgcolor = lightgreen>Clula 3-1 </td> <td bgcolor = Iightgreen>Clula 3-2 </td> </tr> </table></body></html>

    Frames
    Frames so utilizados para carregar vrias pginas ao mesmo tempo pelo browser. Com isso possvel desenvolver melhor a aparncia do site e sua funcionalidade. Para tornar possvel a utilizao de frames ns no inclumos nas pginas que con-tm o contedo a ser exibido alguma tag especial, e sim ns devemos definir um arquivo de layout para o browser. Este arquivo contm informaes como qual ser o tamanho de cada regio da tela e quais documentos sero carregados. Um arquivo de layout defini-do da seguinte forma:

    Exemplo: framel.html <html> <head> <title>Usando Frames</title> <head> <frameset cols = "30%,*"> <frame src = esq.htm nome = esquerda> <frame src = dir.htm nome = direito> </frameset> </html>

    Resultado:

    Observe que este arquivo no contm a definio do corpo de documento (<body> </ body>). Os textos e imagens devem estar contidos nos arquivos esq.htm e dir.htm que iro ser carregados pelo browser nas regies especificadas pelo arquivo framel.htm. Definindo frames: <frameset></frameset> - Define quantos reas a tela ter. Ele possui diversos parmetros, sendo que pelo menos deve estar definido os parmetros cols ou rows.

    cols - define o nmero o de reas verticais que a tela do browser ter. O valor que recebe uma lista de valores separados por vrgula. Cada valor indica qual ser a largura da coluna, que pode ser expressado em pixels, porcentagem ou "*" que significa "quanto mais largo possvel". rows - seu funcionamento idntico ao parmetro cols, mas define reas horizontais na tela. border - define a espessura da linha divisria que separa as regies. Quando no definido, a espessura 5 pixels. bordercolor - define a cor da linha divisria. frameborder - indica se a borda ter aspecto 3D. Seus valores so yes ou no. No funciona no l. Explorer.

    <frame></frame> - Com este elemento indicamos o que ser carregado em uma determinada rea. Devemos definir um <frame></frame> para cada uma das regies criadas. Se, por exemplo, definirmos cols = "300,*" devemos usar dois <frame>. obrigatrio o uso do parmetro src.

    src - especifica qual pgina ser carregada. name - define o nome da regio (atravs deste nome que ns vamos nos referir ao frame). noresize - a linha que separo os frames podem ser movidos, alterando a aparncia do site. Para que isso no acontea, ns utilizamos noresize para que a linha no seja movida. scrolling - Indica se deve ser exibido a barra de rolagem. Os valores podem ser yes, no ou auto. Yes, a barra sempre exibida, no, a barra nunca exibida e em auto, a barra sempre exibida se o contedo da pgina ultrapassa o tamanho da tela. Este o padro se omitido. marginheight - configura em pixels a margem vertical. marginwidth - configura em pixels a margem horizontal.

    Novos parmetros para o elemento de link; <a href = ... target =...> A parte href continua a mesma, ou seja, indica qual pgina ser carregada pelo link, mas o novo parmetro target onde vamos determinar em qual frame ser carregada a pgina. O valor de target o nome que damos no parmetro nome de <:frame>: Ex.: frame2.html <html> <head> <title>frames 2 </title> </head> <frameset cols = "250,*"> <frame src = esq.html name = esquerda> <frame src = dir.html name = direita> </frameset> </html>

    Agora o outro arquivo: Arquivo esq.html <html> <body bgcolor = lightgreen text = white>. Lado esquerdo da pgina. <br><br> <a href = outro.html target = direita>Outro frame </a> </body> </html> Arquivo dir.html <html> <body bgcolor = blue text = yellow> Lado direito da pgina.<br><br> </body> </html>

    Clicando no link do frame da esquerda, o frame da direita ser atualizado com a nova pgina. Valores especiais para target: _blank - abre a pgina numa nova janela. _self - abre a pgina na mesma regio em que foi clicado. _top - abre a pgina ocupando toda a janlea do browser, ignorando as definies de layout. _parent - abre frame dentro de frames, o arquivo novo de layout ocupa toda a tela.

    Msicas
    Existem 2 maneiras de colocar msicas em seu site. A primeira com o TAG <BGSOUND> que s reconhecido pelo Internet Explorer. Para utilizar este TAG siga o exemplo : <BGSOUND SRC="arquivo.mid"> Onde arquivo.mid o arquivo de msica. Caso voc queira que a msica repita-se, adicione o atributo loop="infinite" ou loop="1" corresponde o numero de segundo que a msica tocar.

    A segunda maneira com o TAG <EMBED> que, por ser reconhecido pelo Internet Explorer e Netscape, recomendado. Para utiliza-lo, siga o exemplo: <EMBED SRC="arquivo.mid"> recomendado usar arquivos midi por serem bem menores que os wavs.

    Marquee
    possvel obter o efeito de animao de texto, atravs da formatao <MARQUEE>. Atributos de largura e direo do efeito permitem diversas apresentaes diferentes. Por exemplo (o efeito s visto atravs do Internet Explorer): Ex.: <MARQUEE>Texto</MARQUEE>

    Para direcionar a palavra usa-se o atributo DIRECTION: Ex.: Para esquerda DIRECTION = LEFT Ex.: <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>

    Para direita DIRECTION=RIGHT <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE>

    Posicionando o inicio do texto, usamos o atributo WIDTH=50%. Ex.: Saindo do centro <MARQUEE BEHAVIOR=SCROLL WIDTH=50%>Texto</MARQUEE> Ex.: Saindo mais prximo da direita <MARQUEE BEHAVIOR=SCROLL WIDTH=80%>Texto</MARQUEE> Ex.: Saindo mais prximo da esquerda <MARQUEE BEHAVIOR=SCROLL WIDTH=20%>Texto</MARQUEE>

    Formulrios
    Voc j deve ter notado que muitas pginas utilizam de formulrios para os mais diversos fins, como o envio de email, inscries em servios, compras online, pesquisas etc. Fazer os formulrios pode-se dizer que relativamente fcil, no entanto, um dos maiores problemas encontra-se na transmisso de dados dos formulrios para executar uma determinada funo, pois pela lgica um formulrio tem que ter alguma utilidade dentro da pgina, como por exemplo enviar os dados nele preenchidos para um endereo de e-mail ou para uma outra funo qualquer.

    Para estes dados serem trabalhados pode-se fazer uso de um script CGI (Common Gateway Interface), um programa capaz de processar os dados conforme o que se desejar fazer com eles. Porm com o uso de um script CGI passa a se tornar necessrio que voc possua este programa ou o construa caso o saiba, o problema que grande parte das pessoas no tem o script e nem sabe como faz-lo, o que pode ser uma tarefa bastante complicada. Bem, uma soluo inteligente para isso seria usar algum script CGI j construdo, de acesso pblico e gratuito, um exemplo desse tipo de servio seria o Any Form, mais a frente ser mostrado como us-lo.

    Inicialmente, todo formulrio deve iniciar-se pela tag <form action="..." method="..."> e finalizar-se com </form>. Sendo que no elemento form deve-se indicar em action="..." o endereo do script que ir receber e processar os dados do formulrio, se quiser usar o AnyForm voc pode colocar por exemplo: action="http://www.uky.edu/cgibin/cgiwrap/~johnr/AnyForm.cgi", j no atributo method="..." se indica o modo de transmio dos dados, que pode ser post ou get conforme o caso (ex: method ="post").

    Elemento INPUT
    Atravs do elemento input torna-se possvel a criao de campos especficos aonde sero inseridos os dados no formulrio, esse elemento deve conter obrigatoriamente o atributo name="nome" determinando um nome para cada campo, afim de que se possa fazer referncias a estes no script. Outro atributo do elemento input o type que determinar o tipo de campo a ser adicionado no documento (de texto, mltipla escolha etc).

    Em muitos casos tambm estar se fazendo uso do atributo value que servir para indicar um valor j prconfigurado para o campo de entrada de dados, mais a frente veremos utilizaes frequentes para este tipo de atributo. Por exemplo: <INPUT NAME="nome" TYPE="TEXT"> Esse exemplo indica que deve-se criar um campo do tipo texto como est abaixo:

    DICA: Nesse caso voc pode adicionar o atributo size="nmero" na tag para alterar o tamanho do campo, o atributo maxlenght="nmero" que indicar um nmero mximo de caracteres que o campo dever aceitar, alm do atributo value="Texto pr configurado" que far com que o campo aparea com alguma coisa j escrita, veja o exemplo: <INPUT NAME="nome" TYPE="TEXT" SIZE="40" MAXLENGHT="70" VALUE="Exemplo de Campo de Texto de uma linha"> Resultado:
    Exemplo de Campo de Texto de uma linha

    Como pode ver, no exemplo mostra-se um campo de texto cujo tamanho de 40, aceitar no maximo 70 caracteres e vem com a mensagem "Exemplo de Campo de Texto de uma linha" j escrita. Com o input voc tambm pode fazer um campo do tipo password, que parecido com o tipo text porm o texto digitado visualizado como astersticos. Por exemplo: <INPUT NAME="senha" TYPE="PASSWORD"> Resultado:
    **********

    Existem tambm os campos do tipo radio e checkbox, ambos so campos de tipo mltipla escolha, porm o radio s permite que seja escolhida uma opo e o checkbox quantas forem desejadas. Veja os exemplos abaixo, juntamente com seus respectivos resultados: Atributo RADIO, exemplo: <INPUT NAME="resposta" TYPE="RADIO" NAME="alternativa" VALUE="altern1>Opo 1 <INPUT NAME="resposta" TYPE="RADIO" NAME="alternativa" VALUE="altern2>Opo 2 <INPUT NAME="resposta" TYPE="RADIO" NAME="alternativa" VALUE="altern3>Opo 3

    Resultado:
    Opo 1 Opo 2 Opo 3 NOTA: Para este tipo de campo OBRIGATRIO a todas as opes relativas a uma determinada pergunta possuirem o mesmo atributo name e para diferenciar as alternativas usa-se o atributo value="opoX". Voc tambm pode adicionar o atributo checked em algum campo para indicar que ele deve aparecer selecionado inicialmente.

    Atributo CHECKBOX, exemplo:


    <INPUT TYPE="CHECKBOX" NAME="teste1" VALUE="opo1" CHECKED>Opo 1 <INPUT TYPE="CHECKBOX" NAME="teste2" VALUE="opo2">Opo 2 <INPUT TYPE="CHECKBOX" NAME="teste3" VALUE="opo3">Opo 3 Resultado: Opo 1 Opo 2 Opo 3

    Вам также может понравиться