TecWeb Tecnologias Web Prof. Esp. Douglas Mariano dos Santos
Sobre mim Formado na FAU: Faculdade Alfa de Umuarama Sistemas para Internet Formado na FCV MBA em Desenvolvimento para Aplicativos Móveis Trabalhou na Wnet Internet Maringá Empresário COMBIT INTERNET E DESENVOLVIMENTO DE SITES WEB
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.
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
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
Navegadores Agentes (IE/Edge, FF, Chrome, Safari, Opera, etc...) versões Funcionamento Protocolos Importância Acessibilidade W3C Conceito Servidor Cliente Usuário
Abordagens HTML CSS JavaScript AJAX / jquery Integração de tecnologias
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
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.
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;
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.
<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.
Exemplo <html> <head> <title>este é o título</title> </head> <body> Olá. Eu faço parte do corpo da página. </body> </html>
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.
<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>
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
<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>
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;
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
<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>
<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>
Exercícios Crie a seguinte lista: Material Escolar (Negrito) Lápis Borracha Caneta Caderno
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
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>
<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>
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
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 e-mails. 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
Exemplo: <a href = destino.ext >Ir para Destino</a> <a href= http://www.google.com.br > GOOGLE</a> <a href= http://www.uol.com.br > UOL</a> <a href= http://www.facebook.com > Facebook</a> <a href= http://www.twitter.com > Twitter</a>
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
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.
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.
... <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>
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.
<TABLE> <TR> <TD>Célula 1</TD> </TR> </TABLE>
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
<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>
... <TABLE WIDTH="250" CELLSPACING="0" CELLPADDING="2" BORDER="1"> <TR> <TD>Ano</TD> <TD>População residente</td> </TR> <TR> <TD>1997</TD> <TD>163 470 521</TD> </TR> <TR> <TR> <TD>2002</TD> <TD>174 632 960</TD> </TR> <TR> <TD>2003</TD> <TD>176 876 443</TD> </TR> </TABLE>...
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".
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).
<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>
<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>
<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>
<table> <thead> <tr> <th>produto</th> <th>preço</th> <th>quantidade</th> </tr> </thead>
<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>
<tfoot> <tr> <th>total</th> <th></th> <th>r$ 18,73</th> </tr> </tfoot> </table>