OPERAÇÃO DE SOFTWARE E APLICATIVOS

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

Download "OPERAÇÃO DE SOFTWARE E APLICATIVOS"

Transcrição

1 OPERAÇÃO DE SOFTWARE E APLICATIVOS 1

2 SUMÁRIO 1 INTRODUÇÃO A WEB O QUE É A WORLD WIDE WEB? COMO FUNCIONA A WWW? SERVIDORES WEB BROWSERS PADRÕES DA WEB O QUE É O HTML? EXTENSÃO.HTM OU.HTML? O QUE É LINGUAGEM DE MARCAÇÃO? ELEMENTOS E ATRIBUTOS ELEMENTOS ATRIBUTOS DAS TAGS ESTRUTURA DO HTML DOCTYPE DECLARATION ELEMENTO HTML ELEMENTO HEAD ELEMENTO TITLE ELEMENTO META ELEMENTO BODY TAGS HTML BÁSICAS CABEÇALHOS PARÁGRAFOS QUEBRAS DE LINHA COMENTÁRIOS EM HTML TAGS HTML BÁSICAS ELEMENTOS E SEUS ATRIBUTOS E VALORES ELEMENTO <META> ELEMENTO <BODY>

3 5.3 ATRIBUTO "align" FORMATAÇÃO DE TEXTO LIGAÇÕES DE HIPERTEXTO ("LINKS") LINKS INTERNOS LINKS LOCAIS OU RELATIVOS LINKS EXTERNOS ATRIBUTO TARGET LISTAS DO HTML LISTAS LISTAS NUMERADAS lista não numerada Listas HTML Definição TABELAS TABELA SIMPLES MODIFICANDO A APARÊNCIA DA TABELA ATRIBUTOS DE LINHAS E CÉLULAS MESCLANDO CÉLULAS FRAMES CRIANDO FRAMES REFERÊNCIAS

4 1 INTRODUÇÃO A WEB 1.1 O QUE É A WORLD WIDE WEB? A World Wide Web (WWW), conhecida como Web, é um sistema de informação que une dados de vários serviços de internet. Enquanto a internet refere-se aos componentes físicos da rede global, a Web refere-se ao corpo da informação compartilhada usando esta rede. 1.2 COMO FUNCIONA A WWW? A informação na Web é armazenada em documentos chamados páginas Web. As páginas Web são arquivos armazenados em computadores chamados servidores Web. Os computadores que leem páginas Web são chamados clientes Web. Clientes Web veem as páginas com um programa chamado navegador Web. 1.3 SERVIDORES WEB Os servidores Web têm um trabalho integral na INTERNET, aguardando sem descanso solicitações dos browsers Web. Que tipo de solicitações? De páginas web, imagens, sons, ou até mesmo filmes. Quando um servidor recebe uma solicitação de algum desses recursos, ele o encontra e então o envia para o browser 1.4 BROWSERS 4

5 São programas que você usa para acessar, visualizar e interagir com páginas Web. A Web permite que browsers de diferentes plataformas interpretem, formatem e exibam páginas Web. Exemplos de browsers são: Internet Explorer; Firefox; Chrome; Opera; Safari. 1.5 PADRÕES DA WEB Os padrões da Web não são feitos pela Netscape ou Microsoft. O corpo regulador da Web é o W3C. W3C significa World Wide Web Consortium. O W3C junta as especificações para os padrões da Web. Os padrões da Web mais essenciais são HTML 1.6 O QUE É O HTML? HTML (Hypertext Markup Language Linguagem de Formatação de Hipertexto). HTML não é uma linguagem de programação, é uma linguagem de marcação. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc.) na Web. O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos. 5

6 Elementos HTML são definidos usando tags (etiquetas) HTML. Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem. 1.8 EXTENSÃO.HTM OU.HTML? Quando você salva um arquivo HTML, você pode usar tanto a extensão.htm quanto.html. 1.9 O QUE É LINGUAGEM DE MARCAÇÃO? Uma linguagem de marcação é a linguagem usada para formatar páginas Web com texto e informações separadamente. Isto assegura que as páginas Web serão acessíveis de qualquer parte do mundo usando qualquer tipo de browser. 6

7 2. ELEMENTOS E ATRIBUTOS 2.1 ELEMENTOS Um elemento é uma estrutura semântica, composta de tag de abertura, conteúdo e tag de fechamento. Os documentos HTML são simples arquivos de texto que contêm "tags de marcação". Essas etiquetas definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica algumas de suas características: As "tags de marcação" do HTML são usadas para definir os elementos. As tags HTML escrevem-se utilizando os caracteres < e >, entre eles o nome do elemento e os seus atributos. A lista seguinte indica algumas de suas características: As "tags de marcação" do HTML são usadas para definir os elementos. As tags HTML escrevem-se utilizando os caracteres < e >, entre eles o nome do elemento e os seus atributos. A primeira tag do par é a tag de início (ou de abertura) e a segunda dopar é a tag de fim (ou de fechamento). Tudo o que se encontrar entre as tags de início e de fim fazem parte do conteúdo do elemento Em HTML as Tags devem ser escritas com letra pequena. A primeira tag do par é a tag de início (ou de abertura) e a segunda do par é a tag de fim (ou de fechamento). Tudo o que se encontrar entre as tags de início e de fim fazem parte do conteúdo do elemento 7

8 O fragmento apresentado a seguir é um elemento da linguagem HTML: <b> Este texto está em negrito</b> Repare nos aspectos seguintes deste fragmento: O elemento começa com a Tag de início (ou abertura): <b> O conteúdo do elemento <b> é apenas texto ("Este texto está em negrito") O elemento termina com a Tag de fim (ou de fecho): </b> O propósito da tag <b> é colocar o conteúdo do elemento HTML em negrito. 2.2 ATRIBUTOS DAS TAGS Tag é um código usado para marcar o início e, onde for requerido, o fim de um elemento HTML. Há, como exposto acima, tags de abertura e de fechamento. Uma tag de abertura é representada por sinal de menor ( < ), um nome de elemento HTML, e um sinal de maior ( > ) (ex. <p>) e deve ser colocada imediatamente antes do início do conteúdo do elemento. Uma tag de fechamento se diferencia de uma tag de abertura apenas por uma barra ( / ) antes do nome do elemento (ex. </p>) e deve ser colocada imediatamente após o fim do conteúdo do elemento Uma tag de fechamento se diferencia de uma tag de abertura apenas por uma barra ( / ) antes do nome do elemento (ex. </p>) e deve ser colocada imediatamente após o fim do conteúdo do elemento Os Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo após o nome do elemento, precedido de um espaço e é composto de 8

9 um nome de atributo, um sinal de igual (=) e um valor de atributo, cercado por aspas duplas ("). 9

10 3.ESTRUTURA DO HTML 3.1 DOCTYPE DECLARATION O primeiro elemento a aparecer em qualquer documento HTML deverá ser o DOCTYPE. Este indica ao browser qual a versão de HTML que está a ser utilizada e destaca-se dos restantes por aparecer em maiúsculas. O DOCTYPE contém um argumento fundamental, que é aquele em que se faz a especificação do DTD, Document Type Definition. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 3.2 ELEMENTO HTML Os elementos <html> e </html> delimitam o documento HTML. Alguns browsers esperam encontrá-los para identificarem o documento como HTML. 10

11 3.3 ELEMENTO HEAD Os elementos <head> e </head> demarcam a zona do cabeçalho que vai conter informação acerca do documento. Os elementos dentro do elemento head não deveriam ser exibidos por uma navegador. De acordo com o padrão da HTML, somente umas poucas tags são legais dentro da seção head. São elas: <base>, <link>, <meta>, <title>, <style>, e <script>. Existem diversos campos que podem estar dentro do cabeçalho, alguns exemplos: autor(es), titulo da página, palavras-chave, estilos a serem utilizados etc.. 11

12 3.4 ELEMENTO TITLE O Elemento <title> e </title> contém o titulo da sua pagina que irá aparecer na janela do browser. < title> 1º Site </title> 3.5 ELEMENTO META Este elemento tem como objetivo inserir as propriedades do documento, como por exemplo: Autor Data 12

13 Exemplo: < head> < title >1º Site< /title > < meta name="author" content= Luiz Faria" /> < meta name="date" content= 23/07/2011" /> < /head > 3.6 ELEMENTO BODY Aqui está todo o texto, imagens, tabelas e outros elementos que são aquilo que o utilizador vai ver na apresentação no browser da página de Internet. 13

14 4. TAGS HTML BÁSICAS As tags mais importantes na HTML são as tags que definem títulos, parágrafos e quebras de linha. 4.1 CABEÇALHOS Os cabeçalhos são definidos com as tags <h1> a <h6> e podem ser utilizadas para a demarcação dos títulos do seu texto. A <h1> define o cabeçalho maior. A <h6> define o título menor. <h1>este é um título</h1> <h2>este é um título</h2> <h3>este é um título</h3> <h4>este é um título</h4> <h5>este é um título</h5> <h6>este é um título</h6> A HTML automaticamente adiciona uma linha em branco extra antes e após um titulo. 14

15 4.2 PARÁGRAFOS Os parágrafos são definidos com a tag<p>. <p>este é um parágrafo</p> <p>este é outro parágrafo</p> A HTML adiciona automaticamente uma linha em branco extra antes e após um parágrafo. 4.3 QUEBRAS DE LINHA 15

16 A tag <br> é usada quando você quer terminar uma linha, mas não quer começar um novo parágrafo. A tag <br> força a quebra de linha onde quer que você a coloque. <p>este <br> é um para <br>grafo com quebras de linha</p> A tag <br> é uma tag vazia. Ela não tem tag de fechamento. Resultado do uso da tag <br> 4.4 COMENTÁRIOS EM HTML A tag de comentário é usada para inserir um comentário no código fonte HTML. Um comentário será ignorado pelo navegador. Você pode usar comentários para explicar o seu código, o que pode ajuda-lo quando você editar o código fonte numa data posterior. <!-- Este é um comentário --> Observe que você necessita de um ponto de exclamação após a chave de abertura, mas não antes da chave de fechamento. 16

17 4.5 TAGS HTML BÁSICAS 17

18 5 ELEMENTOS E SEUS ATRIBUTOS E VALORES 5.1 ELEMENTO <META> Durante alguns anos a utilização mais frequente da informação fornecida pelo elemento <meta> foi a criação de índices para sites de busca. Atualmente somente alguns buscadores ainda usam esta informação para indexar páginas,e os de maior sucesso ignoram este elemento. Alguns sistemas de busca (não muitos ) usam a informação contida nos elemento meta para indexar as páginas. No fragmento de código seguinte, o elemento <meta> contém uma breve descrição da página: <meta name="description" content= Apostila de OSA"> 18

19 Na parte do código abaixo o elemento <meta> contém uma palavraschave para indexar a página: <meta name="keywords" content="html, CSS "> ATRIBUTO - VALOR <meta name="keywords" content="html, CSS "> <meta name="description" content= Apostila de OSA"> <meta name="reply-to" content= web.com.br"> <meta name="author" content= LUIZ TADEU "> <meta http-equiv="refresh" content=" 5; url=http://www.novosite.com/"> DESCRIÇÃO Contém uma palavras-chave para indexar a página Contém uma breve descrição da página Especifica um endereço de para entrar em contato com o responsável pelo site. Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando" seu código fonte Redirecionando o visitante para outra página 5.2 ELEMENTO <BODY> Elemento <body> engloba o corpo do seu documento HTML. Ele possui muitos atributos que possibilitam modificar a aparência da sua página, como cor de fundo ou das letras. Todos os atributos a seguir tem seus valores definidos por cor e os argumentos são o nome ou o número de uma cor: 19

20 Bgcolor: define a cor de fundo de um documento Text: a cor do texto link: a cor dos links alink: a cor dos links ativos atualmente (a página que você está visitando) vlink: cor dos links já visitados 5.3 ATRIBUTO "ALIGN" Para o alinhamento dos elementos parágrafo, cabeçalho entre outros utilizamos o atributo align. ELEMENTO ATRIBUTO - VALOR DESCRIÇÃO <p align= left > Alinha o texto à esquerda <p align= right > Alinha o texto à direita <p align= center > Alinha o texto centralizado <p align= justify > Alinha o texto justificado 20

21 6 FORMATAÇÃO DE TEXTO A linguagem HTML define vários elementos para se formatar um texto, como por exemplo, escrever em negrito, itálico, sublinhado, etc.. TAG <b> <big> <i> <small> <strong> <sub> <sup> <ins> <del> DESCRIÇÃO Define seu texto em negrito Define seu texto grande Define seu texto em itálico Define seu texto pequeno Define seu texto forte Define seu texto subscrito Define seu texto sobrescrito Define texto inserido Define texto apagado 21

22 7. LIGAÇÕES DE HIPERTEXTO ("LINKS") Queremos que uma página HTML possa fazer referência a outras páginas html ou para qualquer outro tipo de arquivo que se encontrem outros lugares da web. Isso é feito de modo muito simples com o elemento a, como segue: <a href= > Geração Web</a> 7.1 LINKS INTERNOS Links internos são aqueles que ligam uma seção de uma página com uma outra seção da mesma página. Por exemplo, se eu quiser fazer uma referência para a seção Hipertexto dessa nossa apostila, basta que eu primeiro defina um nome para a seção Hipertexto e então adicione um link pra ela. Isso efeito da seguinte forma: 22

23 1 - Vou até o início da seção Hipertexto e adiciono o seguinte código, ao invés de simplesmente escrever o título da seção: <a name ="Hipertexto">Hipertexto</a> 2 - Adiciono o link pra essa seção com o seguinte código, <a href ="#Hipertexto">Vá para a seção hipertexto</a> O atributo Name serve apenas para dar um nome para uma posição de uma página html. O valor de name pode ser qualquer um (nesse caso eu coloquei "Hipertexto"). Quando você fizer uma referência a um link interno utilizando o atributo href, você precisa necessariamente adicionar o caractere # (jogo da velha) antes do nome da sua seção - no nosso caso, #Hipertexto - pois do contrário seu navegador tentará abri-lo como um link local. 7.2 LINKS LOCAIS OU RELATIVOS Links locais são aqueles que referenciam um arquivo que esteja no mesmo computador que a sua página. Links locais não contém o no início do endereço. Por exemplo, se no meu documento html eu quiser fazer um link para o arquivo links.html que está na mesma pasta do meu documento, não preciso digital o endereço completo, mas apenas: <a href = links.html ">Acesse os links!</a> Esse tipo de argumento para o href também é chamado de links relativos.se você quiser linkar uma página que esteja do diretório (pasta) superior da sua página, use dois pontos e uma barra antes do nome do arquivo: <a href="../links.html">acesse os links!</a> 23

24 A vantagem de você usar links relativos é que você pode mover todo o seu site para um novo endereço na internet e não precisar reeditar todos os links que apontam para páginas do seu próprio site. 7.3 LINKS EXTERNOS Links externos são aqueles que podem apontar para qualquer arquivo disponível na internet, como por exemplo: <a href="http://pt.wikipedia.org">acesse a Wikipédia!</a> Os links externos precisam necessariamente conter o prefixo e o endereço completo do arquivo. 7.4 ATRIBUTO TARGET Um atributo interessante para o elemento <a href> é o Target, que permite que o link seja aberto numa outra janela do seu navegador. <a href= target="_blank >Acesse a Wikipédia!</a> O argumento do atributo target é o nome da janela do navegador que abrirão link. VALOR DESCRIÇÃO _blank Abre em uma nova aba 24

25 25

26 8.LISTAS DO HTML 8.1 LISTAS Uma lista é uma coleção de itens relacionados. Você usa uma lista para organizar dados como uma sequência de passos ou itens em um grupo. O HTML fornece quatro tipos: Numeradas Não Numeradas Definição Intercaladas 8.2 LISTAS NUMERADAS Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>. Atributo START pode indicar o início da numeração da lista os itens da lista são marcados com números. 26

27 Valores 27

28 8.3 LISTA NÃO NUMERADA A lista não numerada é utilizada quando não há uma relação ou estrutura especifica entre os itens da lista. Sua sintaxe <ul></ul> é exibida na imagem acima. Este tipo de lista também pode ser chamada de nãoordenada. 28

29 8.4 LISTAS HTML DEFINIÇÃO A lista é uma lista de itens, com uma descrição de cada item. A tag <dl> define uma lista de definições. A tag <dl> é usado em conjunto com <dt> (define o item na lista) e <dd> (descreve o item na lista) 29

30 30

31 9. TABELAS As tabelas são perfeitas para organizar e apresentar dados de forma prática. É possível inserir texto, imagens ou links em tabelas, distribuindo melhor as informações em uma página. Este é um dos tópicos mais importantes, porque é imprescindível dominar bem o uso de tabelas para criar um bom layout html. Praticamente todas as páginas web utilizam recursos de tabela para diagramar seus elementos. Porém a utilização de estilos (CSS) para posicionamento de elementos na página está crescendo cada vez mais, e já existem páginas com layout muito bom sem o uso de tabelas, usando apenas CSS TABELA SIMPLES Como padrão uma tabela não possui bordas. Cada linha da tabela é definida separadamente e é possível modificar a aparência da tabela, utilizando alguns atributos que veremos mais adiante. O número de TR define o número de linhas na tabela e o número de TD (dentro da TAG TR) define o número de colunas da tabela. Sintaxe: <table> <tr> <th> cabeçalho da tabela</th> <td> dados da tabela</td> </tr> </table> 31

32 Onde: <table></table>: TAGs de início e fim de tabela. <tr></tr>: define cada linha da tabela; <th></th>: define o cabeçalho da tabela. É uma célula da tabela; <td></td>: define os dados da tabela. É uma célula na tabela; Dados da Tabela: podem ser texto, imagens e links; Cabeçalhos da Tabela: cabeçalhos com texto, imagens ou links MODIFICANDO A APARÊNCIA DA TABELA É possível definir alguns atributos para tabelas, como bordas, alinhamento do conteúdo, espaçamento entre as células, espaçamento entre os dados e a próxima célula, largura da tabela, etc. Sintaxe: Vejamos alguns desses atributos: <table border= n width= n% height= n% cellspacing= n cellpading= n bgcolor= #rrggbb > </table> Onde: BORDER= n : espessura da borda em pixels. WIDTH= n% : largura da tabela em relação ao browser, em pixels ou %; HEIGHT= n% : altura da tabela em relação ao browser, em pixels ou %; CELLSPACING= n : espaço entre uma célula e outra, em pixels; CELLADDING= n : espaço entre os dados e a borda da tabela, em pixels; BGCOLOR= #RRGGBB : cor de fundo das células da tabela. 32

33 9.3. ATRIBUTOS DE LINHAS E CÉLULAS Também é possível definir algumas propriedades de linhas e células individuais da tabela. Sintaxe: <tr align= posição bgcolor= #rrggbb valign= posição > <td align= posição valign= posição bgcolor= #rrggbb width= n% nowrap></td> </tr> Onde: ALIGN= posição : alinhamento horizontal do conteúdo da célula ou das células da linha. Pode ser left, right e center; BGCOLOR= #RRGGBB : define a cor de fundo das células da linha ou de uma célula individual; VALIGN= posição : alinhamento vertical de uma célula ou de células de uma linha; WIDTH= n% : largura de uma célula em pixels ou %; NOWRAP: indica ao browser que o texto da célula não pode ser dividido em mais de uma linha. A coluna inteirar terá o tamanho do texto escrito naquela célula; 9.4. MESCLANDO CÉLULAS 33

34 É possível através de atributos na tag TD mesclar células em uma mesma linha ou em uma mesma coluna. Para mesclar células em uma mesma linha usar o atributo COLSPAN na tag TD e para mesclar células em uma mesma coluna usar o atributo ROWSPAN na tag TD. Sintaxe: <td colspan= n >dados da tabela</td> <td rowspan= n >dados da tabela</td> Onde: COLSPAN= n : é o número de colunas que a célula ocupará; ROWSPAN= n : é o número de linhas que a célula ocupará; 34

35 10. FRAMES 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, processados no servidor e devolvidos ao usuário. O corpo de uma página Frame é diferente de uma página comum, e nesse arquivo só tem as dimensões das divisões e as páginas que iram aparecer em cada divisão. A estrutura básica do corpo de uma página com frame: <html> <head> <title>titulo da página</title> </head> <frameset cols="15%,85%"> <frame src="pagina1.html"> <frame src="pagina2.html"> </frameset> </html> CRIANDO FRAMES Para utilizar o recurso de frames, é preciso utilizar um conjunto de tags. Cada uma com sua função: 35

36 <FRAMESET> é utilizada para criar um conjunto de frames e seus elementos. É a tag principal para a criação de frames e precisa ser encerrada com </FRAMESET>; <FRAME> é utilizada para definir um frame (quadro) dentro de um conjunto de frames. Não necessita de tag de encerramento; Sintaxe: <frameset cols= COLUNAS,LARGURA rows= LINHAS,ALTURA frameborder= 1/0 framespacing= N border= N > <frame name= NOME src= url align= POSIÇÃO marginheight= ALTURA marginwidth= LARGURA scrolling= YES/NO noresize> </frameset> Onde: FRAMESET: tag de abertura de um conjunto de frames; COLS= colunas,largura : ROWS= linhas,altura : FRAMEBORDER= 1/0 : o valor 1 exibe uma borda 3D no frame, o valor 0 não exibe a borda; BORDER= n : define o tamanho da borda; FRAMESPACING= n : define um espaço em pixels entre os frames, nem todos os browsers reconhecem este atributo; FRAME: define cada quadro (frame) separadamente; NAME= nome : define o nome do frame; 36

37 SRC= URL : define a página que será exibida no frame; ALIGN= posição : define o alinhamento do conteúdo do frame. Posição pode ser: TOP: o conteúdo é alinhado no topo do frame; MIDDLE: o conteúdo é alinhado nomeio do frame; BOTTOM: o conteúdo é alinhado na base do frame; LEFT: o conteúdo é alinhado à esquerda do frame; RIGHT: o conteúdo é alinhado à direita do frame; MARGINHEIGHT= altura : define a altura da margem em pixels; MARGINWIDTH= largura : define a largura da margem em pixels; SCROLLING= yes/no/auto : define se o frame terá ou não barra de rolagem; NORESIZE: evita o redimensionamento do frame; 37

38 11. REFERÊNCIAS HTML Dinâmico. Ramalho, José Antônio Alves. Berkeley Brasil, A Arte Web. Site Sobre HTML, HTML Dinâmico e Design. (www.aarteweb.com.br). Tutorial HTML. Tutorial mantido pela USP desde (www.icmc.usp.br/manuals/html). 38

> 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

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

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

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

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

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

MÓDULO 1 - xhtml Básico

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

Leia mais

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

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

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

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

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

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

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

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

Claudio Damasceno. Avançar

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

Leia mais

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

Links e Frames José Antônio da Cunha

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

Leia mais

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

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

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

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

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

Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br)

Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Introdução A HyperText Markup Language e a Web No núcleo de toda página da Web, encontramos a HyperText Markup

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

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)

Leia mais

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

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

Leia mais

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

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

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

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

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

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

Introdução ao HTML Hypertext Markup Language

Introdução ao HTML Hypertext Markup Language Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do

Leia mais

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

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

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

Programação HTML Construção de Páginas para WEB 47

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

Leia mais

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

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

Aplicativos para Internet Aula 01

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

Leia mais

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

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

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.

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

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

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

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

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 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre

Leia mais

Tags estruturais Cria um comentário Envolve todo um documento html 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

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

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

Leia mais

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

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

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

Leia mais

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

Como criar uma página WEB

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

Leia mais

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

Síntese da aula anterior

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

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço

Leia mais

3 HTML Tabelas, frames e formulário

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

Leia mais

Desenvolvimento em Ambiente Web. HTML - Introdução

Desenvolvimento em Ambiente Web. HTML - Introdução Desenvolvimento em Ambiente Web HTML - Introdução O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas,

Leia mais

Apostila de XHTML Curso de Internet Professor Rinaldo Demétrio

Apostila de XHTML Curso de Internet Professor Rinaldo Demétrio Conteúdo XHTML - Por quê?... 2 Porque XHTML?... 2 Diferenças Entre XHTML e HTML... 3 Como Preparar-se para a XHTML... 3 As Diferenças Mais Importantes:... 3 Os Elementos Devem Estar Devidamente Aninhados...

Leia mais

2 HTML Inserindo objetos

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

Leia mais

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

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

Web Design Aula 02: HTML

Web Design Aula 02: HTML Web Design Aula 02: HTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando

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

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Aprofundando nos elementos básicos do HTML; --Criando Hiperlinks em HTML; 2 Estrutura básica de um documento

Leia mais

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

Introdução a Tecnologia Web Desenvolvimento e Manutenção de Site

Introdução a Tecnologia Web Desenvolvimento e Manutenção de Site Tecnologia Educacional na Formação Profissionalizante de Jovens Introdução a Tecnologia Web Jovens do Saber Digital Inclusão Sócio-Digital Fortaleza - Ceará, Brasil Sumário 1. O que é a Internet? 2. O

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

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 No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

Introdução ao HTML 5 e Implementação de Documentos

Introdução ao HTML 5 e Implementação de Documentos Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

HyperText Markup Language HTML

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

Leia mais

Dicas básicas de marcação de HTML Hyper Text Markup Language / Linguagem de Marcação de Hipertexto

Dicas básicas de marcação de HTML Hyper Text Markup Language / Linguagem de Marcação de Hipertexto Hyper Text Markup Language / Linguagem de Marcação de Hipertexto - Linguagem de marcação utilizada para estruturar documentos de texto e de multimídia e criação de links de hipertexto entre documentos.

Leia mais

Autoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Autoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza 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 Apresentar

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

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

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

Leia mais

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

Guia Prático de HTML

Guia Prático de HTML Guia Prático de HTML Este Guia foi escrito por Tiago Daniel de Souza Email: tiagocopa [at] gmail [dot] com Site do Autor: This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike

Leia mais

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

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

Leia mais

Afinal o que é HTML?

Afinal o que é HTML? Aluno : Jakson Nunes Tavares Gestão e tecnologia da informacão Afinal o que é HTML? HTML é a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste

Leia mais

Programação para a Web - I. José Humberto da Silva Soares

Programação para a Web - I. José Humberto da Silva Soares Programação para a Web - I José Humberto da Silva Soares Fundamentos de Internet Rede Mundial de Computadores; Fornece serviços, arquivos e informações; Os computadores que têm os recursos são chamados

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO

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

Leia mais

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

XHTML 1.0 DTDs e Validação

XHTML 1.0 DTDs e Validação XHTML 1.0 DTDs e Validação PRnet/2012 Ferramentas para Web Design 1 HTML 4.0 X XHTML 1.0 Quais são os três principais componentes ou instrumentos mais utilizados na internet? PRnet/2012 Ferramentas para

Leia mais

Introdução ao HTML. Sumário

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

Leia mais

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

WEB DESIGNER WEB DESIGNER

WEB DESIGNER WEB DESIGNER WEB DESIGNER 1 WEB DESIGNER INICIO DO CURSO DE HTML 4.0 Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador

Leia mais

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

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

Leia mais

Aplicação para Web I. Começando a compreender o HTML

Aplicação para Web I. Começando a compreender o HTML Aplicação para Web I Começando a compreender o HTML A Linguagem da WEB O HTML ou HyperText Markup Language linguagem universal compreendida pelos navegadores web (browsers) para a comunicação utilizando

Leia mais

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é : TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz

Leia mais

PROGRAMAÇÃO PARA INTERNET HTML

PROGRAMAÇÃO PARA INTERNET HTML PROGRAMAÇÃO PARA INTERNET HTML Prof. Rafael Gross INTRODUÇÃO Quando acessamos uma página web, estamos interessados na informação contida nessa página. Essa informação pode estar na forma de texto, imagem

Leia mais

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000

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

Leia mais

Webdesign A tag HEAD e as Meta tags

Webdesign A tag HEAD e as Meta tags Webdesign A tag HEAD e as Meta tags Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net HEAD Como vimos anteriormente, o nosso documento HTML é

Leia mais