Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Basico de HTML

    Enviado por

    renasoft
    15 visualizações7 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    DOC, 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 DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    15 visualizações7 páginas

    Basico de HTML

    Enviado por

    renasoft

    Direitos autorais:

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

    Agora mande salvar o arquivo com o nome index.

    html em qualquer lugar do seu computador, de preferncia se voc no criou nenhuma pasta, salve na sua rea de trabalho para uma visualizao mais rpida. Minimize o bloco de notas, e vamos agora abrir o nosso arquivo salvo. Note que o nosso arquivo j mudou o cone, dependo do seu navegador. No nosso exemplo o cone ficou o do Firefox.

    Ol pessoal, Eu vou postar aqui uma srie de estudos HTML que fundamental para quem est iniciando na programao para Web. Vou seguir uma srie cronolgica comeando no bsico e indo para o avanado. Lio 01 Na lio 01 vou apresentar algumas caractersticas do HTML e vamos conhecer a estrutura bsica do HTML. Caractersticas do HTML uma linguagem de marcao e no de programao; Seus comandos recebem o nome de tags; A maioria dessas tags aparece em pares, uma iniciando um determinado bloco e a outra encerrando esse bloco. Ex: Inicia encerra <head> </head> <title> </title> <body> </body> Algumas tags podem aparecer isoladamente no aos pares. Ex: <BR> e <hr> As tags elas esto sempre contidas entre os sinais menores (<) e maiores (>). Algumas tags possuem os atributos que tem como finalidade expandir a abrangncia das tags. As tags podem ser escritas com letras minsculas ou maisculas. Estrutura bsica do HTML Obs: Essa tag de comentrio: <! comentrio > Tudo o que est entre a tag de comentrio no ser exibido na pgina. <HTML> <!inicia o HTML> <head> <!inicia o cabealho da pgina> <title>Estrutura bsica do HTML</title><!<title> inicia o titulo </title> fecha o titulo> </head><!fecha o cabealho> <body><!inicia o corpo da pgina>

    Pessoal aqui o corpo da pgina aonde inserido o contedo da pgina. </body><!fecha o corpo da pgina> </HTML><!fecha o HTML> Obs: muito importante que seja inserido um titulo na pgina pois ele serve como referncia para os sites de busca. Utilize um titulo criativo em suas pginas. Para testar o nosso primeiro exemplo voc poder utilizar o bloco de notas do Windows como editor de texto para escrever as pginas HTML. Copie o nosso exemplo acima e cole no bloco de notas. Crie uma pasta para salvar. Salve o exemplo como: Lio01.html no se do .html Visualize como ficou o nosso primeiro exemplo. Fim da Lio01! Lio 02 Na lio 02 vamos estudar sobre os Atributos da tag <body> e vamos conhecer a tag <meta>. Vamos ao que interessa!!! Atributos da tag <body> Bom pessoal a tag <body> ela pode conter alguns atributos para alterar a aparncia da pgina. Ex: cor de fundo, imagem de fundo, cor padro do texto que ser exibido na pgina. Vamos conhecer agora dois atributos o Bgcolor e o atributo Text. Bgcolor: esse atributo define uma cor de fundo para a pgina. Podemos definir as cores de trs maneiras diferentes: nome da cor em ingls, em hexadecimal ou em RGB. Aconselho utilizar as cores em ingls. Ex: <body bgcolor= nome da cor > <body bgcolor= black> No nosso exemplo o fundo da pgina ser Preto. Text: O atributo Text define uma cor para o texto exibido em toda a pgina. Ex: <body text=nome da cor> <body text=red> Nesse exemplo o texto da pgina ser exibido na cor vermelha. Exerccio <html> <head> <title>Atributos da Tag <body></title> </head> <body bgcolor=black text=red> Fundo da pgina Preto<br><! Br quebra de linha mais a frente vamos estudar> Cor do texto Vermelho </body> </html>

    Salve o nosso exerccio. No esquea do .html Veja o resultado como ficou. Vamos agora conhecer a Tag <meta> !!! A tag <meta> inserimos ela na tag <head> como j estudamos o cabealho da pgina que contm o ttulo. Informo a vocs que no obrigatrio inserir a tag <meta> em suas pginas pois o uso dessa tag til para passar informaes aos sites de busca e atualizar a pgina em um intervalo de tempo definido. A tag <meta> possui trs atributos: name: indica um nome para a informao; http-equiv: esse atributo faz uma correspondncia com campos de cabealho do protocolo HTTP. content: define o contedo. <head> <meta http-equiv=content-type content=text/html; charset=iso-8859-1> <meta name=keywords content=html,programao,web,> <title> Tag <meta></title> </head> Para o atributo http-equiv existem poucos valores sendo o mais content-type cuja funo indicar o conjunto de caracteres usado pela pgina que est sendo exibida, para que o navegador possa exibir corretamente os caracteres especiais. Para exibio correta da lngua portuguesa usamos charsetiso-8859-1. Particularmente a melhor aplicao do http-equiv na minha opinio o Refresh cujo o objetivo fazer com que o navegador execute uma determinada pgina aps um intervalo de tempo. A pgina a ser executada definida por quem est programando e o intervalo de tempo tambm. Ex: <meta http-equiv=refresh content=3; url=http://www.forum-invasao.com.br> No nosso exemplo a pgina do frum invaso ser exibida aps 3 segundos. A palavra chave mais usada para o atributo name keywords que tem como funo ajudar os sites de busca. <meta name=keywords content=html,programao,web,> Palavras de busca: html,programao,web. Exerccio <html> <head> <meta http-equiv=content-type content=text/html; charset=iso-8859-1> <meta http-equiv=refresh content=3; url=http://www.forum-invasao.com.br> <title>Tag <meta></title> </head> <body bgcolor=yellow text=blue> Frum invaso Aps 3 segundos aguarde<br> E ai pessoal entenderam a tag <meta> ?<br> Duvidas Postem Ok </body> </html> Salve o nosso exerccio. Veja o resultado como ficou.

    Fim da Lio 02! Lio 03 Ol, nessa lio vamos entrar na parte de manipulao de textos aonde vamos estudar cabealhos, pargrafos, quebra de linha, linha horizontal. Vamos ao que interessa!!! Cabealhos Cabealhos so usados para dividir textos em sees. Eis a tag de cabealho: <h1> cabealho nvel 1 </h1> <h2> cabealho nvel 2 </h2> <h3> cabealho nvel 3 </h3> <h4> cabealho nvel 4 </h4> <h5> cabealho nvel 5 </h5> <h6> cabealho nvel 6 <h6> Obs: O nvel de cabealho varia de 1 a 6 depende o nvel usado. Informo a vocs que o tamanho vai do menor para o maior, ou seja, o cabealho de nvel 1 maior do que o de nvel 2 etc. Exerccio <html> <head> <title> Cabealhos </title> </head> <body bgcolor=black text=White> <h1> Administrao </h1> <h2> Moderador </h2> <h3> Membro Elite </h3> <h4> Estudante </h4> <h5> Iniciante </h5> </body> </html> Salve o exerccio. Visualize para ver como ficou. Agora vamos aprender como alinhar cabealho. Alinhamento de cabealho ocorre devido a atributos que so inseridos na tag <h>. conhecemos agora os atributos de alinhamento: Align= left: esse atributo ir alinhar o texto a esquerda; Align=center esse atributo centraliza o texto; Align=right esse atributo ir alinhar o texto a direita. Exerccio <html> <head> <title> Cabealhos </title> </head> <body bgcolor=black text=White > <h1 align=center> Administrao centralizado </h1> <h2 align=right> Moderador alinhado direita </h2> <h3 align=left> Membro Elite alinhado esquerda </h3> <h4 align=center> Estudante centralizado </h4>

    <h5 align=center> Iniciante centralizado </h5> </body> </html> Salve o exerccio. Visualize para ver como ficou. Pargrafos Chegou a hora de conchermos as tags de pargrafos. Antes de tudo quero deixar claro que o navegador no interpreta o ENTER como pargrafo. Voc pode utilizar o ENTER apenas para ajustar o texto na hora em que voc estiver digitando. Eis a tag de pargrafo: <p> Pargrafo </p> Ex: <p> Esse um pargrafo aqui onde eu ento vou inserir todo o meu texto. Perceba que eu inicio o texto com <p> e no final para fechar o pargrafo a tag de encerramento </p>.</p> Obs: em pargrafos longos se utliza o mesmo esquema inicia com <p> e encerra com </p>. Exerccio <HTML> <head> <title> Pargrafos <p> </p> </title> </head> <body bgcolor= Orange text= White > <p> Gostaria de saber de voc que est acompanhando o nosso estudo em HTMl se eu devo continuar.</p> <p> Comente para que eu possa saber se eu devo continuar ou no postando as lies.</p> <p> Ou ento caso eu tenha que melhorar em algum aspecto para que a compreenso das lies possa ser melhor.</p> <p> Ok galerinha vlw!!!</p> </body> </HTML> Salve o exerccio. Visualize para ver como ficou. Quebra de Linha Como eu comentei em uma lio passada que iramos estudar sobre quebra de linha chegou a hora! Eis a tag de quebra de linha: <BR> Obs: essa tag no possui a tag de fechamento. Com essa tag voc vai apenas reinicia o texto na linha seguinte. Ou seja, voc vai fazer uma quebra na linha do texto. Caso voc queira colocar certa distncia entre dois pargrafos voc pode utilizar varias vezes a tag <BR>. Vamos fazer agora um exerccios para um melhor entendimento. Exerccio <HTML> <head> <title> Quebra de Linha </title> </head> <body bgcolor= Black text= White >

    <p>Visitada atravs de um monitor, internet no revista, no rdio, no TV.<br> Apesar de transmitir mensagens sonoras ao vivo. Apesar dos clipes em vdeo. Experimente mostrar um artigo de revista e suas fotos pela TV.<BR> Ou usar o rdio para transmitir um filme.<BR> Ou transcrever a narrativa de um jogo de futebol em uma revista.<BR> Ou fazer o layout de uma mensagem de secretria eletrnica.<BR> Portanto, muito critrio em usar uma a internet como algo que ela no .</p> </body> </HTML> Salve o exerccio. Visualize para ver como ficou. Linha Horizontal Bom pessoal a linha horizontal ela usada para separar sesses em uma pgina Web. Eis a tag para Linha Horizontal: <hr> Essa tag possui vrios atributos: Size: configura a espessura da linha em pixels. Width: configura o comprimento em porcentagem ou em pixel. width= 50% porcentagem width= 50 pixel Align: posicionamento da linha, podendo utilizar align=left , align=right e align=center. Noshade: no ter efeito tridimensional. Obs: voc pode utilizar a tag <hr> com atributos ou sem. Exerccio <html> <head> <title> Linha Horizontal </title> </head> <body bgcolor=black text=White > <p>Visitada atravs de um monitor, internet no revista, no rdio, no TV.<br> Apesar de transmitir mensagens sonoras ao vivo. Apesar dos clipes em vdeo. Experimente mostrar um artigo de revista e suas fotos pela TV.<BR> Ou usar o rdio para transmitir um filme.<BR> Ou transcrever a narrativa de um jogo de futebol em uma revista.<BR> Ou fazer o layout de uma mensagem de secretria eletrnica.<BR> Portanto, muito critrio em usar uma a internet como algo que ela no .</p> <hr size= 3 width= 80% align= Center noshade> <p>A Internet um veculo de comunicao, com caractersticas prprias.<br> Voc pode ver a rede a qualquer hora de onde desejar.<br> Imprimir um texto, pegar uma imagem, mudar de assunto se desejar, enviar e-mail, pesquisar um tema, se encontrar nos chats, grupos de discusso, mailing list enfim d pr fazer de tudo na Internet.<br> A rede tem uma linguagem prpria, mas poucos esto interessados nela.<br> A maioria das pessoas que desenha interfaces adapta idias do design grfico, da TV ou da propaganda.</p> </body> </html> Agora faa voc mesmo um exerccio sem atributos utilize apenas <hr>. Salve o exerccio Visualize para ver como ficou. Fim da lio 03 Abrao!

    Você também pode gostar