Scribd Logo
Carica

Benvenuto in Scribd!

  • Manual

    Caricato da

    Ana Marta Santos
    12 visualizzazioni32 pagine

    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
    12 visualizzazioni32 pagine

    Manual

    Caricato da

    Ana Marta Santos

    Copyright:

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

    0768 INTERNET CRIAO DE SITES WEB

    Associao Comercial e Industrial de Vila do Conde Servirege Consultoria Empresarial Unip. Lda

    Ana Marta Maia Santos

    2013

    Ficha Tcnica
    Formadora Modalidade de Formao Eixo de Interveno Tipologia de formao rea(s) de Formao Ana Marta Maia Santos Formao Modular Certificada Adaptabilidade e Aprendizagem ao Longo da Vida Formaes Modulares Certificadas Cincias Informticas

    Cdigo e Designao do Referencial 0768 Internet Criao de sites WEB de Formao/Curso Cdigo curso/ao Interno Confere Certificado Entidade Formadora Entidade Promotora/Beneficiria Local de Realizao Sala Durao Total da ao Data de inicio Horrio Nvel de Formao BA00000768_SRV_006_01_13 Sim Servirege Consultoria Empresarial Unip. Lda Associao Comercial e Industrial de Vila do Conde Rua da Misericrdia, 4480-758 Vila do Conde 5 50 horas 18-04-2013 20:00h 23:00/00:00h 2

    ndice

    0768 ........................................................................................................................................... 1 INTERNET ................................................................................................................................. 1 CRIAO DE SITES WEB ...................................................................................................... 1 O QUE HTML? ....................................................................................................................... 4 CONSTRUINDO SEU PRIMEIRO SITE ................................................................................ 4 CABEALHO ............................................................................................................................. 4 CORPO .................................................................................................................................... 11 FONTE ..................................................................................................................................... 14 UTILIZANDO IMAGENS ...................................................................................................... 15 CRIAR TABELAS ................................................................................................................... 20 MARCADORES DE TEXTO ................................................................................................. 21 CRIAR FORMULRIOS ....................................................................................................... 22 FRAME .................................................................................................................................... 25 IFRAMES ................................................................................................................................ 27 ENVIO DOS FICHEIROS PARA O SERVIDOR POR FTP .............................................. 29 REFERENCIAS BIBLIOGRFICAS .................................................................................... 31

    O QUE HTML?
    HTML, HyperText Markup Language, ou Linguagem de Marcao de Hipertexto, uma linguagem de marcao que serve para criar pginas na WEB. Em contrapartida com outras linguagens, como C e Pascal, por exemplo, a linguagem HTML no compilada, e sim interpretada por navegadores. Dessa forma, toda a estrutura de cdigos criada nessa linguagem ser convertida em uma pgina. Os documentos HTML so arquivos de textos que podem ser criados e editados em editores de textos comuns, como o bloco de notas do Windows, TextEdit do Macintosh, assim como ferramentas como o AEdix, que possui funcionalidades prticas que pode facilitar o trabalho.

    CONSTRUINDO SEU PRIMEIRO SITE


    - ESTRUTURA BSICA Todo site em HTML comea pela tag <html> e termina com a tag </html>. Tag pode ser considerado como o cdigo da linguagem HTML propriamente dito. Desse modo, todas as palavras inseridas dentro de menor (<) e maior (>) so chamadas de tag. A estrutura bsica de um documento em HTML possui as seguintes tags:

    Qualquer projeto feito nessa linguagem de marcao possui duas estruturas simples: o cabealho e o corpo.

    CABEALHO
    Para escrever o cabealho, deve-se iniciar com <head> e terminar com </head>. Dentro do cabealho existe uma tag chamada TITLE. Usando <title> e </title>, o usurio pode escrever dentro dessas duas tags o ttulo da pgina, que porventura ser exibida na janela de visualizaes. Veja o exemplo abaixo:

    Esse exemplo gerou a seguinte pgina:

    No prprio cabealho existem outras tags que podem ou no ser usadas, isso vai depender do projeto, se vai precisar ou no. <style> : Define a formatao em CSS Assim como voc faz a formatao do texto em HTML pode-se fazer em CSS, veja o exemplo:

    As Linhas acrescentadas foram a partir de <style>...</style>, a primeira trata-se de uma folha de estilos escrita para CSS (text/css). A segunda linha significa dizer que as regras de estilos a seguir aplicam-se ao elemento (body). A terceira linha determina a cor do texto, que est representada em hexadecimal, neste exemplo a cor do texto ser azul (color: #0000FF). A quarta linha refere-se ao estilo da fonte (font-family: Verdana). A linha a seguir refere-se

    a cor para o fundo da pgina, que ser amarelo (background-color: #FFFF00), veja como ficou essa pgina:

    Em CSS aplicam-se regras para a criao de documentos, cada regra composta por trs etapas:

    1Um selector: informa ao browser qual a parte do documento a qual se aplica a regra (exemplo: body); 2Uma propriedade: especifica qual o aspecto do layout a ser utilizado (exemplo: color e background-color, so duas propriedades distintas); 3Um valor: fornece o valor da propriedade (blue ou #0000FF e yellow ou #FFFF00); No exemplo anterior as regras foram combinadas, elas valem para o mesmo elemento body, escrevemos de uma s vez o elemento e colocamos com suas propriedades juntas. Tambm poderia ser feito da seguinte maneira: body {color: blue} body {background: yellow}

    <link> Define ligaes da pgina com outros arquivos ou com outras pginas. Os links so pontos clicveis do documento HTML que levam a qualquer documento da sua pgina ou outras pginas da internet, em ambos os casos a tag ser a mesma, o que vai mudar o endereo, Vejamos:

    <a href="nome-do-lugar-a-ser-levado">descrio</a> O cdigo a seguir levar para outra pgina da web:

    Obs: Em nome-do-lugar-a-ser-levado voc coloca o arquivo HTML que voc deseja, por exemplo: pagina2.htm ou uma URL como: http://badoo.com/anneingrid/ Descrio: o que vai aparecer sublinhado na sua home page indicando que pode ser clicado.

    Neste exemplo de cdigo, a descrio: Perfil DELA, ficar sublinhado na home Page, ao ser clicado levar para outra pgina, veja o exemplo:

    Cores Dos Links

    Podemos utilizar qualquer cor para o link, no entanto, recomenda-se a cor padro azul (blue) indicada pelo cdigo rgb=#0000FF. Isto porque quando se clica sobre um link sua cor alterada para indicar ao usurio que aquele link j foi consultado. Vlink Indica a cor dos links que j foram consultados. Alink Indica a cor do links ativados na pgina. A notao para as cores dos links, alinks e vlinks : <body link= "#rrggbb" vlink= "#rrggbb" alink= "#rrggbb> </body> Como fazer um link abrir em outra janela? Se voc desejar colocar um link para abrir em outra janela, para que o visitante n o saia do seu site, por exemplo, colocar um link para uma home page fora do site. Para fazer isso simples, basta inserir o atributo TARGET, assim: <a href= http://badoo.com/anneingrid/ target= _blank> descrio</a> Veja o exemplo como fica:

    Como fazer uma imagem ter um link? Assim como faz para inserir um link em uma palavra tambm possvel fazer com que uma imagem possa ter um link, a diferena est apenas na descrio, em vez de colocar o texto coloca-se a tag da imagem, veja o exemplo:

    10

    <meta> Define as propriedades da pgina como: autor, descrio da pgina para buscadores, etc. A meta facilita ao usurio encontrar seu site, como tambm se pode assinar seu site, declarando sua autoria sobre o cdigo fonte. Como utilizar: devem ser includas no seu cdigo HTML, dentro da tag <head>, da seguinte maneira:

    Author: define quem o autor do site; Description: o buscador apresentar como um resumo do seu site; Keywords: nesta tag pode colocar maior numero de palavras, sempre separadas por vrgula e em letras minsculas pois alguns buscadores tem problemas com letras maisculas e podem ignorar seu site. Procure usar palavras coerentes com o contedo do site. Refresh Alm de busca, a tag meta tambm serve para chamar outra pgina em um determinado espao de tempo, usando o refresh pode-se fazer isso, pode inseri-la no corpo tambm <body> ... </body>. Veja o exemplo: <meta http-equiv= "refresh" content= "5" url= "index.html"> Content: Tempo em segundos na qual ir para outra pgina; Url: endereo, pode ser um link;

    11

    CORPO
    Para redigir o corpo, inicia-se com <body> e conclui-se com </body>. Subttulo No deve ser confundido com o ttulo do documento, o ttulo inserido na seo do cabealho <head> <title>...</title> </head> enquanto o subttulo colocado na seo do corpo documento HTML <body>...</body> O subttulo possui 6 nveis de tamanho, a tag usada o <hy>, onde o y o tamanho que varia de 1 at 6, quanto menos o nmero, maior a letra. <h1>...</h1>; <h2>...</h2>;...<h3>...</h3>; <h4>...</h4>; <h5>...</h5>; <h6>...</h6> Abaixo, tem-se um pequeno exemplo:

    Esse cdigo gerou a seguinte pgina:

    12

    Formatando o Texto Quebra de Linha <br> faz uma quebra de linha, no precisa fechar a tag. Pargrafo Quando for utilizar um pargrafo, deve-se implementar a tag <p>. Veja exemplo:

    O cdigo acima gerou a seguinte pgina:

    13

    Alinhamento Voc pode escolher alinhar seu pargrafo. Pra isso, basta usar a tag ALIGN. Exemplo:

    O cdigo acima ficou da seguinte forma:

    Texto Pr-formatado

    14

    Este recurso deixa o texto exatamente da forma que foi digitado. Usa-se a tag <pre>...</pre>. Exemplo:

    O exemplo anterior ficou da seguinte maneira:

    FONTE
    Negrito: podemos escrever o texto em negrito o incluindo dentro das etiquetas <b> ... </b>. Esta mesma tarefa desempenhada por <strong> ... </strong> sendo ambas equivalentes. Itlico: existem duas maneiras: <i> ... </i> e outra um pouco mais longa: <em> e </em> mais prtico escrever da primeira forma, por isso que os sites que encontramos escrevem dessa forma Sublinhado: no uso de sublinhado devemos prestar ateno, pois os links hipertexto tambm so sublinhados e pode confundir o leitor. Usa-se a tag <u>...</u>. Subscrito e sobrescrito: as tags empregadas so: <sup> ... </sup> para os sobrescritos e <sub> ... </sub> para os subscritos.

    15

    Veja o exemplo:

    O cdigo anterior fica dessa forma:

    UTILIZANDO IMAGENS
    Para utilizar imagens em HTML simples, usamos a tag : <img src="caminho-para-o-arquivo"> Onde <img> significa Imagem e <src> Source. Esse "caminho-para-o-arquivo" pode ser uma rea especfica do computador, ou pode ser um link .

    16

    Obs: importante lembrar que as imagens possuem o tipo, seja JPG (imagem), GIF (animaes), PNG (fotos com mais definio), etc.

    Veja o exemplo:

    Veja o exemplo como fica:

    Atributo ALT A funo do ALT basicamente fazer uma "Etiqueta". Quando o usurio deixar o mouse sobre a imagem ir aparecer algum texto identificando a imagem. Sintaxe: <img src= "tux2.jpg" alt= "TUX FEMININO">

    17

    Voc pode escrever qualquer frase no atributo alt, veja como fica:

    Atributos HEIGHT e WIDTH Esses dois atributos controlam a altura e a largura. Essa medida baseada em pixels. Sintaxe: <img src= tux2.jpg alt= TUX FEMININO height=30 width= 50> Veja como ficou ao acrescentar os atributos height e width, a imagem tux2.jpg ficou menor:

    18

    Inserir Bordas: Podemos inserir bordas nas imagens atravs do atributo border, veja o exemplo: <img src= "tux2.jpg" border= "2"> <img src= "tux1.jpg" border= "8">

    Podemos brincar com as imagens, isso vai depender da sua criatividade, alm de cores e animaes podemos inserir imagens como fundo do site. Veja exemplos: Imagem Fixa/marca dgua: A imagem de fundo faz parte da tag body. Basta voc incluir na tag body um parmetro (BGproperties=fixed) para fazer com que o fundo fique fixo. <body background= tux3.jpg bgproperties= fixed>

    19

    O cdigo anterior gerou a seguinte pgina:

    Quando existe contedo na pgina, ento o que vai descer apenas o contedo e a imagem ficar fixa. Imagem no fixa no fundo da tela. Usaremos o mesmo exemplo anterior, s que usando apenas o BACKGROUND. Exemplo:

    20

    <body background= tux3.jpg> Dessa maneira, a imagem descer juntamente com o contedo do site.

    CRIAR TABELAS
    Tabela um conjunto de clulas organizadas na qual podemos alojar diversos contedos. No incio pode ser difcil trabalhar com esta estrutura, mas, se desejar criar uma pagina de qualidade ver que ela oferece muitas possibilidades. Para iniciar, usa-se a tag <table>...</table> , as tabelas so formadas por linhas e colunas, na qual representamos: <tr>...</tr> : so as linhas; <td>...</td>: so as colunas; Para inserir uma tabela com trs colunas e duas linhas, com borda nmero 10, possuindo o texto dentro da tabela de forma justificada, deve-se implementar o seguinte cdigo:

    O exemplo anterior gerou a seguinte pgina:

    21

    A tag <table align = center color = "black" border = 10 width = "700"> serve para criar uma tabela que ficar centralizada na pgina da WEB, possuindo cor preta, borda 10 e largura de 700 pixels. A tag <th class = "Leis de Trnsito do Brasil" colspan = 3> pode ser implementada para mesclar colunas. Nesse caso, ela ir mesclar 3 colunas. Para adicionar textos com corpo justificado dentro de uma coluna, usa-se a tag <td align = justify>.

    MARCADORES DE TEXTO
    Os marcadores de textos tambm so listas, existem as listas numricas e com smbolos. Para criar marcadores numricos usa-se a tag <ol>...</ol>; Para criar marcadores com smbolos usa-se <ul>...</ul>; Veja no exemplo a seguir:

    22

    O exemplo anterior gerou a pgina:

    Tambm, para no digitar sempre a tag <li> podemos usar da seguinte maneira: <ol start= 10> , comear do 10 os marcadores;

    CRIAR FORMULRIOS
    Os formulrios HTML so estruturas que permitem que usurios submetam dados a uma determinada pgina. Esses dados podem ser armazenados dependendo da aplicao. Os forms so definidos pela tag <form>...</form> Parmetros do form

    23

    Action: para onde os dados sero submetidos(tratados); Method: o mtodo de transmisso dos dados, pode ter dois valores: GET- Passa os valores pela URL, ou seja, podemos ver as variveis passadas na Url da pgina destino definida no campo action. POST- assa as variveis de maneira transparente para o usurio. o mtodo mais aconselhvel. Elementos do Form Podemos inserir vrios dados em um formulrio, definimos pela tag <input> . Name: identifica a varivel; Campo Texto: entrada de texto normal; Campo Senha: quando o usurio digita aparece apenas (*), mas esse campo no possui criptografia, pode ser visto; Hidden: fica visvel ao digitar. Password: fica os (*) ao digitar. Value: define um valor para o documento; Button: chama uma funo que roda no browser; Rdio: o usurio s pode escolher uma nica opo. Para que o interpretador saiba que as opes fazem parte do mesmo grupo, e permita que s uma seja selecionada, basta colocar o mesmo nome no parmetro name dos botes rdio. CheckBox: o usurio escolhe mais de uma opo; Reset: limpa os campos; Submit: envia; Exemplo de um Formulrio:

    O cdigo anterior gerou a seguinte pgina:

    24

    Inserir Barra Para inserir uma barra usa-se a tag <hr></hr>, para deix-la mais grossa use o termo size(volume) juntamente com a tag <hr>. Veja exemplo:

    Veja como ficou:

    25

    Podemos controlar a largura das barras usando width =...% (porcentagem), exemplo: <hr width= 50%>

    FRAME
    Os FRAMES possibilitam o uso de vrios documentos HTML dentro de um s. Isso deixa dividir o ecr em linhas e/ou colunas. Normalmente uma pgina que usa Frames basicamente dividida em dois elementos, os Framesets e os Frames. O FRAMESET um arquivo do html, que substitui o <BODY> </BODY> por <FRAMESET> </FRAMESET>.

    Atributos ROWS e COLS Rows - Determina a diviso de tela em linhas. Cols - Determina a diviso de tela em Colunas. medida pode ser em porcentagem (%). Exemplo: <frameset rows="25%, 25%, 50%"> </frameset> Tambm pode se usar o "*" para determinar o resto. Exemplo: <frameset Cols="25%, 50%,*"> </frameset>

    26

    Atributos FRAMESPACING e FRAMEBORDER Framespacing - Determina a distncia dos frames em pixels. Frameborder - Diz se vai existir ou no bordas (1 para sim e 0 para no). <frameset rows="25%, 25%, 50%" framespacing="3" frameborder="0"> </frameset

    Tag <Frame> As tags <frame> devero ser organizadas no cdigo de acordo com a ordem dada pelo frameset, por que ser assim que ser exibido na tela.

    <frameset rows="15%,*,75"> <frame src="http://www.google.com.br"> <frame src="http://www.saraiva.com.br"> <frame src="http://www.submarino.com.br"> </frameset> Esse cdigo gerou a seguinte pgina:

    27

    Atributo NAME e SRC Indica o nome dessa frame, facilitando sua pesquisa por ele, caso precise. O SRC utilizado para mostrar o caminho de onde est a pgina que vai ser carregada.

    IFRAMEs
    Iframes so basicamente quadros que podem ser adicionados dentro da pgina, para fazer uma espcie de "Mural de recados". <iframe width='700' height='546' src='http://www.google.com.br'> </iframe> <iframe width='400' height='450' src='http://www.saraiva.com.br'> </iframe> frameborder='0' frameborder='0'

    Como voc pode ver, alguns atributos so:

    28

    Width - Define a Largura Height - Define a Altura O cdigo acima gerou a seguinte pgina:

    29

    Envio dos Ficheiros para o servidor por FTP


    FileZilla considerado o melhor programa FTP. O FileZilla um programa para enviar os arquivos do seu site para o servidor. possvel fazer o download do FileZilla no site oficial do programa, filezillaproject.org. O programa est disponvel em verses para Windows, Linux e Mac; faa o download do arquivo executvel ou zip, siga as telas e facilmente ter o programa instalado no computador. O FileZilla deteta automaticamente o idioma do sistema operacional. Lembrando que para funcionar a ligao com o servidor, j se deve ter configurado o DNS do site.

    Abrindo o programa, no topo tem a opo para ligao rpida com o servidor, basta adicionar host (ftp.exemplo.com), nome de usurio e senha. Nas janelas da esquerda so os arquivos do computador, e as janelas da direita do servidor. A grande janela na parte inferior mostra o andamento das transferncias em execuo.

    30

    Entrando no menu arquivo, e gerenciador de sites, encontra-se a janela para criar uma conta de conexo do site ou diversos sites. Clique em novo stio, escolha o nome do site, na parte direita adicione o host, sempre iniciando com ftp ( ftp.exemplo.com), em logon type selecione normal. Por fim preencha nome de usurio e senha, e clique em conectar.

    31

    Transferir arquivos o objetivo do FileZilla, interface mais fcil para isso impossvel. Selecione os arquivos do seu site nas janelas da esquerda, e clique com boto direito e enviar; os arquivos devem normalmente ser enviados para a pasta public_html (como destaquei na imagem acima), que a pasta dos arquivos que so exibidos quando um utilizador acessa o website. Claro que voc tambm pode fazer o download dos arquivos contidos no servidor para o seu computador.

    Referencias Bibliogrficas
    1. HTML 5, Lus Abreu, FCA 2. CSS3, Pedro Remoaldo, FCA 3. HTML.net , http://pt-br.html.net/tutorials/css/
    4. Guia Prtico do Dreamweaver CS5, com HTML, CSS e JavaScript, Pdero Remoaldo, Edies Centro Atlntico

    Potrebbero piacerti anche