HTML. Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB. Claudinei Dias

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

Download "HTML. Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB. Claudinei Dias"

Transcrição

1 Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB HTML Prof. Claudinei Dias

2 HTML HiperText Markup Language Linguagem de programação para criar páginas Web Formada por textos e comandos chamados tags (etiquetas/rótulos) 2/58

3 NAVEGADORES (BROWSERS) Apesar de existir uma norma internacional para definição da HTML, nem todos os navegadores (browsers) exibem uma mesma página igualmente. Por isso, quando as páginas são disponibilizadas em servidores, é necessário testá-las nos diferentes browsers. Essa edição deve ser feita utilizando o modo comando, já que não se tem controle da forma com que os editores salvam as páginas. Por esse motivo, é necessário conhecer os comandos HTML para edição neste modo. 3/58

4 Tags HTML Todo documento HTML é composto de tags (etiquetas/rótulos). Cada elemento de texto (palavra, frase, parágrafos) são rotulados por meio de tags, cuja estrutura possui normalmente início e fim. Uma página HTML deve começar com a tag <HTML> e terminar com </HTML>. O nome da tag é escrita entre os sinais de menor que (<) e maior que (>). A tag de fechamento inicia com uma barra (/) para se diferenciar da tag de início. Por exemplo, a tag "i" serve para indicar que o texto entre seu início e final está em itálico. Exemplo: <i>este texto está em itálico</i>. 4/58

5 Tags HTML Após iniciar o documento com a tag <HTML> você deve incluir o cabeçalho que é feito com as tags <HEAD> </HEAD>. E também um título usando o par <TITLE>... </TITLE>. Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para intitular a janela de visualização. O "corpo" do documento deve ser demarcado pelo par <BODY>... </BODY>. É nesta parte do documento que serão colocados todos os comandos para apresentação de uma página HTML. 5/58

6 Exemplo de HTML mínimo Um documento simples seria digitado da seguinte maneira: <HTML> <HEAD> <TITLE>Exemplo de HTML</TITLE> </HEAD> <BODY> Aqui comandos em HTML que compõe a página. </BODY> </HTML> 6/58

7 Tags para formatação de texto Exemplos de tags para formatação de texto: <b>negrito</b> <i>itálico</i> <u>sublinhado</u> <center>centralizado</center> Negrito Itálico Sublinhado Centralizado 7/58

8 Parágrafos Em HTML são necessários comandos para definir parágrafos. Não basta simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. É preciso colocar uma tag para um parágrafo ou para uma linha nova. A tag <BR> indica uma quebra de linha. Note que não é necessário finalizar a tag, pois ela apenas indica a posição da quebra de linha. 8/58

9 Parágrafos A tag <P> e </P> define um parágrafo em HTML. Em algumas tags, é possível inserir atributos. Podemos definir o alinhamento do parágrafo na tag <P> através do parâmetro align. Os atributos são: Left: Alinhamento à esquerda Rigth: Alinhamento à direita Center: Centralizado Justify: Texto justificado 9/58

10 Parágrafos - Exemplo <p align="left">texto alinhado à esquerda</p> <p align="right">texto alinhado à direita</p> <p align="center">texto centralizado</p> <p align="justify">texto justificado</p> Texto alinhado à esquerda Texto alinhado à direita Texto centralizado Texto justificado 10/58

11 Formatação da Fonte A tag <FONT> permite definir tamanho, estilo e cor do texto. A tag <FONT> normalmente pode ser substituída por CSS. Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Porém, vamos estudar como formatar um texto usando apenas HTML. 11/58

12 Tipo/estilo da Fonte O atributo face define qual a fonte será utilizada para exibir o texto entre as tags <FONT> e </FONT>. Exemplo: <font face= arial">escrito em Arial.</font> <font face= courier">escrito em Courier.</font> <font face= times">escrito em Times.</font> <font face="verdana">escrito em Verdana.</font> 12/58

13 Tamanho da fonte O atributo size define o tamanho do texto. Esse valor é definido entre 1 e 7. <font size= 5 >Este texto é grande</font> Também é possível utilizar as seguintes tags para modificação do texto, em substituição da tag <FONT>: <BIG> - Aumenta a fonte e atribui negrito. Exemplo: <BIG>Texto GRANDE</BIG> <SMALL> - Reduz e altera a fonte. Exemplo: <small>texto pequeno</small> <SUP> - Faz com que o texto fique sobrescrito. Exemplo: <sup>texto sobrescrito</sup> <SUB>- Faz com que o texto fique subscrito. Exemplo: <sub>texto subscrito</sub> 13/58

14 Cor da fonte O atributo color define a cor do texto. É possível usar nomes de cores, definidos oficialmente, como yellow ou orange. Mas se necessitar usar outras cores, é possível usar seu código hexadecimal após o sinal de #. Exemplo: <font color= #FF00CC >texto de outra cor</font>. Outros nomes de cor: 14/58

15 Listas A HTML suporta listas com e sem numeração. Listas com numeração são definidas entre as tags <OL> e </OL>, enquanto as listas sem numeração entre <UL> e </UL>. A tag <LI> indica o início de cada item (assim como <BR> ela não necessita ser finalizada). <OL> <LI> Primeiro item de uma lista ordenada <LI> Segundo item de uma lista ordenada <LI> Terceiro item de uma lista ordenada </OL> <UL> <LI> Primeiro item de uma lista não ordenada <LI> Segundo item de uma lista não ordenada <LI> Terceiro item de uma lista não ordenada </UL> 1. Primeiro item de uma lista ordenada 2. Segundo item de uma lista ordenada 3. Terceiro item de uma lista ordenada - Primeiro item de uma lista não ordenada - Segundo item de uma lista não ordenada - Terceiro item de uma lista não ordenada 15/58

16 Imagens A tag para inserir uma imagem em sua página é <IMG>. Exemplo: <img src= arquivo de imagem > src é a sigla de source que significa fonte/origem. Essa tag não possui fechamento! 16/58

17 Imagens - Atributos Width: Largura da imagem Height: Altura da imagem Border: Tamanho da borda da imagem. Alt: Texto alternativo. Aparece antes de carregar a imagem. <img src="orbita.gif alt= Orbita border= 1 width="100" height="50"> 17/58

18 Links A principal característica da linguagem HTML vem de sua capacidade de interligar parte de um texto e imagens a outros documentos. Os navegadores exibem em destaque estas áreas, colocando os textos de cores diferentes e sublinhados e, as figuras com borda de cor diferente. Estes pontos chaves são denominados links ou hipertextos. A marcação <a> define o ponto de partida dos links e é denominada âncora. 18/58

19 Links Para incluir uma âncora em seu documento deve-se proceder da seguinte forma: Inicie a âncora com <a (há um espaço depois de a) Digite o parâmetro href="nome_do_arquivo"> Insira o texto (para links clicados em um texto) que vai funcionar como âncora para o documento seguinte ou insira o tag de colocação de imagens que você aprendeu no item anterior (para links clicados em uma imagem) na figura que você quer que funcione como âncora. Digite </a> para finalizar o texto que serve de link e depois continue o seu texto normalmente. 19/58

20 Links - Exemplo Clique <a href= para acessar o site da UDESC-Joinville. Clique aqui para acessar o site da UDESC-Joinville. 20/58

21 Tabela As tags <TABLE> e </TABLE> indicam o início e final de uma tabela. Cada linha é delimitada pelas tags <TR> e </TR>. As tags <TH> e </TH> indicam que as colunas são do tipo título (normalmente as colunas da primeira linha), enquanto as colunas normais são delimitadas por <TD> e </TD>. 21/58

22 Tabela - Exemplo <TABLE WIDTH=100% BORDER=1> <TR> <TH WIDTH=34%>Descrição</TH> <TH WIDTH=34%>Valor</TH> <TH WIDTH=34%>Total</TH> </TR> <TR> <TD WIDTH=33%>Primeira linha</td> <TD WIDTH=33%>1</TD> <TD WIDTH=33%>1</TD> </TR> <TR> <TD WIDTH=33%>Segunda linha</td> <TD WIDTH=33%>2</TD> <TD WIDTH=33%>3</TD> </TR> </TABLE> Descrição Valor Total Primeira linha Segunda linha /58

23 Tabela Outros Elementos Uma tabela também pode conter um título ou texto explicativo. Isso é realizado utilizando a tag <CAPTION> e </CAPTION>. <TABLE WIDTH=100% BORDER=1> <CAPTION>Tabela com titulo</caption> <TR> <TH WIDTH=34%>Descrição</TH> <TH WIDTH=33%>Valor</TH> <TH WIDTH=33%>Total</TH> </TR> <TR> <TD WIDTH=34%>Primeira linha</td> <TD WIDTH=33%>1</TD> <TD WIDTH=33%>1</TD> </TR> <TR> <TD WIDTH=34%>Segunda linha</td> <TD WIDTH=33%>2</TD> <TD WIDTH=33%>3</TD> </TR> </TABLE> Tabela com titulo Descrição Valor Total Primeira linha 1 1 Segunda linha /58

24 Tabela Mesclando Colunas Colspan é a abreviação para "column span". Colspan é usada nas tags <td> ou <th> para indicar quantas colunas estarão contidas em uma mesma célula. Exemplo, colspan=2 significa que a célula ocupará o espaço de duas colunas. 24/58

25 Tabela Mesclando Colunas <TABLE BORDER=1> <CAPTION>Tabela com titulo</caption> <TR> <TH WIDTH=34%>Coluna 1</TH> <TH WIDTH=33%>Coluna 2</TH> <TH WIDTH=33%>Coluna 3</TH> </TR> <TR> <TD COLSPAN=2>Junta duas colunas</td> <TD>1</TD> </TR> <TR> <TD COLSPAN=3>Junta 3 colunas</td> </TR> </TABLE> Tabela com titulo Coluna 1 Coluna 2 Coluna 3 Junta duas colunas 1 Junta 3 colunas 25/58

26 Tabela Mesclando Linhas Rowspan especifica quantas linhas estarão contidas em uma célula. Ela pode ser usada nas tags <th> e <td>. Exemplo, rowspan=2 significa que a célula ocupará o espaço de duas linhas. 26/58

27 Tabela Mesclando Linhas <TABLE BORDER=1> <CAPTION>Tabela com titulo</caption> <TR> <TH WIDTH=34%>Coluna 1</TH> <TH WIDTH=33%>Coluna 2</TH> <TH WIDTH=33% rowspan=3>coluna 3</TH> </TR> <TR> <TD>1</TD> <TD rowspan=2>2</td> </TR> <TR> <TD>3</TD> </TR> </TABLE> Tabela com titulo Coluna 1 Coluna 2 1 Coluna /58

28 Tabela Mesclando Células <TABLE border="1"> <TR> <TH rowspan=2> </TH> <TH colspan=2>média</th> <TH rowspan=2> Cabelos <BR> castanhos</th> </TR> <TR> <TH>altura</TH><TH>peso</TH> </TR> <TR> <TH> Masculino </TH><TD>1.9</TD> <TD>78<TD>70%</TD> </TR> <TR> <TH>Feminino</TH> <TD>1.7<TD> 65</TD> <TD> 63%</TD> </TR> </TABLE> Tabela com titulo Média Altura Peso Masculino 1, % Feminino 1, % Cabelos castanhos 28/58

29 Layout com tabelas Uma prática muito utilizada em HTML, é usar tabelas para formatar o layout de uma página. Um exemplo é usar duas colunas para formatar a página como em um jornal. Também é comum utilizar outras tabelas dentro de uma célula, a fim de reduzir a utilização de colspan s e rowspan s. 29/58

30 Tabela Mesclando Células <TABLE border="1"> <TR> <TH> </TH> <TD colspan=2> <TABLE border="1"> <TR><TH colspan="2">média</th></tr> <TR><TH>altura</TH><TH>peso</TH> </TR> </TABLE> </TD> <TH>Cabelos<BR>castanhos</TH> </TR> <TR> <TH>Masculino</TH><TD>1.9</TD><TD>78<TD> 70%</TD> </TR> <TR> <TH>Feminino</TH><TD>1.7<TD>65</TD><TD>6 3%</TD> </TR> </TABLE> Tabela com titulo Média Altura Peso Masculino 1, % Feminino 1, % Cabelos castanhos 30/58

31 Tag BODY - Formatação Cores de textos da página <BODY TEXT="#rrggbb" LINK="#rrggbb VLINK="#rrggbb" ALINK="#rrggbb"> text = texto normal da página link = links da página vlink = links consultados na página alink = links ativados na página 31/58

32 Tag BODY - Formatação Parâmetro BACKGROUND imagens como papel de parede no fundo da página <BODY BACKGROUND = "IMAGEM.GIF"> O fundo da página acompanhará o movimento da tela com <BODY BACKGROUND = "PISO.GIF BGPROPERTIES= "FIXED"> O fundo da sua página ficará estático e apenas o conteúdo da sua página irá se mover 32/58

33 Tabela - Formatação BORDER = <value> define a largura da borda CELLSPACING = <value> define espaçamento entre células CELLPADDING = <value> define distância entre o texto e a borda das células WIDTH = <value or percent> determina o quanto da tela uma tabela deve ocupar BGCOLOR = <cor> define a cor de fundo da tabela ou da célula 33/58

34 Tabela - Formatação <valign> = controla o alinhamento vertical do texto associado a TR, TD ou TH top = alinha com o alto da célula middle = alinha no meio bottom = alinha com a parte de baixo da célula 34/58

35 Formatação de textos Tag <HR> Cria uma linha horizontal Quebra entre um item de informação e outro Atributos de largura e altura <HR SIZE=8 WIDTH=80%> WIDTH indica que a linha ocupará 80% da largura da janela do browser SIZE indica que será exibida uma linha com 8 pixels de espessura 35/58

36 Formatação de textos Tags <H1> a </H6> Espécie de cabeçalho com padrões de formatação prontos Negrito e determinado tamanho, além de colocar uma linha em branco após o texto Após o TAG <H> deve vir um número de 1 a 6 indicando o tamanho da fonte Sendo que 1 é o maior tamanho e 6 o menor <H1> Cabeçalho Grande </H1> <H6> Cabeçalho Pequeno </H6> 36/58

37 Acentuação / Caracteres Especiais Notações especiais para ser exibidas em tela Iniciam por & (e comercial) e encerram-se com ; (ponto e vírgula) < Maior que > > Menor que < & E comercial & " aspas duplas Acento agudo: &xacute; onde x é uma letra qualquer Acento grave: &xgrave; Acento circunflexo: &xcirc; Letra com til: &xtilde; Letra com trema: &xuml; Letras unidas: &Aelig; = Æ e æ = æ Letra com argola: Å = Å e &aring = å Cedilha: &ccedil= ç N com til: Ñ = Ñ e ñ = ñ O cortado: Ø = Ø e ø = ø 37/58

38 Frames (quadros) Os frames são divisões da tela do browser em diversas telas (ou "quadros"). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte. Não é difícil colocar frames em páginas; porém, nem todos os usuários gostam deles, pois sua navegação não é fácil, além de apresentar problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks (favoritos). A alternativa natural para os frames são as tabelas. 38/58

39 Frames (quadros) A tag <FRAMESET> define a divisão da página em quadros e substitui a tag <BODY>. Nela pode haver o atributo cols ou o atributo rows. Se a página for dividida em mais de uma coluna, usa-se o atributo cols e rows caso a página seja dividida em linhas. Nos valores de atributo, é indicado o tamanho de cada linha/coluna. Dentro da formatação de FRAMESET, temos as tags <FRAME> das páginas que serão mostradas nos frames definidos pelo atributo src. 39/58

40 Frames (quadros) <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="indice1.html"> <FRAME SRC="apresenta.html" NAME="principal"> </FRAMESET> </HTML> Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela). 40/58

41 Animações, Vídeos e outras mídias Para embutir arquivos de diferentes mídias, como animações em flash e vídeo, usa-se a tag <EMBED></EMBED>. Atributos: src: informa o endereço do objeto a ser inserido na página; type: o tipo do objeto height: a altura do objeto. width: a largura do objeto. Também podem ser usados atributos como: hspace: informa o espaçamento horizontal entre o objeto e o texto. vspace: informa o espaçamento vertical entre o objeto e o texto. hidden: marca o objeto como escondido (true) ou não (false) autostart: executa automaticamente o objeto (true) ou não (false) loop: se o objeto repetirá ao chegar no final (true) ou não (false) pluginspage: caso o plugin necessário para rodar o objeto não estiver instalado, informa qual a página que o usuário deverá baixá-lo. 41/58

42 iframe (inline frames) O iframe é uma tag que cria um frame dentro da página HTML, em vez de "dividir" a página. É muito utilizado para exibir um conteúdo específico dentro de uma página como um texto ou arquivo multimídia. <iframe width="420" height="345" src=" frameborder="0" allowfullscreen></iframe> 42/58

43 Formulários São estruturas que permitem que usuários submetam dados a uma página. Esses dados podem ser tratados e/ou armazenados dependendo da aplicação. Os formulários são caixas de texto e botões que podemos encontrar em muitas páginas web. São muito utilizados em sites de comércios eletrônico e cadastros. Os formulários são definidos por meio das tags <form> e </form>. Entre estas duas tags colocaremos todos os campos e botões que compõem o formulário. Dentro de <form> devemos especificar alguns atributos como Action e Method. 43/58

44 Formulários - Atributos Method - Informa como os dados são enviados, podendo ser de dois tipos: Get expõe o nome e valor das variáveis, podendo ser utilizado por pessoas com más intenções (deve ser evitado). Post passa as variáveis de maneira transparente para o usuário. É o método mais aconselhável. Action: define o tipo de ação a realizar com o formulário. Existem duas possibilidades: O formulário é enviado a um endereço de correio eletrônico. <form ction="mailto:endereço@correio.com" > O formulário é enviado a um programa ou página que processa seu conteúdo. <form action="cria_cadastro.php" > 44/58

45 Exemplo (formulário vazio) <form action="pagina.php" method="post">... conteúdo do formulário... </form> 45/58

46 Elementos do Formulário Os elementos do formulário devem ser inseridos entre as tags <form> e </form>. Podemos inserir vários tipos de entrada de dados em um formulário, a maioria delas definida pela tag input. Todo elemento possui um parâmetro name que é utilizado para identificar a variável onde o dado está contido. 46/58

47 Elementos do Formulário Campo de Texto (text): Campo para entrada de texto comum. <input type="text" name="cidade" value=joinville size="15" maxlenght="15"> Parâmetros: value - atribui um valor inicial para o campo; size - especifica o tamanho do campo; maxlenght - especifica o número máximo de caracteres aceitos pelo campo. 47/58

48 Elementos do Formulário Campo Senha (password): Tipo de campo similar ao anterior, mas quando o usuário digita, os caracteres são substituídos por *. <input type= password" name= minhasenha size="15" maxlenght="15"> Parâmetros: size - especifica o tamanho do campo; maxlenght - especifica o número máximo de caracteres aceitos pelo campo. 48/58

49 Elementos do Formulário Campo Oculto (hidden): semelhante ao text, porém, invisível para o usuário. Usado para passar informações ao servidor (quando o formulário for submetido) sem que o usuário tome conhecimento. <input type=hidden name=pgname value="test"> Parâmetros: name - nome do campo; value - atribui um valor para o campo; 49/58

50 Elementos do Formulário Botão de Checagem (CheckBox): utilizado para entradas de múltipla escolha onde o usuário pode escolher várias opções. Cada opção deve ter um nome independente. Obs.: Apenas a caixa de checagem é mostrada. Para colocar um texto, basta escrever o texto após a tag. <input type="checkbox" name="disciplina" value="matematica" checked>matemática <input type="checkbox" name="disciplina" value="estatistica">estatística <input type="checkbox" name="disciplina" value="fisica">física Parâmetros Checked - Se for declarado, o elemento terá seu estado inicial marcado. Value - É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado. 50/58

51 Elementos do Formulário Radio é mais um formulário de múltipla escolha, mas nesse caso o usuário poderá escolher apenas uma opção. Os parâmetros seguem o mesmo roteiro do checkbox. <input type="radio" name="sexo" value="f" checked>feminino <input type="radio" name="sexo" value="m">masculino Parâmetros Checked - Se for declarado o elemento terá seu estado inicial como marcado. Value - É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado. 51/58

52 Botões Botão (button): Utilizado para chamar funções que rodam no browser (Javascript). Submeter (submit): enviará as opções ou informações digitadas ao servidor/ (definido no parâmetro action do formulário). Restaura (reset): restaura o valor padrão de todos os campos de um formulário. <input type="button" value="botão"> <input type="reset" value="restaura Valores"> <input type="submit" value="envia Valores"> Parâmetros: Value texto do botão 52/58

53 Área de texto A tag <textarea> permite a entrada de um texto no estilo Memo, com várias linhas. Obs.: não existe o parâmetro value, o texto inicial deve ser definido entre as tags <textarea> e </textarea>. <textarea name="opiniao" rows="5" cols="40"> digite aqui sua avaliação deste curso </textarea> Parâmetros: Cols Número e caracteres por linha. Rows Número de linhas do campo. 53/58

54 Caixas de texto Listbox e Combobox são definidos pela tag <select>. A diferença básica entre eles consiste na existência ou não do parâmetro size (que especifica o número de linha exibidas). Se inserirmos esse parâmetro, estaremos construindo um listbox; senão especificarmos um combobox. Cada tag <option> acrescenta uma linha (opção) ao componente. 54/58

55 Combobox Caixa de texto padrão. <select name="paisfavorito"> <option value="alemanha">alemanha</option> <option value="espanha">espanha</option> <option value="franca">frança</option> <option value="inglaterra">inglaterra</option> <option value="italia">itália</option> <option value="portugal">portugal</option> </select> 55/58

56 Listbox <select name="paises" size = "4" multiple> <option value="alemanha">alemanha</option> <option value="espanha">espanha</option> <option value="franca">frança</option> <option value="inglaterra">inglaterra</option> <option value="italia">itália</option> <option value="portugal">portugal</option> </select> Parâmetro: Em uma listbox, o parâmetro multiple permite a seleção de mais de uma linha (usando a tecla control) 56/58

57 Bibliografia da Disciplina BIBLIOGRAFIA BÁSICA: GUIZZO, Érico M. Internet O que é, o que oferece, como conectar-se. São Paulo. Ática, HONEYCUTT, Jerry. Usando a Internet. Rio de Janeiro. Campus, MARCON, Antônio M. Aplicações e banco de dados para Internet. São Paulo. Érica, MORAIS, Marcio S. Como publicar seu site na Internet. Rio de Janeiro. Brasport, NIELSEN, Jakob. Projetando Websites. Tradução: GIBSON, Ana de. Designing Web Usability. Rio de Janeiro, Campus, WATERS, Crystal. WEB, concepção & design: um guia abrangente para criar páginas na teia. São Paulo, Editora Quark, BIBLIOGRAFIA COMPLEMENTAR: ALBUQUERQUE, Fernando. TCP/IP Internet: protocolo & tecnologia. Rio de Janeiro. Axcel Books, ANSELMO, Fernando. PHP e MySQL para Windows. Florianópolis. Visual Books, ATRI, Maurício. Internet2: a próxima geração. São Paulo. Market Books, MANDEL, Theo. The elements of user interface design. Canada. John Wiley & Sons, Inc MARTIN, Chuck. O futuro da internet: como se posicionar estrategicamente para a conquista de mercados e clientes em um novo mundo interligado na Internet. São Paulo. Makron Books, MELONI, Julie C. Fundamentos em PHP. Rio de Janeiro. Ciência Moderna Ltda MORAIS, Marcus Garcia de. Internet, Intranet e redes corporativas. Rio de Janeiro. Brasport, RATSCHILLER, Tobias; GERBEN, Till. Desenvolvendo aplicações na Web com PHP 4.0. Rio de Janeiro. Editora Ciência Moderna Ltda SILVA, Luciano C. da. Banco de dados para a Web do planejamento à implementação. São Paulo, Érica, /58

58 Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB HTML Prof. Claudinei Dias Slides do prof. André Tavares da Silva

Introdução a HTML. André Tavares da Silva.

Introdução a HTML. André Tavares da Silva. Introdução a HTML André Tavares da Silva andre.silva@udesc.br HTML HiperText Markup Language Linguagem de marcação para criar páginas Web Formada por textos e comandos chamados tags (etiquetas/rótulos)

Leia mais

HTML Parte III. André Tavares da Silva.

HTML Parte III. André Tavares da Silva. HTML Parte III André Tavares da Silva andre.silva@udesc.br Formulários São estruturas que permitem que usuários submetam dados a uma página. Esses dados podem ser tratados e/ou armazenados dependendo da

Leia mais

Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham ape

Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham ape INTRODUÇÃO A PROGRAMAÇÃO HTML Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham apenas os comandos necessários

Leia mais

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML

Leia mais

Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html

Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento

Leia mais

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar

Leia mais

Recursos Complementares (Tabelas e Formulários)

Recursos Complementares (Tabelas e Formulários) Linguagem de Programação para Web Recursos Complementares (Tabelas e Formulários) Prof. Mauro Lopes 1-31 30 Objetivo Nesta aula iremos trabalhar o conceito de tabelas e todas as tags associadas ao seu

Leia mais

Tabelas Div Span Frames Formulários

Tabelas Div Span Frames Formulários Tabelas Div Span Frames Formulários Tabelas Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. A utilização de tabelas

Leia mais

HTML. Professor Victor Sotero. html

HTML. Professor Victor Sotero. html HTML Professor Victor Sotero html 1 Conceito Linguagem com a finalidade de marcação de hipertexto, sendo assim escritas páginas da web, e interpretada pelo navegador. As páginas contém um código fonte,

Leia mais

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/04/2011

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/04/2011 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar

Leia mais

O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2

O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2 HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza

Leia mais

17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce

17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,

Leia mais

</H1>... <H6>... </H6>

</H1>... <H6>... </H6> HTML ... *Todo arquivo html tem que ter esse corpo no início e no fim do arquivo. ... *É o cabeçalho, contém todas as informações necessárias para o navegador ou servidor processar

Leia mais

HTML Parte II. André Tavares da Silva.

HTML Parte II. André Tavares da Silva. HTML Parte II André Tavares da Silva andre.silva@udesc.br Tag BODY - Formatação Cores de textos da página text = texto normal da página

Leia mais

PROGRAMAÇÃO EM AMBIENTE WEB I

PROGRAMAÇÃO EM AMBIENTE WEB I PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,

Leia mais

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar

Leia mais

HyperText Markup Language HTML. Formulário

HyperText Markup Language HTML. Formulário 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/ Introdução O usuário interage com os serviços

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

Formulários são áreas onde se inserem campos que permitem uma troca de informações maior entre usuários e desenvolvedores de sites HTML Até o momento,

Formulários são áreas onde se inserem campos que permitem uma troca de informações maior entre usuários e desenvolvedores de sites HTML Até o momento, HTML Formulários são áreas onde se inserem campos que permitem uma troca de informações maior entre usuários e desenvolvedores de sites HTML Até o momento, HTML mostrou-se uma linguagem bastante adequada

Leia mais

Prof. Fernando Gonçalves Abadia. Sistemas Multimídias

Prof. Fernando Gonçalves Abadia. Sistemas Multimídias Prof. Fernando Gonçalves Abadia Sistemas Multimídias Títulos Títulos são definidos com as tags a . A define o título maior. A define o título menor. este é um título este

Leia mais

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 HTML? INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 1 Hypertext Markup Language (Linguagem de

Leia mais

HTML Página 36. Índice

HTML Página 36. Índice PARTE - 6 HTML Página 36 Índice Tabelas... 37 Construindo tabelas Marcação TABLE... 37 Título da Tabela Marcação CAPTION... 37 Cabeçalho da tabela (table headings) Marcação TH... 37 Dados da tabela (table

Leia mais

O que faz um servidor/navegador web? 30/03/2017 Rômulo da Silva Lima Slid e 2

O que faz um servidor/navegador web? 30/03/2017 Rômulo da Silva Lima Slid e 2 HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza

Leia mais

Autoria Web. Professor: Diego Oliveira. Conteúdo 03: Tags de Formulário

Autoria Web. Professor: Diego Oliveira. Conteúdo 03: Tags de Formulário Autoria Web Professor: Diego Oliveira Conteúdo 03: Tags de Formulário Caminhos Os caminhos dentro de um projeto HTML podem ser Relativos ou Absolutos O caminho Relativo é o caminho a partir da página em

Leia mais

20/02/2014. <HTML> Introdução </HTML> Web

20/02/2014. <HTML> Introdução </HTML> Web Introdução 1 Web 2 1 Web 3 Web 4 2 Web 5 Browsers 6 3 Editores 7 Editores 8 4 Aula Teórica-prática Etiquetas (tags) base Etiqueta principal e que deve abranger todo o código;

Leia mais

HyperText Markup Language HTML. Tabela

HyperText Markup Language HTML. Tabela HyperText Markup Language HTML Tabela Prof. Luis Nícolas de morim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Tabela consiste em uma estrutura de

Leia mais

Tabelas. table <table>...</table>

Tabelas. table <table>...</table> Tabelas table ... Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluidas

Leia mais

HTML. Leonardo Gresta Paulino Murta

HTML. Leonardo Gresta Paulino Murta HTML Leonardo Gresta Paulino Murta leomurta@gmail.com Introdução a HTML Formulários em HTML Critério para escolha de campos Agenda Leonardo Murta HTML 2 HTML HyperText Markup Language Criada por Tim Berners-

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

PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 1 HTML INTRODUÇÃO O que é HTML? INTRODUÇÃO HTML ou Hypertext

Leia mais

Construção de sites Aula 1

Construção de sites Aula 1 Construção de sites Aula 1 Programa Instrutor Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 31 de Julho de 2010 Indice Estrutura da Internet 1 Estrutura

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

HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)

HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext) HTML HyperText Markup Language (Linguagem de marcação de hypertext) Tags de marcação Referência v1.1 2008-2017 Rui Menino tags Para formatar e paginar o texto dentro de uma página html, foi definido o

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário

Leia mais

Formulários [8] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira

Formulários [8] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira Desenvolvimento e Design de Websites Prof.: Ari Oliveira Formulários: Tag form Campos: Texto, Senha, checkbox, radio, botões, textarea e menu select. 2 Crie uma Tabela de Horários Faça seu horário semanal,

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Um Formulário é uma área com entrada de dados disponível para o usuário. A ideia básica do formulário é apresentar campos

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

TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo

TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo TECNOLOGIA WEB XHTML Aula 5 Profa. Rosemary Melo HTML (Hiper Text Markup Language) Linguagem de marcação de hipertexto Comum especificar o conteúdo do documento e sua formatação em um só documento HTML.

Leia mais

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.) Módulo 17E Revisões de HTML A) Noções básicas de HTML (cont.) Inserção de Imagens A inserção de imagens em documentos HTML é feita através da tag (que não tem tag de fecho). A indicação do local

Leia mais

PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes

PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes PROGRAMAÇÃO PARA INTERNET Prof.: Jean Carlo Mendes carlomendes@yahoo.com.br http://www.jeancarlomendes.com.br HTML Tabelas - As tabelas em HTML são criadas através das tags e - Algumas

Leia mais

TAGS. O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. <tag>conteúdo da tag</tag>

TAGS. O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. <tag>conteúdo da tag</tag> HTML DDW TAGS O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. conteúdo da tag Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos

Leia mais

Formulários. Etapa 1 Criação de formulários

Formulários. Etapa 1 Criação de formulários 9 Formulários Objetivos deste capítulo Ao terminar este capítulo, você deverá: Saber o que são formulários; Conhecer as principais tags para construção de um formulário; Criar o layout simples de um formulário.

Leia mais

Tarlis Portela Web Design HTML

Tarlis Portela Web Design HTML Tarlis Portela Web Design HTML HTML Definição HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) ; É uma linguagem de marcação utilizada

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

Elementos Básicos HTML e Formatação de textos

Elementos Básicos HTML e Formatação de textos Elementos Básicos HTML e Formatação de textos O Html é uma linguagem de marcação (markup languages em inglês). As linguagens que combinam texto com informações extras sobre o texto. Essas informações extras

Leia mais

Curso de PHP. - Início 22 de agosto. - Término 20 de outubro. - Aulas: segunda e quinta-feira - Horário:18h às 20h. - Carga horária do curso: 40h

Curso de PHP. - Início 22 de agosto. - Término 20 de outubro. - Aulas: segunda e quinta-feira - Horário:18h às 20h. - Carga horária do curso: 40h Curso de PHP Palestrantes: Marco Aurélio Jefson Farias - Início 22 de agosto Curso de PHP - Término 20 de outubro. - Aulas: segunda e quinta-feira - Horário:18h às 20h. - Carga horária do curso: 40h -

Leia mais

XML e XSL. Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB. Claudinei Dias email: prof.claudinei.dias@gmail.com

XML e XSL. Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB. Claudinei Dias email: prof.claudinei.dias@gmail.com Ciência da Computação DESENVOLVIMENTO DE APLICAÇÕES PARA WEB XML e XSL Prof. Claudinei Dias email: prof.claudinei.dias@gmail.com Fundamentos XML Extensible Markup Language Linguagem de marcação de dados

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 Foi também disponibilizado um formulário de ajuda em html com as tags principais Sítio da aula anterior: http://www.marcosoares.com/aia/11/aula_2010_04_16/

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

Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr>

Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr> Tabelas HTML Tabelas Tabelas São definidas pela tag Uma tabela é dividida em linhas -com a tag Cada linha divida em células de dados (com a tag ). As letras td são um acronimo

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

Finalidade dos formulários

Finalidade dos formulários ENTENDENDO O FORMULÁRIO Na opinião de muitos a criação de formulários na linguagem HTML é uma das áreas mais importantes no desenvolvimento web. Diferentemente de outras marcações HTML o formulário não

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

Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.

Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html

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

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

HTML: INTRODUÇÃO TAGS BÁSICAS

HTML: INTRODUÇÃO TAGS BÁSICAS HTML: INTRODUÇÃO TAGS BÁSICAS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 1 SUMÁRIO Definição Editores HTML Estrutura básica de um documento

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

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

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Tabelas A tag permite a criação de tabelas com linhas e colunas Tabelas devem ser utilizadas para organizar e apresentar dados

Leia mais

Dezembro/2012. Universidade Federal Fluminense. Curso de Introdução ao HTML. SeTel- Grupo PET-Tele. Adicionando links e imagens. Tabelas.

Dezembro/2012. Universidade Federal Fluminense. Curso de Introdução ao HTML. SeTel- Grupo PET-Tele. Adicionando links e imagens. Tabelas. Universidade Federal Fluminense Dezembro/2012 1 2 3 4 5 6 7 8 Informações principais Base da Web: - Um esquema de nomes para localização de fontes de informação na Web : URL. - Um Protocolo de acesso para

Leia mais

AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos

AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 03 Prof. Fernando F. Costa nando@fimes.edu.br Prof. Fernando 1 HTML - Acentuação Não é recomendável utilizar acentos em documentos web Problemas Pode haver má interpretação

Leia mais

Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo

Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo Parte I Prof. Vicente Paulo de Camargo Páginas com podem ser desenvolvidas com editor de texto simples Existem, no entanto, alguns editores interessantes, que facilitam a edição de páginas É o caso de

Leia mais

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar

Leia mais

3. Construção de páginas web Introdução ao HTML

3. Construção de páginas web Introdução ao HTML 3. Construção de páginas web 3.1. Introdução ao HTML 1 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido para especificar a organização lógica de um documento com extensões de hipertexto,

Leia mais

HTML: TEXTOS SUMÁRIO. Cabeçalhos para títulos e sub-títulos Parágrafos

HTML: TEXTOS SUMÁRIO. Cabeçalhos para títulos e sub-títulos Parágrafos HTML: TEXTOS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Cabeçalhos para títulos e sub-títulos Parágrafos Quebras de linhas Blocos

Leia mais

Programação Web Aula 2 XHTML/CSS/XML

Programação Web Aula 2 XHTML/CSS/XML Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags básicas Seleção

Leia mais

Autoria Web. Formulários Aula 5. Cleverton Hentz

Autoria Web. Formulários Aula 5. Cleverton Hentz Autoria Web Formulários Aula 5 Cleverton Hentz Sumário da Aula } Introdução } Formulários Básicos } Elementos Suportados 2 Introdução } Os formulários possibilitam o envio de informação para o servidor

Leia mais

O elemento para definição de uma tabela é <TABLE> sendo finalizada com </TABLE>. Este elemento prevê sub-elementos para sua composição.

O elemento para definição de uma tabela é <TABLE> sendo finalizada com </TABLE>. Este elemento prevê sub-elementos para sua composição. HTML Tabelas O elemento para definição de uma tabela é sendo finalizada com. Este elemento prevê sub-elementos para sua composição. 1. Sub-elemento Título O título de uma tabela é definido pela

Leia mais

Implementando e manipulando Tabelas

Implementando e manipulando Tabelas Implementando e manipulando Tabelas Aplicações para Web I 31/03/2016 Tiago Alves de Oliveira - tiagofga@gmail.com 1 Tabelas As tags utilizadas para a criação de tabelas A utilização de tabelas permite

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

Desenvolvimento Web TCC Turma A-1

Desenvolvimento Web TCC Turma A-1 Desenvolvimento Web TCC-00.226 Turma A-1 Conteúdo Projeto de Interface com o Usuário em HTML Professor Leandro Augusto Frata Fernandes laffernandes@ic.uff.br Material disponível em http://www.ic.uff.br/~laffernandes/teaching/2013.2/tcc-00.226

Leia mais

Internet & HTML Internet & HTML Pedro Costa / 2004

Internet & HTML Internet & HTML Pedro Costa / 2004 Internet & HTML Pedro Costa / 2004 Como funcionam as páginas Web As páginas web são apenas constituídas por texto ASCII plano. Os Web browsers processam o código usado nas páginas web para mostrarem uma

Leia mais

Links, Imagens e Tabelas

Links, Imagens e Tabelas Links, Imagens e Tabelas Criar um link em um texto significa estabelecer uma ligação com outra página, outro texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem. Para

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste

Leia mais

Curso de HTML aula 4. Sumário. 1 Formulários. 1.1 Construindo formulários com o FORM. 1.2 Método:

Curso de HTML aula 4. Sumário. 1 Formulários. 1.1 Construindo formulários com o FORM. 1.2 Método: Sumário 1 Formulários... 1 1.1 Construindo formulários com o FORM... 1 1.2 Método:... 1 1.3 INPUT... 2 2 Outros valores para type... 3 2.1 TYPE="RADIO"... 3 2.2 TYPE="PASSWORD"... 3 2.3 TYPE="CHECKBOX"...

Leia mais

Informática I. Aula 3. Aula 3-03/09/2007 1

Informática I. Aula 3.  Aula 3-03/09/2007 1 Informática I Aula 3 http://www.ic.uff.br/~bianca/informatica1/ Aula 3-03/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e

Leia mais

TecWeb Tecnologias Web. Prof. Esp. Douglas Mariano dos Santos

TecWeb Tecnologias Web. Prof. Esp. Douglas Mariano dos Santos TecWeb Tecnologias Web Prof. Esp. Douglas Mariano dos Santos Sobre mim Formado na FAU: Faculdade Alfa de Umuarama Sistemas para Internet Formado na FCV MBA em Desenvolvimento para Aplicativos Móveis Trabalhou

Leia mais

Dreamweaver CC_15x21.indd 1 06/04/ :04:22

Dreamweaver CC_15x21.indd 1 06/04/ :04:22 Dreamweaver CC_15x21.indd 1 06/04/2015 11:04:22 SUMÁRIO INTRODUÇÃO... 3 CAPÍTULO 1 Iniciando e conhecendo o Dreamweaver... 8 Interfaces... 21 Criando e configurando sites... 22 CAPÍTULO 2 Criando arquivos...

Leia mais

Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B

Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B Projeto Integrador Green Friday Pesquisa HTML5 Gestão em Tecnologia da Informação Turma 1º B Versão : 1.0.0 Equipe Cristiano Margarida Rodrigues Idealização e arquitetura Tiago Dariel Gois Marques - Teste

Leia mais

Fábio Borges de Oliveira. HTML HyperText Markup Language

Fábio Borges de Oliveira. HTML HyperText Markup Language Fábio Borges de Oliveira HTML HyperText Markup Language linha 1 ítem 1 linha 2 linha 3 linha 4 Pré-formatação linha 5 Imagens

Leia mais

- os dados entrados fazem parte do corpo da mensagem enviada para o servidor; - transfere grande quantidade de dados.

- os dados entrados fazem parte do corpo da mensagem enviada para o servidor; - transfere grande quantidade de dados. Formulários Um formulário é um modelo para a entrada de um conjunto de dados. O primeiro passo para fazer formulários é aprender as etiquetas que desenham as janelinhas de entrada de dados, para depois

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

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

Leia mais

Introdução à linguagem HTML. Volnys Borges Bernal

Introdução à linguagem HTML. Volnys Borges Bernal 1 Introdução à linguagem HTML Volnys Borges Bernal 2013-2015 Volnys Bernal 2 Introdução à linguagem HTML Sumário Visão geral Primeira página Principais tags Principais atributos Formulários 2011-2015 Volnys

Leia mais

Web Design Aula 10: Formulários - Parte2

Web Design Aula 10: Formulários - Parte2 Web Design Aula 10: Formulários - Parte2 Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Textarea Select FieldSet e Legend Atributo Action Atributo Method Exercício Form Um formulário

Leia mais

Formatação de Textos e Caracteres

Formatação de Textos e Caracteres Formatação de Textos e Caracteres Os comandos de formatação de caracteres são divididos em dois grupos: lógicos e físicos. Estilos físicos: ... - destaca o texto em negrito ... - exibe o

Leia mais

Adicionando mais tags HTML

Adicionando mais tags HTML Instituto Federal de Minas Gerais Campus Ponte Nova Adicionando mais tags HTML Professor: Saulo Henrique Cabral Silva Bookmark Bookmark ou demarcação de destinos para links (informações) dentro do próprio

Leia mais

INTRODUÇÃO A PROGRAMAÇÃO PARA WEB

INTRODUÇÃO A PROGRAMAÇÃO PARA WEB INTRODUÇÃO A PROGRAMAÇÃO PARA WEB PROF. ME. HÉLIO ESPERIDIÃO Navegador O navegador também conhecido como web browser é um programa que habilita seus usuários a interagirem com documentos hospedados em

Leia mais

HTML. Frames e FORMs

HTML. Frames e FORMs HTML Frames e FORMs Frames As frames são divisões do ecrã do browser em diversas janelas (ou quadros ). Torna-se assim possível apresentar mais do que uma página numa janela do browser. É muito fácil colocar

Leia mais

HTML & CSS. uma introdução

HTML & CSS. uma introdução HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência

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

<title>introdução a HTML</title>

<title>introdução a HTML</title> introdução a HTML programação para a Internet prof. Vilson Heck Junior O que é HTML Hypertext Markup Language: Linguagem de Marcação de Hipertexto; É uma coleção de TAGs

Leia mais

Treinamento em HTML. Índice

Treinamento em HTML. Índice Nível: Básico Horas: 4 Treinamento em HTML Índice Índice...1 Introdução...2 Linguagem de marcação...3 Linguagem Interpretada pelo próprio browser...3 Modelo cliente / servidor...3 Casos especiais: Netscape

Leia mais

HTML (HyperText. Markup Language)

HTML (HyperText. Markup Language) Pontifícia Universidade Católica do Rio Grande do Sul PUCRS Faculdade de Informática HTML (HyperText Markup Language) Prof. Fabiano Passuelo Hessel Profª. Leticia Lopes Leite Julho de 2002. 1. Introdução

Leia mais

HTML HyperText Markup Language

HTML HyperText Markup Language Tecnologias para Web Design HTML HTML HyperText Markup Language ÿ Estrutura documentos a serem apresentados por agentes de usuários ex. browsers ÿ O texto de um documento é incluído diretamente no código

Leia mais

CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira

CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário

Leia mais