Operaes Multimdias

Prof. Fernando Gonalves Abadia

Operaes Multimdias

Ttulos
Ttulos so definidos com as tags <h1> a <h6>. A <h1> define o ttulo maior. A <h6> define o ttulo menor.
<h1>Este um ttulo</h1> <h2>Este um ttulo</h2> <h3>Este um ttulo</h3> <h4>Este um ttulo</h4> <h5>Este um ttulo</h5> <h6>Este um ttulo</h6>

A HTML automaticamente adiciona uma linha em branco extra antes e aps um titulo.

Operaes Multimdias

Pargrafos
Os pargrafos so definidos com a tag <p>.
<p>Este um pargrafo</p> <p>Este outro pargrafo</p>

A HTML adiciona automaticamente uma linha em branco extra antes e aps um pargrafo.

Operaes Multimdias

Quebras de linha
A tag <br> usada quando voc quer terminar uma linha, mas no quer comear um novo pargrafo. A tag <br> fora a quebra de linha onde quer que voc a coloque.
<p>Este <br> um par<br>grafo com quebras de linha</p>

A tag <br> uma tag vazia. Ela no tem tag de fechamento.

Operaes Multimdias

Tags de Formatao de Texto

<b>Define texto em negrito <big>Define texto grande <em>Define texto enfatizado; <i>Define texto em itlico <small>Define texto pequeno <strong>Define texto forte <sub>Define texto subescrito <sup>Define texto superescrito <ins>Define texto inserido <del>Define texto cancelado

Operaes Multimdias

A Tag ncora e o Atributo Href

A HTML usa a tag <a> (ncora) para criar um vnculo (link) com outro documento. Uma ncora pode apontar para qualquer recurso na Web: uma pgina em HTML, uma imagem, um arquivo de som, um filme, etc. Sintaxe para criar uma ncora:
<a href="url">Texto a ser exibido</a>

A tag <a> usada para criar uma ncora de onde vincular, o atributo href usado para onde enderear o documento, e as palavras entre as tags de abertura e fechamento da ncora sero exibidas como um hipervnculo.

Operaes Multimdias

A Tag ncora e o Atributo Href

Com o atributo alvo, voc pode definir onde o documento vinculado ser aberto. A linha abaixo abrir o documento em uma nova janela do navegador:
<a href=link" target="_blank">texto!</a>

Operaes Multimdias

Molduras (Frames)
Com molduras, voc pode exibir mais de um documento HTML na mesma janela do navegador. Cada documento HTML chamado de moldura, e cada moldura independente das outras. A tag <frameset> define como dividir a janela em molduras Cada conjunto de molduras define um conjunto de linhas ou colunas Os valores das linhas/colunas indicam a quantidade da rea da tela que cada linha/coluna ir ocupar As desvantagens de usar molduras so:
O desenvolvedor Web deve vigiar mais documentos HTML difcil imprimir a pgina inteira

Operaes Multimdias

Molduras (Frames)
A tag <frame> define qual documento HTML colocar em cada moldura No exemplo abaixo temos um conjunto de frames com duas colunas. A primeira coluna configurada em 25% da largura da janela do navegador. A segunda coluna configurada em 75% da largura da janela do navegador. O documento HTML "frame_a.htm" colocado na primeira coluna, e o documento HTML "frame_b.htm" colocado na segunda coluna:
<frameset cols="25%, 75%">
<frame src="frame_a.htm> <frame src="frame_b.htm">

</frameset>

Operaes Multimdias

Molduras (Frames)
A moldura de navegao contm uma lista de vnculos com a segunda moldura como alvo. O arquivo chamado "contents.htm" contm trs vnculos. Cdigo fonte dos vnculos:
<a href ="frame_a.htm" target ="showframe">Moldura a</a><br /> <a href ="frame_b.htm" target ="showframe">Moldura b</a><br /> <a href ="frame_c.htm" target ="showframe">Moldura c</a>

A segunda moldura ir mostrar os documentos vinculados.

Tabelas
As tabelas so definidas com a tag <table>. Uma tabela dividida em linhas (com a tag <tr>), e cada linha dividida em clulas de dados (com a tag <td>). As letras td significam "table data," que o contedo de uma clula de dados. Uma clula de dados pode conter texto, imagens, listas, pargrafos, formulrios, filetes horizontias, tabelas, etc. Se voc no especificar um atributo border a tabela ser exibida sem qualquer borda. s vezes isto pode ser til, mas geralmente, voc ir querer que as bordas sejam mostradas. Para exibir uma tabela com bordas, voc usar o atributo border:
<table border="1">

Operaes Multimdias

Formulrios
Um formulrio uma rea que pode conter elementos de formulrio. Os elementos de formulrio so elementos que permitem o usurio entrar informao (como campos de texto, campos de rea de texto, menus drop-down, botes radiais, caixas de seleo, etc.) em um formulrio. Um formulrio definido pela tag <form>.

Operaes Multimdias

Formulrios
Entrada (Input):
<input name="Nome" type="text"> <input name="moeda" value="real" type="radio"> <input name="afirma" value="yeltsin" type="checkbox"> <input type="file"> <input type="submit> <input type="reset"> <select multiple="multiple" size="3" name="times"> <option>opo 1</option> <option>opo 2</option> </select>

Operaes Multimdias

A Tag Image e o Atributo Src

Na HTML, as imagens so definidas com a tag <img> A tag <img> vazia, o que significa que ela somente atributos e no tem tag de fechamento Para exibir uma imagem em uma pgina, voc necessita usar o atributo src. Src significa "source" [fonte]. O valor do atributo src a URL da imagem que voc quer exibir na sua pgina.

Operaes Multimdias

A Tag Image e o Atributo Src

O atributo alt usado para definir um "texto alternativo" para uma imagem. O valor do atributo alt um texto definido pelo autor:
<img src="boat.gif" alt="Big Boat">

O atributo "alt" diz ao leitor o que ele ou ela est perdendo numa pgina se o navegador no pode carregar imagens. O navagador ir ento exibir o texto alternativo em vez da imagem.

Operaes Multimdias

CSS
No HTML, se por um lado resolveu necessidades de designers e projetistas, por outro acabou trazendo srios problemas aos projetos criados. Os documentos Web publicados na Internet, cada vez mais sofisticados e extensos, estavam fugindo do controle de seus criadores.

Operaes Multimdias

CSS
A introduo deste conceito preconiza o uso dos elementos (tags) HTML, exclusivamente para marcar e estruturar o contedo do documento. Nenhum elemento ou atributo HTML ser usado para alterar a apresentao, ou seja estilizar o contedo. A tarefa de estilizao ficar a cargo da CSS que nada mais do que um arquivo independente do arquivo HTMLno qual so declaradas propriedades e valores de estilizao para os elementos da HTML.

Operaes Multimdias

CSS Pseudo-Classes
A sintaxe das pseudo-classes conforme mostrada a seguir:
seletor:pseudo-classe {propriedade: valor}

As classes em CSS podem tambm ser usadas com pseudo- classes. Esta regra permite que voc defina diferentes efeitos para links localizados em diferentes lugares em uma mesma pgina. No ltimo item deste tutorial "Diferentes estilos de links em uma mesma pgina web" veremos este efeito. seletor.class:pseudo-class {propriedade: valor}

Operaes Multimdias

CSS Pseudo-Classes
So quatro as pseudo classes para links:
a:link........define o estilo do link no estado inicial; a:visited...define o estilo do link visitado; a:hover.....define o estilo do link quando passa-se o mouse sobre ele; a:active....define o estilo do link ativo (o que foi "clicado").

Operaes Multimdias

Prtica HTML e CSS

Aplique este CSS em uma pgina para criar menus superiores e estilizados. Utiliza ferramentas de criao de imagens e criatividade.
#header { float:left; width:100%; font-size:93%; } #header ul { margin:0; padding:0; list-style:none; } #header li { float:left; background:url("parte 2.png") no-repeat left top; margin:0; padding:0 0 0 9px; } #header a:hover{ font-size:110%; } #header a, #header strong, #header span { display:block; background:url("parte 1.png") no-repeat right top; padding:5px 15px 4px 6px; } #header #current { backgroundimage:url("left_on.gif"); } #header #current a { backgroundimage:url("right_on.gif"); padding-bottom:5px; }