2. Linguagem XHTML. " codebase: indica o local onde se encontra a classe que implementa o applet. " code: nome da classe que implementa o applet

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

Download "2. Linguagem XHTML. " codebase: indica o local onde se encontra a classe que implementa o applet. " code: nome da classe que implementa o applet"

Transcrição

1 2. Linguagem XHTML! Uma página XHTML pode conter ligações para outros documentos conforme vimos na aula passada. Mas um documento XHTML pode conter também ligações para outros objetos, como folhas de estilo, um applet Java ou objetos embutidos na própria página. O elemento <applet>! Applets são pequenos programas escritos em Java, que podem ser incluídos em uma página XHTML. O elemento <applet> pode conter os seguintes atributos: " codebase: indica o local onde se encontra a classe que implementa o applet " code: nome da classe que implementa o applet " height: altura em pixels que o applet irá ocupar na página " width: largura em pixels que o applet irá ocupar na página " param: parâmetros a serem passados ao applet! Os exemplos de applets apresentados a seguir (inclusive os programas-fonte) podem ser obtidos a partir do seguinte endereço: ELFS,

2 <html><head><title>exemplo de Applet</title></head> <body> <h3>o Applet Clock</h3> <applet codebase="applets/clock/classes" code="javaclock.class" width="150" height="150"> <param name="delay" value="100"> <param name="link" value="http://java.sun.com"> <param name="border" value="5"> <param name="nradius" value="80"> <param name="cfont" value="arial BOLD 18"> <param name="bgcolor" value="ffffff"> <param name="shcolor" value="ff0000"> <param name="mhcolor" value="0000ff"> <param name="hhcolor" value="0000ff"> <param name="ccolor" value="dddddd"> <param name="ncolor" value="000000"> </applet> </body> aula02_01.htm ELFS,

3 <html><head><title>exemplo de Applet</title></head> <body> <h3>o Applet Banner</h3> <applet codebase="applets/banner/classes" code="javabanner.class" width="234" height="60"> <param name="delay" value="100"> <param name="bgcolor" value="ffffff"> <param name="length" value="3"> <param name="number" value="5"> <param name="item0" value="adt.gif <param name="item1" value="dev.gif <param name="item2" value="dr.gif <param name="item3" value="jdj.gif <param name="item4" value="pc.gif </applet> </body> aula02_02.htm ELFS,

4 O elemento <object>! Com o marcador <object> é possível embutir diversos objetos em um documento XHTML, como: um arquivo de imagem, um arquivo multimídia, um arquivo texto, ou um arquivo referente a uma outra página. Exemplo: <html> <head> <title>objetos Embutidos</title> </head> <body> <h2>texto Embutido</h2> <object data="object.txt" width="300" height="100"></object> <h2>página Embutida</h2> <object data="aula02_01.htm" width="300" height="200"></object> </body> aula02_03.htm ELFS,

5 Imagens! Com o marcador <img> é possível embutir um arquivo de imagem a um documento XHTML. Este é um elemento vazio, mas que tem dois atributos obrigatórios: src, que indica o endereço do arquivo de imagem e alt, que corresponde a um texto a ser mostrado caso a imagem não possa ser apresentada. Exemplo: <img src="monalisa.jpg" alt="monalisa" />! Outros atributos podem ser usados para melhorar a visualização de imagens em páginas XHTML. Alguns destes atributos são os seguintes: " width e height: largura e altura (em pixels) que a imagem irá ocupar. " vspace e hspace: definem o valor (em pixels) a ser deixado ao redor da imagem. Esses atributos são incluídos na linguagem apenas para garantir a compatibilidade com versões anteriores, devendo ser substituídos por propriedades de folhas de estilo (margin-left, margin-right, margin-top e margin-bottom). " align: posição da imagem em relação ao texto que a contém (os valores possíveis são: top, middle, bottom, left, right). Também trata-se de um atributo que deve ser substituído por propriedade de folhas de estilo. ELFS,

6 " border: define a espessura da borda em torno da imagem. Também trata-se de um atributo que deve ser substituído por propriedade de folhas de estilo (border-width). " ismap e usemap: mapear partes da imagem como fontes de ligação. O atributo usemap é usado quando o código de mapeamento da imagem está na página do cliente e ismap é usado quando o código está no servidor. Exercício. A página ao lado foi produzida com o elemento <img src= monalisa.jpg alt= Monalisa /> com os seguintes atributos adicionais: align="left, border="3, width="64, height="76 e style="margin-right:20px;marginbottom:5px". Reproduzir esta página e experimentar outros valores para os atributos adicionais para verificar o efeito obtido. aula02_04.htm ELFS,

7 ! O atributo usemap permite usar o código de mapeamento de uma imagem (áreas específicas da imagem) como âncoras de ligações. O mapeamento de imagens é feito através da definição de coordendas internas (em pixels) da imagem. Cada área a ser mapeada pode ter um dos seguintes formatos: " retângulo: x-sup-esq,y-sup-esq,x-inf-dir,y-inf-dir " círculo: x-centro,y-centro,raio " polígono: x1,y1,x2,y2,x3,y3,...! Para definir as áreas de uma imagem é preciso usar um programa que apresente as coordenadas internas da imagem (paint, por exemplo). Existem programas específicos para mapeamento de imagens e para criar GIFs animados (ver, por exemplo, O mapeamento de imagens é feito com o elemento area, que pode ter os seguintes atributos: " shape: formato da área (circle, rectangle, polygon); " coords: coordenadas da área, segundo os formatos acima; " href: endereço do recurso a ser acionado quando a área for clicada; " alt: texto a ser exibido quando o mouse estiver sobre a área; " tabindex: a ordem de acesso a cada uma das áreas a partir da tecla tab; " accesskey: tecla de acesso (alt+tecla) para a área ELFS,

8 Exercício: Completar o documento XHTML abaixo com os valores dos atributos coords e href para exibir os nomes dos estados de cada região. <html> <head><title>imagens</title></head> <body> <h2>regiões do Brasil</h2> <img src="brasil.gif" alt="brasil" usemap="#regioes" /> <map id="regioes"> <area shape="polygon" coords="..." href="***.htm" alt="norte" /> <area shape="polygon" coords="..." href="***.htm" alt="centro-oeste" /> <area shape="polygon" coords="..." href="***.htm" alt="nordeste" /> <area shape="polygon" coords="..." href="***.htm" alt="sudeste" /> <area shape="polygon" coords="..." href="***.htm" alt="sul" /> </map> </body> aula02_05.htm ELFS,

9 ! Outros atributos do elemento area: " target: a ser utilizado para indicar uma ligação em um frame diferente; " onfocus: a ser usado em scripts (quando a área receber o foco); " onblur: a ser usado em scripts (quando a área perder o foco). Tabelas! Todas as tabelas em páginas XHTML seguem uma estrutura bem definida, com um título e um cabeçalho onde é indicado o conteúdo de cada coluna da tabela. Os marcadores usados para a construção de tabelas são os seguintes: " table: engloba toda a estrutura da tabela, podendo conter os seguintes elementos: # caption: título da tabela (opcional) # thead, tfoot, tbody: descrição do cabeçalho, do rodapé e do corpo da tabela. São elementos opcionais, mas se presentes devem aparecer nesta ordem. # tr: define as colunas da tabela e deve estar contido no elemento table ou nos elementos thead, tfoot e tbody, caso estes elementos estejam presentes. Pode conter apenas os elementos th e td. # th, td: representam células individuais da tabela. Devem estar sempre contidos no elemento tr. ELFS,

10 ! Exemplo: # O elemento th é usado para células de cabeçalho e o texto destas células é apresentado, normalmente, centralizado e em negrito. O elemento td é usado em células normais da tabela. Estes dois elementos podem conter, além de texto, qualquer elemento XHTML. aula02_06.htm <html> <head> <title>tabelas</title> </head> <body> <table border="1"> <caption>uma Tabela Simples</caption> <tr><th>produto</th><th>preço</th></tr> <tr><td>banana nanica</td><td>3,00</td></tr> <tr><td>laranja pêra</td><td>5,50</td></tr> </table> </body> ELFS,

11 ! Exercício. Completar o documento XHTML a seguir para produzir a tabela mostrada abaixo. aula02_07.htm <html> <head> <title>tabelas</title> </head> <body> <table border="1"> <caption>...</caption> <thead style="background-color:..."> <tr><th>...</th><th>...</th></tr> </thead> <tfoot align="..."...>... </tfoot> <tbody...>... </tbody> </table> </body> ELFS,

12 ! Divisão de Linhas e Colunas: Uma tabela XHTML pode ter linhas (ou colunas) de tamanhos diferentes (com mais ou menos células). Para isto deve-se indicar o número de linhas (ou colunas) a serem mescladas, com os elementos: " <td rowspan= inteiro > " <td colspan= inteiro >! Exemplo: aula02_08.htm <html> <head><title>tabelas</title></head> <body> <table border="1" style="font-size:18"> <tr align="center"><td colspan="2">aluno</td><td>nota</td></tr> <tr><td>001</td><td>zezinho</td><td align="center">8,1</td></tr> <tr><td>002</td><td>luizinho</td><td align="center">8,8</td></tr> <tr><td>003</td><td>huguinho</td><td align="center">8,0</td></tr> </table> </body> ELFS,

13 ! Exercício: Elaborar documentos XHTML para produzir as tabelas a seguir: aula02_09.htm! Aplicação de Estilos em Tabelas: pode ser feito por atributos ou com a utilização de folhas de estilo. " Bordas: Três atributos XHTML tratam com as linhas que definem as bordas de uma tabela: border, frame e rule. Estes atributos podem ser usados apenas no elemento <table> # border: especifica (valor em pixels) a espessura da borda # frame: especifica uma moldura para a tabela. Valores possíveis: void (nenhuma moldura), above, below, lhs, rhs, hsides, vsides, box ou border (moldura completa). # rules: especifica as linhas entre as células. Valores possíveis: none (nenhuma linha), all, groups (linhas em torno dos elementos ELFS,

14 <thead>, <tfoot> e <tbody>), rows, cols. " Propriedades de Folhas de Estilo para Bordas: border-style, borderwidth, border-color, border-top, border-top-width, e muitas outras combinações. A sintaxe geral é a seguinte: border-***:valor1 valor2 valor3 valor4 Até 4 valores podem ser atribuídos. Se um único valor for atribuído: valor1 será adotado nas quatro bordas (superior, inferior, esquerda, direita). Se dois valores forem atribuídos: valor1 será usado nas bordas superior e inferior e valor2 será usado nas bordas esquerda e direita. Com três valores: valor1 (borda superior), valor2 (bordas laterais), valor3 (borda inferior). Exemplo: ELFS,

15 aula02_10.htm <html> <head> <title>tabelas</title> <style type="text/css"> caption { background-color:yellow; } td { border-style:solid; border-width:10pt 5pt; border-color:red green blue cyan; } </style> </head> <body> <table border="3" rules="groups" style="font-size:18"> <caption>bordas com Atributos e Folha de Estilo</caption> <thead style="background-color:silver"> <tr><th>disciplinas</th><th>alunos</th></tr> </thead> ELFS,

16 <tfoot style="backgroud-color:teal"> <tr><td>ênfase</td><td>computação Aplicada</td></tr> </tfoot> <tbody> <tr><td>programação para a Internet</td> <td>08</td></tr> <tr><td>desenvolvimento de Aplicações para a Internet</td> <td>10</td>></tr> </tbody> </table> </body>! Espaçamento e Margens em Tabelas: espaçamento é a distância entre células individuais e margem é o espaço entre o conteúdo e a borda de uma célula. Os atributos cellspacing e cellpadding são usados para especificar um valor (em pixels) para o espaçamento e a margem.! Exercícios. Analise o efeito de: a) incluir o atributo cellspacing= 20 no elemento <table> da página acima. b) incluir o atributo cellpadding= 20 no elemento <table> da página acima. ELFS,

17 ! Espaçamento com Propriedades de Folhas de Estilo: as seguintes propriedades podem ser utilizados para espaçamento em elementos <td>: paddingleft, padding-right, padding-top, padding-bottom. É possível utilizar também a propriedade padding:valor1 valor2 valor3 valor4, como no caso de border.! Outros Atributos e Propriedades de Estilo para Tabelas " Cor de fundo: atributo bgcolor e propriedade background-color. " Altura e Largura: atributos e propriedades height e width. " Alinhamento em relação ao documento: atributo align e propriedade float (valores possíveis do atributo e da propriedade: left e right). " Alinhamento entre tabelas: normalmente as tabelas são interpretadas como um bloco de texto e apresentadas umas abaixo das outras. Com o atributo align ou com a propriedade float também é possível alinhar tabelas umas ao lado das outras. " Tabelas aninhadas: como o elemento <td> pode conter qualquer outro elemento XHTML, é possível que uma célula de uma tabela contenha uma outra tabela. " Alinhamento do texto nas células: para o alinhamento horizontal pode-se usar o atributo align (com valores: left, right, center, justify) dentro dos elementos <tr>, <td> ou <th>. ELFS,

18 Para o alinhamento vertical deve-se usar o atributo valign, com valores: top, middle, bottom e baseline.! Exemplo: ELFS,

19 aula02_11.htm <html> <head> <title>tabelas</title> </head> <body> <table width="30%" border="1" align="left"> <thead style="background-color:red"> <tr><th>time</th><th>posição no Campeonato</th></tr> </thead> <tfoot style="background-color:yellow"> <tr><td>provável Campeão</td> <td align="center" valign="middle">são Paulo</td></tr> </tfoot> <tbody> <tr><td width="70%" style="padding-left:20pt">cruzeiro</td> <td align="center">1</td></tr> <tr><td style="padding-left:20pt">são Paulo</td> <td align="center">2</td></tr> <tr><td style="padding-left:20pt">santos</td> <td align="center">3</td></tr> <tr><td style="padding-left:20pt">internacional</td> <td align="center">7</td></tr> ELFS,

20 <tr><td style="padding-left:20pt">corinthians</td> <td align="center">9</td></tr> </tbody> </table> <div> Há um novo formato no campeonato deste ano. O sistema de pontos corridos, considerado por muitos como o mais justo, foi adotado tanto para a Série A como para a B. Com isso, o campeão será conhecido após as 46 rodadas, sem mais a disputa de mata-matas. Serão nove meses de Brasileiro, enquanto na última temporada o torneio agitou o país de apenas de agosto a dezembro. Além da mudança no formato, o Nacional deste ano traz grandes novidades também entre os participantes. Palmeiras e Botafogo, que já foram campeões do Brasil, e Lusa, tradicional equipe de São Paulo, disputarão a Série B. Além destes, o Gama foi o outro rebaixado para a segunda divisão em Por outro lado, Criciúma e Fortaleza conseguiram o acesso para a elite. O campeão Santos defende o título conquistado no ano passado. A equipe da Baixada surpreendeu o Brasil e, com um futebol atrevido, deixou para trás o favorito São Paulo, o tradicional Grêmio e derrotou, nos dois jogos da final, o Corinthians. </body> ELFS,

21 Frames (Quadros)! Através da utilização de frames pode-se fazer com que uma única página seja subdividida em outras páginas logicamente interligadas. Como tabelas, os frames podem ser usados também para definir a estrutura de uma página, onde cada frame contém uma seção definida da página. Na linguagem XHTML a utilização de frames não é encorajada, embora exista um DTD especial para isto (Frameset DTD).! O elemento <frameset> é utilizado na definição das seções que irão compor a página. O elemento <frame> é usado para definir o conteúdo de cada seção.! Exemplo: aula02_12.htm <html> <head> <title>página com Frames</title> </head> <frameset cols="*,*" rows="*,*"> <frame src="aula02_01.htm" /> <!-- Primeira seção --> <frame src="aula02_02.htm" /> <!-- Segunda seção --> <frame src="aula02_04.htm" /> <!-- Terceira seção --> <frame src="aula02_06.htm" /> <!-- Quarta seção --> </frameset> ELFS,

22 ELFS,

23 ! No elemento <frameset>, dois atributos: cols e rows definem a apresentação das seções. Outras atributos possíveis são: id, class, style, onload e onunload. Os valores dos atributos cols e rows podem ser expressos como: " pixels: indicam dimensões fixas. " relações: indicam dimensões proporcionais uma em relação às outras. " porcentagens: indicam dimensões proporcionais em relação à janela. " curinga: o caractere * é usado para indicar um curinga; apenas um curinga presente: o curinga representa o restante da dimensão ; mais de um curinga presente: define o número de colunas ou linhas de mesmas dimensões.! Exemplos: " <frameset cols= 90,150,* > duas colunas fixas e a terceira ocupando o restante da página " <frameset cols= 75,150,75 > três colunas fixas " <frameset cols= 1*,2*,1* > colunas proporcionais umas às outras " <frameset cols= 30%,55%,15% > colunas proporcionais à janela ELFS,

24 ! Para cada seção declarada pelos atributos cols e rows deve existir a declaração de um elemento <frame>, que pode conter os seguintes atributos: " src: URL do documento referente ao conteúdo do frame; " name: nome do frame (importante para o atributo target); " scrolling: indica a presença ou não de barras de rolagem, se necessário; os valores possíveis são: yes (padrão) ou no. " frameborder: define a espessura (em pixels) da borda do frame; o valor padrão é 1. " noresize: usado para proibir o usuário de redimensionar o frame; neste caso deve-se definir: noresize= noresize ; " marginheight e marginwidth: espaçamento (em pixels) entre as bordas superior e inferior e as bordas esquerda e direita de um frame em relação a seu conteúdo.! Frames Aninhados: Um frame pode conter outros frames, bastando para isto incluir um novo elemento <frameset> (e seus elementos <frame>) em um elemento <frame>.! Apontando para Frames: Normalmente, uma ligação hipertexto em uma página faz com que uma nova página seja carregada na janela que contém a ligação. Com o atributo target esta nova página pode ser carregada em uma ELFS,

25 seção de uma página (ou seja, um frame). O atributo target pode ser utilizado com os seguintes elementos: <a>, <area>, <base>, <form> e <link>. O atributo deve ser usado como: target= nome do frame ou da janela onde o nome do frame ou da janela deve ter sido estabelecido pelo atributo name. O atributo target pode também usar as seguintes palavras-chave: " _self: a nova página será carregada no próprio frame " _blank: a nova página será carregada em uma nova janela " _parent: a nova página será carregada no frame-pai; para uma página com frames simples, o frame-pai é a janela do navegador; para uma página com frames aninhados, o frame-pai é o que aninha os outros frames. " _top: a nova página será carregada na janela do navegador no lugar da página que contém os frames.! Exemplo: Considere a página a seguir, dividida em 5 frames denominados: superior (contendo a página titulo.htm), esquerda (contendo a página brasil.htm), central (contendo a página regioes.htm), direita (contendo a página estados.htm) e inferior (contendo a página rodape.htm). ELFS,

26 ELFS,

27 <html> <head> <title>página com Frames</title> </head> <frameset rows="15%,70%,15%"> <frame name="superior" src="titulo.htm" /> <frameset cols="40%,30%,30%"> <frame name="esquerda" src="brasil.htm" /> <frame name="central" src="regioes.htm" /> <frame name="direita" src="estados.htm" /> </frameset> <frame name="inferior" src="rodape.htm" /> </frameset> aula02_13.htm <html> <head> <title>mapa do Brasil</title> </head> <body> <h1> <div style="color:blue" align="center"> Regiões e Estados Brasileiros</div> </h1> </body> titulo.htm ELFS,

28 <html> <head> <title>brasil</title> </head> <body> <img src="brasil.gif" alt="mapa do Brasil" /> </body> brasil.htm regioes.htm <html> <head> <title>regiões do Brasil</title> </head> <body> <h2> <div><a href="br_centroeste.htm" target="direita"> Região Centro-Oeste</a></div> <div><a href="br_nordeste.htm" target="direita"> Região Nordeste</a></div> <div><a href="br_norte.htm" target="direita">região Norte</a></div> <div><a href="br_sudeste.htm" target="direita">região Sudeste</a></div> <div><a href="br_sul.htm" target="direita">região Sul</a></div> </h2> </body> ELFS,

29 <html> <head> <title>estados do Brasil</title> </head> <body> </body> estados.htm rodape.htm <html> <head> <title>mapa do Brasil</title> </head> <body> <div style="color:red;background-color:silver" align="right"> <i><h3>veja como é fácil organizar uma página com frames</i></h3></div> </body>! Frames Embutidos: Frames também pode ser embutidos diretamente em uma página XHTML. Para isto, basta usar o elemento <iframe>. O exemplo a seguir ilustra esta possibilidade. Note que um texto qualquer pode ser incluído entre os marcadores de abertura e fechamento para ser exibido caso o navegador não entenda o elemento <iframe>. ELFS,

30 <html> <head><title>página com Frame Embutido</title></head> <body> <p>este parágrafo aparece antes do frame.</p> <iframe src="aula02_04.htm"> Infelizmente, um frame sobre uma famosa pintura de Leonardo da Vinci não pôde ser exibido. </iframe> <p>este parágrafo aparece depois do frame.</p> </body> aula02_14.htm! Alguns dispositivos web (como handhelds e celulares, por exemplo) podem não ser capazes de interpretar frames. Nestes casos, deve-se incluir em documentos XHTML o elemento <noframe> que apresenta um conteúdo alternativo ao conteúdo dos frames.! Exemplo: <frameset...>... <noframe> <h3>seu equipamento não entende frames.</h3> </noframe> </frameset> ELFS,

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

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

Programação para Internet

Programação para Internet Programação para Internet Aula 09 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

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

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

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

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

> 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

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

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

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

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

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

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

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se

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

Links e Frames José Antônio da Cunha

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

Leia mais

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

Módulo: Criação de Páginas WEB

Módulo: Criação de Páginas WEB Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque

Leia mais

HTML. Sessão 4 HTML. Criação de Páginas WEB. Tabelas

HTML. Sessão 4 HTML. Criação de Páginas WEB. Tabelas HTML Sessão 4 HTML É por vezes interessante fazer com que uma célula se expanda de forma a incorporar a célula imediatamente abaixo ou ao lado (o que em folhas de cálculo como o Microsoft Excel se denomina

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

Lista e Tabelas. Fundamentos da Linguagem Web Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização

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

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

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

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

Introdução ao HTML. Sumário

Introdução ao HTML. Sumário Introdução ao HTML Telemédia Grupo de Comunicações por Computador Sumário em HTML Texto Alternativo Alinhamento Margens Redimensionar 1 em HTML Para inserir uma imagem basta usar a etiqueta da seguinte

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

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

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

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

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 HTML Construção de Páginas para WEB 47

Programação HTML Construção de Páginas para WEB 47 Programação HTML Construção de Páginas para WEB 47 INICIANDO EXEMPLO3.HTML Crie um novo arquivo html chamado exemplo3.html dentro da pasta exemplos. Após os exercícios e trabalhos anteriores, nossa pasta

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

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

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

Síntese da aula anterior

Síntese da aula anterior Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações 1 O que vamos fazer hoje? Vamos utilizar o que aprendemos da aula anterior juntamente com Utilização de imagens

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

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 Frames São janelas que podem conter páginas Web. Uma janela pode ser subdividida em várias subjanelas, cada uma, visualizando

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

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

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

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

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10 HTML Sessão 10 HTML HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere

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

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

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

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

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

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

Leia mais

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

HyperText Markup Language (HTML) Desenho de Documentos na World Wide Web

HyperText Markup Language (HTML) Desenho de Documentos na World Wide Web Programação Na Web HyperText Markup Language (HTML) Desenho de Documentos na World Wide Web 1 António Gonçalves Agenda Introdução ao HTML Criar e publicar uma página Web Validar uma documento Elementos

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

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

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

FTIN - Módulo de WebDesign. Prof. Iran Pontes

FTIN - Módulo de WebDesign. Prof. Iran Pontes FTIN - Módulo de WebDesign Prof. Iran Pontes FTIN FORMAÇÃO TÉCNICA EM INFORMÁTICA IMPLEMENTAÇÃO HTML/CSS Hipertexto É um sistema para a visualização de informação cujos documentos contêm referências internas

Leia mais

Observações importantes:

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

Leia mais

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

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

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

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

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

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

Leia mais

As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador, elas são os comandos da linguagem HTML.

As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador, elas são os comandos da linguagem HTML. World Wide Web A Web é um conjunto de documentos acessíveis por meio da Internet. Esses documentos (ou páginas Web) contêm uma tecnologia chamada hipertexto. Onde você poderá percorrer partes do documento

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

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

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

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

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

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

Leia mais

Parte 4 Recursos avançados. Criação de Web Sites I. Recursos Avançados

Parte 4 Recursos avançados. Criação de Web Sites I. Recursos Avançados Criação de Web Sites I Recursos Avançados 113 Conteúdo 21. Diagramação com tabelas... 115 21.1. GIF de um pixel...115 21.2. Layout de página com tabelas...116 21.3. Imagens recortadas...116 22. Frames...

Leia mais

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

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

Leia mais

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

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

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de

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

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

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

Leia mais

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

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

Claudio Damasceno. Avançar

Claudio Damasceno. Avançar Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA

Leia mais

Desenvolvimento de Aplicações WEB 1 HTML

Desenvolvimento de Aplicações WEB 1 HTML Desenvolvimento de Aplicações WEB 1 HTML INTRODUÇÃO Nesta primeira parte da apostila falaremos sobre a linguagem HTML. Podemos dizer que o HTML é a linguagem mãe. É importante aprendermos o HTML, para

Leia mais

CSS (Style Sheets - Folhas de Estilo)

CSS (Style Sheets - Folhas de Estilo) Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses

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

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

Leia mais

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

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 criar uma página WEB

Como criar uma página WEB Como criar uma página WEB Utilização de comandos HTML Luís Manuel Borges Gouveia versão 1.1 Dezembro, 1996 Requisitos necessários para criar ou editar uma página Web um navegador (browser): Netscape ou

Leia mais

Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis

Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis FISL 12 Reinaldo Ferraz W3C Brasil Possibilitar o acesso a pessoas com deficiência Web para todos Todos mesmo! Web para todos,

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

INDICE 1. INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB...4

INDICE 1. INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB...4 INTRODUÇÃO À PROGRAMAÇÃO WEB 2007 1 INDICE 1. INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB...4 1.1 A INTERNET...4 1.2 ENDEREÇAMENTO INTERNET...4 1.3 DEFINIÇÕES DA HTML...4 1.4 ELEMENTOS DE UM PROJETO WEB...4

Leia mais

Todos os tags obedecem a uma hierarquia, como no seguinte exemplo:

Todos os tags obedecem a uma hierarquia, como no seguinte exemplo: <a> <b> <c> </c> </b> </a> O que é o HTML? HTML significa HyperText Markup Language, e é uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hiper-texto é bastante simples:

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

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

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

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Tabela de dados Tabelas para alinhar texto Tabelas para conter

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

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

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

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

Leia mais

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000 UNIVERSIDADE FEDERAL DO PARANÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS ESTUDANTIS COORDENAÇÃO DE DESENVOLVIMENTO DE RECURSOS HUMANOS UNIDADE DE QUALIFICAÇÃO FRONTPAGE 2000 Módulo I Hamilton Chaiben

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

HTML HyperText Markup Language

HTML HyperText Markup Language HTML HyperText Markup Language Composição Web Engenharia Informá@ca / Informá@ca Web 2014/15 Artur M. Arsénio Projeto Projecto final Equipas de até 2 elementos (...) construir um sí@o Internet (...) número

Leia mais

Construção de Páginas Web

Construção de Páginas Web Faculdade de Economia, Administração e Contabilidade da USP EAD-451 Informática Aplicada à Administração Internet Construção de Páginas Web com HTML e Scripts Prof. Antonio Geraldo da Rocha Vidal 1 SUMÁRIO

Leia mais