Prof. Fernando Gonçalves Abadia. Sistemas Multimídias

Transcrição

1 Prof. Fernando Gonçalves Abadia Sistemas Multimídias

2 Títulos Títulos são definidos com as tags <h1> a <h6>. A <h1> define o título maior. A <h6> define o título menor. <h1>este é um título</h1> <h2>este é um título</h2> <h3>este é um título</h3> <h4>este é um título</h4> <h5>este é um título</h5> <h6>este é um título</h6> A HTML automaticamente adiciona uma linha em branco extra antes e após um titulo.

3 Parágrafos Os parágrafos são definidos com a tag <p>. <p>este é um parágrafo</p> <p>este é outro parágrafo</p> A HTML adiciona automaticamente uma linha em branco extra antes e após um parágrafo.

4 Quebras de linha A tag <br> é usada quando você quer terminar uma linha, mas não quer começar um novo parágrafo. A tag <br> força 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 não tem tag de fechamento.

5 Tags de Formatação de Texto <b>define texto em negrito <big>define texto grande <em>define texto enfatizado; <i>define texto em itálico <small>define texto pequeno <strong>define texto forte <sub>define texto subescrito <sup>define texto superescrito <ins>define texto inserido <del>define texto cancelado

6 A Tag Âncora e o Atributo Href A HTML usa a tag <a> (âncora) para criar um vínculo (link) com outro documento. Uma âncora pode apontar para qualquer recurso na Web: uma página 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 endereçar o documento, e as palavras entre as tags de abertura e fechamento da âncora serão exibidas como um hipervínculo.

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

8 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 são: O desenvolvedor Web deve vigiar mais documentos HTML É difícil imprimir a página inteira

9 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>

10 Molduras (Frames) A moldura de navegação contém uma lista de vínculos com a segunda moldura como alvo. O arquivo chamado "contents.htm" contém três vínculos. Código fonte dos vínculos: <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.

11 Tabelas As tabelas são definidas com a tag <table>. Uma tabela é dividida em linhas (com a tag <tr>), e cada linha é dividida em células de dados (com a tag <td>). As letras td significam "table data," que é o conteúdo de uma célula de dados. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, filetes horizontias, tabelas, etc. Se você não 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">

12 Formulários Um formulário é uma área que pode conter elementos de formulário. Os elementos de formulário são elementos que permitem o usuário entrar informação (como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.) em um formulário. Um formulário é definido pela tag <form>.

13 Formulários 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>opção 1</option> <option>opção 2</option> </select>

14 A Tag Image e o Atributo Src Na HTML, as imagens são definidas com a tag <img> A tag <img> é vazia, o que significa que ela somente atributos e não tem tag de fechamento Para exibir uma imagem em uma página, 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 página.

15 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 página se o navegador não pode carregar imagens. O navagador irá então exibir o texto alternativo em vez da imagem.

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

17 CSS A introdução deste conceito preconiza o uso dos elementos (tags) HTML, exclusivamente para marcar e estruturar o conteúdo do documento. Nenhum elemento ou atributo HTML será usado para alterar a apresentação, ou seja estilizar o conteúdo. A tarefa de estilização ficará a cargo da CSS que nada mais é do que um arquivo independente do arquivo HTMLno qual são declaradas propriedades e valores de estilização para os elementos da HTML.

18 CSS Pseudo-Classes A sintaxe das pseudo-classes é conforme mostrada a seguir: seletor:pseudo-classe {propriedade: valor} As classes em CSS podem também ser usadas com pseudo- classes. Esta regra permite que você defina diferentes efeitos para links localizados em diferentes lugares em uma mesma página. No último item deste tutorial "Diferentes estilos de links em uma mesma página web" veremos este efeito. seletor.class:pseudo-class {propriedade: valor}

19 CSS Pseudo-Classes São 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").

20 Prática HTML e CSS Aplique este CSS em uma página para criar menus superiores e estilizados. Utiliza ferramentas de criação 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: px; } #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; }