mpdf Abra Fordes.pdf

  • View
    19

  • Download
    0

Embed Size (px)

Transcript

  • Associao Brasileira de Formao e Desenvolvimento Social - ABRAFORDESwww.CursosAbrafordes.com.br

    DICA: Tecle Ctrl+s para salvar este PDF no seu computador.

    Curso WebdesignerLio 01: Introduo - HTMLIntroduo - HTML

    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.

    A linguagem HTML utiliza marcaes especficas e distintas para dizer ao navegador (InternetExplorer, Firefox, Mozilla, e outros) como exibir o documento.

    Os comandos HTML so chamados de TAGS, compreende as marcas padres que so utilizadas parafazer indicaes a um browser.

    Assim como em outras linguagens, os comandos tm uma sintaxe prpria e seguemalgumas regras:

    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 (/)

    A maioria das etiquetas tem a sua correspondente de fechamento:

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

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

    < H1 > Cabecalho < / H1 >l

    Onde:

    A tag < H1 > indica o incio na instruo;lO texto Cabealho indica o texto que ser formatado;lE a tag < /H1 > indica o final da instruo.l

    O smbolo que termina uma determinada etiqueta igual aquele que a inicia, antecedido por umabarra ( / ) e precedido pelo texto referente.

    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.

    < font > Cursos Abrafordes do Brasil < / font >

    H excesses para a utilizao dos pares de etiquetas. Por exemplo, a que indica um final de umpargrafo: < p > no necessita de uma correspondente

  • para terminar a formatao do bloco de texto. A etiqueta que indica quebra de linha < br > tambmno 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 queso: o HEAD (cabealho) e o BODY (corpo do documento).

    < HTML >

    < HEAD >

    < TITLE >Curso de WebDesign< / TITLE >

    < / HEAD >

    < BODY >

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

    Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.< p >

    Este o segundo paragrfo

    < / BODY >

    < / HTML >

    A tag < HEAD > contm, entre outras coisas, o < TITLE > (ttulo), e a tag < BODY > armazena todoo contedo do documento, normalmente composto de pargrafos, listas, tabelas, etc.

    Para interpretar corretamente o contedo do documento HTML, os browsers esperam informaesem acordo com as especificaes HTML.

    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).

  • Explicao:

    A primeira TAG que encontramos no documento < HTML >. 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 < HTML >.

    O texto contido ente as TAG < HEAD > e < HEAD > define o cabealho do documento. Estasinformaes so importantes pois indicam ao navegador a forma que a pgina deve ser apresentadagraficamente.

    A tag < TITLE > define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est informadoCurso 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 TTULOSl

    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.

    As tag utilizadas para ttulos so: < TITLE > e < / TITLE >.

    < html >

  • < title >Este o ttulo< / title >

    < body >

    < h2 >E este o cabealho de nvel 2< / h2 >

    Aqui entra o texto do documento ...

    < / body >

    < / html >

    2.1.2 CABEALHOl

    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.

    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 < 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 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 5 < / H6 >

    2.1.3 PARGRAFO

    A tag < p > utilizada para definir o nicio de um pargrafo, criando uma linha em branco entrecada pargrafo. O tag < p > tambm responsvel pelo alinhamento dos pargrafos.

    O alinhamento pode ser:

    LEFT : Pargrafo alinhado a esquerda.lCENTER: Pargrafo alinhado ao centro.lRIGHT: Pargrado alinhado a direita.lJUSTIFY : Pargrafo justificado.l

    < 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 = " righ t" >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 a tag p < / h1 >

    Vamos separar esta linha com a marcao de paragrfo.< p >

    Para verificar a diferena.

    < / body >

  • < / html >

    MODELO II

    < html >

    < body >

    < h1 >Utilizando a tag br< / h1 >

    Diferena quando separamos duas linhas utilizando< br >

    a marcao de quebra de linha< br >

    Diferena quando separamos duas linhas utilizando< br >

    a marcao de quebra de linha < br >

    Verificou a diferena?

    < / body >

    < / html >

    2.1.5 COMENTRIOS

    Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e que nodevem ser apresentados graficamente na pgina.

    Os comentrios so utilizados para explicar o cdigo fonte para que mais tarde seja possvelcompreender 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 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.

    Lio 02: Formatao de TextosFormatao de Textos

    3.1 DEFININDO FONTES

  • A tag < font > permite que voc insira em sua pgina um texto com fontes, tamanhos, cores e tiposdiferentes.

    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 dosnavegadores.

    - 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 sersubstituida ento pela fonte padro do navegador utilizado pelo usu