C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML
|
|
|
- Alexandra Lúcia Salazar Felgueiras
- 8 Há anos
- Visualizações:
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=" <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
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
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
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;
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
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
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
<!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
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,
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
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
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
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
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
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,
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
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
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
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
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
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.
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
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.
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
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
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
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
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
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
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
( 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.
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
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
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
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
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
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
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:
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
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
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
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
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
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
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.
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
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
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
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:
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
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
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
Portal do Projeto Tempo de Ser
Sumário Portal do Projeto Tempo de Ser O que é um Wiki?...2 Documentos...2 Localizando documentos...3 Links...3 Criando um Documento...4 Criando um link...4 Editando um Documento...5 Sintaxe Básica...5
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,
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
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
HTML Página 1. Índice
PARTE - 1 HTML Página 1 Índice HTML A HISTÓRIA... 2 O COMEÇO E A INTEROPERABILIADE... 3 Primeira Página... 4 Entendendo seu código... 5 Abrindo o código fonte da sua página... 6 Comentários na página...
#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
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
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
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
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
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,
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
Introdução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de
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
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
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.
ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip 1996 Tutorial - Autoria em World Wide Web
RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip janeiro 1996 Tutorial - Autoria em World Wide Web Parte IV - Hypertext
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................................................
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
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...
Instituto Siegen Manual do Professor
Manual do Professor - www.institutosiegen.com.br - 1 Instituto Siegen Manual do Professor Manual do Professor - www.institutosiegen.com.br - 2 Sumário Instituto Siegen...1 Manual do Professor...1 Funcionamento
UTILIZANDO RECURSOS E ATIVIDADES NO MOODLE
UTILIZANDO RECURSOS E ATIVIDADES NO MOODLE Luanna Azevedo Cruz Polyana Ribas Bernardes 2015 2015 1. INTRODUÇÃO Para utilizar as funcionalidades acesse o Moodle: http://moodle.ead.ufvjm.edu.br/ e clique
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
> 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
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
HTML Página 29. Índice
PARTE - 5 HTML Página 29 Índice HTML - Hiperlinks... 30 Frames com links... 31 O código fonte do arquivo índex.htm... 31 Conhecendo os comandos border e bordercolor do frame... 31 Conhecendo os comandos
Incorporando JavaScript em HTML
Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags dentro do código HTML. A partir
UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA. Manual do Moodle- Sala virtual
UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA Manual do Moodle- Sala virtual UNIFAP MACAPÁ-AP 2012 S U M Á R I O 1 Tela de Login...3 2 Tela Meus
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á
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
7. Cascading Style Sheets (CSS)
7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma
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
WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou
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)
Mais sobre uso de formulários Site sem Ajax
Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher
Índice. 1.1. Static Text (texto estático)...1 1.2. Dynamic Text (Texto Dinâmico)...3 1.3. Input Text...7 1.4. Exercício...8
Textos no Flash Índice 1. Texto no Flash...1 1.1. Static Text (texto estático)...1 1.2. Dynamic Text (Texto Dinâmico)...3 1.3. Input Text...7 1.4. Exercício...8 1. Texto no Flash Há três maneiras de se
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.
Como criar um blog. Será aberta uma janela onde você deverá especificar o título do blog, o endereço do blog, e o modelo.
Como criar um blog Criando o blog Vá em www.blogger.com. Entre com sua conta google (a mesma que você usa para acessar o gmail). Escolha um perfil. Na página seguinte, clique no botão novo blog. Será aberta
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
UNIPAMPA Universidade Federal do Pampa. Núcleo de Tecnologia da Informação (NTI)
UNIPAMPA Universidade Federal do Pampa Núcleo de Tecnologia da Informação (NTI) Instruções para gerenciamento dos sites em Joomla (versão 1.5.3) Níveis: Editor e Administrador Junho/2008 Í N D I C E Usuários
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 Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
Tutorial Moodle ESDM - professores
Primeira entrada: Tutorial Moodle ESDM - professores USUÁRIO - MODIFICAR PERFIL No primeiro login/entrada no MOODLE aparecerá a tela do PERFIL para que o usuário complete seus dados. EDITANDO O PERFIL
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