WEB DESIGN / 6º SEMESTRE INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

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

Download "WEB DESIGN 2010-2011 / 6º SEMESTRE INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING"

Transcrição

1 WEB DESIGN / 6º SEMESTRE INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

2 DISTRIBUIÇÃO CONTEÚDOS PROGRAMÁTICOS AULA 04 / TEORIA STORYBOARDS Elementos de um storyboard; Exemplos práticos. METODOLOGIAS E PRÁTICAS: BANNERS Estrutura, navegação e cenas; Exemplos práticos. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

3 DISTRIBUIÇÃO CONTEÚDOS PROGRAMÁTICOS AULA 04 / PRÁTICA INTRODUÇÃO AO HTML BROWSERS O HTML Contextualização As TAGS A estrutura básica do documento (Definições Globais) Formatação Hiperligações Inserir Imagens Inserir Imagens com hiperligações Organização de ficheiros INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

4 STORYBOARDS CONCEITO E IDEIA CONCEITO (concept) IDEIA (idea) INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

5 EQUIPA CRIATIVA A DUPLA COPYWRITES (words) ART DIRECTOR (pictures) INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

6 STORYBOARDS CONCEITO E IDEIA CONCEITO (concept) = IDEIA (idea) O que vem a seguir à estratégia e antes da produção INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

7 STORYBOARDS CONCEITO E IDEIA Thumbnails; Rascunhos Composição (comps) Desenhos preliminares (scamps) THINK NOW AND DESIGN LATER! Os rascunhos, registos rápidos, esboços... são úteis nesta fase porque o trabalho acaba por ser julgado pelo conteúdo em si e não pelo seu aspecto. Este tipo de desenho/registo rápido é muito usado em apresentações e sessões de brainstorming. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

8

9 LIVRO: The Advertising Concept Book, Pete Barry Nikon (Scali, McCabe, Sloves)

10 LIVRO: The Advertising Concept Book, Pete Barry The Economist (Abbot Mead Vickers BBDO)

11

12 LIVRO: The Advertising Concept Book, Pete Barry Super: Use condoms (Duval Guillaume Antwerp)

13

14 LIVRO: The Advertising Concept Book, Pete Barry Apple s Think Different. (TBWA/ Chiat/Day)

15

16 LIVRO: The Advertising Concept Book, Pete Barry Natan Jewelry (F/Nazca Saatchi & Saatchi)

17

18

19 LIVRO: The Advertising Concept Book, Pete Barry I m a Mac, and I m a PC (TBWA/Chiat/Day)

20

21

22 LIVRO: The Advertising Concept Book, Pete Barry Dove as spokesperson for real beauty (Ogilvy)

23

24 LIVRO: The Advertising Concept Book, Pete Barry (R/GA)

25

26 LIVRO: The Advertising Concept Book, Pete Barry Levi s (Antirom)

27 LIVRO: The Advertising Concept Book, Pete Barry Hawlett-Packard (Goodby, Silverstein & Partners)

28 METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS Na essência da Internet está a navegação hipertextual. Faz referência a textos que podem ser explorados/ navegados por meio de uso de hiperligações. O elemento central de um sistema hipertextual é a vinculação não-linear de pedaços de informação, a que denominamos nodos ou nó (cada ponto de inter-conexão de uma estrutura ou rede). Na navegação hipertextual, seleccionar um hiperlink conduz-nos do nó actual a outro nó tematicamente relacionado. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

29 METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS Para efeitos prático: NÓ CENA Uma parte de um gráfico, uma unidade temática que pode ser lida e interpretada de forma autónoma, mesmo que precise das cenas contíguas (imediatas ou próximas) para proporcionar o significado completo. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

30 METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS Existem dois tipos de estruturas para organizar conteúdos na visualização interactiva da informação: HORIZONTAL VERTICAL Raramente se encontram exemplos onde ambos aparecem de forma pura. O mais usual é encontrarmos exemplos onde uma delas é predominante. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

31 METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS ESTRUTURAS HORIZONTAIS São próprias de explicações passo a passo. INTRODUÇÃO CENA 1 CENA 2 CENA 3 CENA 4 Utiliza-se esta forma para situações onde é necessário dispor a informação em linha temporal numa sequência onde se pode navegar simplesmente com botão de avançar e/ou retroceder, e às vezes com outras opções que dão acesso directo a cada uma das partes (etiquetadas numericamente ou alfabeticamente, por exemplo). INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

32 METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS ESTRUTURAS VERTICAIS (ou em profundidade) Assume a forma dos ramos de uma árvore. Dentro de cada cena existem múltiplas possibilidades de navegação. Esta classe de infografia tende a ser mais manipulável e exploratória e não-linear. INTRODUÇÃO CENA 1 ROLLOVER 1 ROLLOVER 2 ROLLOVER 3 ROLLOVER 4 CENA 2 CENA 3 ITEM 1 (360º) ITEM 2 ITEM 3 (360º) ITEM 4 ITEM 5 (ZOOM) INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

33 METODOLOGIAS E PRÁTICAS: BANNERS ESTRUTURA, NAVEGAÇÃO E CENAS ESTRUTURAS MISTAS Existem ocasiões onde se torna necessário utilizar estruturas do tipo misto horizontal/vertical onde o uso de botões rollover, por exemplo, acrescenta dados adicionais em algumas das cenas, sem que os elementos informativos que revelam possam ser considerados cenas por si mesmo. INTRODUÇÃO CENA 1 CENA 2 CENA 3 CENA 4 ITEM 1 CENA 2 CENA 3 Estrutura mista com predominância horizontal INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49 INTRODUÇÃO AO HTML BROWSERS Um dos maiores desafios de desenhar para a Web é saber lidar com o vasto leque de opções disponíveis no mercado, porque cada browser renderiza a informação disponível no código de formas diferentes. Isto acontece porque cada browser possui internamente a sua folha de estilo que determina a forma como cada elemento aparece por defeito. Actualmente os browsers já têm um melhor suporte para os standards web, estabelecidos pelo W3C (World Wide Web Consortium). DESAFIO CROSS-BROWSER Objectivo: uma página web com a mesma aparência em browsers diferentes. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

50 INTRODUÇÃO AO HTML BROWSERS > COMO LIDAR COM VERSÕES DIFERENTES DE BROWSERS Não nos preocupar-mos com pequenas coisas: Como Web Designers, devemos habituar-nos a permitir um certo grau de variações. É a natureza do média! Seguir os standards da Web: Seguir as regras do (X)HTML para a estrutura do documento e as CSS para a apresentação dos conteúdos. A importância de uma boa marcação (markup): Quando um documento (X)HTML é escrito numa ordem lógica e os seus elementos são marcados de uma forma significativa, ele vai ser correctamente apresentado numa vasta gama de versões e browsers diferentes. O importante é que o conteúdo esteja disponível. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

51 INTRODUÇÃO AO HTML O HTML > CONTEXTUALIZAÇÃO HTML - HYPER TEXT MARKUP LANGUAGE O QUE É? Uma linguagem de marcação de hipertexto, que descreve documentos que contenham texto, imagens, hyperlinks, etc. A linguagem básica da World Wide Web. A maioria dos documentos que encontramos na Internet está escrito em HTML. As regras desta e de outras linguagens de programação é definida pelo Word Wide Web Consortium (w3c) - A formatação, quer seja de forma a enfatizar o texto através da inclusão de negritos, itálicos ou dimensões das letras, quer seja de forma a incluir imagens ou se trate de definir o posicionamento de todos os elementos é feita com recurso a tags. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

52 INTRODUÇÃO AO HTML O HTML > CONTEXTUALIZAÇÃO XHTML - EXTENSIBLE HYPER TEXT MARKUP LANGUAGE O QUE É? Reformulação do HTML 4.01 como uma aplicação do XML. O HTML possui um conjunto de objectos (tags) limitado, que deve ser aplicado aos documentos para torná-los "apresentáveis" na Web, ou seja, se as tags estiverem erradas, os browsers não exibirão a página como a desenha-mos. O XHTML é, de facto, uma novas versão do HTML4.0, e poderia ser considerado o passo para a evolução seguinte: o HTML 5. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

53 INTRODUÇÃO AO HTML O HTML: AS TAGS Uma tag é uma palavra-chave (relevante) ou termo associado a uma informação, que a descreve e permite uma classificação da informação baseada em palavras-chave. OU SEJA: - Um esquema de classificação; - Usado em grande escala nos sites de conteúdos colaborativos (Web 2.0); - Tagging ; - Rótulos; - Legendas As tags são códigos que circundam a área a formatar e que estão contidas em braquetas < >. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

54 INTRODUÇÃO AO HTML O HTML: AS TAGS TAG DE ABERTURA <tag> TAG DE FECHO </tag> EXEMPLO <tag>este texto é o que quero formatar</tag> Desta forma conseguimos marcar o início e o fim da formatação. Cada tag tem dois elementos: o inicial e o final. Por exemplo, quando queremos formatar uma parte de um texto a negrito, indicamos qual a parte que queremos formatar. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

55 INTRODUÇÃO AO HTML ESTRUTURA DE UM DOCUMENTO HTML (DEFINIÇÕES GLOBAIS) A estrutura de um documento HTML é muito simples: consiste numa marca (tag) exterior <html> que engloba o cabeçalho e o corpo do documento. À parte de algumas excepções, as tags que abrem devem ser fechadas usando /. CÓDIGO HTML <html> <head> <title>título do documento HTML</title> </head> <body>conteúdo do documento HTML</body> </html> INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

56 INTRODUÇÃO AO HTML ESTRUTURA DE UM DOCUMENTO HTML (DEFINIÇÕES GLOBAIS) O cabeçalho e corpo do documento são representados pelas marcas <head> e <body>, respectivamente. CABEÇALHO No cabeçalho é incluído o título e outros parâmetros a passar pelo browser, ou seja, contém a formatação global do documento. Identifica em que linguagem o documento está escrito (HTML ou XHTML). BODY No corpo é incluído os conteúdos a apresentar, e as tags de controlo que indicam ao browser como proceder à sua apresentação. Ou seja, contém o documento propriamente dito e todas as tags que formatam o seu conteúdo (o que vai ser exibido no browser). INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

57 INTRODUÇÃO AO HTML ESTRUTURA DE UM DOCUMENTO HTML (DEFINIÇÕES GLOBAIS) O conteúdo inserido entre <title> e </title> aparece na barra de título do browser. O conteúdo apresentado ao utilizador na janela de browser é o que está entre as marcas <body> e </body>. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

58 INTRODUÇÃO AO HTML HTML: FORMATAÇÃO A formatação dos elementos que fazem parte de um layout da página é feita por tags. As tags não são elementos isolados de formatação, pois por vezes é necessário uma especificação mais pormenorizada daquilo que pretendemos. EXEMPLO: se quisermos alinhar um parágrafo de texto, não basta indicarmos que estamos na presença de um parágrafo, é necessário acrescentar à tag de parágrafo o atributo de alinhamento. <p align= center >Texto que quero alinhar ao centro</p> Os atributos são sempre colocados a seguir à tag. Neste caso a tag <p> define um parágrafo onde acrescentamos um atributo, neste caso align, e o valor do atributo, = center. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

59 EXEMPLO PARÁGRAFO COM ALINHAMENTO DE TEXTO AO CENTRO <p align= center >Texto que quero alinhar ao centro</p> HTML QUE CONTÉM UMA TAG, COM UM DETERMINADO ATRIBUTO QUE POR SUA VEZ TEM ASSOCIADO A ELE UM VALOR

60 INTRODUÇÃO AO HTML HTML: FORMATAÇÃO Os atributos podem ou não ter um valor. No caso de serem utilizados apenas para indicar qualquer coisas, o valor é omisso. Quando se especificam valores deve ser colocado um sinal de = e imediatamente a seguir o valor do atributo contido entre aspas. As tags de fecho nunca têm atributos ou seja as especificações dadas pelos atributos são apenas incluídas nas tags de abertura. <p align= center >Texto que quero alinhar ao centro</p> INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

61 INTRODUÇÃO AO HTML HTML: FORMATAÇÃO O texto pode ser formatado inserindo-o entre tags adequadas. NEGRITO <b> </b> ITÁLICO <i> </i> SOBRESCRITO <sup> </sup> Todas os tags devem ter o fecho correspondente. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

62 EXEMPLO <html> <body> <b>este texto aparece a negrito</b> <i>este texto aparece em itálico</i> O texto seguinte aparece<sup>sobrescrito</sup> E este aparece<sub>subrescrito</sub> </body> </html> HTML COM TAGS DE FORMATAÇÃO DE TEXTO

63 INTRODUÇÃO AO HTML HTML: FORMATAÇÃO SEPARAR LINHAS NO TEXTO PARÁGRAFO <br/> QUEBRA DE LINHA <p> </p> Introduz uma mudança de linha com um espaçamento maior do que o introduzido pela tag <br/> INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

64 EXEMPLO <html> <body> <p>esta linha e a seguinte não aparecem separadas</p> <p>esta linha e a seguinte</p> <p>já aparecem separadas</p> Esta linha e a seguinte<br/>também embora com um espaço mais pequeno. </body> </html> HTML COM TAGS DE SEPARAÇÃO DE LINHA

65 INTRODUÇÃO AO HTML HTML: FORMATAÇÃO CABEÇALHOS Os cabeçalhos têm 6 valores diferentes e cada um dos quais origina 6 tags diferentes. TAGS h1, h2, h3, h4, h5 e h6 A primeira corresponde ao cabeçalho maior e a última ao menor. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

66 EXEMPLO <html> <body> <h1>isto é um cabeçalho.</h1> <h2>isto é um cabeçalho.</h2> <h3>isto é um cabeçalho.</h3> <h4>isto é um cabeçalho.</h4> <h5>isto é um cabeçalho.</h5> <h6>isto é um cabeçalho.</h6> </body> </html> HTML COM TAGS DE CABEÇALHO

67 INTRODUÇÃO AO HTML HTML: FORMATAÇÃO TIPO DE LETRA, TAMANHO E COR Para a estilização do texto utilizamos o parâmetro style na tag <p>. CÓDIGO HTML <p style= font-family: verdana; font-size: 100%; color:blue > Ao parâmetro: font-family atribui-se o valor: Verdana Ao parâmetro; font-size atribui-se o valor 100% Ao parâmetro; color atribui-se o valor blue INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

68 EXEMPLO <html> <body> <p>o texto da linha seguinte</p> <p style="font-family:verdana; font-size:100%; color:blue"> aparece formatado com outra cor e fonte</p> </body> </html> HTML COM TAGS DE FORMATAÇÃO DE TIPO DE LETRA, TAMANHO E COR INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

69 INTRODUÇÃO AO HTML HTML: FORMATAÇÃO TIPO DE LETRA, TAMANHO E COR Em HTML, as cores podem ser especificadas através de: Nomes constantes predefinidos: red, blue, green... Formatos RGB (quantidade de red, green e blue) com valor hexadecimal 6 dígitos, organizados em pares de 00 a FF - #RRGGBB). INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

70 EXEMPLO <p style="color:#ff0000; margin-left:20px">isto é um parágrafo</p> HTML COM TAGS DE FORMATAÇÃO DE COR E MARGEM

71 INTRODUÇÃO AO HTML HTML: FORMATAÇÃO LISTAS A formatação de listas é uma das componentes fundamentais na formatação de textos. As listas que se inserem em páginas web são essencialmente de dois tipos, cada uma delas com tags diferentes: OL Listas Ordenadas. Estruturam os itens através de numeração ou alíneas. UL Listas Desordenadas. Estruturam tópicos sem ordem específica através de pequenos ícones. Cata item, em qualquer uma das listas, é precedida pela inserção pontual da tag Li (item de lista) INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

72 INTRODUÇÃO AO HTML HTML: HIPERLIGAÇÕES As hiperligações podem apontar para um ficheiro do mesmo sítio ou para um local qualquer na Internet. Numa hiperligação torna-se necessário definir o destino e o texto apresentado ao utilizador na janela do browser. CÓDIGO HTML <p><a href= ficheiro1.html >Este texto</a>liga a um ficheiro</p> A tag <a> (âncora) tem o parâmetro: href=..., com a referência da hiperligação e fecha com a tag de fecho </a> Entre as tags <a> e </a> escreve-se o texto que vai aparecer no local da hiperligação. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

73 EXEMPLO <html> <body> <p> <a href= ficheiro1.html >Este texto</a> liga a um ficheiro</p> <p> <a href= >Este texto</a> liga a uma página da Internet</p> <p> <a href= target= _blank>este texto</a> liga a uma página da Internet e abre uma janela nova</p> </body> </html> HTML COM TAGS PARA HIPERLIGAÇÕES

74 INTRODUÇÃO AO HTML HTML: HIPERLIGAÇÕES PARÂMETRO TARGET CÓDIGO HTML <a href= target= _blank >Este texto</a>liga a uma página de Internet e abre uma janela nova </p> Parâmetro: target: target= _blank, indica que o documento será carregado numa nova janela. target= _self, este atributo indica que o documento será carregado na mesma frame. target= _parent, indica que o documento será carregado no frameset pai. target= _top, indica que o documento será carregado na mesma janela. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

75 INTRODUÇÃO AO HTML HTML: INSERIR IMAGENS As imagens são inseridas através da tag img e correspondente parâmetro src que indica a localização da imagem. CÓDIGO HTML <img src= imagem.jpg border= 0 width= 50 height= 100 > Em <img src=... > indica-se a origem da imagem a apresentar. O atributo border= 0 evita que o browser, por defeito, apresente uma linha à volta da imagem. Os parâmetros width e height indicam, respectivamente, a largura e a altura com que se pretende apresentar a imagem. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

76 EXEMPLO <html> <body> <p>inserir uma imagem: <img src= imagem.jpg border= 0 width= 220 height= 300 > </p> <p>inserir uma imagem que está publicada na Internet: <img src= HEADER_ jpg border= 0 width= 780 height= 200 > </p> </body> </html> HTML COM TAGS PARA HIPERLIGAÇÕES

77 INTRODUÇÃO AO HTML HTML: INSERIR IMAGENS COM HIPERLIGAÇÕES As imagens são inseridas através da tag img e correspondente parâmetro src que indica a localização da imagem. CÓDIGO HTML <p>imagem com uma hiperligação para uma página de Internet: <a href: > <img src= imagem.jpg border= 0 width= 50 height= 100 ></a></p> INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

78 INTRODUÇÃO AO HTML ORGANIZAÇÃO DE FICHEIROS Um site pode conter um número elevado de ficheiros de diferentes tipos. Para níveis elevados de informação é necessário adoptarmos uma estrutura para organizar toda a informação. A pasta inicial tem de conter um ficheiro de índice a que chamamos: index.html ou default.html. O nome do ficheiro índice pode ter outra designação, dependendo da forma como foi configurado o servidor da Internet. O index.html, normalmente é a página de entrada do site (a homepage). A partir desta página são feitas ligações para outros documentos html ou outros tipos de ficheiros. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

79 DESAFIO 2 (ENTREGA PRÓXIMA AULA) A PARTIR DO SITE: Fazer um wireframe de: - Página de entrada - Página Dicas para Poupar Descrever e analisar os seguintes fluxos de navegação: - Pretendo aderir ao Cartão Continente. Quais os passos que tenho de efectuar? - Qual o horário da loja Continente de S. João da Madeira? ENTREGA: - Próxima aula em formato electrónico (PDF); - Identificação nome + número INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

80 REFERÊNCIAS BIBLIOGRÁFICAS PREECE, Jennifer, ROGERS, Yvonne & SHARP, Helen. DESIGN DE INTERACÇÃO. Bookman (2005). SCOLARI, Carlos. HIPERMEDIACIONES. ELEMENTOS PARA UNA TEORÍA DE LA COMUNICACIÓN DIGITAL INTERACTIVA. Gedisa Editorial (2008). LYNCH, Patrick & HORTON, Sarah. GUIA DE ESTILO DA WEB. PRINCÍPIOS BÁSICOS DE DESIGN PARA A CRIAÇÃO DE WEB SITES. Editorial Gustavo Gili (2004-2ª Edição). MEMÓRIA, Felipe. DESIGN PARA A INTERNET. Elsevier - Campus 4ª Edição (2006). ROBBINS, Jennifer Niederst. LEARNING WEB DESIGN. A BEGINNER S GUIDE TO (X)HTML, STYLE SHEETS, AND WEB GRAPHICS. O Reilly (2007-3rd Edition). REFERÊNCIAS ONLINE NOTA: A laranja as referências disponíveis na biblioteca da ESCS. INSTITUTO POLITÉCNICO DE LISBOA - ESCOLA SUPERIOR DE COMUNICAÇÃO SOCIAL - LICENCIATURA PUBLICIDADE E MARKETING

> 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

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

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

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

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

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

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

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

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

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

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

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

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

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

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

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

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

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

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

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

Introdução. http://www.youtube.com/watch?v=6gmp4nk0eoe

Introdução. http://www.youtube.com/watch?v=6gmp4nk0eoe Introdução http://www.youtube.com/watch?v=6gmp4nk0eoe Treinamento básico em software I Código HTML - Concebido por Tim Berners-Lee Berners-Lee atualmente mantém um blog que discute questões atuais sobre

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

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

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

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

3.1.7. Definição do fundo da página

3.1.7. Definição do fundo da página 3.1.7. Definição do fundo da página 1 Definição do fundo da página A definição do fundo de uma página pode ser feita através da atribuição de uma cor ou de uma imagem Quando é feita através da utilização

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

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

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

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

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

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003 Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft

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

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

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

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

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

Manual de conteúdos da Aula Técnicas de Implantação

Manual de conteúdos da Aula Técnicas de Implantação Departamento de Inovação, Ciência e Tecnologia Licenciatura em Informática Ramo Educacional Ano Lectivo 2006/2007 Manual de conteúdos da Aula Técnicas de Implantação GRUPO 2 N.º Aluno Licenciatura Nome

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

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

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10 Apostila de Índice HTML 1.Introdução ao HTML página 04 2.O que é o HTML página 05 3.O que são tags HTML página 05 4.Iniciando com HTML página 10 5.Mais tags HTML página 12 6.Atributos página 14 7.Links

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

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

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

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

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

Guia de Consulta Rápida XHTML. Juliano Niederauer. Novatec Editora. www.novateceditora.com.br

Guia de Consulta Rápida XHTML. Juliano Niederauer. Novatec Editora. www.novateceditora.com.br Guia de Consulta Rápida XHTML Juliano Niederauer Novatec Editora www.novateceditora.com.br Guia de Consulta Rápida XHTML de Juliano Niederauer Copyright 2002 da Novatec Editora Ltda. Todos os direitos

Leia mais

UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S

UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S UFCD 21 Criação de sites webs 1 D U R A Ç Ã O : 5 0 H O R A S Objectivos: 2 C R I A R D O C U M E N T O S E M H I P E R T E X T O D E S E N V O L V E R E A L O J A R U M S I T E N A I N T E R N E T Conteúdos

Leia mais

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

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Frames São janelas que podem conter páginas Web. Uma janela pode ser subdividida em várias subjanelas, cada uma, visualizando

Leia mais

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

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

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

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

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida).

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida). XHTML 1. Significado do Termo HTML (HyperText Markup Language Linguagem de Marcação de Hipertexto) é a linguagem na qual são feitas as páginas que irão compor um site da Internet. A versão mais recente

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

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

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

Ferramentas como, por exemplo, linhas de conexão, formas automáticas, sombras pendentes, WordArt, etc.

Ferramentas como, por exemplo, linhas de conexão, formas automáticas, sombras pendentes, WordArt, etc. Ambiente de trabalho Ambiente de trabalho Porquê criar páginas web? A World Wide Web é a melhor forma das pessoas comunicarem umas com as outras. Nos dias de hoje, é importante poder comunicar com outras

Leia mais

Tecnologias da Internet (T) Avaliação de Frequência (v1) 60 minutos * 09.05.2012

Tecnologias da Internet (T) Avaliação de Frequência (v1) 60 minutos * 09.05.2012 1 Este é o seu teste de avaliação de frequência. Leia as perguntas com atenção antes de responder e tenha atenção que algumas perguntas podem ter alíneas de resposta em páginas diferentes. Escreva as suas

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

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

WWW - World Wide Web

WWW - World Wide Web WWW World Wide Web WWW Cap. 9.1 WWW - World Wide Web Idéia básica do WWW: Estratégia de acesso a uma teia (WEB) de documentos referenciados (linked) em computadores na Internet (ou Rede TCP/IP privada)

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

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

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

HTML. Tópicos. Tags. Páginas WEB Arquitectura Definição HTML. O documento HTML Estrutura do documento Meta comandos Ferramentas de edição de HTML

HTML. Tópicos. Tags. Páginas WEB Arquitectura Definição HTML. O documento HTML Estrutura do documento Meta comandos Ferramentas de edição de HTML HTML Tópicos Páginas WEB Arquitectura Definição HTML Tags O documento HTML Estrutura do documento Meta comandos Ferramentas de edição de HTML Arquitectura Browser Pedido de resolução nome End. IP Pedido

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

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

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

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

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar links 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

Web Design Aula 13: Introdução a CSS

Web Design Aula 13: Introdução a CSS Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas

Leia mais

Home Page da Estação Automática do IF-SC

Home Page da Estação Automática do IF-SC Home Page da Estação Automática do IF-SC Ana Paula Jorge Fraga Email: anaa_fraga@hotmail.com Artur da Silva Querino E-mail: arturquerino@gmail.com Kathilça Lopes de Souza E-mail: kathii16@hotmail.com Rayana

Leia mais

0777 Processador de Texto

0777 Processador de Texto 0777 Processador de Texto Objectivo (s) Utilizar aplicações informáticas de processamento de texto. Processador de texto conceitos gerais Criação de um documento Abertura de documentos Gravação de documentos

Leia mais

Web Design Aula 11: XHTML

Web Design Aula 11: XHTML Web Design Aula 11: XHTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação HTML 1.0-2.0: Havia hipertextos, não havia preocupação com a apresentação HTML 3: Guerra dos Browser (Microsoft

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

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

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

HTML. Leandro Sorgetz, Roberto Pretto

HTML. Leandro Sorgetz, Roberto Pretto HTML Leandro Sorgetz, Roberto Pretto Faculdades de Informática de Taquara Curso de Sistemas de Informação Fundação Educacional Encosta Inferior do Nordeste Av. Oscar Martins Rangel, 4500 Taquara RS Brasil

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

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,...

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,... Sessão 1 A INTERNET Baseada no modelo Cliente-Servidor Cliente: programa que pede informação Servidor: programa que envia a informação No caso da WWW: Cliente: browser (IE, por exemplo) Servidor: IIS (Internet

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

José Frazão. Página 2 de 19

José Frazão. Página 2 de 19 Página 2 de 19 Índice Página 1. Introdução 4 2. História e características 5 3. Sintaxe 5 3.1. Texto 7 3.2. Comandos básicos mais utilizados 8 3.3. Fundo (Backgrounds) e cores 10 3.4. Tabela de acentos

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

Manual do Gestor de Templates

Manual do Gestor de Templates Manual do Gestor de Templates Versão - Revisão 2 200.07.09 Índice Introdução... 3 2 O que muda com o Gestor de Templates... 3 3 Implicação da utilização do Gestor de Templates... 4 4 Lista de Funcionalidades...

Leia mais

Unidade 4 Concepção de WEBSITES. Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1.

Unidade 4 Concepção de WEBSITES. Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1. Unidade 4 Concepção de WEBSITES Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1. Sobre o conteúdo 1 Regras para um website eficaz sobre o conteúdo Um website é composto

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

Apostila Active Brasil de Webdesign. Daniel de Menezes Gularte Omar Queiroz. 2002 Apostila de Webdesign ver. 1 rev. 0. Curso de Web Design

Apostila Active Brasil de Webdesign. Daniel de Menezes Gularte Omar Queiroz. 2002 Apostila de Webdesign ver. 1 rev. 0. Curso de Web Design APOSTILA WEBDESIGN Apostila Active Brasil de Webdesign Daniel de Menezes Gularte Omar Queiroz A livre distribuição dessa cópia está proibida, sendo de material exclusivo do curso de Webdesign da Active

Leia mais

Apostila Básica de Informática Ensino Fundamental Volume 4

Apostila Básica de Informática Ensino Fundamental Volume 4 Apostila Básica de Informática Ensino Fundamental Volume 4 1 Introdução:... 3 A Tela do Excel... 3 Criando uma nova pasta de trabalho... 3 Diferença entre Pasta de Trabalho e Planilha.... 4 Salvando sua

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

Spelling Tabelas Apagar linhas numa tabela Merge e Split numa tabela Alinhamento vertical da tabela Introduzir texto na vertical

Spelling Tabelas Apagar linhas numa tabela Merge e Split numa tabela Alinhamento vertical da tabela Introduzir texto na vertical Word II Título: Iniciação ao WORD 2003. Nível: 1 Duração: 2 Tempos Objectivo: Iniciar o estudo da aplicação Microsoft Office Word. Dar a conhecer algumas ferramentas do Microsoft Office Word. Microsoft

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

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

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte

Leia mais