Projeto e Criação de Páginas de Web

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

Download "Projeto e Criação de Páginas de Web"

Transcrição

1 Programa do Curso Projeto e Criação de Páginas de Web João Sérgio S. Assis Núcleo de Computação Eletrônica da UFRJ Tel. (021) Fax. (021) Material Notas de Aula Página do Curso Listas de Exercício e Soluções Avaliação Prova (de 0 a 10) Trabalho (de 0 a 30% da nota da prova) Nota Final = Prova + ( 1 + (Trabalho / 100) ) Primeira Versão dos Slides: Maurício Bonfim Referências de HTML Bibliográficas: Aprenda em uma semana HTML 4 Laura Lemay, Editora Campus Home pages: recursos e técnicas para criação de páginas WWW Andreia Alcântara e etc, Editora Campus HTML Dinâmico Ramalho, Editora Berkeley Na Internet: Em português Documentação da W3C Documentação do Netscape World Wide Web Definição: rede global de hiperdocumentos Desenvolvido no CERN Final da década de 80. Acesso a documentos espalhados pela rede, independente de sua localização. Características Tecnologia de hipermídia (Hipertextos) Apresentação gráfica e multimídia da informação Independente de plataforma Distribuido, dinâmico e interativo. Cliente-servidor Navegadores (Browsers) Acessar vários sites: navegar. Para navegar é necessário um software cliente Ele é responsável por: Solicitar documentos na Internet Interpreta-los, exibindo-os para o usuário Exemplos: Netscape, Internet Explorer, Mosaic, Lynx Servidores (Web Servers) São os programas capazes de disponibilizar informações na Web. Exemplos: Em ambiente UNIX: NCSA CERN Apache Em ambiente Windows: PWS IIS Netscape WebSite. 1

2 HTML Hypertext Markup Language URL (Uniform Resource Locator) Permite localizar um objeto na Internet É uma linguagem de marcação usada na formatação de documentos na Web. É interpretada pelo browser. Descreve o documento independente da plataforma de visualização. Portabilidade X Dificuldade de diagramação. Formato de endereçamento protocolo://servidor/diretório/arquivo Protocolo: nomalmente http http - Hypertext Transfer Protocol Outros protocolos: telnet, ftp, etc Home Pages Documento projetado para ser a página principal de um site. Objetivo básico: Direcionamento do usuário para outros documentos relacionados. Deve ter referências (links) às outras páginas do site Editores de HTML Servem para facilitar o processo de criação de páginas Existem inúmeras opções no mercado: Filtros conversores: Rtftohtml Pstohtml Editores de tags: HTML Assistant HotDog W3e Editores Wysiwyg: Netscape Composer FrontPage Express Gerenciadores de site: FrontPage AOLPress Macromedia Dreamweaver Características Gerais de HTML Como é um documento HTML? Arquivo ASCII. Texto corrido, ignora caracteres especiais como TAB, CR, LF. Marcações (tags) usam < e >. Empty tags e Container tags. Marcações podem ser aninhadas. Maiúsculas X Minúsculas. Comentários: <! >. Padronização pela W3C Versão atual HTML 4.01 Características Gerais de HTML Estrutura do documento: <html> < head> <title> </title> </head> <body>... </body> </html> 2

3 Características Gerais de HTML A estrutura padrão deve ser respeitada Apesar disso, é possível que o navegador exiba um texto, mesmo que ele esteja fora das áreas padrão Exemplo Formatação Básica Estilos físicos <b> Negrito </b> <i> Itálico </i> <u> Sublinhado </u> <tt> Mono-espaçado </tt> <sub> Sub-escrito </sub> <sup> Sobre-escrito </sup> Estilos lógicos <strong> Ênfase </strong> <em> Ênfase </em> <cite> Citação </cite> <code> Código fonte </code> Separadores Separadores <p> - Inicio de parágrafo. <br> - Quebra de linha. <hr> - Linha horizontal. Algumas tags podem receber atributos que modificam a sua apresentação. Atributos da tag <hr> size = n width = n width = n % noshade Cabeçalhos e Texto Pré-formatado Cabeçalhos <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> Texto Pré-formatado <pre> </pre> Outro exemplo... Alinhamento Básico Única forma de alinhamento até o HTML 4.0. Deve desaparecer em versões futuras. Caracteres Especiais Acentuação, em ambiente Windows, é produzida diretamente (norma ISO Latin 1). Codificação em HTML Alinhamento de Texto <P align=right> <H1 align=left> <DIV align=justify> á á ã ã â â à à ç ç Outros... < < > > & & " 3

4 Listas não numeradas Listas não numeradas <ul> <li> Correio Eletrônico </li> <li> Telnet </li> <li> Ftp </li> </ul> Lista Aninhadas Atributos de <ul> e de <li> type = circle, square ou disc Listas numeradas Listas Numeradas <ol> <li> Correio eletrônico </li> <li> Telnet </li> <li> Ftp </li> </ol> Listas Aninhadas Atributos de <ol> type A a I (romanos maiúsculo) i (romano minúsculo) 1 (default) start Valor inicial da numeração Atributo de <li> type No explorer: só vale para a tag <li> onde é definido. No Netscape: Vale também para as seguintes. value Valor inicial da numeração. Listas de definição Verbete de dicionário Telnet É o protocolo mais usado na Internet para criar uma conexão com um nó remoto. FTP O "File Transfer Protocol" é o principal método de se transferir arquivos pela Internet. Listas de definição <dl> <dt>telnet</dt> <dd>é O Protocolo Mais Usado Na Internet Para Criar Uma Conexão Com Um Nó Remoto.</dd> <dt>ftp</dt> <dd>o "file transfer protocol" é o principal método de se transferir arquivos pela internet. </dd> </dl> 4

5 Interligando Documentos Desviando para outro documento: <a href="url destino">texto</a> Observações: Caminhos relativos X absolutos. Barras de diretórios: usar "/" em lugar de "\. Dentro de URLs, maiúscula é diferente de minúscula. URL destino pode ser: outro documento, uma imagem, uma música, etc. Referências Internas Interligando seções em uma página Definição de uma seção: <a name="seção">... </a> Link para uma seção da mesma página: <a href="#seção">... </a> Link para uma seção de outra página <a href="arquivo#seção">... </a> Enviando Mensagens Enviando mensagens de correio eletrônico <a Quando o link for acionado, o programa de correio eletrônico do navegador é aberto, permitindo que o usuário envie uma mensagem para o endereço especificado. Transferência de Arquivos Transferência de arquivos via FTP <a href= ftp://ftp.nce.ufrj.br/pub/arq.zip">...</a> Quando o link for acionado, o arquivo é transferido utilizando o protocolo do FTP que, neste caso, é mais eficiente que o HTTP. Imagem e Som Arquivos de Imagem <a href= imagem.jpg">...</a> Quando o link for acionado, o arquivo de imagem será exibido na janela do navegador. Arquivos de Som <a href= musica.wav">...</a> Quando o link for acionado, o navegador acionará o pluggin para tocar a música. Incluindo Imagens Imagens embutidas num documento <img src= url da imagem > Podem ser gif, jpg ou png. Atributos da tag: alt = Texto alternativo mostrado no lugar da imagem. align = top / bottom / middle / left / right border = Largura da borda quando usada como âncora. width = Largura em pixels. height = Altura em pixels. vspace = Espaço vertical ao redor da imagem. hspace = Espaco horizontal ao redor da imagem. 5

6 Links e Fundos de Página Usando imagens como links: <a href= link.htm ><img src= x.gif ></a> Imagem de fundo da página Mural Ladrilho <body background= imagem > Especificação de Cores Uma cor pode ser identificada por: Nome em inglês. Código RGB. Formato RGB Pelo RGB é possível especificar qualquer cor. Formato: #RRGGBB Dois dígitos Hexadecimais para cada valor. Algumas Cores Exemplos: White ou #FFFFFF Red ou #FF0000 Green ou #00FF00 Coral ou #FF7F00 Yellow ou #FFFF00 Gray ou #C0C0C0 etc Atributos de cor em <body> Deve desaparecer em versões futuras. Cores do documento: bgcolor - Cor de fundo. text Cor do texto. Cor de links: link Ainda não visitados. alink Quando estão sendo acionados. vlink Já visitados. Fontes e cores de caracteres Deve desaparecer em versões futuras. Escolhendo Fontes e Cores de Caracteres <font >.... size = [+ ou -] número de 1 a 7 face = fonte1, fonte2, color = cor do texto </font> GIF x JPG GIF x JPG Ambos compactam a imagem, porém com algoritmos diferentes. GIF - Graphics Interchange Format Compuserv Codificação LZW Imagens com cores lisas, que utilizam até 256 cores JPG ou JPEG - Joint Photographers Expert Group Criado para armazenar fotografias Transformações matemáticas Imagens com: grandes variações de cor ou de tonalidade 6

7 Formato Gif 89a Gif entrelaçado Carregamento da figura é feito em 4 partes Permite ter uma idéia da imagem antes do carregamento completo Gif Transparente É possível indicar uma cor de fundo que não é pintada. No lugar da cor de fundo aparece o fundo da janela do navegador. Manipulação de imagens Qualquer programa de edição de imagens pode ser usado. Exemplos: Photoshop Corel Draw Lview PaintShop Pro Outros Imagens para Web Bibliotecas de ícones/clipart: Galerias de clipart: Mapas Clicáveis Ativação de links pela seleção de uma parte de uma imagem Imagem dividida em regiões: Retangulares Circulares Poligonais Regiões são definidas por um conjunto de coordenadas Implementações: Server Side Maps Client Side Maps Server Side Maps Um browser que possa determinar a coordenada da figura que foi selecionada. Um programa no servidor para receber esta coordenada e identificar a região da figura e seu link associado. Um arquivo localizado no servidor associado a cada figura, indicando as regiões e seus links. Server Side Maps - Problemas O formato do arquivo é dependente do servidor. Uma comunicação a mais entre o cliente e o servidor para determinar o link selecionado. O usuário não sabe a priori para onde aponta o link que selecionou. Necessita a intervenção do administrador do servidor para criar e modificar o arquivo. 7

8 Client Side Maps Todas informações estão no documento HTML. Figura do Mapa: <img src=figura usemap= #Nome_Mapa > Conjunto de Regiões do Mapa: <map name= Nome_Mapa >... Regiões... </map> Client Side Maps Definição de uma região: <area shape= tipo de região coords= lista de coordenadas href= url associada alt= texto alternativo > Tipos de Região: rect circle polygon Lista de Coordenadas - CIRCLE Centro do Círculo e raio coords= 70, 80, 30 70, 80 Lista de Coordenadas - RECT Canto superior esquerdo e canto inferior direito. coords= 20, 70, 100, , , 110 Lista de Coordenadas - POLYGON Lista de coordenadas de cada vértice coords= 20, 80, 60, 10, 100, 80 60, 10 20, , 80 Client Side Maps - Exemplo <MAP NAME="mainmap"> <AREA SHAPE=CIRCLE COORDS="50,50,25" HREF="http://home.netscape.com" > <AREA SHAPE=RECT COORDS="50,50,100,100" HREF="http://developer.netscape.com" > <AREA SHAPE=POLYGON COORDS="0,0,50,100,100,0" HREF="http://developer.netscape.com/docs" > </MAP> <IMG SRC="images/shapes.gif" WIDTH=100 HEIGHT=100 ALT="shapes" USEMAP="#mainmap"> 8

9 Determinação das regiões Programas para determinar as coordenadas das regiões: Informação para Sites de Busca É possível definir: Descrição da página Palavras chave <head> <title>minha Home Page</title> <meta name= description content= Esta é a descrição da minha página > <meta name= keywords content= Fotografia, programação, poesia > </head> Troca automática de Página Aplicações: Redirecionamento. Apresentação de Slides. Atualização de imagem. Formato tempo em ms; url=endereço da nova página. Multimidia Exigem que o usuário possua um programa externo/pluggin Formatos de áudio: wav, au, mp3, mid, ra, etc. <meta http-equiv="refresh content="10;url=nova.html"> Formatos de vídeo: avi, mov, mpeg, etc. Inserindo Áudio e Vídeo Inserindo áudio e vídeo: Através de links: <A HREF= xmas.wav >link p/ música</a> <A HREF= filme.avi >link p/ filme</a> Embutidos no documento Tags particulares do Internet Explorer Áudio e vídeo Embutidos <embed src= url atributos> Atributos desejáveis para Som: hidden (True, False) AutoStart (True, False) loop (numero) Atributos desejáveis para Vídeo: AutoStart (True, False) loop (numero) alt, hspace, vspace, align, width e height 9

10 Tags dependentes do navegador Áudio e vídeo no Internet Explorer: <IMG DYNSRC= x.avi SRC= imagem alternativa > <BGSOUND SRC= x.wav > Animações dependentes do Navegador <marquee>... </marquee> (Explorer) Permite criar letreiro de texto rolável <blink>... </blink> (Netscape) Texto piscando na tela Animações Exemplos: GIFs Animados Composição de várias imagens em sequência num único arquivo GIF Montagem é feita com um programa a parte. Ex: Gifcon HTML Dinâmico Só funciona nos browsers 4.x Controle sobre posição dos elementos através de uma linguagem de script Animações em JAVA São produzidas por um programa (applet) Pode usar uma applet pronta fornecida pela Sun Tabelas Exibição de informação organizada por linhas e colunas. Interseção de uma linha com uma coluna é uma célula. A definição de uma tabela é feita linha a linha Para cada linha são definidas todas as células daquela linha. Definindo Tabelas Definição da tabela em si: <table>... </table> Definição dos elementos da tabela: <caption>... </caption> - Legenda. <tr>... </tr> - Linha. <th>... </th> - Célula de cabeçalho. <td>... </td> - Célula. Atributos de Tabela Atributos: border = largura da borda em pixels width = largura da tabela Espaçamento cellspacing = espaço entre as células cellpadding = espaço entre o texto e as bordas Atributos de Células e Linhas Atributos: rowspan - n o de linhas ocupadas pela célula colspan - n o de colunas ocupadas pela célula Alinhamento valign - vertical (top, middle ou bottom) align - horizontal (left, center ou right) width e height - dimensões da coluna 10

11 Cores e Fundo Podem ser definidos nas tags: <table> <tr> <td> bgcolor Problema do Netscape background Problema do Netscape Tabelas e Imagens É possível dividir uma imagem em vários pedaços e posicioná-los usando uma tabela. É uma forma de criar um mapa clicável com áreas retangulares. A soma do tamanho das imagens normalmente é maior que o tamanho da imagem original. Exemplo Arquivo de Layout Define a divisão da tela em frames Tag <frameset> no lugar de <body> <html> <head> </head> <frameset > <frame src= url > <frame src= url > </frameset> </html> Disposição e tamanho do Frames Frames podem estar dispostos em linhas ou colunas. Atributos rows e cols de frameset indicam como os frames serão dispostos. Estes atributos devem estar associados a um conjunto de valores separados por vírgulas. Deve haver um valor para cada frame do frameset Os valores são associados aos frames pela ordem de aparecimento no arquivo. Cada valor indica o tamanho do respectivo frame. Tamanho do Frames Forma absoluta: Número de pixels (valor numérico simples). Forma relativa: Porcentagem do tamanho total da janela (número acompanhado do caracter %). Todo o resto do tamanho da janela (caracter *). Exemplos: Frame de 100 pixels e outro de 200: COLS= 100, 200 Frame de 40 pixels e outro de ocupando 50% da janela: COLS= 40, 50% Frame de 80 pixels e outros dois dividindo o resto da janela: COLS= 80, *, * Atributos de frameset Atributos de frameset: cols = 200,* rows = 30%,* frameborder = 0 1 border bordercolor Framesets aninhados Colunas dentro de linhas Linhas dentro de colunas 11

12 Atributos de Frame Devem sempre estar presentes: src name Outros atributos: noresize scrolling = YES, NO ou AUTO marginheight e marginwidth Navegadores Antigos Compatibilizando o documento com navegadores que não utilizam frames: <html> <frameset > <frame src= url > <frame src= url > </frameset> <noframes>... Documento alternativo... </noframes> </html> Abrindo Links em Frames Abrindo documentos em frames: <a href= url da pagina target= nome do frame > Target default para o documento: <base target= nome do frame > Nomes especiais: _blank - Página em branco _self - No próprio frame do link. _parent - No frame do arquivo de layout. _top - Ocupando a janela toda Formulários Forma de enviar informações para o servidor. Um formulário é composto de elementos de interação com o usuário. A cada elemento deve ser atribuído um nome que terá um valor associado pelo usuário. A informação é enviada na forma de pares do tipo: nome = valor. Criando um formulário Tag <form>... </form> Atributos de form: method - Forma de envio do formulário ao servidor. Pode receber o valor post ou get. action - URL do programa que será executado no servidor que receberá os dados do formulário. <form method=post action= /cgi-bin/prog.pl >... Elementos de interação do fomulário... </form> Envio de Formulário por Colocar no atributo action uma URL no formato: Método tem que ser post. <form method=post action= >... Elementos de interação do fomulário... </form> 12

13 Elementos de Interação Os elementos de interação podem ser: Campos de entrada linha de texto e senha. Botões do tipo sim/não (Checkbox). Grupos de botões de rádio (Radio Buttons). Listas de seleção (Drop-Down Lists). Áreas de entrada de texto (multiplas linhas). Botões simples. A tag <input> Serve para criar vários elementos de interação: Campos de entrada de linha de texto. Campos de entrada de senha. Botões sim/não. Botões de rádio. Botões simples. O atributo type é obrigatório e determina o tipo do elemento. Linha de texto e senha <input type=text atributos> <input type=password atributos> Atributos: name - Identificação do elemento. size - Tamanho do campo em caracteres. maxlength - Máximo de caracteres a ler. value - Valor inicial do campo. Nome: <input type=text size=40><br> Senha: <input type=password size=8 maxlength=8> Botões Sim ou Não <input type=checkbox atributos> Atributos: name - Identificação do elemento. value - Valor associado ao campo. checked - Caixa está inicialmente marcada. Áreas de interesse: <br> <input type=checkbox name=b1>redes<br> <input type=checkbox name=b2>bancos de dados<br> Botões de Rádio <input type=radio atributos> Atributos: name - Identificação do grupo de botões. value - Valor associado ao campo. checked - Botão inicialmente selecionado. Botões pertencentes ao mesmo grupo tem que ter o mesmo valor no atributo name. sexo: <input type=radio name=sexo value=m>masculino <input type=radio name=sexo value=f>feminino Área de Entrada de Texto <textarea>... </textarea> Atributos: name - Identificação do grupo de botões. cols rows - Largura em caracteres. - Altura em linhas. Comentários:<br> <textarea name=texto rows=3 cols=40>... Digite aqui um texto qualquer... </textarea> 13

14 Listas de Seleção Definidas pela tag <select>... </select> Há uma tag <option>... </option> para cada elemento da lista. <select> <option>...</option> <option>...</option> <option>...</option> </select> Atributos de <select> e <option> Atributos do <select> name - Identificação do elemento. size - Número de opções visíveis. multiple - Lista de seleção múltipla. Atributos do <option> value - Valor associado a opção. selected - Opção inicialmente selecionada. sexo: <select name=sexo> <option value=m selected>masculino</option> <option value=f>feminino</option> </select> Botões Simples <input type=button value= texto > <input type=image src= img.gif > Atributos: name - Identificação do botão. value - Texto que aparece no type=button. src - Imagem que aparece no type=image. Botões sem ação padrão associada. Só tem utilidade quando associados a algum código em Javascript. Envio e Limpeza de Formulário <input type=submit value= Envia > <input type=reset value= Limpa > São botões que tem uma ação padrão associada a sua seleção. A seleção do botão do tipo submit causa o envio do formulário. A seleção do botão do tipo reset causa a limpeza do formulário, fazendo com que todos os campos voltem ao valor inicial. Folhas de Estilo Cascade Style Sheets (CSS). Separa aparência e estrutura do documento. A partir da versão 4 do Explorer e do Netscape. Devem estar na seção <HEAD> do documento. <!-- h1 { font-family: arial; color: blue; } h2 { font-family: arial; color: green; } --> Sintaxe /* comentário */ seletor { propriedade: valor; propriedade: valor valor valor...;... } seletor, seletor { propriedade: valor;... } 14

15 Propriedades dos Estilos Fonte color, font-family, font-size, font-style, font-weight, text-decoration Cor e imagem de fundo background-position, background-image, background-color, background-attachment, background-repeat Alinhamento de texto text-align, text-indent, vertical-align Espaçamento word-spacing, letter-spacing, line-height, margin, padding, white-space Valores Possíveis (I) Palavras Chave Dimensão (small - pequeno) Relação (bolder - mais escuro) Fonte de caracteres (arial, times, etc). Tamanho Valor seguido da unidade (pt, px, in, cm, mm) Percentuais Valor numérico seguido do simbolo % Valores Possíveis (II) URLs Sintaxe url(endereço): url(http://equipe.nce.ufrj.br/joao/home.html) url(foto.jpg) Cores Nome (yellow, blue, black). Valor RGB (#RRGGBB - nunca entre aspas) Sintaxe rgb(r, g, b) rgb(125, 100, 70) rgb(50%, 50%, 20%) Seletor Múltiplo h1, h2 { color: blue; } Todos os cabeçalhos H1 e H2 serão azuis. Seletor Contextual h1 i { color: black; } Textos em itálico dentro de cabeçalhos H1 terão a cor preta. Compartilhando estilos Arquivo com extensão css. Uniformização das páginas de um site. <link rel=stylesheet type= text/css href= arquivo.css > 15

16 Classes de estilo Permite criar diferentes estilos para uma tag. Mudando a definição, a apresentação é alterada. h1 { font-family: arial; font-size: 20pt; } h1.vermelho { color: red; } h1.verde { color: green; } Estas classes só podem ser aplicadas a tag <h1> Utilização: <h1 class=vermelho>cabeçalho Vermelho</h1> <h1 class=verde>cabeçalho Verde</h1> <h1 class=vermelho>outro Cabeçalho Vermelho</h1> Classes Genéricas É possível criar classes aplicáveis a qualquer tag, basta omitir o nome da tag no seletor..verde { } color: green; Utilização: <h1 class=verde>este é um cabeçalho verde</h1> <p class=verde>este é um texto verde Pseudo-classes Classes com nomes pré-definidos. Associadas a estados assumidos por algumas tags. Tag A: link, active, visited e hover (só explorer) A:link { color: blue; } A:active { color: red; font-weight: bold; } A:visited { color: green; } A:hover { color: darkred; } Identificadores Permite a redefinição de uma ou mais características de uma classe. Tem precedência sobre class. Só deve ser utilizada em uma única tag. h1.grande { font-family: arial; font-size: x-large; color: green; } #azul { color: blue; } #amarelo { color: yellow; } Utilização: <H1 class=grande>grande e verde</h1> <H1 class=grande id=azul>grande e azul</h1> <H1 class=grande id=amarelo>grande e amarelo</h1> Estilos inline Atributo style de qualquer tag. Tem precedência sobre id e class. h1.grande { font-family: arial; font-size: xx-large; color: green; } #azul { font-size: x-large; color: blue; } Utilização: <h1 class=grande>muito grande e verde</h1> <h1 class=grande id=azul style= font-family: times; color: red; > Grande, verde e com fonte times</h1> Tags div e span Permitem atribuir um estilo a um pedaço de um documento (aceitam atributos class, id e style). Tag <DIV>... </DIV> Causa uma mudança de linha. Pode conter vários parágrafos. Tag <SPAN>... </SPAN> Não causa mudança de linha. Definir um estilo no meio do parágrafo. <div style= color: red; >Este é um parágrafo vermelho com um texto <span style= color: green; >verde</span> no meio</div> 16

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

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo 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

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

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

Leia mais

Projeto e Criação de Páginas de Web HTML

Projeto e Criação de Páginas de Web HTML Projeto e Criação de Páginas de Web HTML Prof.: João Sérgio dos Santos Assis e-mail: joao@nce.ufrj.br Tel.: 598-3214 Projeto e Criação de Páginas de Web Índice 1. Bibliografia auxiliar 1 2. Introdução:

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

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

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

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

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

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

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

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

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

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

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

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

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

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

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

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

Aula 4: Cores e Multimídia

Aula 4: Cores e Multimídia Aula 4: Cores e Multimídia Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos como definir a cor da página e dos textos. Aprenderemos a incluir recursos multimídia de som e vídeo em

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

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

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

Mais sobre uso de formulários Site sem Ajax

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

Leia mais

Compêndio códigos. {css}

Compêndio códigos. {css} Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

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

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 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

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

Compêndio códigos.

Compêndio códigos. <html> Compêndio códigos ADVERTÊNCIA: A que se segue é apenas uma lista com as tags de HTML e os seus possíveis atributos, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba

Leia mais

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Mostrar o que é preciso para o desenvolvimento de um Projeto para Web, apresentando os primeiros conceitos de HTML. Tópicos 1. Etapas

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

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

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo: HTML é a sigla usada para Hyper Text Markup Language (linguagem de Marcação de Hipertexto). É a linguagem destinada a criação de páginas para a WEB. Ao contrário do que muita gente boa pensa, HTML não

Leia mais

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

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

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web.

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web. 1 1 INTRODUÇÃO Antes de começarmos a trabalhar HTML, é necessário que se conheça alguns termos básicos que envolvem esta linguagem. Internet é um conjunto de pequenas redes de computadores, formando assim

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

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

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

Introdução. História. Como funciona

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

Leia mais

APOSTILA DE INTRODUÇÃO AO HTML

APOSTILA DE INTRODUÇÃO AO HTML 1 2 Apostila de Introdução ao HTML 3 ESTA OBRA PODE SER REPRODUZIDA E DISTRIBUÍDA PARCIAL OU INTEGRALMENTE DESDE QUE CITADA A FONTE. MATERIAL COPYLEFT - VENDA PROIBIDA Todo material desenvolvido pela Coordenadoria

Leia mais

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante

Leia mais

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais

MINISTÉRIO DA EDUCAÇÃO

MINISTÉRIO DA EDUCAÇÃO MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SANTA CATARINA CAMPUS SÃO JOSÉ TECNICO EM TELECOMUNICAÇÕES REDES DE COMPUTADORES

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 Gabarito AD1 2 semestre de 2014. Observações importantes:

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

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

4. Características Gerais das Tabelas do HTML

4. Características Gerais das Tabelas do HTML 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento. IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários

Leia mais

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

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

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 O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo

Leia mais

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript 1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação

Leia mais

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente

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

José Frazão. Página 2 de 19

José Frazão. Página 2 de 19 Página 2 de 19 Índice Página 1. Introdução 4 2. História e características 5 3. Sintaxe 5 3.1. Texto 7 3.2. Comandos básicos mais utilizados 8 3.3. Fundo (Backgrounds) e cores 10 3.4. Tabela de acentos

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

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

Curso de HTML. Rone Ilídio

Curso de HTML. Rone Ilídio Curso de HTML Rone Ilídio HTML HyperText Mark-up Language Linguagem criação de páginas Apresenta informações Formada por tags, exemplo: Tag H1: dados marcados com h1 Interessante: Acesse qualquer

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO

INTRODUÇÃO À PROGRAMAÇÃO Departamento de Informática INTRODUÇÃO À PROGRAMAÇÃO Apontamentos de (HyperText Markup Language) Prof. Carlos Pampulim Caldeira Évora, Março de 2003 ÍNDICE 1. O QUE É O?...1 1.1 INTRODUÇÃO...1 1.2 QUE

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

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

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 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/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web Parte III - Hypertext

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

Prof. Erwin Alexander Uhlmann 1/7/2010

Prof. Erwin Alexander Uhlmann 1/7/2010 HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5

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

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

Leia mais

Programação e Designer para WEB

Programação e Designer para WEB Programação e Designer para WEB html Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento

Leia mais

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos CURSO BÁSICO DE HTML Alessandro S Silveira Lista de tags e atributos Os tags apresentados aqui formam uma compilação das definições oficiais da linguagem mais as extensões introduzidas por empresas como

Leia mais

Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 1

Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 1 Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 1 1. O QUE É A LINGUAGEM HTML? HTML é a sigla para HyperText Markup Language que traduzido significa Linguagem

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

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

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

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

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

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 Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo

Leia mais

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE FRAMES Algumas páginas da internet são congeladas em seu cabeçalho ou em seu lado esquerdo, para construção de menus que geralmente precisam estar disponíveis para

Leia mais

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

Leia mais