TecWeb Tecnologias Web. Prof. Esp. Douglas Mariano dos Santos
|
|
- André Clementino Paiva
- 6 Há anos
- Visualizações:
Transcrição
1 TecWeb Tecnologias Web Prof. Esp. Douglas Mariano dos Santos
2 Sobre mim Formado na FAU: Faculdade Alfa de Umuarama Sistemas para Internet Formado na FCV MBA em Desenvolvimento para Aplicativos Móveis Trabalhou na Wnet Internet Maringá Empresário COMBIT INTERNET E DESENVOLVIMENTO DE SITES WEB
3 Nossa ementa A disciplina fornecerá uma visão gerão da programação para web, suas ferramentas e padronizações, com foco em HTML, CSS e JavaScript. O mercado de trabalho, necessidade de programadores web, além de web designers, para o desenvolvimento de conteúdo, focando, inclusive, na venda de produtos e na presença de marcas na rede mundial de computadores.
4 Conceitos É a parte FISICA Surgiu em meados de 1960 iniciou-se em 1970 Necessidade de Comunicação entre pontos distantes ARPANET Formada para que houvesse proteção entre a comunicação Cliente - Servidor WEB Surgiu em 1989 WWW Rede de alcance mundial Criada por Tim Berners-Lee, com o HyperTexto Organização Fornecer acesso
5 Evolução da Web 1.0 Implantação e popularização da rede em sí Centrada em hyperlinks e páginas estáticas 2.0 Mecanismos de buscas Sistemas de colaboração (YTb, WkPd) Relacionamento Social (FB, Twt) 3.0 Organização de conteúdo de forma inteligente Implantação de Inteligência Artificial (Web Semantica) Mineração de dados
6 Navegadores Agentes (IE/Edge, FF, Chrome, Safari, Opera, etc...) versões Funcionamento Protocolos Importância Acessibilidade W3C Conceito Servidor Cliente Usuário
7 Abordagens HTML CSS JavaScript AJAX / jquery Integração de tecnologias
8 HTML HTML é a abreviação de HyperText Markup Language Linguagem de Marcação de Hyper Texto É uma linguagem para publicação de conteúdo Texto Imagem Vídeo Áudio
9 HTML é a linguagem utilizada na comunicação entre o desenvolvedor de uma página WEB e o navegador (Internet Explorer, Mozilla Firefox, Safari,...); A HTML utiliza identificadores que são chamados de TAG. Essas TAGs indicam ao navegador o elemento a ser exibido; Cada TAG apresenta uma lista de atributos que podem definir as propriedades dos elementos como aparência, tamanho, posição, cores, fontes, etc.
10 Sintaxe da Tags As TAGs são palavras definidas, em inglês, e são escritas entre os sinais < e > ; As TAGs devem ser abertas e fechadas para que o navegador saiba de onde e até onde está definido o elemento. Para se fechar uma TAG é utilizado o sinal /. Algumas poucas TAGs não necessitam ser fechadas, sendo recomendado a inserção do sinal / na TAG de abertura; Exemplos: <a>... </a> <br/> - TAG aberta e fechada; - TAG que não precisa ser fechada;
11 Os atributos de uma TAG são inseridos dentro da TAG de abertura e seus valores devem estar entre aspas simples ou dupla. <tag atr1='prop1'>... </tag> <tag atr1='prop1' atr2="prop2"/> Tags fundamentais <html> e </html> Usadas em toda página WEB, são a primeira e a última TAGs a serem inseridas num documento HTML. Entre elas fica escrita toda a página. <head> e </head> head (cabeça) é uma TAG de cabeçalho. Nela são inseridas as primeiras configurações da página a serem utilizadas durante a interpretação feita pelo navegador. Algumas dessas configurações são as folhas de estilo, CSS (Cascading Style Sheets), o título da página e scripts de execução; <title> e </title> title (título) é a TAG que define o título da página e fica inserida dentro de head.
12 <body> e </body> body (corpo) é a TAG onde ficam escritos todos os elementos visíveis da página: textos, links, imagens, formulários e etc. Principais atributos de <body> Bgcolor conjunto de cores: {blue, red, yellow, green,...}; utilizado para definir a cor de fundo; as cores também podem ser representadas com codificação hexadecimal; o número de cores distintas disponíveis utilizando o sistema RGB de cores supera 16mi. Background seleciona uma imagem para plano de fundo; deve ser inserido o endereço da imagem.
13 Exemplo <html> <head> <title>este é o título</title> </head> <body> Olá. Eu faço parte do corpo da página. </body> </html>
14 Formatação de textos Quebra de linha e parágrafo <br> quebra de linha; <p> e </p> parágrafo. Principal atributo de <p> Align conjunto de valores: {center, left, right, justify}; utilizado para alinhar um texto; caso não seja definido, o valor padrão é left.
15 <body> Um parágrafo com quebra de linhas alinhado ao centro:<p align='center'>"quem crer pudera, tempo em fora, no meu verso,<br/>se o vosso alto valor eu proclamasse nele?<br/>então e sabe-o o céu como em tumba, ao inverso,<br/>vossa vida aí oculto e o mais que em vós excele.<br/>dissesse eu o que minha alma em vossos olhos sente,<br/>vossas graças, fiel, todas enumerasse,<br/>e o futuro diria: Este poeta mente;<br/>beleza assim não há da terra sobre a face".</p> </body>
16 Títulos <h1> e </h1> título maior; <h2> e </h2> <h3> e </h3> <h4> e </h4> <h5> e </h5> <h6> e </h6> título menor. Principal atributo Align
17 <body> <h1>título 1 (esquerda)</h1> <h2 align='left'>título 2 (esquerda)</h2> <h3 align='center'>título 3 (centro)</h3> <h4 align='center'>título 4 (centro)</h4> <h5 align='right'>título 5 (direita)</h5> <h6 align='right'>título 6 (direita)</h6> </body>
18 Formatações gerais <b> e </b> negrito; <i> e </i> itálico; <u> e </u> sublinhado; <s> e </s> riscado; <font> e </font> define propriedades da fonte como, tamanho, cor, fundo. Principais atributos de <font> Size utilizado para definir o tamanho do texto; conjunto de tamanhos: {1,..., 7}, sendo 1 o menor tamanho; Color utilizado para definir a cor da letra. mesmo conjunto de cores do atributo bgcolor;
19 Listas não ordenadas Listas podem ser Numeradas (ordenadas) Não numeradas (não ordenadas) Encadeadas OL - Ordenadas UL Lista não ordenada LI Item de lista
20 <html> <head> <title>listas</title> </head> <body> <h1>estados da Região SUL</h1> <ul> <li>paraná</li> <li>santa Catarina</li> <li>rio Grande do Sul</li> </ul> </html> </body>
21 <html> <head> <title>listas encadeadas</title> </head> <body> <h1>estados da Região SUL</h1> <ul> <li>paraná</li> <ul> <li>maringá</li> <Umuarama</li> <li>cianorte</li> </ul> <li>santa Catarina</li> <li>rio Grande do Sul</li> </ul> </body> </html>
22 Exercícios Crie a seguinte lista: Material Escolar (Negrito) Lápis Borracha Caneta Caderno
23 Crie uma lista, conforme o exemplo, abaixo: Principais Cidades (Negrito, Itálico e Sublinhado) São Paulo Guarulhos Campinas Minas Gerais Ouro Preto Mariana Rio de Janeiro Petrópolis Parati
24 Listas Ordenadas <html> </html> <head> </head> <body> </body> <title>listas encadeadas</title> <h1>estados da Região SUL</h1> <ul> </ul> <li>paraná</li> <ol> </ol> <li>maringá</li> <Umuarama</li> <li>cianorte</li> <li>santa Catarina</li> <li>rio Grande do Sul</li>
25 <html> <head> <title>listas encadeadas</title> </head> <body> <h1>estados da Região SUL</h1> <ol start= 1 type= a > <li>paraná</li> <li>santa Catarina</li> <li>rio Grande do Sul</li> </ol> </body> </html>
26 O formato da lista é definido pelo atributo TYPE que pode ser:1aaii 1: lista numerada; A: lista com letras maiúsculas; a: lista com letras minúsculas; I: lista com algarismos romanos usando caracteres maiúsculos i: lista com algarismos romanos usando caracteres minúsculos
27 Links Links locais São os que se destinam a outras páginas do mesmo website Links internos - São os que se destinam a outras partes da mesma página (âncoras) Links Correio São os utilizados para criar mensagens de s. Links com arquivos São os utilizados para que o usuários faça download de arquivos Principal atributo de <a> Target = define como o link será executado pelo navegador
28 Exemplo: <a href = destino.ext >Ir para Destino</a> <a href= > GOOGLE</a> <a href= > UOL</a> <a href= > Facebook</a> <a href= > Twitter</a>
29 Exercícios Qual o significado do termo link Quais são os principais tipos de link Crie uma página com seus cinco links preferidos Coloque textos explicativos em todos os links Agora, coloque seus links em uma lista numerada
30 O atributo TARGET da tag <a> possui quatros opções principais. _top: faz com que a nova página seja carrega na Janela inteira. Isso faz com que o Frameset que tenha sido criado anteriormente seja apagado. _parent: parece muito com _top, mas ele sempre irá se referir ao frame pai em relação ao frame onde se encontra o link. _self: vem do inglês que significa próprio. E como o próprio nome já diz, faz com que a página seja carregada no mesmo frame ou janela que se encontra o link. _blank: o mais utilizado dos quatro. O _blank faz com que a página do link seja aberta em uma nova janela ou, dependendo do browser, em uma nova aba.
31 Imagens <img> Src Alt Name Width (largura) Height (altura) Align bottom: faz a parte de baixo da imagem ser alinhada verticalmente na linha base em que se encontra. Este é o valor padrão de todas as imagens. middle: faz a parte central da imagem ser alinhada verticalmente na linha base em que se encontra. top: faz a parte de cima da imagem ser alinhada verticalmente na parte de cima da linha do texto em que se encontra. left: faz com que a imagem se fixe a esquerda, possibilitando o texto a ficar a direita. right: faz com que a imagem se fixe a direita, possibilitando o texto a ficar a esquerda.
32 ... <p align="center">imagem (450x450)<br/> <IMG SRC="computador.jpg" width ="300" height="300" /></p> <p align ="center">imagem Original (150x300)< br /> <IMG SRC="computador.jpg" width ="300" height ="300" /></p> < p align ="center">imagem Original (300x150)< br />... <img src="computador.jpg" width="300" height = 150" /></p>
33 Tabelas - <table> </table> Um item muito utilizado em páginas HTML/XHTML é a tabela. Tabelas são compostas por três tags diferentes, cada uma controlando uma função diferente. A tag principal é a TABLE. Nesta tag serão definidos os comportamentos de nossa tabela como alinhamento, largura, espaçamento, etc. Dentro da tabela deve haver pelo menos uma linha que é definida pela tag TR. Dentro de toda linha deve haver pelo menos uma célula que é definida pela tag TD. Se mais de uma célula for inserida dentro de uma linha, então, será criado uma coluna para separá-las. O que estiver escrito dentro da tag que controla a célula será apresentado no browser.
34 <TABLE> <TR> <TD>Célula 1</TD> </TR> </TABLE>
35 Existem atributos em uma tabela que podem ser modificados que afetam diretamente sua aparência. WIDTH: Controla a largura da tabela como um todo. Tabelas são renderizadas, por padrão, a se auto-ajustarem ao conteúdo das células e ao tamanho do elemento ao qual está aninhada. O atributo WIDTH da tag TABLE aceita dois tipos de valores: Fixo: um número inteiro que repesenta a largura fixa em pixels. Porcentagem: um número inteiro seguido de porcentagem que representa a porção do elemento que deve ser preenchida pela tabela. (Ex.: WIDTH="50%" faria com que a tabela ocupasse metade do elemento ao qual está aninhada) CELLSPACING: Determina o espaçamento entre uma célula e outra. CELLPADDING: Configura o espaçamento interno da célula. Por padrão, o valor de CELLPADDING é 0, ou seja, as bordas da célula estão sempre justas no conteúdo. BORDER: Modifica a largura da borda. Se o atributo BORDER for definido como 0, então, nenhuma borda será apresentada. ALIGN: É um atributo possível, porém, está definido como antiquado (deprecated) pelo W3C. Possui apenas três opções: left center right
36 <TABLE WIDTH="400" CELLSPACING="10" CELLPADDING="0" BORDER="4"> <TR> <TD>Célula 1</TD> <TD>Célula 2</TD> </TR> <TR> <TD>Célula 1</TD> <TD>Célula 2</TD> </TR> </TABLE>
37 ... <TABLE WIDTH="250" CELLSPACING="0" CELLPADDING="2" BORDER="1"> <TR> <TD>Ano</TD> <TD>População residente</td> </TR> <TR> <TD>1997</TD> <TD> </TD> </TR> <TR> <TR> <TD>2002</TD> <TD> </TD> </TR> <TR> <TD>2003</TD> <TD> </TD> </TR> </TABLE>...
38 TH X TD A principal diferença entre estes elementos é a seguinte: Geralmente as colunas da primeira linha e última linha utilizamos as tags "TH", isso devido ao fato que estas tags deixam o conteúdo em negrito. A primeira linha e a última são marcadas pelos elementos "THEAD(cabeçalho)" e "TFOOT(rodapé)", respectivamente. Essa é a principal diferença entre elas. Serve como diferenciação do resto do conteúdo da tabela, onde utilizamos os elementos "TD".
39 Atributos da tag TD e TH width e height bgcolor Apesar desses atributos serem largamente utilizados, eles são marcados como antiquados (deprecated) pela W3C. O atributo width determina a largura de uma célula e o atributo height determina a altura. Os seus valores podem ser porcentagens ou números inteiros que equivalem ao tamanho em pixels. Bgcolor determina a cor de fundo de uma célula. Cada célula pode possuir uma cor de fundo diferente. As cores são determinadas por valores definidos ou por hexadecimais. rowspan e colspan Rowspan e colspan servem para expandir as células fazendo com que uma única célula ocupe mais de uma linha ou mais de uma coluna. Estes atributos recebem um número inteiro que equivalem ao número de linha a mesclar (no caso de rowspan) ou o número de colunas a mesclar (no caso de colspan).
40 <TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1"> <TR> <TD COLSPAN="2">Célula 1</TD> </TR> <TR> <TD>Célula 2</TD> <TD>Célula 3</TD> </TR> <TABLE>
41 <TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1"> <TR> <TD ROWSPAN="2">Célula 1</TD> <TD>Célula 2</TD> </TR> <TR> <TD>Célula 3</TD> </TR> </TABLE>
42 <TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1"> <TR> <TD COLSPAN="3" ROWSPAN="3">Célula 1</TD> <TD>Célula 2</TD> </TR> <TR> <TD>Célula 3</TD> </TR> <TR> <TD>Célula 4</TD> </TR> <TR> <TD>Célula 5</TD> <TD>Célula 6</TD> <TD>Célula 7</TD> <TD>Célula 8</TD> </TR> </TABLE>
43
44 <table> <thead> <tr> <th>produto</th> <th>preço</th> <th>quantidade</th> </tr> </thead>
45 <tbody> <tr> <td>feijão</td> <td>r$ 8,75</td> <td>1</td> </tr> <tr> <td>arroz</td> <td>r$ 4,99</td> <td>2</td> </tr> </tbody>
46 <tfoot> <tr> <th>total</th> <th></th> <th>r$ 18,73</th> </tr> </tfoot> </table>
Programação para Web HTML - Parte 2
Programação para Web HTML - Parte 2 Professor: Harlley Lima E-mail: harlley@decom.cefetmg.br Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 2 de março
Leia mais1. 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> 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 maisQuem 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 mais4. 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 maisCEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML
INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma
Leia maisProgramaçã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 maisOPERAÇÃ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 maisQUEM 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 maisWebdesign 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 maisCurso 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 maisLista 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 maisRoteiro 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 maisHTML. 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 maisFerramentas 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 maisINSTITUTO 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 maisIntroduçã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 maisProgramaçã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 maisDesenvolvedor 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 maisSí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 maisDesenvolvimento 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 maisIntroduçã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 maisProgramaçã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 maisIntroduçã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 maisWeb 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 maisPor 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 maisIntroduçã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 maisMini-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 maisHTML. 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 maisHTML. Sessão 4 HTML. Criação de Páginas WEB. Tabelas
HTML Sessão 4 HTML É por vezes interessante fazer com que uma célula se expanda de forma a incorporar a célula imediatamente abaixo ou ao lado (o que em folhas de cálculo como o Microsoft Excel se denomina
Leia maisTécnicas e processos de produção. Profº Ritielle Souza
Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo
Leia maisgedit Bloco de notas
GOVERNO DA REPÚBLICA PORTUGUESA gedit Bloco de notas Sistema Operativo Linux Tecnologias de Informação e Comunicação Professor: Joaquim Frias Instruções básicas do HTML TAGS TAGS Uma tag é uma instrução
Leia maisWebDesign. 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 maisAlgoritmia 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 maisDesenvolvimento 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 maisTecnologia 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 maisMÓ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 maisAula 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 maisTecnologias para apresentação de dados - HTML. Aécio Costa
Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir
Leia maisRoteiro 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 maisWeb Design Aula 15: Propriedades CSS
Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de
Leia maisProgramaçã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 maisLinguagem 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 mais1 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 maisAutoria Web. Professor: Diego Oliveira. Conteúdo 02: Principais Tags HTML
Autoria Web Professor: Diego Oliveira Conteúdo 02: Principais Tags HTML Diferença de HTML e XHTML Os elementos XHTML devem estar devidamente aninhados Os documentos XHTML devem estar bem-formados Os nomes
Leia maisAplicativos 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 maisCurso 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 maisAPOSTILA. 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 mais4 - 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 maisHTML 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 maisINTRODUÇÃ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 maisHyperText 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 maisSumá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 maisMó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 maisDesenvolvimento 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 maisIntroduçã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 maisDesenvolvimento 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 maisColeção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail
Leia maisIntroduçã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 maisClaudio 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 maisSIMULADOS & 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 maisProgramaçã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 maisRoteiro de Auxílio para as Atividades Práticas de Sistemas de Informação
Roteiro de Auxílio para as Atividades Práticas de Sistemas de Informação A linguagem XML no contexto do curso de Sistemas de Informação é utilizada principalmente para o armazenamento e a manipulação de
Leia maisProgramação WEB. Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br www3.ifrn.edu.br/~andrealmeida. Aula II jquery UI
Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br www3.ifrn.edu.br/~andrealmeida Aula II jquery UI Introdução O que é jquery UI? Biblioteca que fornece maior nível de abstração para interação
Leia maisEnsino I nterativo Universidade Anhembi Morumbi. Multimídia I
Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Mostrar o que é preciso para o desenvolvimento de um Projeto para Web, apresentando os primeiros conceitos de HTML. Tópicos 1. Etapas
Leia maisProf. Erwin Alexander Uhlmann 1/7/2010
HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5
Leia maisApostila Programador Web v3.0 Prof. Alexandre Unterstell alexunter@gmail.com www.alex.inf.br
1 Apostila Programador Web v3.0 Prof. Alexandre Unterstell alexunter@gmail.com www.alex.inf.br Antes de começar desenvolver um site na internet é importante que conheçamos alguns fatores importantes que
Leia maisFTIN - 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 maisEXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina
Leia maisTECNOLOGIAS 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 mais4.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 maisComo 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 mais2 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 maisConfigurações de envio com o uso de RSS
Configurações de envio com o uso de RSS Saiba como integrar o email marketing ao RSS e torne o processo de alimentação de conteúdo de newsletters automatizado. Configuração de envios com o uso de RSS Visão
Leia mais2. Linguagem XHTML. " codebase: indica o local onde se encontra a classe que implementa o applet. " code: nome da classe que implementa o applet
2. Linguagem XHTML! Uma página XHTML pode conter ligações para outros documentos conforme vimos na aula passada. Mas um documento XHTML pode conter também ligações para outros objetos, como folhas de estilo,
Leia maisDICAS PARA DESENVOLVER SITE ACESSÍVEL
DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário
Leia maisUnidade IV Introdução à Linguagem PHP Parte 1
Unidade IV Introdução à Linguagem PHP Parte 1 Professor Fabiano de Paula Soldati fpsoldati@yahoo.com.br http://br.groups.yahoo.com/group/professorsoldati/ Introdução HTML = HyperText Markup Language HTML
Leia maisPDI 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 maisComandos Básicos de HTML
Comandos Básicos de HTML Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do windows(notepad) ou um outro editor de texto como Notepad++, Geany ou PSPAD. Para fazer você
Leia maisCurso de HTML. Daniel Destro do Carmo Softech Network Informática daniel@danieldestro.com.br
Daniel Destro do Carmo Softech Network Informática daniel@danieldestro.com.br Definições conceituais O que é HTML? Criando e publicando uma página web Elementos da HTML Estrutura básica de uma página HTML
Leia maisAPOSTILA DE INFORMÁTICA INTERNET E E-MAIL
APOSTILA DE INFORMÁTICA INTERNET E E-MAIL Profa Responsável Fabiana P. Masson Caravieri Colaboração Empresa Júnior da Fatec Jales Monitora: Ângela Lopes Manente SUMÁRIO 1. INTERNET... 3 2. ACESSANDO A
Leia maisSIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível
SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente
Leia maisMaurício Samy Silva. Novatec
Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20
Leia mais4.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 maisEste arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br
Pg 1 Introdução... Pg 2 Exemplo completo... Pg 3 Passo 2... Pg 4 Hyperlinks e Texto dentro de uma caixa... Pg 5 Tag para cores e Tabelas... Pg 6 Formatar o Texto... Pg 7 Download... Pg 8 Frame... Pg 9
Leia maisManual para a produção de templates de email marketing
Janeiro de 2011 Manual para a produção de templates de email marketing Devido ao Código de Autorregulamentação do Email Marketing, www.virtualtarget.com. br/documentacao/codigo-autorregulamentacao-email-marketing,
Leia mais3 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 maisAs tags indicam as diversas partes da página e produzem diferentes efeitos no navegador, elas são os comandos da linguagem HTML.
World Wide Web A Web é um conjunto de documentos acessíveis por meio da Internet. Esses documentos (ou páginas Web) contêm uma tecnologia chamada hipertexto. Onde você poderá percorrer partes do documento
Leia maisIntrodução ao Desenvolvimento WEB
2009 Introdução ao Desenvolvimento WEB Versão 3.1 Este documento aborda tópicos técnicos utilizados na criação da Interface Web: HTML, CSS e Javascript básico. Ideal para o iniciante ou desenvolvedor com
Leia maisO HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:
HTML é a sigla usada para Hyper Text Markup Language (linguagem de Marcação de Hipertexto). É a linguagem destinada a criação de páginas para a WEB. Ao contrário do que muita gente boa pensa, HTML não
Leia maisTutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis
Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis FISL 12 Reinaldo Ferraz W3C Brasil Possibilitar o acesso a pessoas com deficiência Web para todos Todos mesmo! Web para todos,
Leia maisInternet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos
Internet Prof. Ricardo Argenton Ramos www.univasf.ed.br/~ricardo.aramos O que é Internet? A Internet é uma rede capaz de interligar todos os computadores do mundo. O que faz a Internet tão poderosa assim
Leia maisCadeira de Tecnologias de Informação. Ano lectivo 2009/2010. Sites dinâmicos. Com Expression Web TI2009/10 EWD_1. Filipa Pires da Silva (2009)
Cadeira de Tecnologias de Informação Ano lectivo 2009/2010 Sites dinâmicos Com Expression Web TI2009/10 EWD_1 .ASPX vs.html HTML: HTML é uma linguagem para descrever páginas web HTML significa Hyper Text
Leia maisPassa 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 maisA Web, o Design, o Software Livre e outras histórias... Eduardo Santos - www.agni.art.br
A Web, o Design, o Software Livre e outras histórias... Eduardo Santos - www.agni.art.br Surgimento da WEB e HTML Início da década de 90 HTML (acrônimo para a expressão HyperText Markup Language, que significa
Leia mais3.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 maisProgramaçã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 maismkdir /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