mpdf Abra Fordes.pdf

  • Published on
    17-Sep-2015

  • View
    16

  • Download
    0

Embed Size (px)

Transcript

<ul><li><p>Associao Brasileira de Formao e Desenvolvimento Social - ABRAFORDESwww.CursosAbrafordes.com.br</p><p>DICA: Tecle Ctrl+s para salvar este PDF no seu computador.</p><p>Curso WebdesignerLio 01: Introduo - HTMLIntroduo - HTML</p><p>Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatao de Hipertexto -pode ser gerados em qualquer editor de texto. possvel transformar um arquivo .doc (formatoWord) para HTML.</p><p>A linguagem HTML utiliza marcaes especficas e distintas para dizer ao navegador (InternetExplorer, Firefox, Mozilla, e outros) como exibir o documento.</p><p>Os comandos HTML so chamados de TAGS, compreende as marcas padres que so utilizadas parafazer indicaes a um browser.</p><p>Assim como em outras linguagens, os comandos tm uma sintaxe prpria e seguemalgumas regras:</p><p>As TAGs aparecem sempre entre os sinais de menor que ()lGeralmente so utilizados em pares , sendo que a TAG de finalizao de um comando precedidalde uma barra (/)</p><p>A maioria das etiquetas tem a sua correspondente de fechamento:</p><p>&lt; etiqueta &gt; ............................................. &lt; /etiqueta &gt;l</p><p>De um modo geral, as tags aparecem em pares, por exemplo:</p><p>&lt; H1 &gt; Cabecalho &lt; / H1 &gt;l</p><p>Onde:</p><p>A tag &lt; H1 &gt; indica o incio na instruo;lO texto Cabealho indica o texto que ser formatado;lE a tag &lt; /H1 &gt; indica o final da instruo.l</p><p>O smbolo que termina uma determinada etiqueta igual aquele que a inicia, antecedido por umabarra ( / ) e precedido pelo texto referente.</p><p>As etiquetas so necessrias, pois servem para definir a formatao de um bloco de texto, e assimmarcamos onde comea e termina o texto com a formatao especfica por ela.</p><p>&lt; font &gt; Cursos Abrafordes do Brasil &lt; / font &gt;</p><p>H excesses para a utilizao dos pares de etiquetas. Por exemplo, a que indica um final de umpargrafo: &lt; p &gt; no necessita de uma correspondente</p></li><li><p>para terminar a formatao do bloco de texto. A etiqueta que indica quebra de linha &lt; br &gt; tambmno precisa de etiqueta correspondente, entre outras.</p><p>Criando Documentos HTML</p><p>Todo documento HTML precisa conter certas tags padronizadas, no mnimo &lt; HEAD &gt;, &lt; / HEAD &gt;,&lt; BODY &gt; e &lt; / BODY &gt;, pois elas constituem as duas partes bsicas de um documento HTML queso: o HEAD (cabealho) e o BODY (corpo do documento).</p><p>&lt; HTML &gt;</p><p>&lt; HEAD &gt;</p><p>&lt; TITLE &gt;Curso de WebDesign&lt; / TITLE &gt;</p><p>&lt; / HEAD &gt;</p><p>&lt; BODY &gt;</p><p>&lt; H1 &gt;Este o primeiro nvel de cabealho.&lt; / H1 &gt;&lt; p &gt;</p><p>Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.&lt; p &gt;</p><p>Este o segundo paragrfo</p><p>&lt; / BODY &gt;</p><p>&lt; / HTML &gt;</p><p>A tag &lt; HEAD &gt; contm, entre outras coisas, o &lt; TITLE &gt; (ttulo), e a tag &lt; BODY &gt; armazena todoo contedo do documento, normalmente composto de pargrafos, listas, tabelas, etc.</p><p>Para interpretar corretamente o contedo do documento HTML, os browsers esperam informaesem acordo com as especificaes HTML.</p><p>Abra o bloco de notas, e digite o cdigo acima e salve-o como primeiro.html. Em seguida, abraarquivo primeiro.html no navegador (Internet Explorer, ou outro).</p></li><li><p>Explicao:</p><p>A primeira TAG que encontramos no documento &lt; HTML &gt;. Ela o elemento raiz de umdocumento HTML, pois dentro dela est todo o contedo da pgina. Esta tag diz ao navegador parainiciar um novo documento HTML, onde o contedo que dever ser exibido esta entre as tags e &lt; HTML &gt;.</p><p>O texto contido ente as TAG &lt; HEAD &gt; e &lt; HEAD &gt; define o cabealho do documento. Estasinformaes so importantes pois indicam ao navegador a forma que a pgina deve ser apresentadagraficamente.</p><p>A tag &lt; TITLE &gt; define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est informadoCurso de WebDesign.</p><p>A tag &lt; BODY &gt; informa ao navegador o que dever ser exibido graficamente. O corpo da pgina"BODY" constituido pelo contedo que est entre as tags &lt; BODY &gt; e &lt; / BODY &gt;.</p><p>2.1 ELEMENTOS BSICOS</p><p> 2.1.1 TTULOSl</p><p>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 indicarclaramente o contedo do documento.</p><p>As tag utilizadas para ttulos so: &lt; TITLE &gt; e &lt; / TITLE &gt;.</p><p>&lt; html &gt;</p></li><li><p>&lt; title &gt;Este o ttulo&lt; / title &gt;</p><p>&lt; body &gt;</p><p>&lt; h2 &gt;E este o cabealho de nvel 2&lt; / h2 &gt;</p><p>Aqui entra o texto do documento ...</p><p>&lt; / body &gt;</p><p>&lt; / html &gt;</p><p>2.1.2 CABEALHOl</p><p>Os cabealhos normalmente so usados para ttulos e sub-ttulos de uma texto da pgina. Alinguagem HTML possui seis nveis de cabealhos, numerados de 1 a 6; quanto menor o nvel, maiorser o destaque.</p><p>Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona uma linhaem branca antes e depois do cabealhos. O primeiro cabealho de uma pgina deve ser marcadacomo &lt; H1 &gt;.</p><p>COMANDO:</p><p>&lt; Hy &gt; Texto do Cabealho &lt; / Hy &gt;</p><p>Onde o y um nmero que poder ser especificado entre 1 a 6, definindo o nvel do cabealho.</p><p>COMANDO:</p></li><li><p>&lt; H1 &gt; Cabealho nvel 1 &lt; / H1 &gt;</p><p>&lt; H2 &gt; Cabealho nvel 2 &lt; / H2 &gt;</p><p>&lt; H3 &gt; Cabealho nvel 3 &lt; / H3 &gt;</p><p>&lt; H4 &gt; Cabealho nvel 4 &lt; / H4 &gt;</p><p>&lt; H5 &gt; Cabealho nvel 5 &lt; / H5 &gt;</p><p>&lt; H6 &gt; Cabealho nvel 5 &lt; / H6 &gt;</p><p>2.1.3 PARGRAFO</p><p>A tag &lt; p &gt; utilizada para definir o nicio de um pargrafo, criando uma linha em branco entrecada pargrafo. O tag &lt; p &gt; tambm responsvel pelo alinhamento dos pargrafos.</p><p>O alinhamento pode ser:</p><p>LEFT : Pargrafo alinhado a esquerda.lCENTER: Pargrafo alinhado ao centro.lRIGHT: Pargrado alinhado a direita.lJUSTIFY : Pargrafo justificado.l</p><p>&lt; html &gt;</p><p>&lt; head &gt;</p><p>&lt; title &gt;Alinhamento de pargrafos&lt; / title &gt;</p><p>&lt; / head &gt;</p></li><li><p>&lt; body &gt;</p><p>&lt; p &gt;Este pargrafo utiliza o alinhamento padro dos navegadores de Internet (esquerdo).</p><p>&lt; p align = " center " &gt;Este pargrafo utiliza o alinhamento centralizado</p><p>&lt; p align = " righ t" &gt;Este pargrado utiliza o alinhamento direita.</p><p>&lt; / body &gt;</p><p>&lt; / html &gt;</p><p>2.1.4 QUEBRA DE LINHA</p><p>A tag &lt; br &gt; usada para terminar uma linha sem iniciar um novo pargrafo. Esta tag &lt; br &gt;, ou"line break", provoca uma mudana de linha sem acrescentar espao extra entre as linhas.</p><p>Veja a diferena entre o uso da tag &lt; p &gt; e da tag &lt; br &gt;:</p><p>MODELO I</p><p>&lt; html &gt;</p><p>&lt; body &gt;</p><p>&lt; h1 &gt;Utilizando a tag p &lt; / h1 &gt;</p><p>Vamos separar esta linha com a marcao de paragrfo.&lt; p &gt;</p><p>Para verificar a diferena.</p><p>&lt; / body &gt;</p></li><li><p>&lt; / html &gt;</p><p>MODELO II</p><p>&lt; html &gt;</p><p>&lt; body &gt;</p><p>&lt; h1 &gt;Utilizando a tag br&lt; / h1 &gt;</p><p>Diferena quando separamos duas linhas utilizando&lt; br &gt;</p><p>a marcao de quebra de linha&lt; br &gt;</p><p>Diferena quando separamos duas linhas utilizando&lt; br &gt;</p><p>a marcao de quebra de linha &lt; br &gt;</p><p>Verificou a diferena?</p><p>&lt; / body &gt;</p><p>&lt; / html &gt;</p><p>2.1.5 COMENTRIOS</p><p>Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e que nodevem ser apresentados graficamente na pgina.</p><p>Os comentrios so utilizados para explicar o cdigo fonte para que mais tarde seja possvelcompreender o que foi feito.</p></li><li><p>COMANDO:</p><p>&lt; !-- Comentrio da pgina -- &gt;</p><p>2.1.6 LISTA DE ELEMENTOS BSICOS</p><p>2.1.7 DICAS</p><p>Quando criamos pginas em HTML devemos ter sempre ateno ao fato delas poderem ser1.apresentadas de forma diferente em cada navegadores (browsers) ou em conmputadoresdiferentes. O ASPECTO GRFICO PODE DIFERIR ENTRE COMPUTADORES OU ENTRENAVEGADORES ! Isso ocorre no s pela diferena entre os sistemas, mas tambm pelo fato deque os usurios possuem monitores diferentes e podem redimensionar a janela do navegador parao tamanho que prefirirem.As diferenas nos tamanhos das janelas dos navegadores fazem com que o nmero de linhas varie2.muito. Por esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locaisem que acontecem as mudanas de linhas.Sempre que quiser inserir linhas em branco use3..J observou alguma vez uma pgina da internet, e se perguntou: "Quais as instrues que foram4.utilizadas?". Se estiver utilizando o Internet Explorer e quiser descobrir as instrues, v at omenu Exibir e escolha a opo Cdigo Fonte, ou clique com o boto direito do mouse e selecionea opo Exibir Cdigo Fonte.No desanime se o aspecto do cdigo fonte lhe aparecer assustador. Se esse for o caso, pode ter5.certeza que a pgina que est visualizando foi feita por um programa especfico. Ao longo docurso, ser possvel verificar que o cdigo HTML bem escrito a mo muito fcil de ler, masmuitas pessoas complicam o cdigo para confundir.</p><p>Lio 02: Formatao de TextosFormatao de Textos</p><p>3.1 DEFININDO FONTES</p></li><li><p>A tag &lt; font &gt; permite que voc insira em sua pgina um texto com fontes, tamanhos, cores e tiposdiferentes.</p><p>COMANDO:</p><p>&lt; FONT SIZE="n" FACE="nome" COLOR="cor"&gt; Texto &lt; / font &gt;</p><p>Onde:</p><p>- SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria dosnavegadores.</p><p>- FACE: indica o nome da fonte utilizada. As fontes padres da maioria dos navegadores so: ARIAL,TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA.</p><p>- COLOR : Define a cor da fonte do texto, em hexadecimal.</p><p>Caso a fonte utilizada na pgina no esteja disponvel para o usurio que visit-la, a fonte sersubstituida ento pela fonte padro do navegador utilizado pelo usurio.</p><p>Pode-se definir mais de uma fonte FACE, pois caso a primeira no esteja instalada no sistema dousurio, o navegador reconhe a prxima fonte definida.</p><p>3.2 ESTILO DE TEXTOS</p><p>O HTML define muitos elementos para formatar textos, como por exemplo escrever em negrito,itlico ou sublinhado.</p></li><li><p>COMANDO:</p><p>&lt; html &gt;</p><p>&lt; head &gt;</p><p>&lt; title &gt;Exemplo&lt; /title &gt;</p><p>&lt; / head &gt;</p><p>&lt; body &gt;</p><p>&lt; b &gt;Isto texto em negrito&lt; / b &gt; &lt; br &gt;</p><p>&lt; strong &gt;Isto texto forte&lt; / strong &gt; &lt; br &gt;</p><p>&lt; big &gt;Isto texto maior&lt; / big &gt; &lt; br &gt;</p><p>&lt; em &gt;Isto texto enfatizado&lt; / em &gt; &lt; br &gt;</p><p>&lt; i &gt;Isto texto itlico&lt; / i &gt; &lt; br &gt;</p><p>&lt; small &gt;Isto texto mais pequeno&lt; / small &gt; &lt; br &gt;</p><p>Este texto contm uma parte alinhada mais &lt; sub &gt;abaixo&lt; / sub &gt; &lt; br &gt;</p><p>Este texto contm uma parte alinhada mais &lt; sup &gt;acima&lt; / sup &gt;</p><p>&lt; / body &gt;</p></li><li><p>&lt; / html &gt;</p><p>3.3 FORMATANDO BLOCO DE TEXTOS</p><p>3.3.1 TAG DIV</p><p>A tag &lt; div &gt; permite alinhar horizontalmente qualquer elemento em sua pgina. O alinhamentopode ser: left, center ou right.</p><p>Onde a posio pode ser:</p><p>LEFT: Alinhamento a esquerda;lCENTER: Alinhamento centralizado;lRIGHT: Alinhamento a direita.l</p><p>O padro de alinhamento da tag &lt; div &gt; a esquerda.</p><p>COMANDO:</p><p>&lt; div align = "posicao" &gt;Elementos a serem alinhados&lt; / div &gt;</p><p>&lt; html &gt;</p><p>&lt; head &gt;</p><p>&lt; title &gt;ALINHAMENTO DE ELEMENTOS COM A TAG DIV&lt; / title &gt;</p><p>&lt; / head &gt;</p><p>&lt; body &gt;</p></li><li><p>&lt; div align="center" &gt;</p><p>&lt; h1 &gt;Usando a TAG DIV &lt; / h1 &gt;&lt; / div &gt;</p><p>&lt; div align="right" &gt;</p><p>&lt; p &gt; Usando a tag DIV possvel alinhar o texto sem problemas</p><p>&lt; p &gt;Pode utilizar o alinhamento a direita que alinha o seu texto na margem direita da</p><p>tela.&lt; br &gt;</p><p>Como um texto criado em um editor de texto para ser exibido na pgina.</p><p>&lt; / div &gt;&lt; / body &gt; &lt; / html &gt;</p><p>Controle de Cores e Grficos de Fundo</p><p>Uma cor ou imagem de fundo bem escolhidos podem melhorar o aspecto da pgina, mas uma mescolha capaz de causar danos muito graves na legibilidade e no aspecto geral.</p><p>A maioria dos browsers permite a utilizao de cores, apenas 256, mas j o suficiente para criaruma pgina com fundo e textos personalizados.</p><p>As cores so compostas por cdigo RGB (red, green, blue). Cada cdigo define a intensidade dovermelho, do verde e do azul.</p><p>4.1 CORES E ELEMENTOS GRFICOS DE FUNDO</p><p>4.1.1 BACKGROUND (IMAGEM DE FUNDO)</p><p>O atributo background deve ser aplicado tag , que especifica uma imagem que ser utilizada comofundo de uma pgina, sendo que a imagem ocupar toda a rea de fundo da tela.</p><p>COMANDO:</p><p>&lt; body background="URL"&gt;Corpo da pgina&lt; / body &gt;</p><p>&lt; html &gt;</p><p>&lt; head &gt;</p><p>&lt; title &gt;Imagem de fundo - BACKGROUND&lt; / title &gt;</p><p>&lt; / head &gt;</p><p>&lt; body background="fundo.jpg" &gt;</p><p>&lt; h1 align="center" &gt;Imagem de fundoBackground&lt; / h1 &gt;</p></li><li><p>&lt; p align="center" &gt;Com esse atributo voc insere imagem de fundos nas pginas.</p><p>&lt; / body &gt;</p><p>&lt; / html &gt;</p><p>4.1.2 BGCOLOR</p><p>O atributo BGCOLOR o atributo que determina a cor de fundo da pgina, permitindo que se definauma cor de fundo padro para a pgina sem a necessidade de utilizar um arquivo de imagem.</p><p>COMANDO:</p><p>&lt; body bgcolor=#FFFFCC &gt;Corpo da pgina&lt; / body &gt;</p><p>&lt; html &gt;</p><p>&lt; head &gt;</p><p>&lt; title &gt;Cor de fundo - BGCOLOR&lt; / title &gt;</p><p>&lt; / head &gt;</p><p>&lt; body bgcolor="#FFFFCC" &gt;</p><p>&lt; h1 align="center" &gt;Cor de Fundo&lt; br &gt;BGCOLOR&lt; / h1 &gt;</p><p>&lt; p align="center" &gt;Com esse atributo voc controla a cor de fundo das pginas.</p><p>&lt; / body &gt;</p></li><li><p>&lt; / html &gt;</p><p>DICAS:</p><p> importante ter cuidado ao aplicar elementos de fundo, para no prejudicar a leitura dos textos.</p><p> interessante sempre visitar outras pginas que utilizam este recurso para recolher boas idias.lPara tornar a visualizao das pginas mais rpidas, alguns usurios no utilizam imagens em suaslpginas, em vez disso utilizam o atributo BGCOLOR.</p><p>4.2 CORES DE LETRAS E LINKS</p><p>4.2.1 ATRIBUTO TEXT</p><p>O atributo TEXT utilizado para controlar a cor do texto normal de uma pgina, ou seja, define a corde todo o texto do documento, execeto os links.</p><p>O atributo TEXT inserido na tag , tendo como padro a cor preto (#000000).</p><p>COMANDO:</p><p>&lt; body text="#RRGGBB" &gt;Corpo da Pgina &lt; / body &gt;</p><p>&lt; html &gt;</p><p>&lt; head &gt;</p><p>&lt; title &gt;Cor de texto - TEXT&lt; / title &gt;</p><p>&lt; / head &gt;</p></li><li><p>&lt; body bgcolor="#FFFFFF" text="#333333" &gt;</p><p>&lt; h1 align="center" &gt;CORES DE LETRAS DE TEXTO NORMAL&lt; / h1 &gt;</p><p>&lt; p align="center" &gt;Com esse atributo voc controla a cor do texto em uma pgina.</p><p>&lt; / body &gt;</p><p>&lt; / html &gt;</p><p>4.2.2 ATRIBUTO LINK, VLINK E ALINK</p><p>Os atributos LINK, VLINK e ALINK fazem o controle das cores do textos que funcionam como link napgina.</p><p>LINK: Define cores de links no visitados. Cor padro o AZUL.lVLINK: Define as cores dos links j consultados. Cor padro vermelho-prpura.lALINK: Define as cores dos links selecionados, ou seja, quando o usurio pressionou o boto dolmouse e ainda no soltou. Cor padro vermelho.</p><p>COMANDO:</p><p>&lt; body link="#RRGGBB" vlink="#RRGGBB" alink="#RRGGBB" &gt;Corpo da pgina&lt; / body &gt;</p><p>&lt; html &gt;</p><p>&lt; head &gt;</p><p>&lt; title &gt;Cor de Links - LINK VLINK ALINK&lt; / title &gt;</p></li><li><p>&lt; / head &gt;</p><p>&lt; body bgcolor="#FFFFE0" text="#FF6347" LINK"#0000CD" VLINK="#7FFFD4"</p><p>ALINK="#ADFF2F" &gt;</p><p>&lt; h1 align="center" &gt;EXEMPLO DE CORES&lt; / h1 &gt;</p><p>&lt; p align="center" &gt;O fundo da pgina est com uma cor especial:&lt; BR &gt;</p><p>&lt; B &gt;Lightyellow - RGB : #FFFFE0&lt; / b &gt;&lt; br &gt;</p><p>&lt; b &gt;Alink = GreenYellow - RGB:"#ADFF2F"&lt; / b &gt;&lt; br &gt;</p><p>&lt; b &gt;Link = MediumBlue RGB:"#0000CD"&lt; / b &gt;&lt; br &gt;</p><p>&lt; b &gt;Vlink = Aquamarine- RGB: "#7FFFD4"&lt; / b &gt;</p><p>&lt; / body &gt;</p><p>&lt; / html &gt;</p><p>Lio 03: Links, Listas, Imagens, Tabelas, CoresLINKS</p><p>O principal poder do HTML, est na capacidade de ligar partes de textos e imagens a outrosdocumentos. A interligao entre documentos feito utilizando a tag &lt; a &gt;, e no se restringeapenas a outras pginas. Os links podem apontar para qualquer recurso disponvel na WEB, podendoser uma pgina em HTML, uma imagem, um arquivo de som, um filme, etc.</p><p>5.1 NCORAS</p></li><li><p>As ncoras so links que utilizamos quando queremos buscar o contedo na mesma pgina ou emoutra pgina qualquer. So muito utilizadas em pginas que tm o contedo extenso, onde definimossees na pginas, sendo que cada seo ter um nome que servir de referncia para o link.</p><p>Para criarmos uma ncora selecionamos um local da pgina para inser-la.</p><p>&lt; a name=nomedaseo &gt; &lt; / a &gt;</p><p>Onde:</p><p>&lt; a (h um espao depois do a): a abertura da tag de link;lname:nome da seo: o nome dado a seo.lNo necessrio inserir nada entre as tags &lt; a &gt; e &lt; / a &gt;;l&lt; / a &gt;: utilizada para encerrar a tag.l</p><p>Com essa tag voc inserir uma imagem ou texto que indicar ao usurio que ao clicar neste tipo delink, este ir gui-lo at o local onde foi inserida a ncora.</p><p>&lt; a href="#Nome da Seo" &gt; Texto ou imagem &lt; / a &gt;</p><p>Onde:</p><p>&lt; a = a abertura da tag de link;lhref="#Nome da Seo" = indica o nome da seo que ser...</p></li></ul>