C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML

Save this PDF as:
 WORD  PNG  TXT  JPG

Tamanho: px
Começar a partir da página:

Download "C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML"

Transcrição

1 C A P I T U L O 0 1 I N T R O D U Ç Ã O A O XHTML 1

2 O QUE É XHTML? XHTML significa Linguagem de Marcação de Hipertexto (Extensible Hypertext Markup Language) XHTML é quase idêntico ao HTML 4.01 XHTML é uma versão mais rígida e limpa do HTML XHTML é o HTML como uma aplicação XML XHTML É UMA RECOMENDAÇÃO DO W3C (WORLD WIDE WEB CONSORTIUM) O XHTML se tornou um padrão adotado pelo W3C em 2000, diante da bagunça causada pela guerra dos navegadores, com a intenção de padronizar as plataformas web para uma compatibilidade global. Todos os navegadores desde 2000 suportam XHTML. Para incentivar o uso e a especialização dos profissionais da área em XHTML, o W3C fornece três modos de validação para documentos XHTML: Strict (para quem domina XHTML) Transitional (para quem está em transição do HTML para o XHTML) Frameset (para quem utiliza técnicas de desenvolvimento com Frames baseado em XHTML) POR QUE XHTML? Muitas páginas na internet possuem códigos HTML ruins. O código HTML a seguir funcionará normalmente em qualquer navegador, mesmo não seguindo algumas regras. <html> <head> <title>este é um HTML ruin</title> <body> <h1>html ruin <p>este é um parágrafo </body> XML é uma linguagem de marcação onde tudo deve ser marcado corretamente, o que resulta em documentos bem estruturados. XML foi desenvolvido para descrever dados, e HTML foi desenvolvido para mostrar dados. O mercado de hoje consiste em navegadores para diferentes tecnologias, alguns navegadores rodam em computadores, e alguns navegadores rodam em telefones móveis ou aparelhos portáteis. Alguns não têm o poder de interpretar HTML mal estruturado. 2

3 Sendo assim, combinando a força do HTML e do XML, o W3C recomenda uma linguagem de marcação que será útil agora e sempre XHTML. ELEMENTOS XHTML Elementos XHTML são conhecidos como tags e são delimitados pelos símbolos < e >. A seguir alguns exemplos de tags XHTML: <head> <title> <body> <p> <img /> <br /> <h1> ATRIBUTOS XHTML Atributos pertencem a tags e caracterizam propriedades dessas tags, como titulo, largura, altura, etc. A seguir alguns exemplos de atributos XHTML: <table width= 300px > <div title= Titulo da Div > <img src= logo.gif alt= Imagem Logotipo title= Logotipo /> <input type= text /> DIFERENÇAS IMPORTANTES Elementos XHTML devem estar apropriadamente aninhados Elementos XHTML devem estar sempre fechados Elementos XHTML devem estar sempre em minúsculo Documentos XHTML devem conter apenas uma tag raiz ELEMENTOS XHTML DEVEM SER APROPRIADAMENTE ANINHADOS Em HTML, alguns elementos podem ser aninhados inapropriadamente como no exemplo: <b><i>este texto é negrito e itálico</b></i> Em XHTML, todos os elementos devem estar apropriadamente aninhados como no exemplo: <b><i>este texto é negrito e itálico</i></b> 3

4 ELEMENTOS XHTML DEVEM SER SEMPRE FECHADOS Elementos não vazios devem apresentar tags de fechamento. Confira nos exemplos: ERRADO <p>este texto é um parágrafo <p>este texto é outro parágrafo CORRETO <p>este texto é um parágrafo</p> <p>este texto é outro parágrafo</p> ELEMENTOS VAZIOS TAMBÉM DEVEM SER SEMPRE FECHADOS Elementos vazios devem ser fechados por um / antes do >. Confira nos exemplos: ERRADO Quebra de Linha <br> Linha Horizontal <hr> Imagem <img src= img.gif > CORRETO Quebra de Linha <br /> Linha Horizontal <hr /> Imagem <img src= img.gif alt= Imagem GIF title= Imagem GIF /> ELEMENTOS XHTML DEVEM ESTAR EM MINÚSCULO ERRADO <BODY> <P>Este texto é um parágrafo</p> </BODY> CORRETO <body> <p>este texto é um parágrafo</p> </body> 4

5 DOCUMENTOS XHTML DEVEM CONTER APENAS UM ELEMENTO RAIZ Todos os elementos XHTML devem estar contidos dentro do elemento raiz <html>. Elementos filho devem estar sempre em pares e corretamente aninhados dentro de seus respectivos elementos pai. Estrutura básica de um documento XHTML: <html> <head>... </head> <body>... </body> </html> MAIS ALGUMAS REGRAS DE SINTAXE XHTML Nomes de atributos devem estar em minúsculo Valores de atributos devem estar entre aspas Abreviação de atributos é proibida O tipo de documento XHTML determina os elementos obrigatórios NOMES DE ATRIBUTOS DEVEM ESTAR EM MINÚSCULO ERRADO <table WIDTH=100%> CORRETO <table width=100%> VALORES DE ATRIBUTOS DEVEM ESTAR ENTRE ASPAS ERRADO <table width=100%> CORRETO <table width= 100% > ABREVIAÇÃO DE ATRIBUTOS É PROIBIDA ERRADO <option selected> 5

6 CORRETO <option selected= selected > ATRIBUTOS MINIMIZADOS EM HTML E COMO DEVEM FICAR NO XHTML H T M L compact compact="compact" checked checked="checked" declare declare="declare" readonly readonly="readonly" disabled disabled="disabled" selected selected="selected" defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" ELEMENTOS XHTML OBRIGATÓRIOS X H T M L Todos os documentos XHTML devem ter o DOCTYPE declarado. Os elementos html, head, title e body devem estar sempre presentes. Este documento contém o mínimo de tags requeridas para um documento XHTML: <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title goes here</title> </head> <body> </body> </html> Nota: O DOCTYPE não é uma parte nativa do documento XHTML. Ele não é um elemento XHTML. Nota: O Atributo xmlns na tag <html>, especifica o nome do XML para um documento e é necessária em documentos XHTML. O xmlns = é padrão, e será adicionado à tag <html> mesmo se você não incluí lo. Agora que vimos como estruturar corretamente um código xhtml, vamos nos aprofundar em técnicas semânticas de desenvolvimento para que possamos escrever códigos concisos que sejam claros tanto para seres humanos quanto para máquinas. 6

7 C A P I T U L O 0 2 C O N H E C E N D O XHTML 7

8 ENTENDENDO AS TAGS OBRIGATÓRIAS Estas tags são as mínimas requisitadas para um documento XHTML, pois marcam as características mais básicas que um documento deve ter. <html></html> descreve um documento HTML (uma página web). <head></head> marca o cabeçalho do documento HTML (onde são encontradas configurações e descrições do documento). <title></title> marca o título da página (aquele que aparece na barra ativa do navegador). <body></body> marca o conteúdo visível do documento HTML. EDITANDO DOCUMENTOS HTML Qualquer editor de textos tem a capacidade de editar documentos HTML. Um documento HTML é caracterizado pela extensão do documento, que pode ser.html ou.htm Qual a diferença? O.htm é um formato mais antigo que era utilizado na época em que não existiam arquivos com extensão maior que 3 letras, mas nos dias atuais ambos funcionam corretamente em qualquer navegador. Profissionais utilizam editores como Adobe Dreamweaver e Microsoft Expression Web, que fornecem recursos complementares que ajudam na produção. COMENTÁRIOS HTML Comentários podem ser inseridos dentro do código HTML para torná lo mais legível e fácil de entender. Comentários não são interpretados por navegadores. Exemplo: <! Isto é um comentário > TÍTULOS HTML Títulos HTML são definidos pelas tags de <h1> a <h6>. Exemplo: <h1>isto é um título</h1> <h2>isto é um título</h2> <h3>isto é um título</h3> <h4>isto é um título</h4> <h5>isto é um título</h5> <h6>isto é um título</h6> Títulos HTML são importantes, e não devem ser utilizados somente para tornar textos GRANDES e negritos. Mecanismos de busca utilizam os títulos HTML como índice para o conteúdo de seu site. Os títulos são interpretados como muito importante para o H1 e decrescendo até o menos importante que é o H6. 8

9 LINHAS HTML A tag <hr /> cria uma linha horizontal utilizada para separar visualmente o conteúdo. Exemplo: <p>isto é um parágrafo</p> <hr /> <p>isto é outro parágrafo</p> PARÁGRAFOS HTML Parágrafos HTML são definidos pela tag <p>. Exemplo: <p>isto é um parágrafo</p> Nota: A maioria dos navegadores adiciona uma linha vazia antes e depois do parágrafo. QUEBRAS DE LINHAS HTML A tag <br /> marca uma quebra de linha. Pode ser utilizada tanto dentro quanto fora de blocos de conteúdo. Exemplo: <p>isto é um parágrafo <br /> com uma quebra de linha</p> FORMATANDO TEXTOS HTML Algumas tags que servem para formatação textos HTML: T A G D E S C R I Ç Ã O <b> Define um texto negrito <em> Define um texto enfatizado <i> Define um texto itálico <small> Define um texto com letras pequenas <strong> Define um texto forte <sub> Define um texto subescrito <sup> Define um texto sobrescrito <ins> Define um texto inserido <del> Define um texto deletado <abbr> Define uma abreviação <address> Define informações do autor da página <blockquote> Define uma citação longa <q> Define uma citação curta <cite> Define uma citação <dfn> Define um termo de definição 9

10 LINKS HTML Um Link (hyperlink) é uma palavra, grupo de palavras ou uma imagem que você pode clicar e acessar outro documento ou uma nova sessão no mesmo documento. Outra característica dos links é que quando você passa o mouse em cima de um link o cursor do mouse muda de uma seta para uma mão pequena. Links HTML são definidos pela tag <a>. Exemplos: <a href= endereco_do_documento.html title= link >Isto é um link</a> Para criar um link direcionado para outro documento, utiliza se o atributo href. <a name= topo_pagina title= Voltar ao topo >Voltar ao topo</a> Para criar um link direcionado para outra sessão do mesmo documento, utiliza se o atributo name. IMAGENS HTML Imagens HTML são definidas pela tag <img />. Exemplo: <img src= imagemlogo.gif title= Logotipo alt= Imagem Logotipo /> Para exibir uma imagem em um documento html, você precisa utilizar o atributo src. SRC significa source. O valor deste atributo deve ser o endereço URL da imagem que deseja exibir no documento. O atributo alt é obrigatório na marcação de uma imagem em um documento html, este atributo tem como finalidade exibir um texto alternativo no lugar da imagem, caso a imagem não possa ser carregada. TABELAS HTML Tabelas HTML são definidas pela tag <table>. Exemplo: <table> <thead> <tr> <th>célula 1</th> <th>célula 2</th> </tr> </thead> <tbody> <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </tbody> </table> 10

11 Especificando tabelas: <table> define uma tabela <th> define uma célula do cabeçalho da tabela <tr> define uma linha da tabela <td> define uma célula da tabela <caption> define a legenda da tabela <thead> define o grupo de células do cabeçalho da tabela <tbody> define o grupo de células do corpo da tabela <tfoot> define o grupo de células do rodapé da tabela LISTAS HTML Lista não ordenada é definida pela tag <ul>. Dentro da lista, cada item é definido pela tag <li>. Exemplo: <ul> <li>item 1</li> <li>item 2</li> </ul> Lista ordenada é definida pela tag <ol>. Dentro da lista, cada item é definido pela tag <li>. Exemplo: <ol> <li>item 1</li> <li>item 2</li> </ol> Lista de definição é definida pela tag <dl>. Dentro da lista, cada item é definido pela tag <dt>. A descrição do item de uma lista de definição é definida pela tag <dd>. Exemplo: <dl> <dt>item 1</dt> <dd>descrição do Item 1</dd> <dt>item 2</dt> <dd> Descrição do Item 2</dd> </dl> FORMULÁRIOS HTML Formulários HTML são definidos pela tag <form>. Exemplo: <form> <! Elementos do formulário > </form> 11

12 ELEMENTOS INPUT São os mais importantes elementos de um formulário. Elementos de entrada têm a função de receber informações do usuário. INPUT TEXT O elemento <input type= text /> define um campo de texto de uma única linha, onde o usuário pode entrar com informações no formato texto: <form> <label>nome:</label><input type= text name= txt_nome /> <label> </label><input type= text name= txt_ /> </form> INPUT PASSWORD O elemento <input type= password /> define um campo de texto para senhas: <form> <label>usuario:</label><input type= text name= txt_usuario /> <label>senha:</label><input type= password name= txt_senha /> </form> INPUT RADIO O elemento <input type= radio /> define um botão radio. Um botão radio é utilizado para exibir diversas opções para o usuário, das quais ele pode selecionar apenas uma única opção: <form> <input type= radio name= sexo value= feminino />Feminino <input type= radio name= sexo value= masculino />Masculino </form> INPUT CHECKBOX O elemento <input type= checkbox /> define uma caixa de seleção. Caixas de seleção permitem que o usuário selecione uma ou mais opções: <form> <input type= checkbox name= transporte value= motocicleta />Eu tenho uma Motocicleta <input type= checkbox name= transporte value= carro />Eu tenho um Carro </form> INPUT SUBMIT O elemento <input type= submit /> define um botão de envio. Botões de envio são utilizados para enviar as informações de um formulário para um servidor: <form action= envia_formulario.php method= post > <input type= submit value= Enviar /> </form> 12

13 ELEMENTO TEXTAREA Definido pela tag <textarea>. Define um campo de texto com múltiplas linhas, onde o usuário pode inserir grandes textos: <textarea> Digite sua mensagem aqui. </textarea> ELEMENTO LABEL Definido pela tag <label>. Define um campo não editável que funciona como uma etiqueta para outros elementos do formulário: <form> <label>nome:</label><input type= text name= txt_nome /> <label> </label><input type= text name= txt_ /> </form> ELEMENTO SELECT Definido pela tag <select>. Define uma lista com múltiplas opções que permite a seleção de apenas uma delas pelo usuário: <select name="carros"> <option value="volkswagen">volkswagen</option> <option value="chevrolet">chevrolet</option> <option value="fiat">fiat</option> <option value="ford">ford</option> </select> ELEMENTO BUTTON Definido pela tag <button>. Define um botão para o formulário. BUTTON RESET O elemento <button type= reset > define um botão que tem como finalidade limpar os campos de um formulário: <button type= reset >Limpar</button> BUTTON SUBMIT O elemento <button type= submit > define um botão que tem como finalidade envias as informações dos campos de um formulário para um servidor: <button type= submit >Enviar</button> 13

14 C A P I T U L O 0 3 I N T R O D U Ç Ã O A O CSS 14

15 O QUE É CSS? CSS significa Folhas de Estilo em Cascata (Cascade Style Sheet) O CSS define como os elementos HTML serão apresentados CSS foi implementado na versão 4.0 do HTML para resolver um problema Folhas de Estilo Externas podem economizar muito trabalho O CSS RESOLVEU UM GRANDE PROBLEMA O HTML nunca teve o propósito de formatar um documento, apenas marcar sua estrutura. Quando tags como <font>, e atributos que formatam cores e etc foram adicionados ao HTML 3.2, teve início um pesadelo para os desenvolvedores web. No desenvolvimento de grandes sites, quando informações de fonts e cores eram adicionadas a uma única página por vez, teve início um longo e trabalhoso processo. Para resolver este problema, o W3C criou o CSS. No HTML 4.0, todas as tags e atributos que formatavam o documento foram removidos. Todos os browsers hoje em dia suportam CSS. CSS ECONOMIZA MUITO TRABALHO CSS define como elementos HTML serão exibidos. Folhas de estilo são salvos em arquivos externos com extensão css. Folhas de estilo externas permitem que você formate a aparência e o posicionamento de elementos de todas as páginas do site, modificando apenas um arquivo. SINTAXE CSS Uma regra CSS é composta por duas partes: um seletor e uma ou mais declarações: SELETOR DECLARAÇÃO DECLARAÇÃO h1 { color: blue; font size: 12px; } PRODRIEDADE VALOR PRODRIEDADE VALOR SELETORES CSS Seletores CSS podem ser elementos html, ids ou classes. SELETORES ELEMENTOS HTML Seletores HTML são compostos apenas pelo nome da tag: h1 { color: red; } Esta regra atribui a cor vermelha a todos os elementos <h1> do documento HTML 15

16 SELETORES ID O seletor id deve ser utilizado para apontar apenas um único elemento no documento HTML. No CSS o id é identificado pelo símbolo # antes de seu nome: #menu { font size: 16px; } Esta regra atribui o tamanho 16 ao elemento com o id menu no documento HTML SELETORES CLASS O seletor class pode ser utilizado para apontar um ou mais elementos no documento HTML. No CSS a class é identificada pelo símbolo. antes de seu nome:.paragrafo_noticia { text align: justify; } Esta regra alinha o texto de todos os elementos com a classe paragrafo_noticia como justificado TRÊS FORMAS DE INSERIR CSS EM SEU DOCUMENTO HTML Importando documento CSS Folha de Estilo Externa Declarando uma sessão para CSS no documento HTML Folha de Estilo Interna Utilizando CSS misturado com código HTML Estilo em linha INSERINDO CSS FOLHA DE ESTILO EXTERNA Há duas formas de importar um documento CSS para um documento HTML: <link rel= stylesheet type= text/css href= arquivo.css /> Esta é totalmente legal para documentos HTML Strict, pois importamos um documento CSS através de uma tag HTML nativa <style type= text/css url( folha_estilo.css ); </style> Esta forma é hibrida, pois mistura o código css com o html. INSERINDO CSS FOLHA DE ESTILO INTERNA Esta forma utiliza um método hibrido, porém organizado. Com ela criamos uma sessão somente para o código CSS dentro do documento HTML, o lugar correto para declarar esta sessão é dentro do cabeçalho do documento HTML (entre as tags <head></head>): <head> <title>titulo da Página</title> <style type= text/css >...Seu código CSS... </style> </head> 16

17 INSERINDO CSS ESTILO EM LINHA Estilo em linha perde muitas das vantagens oferecidas pelo CSS, pois mistura totalmente o código CSS com o HTML, adotando as regras CSS como propriedades das tags HTML: <p style= color: red; text indent: 25px; text align: justify; >Isto é um parágrafo</p> MÚLTIPLAS FOLHAS DE ESTILO Múltiplas Folhas de Estilo são carregadas em cascata. É possível ter múltiplas folhas de estilo externas, internas e estilos em linha. Quando interpretados pelo navegador, todos estes estilos serão organizados em cascata em uma única e virtual folha de estilo seguindo uma ordem de prioridade: 1. Estilo em Linha 2. Folha de Estilo Interna 3. Folha de Estilo Externa 4. Padrão do Navegador O Estilo em linha apresenta a maior prioridade e o padrão do navegador a menor, ou seja, se tiver um estilo em linha em um parágrafo com o id paragrafo_destaque determinando que a cor dele seja azul e uma regra em um arquivo externo determinando que este parágrafo seja vermelho, ele será azul, pois o estilo em linha tem maior prioridade. Obs.: As múltiplas folhas de estilo externas e internas tomam maior prioridade com a ordem lógica do código, por exemplo: se tiver uma folha de estilo interna em um documento HTML e uma folha de estilo externa sendo importada após esta folha de estilo interna, a folha de estilo externa irá sobrescrever as regras especificadas na folha de estilo interna, caso haja regras repetidas. 17

18 C A P I T U L O 0 4 C O N H E C E N D O CSS 18

19 APROFUNDANDO SELETORES CSS Seletores CSS podem ser aninhados ou agrupados. SELETORES ANINHADOS Para atingirmos um parágrafo que está dentro de uma <div> com o id destaque devemos utilizar seletores aninhados: div#destaque p { Declarações CSS } SELETORES AGRUPADOS Para atingirmos um parágrafo e um título <h2> para criar uma mesma regra podemos agrupar os seletores para economizar código: p, h2 {...Declarações CSS... } ENTENDO DECLARAÇÕES CSS Declarações CSS são compostas por duas partes: propriedades e valores. Propriedade são as características que deseja modificar no código HTML como: border, color, background, font, margin, etc. Valores diferem entre propriedades como: numéricos para largura de bordas, códigos hexadecimais para cores ou palavras reservadas como none. UNIDADES DE MEDIDA CSS % porcentagem. in polegada. cm centímetro. mm milímetro. em unidade proporcional ao tamanho padrão da fonte especificada no navegador. Se o tamanho for 12px então 1 em = 12 px. pt 1 ponto é equivalente a 1/72 polegada. px 1 pixel é equivalente a 1 ponto no monitor. 19

20 VALORES DE CORES CSS Nome da Cor O nome da cor desejada, exemplo: red. rbg(x,x,x) Um valor RGB, exemplo: rgb(255,0,0). rbg(x%, x%, x%) Porcentagem de um valor RGB, exemplo: rgb(100%,0%,0%). #rrggbb Código hexadecimal, exemplo: #ff0000. MODELO DA CAIXA CSS Todos os elementos HTML podem ser vistos como caixas do ponto de vista do CSS: A caixa é formada por propriedades padrões que existem em todos os elementos HTML: o conteúdo, padding, border e margin. Padding Limpa a área em volta do conteúdo anterior à borda. Border Define a borda em torno do conteúdo e do padding. Margin Limpa a área em volta da borda. Em ordem para definir a largura e a altura de elementos corretamente em todos os navegadores, é necessário compreender como o modelo da caixa funciona. ENTENDENDO O MODELO DA CAIXA CSS Quando você especifica a largura e a altura de um elemento pelo CSS, você está especificando somente as dimensões do conteúdo. Para saber o tamanho total de um elemento é necessário adicionar os tamanhos do padding, border e margin. 20

21 A largura total do elemento a seguir é de 300px: width: 250px; padding: 10px; border: 5px solid gray; margin: 10px; Vamos calcular: 250px (width) + 20px (padding da esquerda e direita) + 10px (bordas da direita e da esquerda) + 20px (margem da direita e da esquerda) = 300px A largura total de um elemento deve ser sempre calculada assim: Largura_Conteúdo + Padding_Esquerda + Padding_Direita + Borda_Esquerda + Borda_Direita + Margin_Esquerda + Margin_Direita. A altura total de um elemento deve ser sempre calculada assim: Altura_Conteúdo + Padding_Cima + Padding_Baixo + Borda_Cima + Borda_Baixo + Margin_Cima + Margin_Baixo. POSICIONAMENTO CSS O CSS possui propriedades que permitem que você posicione elementos. Também permite que você ordene os e especifique o que acontecerá se o conteúdo for mais do que o tamanho do elemento. As proriedades top, bottom, left e right auxiliam o posicionamento de elementos. POSICIONAMENTO ESTÁTICO É definido pela propriedade: position: static;. Elementos HTML são posicionados de forma estática automaticamente. Um elemento posicionado estaticamente será sempre posicionado de acordo com o fluxo da página. Elementos posicionados estaticamente não são afetados pelas propriedades top, bottom, left e right. POSICIONAMENTO FIXO É definido pela propriedade: position: fixed;. Um elemento com posicionamento fixo é relativo à janela do navegador. Ele não irá se mover, mesmo que utilize scroll na janela do navegador. div.posicionamento_fixo { position: fixed; top: 15px; right: 5px; } Elementos com posicionamento fixo são removidos do fluxo normal da página. O documento e outros elementos irão se comportar como se o elemento com posicionamento fixo não existisse. Elementos com posicionamento fixo podem sobrepor outros elementos. 21

22 POSICIONAMENTO RELATIVO É definido pela propriedade: position: relative;. Um elemento com posicionamento relativo é relativo ao seu posicionamento no fluxo normal da página. div.posicionamento_relativo { position: relative; top: 20px; } O conteúdo de um elemento com posicionamento relativo pode ser movido e sobrepor outros elementos, mas o espaço reservado para este elemento no fluxo normal da página é preservado. POSICIONAMENTO ABSOLUTO É definido pela propriedade: position: absolute;. Um elemento com posicionamento absoluto esta relacionado com o primeiro elemento pai que tenha um posicionamento diferente de estático. Se não houver nenhum, ele toma o elemento <html> como referência. div.posicionamento_absoluto { position: absolute; width: 100%; top: 0px; right: 150px; } Elementos com posicionamento absoluto são removidos do fluxo normal da página. O documento e outros elementos irão se comportar como se o elemento com posicionamento absoluto não existisse. Elementos com posicionamento absoluto podem sobrepor outros elementos. SOBREPONDO ELEMENTOS É definido pela propriedade: z index: 1;. Quando elementos são posicionados fora do fluxo normal da página, eles podem ser sobrepostos por outros elementos. A propriedade z index especifica a ordem dos elementos (qual elemento fica na frente ou atrás de outro elemento). O elemento com o maior valor será o da frente. 22

23 ALINHANDO ELEMENTOS Além das propriedades de posicionamento, também podem alinhar elementos utilizando a propriedade margin, na qual podems especificar a distância de espaçamento em unidades de medidas ou alinhar dinamicamente ao centro especificando uma largura ao elemento e deixando as margens laterais automáticas. Exemplo de alinhamento dinâmico ao centro: div#container { width: 960px; margin: 0 auto; } DIMENSIONAMENTO Elementos podem ter altura e largura especificados: heigh Define a altura de um elemento. max height Define a altura máxima de um elemento. min height Define a altura mínima de um elemento. width Define a largura de um elemento. max width Define a largura máxima de um elemento. min width Define a largura mínima de um elemento. FORMATANDO TEXTOS COR É definido pela propriedade: color: #ff0000;. ALINHAMENTO É definido pela propriedade: text align: center;. Pode assumir os valores de alinhamento padrão de texto: left, right, center e justify. DECORAÇÃO É definido pela propriedade: text decoration: none;. Pode assumir os seguintes valores: overline, underline, line through, blink e none. TRANSFORMAÇÃO É definido pela propriedade: text transform: uppercase;. Pode assumir os seguintes valores: uppercase, lowercase e capitalize. INDENTAÇÃO É definido pela propriedade: text indent: 25px;. 23

24 FORMATANDO FONTS TIPO É definido pela propriedade: font family: verdana. ESTILO É definido pela propriedade: font style: italic. Pode assumir os seguintes valores: italic, oblique e normal. TAMANHO É definido pela propriedade: font size: 12px. PESO É definido pela propriedade: font weight: bold. Pode assumir os seguintes valores: normal, bold, bolder, lighter e valores numéricos de 100 a 900 sendo de 100 em 100 unidades: 100, 200, 300, 400, etc. ESTILIZANDO FUNDOS COR É definido pela propriedade: background color: #ff00ff;. IMAGEM É definido pela propriedade: background image: url( imagem.gif );. REPETIÇÃO É definido pela propriedade: background repeat: no repeat;. Pode assumir os seguintes valores: no repeat, repeat x e repeat y. POSICIONAMENTO É definido pela propriedade: background position: top left;. Pode assumir os seguintes valores: top, bottom, center, left e right. ESTILIZANDO LINKS Links podem ser estilizados com qualquer propriedade CSS (exemplo: fontfamily, font size, text decoration, background color, etc), porém o CSS possui alguns seletores personalizados para estilizar estados de links como: links visitados, links ativos, etc. São quatro os estados que um link pode assumir: a:link Um link normal, ainda não visitado. a:visited Um link já visitado pelo usuário. a:hover Um link quando o mouse está em cima dele. a:active Um link quando está sendo clicado. 24

25 ESTILIZANDO LISTAS IMAGEM É definido pela propriedade: list style image: url( item_lista.gif ). POSIÇÃO É definido pela propriedade: list style position: inside. Pode assumir os seguintes valores: inside e outside. TIPO É definido pela propriedade: list style type: square;. FLUTUANDO ELEMENTOS É definido pela propriedade: float: left;. O CSS tem uma propriedade que permite fazer com que elementos flutuem (saiam do fluxo normal da página). Elementos podem flutuar somente à direita e à esquerda. Elementos anteriores ao elemento flutuante não serão afetados, porém elementos após o elemento flutuante serão posicionados automaticamente em torno do elemento flutuante. Exemplo: se uma imagem flutua para a direita, o texto que vem logo abaixo desta imagem irá flutuar para sua esquerda. Exemplo: img { float: left; } Há uma propriedade que torna possível limpar os espaços laterais aos elementos flutuantes caso não deseje que o conteúdo seguinte seja posicionado ao seu lado. Esta propriedade é a clear, que pode assumir os seguintes valores: left, right ou both. Se não quisermos que nada fique à direita de nossa imagem flutuando à esquerda utilizamos o clear da seguinte forma: img { float: left; clear: right; } 25

26 CSS DISPLAY Esta propriedade define como e se um elemento será exibido na página. Os principais valores assumidos são: none, inline e block. Com esta propriedade podemos esconder um texto na exibição da página: h2 { display: none; } 26

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

Web Design Aula 11: XHTML

Web Design Aula 11: XHTML Web Design Aula 11: XHTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação HTML 1.0-2.0: Havia hipertextos, não havia preocupação com a apresentação HTML 3: Guerra dos Browser (Microsoft

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

Exemplo de uso correto da semântica HTML

<!DOCTYPE html> <html lang = pt-br> <head> <meta charset = UTF-8> <title> Exemplo de uso correto da semântica HTML </title> </ head > Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG

Leia mais

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Estrutura básica do HTML Um documento HTML deve estar delimitado pela tag e . Dentro deste documento, podemos ainda distinguir

Leia mais

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML Prof.: Melba Lima Gorza Aula Introdutória de HTML Componentes do HTML Estrutura de um documento XHTML primeiro Documento XHTML meu primeiro documento XHTML

Leia mais

Unidade IV Introdução à Linguagem PHP Parte 1

Unidade IV Introdução à Linguagem PHP Parte 1 Unidade IV Introdução à Linguagem PHP Parte 1 Professor Fabiano de Paula Soldati fpsoldati@yahoo.com.br http://br.groups.yahoo.com/group/professorsoldati/ Introdução HTML = HyperText Markup Language HTML

Leia mais

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,

Leia mais

Autoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Autoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML Apresentar

Leia mais

Aplicação para Web I. Começando a compreender o HTML

Aplicação para Web I. Começando a compreender o HTML Aplicação para Web I Começando a compreender o HTML A Linguagem da WEB O HTML ou HyperText Markup Language linguagem universal compreendida pelos navegadores web (browsers) para a comunicação utilizando

Leia mais

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form
...
form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Estrutura Básica do Documento HTML

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Estrutura Básica do Documento HTML IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage EstruturaBásicadoDocumentoHTML ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML O Desenvolvimento Web O desenvolvimento web é o termo utilizado para descrever atividade relacionada

Leia mais

Introdução à Tecnologia Web 2010

Introdução à Tecnologia Web 2010 IntroduçãoàTecnologiaWeb2010 CSS CascadingStyleSheets Sintaxe ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger CascadingStyleSheets Sintaxe Índice 1 O que é CSS?... 2 2 Vantagens do uso de CSS...

Leia mais

( Curso Introdutório) Versão 0.2a 7 de março de 2005 - Versão - Rascunho -

( Curso Introdutório) Versão 0.2a 7 de março de 2005 - Versão - Rascunho - Apostila de XHTML ( Curso Introdutório) Versão 0.2a 7 de março de 2005 - Versão - Rascunho - Prof. Luis Rodrigo de O. Gonçalves E-mail:luisrodrigoog@yahoo.com.br site: http://www.lrodrigo.cjb.net Prof.

Leia mais

Desenvolvimento em Ambiente Web. HTML - Introdução

Desenvolvimento em Ambiente Web. HTML - Introdução Desenvolvimento em Ambiente Web HTML - Introdução O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas,

Leia mais

Aula 2: Listas e Links

Aula 2: Listas e Links Aula 2: Listas e Links Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a entender o que são listas de definições e como fazer referências a outros documentos. Vamos entender a diferença

Leia mais

MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS. Redes de Comunicação

MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS. Redes de Comunicação MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS Redes de Comunicação Regras para um website eficaz Categorização dos conteúdos estrutura lógica dos conteúdos Condensação conteúdos simples e directos

Leia mais

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 ESCOLA ESTADUAL PROF. JOSÉ BARROSO TOSTES PROFESSOR: ESP. ANDREW RODRIGUES CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 1 APOSTILA DE INTRODUÇÃO À LINGUAGEM

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

WEB DESIGNER WEB DESIGNER

WEB DESIGNER WEB DESIGNER WEB DESIGNER 1 WEB DESIGNER INICIO DO CURSO DE HTML 4.0 Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador

Leia mais

Layouts de páginas com HTML e CSS

Layouts de páginas com HTML e CSS Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.

Leia mais

Programação de Servidores CST Redes de Computadores

Programação de Servidores CST Redes de Computadores Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden http://marx.vanderlinden.com.br ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) HMTL Arquivo-texto

Leia mais

HTML Básico. Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br

HTML Básico. Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br HTML Básico Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br Referências Bibliográficas: Iniciando em HTML Ramalho, Makron Books Home

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign Introdução a e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a Apresentar as

Leia mais

Profa. Reane Franco Goulart

Profa. Reane Franco Goulart Profa. Reane Franco Goulart A linguagem HTML (Hypertext Markup Language) tem o objetivo de formatar textos através de marcações especiais denominadas tags, para que possam ser exibidos de forma conveniente

Leia mais

Introdução a Servlets e JSP. Prof. Samuel Martins samuellunamartins at gmail dot com Faculdade São Miguel

Introdução a Servlets e JSP. Prof. Samuel Martins samuellunamartins at gmail dot com Faculdade São Miguel Introdução a Servlets e JSP samuellunamartins at gmail dot com Conteúdo da aula Introdução a HTML Introdução a Servlets Preparando o ambiente de programação Exemplo de Servlets 2 Websites na década de

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

LINGUAGEM DE PROGRAMAÇÃO WEB

LINGUAGEM DE PROGRAMAÇÃO WEB LINGUAGEM DE PROGRAMAÇÃO WEB GABRIELA TREVISAN Formulários e Aula 3 Relembrando HTML 5 Tag Form o Utilizada para marcar a região do formulário. o Os atributos mais importantes são o method e o action.

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Tecnologias Web. Formulários HTML

Tecnologias Web. Formulários HTML Tecnologias Web Formulários HTML Cristiano Lehrer, M.Sc. Tag form (1/2) Todo formulário em HTML é construído usando elementos dentro de um bloco . O bloco define a URL que receberá o formulário

Leia mais

A estrutura de um documento HTML apresenta os seguintes componentes:

A estrutura de um documento HTML apresenta os seguintes componentes: A estrutura de um documento HTML apresenta os seguintes componentes: Titulo do Documento texto, imagem, links,... As etiquetas HTML não são sensíveis

Leia mais

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos

Leia mais

Prova de pré-requisito

Prova de pré-requisito Prova de pré-requisito PHP & MySQL: Técnicas para Web 2.0 1 - Qual das opções constrói a tabela abaixo: DIA MÊS ANO 28 04 1988 22 02 2002 a) b) c) dia mês ano

Leia mais

André Kawamoto NE31A

André Kawamoto NE31A André Kawamoto NE31A Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes Internet x WWW Internet e World

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html

Leia mais

Linguagens para WEB Tecnologia Cliente XHTML / CSS. Professora: Lucélia Oliveira

Linguagens para WEB Tecnologia Cliente XHTML / CSS. Professora: Lucélia Oliveira Linguagens para WEB Tecnologia Cliente XHTML / CSS Professora: Lucélia Oliveira Professora Lucélia Oliveira 2 Sumário APRESENTAÇÃO... 5 1. CONCEITOS... 6 1.1. HTML... 6 1.2. XHTML... 6 1.3. tags... 6 2.

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Introdução à Tecnologia Web 2010 HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Listas

Introdução à Tecnologia Web 2010 HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Listas IntroduçãoàTecnologiaWeb2010 HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Listas ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Listas Índice

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

APOSTILA DE PROGRAMAÇÃO WEB

APOSTILA DE PROGRAMAÇÃO WEB Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido

Leia mais

HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários

HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários HTML Sessão 8 HTML Falta ver de que forma podemos trocar informações com nosso visitante. Este aspecto é primordial para a grande quantidade de acções que se podem realizar : Comprar um artigo, preencher

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

CSS -Cascading Style Sheets - Introdução

CSS -Cascading Style Sheets - Introdução CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

Apostila de XHTML Curso de Internet Professor Rinaldo Demétrio

Apostila de XHTML Curso de Internet Professor Rinaldo Demétrio Conteúdo XHTML - Por quê?... 2 Porque XHTML?... 2 Diferenças Entre XHTML e HTML... 3 Como Preparar-se para a XHTML... 3 As Diferenças Mais Importantes:... 3 Os Elementos Devem Estar Devidamente Aninhados...

Leia mais

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é : TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz

Leia mais

AUTORIA WEB. Prof. Antonio Arley Rodrigues da Silva. arleysb@gmail.com

AUTORIA WEB. Prof. Antonio Arley Rodrigues da Silva. arleysb@gmail.com AUTORIA WEB Prof. Antonio Arley Rodrigues da Silva arleysb@gmail.com Sumário 1 Introdução... 4 2 HTML... 5 2.1 Estrutura Básica... 5 2.1.1 Exercícios de Fixação... 6 2.2 Semântica HTML... 6 2.3 Parágrafos...

Leia mais

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma

Leia mais

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets Introdução CSS - Cascading Style Sheets Padrão de Apresentação de Documentos CSS Cascate Style Sheets Objetivos: Conhecer o Histórico; Conhecer a Usabilidade; Por que usar? Quando usar? Como usar? Conhecer

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos.

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos. Ana Paula Ambrósio Zanelato anapaula@unitoledo.br Disciplina: Aplicações para Web Conteúdo Introdução; ; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores

Leia mais

Links e Frames José Antônio da Cunha

Links e Frames José Antônio da Cunha Links e Frames José Antônio da Cunha Links Até agora, produzimos documentos simples. Mas os documentos de hipertexto têm como principal característica, fazer ligações com outros hipertextos. Os pontos

Leia mais

Curso de HTML. Daniel Destro do Carmo Softech Network Informática daniel@danieldestro.com.br

Curso de HTML. Daniel Destro do Carmo Softech Network Informática daniel@danieldestro.com.br Daniel Destro do Carmo Softech Network Informática daniel@danieldestro.com.br Definições conceituais O que é HTML? Criando e publicando uma página web Elementos da HTML Estrutura básica de uma página HTML

Leia mais

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

Web Design Aula 13: Introdução a CSS

Web Design Aula 13: Introdução a CSS Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas

Leia mais

Programação WEB I. Ms. Bruno Crestani Calegaro (bruno.calegaro@ifsc.edu.br) Jun/ 2015

Programação WEB I. Ms. Bruno Crestani Calegaro (bruno.calegaro@ifsc.edu.br) Jun/ 2015 Programação WEB I Ms. Bruno Crestani Calegaro (bruno.calegaro@ifsc.edu.br) Jun/ 2015 Desenvolvendo Aplicações WEB Aplicativos web estão em alta hoje em dia. Cada vez mais antigos sistemas desktops migram

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

CRIAÇÃO DE SITES (AULA 3)

CRIAÇÃO DE SITES (AULA 3) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 3) Mais algumas tags Existem tagsque são abertas e fechadas em única tag. Estas

Leia mais

HTML: Formulários Programação de Servidores

HTML: Formulários Programação de Servidores HTML: Formulários Programação de Servidores Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Exemplo 2 Criando um Formulário Um formulário é composto

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

Tecnologias da Internet (T) Avaliação de Frequência (versão A) 120 minutos * 11.04.2013

Tecnologias da Internet (T) Avaliação de Frequência (versão A) 120 minutos * 11.04.2013 1 Este é o seu teste de avaliação de frequência. Leia as perguntas com atenção antes de responder e tenha atenção que algumas perguntas podem ter alíneas de resposta em páginas diferentes. Escreva as suas

Leia mais

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza Formulários Em PHP Métodos GET e POST progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Entender o funcionamento

Leia mais

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

Introdução ao HTML Hypertext Markup Language

Introdução ao HTML Hypertext Markup Language Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do

Leia mais

CADERNOS DE INFORMÁTICA Nº 1. Fundamentos de Informática I - Word 2010. Sumário

CADERNOS DE INFORMÁTICA Nº 1. Fundamentos de Informática I - Word 2010. Sumário CADERNO DE INFORMÁTICA FACITA Faculdade de Itápolis Aplicativos Editores de Texto WORD 2007/2010 Sumário Editor de texto... 3 Iniciando Microsoft Word... 4 Fichários:... 4 Atalhos... 5 Área de Trabalho:

Leia mais

Web Design: Responsivo e Adaptativo. Lara Popov Zambiasi Bazzi Oberderfer

Web Design: Responsivo e Adaptativo. Lara Popov Zambiasi Bazzi Oberderfer Web Design: Responsivo e Adaptativo Lara Popov Zambiasi Bazzi Oberderfer 1 # Construindo Layouts Tableless Layouts tableless são layouts ou páginas web construídas e estruturadas sem o uso das antigas

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

Scientific Electronic Library Online

Scientific Electronic Library Online FAPESP - CNPq BIREME - FapUNIFESP Scientific Electronic Library Online Manual de Codificação de Tabelas para xhtml Projeto PMC São Paulo Novembro 2013 INTRODUÇÃO Este manual tem o objetivo de mostrar passo

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

CSS Luciano Otávio de Assis CSS

CSS Luciano Otávio de Assis CSS CSS O HTML tem suas limitações quando se tratar de se construir layout. É certo, você tem seis diferentes tipos s títulos e de 6 diferentes tamanhos de fontes. Quando você trabalha com tabelas, você tem

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Universidade Federal do Espírito Santo

Universidade Federal do Espírito Santo Universidade Federal do Espírito Santo Núcleo de Tecnologia da Informação Gerenciamento do Conteúdo de Sítios Institucionais Versão 1.4 Atualizado em: 8/10/2015 Sumário Sumário................................................

Leia mais

1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML?

1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML? HTML 1. INTRODUÇÃO HTML abreviação de HiperText Markup Language é a linguagem de programação que usamos para criar uma página Web, que, por sua vez, será composta de textos e comandos especiais, chamados

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

Leia mais

Ensino Técnico Integrado ao Médio FORMAÇÃO PROFISSIONAL. Plano de Trabalho Docente 2014

Ensino Técnico Integrado ao Médio FORMAÇÃO PROFISSIONAL. Plano de Trabalho Docente 2014 Ensino Técnico Integrado ao Médio FORMAÇÃO PROFISSIONAL Plano de Trabalho Docente 2014 ETEC PROF. MASSUYUKI KAWANO Código: 136 Município: TUPÃ Eixo Tecnológico: INFORMAÇÃO E COMUNICAÇÃO Habilitação Profissional:

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Elementos Textuais Básicos

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Elementos Textuais Básicos IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo ElementosTextuaisBásicos ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo

Leia mais

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.

Leia mais

Web Design Livre. do GIMP ao HTML Jezmael Basilio Marcos Vinícius

Web Design Livre. do GIMP ao HTML <HTML> Jezmael Basilio Marcos Vinícius Web Design Livre do GIMP ao HTML Jezmael Basilio Marcos Vinícius GIMP 1. Introdução GIMP é o acrônimo para GNU Image Manipulation Program (Programa de Manipulação de Imagens do GNU). Como o próprio

Leia mais

08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão

08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior

Leia mais

Introdução ao HTML Utilizando frames Hospedando seu site na WEB

Introdução ao HTML Utilizando frames Hospedando seu site na WEB Introdução ao HTML Utilizando frames Hospedando seu site na WEB Por quê???? Por que com tantos editores gráficos de HTML, devemos saber como escrever um código fonte? Porque se você só viu páginas feitas

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais