Scribd Logo
Upload

Welcome to Scribd!

  • Web Designer

    Uploaded by

    mikhaela
    18 views13 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    18 views13 pages

    Web Designer

    Uploaded by

    mikhaela

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 13

    Webdesigner

    Aprenda a fazer sites neste Curso Grtis de Webdesigner

    Com o seguinte contedo programtico:

    Introduo - HTML Criando Documentos HTML Formatao de Textos Controle de Cores e Grficos de Fundo Links Listas Imagens Tabelas Cores Tipologia Ferramentas do Photoshop Visualizando as Imagens Selecionando e Movendo Imagens Modificando as Selees Transformando as Selees Ferramentas de Texto Criaes de Arquivos para Web Vocabulrio Utilizado no Photoshop Seja um Bom Webdesigner! Apresentando o Dreamweaver Criando um Novo Site Links e Navegao Formulrios Dicas para a Criao de um Site Bibliografia/Links Recomendados

    FICHA DE INFORMAES
    Embasamento Legal: nossos cursos tm base legal constituda pelo Decreto Presidencial n 5.154 e nossa metodologia segue as normas do MEC atravs da Resoluo CNE n 04/99.

    Pr-requisitos: no h pr-requisitos para esse curso, sugere-se ter Ensino Mdio completo (no obrigatrio). Carga Horria do Certificado: 45 horas Objetivos: curso livre para Capacitao Profissional, onde o aluno aprender as principais noes e conhecimentos de Webdesign, como utilizar o Dreamweaver, Photoshop, HTML, formatao de pginas, estilos, noes de cores. Vantagens do Certificado: * Atualizar seu Currculo, aumentando suas chances para conquistar um bom emprego; * Aumentar suas chances de promoo no emprego (atual); * Completar horas em atividades Extracurriculares (geralmente exigidas em Faculdades); * Progresso Funcional para Servidores Pblicos; * Pr-Requisito para concursos e cursos.

    Introduo - HTML
    Os arquivos em HTML Hyper Text Markup Language - Linguagem de Formatao de Hipertexto - pode ser gerados em qualquer editor de texto. possvel transformar um arquivo .doc (formato Word) para HTML. A linguagem HTML utiliza marcaes especficas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento. Os comandos HTML so chamados de TAGS, compreende as marcas padres que so utilizadas para fazer indicaes a um browser. Assim como em outras linguagens, os comandos tm uma sintaxe prpria e seguem algumas regras: -> As TAGs aparecem sempre entre os sinais de menor que (<) e maior que (>); -> Geralmente so utilizados em pares , sendo que a TAG de finalizao de um comando precedida de uma barra (/). A maioria das etiquetas tem a sua correspondente de fechamento:

    <etiqueta> ............................................. </etiqueta>

    De um modo geral, as tags aparecem em pares, por exemplo:

    <H1> Cabecalho </H1>

    Onde:

    -> A tag <H1> indica -> O texto Cabealho indica -> E a tag </H1> indica o final da instruo.

    o o

    incio texto que

    na ser

    instruo; formatado;

    O smbolo que termina uma determinada etiqueta igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente. As etiquetas so necessrias, pois servem para definir a formatao de um bloco de texto, e assim marcamos onde comea e termina o texto com a formatao especfica por ela. <font> PrimeCursos do Brasil </font> H excesses para a utilizao dos pares de etiquetas. Por exemplo, a que indica um final de um pargrafo: <p> no necessita de uma correspondente </p> para terminar a formatao do bloco de texto. A etiqueta que indica quebra de linha <br> tambm no precisa de etiqueta correspondente, entre outras.

    Criando Documentos HTML


    Todo documento HTML precisa conter certas tags padronizadas, no mnimo <HEAD>, </HEAD>, <BODY> e </BODY>, pois elas constituem as duas partes bsicas de um documento HTML que so: o HEAD (cabealho) e o BODY (corpo do documento). <HTML> <HEAD> <TITLE>Curso </HEAD> <BODY> <H1>Este o Bem-vindo ao mundo Este </BODY> </HTML>

    de

    WebDesign</TITLE>

    primeiro do HTML. o

    nvel de cabealho.</H1><p> Este o primeiro pargrafo.<p> segundo paragrfo

    A tag <HEAD> contm, entre outras coisas, o <TITLE> (ttulo), e a tag <BODY> armazena todo o contedo do documento, normalmente composto de pargrafos, listas, tabelas, etc. Para interpretar corretamente o contedo do documento HTML, os browsers esperam informaes em acordo com as especificaes HTML.

    Abra o bloco de notas, e digite o cdigo acima e salve-o como primeiro.html. Em seguida, abra arquivo primeiro.html no navegador (Internet Explorer, ou outro).

    Explicao: A primeira TAG que encontramos no documento <HTML>. Ela o elemento raiz de um documento HTML, pois dentro dela est todo o contedo da pgina. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o contedo que dever ser exibido esta entre as tags <HTML> e <HTML>. O texto contido ente as TAG <HEAD> e <HEAD> define o cabealho do documento. Estas informaes so importantes pois indicam ao navegador a forma que a pgina deve ser apresentada graficamente. A tag <TITLE> define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est informado Curso de WebDesign. A tag <BODY> informa ao navegador o que dever ser exibido graficamente. O corpo da pgina BODY constituido pelo contedo que est entre as tags <BODY> e </BODY>. 2.1 ELEMENTOS BSICOS 2.1.1 TTULOS

    Todo documento em HTML deve possuir um ttulo. O ttulo exibido em local separado da pgina, e utilizado para identificar o documento em outros contextos, de modo que o ttulo deve indicar claramente o contedo do documento. As tag utilizadas para ttulos so: <TITLE> e <TITLE>. <html> <title>Este <body> <h2>E Aqui </body> </html>

    este entra o o cabealho texto

    o de do

    ttulo</title> nvel documento 2</h2> ...

    2.1.2 CABEALHO Os cabealhos normalmente so usados para ttulos e sub-ttulos de uma texto da pgina. A linguagem HTML possui seis nveis de cabealhos, numerados de 1 a 6; quanto menor o nvel, maior ser o destaque. Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois do cabealhos. O primeiro cabealho de uma pgina deve ser marcada como <H1>. COMANDO:

    <Hy> Texto do Cabealho </Hy> Onde o y um nmero que poder ser especificado entre 1 a 6, definindo o nvel do cabealho. COMANDO: <H1> Cabealho <H2> Cabealho <H3> Cabealho <H4> Cabealho <H5> Cabealho <H6> Cabealho nvel 5 </H6> nvel nvel nvel nvel nvel 1 2 3 4 5 </H1> </H2> </H3> </H4> </H5>

    2.1.3 PARGRAFO A tag <p> utilizada para definir o nicio de um pargrafo, criando uma linha em branco entre cada pargrafo. O tag <p> tambm responsvel pelo alinhamento dos pargrafos. O alinhamento pode ser: -> LEFT : Pargrafo -> CENTER: Pargrafo -> RIGHT: Pargrado -> JUSTIFY : Pargrafo justificado. alinhado alinhado alinhado a ao a esquerda. centro. direita.

    <html> <head> <title>Alinhamento de pargrafos</title> </head> <body> <p>Este pargrafo utiliza o alinhamento padro dos navegadores de Internet (esquerdo). <p align="center">Este pargrafo utiliza o alinhamento centralizado <p align="right">Este pargrado utiliza o alinhamento direita. </body> </html>

    2.1.4 QUEBRA DE LINHA

    A tag <br> usada para terminar uma linha sem iniciar um novo pargrafo. Esta tag <br>, ou line break, provoca uma mudana de linha sem acrescentar espao extra entre as linhas. Veja a diferena entre o uso da tag <p> e da tag <br>: MODELO I <html> <body> <h1>Utilizando Vamos separar Para

    a esta linha verificar

    com

    tag a

    p marcao a de

    </h1> paragrfo.<p> diferena.

    </body> </html> MODELO <html> <body> <h1>Utilizando Diferena quando a marcao Diferena quando a marcao Verificou </body> </html> II

    a separamos duas de quebra separamos duas de quebra a

    tag linhas de linhas de

    br</h1> utilizando<br> linha<br> utilizando<br> linha <br> diferena?

    2.1.5 COMENTRIOS Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e que no devem ser apresentados graficamente na pgina. Os comentrios so utilizados para explicar o cdigo fonte para que mais tarde seja possvel compreender o que foi feito. COMANDO: <!-- Comentrio da pgina --> 2.1.6 LISTA DE ELEMENTOS BSICOS

    2.1.7 DICAS

    -> Quando criamos pginas em HTML devemos ter sempre ateno ao fato delas poderem ser apresentadas de forma diferente em cada navegadores (browsers) ou em conmputadores diferentes. O ASPECTO GRFICO PODE DIFERIR ENTRE COMPUTADORES OU ENTRE NAVEGADORES ! Isso ocorre no s pela diferena entre os sistemas, mas tambm pelo fato de que os usurios possuem monitores diferentes e podem redimensionar a janela do navegador para o tamanho que prefirirem. -> As diferenas nos tamanhos das janelas dos navegadores fazem com que o nmero de linhas varie muito. Por esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locais em que acontecem as mudanas de linhas. -> Sempre que quiser inserir linhas em branco use <br>. -> J observou alguma vez uma pgina da internet, e se perguntou: Quais as instrues que foram utilizadas?. Se estiver utilizando o Internet Explorer e quiser descobrir as instrues, v at o menu Exibir e escolha a opo Cdigo Fonte, ou clique com o boto direito do mouse e selecione a opo Exibir Cdigo Fonte. -> No desanime se o aspecto do cdigo fonte lhe aparecer assustador. Se esse for o caso, pode ter certeza que a pgina que est visualizando foi feita por um programa especfico. Ao longo do curso, ser possvel verificar que o cdigo HTML bem escrito a mo muito fcil de ler, mas muitas pessoas complicam o cdigo para confundir.

    Formatao de Textos

    3.1 DEFININDO FONTES A tag <font> permite que voc insira em sua pgina um texto com fontes, tamanhos, cores e tipos diferentes. COMANDO: <FONT SIZE=n FACE=nome COLOR=cor> Texto </font> Onde: - SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria dos navegadores. - FACE: indica o nome da fonte utilizada. As fontes padres da maioria dos navegadores so: ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA. - COLOR : Define a cor da fonte do texto, em hexadecimal.

    Caso a fonte utilizada na pgina no esteja disponvel para o usurio que visit-la, a fonte ser substituida ento pela fonte padro do navegador utilizado pelo usurio. Pode-se definir mais de uma fonte FACE, pois caso a primeira no esteja instalada no sistema do usurio, o navegador reconhe a prxima fonte definida.

    3.2 ESTILO DE TEXTOS

    O HTML define muitos elementos para formatar textos, como por exemplo escrever em negrito, itlico ou sublinhado.

    COMANDO: <html> <head> <title>Exemplo</title> </head> <body> <b>Isto texto em negrito</b> <br> <strong>Isto texto forte</strong> <br> <big>Isto texto maior</big> <br> <em>Isto texto enfatizado</em> <br> <i>Isto texto itlico</i> <br> <small>Isto texto mais pequeno</small> <br> Este texto contm uma parte alinhada mais <sub>abaixo</sub> <br> Este texto contm uma parte alinhada mais <sup>acima</sup> </body> </html>

    3.3 FORMATANDO BLOCO DE TEXTOS

    3.3.1 TAG DIV A tag <div> permite alinhar horizontalmente qualquer elemento em sua pgina. O alinhamento pode ser: left, center ou right. Onde a posio pode ser: LEFT: CENTER: - RIGHT: Alinhamento a direita. Alinhamento Alinhamento a esquerda; centralizado;

    O padro de alinhamento da tag <div> a esquerda. COMANDO: <div align=posicao>Elementos a <html> <head> <title>ALINHAMENTO DE ELEMENTOS </head> <body> <div <h1>Usando a TAG <div serem alinhados</div>

    COM

    TAG

    DIV</title>

    DIV

    align=center> </h1></div> align=right>

    <p> Usando a tag DIV possvel alinhar o texto sem problemas <p>Pode utilizar o alinhamento a direita que alinha o seu texto na margem direita da tela.<br> Como um texto criado em um editor de texto para ser exibido na pgina. </div></body></html>

    You might also like