Aula 3. Imagens. <img src="foto.jpg" />

Tamanho: px

Começar a partir da página:

Download "Aula 3. Imagens. <img src="foto.jpg" />"

Isabella Prada Madeira
6 Há anos
Visualizações:

1 Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag <img, juntamente ao atributo src para dizer onde está localizada a imagem. Também podemos utilizar o atributo alt para inserir um texto descrevendo a imagem. <img src="foto.jpg" /> No html5 foram criadas tags com o objetivo de mostrar uma imagem com legenda, que são as tags <figure> e <figcaption>: <figure> <img src="foto.jpg" /> <figcaption>foto do Mousse de Maracujá</figcaption> </figure> Tabelas Para adicionarmos uma tabela à página, podemos usar a tag <table>. A tag <table> apenas delimita uma tabela sem conteúdo, para adicionarmos conteúdo à nossa tabela, ou seja, as linhas e células que devem ser exibidas, devemos usar as tags e <td>, que delimitam linhas (row) e células (data/cell) respectivamente. Geralmente a primeira linha de uma tabela é um cabeçalho que representa cada coluna, portanto temos a tag<th>. <table> <td>aluno</td> <td>nota</td> <td>situação</th> <td>maria</td> <td>9,0</td> <td>aprovado</td> </table>

2 Os cabeçalhos em uma tabela são definidos com a tag <th>. E no navegador apareçem centralizados e em negrito. <th>aluno</th> <th>nota</th> <th>situação</th> Tags de Tabela Tag Descrição <table> Define uma tabela <th> Define um cabeçalho de tabela Define uma linha de tabela <td> Define uma célula de tabela <thead> Define um cabeçalho de tabela <tbody> Define o corpo de uma tabela <tfoot> Defines o rodapé (footer) de uma tabela Hierarquia Outro tipo de seletor em CSS são os seletores descendentes, que estão intimamente ligados com o conceito de tags aninhadas, ou seja, as tags possuem uma hierarquia em um documento. html, e isso reflete na forma como as tags ficam dentro de outras tags. Observe o exemplo abaixo: <html> <head> <title>tutorial de CSS: Tags descendentes</title> <link rel="stylesheet" type="text/css" href="estilo.css"/> </head> <body> </body> </html> Note a hierarquia. A tag principal é a <html>, diretamente dela temos duas tags, a <head> e a <body>. Então a head e a body são tag descendentes da tag html. Vamos chamar a tag html de tag pai, ou tag ancestral. Agora vamos entrar na <head>. É fácil ver que de dentro dela temos duas tags: <title> e a <link>.

3 Ou seja, as tags title e link são descendentes da tag head, pois estão dentro dela. Chamemos a head de tag pai ou ancestral. Seletores Descendentes em CSS Agora que vimos o que são tags descendentes em HTML, vamos aprender como tirar proveito dessa hierarquia de tags para conseguir aplicar estilos especificamente em algumas tags descendentes de outras. Os seletores descendentes servem para aplicar estilo CSS somente em tags específicas que são descendentes de outras tags que vamos especificar também. A sintaxe para o uso de descendent selectors em CSS é: tag-ancestral tag-descendente { propriedades: CSS; Ou seja, a "tag-descendente" está dentro, aninhada, da "tag-ancestral". Você pode ter milhões de tags do tipo "tag-descendente" em vários documentos.html, mas somente as que estiverem dentro da tag "tag-ancestral" é que vão receber o estilo. Exemplo: <div id="content"> <h1>este cabeçalho h1 está no conteúdo</h1> </div> #content h1 { color: red; Apenas os textos dentro de uma tag <h1> que são descendentes de uma tag que possui o id = content receberão a cor vermelha (color: red). NAV No HTML5 foi criada a tag <nav>, cujo objetivo é delimitar o código que representa a navegação do site. Esta tag não gera um elemento visual, ela tem mais é um valor semântico, apenas pra indicar que a navegação do site se encontra naquele trecho da página. Exemplo: <nav> <ul> </ul> </nav> href="#">menu1</a></li> href="#">menu2</a></li> href="#">menu3</a></li> href="#">menu4</a></li>

4 Semântica Dica de Site: Exemplo para criar um menu horizontal nav ul{ list-style: none; /*retirar os marcadores de cada item da lista*/ nav ul li{ display: inline; /*para deixar os itens da lista um do lado do outro.*/ margin-right: 50px; /*inserir um espaço do lado direito de cada item da lista.*/ background-color: #c7be9b; nav ul li a{ text-decoration: none; /*retirar a linha a baixo dos links*/ color: black; nav ul li:hover{ background-color: #9c8f67 /*a propriedade hover é utilizada para aplicar um estilo quando o ponteiro do mouse estiver sobre o elemento*/

5 Propriedades CSS display: inline, para deixar os itens da lista um do lado do outro. border: 1px solid black; Inserir borda a um elemento, é necessário informar a espessura(1px), o estilo(solid) e a cor da borda(black). A figura abaixo dá alguns exemplos de bordas possíveis no navegador.

Documentos relacionados

F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07

F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos