Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Curso Basico de HTML

    Enviado por

    mariliafox
    7 visualizações13 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    7 visualizações13 páginas

    Curso Basico de HTML

    Enviado por

    mariliafox

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 13

    HTML Curso Bsico

    HTML CURSO BSICO

    Aprenda os conceitos iniciais de HTML em alguns minutos.

    So Paulo Brasil
    1

    HTML Curso Bsico

    ndice

    1 - INTRODUO 2 - TAGS 3 - EDITORES 4 - SALVANDO UMA PAGINA HTML 5 - INICIANDO UMA PGINA 6 - CONSTRUINDO UMA PGINA HTML 7 - TEXTOS 8 - CORES 9 - LISTAS 10 - IMAGENS 11 - LINKS 12 - TABELAS 13 - FORMULRIOS

    3 3 3 3 3 4 5 7 8 9 10 11 12

    So Paulo Brasil
    2

    HTML Curso Bsico

    1 - Introduo
    HTML a sigla de Hyper Text Markup Language (Linguagem de marcao de hipertexto), ou seja, a linguagem usada para criar pginas Web.

    seja executada, necessrio que ela seja salvada como arquivo HTML, veja a figura 1.

    2 - Tags
    Tags so os comandos usados para a construo de sua pgina na web, elas podem ser abertas, como <BR>, ou fechadas, como <p></p>. As tags que possuem / sempre servem para fechar uma tag antes aberta (</font>).

    Figura 1 - Salvando

    5 - Iniciando uma pgina HTML


    O corpo bsico de uma pgina HTML, composto pelas tags, <HTML></HTML> e <BODY></BODY>. No h necessidade de as tags estarem em letra maiscula, ou minscula, porm organizar as tags, mais fcil para a localizao em um cdigo. Esto certos por exemplo: <HTML> <BODY> </BODY> </HTML> <HTML> <body> </body> </HTML> <HtMl> <bodY> </BodY> </HTml>

    3 - Editores
    Para construo de sua pgina na web, podem ser utilizados editores de texto simples, como Word, Wordpad, ou mais simples ainda, o Bloco de Notas. Porm, existem editores muito mais sofisticados e fceis de usar, como o FrontPage, e mais sofisticados e fceis ainda, os Macromedia Dreamweaker e seus similares.

    4 - Salvando uma pgina HTML


    Em qualquer que seja o editor de texto, possvel construir uma pgina HTML, porm para que essa pgina

    So Paulo Brasil
    3

    HTML Curso Bsico Mas, para manter organizao, recomenda-se, uma configurao padro. Por exemplo: <HTML> <BODY> </BODY> </HTML>
    Figura 2.1 Ttulo da Pgina

    Na tag body, pode ser adicionada as configuraes padres da pgina. Atributo bgcolor Serve para alterar a cor de fundo da pgina HTML. <BODY bgcolor=#000055> = Define a cor de fundo (Veja mais sobre as cores no captulo 8) da pgina. Veja figura 2.2

    6 - Construindo Uma pgina HTML


    Para se construir uma pgina HTML, necessrio primeiramente abrir o editor, aqui, ns vamos usar sempre o Bloco de Notas. Primeiramente, digita-se os comandos bsicos. <HTML> <BODY> </BODY> </HTML> Para se colocar um ttulo na pgina (veja figura 2.1), necessrio digitarse as tags <HEAD> e <TITLE>, que vai fora da tag <BODY>. <HTML> <HEAD> <TITLE>Primeira Pgina </TITLE> </HEAD> <BODY> </BODY> </HTML>, A pgina ser exibida assim.

    Figura 2.2 O atributo bgbolor, e a cor definida com ele pelo cdigo, resultam no fundo azul da pgina.

    Atributo background Serve para adicionar uma imagem como pano de fundo da pgina HTML. <BODY background=imagem_fundo.jpg> = Define a imagem Imagem_fundo.jpg, como pano de fundo da pgina HTML. Veja a Figura 2.3.

    So Paulo Brasil
    4

    HTML Curso Bsico <H1>Aqui ser Exibido o texto com a cor padro da pgina, e no maior tamanho possvel</H1> <H2>Aqui ser exibido um texto menor...</H2> <H3>...aqui ser exibido um texto menor...</H3> <H4>...aqui ser exibido um texto menor...</H4> <H5>...aqui ser exibido um texto menor...</H5> <H6>...E aqui ser exibido o menor texto possvel com a tag <Hx></H6> (Veja a figura 3.1).

    Figura 2.3 Repare que como a imagem menor que o fundo, ela se repete, e isso acontece quantas vezes forem preciso.

    Atributo text Serve para definir a cor do texto padro da pgina HTML. <BODY text=#CC0000> = Define a cor padro de tudo aquilo que for escrito na pgina HTML como texto, sem configuraes. Veja Figura 2.4.

    Figura 3.1 Todos os tamanhos possveis do H

    Pargrafos Observe que com o H, no necessrio que se mude de pargrafo, mas caso voc prefira usar uma tag que no seja o H, ou no usar tags, preciso que voc use uma quebra de linhas, pois o HTML, no quebra de linha no mesmo momento que voc digita a tecla Enter. Veja a figura 3.2. Por Exemplo: <H1>Observe que se eu no aciono nenhum comando para quebra de linha o HTML, no quebra 5

    Figura 2.4 Repare que o texto no comeo da pgina est vermelho.

    7 - Textos
    H vrios tipos de forma de se fazer textos em pginas HTML. A mais simples delas com a tag <Hx> (x, corresponde a um nmero de 1 a 6, sendo 1 o maior e seis o menor). Por Exemplo:

    So Paulo Brasil

    HTML Curso Bsico de linha automaticamente, mesmo que eu parta a pala vra ao meio</H1> Veja a figura 3.2.
    baixo, e quando se usa o <P></P>, a linha de baixo pulada, como em um poema.

    A tag <P></P>, ainda serve para configurar pginas. Por Exemplo: <P align=Center>Alinha o texto escrito aqui ao centro da pgina</P> Veja Figura 3.4.

    Figura 3.2 Mesmo quebrando a linha com a palavra ao meio no cdigo, o HTML, no quebra a linha no visual.

    Figura 3.4 Observe o texto alinhado ao centro da pgina.

    Para quebrar a linha, usa-se a tag <BR>, que simplesmente quebra a linha, ou a tag <P></P>, que cria um pargrafo. Por Exemplo: O texto vai aqui, e eu uso o <BR> br para quebrar a linha <P>Quando eu uso o p, eu no preciso quebrar linha,</P> pois o pargrafo que comea depois, j outro Veja a Figura 3.3.

    Obs.: Os Alinhamentos podem ser: Comando Posio align=left Esquerda - Padro align=right align = center Direita Centro

    Atributo font Alm de todos os atributos para se escrever textos no HTML, h o mais til de todos, o atributo font. Nele pode conter a formatao de letra, tamanho e cor. Por Exemplo: <font color="#AA0000" face="arial" size="12">Onde Face a letra, Size, o tamanho da letra e color a cor da letra</font> Veja na figura 3.5.

    Figura 3.3 Observe que quando se usa o <BR>, a linha simplesmente passa a ser a de

    So Paulo Brasil
    6

    HTML Curso Bsico Voc pode no HTML, formatar uma palavra, frase ou letra, como negrito, itlico, sublinhado, subscrito e sobrescrito. Para isso, usa-se os comandos: Formatao Comando Negrito <B></B> Itlico <I></I> Sublinhado <U></U> Subscrito <SUB></SUB> Sobrescrito <SUP></SUP> Por Exemplo: Esse o texto, e essa palavra est em <B>Negrito</B>, essa est em <I>Itlico</I>, essa <U>sublinhada</U>, essa <SUB>subscrita</SUB>, e essa <SUP>sobrescrita</SUP>. Veja Figura 3.6.

    Figura 3.5 Atributo Font

    Comentrio Para se fazer um comentrio em uma pgina HTML, ou seja escrever um texto que no ser exibido no grfico, mas sim no cdigo, e fundamental para manter aquela organizao citada no comeo da apostila. Por Exemplo: <!Voc adiciona esse comentrio em qualquer parte do seu cdigo, e ele no ser exibido no grfico -!> Veja figura 3.6 e 3.7

    Figura 3.6 Cdigo com um comentrio.

    Figura 3.6 As formataes podem ser atribudas a palavras, frases ou letras.

    8 Cores
    Numa pgina HTML, as cores so fundamentais para decorar a pgina. No HTML, as cores podem ser nomeadas pelo nome (em Ingls), como White para branco, green, para verde, blue, para azul e assim por diante. Podem ser codificadas, por nmeros decimais, como 255,160,200, 7

    Figura 3.7 Grfico, observe que o comentrio adicionado no aparece.

    Estilos de caracteres

    So Paulo Brasil

    HTML Curso Bsico ou nmeros hexadecimais, como, FFAA00, na verdade os cdigos so como uma misturas de cores RGB (Red Vermelho, Green Verde, Blue Azul), ento se o cdigo decimal, for 185,0,0, sinal de que a cor vermelha, pois ele adicionou 185 ao vermelho, 0 ao verde e 0 tambm ao azul, se o cdigo hexadecimal for 006600, deduz-se que a cor verde, pois os dois primeiros nmeros (que correspondem ao vermelho RRGGBB), so 0, os dois nmeros do meio, so 6 e os dois nmeros finais so 0. Para escrever uma cor, mais fcil usar-se cdigos, e mais fcil ainda usar os cdigos hexadecimais. Na tag body, bgcolor, define a cor do pano de fundo da pgina e text, a cor do texto padro na pagina, na tag font, color define a cor do texto. Para se escrever uma cor codificada, usase # antes do cdico, e dentro das aspas, por exemplo, #550000

    Figura 4.1 Uma lista numerada.

    <UL>

    <LI>Introduo <LI>Dedicatria <LI>Capitulo 1 </UL> A Lista acima ser exibida conforme mostrada na figura 4.2, onde <UL>, a tag que define lista no-ordenada, ou seja, tpicos, e <LI>, a tag que define os itens da lista.

    9 Listas
    As listas so muito teis, servem para organizar assuntos em tpicos, nmeros, ou menus. Por Exemplo: <OL> <LI>Introduo <LI>Dedicatria <LI>Capitulo 1 </OL> A Lista acima ser exibida conforme mostrada na figura 4.1, onde <OL>, a tag que define lista ordenada, ou seja, numerada, e <LI>, a tag que define os itens da lista.

    Figura 4.2 Observe que os nmeros deram lugar aos tpicos.

    <DL> <DT>Introduo</DT> <DD>Aqui vai a introduo do livro</DD> <DT>Dedicatria</DT> <DD>Aqui vai a dedicatria do livro</DD> </DL>

    So Paulo Brasil
    8

    HTML Curso Bsico A Lista acima ser exibida conforme mostrada na figura 4.3, onde <UL>, a tag que define lista no-ordenada, ou seja, tpicos, e <LI>, a tag que define os itens da lista.

    Figura 5.1 Observe que a foto carregou em seu tamanho original.

    Figura 4.3 Observe que a lista deu lugar a itens detalhados.

    Para corrigir isso, h os atributos HEIGHT e WIDTH, que significam altura e largura respectivamente. Por Exemplo: <img src="foto.jpg" height=120 width=120>. Veja a figura 5.2.

    10 Imagens
    Em uma pgina HTML, imagens so essenciais. Para inserir imagens, basta que ela seja de preferncia GIF, ou JPG, no obrigatrio, mas recomenda-se o uso de imagens GIF, apenas para botes e cones, pois ela possui uma definio de apenas 256 cores e o uso de imagens JPG, para a insero de imagens fotogrficas, pois ela possui uma definio de 16,7 milhes de cores. A tag imagem Na tag imagem, pode-se definir o tamanho, o alinhamento, a borda, etc. Por Exemplo: <img src=foto.jpg>, onde foto.jpg, o nome da imagem, ou <img src=c:/foto.jpg>, onde c: o destino da imagem, e foto.jpg, o nome da imagem. Veja figura 5.1.

    Figura 5.2 Observe que a foto foi reduzida para o tamanho 120px por 120px.

    Voc pode tambm, posicionar apenas a imagem. Por Exemplo: Essa a Foto <img src="foto.jpg" align=right width="200" height="200">Alinha a Figura a direita. Veja na Figura 5.3.

    So Paulo Brasil
    9

    HTML Curso Bsico

    Figura 5.3 Observe que a imagem est alinhada a esquerda.

    Figura 5.5 Observe que a imagem ficou bem abaixo do escrito, e bem longe da borda.

    Voc pode tambm adicionar borda a sua imagem. Por Exemplo: Essa a Foto<img src="foto.jpg" align=left width=200 height=200 border=15>. Veja na figura 5.4.

    11 Links
    Na web, o link fundamental. Para navegar de uma pgina para outra, fundamental o linkamento. A tag que define o linkamento, a <A href=link></A>. Por Exemplo: <A href=pagina2.html>V para a pgina 2</A> Veja a Figura 6.1.

    Figura 5.4 Observe que a figura ganhou uma borda.

    Voc pode definir tambm o espaamento com os atributos hspace (para horizontal) e vspace (para Vertical) em pixels. Por Exemplo: Essa a Foto<img src="foto.jpg" align=left width=200 height=200 hspace=125 vspace=150>. Observe a figura 5.5.

    Figura 6.1 Observe que a frase linkada, est sublinhada e em azul.

    As cores no link pode ser mudada com os comandos link (Cor dos Links), alink (Cor de um link que foi pressionado) e vlink (Cor de um link j visitado), podem ser colocados no body. Por Exemplo: 10

    So Paulo Brasil

    HTML Curso Bsico <BODY text="#880000" link=#AAAA00 vlink=00DD00 alink=#0000AA> <H1> <A href=pagina2.html>V para a pgina 2</A><BR> <A href=pagina3.html>V Para a Pgina 3</A><BR> <A href=pagina4.html>V para a pgina 4</A> </H1> </BODY>. Veja a figura 6.2.

    Figura 6.3 Observe que ao clicar no link, o Outlook Express Abre uma Janela.

    12 Tabela
    Para manter aquela organizao j citada antes, tambm na parte grfica, necessrio a criao de tabelas, para que imagens e textos fiquem organizados em harmonia em sua pgina, para isso, usa-se a tag <table>. Na tag table, atributos como align, alinha a tabela na tela, border, coloca uma borda na tabela. Essa tag possui sub tags, <TR></TR>, que representa as linhas, e devem vir dentro da table, e podem usar tags como align, para alinhar o contedo da clula, e a tag <TD></TD>, que representa as colunas e devem vir dentro da tag <TR>. Por Exemplo: <table align=center border=3> <tr align=center> <td>Esse o texto</td> <td><img src="foto.jpg" width=60 height=60></td> </tr>

    Figura 6.2 Observe que o link nunca clicado, est verde escuro, o j clicado, verde claro, e o que est pressionado, azul.

    Pode-se tambm linkar figuras, basta substituir a frase, pelo destino da figura. Por Exemplo: <A href=pgina2.html><img src=foto.jpg></A>. Voc pode mandar um e-mail, usando o link. Por Exemplo: <a href=mailto:email@servidor.com>Env ia o e-mail para o destino email@servidor.com. Veja a figura 6.3.

    So Paulo Brasil
    11

    HTML Curso Bsico <tr align=right> <td>Texto</td> <td>mais texto</td> </tr> </table>. Veja a Figura 7.1.

    Figura 7.2 Observe que foi inserido uma figura na linha de baixo, e que a clula da segunda coluna da linha de cima foi mesclada. O mesmo pode ser feito com linhas, usando o comando rowspam. Figura 7.1 Observe que a tabela est alinhada ao centro, e que h borda e uma figura, tudo no local especificado.

    13 - Formulrios
    Para criar formulrios, usa-se uma tag chamada <FORM></FORM>. Existem vrios atributos para essa tag que vamos estudar nesse capitulo. Por Exemplo: <FORM action=destino method=get / post> Campo de Texto (Incluso dentro da tag form) Esse, como todos os campos inserido pela tag input. Por Exemplo: Entre com o Nome:<input type=text name=nome size=20>. Onde Type a definio de que esse campo um campo de texto e size, o tamanho do campo. Veja a Figura 8.1.

    Pode-se mesclar clulas. Por Exemplo: <table align=center border=3> <tr align=center> <td>Esse o texto</td> <td colspan=2 align=center><img src="foto.jpg" width=60 height=60></td> </tr> <tr align=right> <td>Texto</td> <td>mais texto</td> <td><img src="img.jpg" width=60 height=60></td> </tr> </table>. Veja a Figura 7.2.

    So Paulo Brasil
    12

    HTML Curso Bsico <input type="checkbox" name="wd">Web Design<BR> <input type="checkbox" name="prog">Programao<BR> <!Onde type o tipo, name o nome, e o escrito o que vai aparecer--!> <BR> <p>Radio Button</p> <input type="radio" name="Masc" value=masc>Masculino<BR> <input type="radio" name="fem" value=fem>Feminino<BR> <BR> <p>Menu</p> <select name="cor" size="1"> <option value="amarelo" selected>Amarelo <option value="Vermelho">Vermelho <option value="verde">Verde </select> <!Onde Select a tag que cria a chackbox, e option so as opes--!> <BR> <textarea name="obs" rows="10" cols="100"> Aqui vai o texto </textarea> <!Onde textarea a tag que cria o campo de escrita, e Aqui vai o texto, o texto que comea escrito no campo--!> <BR> <input type="button" value="Boto"> <input type="Submit" value="Enviar"> <input type="reset" value="Limpar"> <input type="image"src="foto.jpg" width=60 height=30 align=center value="&Boto">.

    Figura 8.1 Observe que h o escrito e depois o campo do formulrio, e que o campo bem maior que o padro.

    Campo de Senha (Incluso na tag form) Por Exemplo: Entre com a senha:<input type=password name=senha size=10>Veja a figura 8.2.

    Figura 8.2 Observe que o campo da senha a metade do campo do nome, e que no lugar de letras, h * no campo senha.

    Voc pode adicionar ainda botes de radio, caixas de seleo, lista ou menus, campos de textos com vrias linhas, boto simples, boto de envio e reset e boto com imagem. Vamos ver: <form action="" method="post"> <p>CheckBox</p> <input type="checkbox" name="bd">Banco de Dados<BR>

    So Paulo Brasil
    13

    Você também pode gostar