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

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

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

Transcrição

1 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 com Javascript. Instituto Siegen. Guarulhos, 2012.

2 2 Agradecimentos Agradeço à minha esposa Kátia por entender minha ausência, meus pais Mirtes e Günter por terem criado meu caminho, aos meus alunos que viabilizaram este trabalho e a todos os autores de livros e bibliotecas que consultei para que pudesse devidamente embasar este.

3 3 Sumário Agradecimentos...2 Introdução... 5 Aula Pré-requisitos... 6 Software... 6 HTML... 8 Títulos Aula Tabelas Cores Junção de colunas Junção de linhas Linhas e colunas fundidas Aula Listas Listas ordenadas Listas aninhadas e mistas Aula Formulários Exercício iframe Aula HTML Audio Vídeo... 24

4 4 CSS... Erro! Indicador não definido. Aula Aula Aula Aula Aula Aula Aula Aula Aula Aula Bibliografia... 58

5 5 Introdução O objetivo deste trabalho é introduzir as técnicas basilares para construção de um website seguindo os preceitos e padrões definidos pelo W3C (www.w3c.br), o esperado pelo mercado e que seja simples de produzir, manter e modificar.

6 6 Aula 1 Pré-requisitos Software Amaya Este é o software referência em edição da marcação HTML. Criado pelo W3C, o Amaya é um editor WYSIWYG (What You See Is What You Get Editor visual de marcação HTML) que já aplica as definições do W3C com avisos de erros de codificação ou desconformidades. $ : Grátis. Avaliação:

7 7 Dreamweaver Este é o melhor! O problema é que é pago, e bem pago. Este editor da Adobe tem longa história de desenvolvimento. Atende diversas ferramentas que permitem até um usuário com pouco conhecimento criar uma página, além de suporte à diversas linguagens de programação e Banco de Dados. $: US$ 229,00 (13/12/2011) Avaliação: Expression Web A Microsoft definitivamente entrou para a briga dos editores web. Para encarar o Dreamweaver ela lançou o Expression Web 4, que pode ser avaliado como uma versão antiga, de uma ou duas gerações passadas, do software da Adobe. Pago mas com diversos recursos, segue a linha do principal concorrente. $: US$149,00 Avaliação:

8 8 Existem diversos editores HTML, ao longo deste trabalho, iremos utilizar o Amaya, pois além de gratuito é a referência. HTML Hypertext Markup Language é o significado do HTML, isto é, uma linguagem de marcação de hipertexto (texto comum também). O HTML básico segue a seguinte estrutura: <html> <! Isto é um comentário em HTML. Aqui começa a página.--> <head> <! Esta parte pertence ao cabeçalho--> <title>título da página </title> </head> <body> <! Aqui fica a parte visível do site--> <p>olá, seja benvindo ao seu primeiro site!</p> <! Você notou que as TAGs <...> sempre terminam com </...>?--> </body> </html> Agora é com você, Construa uma página usando o HTML com o título Página do...(seu nome), e com alguns conteúdos visíveis, seu são:

9 9 Página do XXX em título 1. Como??? <h1>página do XXX</h1> Exercício de escrita em marcação HTML em título 2. Como??? <h2>...</h2> Exercício 1 Título 3. Como??? Última chance! <h3>...</h3> Então, posso ir colocando <hx> enquanto quiser títulos? Não, você pode colocar de 1 até 6. E por que devo colocar títulos? GOOGLE!!! Se você não colocar títulos, ele não vai te ranquear devidamente, a isto se chama SEO (Search Engine Optimization). Saiba mais em: Outra coisa interessante, você notou que quando uma tag é aberta (<body>, <h1>) outra a encerra (</body>, </h1>)? Mas nem todas são assim, as tags que marcam conteúdos devem ser encerradas, as tags que são estruturantes, como <meta />, <hr /> e outras se autoencerram. Como? Vamos pegar o exemplo da linha horizontal, <hr />, depois da identificação da tag, adicione um espaço uma barra e feche. O interessante desta tag, assim como veremos em outras, você pode adicionar atributos. Vamos ver algumas (das 91 recomendas pelo W3C) tags e atributos: Elemento Descrição Atributos a Link accesskey = atalho de teclado (<a accesskey= l...) href = endereço de destino (<a href= link.html...) name = nome do elemento (<a name= nome...) target = onde vai abrir? _self, na mesma janela, _blank, em uma nova janela,_parent, na janela pai, _top, no topo do documento (<a target= _blank...) tabindex = ordem de uso da tecla TAB para usabilidade (<a tabindex= 0...) b Negrito <b>palavra</b> body Corpo background = imagem.jpg

10 10 bgcolor = cor de fundo (#FFFFFF) text = cor de todo texto contido no body link = cor dos links vlink = links visitados alink = links ativos hlink = ao passar o mouse sobre br Quebra de linha <br /> Observe que este elemento não marca nenhum texto, por isso se auto encerra. div Divisão Uma div (<div>...</div>)deve conter uma classe (<div class= topo >) e tudo o que for criado dentro desta div irá obedecer o que foi criado na classe topo (Veja mais em CSS) em Ênfase Itálico fieldset Caixa Cria um acaixa entorno de elementos comuns, apenas visual. form Formulári o Cria um elemento que o que estiver dentro dele, exceto textos do formulário, será enviado. method = post envia os dados de forma oculta e get que utiliza a url para enviar (veja mais na sessão formulário) h1 a h6 Título <h1></h1> align = center, left, right, justify alinhamento do texto head Cabeçalho Informações sobre o documento como o nome, documentos relacionados, idioma, autoria, palavras chave, entre outros. iframe Quadro Cria uma janela para outro documento <iframe src= documento.html width= 100 height= 100 scrolling= auto yes no frameborder= 1 align= center left right justify ></iframe>

11 11 img Imagem <img src= imagem.jpg width= 253 height= 128 align= bottom middle top left right alt= nome da imagem /> input Comunica ção Este é um elemento do formulário <input type= text = caixa de texto password = senha checkbox = caixa de ticar (tic check) radio = semelhante o check, mas permite apenas uma opção submit = botão de enviar file = para procurar arquivos no seu micro hidden = oculto. Para enviar informações. Image = um botão com uso de alguma imagem Button = sem ação, para uso do Javascript li Lista Marcador ou numerador em associação com a ul ou ol ol Ordinate Lista ordenada, numerada, associada ao li list option Opção Associada ao select p Parágrafo <p></p> Select Seleção <select><option value= XPTO >XPTO</option>...</select> O objetivo desta parte do curso é escrever não é programar, HTML não é uma linguagem, mas sim uma marcação uma página web que seja válida, mas por que validar uma página? Simples, todos navegadores abrirão? Todos funcionarão da mesma forma? Todos recursos serão válidos e apresentarão os mesmos resultados? Para validar uma página você deve estar de acordo com as regras definidas pelo W3C - - e pode ser consultado seu escritório no Brasil - - e a validação pelo endereço PRESTE

12 12 ATENÇÃO! Estes endereços são de suma importância e merecem ser adicionados como favoritos. Crie a página e submeta-a, seja via endereço num servidor ou via upload. Se a página estiver correta, o W3C lhe oferecerá um selo certificando sua página. para o HTML, Vamos criar a seguinte página: Figura 1 - Primeira página HTML Para tanto vamos começar pela estrutura básica. 1. <?xml version="1.0" encoding="iso "?> Nesta linha o documento é especificado como xml, codificado para o padrão europeu ocidental de fontes. 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

13 13 "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> DOCTYPE é o tipo de document de novo??? Sim, ele também pode ser um documento tipo... html público, seguindo as regras do W3C. 3. <html xmlns="http://www.w3.org/1999/xhtml"> Aqui começa o html. Ele obedecerá aos padrões definidos pelo W3C no endereço referenciado. 4. <head> Na head que deve ser encerrada por </head> - estão as informações sobre o documento, como título - <title>aqui fica o título</title> - e as metatags. 5. <body> O body contém a parte visível do site. Títulos Para o título vamos utilizar a tag <h1>. Esta tag abre o título de maior tamanho e encerra com </h1>, desta forma: <h1>tecnologia Web I</h1> Estes títulos podem ir de h1 à h6. Para escrevermos os elementos textuais, vamos utilizar a tag <p>texto</p>. Existem diversos elementos textuais, mas vamos estuda-los aos poucos, conforme necessidade. Para navegar vamos utilizar a tag <a>link</a>. No entanto todo link deve ter um endereço, assim vamos adicionar o parâmetro href que é o endereço de destino, ficando <a href= pagina.html >Texto do link</a>. Podemos ainda informar que o navegador poderá abrir uma nova página, na mesma somente no topo quando dividida ou ainda na parte principal, usando o target, assim, <a href= paginas.html target= _parent >nome do link</a>. Assim como no link praticamente todas as tags de marcação aceitam mais parâmetros formatadores como cores, tamanhos e alinhamento. <h1><font color="#dd3333">tecnologia Web I</font></h1>

14 14 Para quebra de linha vamos utilizar o <br /> e outro elemento interessante é a linha horizontal <hr />. Note que a quebra de linha não aceita conteúdo (<br>texto</br>) nem aparece, por isso não há parâmetros, no entanto a tag hr aceita, como <hr width= 75% align= right />. Para as imagens os navegadores interpretam como tal quando há a tag <img />. Ele vai renderizar como imagem, então é preciso informar qual com o parâmetro src, <img src= imagem.jpg />, podendo estar na raiz, numa pasta (src= pasta/imagem.jpg ) ou num endereço da internet (src="http://www.w3.org/icons/valid-xhtml10), além deste elemento é importante informar o texto alternativo alt e as dimensões width e height. <img src="http://www.w3.org/icons/valid-xhtml10" alt="valid XHTML 1.0 Transitional" height="31" width="88" />

15 15 Aula 2 Tabelas Para as tabelas vamos construir um passo a passo. Toda tabela começa com a tag <table>. <table></table> - Abre a tabela <tr></tr> - Abre a linha <td></td> - Abre a linha Vamos construir uma pequena tabela de 2 x 2. Figura 2 - Tabela 2 x 2 <table border="0" width="50%"> <tr> <td bgcolor="#ff0000"> </td> <td bgcolor="#00ff00"> </td> </tr> <tr> <td bgcolor="#0000ff"> </td> <td bgcolor="#ffff00"> </td> </tr> </table> Explicando: <table border - borda com espessura 0 (invisível); width=50% - ocupe metade da página; <tr> - Linha; <td> - coluna; bgcolor cor de fundo;

16 16 Cores Tabela 1 - Tabela de cores Cor Código Preto = black # Branco = white Azul = blue Amarelo = yellow #FFFFFF #0000FF #FFFF00 Verde = green # Lima = lime #00ff00 Marron = maroon # Oliva = olive # Azul Celeste = aqua Lilás = fuchsia #00ffff #ff00ff Cinza = gray # Azul escuro = navy # Roxo = purple # Verde escuro = teal # Cinza claro = silver Vermelho = red #c0c0c0 #FF0000 Junção de colunas <table width="50%" border="1"> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

17 17 Junção de linhas <table width="50%" border="1"> <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table> Linhas e colunas fundidas <table border="1" width="50%"> <tr> <td colspan="4"> </td> </tr> <tr> <td rowspan="2"> </td> <td colspan="2" rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td colspan="3"> </td> <td> </td> </tr> </table>

18 18 Aula 3 Listas As listas podem ser ordenadas (ordinate [ol]) e desordenadas (unordinate[ul]). Vamos ver: Listas ordenadas 1. Item 1 2. Item 2 3. Item 3 Código HTML <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> Listas desordenadas Item 1 Item 2 Item 3 Código HTML <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> Listas aninhadas e mistas 1. Item Item Item Item 2 Item 2.1

19 19 Item Item Item 3.1 Item Item Item 3.2 Código HTML <ol> <li>item 1 <ol> <li>item 1.1 </li> </ol> </li> <ol> <li>item 1.2</li> </ol> <li>item 2 <ul> <li>item 2.1</li> <li>item 2.2</li> </ul> </li> <li>item 3 <ol> <li>item 3.1 <ul> <li>item 3.1.1</li> <li>item 3.1.2</li> </ul> </li> <li>item 3.2</li> </ol> </li> </ol>

20 20 Aula 4 Formulários Os formulários são os elementos de comunicação da Internet. Vamos estudar alguns tipos e elementos. Um formulário é iniciado com a tag <form> e se encerra com </form>. Para que se enviem as informações, poderemos utilizar duas formas, GET e POST, sendo que a GET utilizará a URL como meio de envio e a POST se valerá da comunicação direta de envio de dados para o servidor via navegador, assim, as informações do GET serão visíveis e reutilizáveis e as do POST ocultas e voláteis. Vamos ver: <form method= get action= aula4.html > </form> O parâmetro action é obrigatório, pois conterá o endereço para onde as informações serão enviadas. Dentro do form iremos inserir os elementos à serem preenchidos, os inputs. Texto <input type="text" name="nome" size="50" /> Área de Texto <textarea name= mensagem cols= 50 rows= 10 ></textarea> Checkbox <input name="checkbox" type="checkbox" checked="checked" value="sim!!! Desejo SPAMS!!!" />

21 21 Radio <input type="radio" name="genero" value="m" id="genero_0" /> Menu <select name="estado"> <option>escolha</option> <option value="sp">são Paulo</option> <option value="mg">minas Gerais</option> <option value="sc">santa Catarina</option> <option value="rs">rio Grande do Sul</option> </select> Submit <input type="submit" value="enviar" name="enviar" /> Existem outros tipos, mas como dito anteriormente, vamos aprender essencialmente o necessário para a confecção do site apresentado e complementar quando da necessidade. Exercício Construa um formulário para envio de um currículo. O candidato deverá cadastrar todos os dados necessários. Escolha um currículo como padrão e desenvolva. Sugestão: utm_medium=mail&utm_campaign=inf_mail_bienv_can iframe O iframe é um interessante comando presente no HTML para incluir uma página em outra, isto significa que nosso formulário pode ser único e incluído em diversas páginas. E? Bem, simples, e se o site tiver 100 páginas e seu cliente pede para incluir ou excluir um item? Fazer 100 vezes??? iframe! <iframe frameborder="0" scrolling="no" src="menu.html" height="15px"> </iframe>

22 22 Abra o iframe, indique a espessura de sua borda, se terá barra de rolagem, qual o caminho da página que será incorporada e suas dimensões e por fim, encerre. Simples!

23 23 Aula 5 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 <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <title></title> </head> <body> <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title></title> </head> </body> </html> <body> </body> </html> É claro que são as duas estruturas base e validadas pelo W3C. Veja um formulário em html5: <form method="post" action="aula5.html"> Nome:<input type="text" name="nome" placeholder="digite seu nome!" autofocus required /><br /> Idade:<input type="range" min="10" max="100" value="18" name="idade" required /><br /> Busca:<input type="search" name="busca" placeholder="busca" /><br /> Telefone:<input type="number" pattern="\([0-9]{2)[\s][0-9]{4-[0-9]{4" name="telefone" /><br /> <input type=" " required name=" " /><br /> <input type="submit" value="enviar" /> </form>

24 24 Figura 3 Formulário em HTML5 Audio <audio src="09 Midnight.mp3" controls="controls"></audio> Vídeo <video src= video.mp4 controls= controls ></video>

25 25 Aula 6 CSS O CSS (Cascading Style Sheet), folha de estilo em cascata é uma codificação que pode ser incluído ou à parte da codificação html. Ele tem este nome por permitir a herança dos estilos de pai para filho, em cascata. Basicamente o CSS obedece a seguinte estrutura: Seletor {Propriedade: Valor Ou seja... O seletor é uma tag html ou uma classe que você poderá criar, como <h1>, <p>, <img>, ou no caso das classes,.topo,.navegacao,.rodape. Note que as classes são iniciadas com um ponto e NUNCA possuem acentos, espaços, caracteres especiais, etc. Exemplos: p { color: #FFFFFF Todos os parágrafos da página html terão cor branca. Observe que no CSS os sinais < e > não são escritos. h1 { color: #000000; background-color: #ffff00; font-style: italic; text-align: right; ou img { float: left; padding: 5px; No primeiro exemplo a cor dos títulos será preta, o background amarelo, com a fonte itálica alinhada à direita, no segundo exemplo a imagem está alinhada à esquerda, independente do texto, por isso o float e com um distanciamento de 5 pixels de qualquer objeto. Os dois casos são válidos, porém no primeiro, o ; separa as instruções, assim como no segundo que está separado por linhas. Há também os casos de multivaloração, como: h1{ font-family: "Times New Roman"; color: #AAFFDD;

26 26 text-shadow: /*0.1em 0 0.2em #88AAFF,*/ -0.1em 0 0.2em #88AAFF, 0 0.1em 0.2em #88AAFF/*, 0-0.1em 0.2em #88AAFF*/; font-size: 50px; text-align: center; Veja o seletor text-shadow, que cria sombras no texto que ele trabalha da seguinte forma: Deslocamento para a direita (para esquerda coloque um valor negativo), para cima (adivinhe como faz para ser para baixo...), sua difusão, 0 para cópia idêntica do texto e quanto maior o valor maior a difusão e por fim a cor. Ele pode ter várias sombras, por isso é multivalorado. Você viu o comentário /*...*/? Quando a fonte tiver espaço no nome, adicione aspas. Seletores class e id Um seletor class aplica-se à toda gama que for identificada como pertencente à uma classe, assim: p.destaque {color: #ff0000; Dentro de um parágrafo que possuir a classe destaque obedecerá à esta configuração, exemplo: <p class= destaque >Oferta!</p> Já para os seletores id, identificados pelo #, o css será aplicado somente à aquela instância, assim: #topo {font-family: Tahoma; No html: <div id= topo >Título</div> Quando queremos aplicar um design diferenciado à uma parte específica de uma página, criamos as divs. No CSS.topo { font-family: "Eras Demi ITC"; font-size: 50px; color: #0099CC; background-color: #000066; Alguns exemplos

27 27 /*Isto é um comentário*/ body{ margin: ; background-color:#009966; font-family:tahoma, Geneva, sans-serif; h1{ font-family:"times New Roman", Times, serif; font-size:50px; color:#009966; text-shadow:5px 5px 10px #FFF, -5px 5px 10px #FFF, 5px -5px 10px #FFF, -5px -5px 10px #FFF;/*exceto IE*/ p:first-letter{ font-family:tahoma, Geneva, sans-serif; color:#fff; letter-spacing:0.5em; font-size:50px; text-shadow: 5px 5px 10px #ccc, -5px 5px 10px #ccc, 5px -5px 10px #ccc, -5px -5px 10px #ccc;.classe_a{ margin:0 5px 10px 20px; padding:0 5px 10px 20px; background-color:#ccc; font-family:"courier New", Courier, monospace; color:#003;.classe_b{ background-color:#fff; float:right; width:10%; p{ border: solid 1px white; border-radius: 1em; box-shadow: black 0.5em 0.5em 0.3em; background:#fff; Listas Vamos criar uma lista? Item 1 Item 2 Item 3 Item 4 Item 5 A codificação será assim: HTML

28 28 <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">item one</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> <li><a href="#">item four</a></li> <li><a href="#">item five</a></li> </ul> </div> CSS None Para fazer com que os pontos da lista sejam quadrados, escreva o CSS assim: #navlist li { list-style-type: square; Mas por quê??? Você notou no html que o id da lista é navlist? O CSS pode ser feito com um. no lugar do #.Então os itens li dentro do navlist terão o tipo de estilo de lista quadrado, square. Ok, mãos à obra! Crie listas com outros elementos como imagens e símbolos do word. Agora vamos criar a seguinte lista: Neste caso foram criadas linhas separadoras, vejamos o código HTML <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">item um</a></li> <li><a href="#">item dois</a></li> <li><a href="#">número três</a></li> <li><a href="#">item quatro</a></li> <li><a href="#">o ponto cinco</a></li> </ul> </div>

29 29 CSS #navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; #navlist li a { text-decoration: none;

30 30 Aula 7 CSS Menu cascata Agora vamos elaborar um menu de navegação em cascata. Primeiro precisamos elaborar uma lista de possíveis links em html. <ul> <li><a href="#">link1</a> <ul> <li><a href="#">link1.1</a></li> <li><a href="#">link1.2</a></li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul> </li> <li><a href="#">link3</a> <ul> <li><a href="#">link3.1</a></li> <li><a href="#">link3.2</a></li> </ul> </li> <li><a href="#">link4</a> <ul> <li><a href="#">link4.1</a></li> <li><a href="#">link4.2</a></li> </ul> </li> </ul> O resultado deverá ser este:

31 31 O primeiro passo é eliminar os marcadores de texto. Crie um arquivo CSS e escreva: ul { list-style:none; Agora vamos fazer com que os subitens(li) da lista (ul) fiquem ocultos. li ul{ display:none; Mas se ficarem ocultos, não vai ter graça, eles devem ser acessíveis! li:hover ul { display:block; Agora ele vai ficar se remoldando o menu em cada vez que eu passar sobre os itens? li ul{ position: absolute; display:none; Você reparou que é o mesmo item já anteriormente criado? A posição dele foi definida como absoluta, ou seja, depende do valor inserido, como não há ainda, ele obedece ao fim do parágrafo escrito, o link pai. Adicione então, o comando left: 200px;, pois iremos definir que a largura do menu será de 200 pixels, em ul, com o comando width: 200px;. Agora vamos fazer o alinhamento dos subitens (li) dentro das uls. Espera! Não entendi! Não era isso que foi criado? A ul li vai comandar a ul pai e suas li. Já a li ul vai comandar os subitens, as listas (ul) dentro das lis. Tem certeza? Vamos ver... ul li{ position:relative; border:#ccc 1px solid; li ul{ position: absolute; left: 200px; top: 0; display:none; background-color:#ccc; Observe que não foram criados novos seletores, apenas adicionamos propriedades aos já criados, com exceção da ul li.

32 32 Na ul li a posição é relativa ao site e adicionamos uma borda à ele, já na li ul, a posição é absoluta, depois do bloco ul li e um background cinza para ilustrar onde age cada seletor. Mas e aquele top: 0;? Alinha o menu ao topo da ul li. Agora começam alguns elementos de design que ajudarão na identificação. Observe os seletores: li:hover ul { display:block; Ok, este já existia, nem vamos mais mexer nele. ul li:hover{ background-color:#ccc; Este é o novo, é o comportamento dentro da ul pai, no seletor li quando passar sobre, pinte de cinza, afinal a ul dentro da li é cinza, (li ul). Adicione o seletor valorado padding: 5px; na ul e na ul li. ul li a{ display:block padding: 5px; Para exibir os links. Veja agora o código completo, para os efeitos visuais. body{ ul{ margin ; list-style:none; border: #CCC 3px solid; width: 200px; padding: 5px; background-color:#fff; ul li{ position:relative; border:#ccc 1px solid; padding: 5px; li ul{ position: absolute; left: 199px; top: 0;

33 33 display:none; background-color: #CCC; ul li a{ display:block; text-decoration:none; padding: 5px; border: 1px solid #CCC; border-bottom:0; background-color:#ccc; li:hover ul { display:block; Remova a linha... ul li:hover{ background-color:#ccc; Não tem mais função, claro. Cara, muito legal!!! Mas... e se tiver mais um nível? <ul> <li><a href="#">link1</a> <ul> <li><a href="#">link1.1</a></li> <li id="pre"><a href="#">link1.2</a> <ul id="sub"> <li><a href="#">link1.2.1</a></li> <li><a href="#">link1.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul>.... Esta parte foi adicionada. Veja que agora a ul tem um id e um li também. Então fica fácil!

34 34 Adicione estas duas linhas, pois elas agem diretamente no item identificado(id). ul#sub{ display:none; li#pre:hover ul#sub{ display:block; E se for horizontal? CSS body{ ul { li{ margin ; list-style:none; border: #69C 3px solid; padding:3px; background-color:#ccc; width: 25%; text-align:center; border-radius: 2em; box-shadow:#000 10px 10px 10px; border: #FFF 1px solid; padding: 2px; background-color #CCC; ul li{ display:inline; padding: 2px; li ul{ display:none; position:absolute; padding: 3px; li:hover ul { display:block;.links a:hover{ color:#69c; text-decoration:underline; HTML

35 35 <ul> <li><a href="#">link1</a> <ul> <li class="links"><a href="#">link1.1</a></li> <li><a href="#">link1.2</a></li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul> </li>...

36 36 Aula 8 Float O float é a flutuação de um objeto. Ele aceita somente o alinhamento à esquerda ou à direta. Crie uma imagem alinhada à esquerda e o texto à sua direita, assim: Para este efeito o código será: CSS None HTML <p> <img src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p> Para alinhas o quadrado à direta, adicione o código: CSS.floatright { float: right; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p>

37 37 CSS.floatright { float: right; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p> CSS.floatright { float: right; margin: px 10px; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p>

38 38 CSS.floatright { float: right; margin: px 10px; border: 1px solid #666; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p> CSS.floatright { float: right; margin: px 10px; border: 1px solid #666; padding: 2px; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer...

39 39 </p> CSS.floatright { float: right; margin: px 10px; border: 1px solid #666; padding: 2px; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p> Desenho com CSS Vamos desenhar um quadrado com quatro cores diferentes. HTML <div class="quadcolor" id="quadcolor"></div> O CSS.quadcolor { width: 50px; height: 50px; border: 15px solid; border-color: #FF0 #00F #0F0 #F00; E o resultado...

40 40 Ok. Se é possível construir com 4 bordas de cores diferentes e o centro vazio, por que não com 2 cores diferentes e sem centro? HTML <div class="triangulo" id="triangulo"></div> E o CSS.triangulo{ width: 0; height: 0; border-bottom: 50px solid; border-left: 50px solid; border-right: 50px solid; border-top: 50px solid; border-color: # # #F00 #F00; E se quiséssemos Criar um triangulo não triangulo-retângulo?

41 41 Aula 9 Javascript Vamos aprender passo-a-passo. Então, para quê o JAVASCRIPT? O Javascript é uma linguagem tipo script, ou seja, é interpretada linha a linha, para executar funções em seu navegador, esteja ele online ou não. Agora que conhecemos o HTML e o CSS, podemos entender um pouco mais de Javascript. <HTML> <HEAD> <TITLE>Titulo</TITLE> </HEAD> <BODY> </BODY> </HTML> A estrutura HTML segue um padrão único. Dentro desta estrutura vamos posicionar nosso Javascript. Primeiramente no próprio arquivo HTML, depois em um arquivo externo. De forma geral os scripts podem ser escritos dentro da HEAD, por uma razão simples. ORGANIZAÇÃO! Organize-se, chega de ser bagunceiro! Mas e se eu colocar fora? Vai funcionar do mesmo jeito, mas naquela bagunça. Onde é HTML, CSS, PHP, JS... O script se escreve assim: <script> e terminamos com </script> Mas que tipo de script?... Ok, vamos especificar então. <script type="text/javascript"> e encerrado simplesmente com </script>, ok? Mas nem todo lugar precisa ter uma inscrição de script, como dentro das TAGs HTML que já aceitam o Javascript por natureza de seus navegadores. O JavaScript pode escrever frases no navegar e deve ser chamado com o manipulador de eventos do HTML onload, dentro do body, veja: <script type="text/javascript">

42 42 function olamundo() { var msg = "Olá Mundo!!!"; document.open(); document.write(msg); document.close(); </script> E no body <body onload="olamundo()"> Você também pode associar funções, como o caso do alert. <body onload="alert('olá mundo!');"> Outros manipuladores de eventos: onclick = quando o mouse clicar sobre o item; onmouseover = quando o mouse passar sobre o elemento; onmouseout = quando o mouse sair sobre o elemento; onfocus = quando o elemento receber o foco, seja pelo mouse ou pelo teclado; onblur = quando o elemento perder o foco. Estes manipuladores podem ser associados ao body ou ao img, afinal são associados ao carregamento de algo. Vamos lá, respire fundo, tome muita coragem e teste! Teste até doer, mas teste!!! Incrível não? Até você deve estar se achando inteligente, mas calma, as coisas não acabaram faltam muitas páginas... Agora vamos escrever um pouco. Um texto pode ser escrito pelo JavaScript da seguinte forma: 1. <script type="text/javascript"> 2. //Isto é um comentário de uma linha 3. /*E este é 4. de múltiplas linhas.*/ 5. document.write("código JavaScript"); 6. </script>

43 43 Alert A função alert serve para situações em que o usuário deverá ver o alerta, como no preenchimento de formulário ou ao ler um texto. Escreva! <script type="text/javascript"> alert("clique em 'OK' para formatar seu micro!"); </script> Observe que a palavra OK está com aspas simples, isto por que se você colocar aspas duplas o texto se encerrará ali! Dentro das aspas duplas, somente as simples. Compreendeu 02? Mas e se eu quiser que o texto tenha aspas duplas? Simples! Adicione \ antes das aspas duplas, assim. alert("clique em \"OK\" para formatar seu micro!"); Então quer dizer que se eu escrever vai aparecer esta janela? Figura 4 Alert E onde é que eu escrevo? Se você escrever antes do <title> antes dele o popup irá se apresentar, se escrever antes do <body>, adivinhe! Então escreva onde melhor lhe convir! Quer uma boa sacada? Como funciona o carregamento do HTML? O desafio é fazer aparecer um popup explicativo para cada parte (antes dela) a ser carregada. Então vamos fundir o CSS aprendido antes com o Javascript.

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

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

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

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

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

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

> 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

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

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

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

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

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

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

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

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

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

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

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

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1 Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-2 Sumário Behaviors

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

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

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

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

Leia mais

28 de dezembro de 2003

28 de dezembro de 2003 Padrões Web e Tableless Marcelo Toledo 28 de dezembro de 2003 O HTML, HyperText Markup Language ou Linguagem de Marcação HiperTexto, foi criado para marcar um texto através

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

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

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

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

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

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet Aula 03 Celso Olivete Júnior olivete@fct.unesp.br Na aula de hoje... Javascript: introdução, operadores lógicos e matemáticos, comandos condicionais. Javascript:

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

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

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

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

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

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

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

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

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

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

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

Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004

Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004 DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis

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

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

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

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

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato

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

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

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

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

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

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

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

Exercícios Práticos de HTML e JavaScript.

Exercícios Práticos de HTML e JavaScript. <FORM ACTION=mailto:teste@gmail.com METHOD=POST ENCTYPE=text/plain NAME=cadastro> Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript

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

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

Web Design Aula 15: Conhecendo CSS

Web Design Aula 15: Conhecendo CSS Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando

Leia mais

jquery Apostila Básica

jquery Apostila Básica jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO

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

#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

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

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um

Leia mais

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé:

O objetivo é criar um tema padrão com 3 colunas, cabeçalho, barra de menu e rodapé: Este artigo tem por objetivo mostrar de maneira simples e direta o passo-a-passo de como criar um tema para XOOPS de maneira rápida e simples. Não vou adentrar a explicação de código, vou postando as estruturas

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

Aula 5 Cabeçalhos, Imagens e Links

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

Leia mais

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor

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

José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript. EmpregoWeb-Registo de pessoas

José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript. EmpregoWeb-Registo de pessoas José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript EmpregoWeb-Registo de pessoas Elabore um sítio Web de nome EmpregoWeb, recorrendo à linguagem HTML utilizando folhas de estilos (CCS) que registe

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

Formulários em HTML - O que são e para que servem

Formulários em HTML - O que são e para que servem Formulários em HTML - O que são e para que servem A tag - Os atributos action e method A primeira coisa que iremos fazer é usar a tag para podermos usarmos formulários. Antes de entrarmos

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

FORMULÁRIOS ACESSÍVEIS

FORMULÁRIOS ACESSÍVEIS Ministério da Educação Secretaria de Educação Profissional e Tecnológica IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul NAV Núcleo de Acessibilidade Virtual FORMULÁRIOS ACESSÍVEIS

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

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

DICAS PARA DESENVOLVER SITE ACESSÍVEL

DICAS PARA DESENVOLVER SITE ACESSÍVEL DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

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

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

Leia mais

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

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

Posicionamento e Layout com CSS

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

Leia mais

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

TUTORIAL CSS PRIMEIROS PASSOS COM HTML + CSS

TUTORIAL CSS PRIMEIROS PASSOS COM HTML + CSS Página 1 Imagem Esta é a tradução do tutorial "Starting with HTML + CSS " de autoria de Bert Bos publicado no site do W3C. 1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/style/examples/011/firstcss

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

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

Tecnologia WEB III. Prof. Erwin Alexander Uhlmann. PHP e MySQL. UHLMANN, Erwin Alexander. Introdução ao PHP. Instituto Siegen. Guarulhos, 2012.

Tecnologia WEB III. Prof. Erwin Alexander Uhlmann. PHP e MySQL. UHLMANN, Erwin Alexander. Introdução ao PHP. Instituto Siegen. Guarulhos, 2012. Tecnologia WEB III Prof. Erwin Alexander Uhlmann PHP e MySQL UHLMANN, Erwin Alexander. Introdução ao PHP. Instituto Siegen. Guarulhos, 2012. Agradecimentos Agradeço à minha esposa Kátia por entender minha

Leia mais

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

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

Leia mais

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique. Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças

Leia mais

FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE

FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE FACULDADE PARAÍSO DO CEARÁ Jonas Pinto Esteves CRIANDO APLICAÇÕES WEB RESPONSIVAS COM INTERFACE HTML5 VOLTADAS PARA DISPOSITIVOS MOBILE Juazeiro do Norte CE 2012 Jonas Pinto Esteves CRIANDO APLICAÇÕES

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

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: --Aprofundando nos elementos básicos do HTML; --Criando Hiperlinks em HTML; 2 Estrutura básica de um documento

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

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

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

Validação de formulários utilizando Javascript

Validação de formulários utilizando Javascript Validação de formulários utilizando Javascript A validação de formulários é um dos usos mais comuns na programação Javascript. A validação de dados por meio da programação Javascript é muito fácil e rápida

Leia mais

Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload:

Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload: Upload de vários arquivos com PHP 22.856 visualizações 2 1 Fala pessoal, hoje irei ensinar a fazer upload de vários arquivos de uma vez, ou seja, ao invés de criar apenas um campo para o usuário selecionar

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais