Scribd Logo
Carica

Benvenuto in Scribd!

  • Minicurso HTML PDF

    Caricato da

    joao_agostinho_3
    32 visualizzazioni46 pagine

    Titolo originale

    minicurso-html.pdf

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    32 visualizzazioni46 pagine

    Minicurso HTML PDF

    Caricato da

    joao_agostinho_3

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 46

    CAPACITAO EM WEB: LINGUAGEM HTML Rodolfo Miranda Pereira

    Introduo
    HTML significa Hypertext Markup Language (Linguagem de marcao de textos) uma linguagem de descrio de documentos orientada por marcadores denominados TAGs.

    Introduo
    Cada TAG informa ao Browser (Navegador), como ele dever formatar o texto Deve estar dentro dos sinais de menor que (<) e maior que (>). Exemplo: <HTML>, <BODY>, etc. Os TAGs podem ser nicos ou duplos, com incio e fim. Exemplos: TAG nico: <BR> TAG duplo: <P>....</P>

    Introduo
    Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Temos duas sees bsicas:

    HEAD Contm parmetros de configurao do documento.


    BODY Contm o documento em si.

    Introduo
    A estrutura bsica do documento fica da seguinte forma: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body> *** Contedo da Home Page *** </body> </html>

    Introduo
    Podemos adicionar atributos as TAGs: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body background = imagem.gif> *** Contedo da Home Page *** </body> </html>

    Introduo
    Podemos adicionar atributos as TAGs: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body bgcolor = blue> *** Contedo da Home Page *** </body> </html>

    Introduo
    Podemos adicionar atributos as TAGs: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body bgcolor = 00FF00> *** Contedo da Home Page *** </body> </html>

    Introduo
    Podemos adicionar atributos as TAGs: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name = KeyWords content = HTML, Web> <title> Ttulo da Home Page </title> </head> <body text = 00FF00> *** Contedo da Home Page *** </body> </html>

    Ttulo e Subttulos
    TAGs de header (h1 a h6) Exemplo: <h1> Ttulo Principal </h1> <h2> Subttulo </h2> Deixar o texto centralizado: <center> texto </center> Misturando TAGs: <h1><center> texto </center></h1>

    Formatao de textos
    <p></p> - Cria um pargrafo <br> - Pula uma linha

    Formatao de textos
    <b>...</b> - Aplica o estilo negrito <i>...</i> - Aplica o estilo itlico <u>...</u> - Aplica o estilo sublinhado

    Formatao de textos
    <sup>...</sup> - Faz com que o texto fique sobrescrito <sub>...</sub> - Faz com que o texto fique subscrito

    Imagens
    Uso da TAG <img>, que nica, no exigindo finalizao Uso do atributo src com o endereo da imagem Exemplo: <img src = "figura1.gif"> As imagens devero estar armazenados no seu Provedor de Acesso, juntamente com o documento HTML.

    Links
    Uso da TAG <a href=endereo> Nome do link </a> Para o prprio documento <a href = #>Nome do link</a>

    Para outro documento da mesma pgina <a href=documento.html> Nome do link </a>
    Para outra Home Page <a href="http://www.pagina.com.br/">Nome do Link</a>

    Listas Ordenadas
    Iniciadas pela TAG <ol> Cada item utiliza as TAGs <li> e por fim </ol> Exemplo: <ol> <li> facil fazer uma Home Page <li>Tem que ter pacincia <li>Bons Recursos <li>E no exagerar em imagens. </ol> Resultado: 1. facil fazer uma Home Page 2. Tem que ter pacincia 3. Bons Recursos 4. E no exagerar em imagens.

    Listas No-Ordenadas
    Iniciadas pela TAG <ul> Cada item utiliza as TAGs <li> e por fim </ul> Exemplo: <ul> <li>HTML <li>PHP <li>CSS </ul> Resultado: HTML PHP CSS

    Listas No-Ordenadas
    Podemos adicionar o atributo type em ul, o qual pode ser: circle, square ou disc. Exemplo: <ul type = square> <li>HTML <li>PHP <li>CSS </ul> Resultado: HTML PHP CSS

    Refresh Page
    Pginas que chamam outras depois de um tempo definido Exemplo:
    <html> <head> <meta http-equiv = "refresh" content = s;url=documento.html"> <title> Ttulo </title> </head> <body> ***Corpo do Documento*** </body> </html>

    Tabelas
    Podem ser construdas pela TAG <TABLE></TABLE> A TAG <CAPTION> especifica o ttulo de uma tabela A TAG <TH></TH> usada para especificar as clulas de cabealho da tabela A TAG <TD></TD> especifica as clulas de dados de uma tabela A TAG <TR> indica o fim de uma linha na tabela

    Tabelas
    Exemplo:
    <TABLE> <CAPTION> Nota da primeira avaliao </CAPTION> <TD>Notas/Alunos</TD> <TH>Eduardo</TH> <TH>Ana Lcia</TH> <TR> <TH>Notas</TH> <TD>8,0</TD> <TD>9.3<TD> <TR> <TH>No de Inscrio</TH> <TD>376234809</TD> <TD>387349048</TD> </TABLE>

    Tabelas
    Adicionando borda e alinhando <TABLE BORDER> <TD>Primeira clula</TD> <TD>Segunda clula</TD> <TD>Terceira clula</TD> <TR> <TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD> </TABLE>

    Tabelas
    Adicionando borda e alinhando <TABLE BORDER = 4> <TD>Primeira clula</TD> <TD>Segunda clula</TD> <TD>Terceira clula</TD> <TR> <TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD> </TABLE>

    Formulrios
    So construdos entre as TAGs <form> e </form> A TAG <input> especifica uma variedade de campos editveis dentro de um formulrio.

    Exemplo genrico: <form> <input type = X name = Y value = Z size = W> </form>

    Formulrios Tipo Texto


    <form> <input type = text name = nome value = texto. size = 8> </form>

    <form> <input type = text name = nome size = 8> </form>

    Formulrios Tipo Password


    <form> <input type = password name = nome maxlenght = 6> </form>

    Antes de digitar

    Depois de digitar

    Formulrios Tipo Radio


    <form> <input type = "radio" name = "nome" value = "sim"> sim <br> <input type = "radio" name = "nome" value = "no"> no </form>

    Formulrios Tipo CheckBox


    <form> <input type = checkbox" name = Chrome" value = chrome"> Google Chrome <br> <input type = checkbox" name = Firefox" value = firefox"> Mozilla Firefox <br> <input type = checkbox" name = Opera" value = opera"> Opera </form>

    Formulrios Tipo TextArea


    <form> <textarea name = "nome" cols = 20 rows = 3> texto </textarea> </form>

    Formulrios Tipo Select


    <form> <select> <option> opo 1 <option> opo 2 <option> opo 3 </select> </form>

    Formulrios Tipo Reset


    <form> <input type = reset" value = limpar"> </form>

    Formulrios Tipo Submit


    <form> <input type = submit" value = enviar"> </form>

    Atributos da TAG <form>


    Dois mtodos de passagem de dos dados: POST (internamente) GET (barra de endereo) Exemplo: <form action = tratarDados.html method = post>

    Exerccio: Formulrio Completo

    Frames
    Os FRAMES so divises de telas do seu browser que permite a utilizao de vrios documentos no formato HTML. Pode ser usado para criao de menus. A TAG frameset possui os atributos rows e cols. A TAG frame possui os atributos: src name scrolling noresize target

    Frames
    Exemplo:

    <html> <head> <title> Ttulo do Documento </title> </head> <frameset rows = "50%,50%" cols = "50%,50%"> <frame src ="exemplo_form.html> <frame src ="exemplo_form.html"> <frame src ="exemplo_form.html"> <frame src ="exemplo_form.html"> </frameset> </html>

    Frames

    Frames Atributo scrolling


    Exemplo: <html> <head> <title> Ttulo do Documento </title> </head> <frameset rows = "50%,30%,20%"> <frame src ="exemplo_form.html scrolling = no> <frame src ="exemplo_form.html scrolling = yes> <frame src ="exemplo_form.html scrolling = auto> </frameset> </html>

    Frames Atributo scrolling

    Frames Atributo noresize


    Exemplo: <html> <head> <title> Ttulo do Documento </title> </head> <frameset rows = 50%,30%,20%> <frame src =exemplo_form.html noresize> <frame src =exemplo_form.html noresize> <frame src =exemplo_form.html noresize> </frameset> </html>

    Frames Atributo frameborder


    Exemplo: <html> <head> <title> Home Page </title> </head> <frameset rows = "20%,80%" cols = "20%,80%"> <frame frameborder = "no"> <frame src ="exemplo_form.html" frameborder = "no"> <frame src ="exemplo_form.html" frameborder = "no"> <frame src ="exemplo_form.html" frameborder = "no"> </frameset> </html>

    Frames Atributo frameborder

    Frames Atributo target


    Define qual a rea (FRAME) que aparecer o documento especificado pelo link.

    Exemplo:
    <html> <head> <title> Home Page </title> </head> <frameset rows = "20%,80%" cols = "20%,80%"> <frame frameborder = "no"> <frame src =menu.html" frameborder = "no> <frame src =cabecalho.html" frameborder = "no"> <frame src =corpo.html" frameborder = "no nome = corpo> </frameset> </html>

    Link: <a href = formulario.html target = corpo> Inscrio </a>

    Divs
    So definidas pela TAG <div> </div> Usadas para dividir a pgina, assim como Frame. Possuem atributos como:
    Id Class Style Align

    O atributo Align pode ter os valores: Left Right Center

    Divs

    Exemplo

    Grupo PET Informtica Site: www.din.uem.br/pet E-mail: petinformaticauem@gmail.com

    Potrebbero piacerti anche