APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

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

Download "APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont"

Transcrição

1 APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio ( prédio dos laboratórios ) Instituto de Informática - UFRGS Av. Bento Gonçalves, 9500 bloco IV Bairro Agronomia Porto Alegre, RS

2 1. Introdução O objetivo do curso é fornecer aos participantes noções básicas da linguagem HTML, sabe-se que há várias ferramentas poderosas para editar o HTML de uma página, porém é de fundamental importância conhecer seu funcionamento. 1.1 O que é um arquivo HTML? HTML significa Hyper Text Markup Language Um arquivo HTML é um arquivo texto contendo pequenas tags de marcação As tags de marcação indicam para o Navegador Web como mostrar a página A extensão de um arquivo HTML deve ser htm ou html Um arquivo HTML pode ser criado usando um editor de texto simples Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento: <tag>...</tag> Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Alguns elementos são chamados vazios, pois não marcam uma região de texto, apenas inserem alguma coisa no documento: <tag> Todos os elementos podem ter atributos: <tag atributo1=valor1 atributo2=valor2>...</tag> HTML é um recurso muito simples e acessível para a produção de documentos. Mais adiante veremos com detalhes os atributos das tags e seus valores. 2. Editores HTML: Como dito anteriormente, um arquivo html pode ser criado usando um editor de texto simples, como o bloco de notas. Porém há editores sofisticados para a criação de código HTML, alguns exemplos: - Dreamweaver Macromedia - HomeSite 5.5 incluído no Dreamweaver - FrontPage - HTML-kit free O ideal é sempre utilizarmos um editor que permita editar o código fonte HTML. As etiquetas HTML não são sensíveis à caixa, com isso tanto faz escrever: <HTML>, <Html>, <html>, <HtMl>,... Na apostila, utilizamos maiúsculas, em muitos casos, para fins didáticos embora o padrão a ser utilizado seja em minúsculas.

3 Estrutura mínima de uma página HTML: <HTML> <HEAD> <TITLE>Título da Página</TITLE> </HEAD> <BODY> Conteúdo da página </BODY> </HTML> 2.1 Atributos de <BODY> Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d água): <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> onde: BGCOLOR cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco) TEXT cor dos textos da página (padrão: preto) LINK cor dos links (padrão: azul) ALINK cor dos links, quando acionados (padrão: vermelho) VLINK cor dos links, depois de visitados (padrão: azul escuro ou roxo) Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Browsers atuais aceitam 16 nomes de cores - por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas. 3. Algumas Tags básicas Tag Descrição <html> Define um documento HTML <body> Define o corpo do documento <h1> a <h6> Define cabeçalho 1 ao 6 <p> Define um parágrafo <br> Insere uma quebra de linha <hr> Define uma linha horizontal <!--> Define um comentário <font> Define a formatação de um texto Há seis níveis de cabeçalhos em HTML, de <h1> a <h6>. Os cabeçalhos têm atributos de alinhamento, como no exemplo abaixo: <h3 ALIGN=CENTER>Cabeçalho de nível 3 centralizado</h3>

4 <! Aqui é um comentário --> <! <P> tem atributo de alinhamento, como os cabeçalhos: --> <p ALIGN=CENTER>parágrafo centralizado<br>com quebra de linha</p> <! <hr> insere uma linha horizontal: --> <hr WIDTH=30% ALIGN=RIGHT NOSHADE> <FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</font> HTML automaticamente adiciona uma linha em branco extra antes e depois de um cabeçalho. Assim como também adiciona essa linha antes e depois de um parágrafo. O atributo NOSHADE da tag <hr> deixa sem efeito tridimensional a linha horizontal a ser inserida. 4. HTML Links HTML usa a tag <a> (âncora) para criar um link para um outro documento. Uma âncora pode apontar para diversos destinos na Web: uma página HTML, uma imagem, um arquivo de som, um vídeo, etc. A sintaxe básica para criar uma âncora é: <a href="url">nome do texto a ser pressionado</a> Esta âncora define um link para uma outra página qualquer do site, no caso, o exemplo abaixo define um link para a página pagina2.htm : <a href="../pagina2.htm">página 2</a> Esta âncora define um link para o site do PET computação: <a href="http://www.pet.ufrgs.br/computacao">visite o site do PET!</a> Por padrão, um link abre sempre na mesma janela. Para alterar isso, temos o atributo TARGET que pode ser usado quando desejamos abrir a página em uma nova janela, por exemplo. TARGET="_blank" 5. Listas em HTML Listas Não Numeradas, essa lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):

5 <UL TYPE=CIRCLE> <LI>Item um <LI>Item dois </UL> Como vai aparecer no Navegador: Item um Item dois Listas Numeradas, através do atributo TYPE pode-se lidar com a numeração dos itens: <OL TYPE=I> <LI>Documentos básicos <LI>Documentos avançados <OL TYPE=a> <LI>formulários <OL TYPE=i> <LI>CGI </OL> <LI>contadores <LI>relógios </OL> <LI>Detalhes sobre imagens </OL> Como vai aparecer no Navegador: I. Documentos básicos II. Documentos avançados a. formulários i. CGI b. contadores c. relógios III. Detalhes sobre imagens Listas de Glossário <dl> <dt>html</dt> <dd>linguagem de marcação de páginas</dd> <dt>java</dt> <dd>linguagem de programação</dd> </dl> Como vai aparecer no Navegador: HTML JAVA Linguagem de marcação de páginas Linguagem de programação 6. Images em HTML

6 Em HTML, imagens são definidas com a tag <IMG> Aqui temos um exemplo simples, onde definimos largura e altura da imagem a ser exibida: <p> Uma imagem: <IMG SRC="logotipo.gif" ALT="Logotipo" WIDTH="144" HEIGHT="50"> </p> Os atributos WIDTH="largura" HEIGHT="altura" não são necessários, porém uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas. O atributo ALT="descrição_da_imagem" também não é obrigatório, ele indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. Ainda temos os atributos BORDER e ALIGN: <IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento BORDER=4 > O atributo BORDER traça uma borda ao redor da imagem, e nós definimos sua largura. Já o atributo ALIGN define o alinhamento da imagem. 7. HTML Frames Com frames, você pode mostrar mais de uma página HTML na mesma janela do navegador. Cada página HTML é chamada frame, e cada frame é independente dos outros. 7.1 Frameset Tag A marcação <frameset> define como dividir a janela em frames. Cada frameset define um conjunto de linhas ou colunas 7.2 Frame Tag A tag <frame> define qual documento HTML colocar em cada frame Uma página com frames tem um texto fonte semelhante a: <HTML> <HEAD><TITLE>Página com Frames</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="frame_a.html" NAME="menu"> <FRAME SRC="frame_b.html" NAME="principal"> <NOFRAME> <BODY> <H2>Essa página usa frames e seu browser não suporta!</h2> </BODY> </NOFRAME> </FRAMESET> </HTML> No exemplo acima, temos a divisão da página em 2 colunas. É possível efetuar essa mesma divisão em linhas, com o atributo ROWS.

7 Há outros atributos que permitem um maior controle sobre a apresentação de uma página com frames, o FRAMEBORDER e SCROLLING. Veja no exemplo abaixo: <FRAMESET ROWS="15%, 70%, 15%" FRAMEBORDER="no"> <FRAME SRC="banner.html" SCROLLING="no"> <FRAME SRC="principal.html"> <FRAME SRC="rodape.html SCROLLING="no"> </FRAMESET> É interessante o uso de Frames para apresentar conjuntos de páginas com um índice fixo para a navegação. Porém é preciso ter cuidado no controle da navegação, evitando que o acionamento de links não leve o leitor a ver seu browser criar frames dentro de frames, gerando uma grande confusão. As desvantagens de usar frames são: Sempre ter que manter vários documentos HTML para uma mesma página Dificuldades na impressão de uma página inteira Exercício 1 Criar um modelo de página, em HTML, como mostrado ao lado treinando o uso de frames. 8. Tabelas A alternativa natural para não usarmos frames são as tabelas. As tags <TABLE>...</TABLE> delimitam uma tabela. As tags <CAPTION>...</CAPTION> definem o título da tabela. A tabela é dividida em linhas (com a tag ), e cada linha é dividida em células (com a tag <TD>). As letras TD significam "table data" as quais é o conteúdo de uma célula. Ainda temos a tag <TH> que define um cabeçalho para colunas ou linhas (dentro de ). Uma célula pode conter texto, imagens, listas, parágrafos, formulários, tabelas, etc. Como primeiro exemplo temos a tabela abaixo: <TABLE BORDER=4> <CAPTION>Primeiro exemplo</caption> <TH>Coluna 1</TH><TH>Coluna 2</TH> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD> <TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD> </TABLE> Como será mostrado no navegador: Primeiro exemplo

8 Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna Títulos compreendendo mais de uma coluna ou linha É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=1> <TH COLSPAN=2>Colunas 1 e 2</TH> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD> <TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD> <TH ROWSPAN=3>3 linhas</th><td>uma linha</td> <TD>duas linhas</td> <TD>tres linhas</td> </TABLE> Colunas 1 e 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 uma linha 3 linhas duas linhas tres linhas Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3). 8.2 HTML Layout - Usando Tabelas É comum em HTML usar tabelas para a formatação de um layout de uma página. Nesse caso é usual utilizarmos o atributo <TABLE BORDER="0">. Uma tabela comum ajusta o tamanho de suas células ao conteúdo. Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado também a linhas e células. Essa largura pode ser definida em porcentagem (do espaço disponível) ou em pixels:

9 WIDTH=x% ou WIDTH=x Há dois atributos que permitem o controle de espaçamento em tabelas: CELLPADDING= x, espaço entre o texto e as bordas da célula CELLSPACING= x, espaço entre células Ainda temos os atributos de cores: BGCOLOR cor de fundo BORDERCOLOR cor da borda Esses atributos de cores podem ser usados em toda tabela, assim como apenas em linhas ou até mesmo células. Exercício 2 Criar o mesmo modelo anterior de página, em HTML, como mostrado ao lado, porém utilizando tabelas agora. 9. Folhas de Estilo em Cascata - CSS As folhas de estilo em cascata, CSS - Cascading Style Sheets foram um avanço interessante na linguagem HTML após a versão 3.2, elas permitem o uso de formatações uniformes em um site, de maneira bastante "econômica". Anteriormente, vimos que, para poder formatar um texto, era preciso escrever uma marcação parecida com: <h3><font face="arial" color="#4a7d7b">cabeçalho 3</font></h3> <p><font face="arial" size="2">um parágrafo</p> Com as folhas de estilo, podemos declarar estilos apropriados para seções de texto, aplicando esses estilos sem nos preocuparmos com detalhes de fontes, cor e tamanhos. A definição da folha de estilo deve ficar dentro de <HEAD>, da seguinte forma, se a folha for definida dentro do mesmo documento em que está sendo usada: <HEAD>... <STYLE TYPE="text/css"> P { font: 10pt Arial } H3 { color:#4a7d7b }.destaque { color: red } </STYLE>... </HEAD> Nesse caso a folha de estilo é definida no próprio documento HTML. Porém, ela pode, ainda, ser definida externamente. A grande vantagem é caso seja necessário modificar, algum dia, as cores de todos os títulos ou dos destaques ao longo dos textos de vários documentos html pertencentes à uma página web, com CSS simplesmente alteraríamos a folha de estilo, atualizando imediatamente a apresentação de todos os documentos que fazem referência a ela. Nesse caso, é criada a folha de estilo em outro documento e utilizamos a tag <LINK> nas páginas que queremos usar essa folha. <HEAD>

10 ... <LINK REL="stylesheet" TYPE="text/css" HREF="folha_de_estilo.css">... </HEAD> Como monstrado acima, uma mesma folha de estilo pode ser usada por vários documentos HTML, que também poderão ter suas próprias folhas de estilo internas. Exercício 3 Criar uma folha de estilo externamente, chamada estilo.css que utilizaremos posteriormente em nossas páginas. Formatar ao menos: - cor de fundo (corpo, tabelas, cabeçalhos) - fonte (cor, família, tamanho) - títulos, elementos de tabela, texto em geral 10. Formulários em HTML Um formulário é um modelo que permite ao usuário entrar com um conjunto de dados. O primeiro passo para fazer formulários é aprender as etiquetas que desenham as janelinhas de entrada de dados, para depois trabalharmos com os scripts, que são os programas que permitem a manipulação dos dados. Um formulário é definido pela tag <form>, que irá conter uma seqüência de elementos de entrada e de formatação do documento. <FORM> <INPUT> <SELECT> <TEXTAREA> </FORM> Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA> Input A tag mais usada em formulários é a tag <input>. O tipo de entrada é especificado com o atributo type. Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, que será utilizado posteriormente pelo script. Alguns dos tipos mais comuns estão apresentados abaixo: <form> Login: <INPUT type="text" NAME="login"> <br> Senha: <INPUT type="password" NAME="senha">

11 </form> Login: Senha: A maioria dos navegadores tem como largura padrão de um campo de texto 20 caracteres. Porém, com o atributo SIZE é possível definirmos o tamanho do campo. Também é possível delimitarmos o número de caracteres aceito no campo de dados com o atributo MAXLENGHT. Esses dois atributos apenas são válidos para campos TEXT e PASSWORD. Ainda temos o atributo VALUE que pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o usuário não preencher este campo, será adotado este valor padrão. Se o usuário quiser entrar dados, ele simplesmente apaga o que já estiver escrito e escreve suas informações Botões Radio escolha única Botões Radio são utilizados quando se quer selecionar apenas uma opção dentre várias. <form> <INPUT TYPE=RADIO NAME="sexo" VALUE="masculino">Masculino <br> <INPUT TYPE=RADIO NAME="sexo" VALUE="feminino" CHECKED>Feminino </form> Masculino Feminino Note que apenas uma opção pode ser escolhida. Podemos perceber, também, que o atributo NAME tem o mesmo nome, porém, conforme a opção escolhida, seu VALUE é diferente Checkboxes múltipla escolha Utilizamos Checkboxes quando queremos selecionar mais de uma opção dentre várias. <form> <INPUT TYPE=CHECKBOX NAME="check" VALUE="propagandas" CHECKED> Quero receber propagandas por <br> <INPUT TYPE=CHECKBOX NAME="check" VALUE="atualizacoes" CHECKED> Quero receber atualizações por </form> Quero receber propagandas por Quero receber atualizações por

12 10.4 Select A tag <SELECT> define uma seleção entre um conjunto de opções oferecidas ao usuário, estas opções são definidas na tag <OPTION>. Veja o exemplo abaixo: <SELECT> <OPTION value ="amarelo">amarelo</option> <OPTION value ="azul">azul</option> <OPTION value ="verde">verde</option> <OPTION value ="vermelho">vermelho</option> </SELECT> Podemos definir o tamanho na tag <option> com o atributo SIZE ou também com o atributo SELECTED definir qual campo estará inicialmente selecionado. O padrão é que esteja selecionado o primeiro campo TextArea A tag <TEXTAREA> define um campo texto, geralmente utilizado para comentários. Com os atributos COLS e ROWS definimos o tamanho do campo. Veja o exemplo abaixo: <FORM> <TEXTAREA COLS=40 ROWS=5 NAME="comentario">[comentários]</TEXTAREA> </FORM> 10.6 Botões de ação O atributo TYPE igual a SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor, ou seja, quando o usuário clicar no botão "Enviar", todo o conteúdo do formulário é enviado para um outro arquivo. <FORM> <INPUT TYPE=SUBMIT VALUE="Enviar"> </FORM>

13 Ainda podemos ter o atributo TYPE igual a RESET que restaura os valores iniciais das entradas de dados. <INPUT TYPE=RESET VALUE="Apagar!"> Exercício 4 Criar um conjunto de 3 páginas: - página inicial com Nome e Senha (index.html); - página com formulário de cadastro (form.html); - página de agradecimentos (obrigado.html). Formulário deve conter: Nome, Sexo, Endereço, Cidade, Estado, CEP, , Telefone Fixo, Celular, Fax, Profissão, Cliente(sim,não), Interesse(Esportes, Informática, Carros, Aventura, Riqueza Material, Cabelos Longos, Luz de Velas, Drogas, Pornografia).

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

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

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

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

> 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

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

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

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

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário

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

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

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

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

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

INTRODUÇÃO 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

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

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

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form
...
form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

Programação 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

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

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

Leia mais

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

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

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

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

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

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

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

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

Web Design Aula 09: Formulários

Web Design Aula 09: Formulários Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um

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

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

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

Comandos Básicos de HTML

Comandos Básicos de HTML Comandos Básicos de HTML Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do windows(notepad) ou um outro editor de texto como Notepad++, Geany ou PSPAD. Para fazer você

Leia mais

Programação e Designer para WEB

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

Leia mais

Programação 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

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

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web Parte III - Hypertext

Leia mais

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de

Leia mais

Curso de HTML. Rone Ilídio

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

Leia mais

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

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

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.).

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). HTML Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). Para se criar um novo documento HTML pode-se utilizar o Bloco de Notas, bastando para tal gravar o documento com

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

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

Leia mais

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

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

Leia mais

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

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

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

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

Leia mais

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

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

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

Leia mais

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

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

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

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

Leia mais

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

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem HTML Listas e Formulários @wre2008 1 Sumário Listas Revisão da tag Criação de formulários HTML @wre2008 2 Listas As listas são utilizadas para citar, numerar

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

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

1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout:

1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout: Exercícios: 1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout: a) O cabeçalho Sistema de Órgãos Colegiados deve ter tamanho 3 e ficar centralizado. b) Após o cabeçalho incluir

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Fevereiro de 2012 Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML... 3 2 EDIÇÃO DE DOCUMENTOS

Leia mais

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

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

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

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

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Março de 2007 Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML...3 2 EDIÇÃO DE DOCUMENTOS

Leia mais

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

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

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

Formulário (Send & Recieve) Prof. Celso H. Masotti

Formulário (Send & Recieve) Prof. Celso H. Masotti Formulário (Send & Recieve) Prof. Celso H. Masotti O Send e o Recieve A partir desse momento os exercícios serão realizados com dois arquivos, um de envio de dados (send) e o que recebe esse dados (recieve)

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

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML... 3 2 EDIÇÃO DE DOCUMENTOS

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

TECNOLOGIAS WEB AULA 7

TECNOLOGIAS WEB AULA 7 TECNOLOGIAS WEB AULA 7 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de formulários em HTML. Compreender as principais estruturas formadas com as

Leia mais

Sumário 1. O QUE É HTML?... 4 1.1 O QUE É QUE ESTÁ DENTRO DE UM ARQUIVO HTML?... 4 1.2 COMO É QUE O NAVEGADOR FAZ A APRESENTAÇÃO DAS PÁGINAS?...

Sumário 1. O QUE É HTML?... 4 1.1 O QUE É QUE ESTÁ DENTRO DE UM ARQUIVO HTML?... 4 1.2 COMO É QUE O NAVEGADOR FAZ A APRESENTAÇÃO DAS PÁGINAS?... Sumário 1. O QUE É HTML?... 4 1.1 O QUE É QUE ESTÁ DENTRO DE UM ARQUIVO HTML?... 4 1.2 COMO É QUE O NAVEGADOR FAZ A APRESENTAÇÃO DAS PÁGINAS?... 4 1.3 QUEM É RESPONSÁVEL PELA DEFINIÇÃO DOS PADRÕES DA WEB?...

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz

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

Leia mais

Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos

Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos Internet Prof. Ricardo Argenton Ramos www.univasf.ed.br/~ricardo.aramos O que é Internet? A Internet é uma rede capaz de interligar todos os computadores do mundo. O que faz a Internet tão poderosa assim

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

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML

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

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam

Leia mais

OURO MODERNO www.ouromoderno.com.br. Web Designer APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Web Designer APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Web Designer APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 HTML... 3 Tags... 4 Estrutura de uma Página HTML... 4 Cores e fontes... 7 Código Hexadecimal de uma cor...

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

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

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

Leia mais

A estrutura de um documento HTML apresenta os seguintes componentes:

A estrutura de um documento HTML apresenta os seguintes componentes: A estrutura de um documento HTML apresenta os seguintes componentes: Titulo do Documento texto, imagem, links,... As etiquetas HTML não são sensíveis

Leia mais

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

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

Leia mais

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

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

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

Leia mais

Web Design Aula 01. No Caderno Responda as Questões abaixo

Web Design Aula 01. No Caderno Responda as Questões abaixo Aula 01 1 O que é Web Design? 2 Qual a diferença entre Web Design e Web Designer? 3 O que são Sites ou Páginas? Cite 3 tipos de Sites. 4 O que é um Navegador? 5 O que são Servidores e o que são Protocolos?

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

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

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para

Leia mais

André Kawamoto NE31A

André Kawamoto NE31A André Kawamoto NE31A Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes Internet x WWW Internet e World

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

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

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

Leia mais

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

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

Leia mais

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

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

Leia mais

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

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais