Instituto Federal do Sertão-PE. Curso de HTML. Professor: Felipe Correia

Transcrição

1 Instituto Federal do Sertão-PE Curso de HTML Professor: Felipe Correia

2 Conteúdo Parte I! Parte II! Introdução! Comentários! Elementos! Links! Atributos! Head! Headings! CSS! Parágrafos! Imagens! Formatação Tabelas

3 Conteúdo Parte III! Parte IV! Listas! JavaScript! Blocos! Entidades! Layout! Símbolos! Formulários! Charset! Iframes! URL Encode! Cores Exercícios

4 Parte I

5 Introdução Livro HTML 5 de Fábio Flatschart! Capítulo 1 - O hipertexto e as linguagens de marcação! Capítulo 2 - A evolução do HTML

6 Capítulo 1 Hipertexto é um documento ou sistema formado por distintos blocos de informação (dados, texto, imagens, vídeos, sons)! Blocos de informação -> lexia ou nó que representa o lugar onde o usuário se encontra antes de seguir o caminho indicado pelo elo associativo (link)! A parceria nó-elo é o motor do hipertexto! É possível encontrar o hipertenso na literatura, no cinema e música! Ex.: estudos de da Vinci, onde ele buscava estabelecer relações entre textos, desenhos e cálculos de projeto

7 Capítulo 1 Marco fundamental do hipertexto -> MEMEX (Memory Extension)! Experimento criado por um cientista militar americano, Vannevar Bush, após a Segunda Guerra Mundial! Mecanismo que recebia conteúdo de texto datilografado, imagens registradas por microfotografia e sons captados por microfone! O conteúdo era indexado pelo sistema para que usuário tivesse facilidade de acessar

8 Capítulo 1 A palavra hipertexto surge em 1963 com Theodor Holm Nelson (Ted Nelson)! Ted Nelson foi um filósofo idealizador do projeto Xanadu! Projeto que tinha como objetivo criar uma rede de computadores com interface de comunicação simples e acessível! Algumas das ideias de Nelson foram aproveitadas por Tim Berners-Lee nos anos 90, quando criou o protocolo HTTP e a linguagem HTML

9 Capítulo 1 Atualmente, as linguagens de marcação são amplamente utilizadas na web e em setores que demandem interoperabilidade entre dispositivos! As linguagens de marcação têm como ancestral comum o SGML (Standard Generalized Markup Language) que surgiu aproximadamente na mesma época da internet e do sistema UNIX! Algumas linguagens, como o HTML, aceitam semântica de apresentação! Outras, como o XML, não aceitam semântica de apresentação

10 Capítulo 2 Um pouco de história! Princípios do HTML escrito em PASCAL por Tim Berners-Lee! Primeiro navegador chamado de World Wide Web e o protocolo HTTP (HyperText Transfer Protocol) também por Tim Berners-Lee! Marc Andreessen inicia o projeto do navegador Mosaic e propõe a implementação de uma tag para imagens! Um documento chamado Hypertext Markup Language foi publicado pela IETF (Internet Engineering Task Force). O Mosaic foi lançado

11 Capítulo 2 Um pouco de história! Primeira conferência mundial sobre a web, onde surge o HTML 2.0. Marc Andreessen e Jim Clarck fundam a Netscape Communications. É criado o W3C (World Wide Web Consortium)! O HTML 2.0 é publicado, como também o rascunho do HTML 3.0, incluindo tabelas e suporte para folhas de estilo. A Microsoft apresenta o IE! O W3C cria o HTML Editorial Review Board para padronizar o desenvolvimento de padrões para web. Começa a elaboração do HTML 4.0

12 Capítulo O W3C atualiza oficialmente o HTML 2.0 para o HTML 3.2, que incluía tabelas e applets java. A especificação do HTML 4.0 foi publicada como recomendação incorporando o CSS! É publicado o HTML 4.01 com 3 implementações: strict, na qual elementos obsoletos ficam proibidos; transitional, na qual são permitidos alguns elementos obsoletos; e frameset para sites com frames! O XHTML 1.0 é publicado apoiado no XML. Faz divisão entre camada de conteúdo e camada de apresentação

13 Capítulo A especificação do XHTML 1.1 é lançada com recursos de modularização! Entre 2002 e 2006, o W3C apresenta oito rascunhos do XHTML 2.0 não compatíveis nem com o XHTML 1.0 e nem com o HTML 4.0! Opera, Mozilla e Apple formam o WHATWG (Web Hypertext Application Technology Working Group) em breve integrado pelo Google

14 Capítulo A atuação do WHATWG é reconhecida pelo W3C. Tim Berners-Lee anuncia que trabalhará em parceria com o WHATWG! O HTML5 é publicado como um projeto de trabalho (Working Draft) pelo W3C! O grupo de desenvolvimento responsável pelo XHTML 2.0 é fechado

15 Capítulo 2 HTML (HyperText Markup Language)! Principal linguagem utilizada na web! Permite a criação de elementos estruturados em títulos, parágrafos, listas, links, tabelas, formulários, imagens e vídeo! Com o HTML podem ser utilizadas outras linguagens como o PHP e o JavaScript! A linguagem HTML é escrita com tags delimitadas pelos sinais <> e </>

16 Capítulo 2 XHTML (Extensible HyperText Markup Language)! Linguagem de marcação que utiliza os mesmos elementos da linguagem HTML porém de forma mais rigorosa e estruturada! W3C e padrões web! O W3C é uma organização internacional que desenvolve padrões para assegurar a normatização e a evolução da web! O HTML5 está sendo desenvolvido em colaboração entre o W3C e o WHATWG

17 Capítulo 2 CSS (Cascading Style Sheets)! É uma linguagem de estilo responsável pela formatação e apresentação do conteúdo: layout, cores e fontes! O uso do CSS permite que conteúdo e apresentação (estilo) sejam trabalhados de forma independente, conferindo flexibilidade e modularidade ao fluxo de trabalho

18 Capítulo 2 XML (Extensible Markup Language)! Também é uma linguagem de marcação! Armazena e descreve dados! Permite a transferência dos dados entre diferentes sistemas e aplicativos de forma estruturada na qual o programador cria suas próprias tags! Principal diferença entre HTML e XML! HTML - serve para exibir dados! XML - serve para transportar e armazenar dados! Também é uma recomendação do W3C

19 Capítulo 2 JavaScript! É uma linguagem de programação que pode incorporada diretamente em páginas HTML para adicionar mais interatividade! É uma linguagem do tipo client side, ou seja, funciona na máquina do usuário

20 Capítulo 2 Características do JavaScript! É uma linguagem de programação! Controla elementos interativos (ação do mouse, menus, janelas e painéis de conteúdo)! Capaz de interpretar e modificar o conteúdo de um elemento HTML! Usado para validar dados do usuário! Pode detectar propriedades do navegador

21 Capítulo 2 Camadas de desenvolvimento! A organização do desenvolvimento de projetos web em camadas independentes confere flexibilidade e modularidade ao fluxo de trabalho

22 Introdução Editores! Profissionais:! Adobe Dreamweaver! Microsoft Expression Web! CoffeeCup HTML Editor! Iniciantes:! Bloco de Notas, Notepad++ e TextEdit (MAC)

23 Introdução Passo 1: Abra o Bloco de Notas! Passo 2: Escreva algum código HTML! Passo 3: Salve a página HTML! Passo 4: Visualize no Browser

24 Introdução Headings (Títulos)!! Parágrafos! <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3>! <p>this is a paragraph.</p> <p>this is another paragraph.</p> Links! <a href= é um link</a> Imagens <img src= foto.jpg alt= Foto width="104" height="142">

25 Elementos Os documentos em HTML são formados a partir de elementos! Um elemento é tudo partindo da tag de abertura até a tag de fechamento Tag de abertura Conteúdo Tag de fechamento <p> Este é um parágrafo </p> <a href="default.htm"> Este é um link </a> <br>

26 Elementos Um elemento começa com uma tag de abertura! Um elemento termina com uma tag de fechamento! O conteúdo do elemento é tudo que está entre as tags de abertura e de fechamento! Alguns elementos possuem conteúdo vazio! A maioria dos elementos HTML podem possuir atributos

27 Elementos Exemplo <!DOCTYPE html> <html>! <body> <p>este é meu primeiro parágrafo.</p> </body>! </html>

28 Atributos Elementos HTML podem conter atributos! Fornecem informação adicional sobre um elemento! São sempre especificados na tag de abertura! São escritos como par nome-valor: name= valor! Exemplo: <a href= >Este é um link</a>

29 Atributos Lista de alguns atributos: Atributo Descrição class id style title Especifica um ou mais nomes de classe para um elemento Especifica uma id única para um elemento Especifica um estilo CSS para um elemento Especifica informação extra sobre um elemento

30 Headings Headings são definidos com as tags de <h1> a <h6>! <h1> define a tag mais importante! <h6> define a tag menos importante <h1>este é um heading</h1> <h2>este é um heading</h2> <h3>este é um heading</h3>

31 Headings Headings são importantes!! Deve-se utilizar headings apenas para começo de seção! Não se deve usar para fazer o texto ficar maior ou negrito! Os mecanismos de busca utilizam os headings para indexar a estrutura e o conteúdo da página! Isso também facilita a busca de conteúdo pelo leitor do site

32 Headings Outra técnica para separar conteúdo é a utilização de linhas HTML! Exemplo: <p>este é um parágrafo.</p> <hr> <p>este é um parágrafo.</p> <hr> <p>este é um parágrafo.</p>

33 Parágrafos Os documentos HTML são divididos em parágrafos! Parágrafos são definidos com a tag <p>! Não se deve esquecer da tag de fim </p>! Em alguns navegadores isso pode produzir erros!! Para quebra de linha utiliza-se o comando <br> <p>this is a paragraph</p> <p>this is another paragraph</p> <p>this is<br>a para<br>graph with line breaks</p>

34 Parágrafos Dica:! Não se pode ter certeza como o documento HTML será apresentado ao usuário! Telas menores ou maiores, e redimensionadas podem produzir saídas diferentes! Não é possível alterar a saída colocando espaços extras ou linhas extras em HTML! O navegador remove espaços e linhas extras

35 Formatação Tags como <b> (negrito) e <i> (itálico) são utilizadas para formatação! Essas tags são chamadas de tags de formatação! Atualmente <strong> renderiza como <b> e <em> renderiza como <i>! Essas tags são utilizadas para indicar que o texto é importante

36 Formatação Tags de formatação de texto Tag Descrição <b> Negrito <em> Texto enfatizado <small> Texto menor <strong> Texto definido como importante <sub> Subscrito <sup> Sobrescrito <ins> Inserido <del> Removido <mark> Texto marcado

37 Parte II

38 Comentários Os comentários são colocados com as tags <!-- e -->! Os comentários não são exibidos pelo navegador! São utilizados para documentar o código e lembrar o programador de inserir algum outro trecho de código <!-- This is a comment -->! <p>this is a paragraph.</p>! <!-- Remember to add more information here -->

39 Links A tag <a> define um hyperlink! Um hyperlink é uma palavra, grupo de palavras, ou imagem que o usuário pode clicar para abrir outro documento! O atributo mais importante é o href que indica o destino do link! Azul -> não visitado! Roxo -> visitado! Vermelho -> ativo

40 Links Sintaxe:! <a href= url">texto do Link</a>! Exemplo:! <a href= O Texto do Link pode ser uma imagem ou outro elemento HTML! O atributo id pode ser utilizado para criar marcações no HTML! <a id= tips">seção de Dicas</a>! <a href= #tips">visite a seção de dicas</a>

41 Links! Nota: deve-se sempre adicionar uma barra no final da url, caso contrário serão geradas duas requisições ao servidor! Primeiro, o servidor adiciona a barra e depois requisita o endereço

42 Head O elemento <head> é um container para scripts, referências para arquivos de estilo e metadados! Algumas tags podem ser inseridas, como: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>

43 Head O elemento <title>! Define o título do documento! É necessário em todos os documentos HTML! O título aparece:! na barra de ferramentas! quando a página é colocada como favorita! nos resultados dos mecanismos de busca

44 Head O elemento <base>:! A tag <base> especifica a URL base/target para todas as URLs relativas em uma página <head> <base href=" target="_blank"> </head> <body>! <p><img src="imagens/cat.gif" width="24" height="39" alt="cat"> - Imagem de um gato.</p>! </body>

45 Head O elemento <link>:! A tag <link> define o relacionamento entre um documento e um recurso externo! É mais utilizada para referenciar arquivos de estilo <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

46 Head O elemento <style>! A tag <style> é usada para definir dados de estilo em um documento HTML! Dentro de um elemento <style> é especificado como os elementos devem renderizar em um navegador <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>

47 Head O elemento <meta>! Metadados são dados sobre dados! A tag <meta> é utilizada para inserir dados sobre um documento HTML! Esses dados não são apresentados na página, mas interpretados pelo computador! São tipicamente utilizados para especificar a descrição da página, palavras-chave, autor do documento

48 Head O elemento <meta>! Os metadados podem ser utilizados pelos navegadores (para apresentar conteúdo ou recarregar a página), máquinas de busca (pelas palavras-chave), ou outros serviços web! A tag <meta> sempre é colocada dentro do elemento <head>

49 Head Exemplos de uso da tag <meta>! Definir palavras-chave para mecanismos de busca! <meta name="keywords" content="html, CSS, XML, XHTML, JavaScript">! Definir a descrição da página web! <meta name="description" content="free Web tutorials on HTML and CSS">! Definir o autor de uma página! <meta name="author" content="hege Refsnes">! Atualizar um documento a cada 30 segundos! <meta http-equiv="refresh" content="30">

50 Head O elemento <script>! A tag <script> é utilizada para definir um script do lado do cliente (client-side), como JavaScript! Um curso sobre JavaScript será ministrado em outro momento

51 Head Resumo elementos <head> Tag Descrição <head> <title> <base> <link> <meta> <script> <style> Define informação sobre um documento Define o título de um documento Define um endereço padrão ou um alvo padrão para todos os links em uma página Define um relacionamento entre um documento e uma fonte externa Define metadados sobre um documento HTML Define um script client-side Define informação de estilo para um documento

52 Estilos HTML-CSS Colocando estilo com CSS! O CSS (Cascading Style Sheets) foi introduzido com o HTML 4, para melhorar a forma de colocar estilo nos elementos HTML! É possível adicionar CSS a um documento HTML de quatro maneiras! Inline - utilizando um atributo em elementos HTML! Interno - utilizando um elemento <style> em uma seção <head>! Externo - usando um arquivo CSS externo

53 Estilos HTML-CSS Estilos inline! Um estilo inline pode ser utilizado se um único estilo for aplicado a uma única ocorrência de um elemento! Basta colocar um atributo de estilo da tag de interesse! O atributo pode conter qualquer propriedade do CSS <p style="color:blue;margin-left:20px;">this is a paragraph.</p>

54 Estilos HTML-CSS Exemplo - cor de fundo: <!DOCTYPE html> <html>! <body style="background-color:yellow;"> <h2 style= background-color:red;">isso é um heading</h2> <p style= background-color:green;">isso é um parágrafo.</p> </body>! </html>

55 Estilos HTML-CSS Exemplo - fonte, cor e tamanho: <!DOCTYPE html> <html>! <body> <h1 style= font-family:verdana;">um heading</h1> <p style= font-family:arial;color:red;font-size:20px;">um parágrafo.</p> </body>! </html>

56 Estilos HTML-CSS Exemplo - Alinhamento do texto: <!DOCTYPE html> <html>! <body> <h1 style= text-align:center;">heading alinhado no centro</h1> <p>this is a paragraph.</p> </body>! </html>

57 Estilos HTML-CSS Style Sheet Interno! Um style sheet interno pode ser utilizado se um documento possui estilo único! São definidos na seção <head> de uma página HTML <head> <style> body {background-color:yellow;} p {color:blue;} </style> </head>

58 Estilos HTML-CSS Style Sheet Externo:! É ideal quando um estilo é aplicado a várias páginas! É possível alterar o estilo de um website inteiro ao alterar apenas um arquivo! Cada página pode referenciar um arquivo CSS com a tag <link> que vai na seção <head> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

59 Imagens Em HTML, imagens são definidas a partir de uma tag <img>! A tag <img> é vazia (empty), ou seja, possui apenas atributos e não possui tag de fechamento! Para apresentar uma imagem em uma página, é necessário usar o atributo src! O valor do atributo src é a URL da imagem que se deseja apresentar! Sintaxe: <img src="url" alt="some_text">

60 Imagens Atributo Alt! O atributo obrigatório alt especifica um texto alternativo para uma imagem, se a imagem não puder ser apresentada! O valor desse atributo é definido pelo autor do documento! Fornece informação alternativa à imagem se, por acaso o leitor não puder ver o documento! conexão lenta, um erro no atributo src ou se o usuário utiliza um leitor de tela <img src="smiley.gif" alt="smiley face">

61 Imagens Configurar altura e largura! Utiliza-se os atributos height e width! Por padrão são especificadas em pixels! É uma boa prática sempre determinar a altura e largura de uma imagem! Se esses atributos são configurados, o espaço necessário para a imagem é reservado quando a página é carregada! Sem esses atributos o layout da página muda enquanto a página é carregada

62 Imagens Dicas úteis:! Se um arquivo HTML contém 10 imagens, 11 arquivos são necessários para apresentar a imagem! Carregar imagens toma tempo! Quando uma página web é carregada, o navegador traz a imagem do servidor web e insere na página! Deve-se tomar cuidado com a localização da imagem para que o usuário

63 Tabelas Tabelas são definidas com a tag <table>! Tabelas são divididas em linhas com a tag <tr>! As linhas são divididas em dados com a tag <td>! Uma linha pode ser dividida em headings com a tag <th>

64 Tabelas Exemplo <table style="width:100%"> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> <tr> <td>john</td> <td>doe</td> <td>80</td> </tr> </table>

65 Tabelas Tabelas são definidas com a tag <table>! Tabelas são divididas em linhas com a tag <tr>! As linhas são divididas em dados com a tag <td>! Uma linha pode ser dividida em headings com a tag <th> <table style="width:100%"> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> <tr> <td>john</td> <td>doe</td> <td>80</td> </tr> </table>

66 Tabelas Exemplos:! Tabela com atributo de borda! Tabela com bordas finas! Tabela com espaçamento de células! Heading de tabelas! Tabela com espaçamento de borda! Tabela com célula que ocupa mais de uma coluna! Tabela com célula que ocupa mais de uma linha! Tabela com legenda

67 Tabelas Tabela com atributo de borda <table border="1" style="width:100%"> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table>

68 Tabelas Tabela com bordas finas table, th, td { border: 1px solid black; border-collapse: collapse; }

69 Tabelas Tabela com espaçamento de células table, th, td { border: 1px solid black; border-collapse: collapse; } th,td { padding: 15px; }

70 Tabelas Heading de tabelas <table style="width:100%"> <tr> <th>firstname</th> <th>lastname</th> <th>points</th> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table>

71 Tabelas Tabela com espaçamento de borda table { border-spacing: 5px; }

72 Tabelas Tabela com célula que ocupa mais de uma coluna <table style="width:100%"> <tr> <th>name</th> <th colspan="2">telephone</th> </tr> <tr> <td>bill Gates</td> <td> </td> <td> </td> </tr> </table>

73 Tabelas Tabela com célula que ocupa mais de uma linha <table style="width:100%"> <tr> <th>first Name:</th> <td>bill Gates</td> </tr> <tr> <th rowspan="2">telephone:</th> <td> </td> </tr> <tr> <td> </td> </tr> </table>

74 Tabelas Tabela com legenda <table style="width:100%"> <caption>monthly savings</caption> <tr> <th>month</th> <th>savings</th> </tr> <tr> <td>january</td> <td>$100</td> </tr> <tr> <td>february</td> <td>$50</td> </tr> </table>

75 Parte III

76 Listas HTML pode ter listas desordenadas, ordenadas e listas de descrição Lista desordenada Primeiro item Segundo item Terceiro item <ul> <li>café</li> <li>chá</li> <li>leite</li> </ul> Lista ordenada 1. Primeiro item 2. Segundo item 3. Terceiro item <ol> <li>café</li> <li>leite</li> </ol> Lista de descrição Primeiro item Descrição do item Segundo item Descrição do item <dl> <dt>café</dt> <dd>- bebida quente preta</dd> <dt>leite</dt> <dd>- bebida gelada branca</dd> </dl>

77 Blocos Elementos HTML podem ser agrupados com <div> e <span>! A maioria dos elementos HTML são definidos como elementos em nível de bloco ou inline! Elementos de bloco! Começam e terminam com uma nova linha! Exemplos: <h1>, <p>, <ul>, <table>

78 Blocos Elementos inline! Normalmente são apresentados sem começar uma nova linha! Exemplos: <b>, <td>, <a>, <img>

79 Blocos O elemento <div>! É um elemento em nível de bloco que pode ser utilizado com container para agrupar outros elementos HTML! Não possui significado especial! Por ser um elemento em nível de bloco, o navegador irá apresentar uma quebra de linha antes e depois! Quando utilizado com o CSS, o elemento <div> pode ser usado para aplicar estilo em blocos de conteúdo! Utilizado, também, para montar o layout (em vez de usar tabelas)

80 Blocos O elemento <span>! É um elemento inline que pode ser utilizado como container para texto! Não possui significado especial! Pode ser utilizado com CSS para configurar atributos para partes do texto

81 Layout O layout do website é importante para que a parte visual do site fique confortável para o usuário! O projeto do layout deve ser feito cuidadosamente! A maioria dos websites utilizam múltiplas colunas para exibir o conteúdo, como numa revista ou jornal! Essas múltiplas colunas são criadas com os elementos <div> ou <table>! O CSS é utilizado para posicionar os elementos, para criar planos de fundo e tornar o site mais colorido

82 Layout Mesmo sendo possível criar layouts elegantes com tabelas, as tabelas foram criadas para apresentar conteúdo em forma de tabela apenas - NÃO como uma feramente de layout!! O elemento <div> é um elemento em nível de bloco utilizado para agrupar elementos HTML

83 Layout Queremos produzir o seguinte layout

84 Layout <!DOCTYPE html> <html> <body>! <div id="container" style="width:500px">! <div id="header" style="background-color:#ffa500;"> <h1 style="margin-bottom:0;margin-top:0;">main Title of Web Page</h1></div>! <div id="menu" style="background-color:#ffd700;height:200px;width:100px;float:left;"> <b>menu</b><br> HTML<br> CSS<br> JavaScript</div>! <div id="content" style="background-color:#eeeeee;height:200px;width:400px;float:left;"> Content goes here</div>! <div id="footer" style="background-color:#ffa500;clear:both;text-align:center;"> Copyright W3Schools.com</div>! </div>! </body> </html>

85 Layout Dicas úteis:! Uma das vantagens de utilizar CSS é que se o código for colocado em um arquivo externo, o site fica mais fácil de ser mantido. É possível trocar o layout do site inteiro editando apenas um arquivo! Como criar o layout de uma página pode demandar muito tempo, uma opção mais rápida é utilizar um template (são layouts prontos que o desenvolvedor pode usar e alterar).

86 Formulários Formulários são utilizados para receber diferentes tipos de entrada do usuário! Os dados são passados para o servidor! Um formulário pode conter elementos como campos de texto, checkboxes, radio-buttons e submit-buttons! Pode conter também listas de seleção, textarea, fieldset, legend, e rótulos

87 Formulários A tag <form> é utilizada para criar um formulário HTML: <form>. input elements. </form>

88 Formulários O elemento <input>! O elemento mais importante é um formulário é o elemento <input>! É utilizado para coletar informação do usuário! Pode ser de várias formas, dependendo do atributo type! Pode ser do tipo texto, checkbox, radio-button, submit-button

89 Formulários A tag <input type= text > define uma entrada de texto! O formulário não é visível! A largura do campo de texto é 20 caracteres <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>

90 Formulários A tag <input type= password > define o campo de senha! Os caracteres são mascarados (apresentados em asteriscos ou círculos) <form> Password: <input type="password" name="pwd"> </form>

91 Formulários A tag <input type="radio"> define um radio-button! Um radio-button deixa o usuário escolher apenas uma de um número limitado de entradas <form> <input type="radio" name="sex" value="male">male<br> <input type="radio" name="sex" value="female">female </form>

92 Formulários A tag <input type= checkbox > define um checkbox! Checkboxes deixa que o usuário selecione uma ou mais opções de um lista limitada de escolhas <form> <input type="checkbox" name="vehicle" value="bike">i have a bike<br> <input type="checkbox" name="vehicle" value="car">i have a car </form>

93 Formulários A tag <input type= submit > define um submit button! O submit button é usado para enviar um formulário para o servidor! Os dados são enviados para a página especificada no atributo action do formulário <form name="input" action="demo_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> </form>

94 Formulários Tag Descrição <form> Define um formulário para entrada do usuário <input> Define um controle de entrada <textarea> Define uma área de texto de entrada <label> Define um rótulo para um elemento de entrada <fieldset> Agrupa elementos relacionados em um formulário <legend> Define uma legenda para o elemento <fieldset> <select> Define uma lista drop-down <optgroup> Define um grupo de opções relacionadas em uma lista drop-down <option> Define uma opção em uma lista drop-down <button> Define um botão

95 Iframes Um iframe é utilizado para apresentar uma página web dentro de uma página web! O atributo src configura a URL da página a ser acessada! Os atributos height e width são utilizados para especificar a altura e a largura do iframe! Os valores dos atributos são especificados em pixels por padrão, mas também podem ser em percentual <iframe src="url"></iframe> <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

96 Cores Cores são apresentadas utilizando o sistema RGB (Red Green Blue)! O menor valor que pode ser atribuido para uma das cores é 0 (#00)! O maior valor é 255 (#FF)! Os valores em hexadecimal são escritos com seis dígitos começando com o sinal #

97 Cores Exemplos de cores Cor Cor em HEX Cor RGB # rgb(0,0,0) #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)

98 Cores 140 nomes de cores são definidos na especificação HTML e CSS! 17 cores padrão e 123 não-padrão! As 17 cores padrão são: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white e yellow

99 Cores Nome da cor HEX Cor Aqua #00FFFF Black # Blue #0000FF Fuchsia #FF00FF Gray # Green # Lime #00FF00 Maroon # Navy # Olive # Orange #FFA500 Purple # Red #FF0000 Silver #C0C0C0 Teal # White #FFFFFF Yellow #FFFF00

100 Parte IV

101 JavaScript JavaScript torna as páginas HTML mais dinâmicas e interativas! A tag <script> é utilizada para definir um script do lado do cliente! O elemento <script> contém código de script ou aponta para um arquivo de script externo com o atributo src

102 JavaScript Exemplo <!DOCTYPE html>! <html>! <body>!! <p id="demo"></p>!! <script>! document.getelementbyid("demo").innerhtml = "Hello JavaScript!";! </script>!! </body>! </html>

103 JavaScript A tag <noscript> é usada para fornecer um conteúdo alternativo! Scripts desabilitados no navegador! Navegador não suporta o script <script> document.getelementbyid("demo").innerhtml = "Hello JavaScript!"; </script> <noscript>sorry, your browser does not support JavaScript!</noscript>

104 Entidades Caracteres reservados devem ser substituídos por entidades de caracteres! Caracteres que não estão presentes no teclado também podem ser substituídos por entidades! Por exemplo, caso o desenvolvedor queira colocar os símbolos < e >, o navegador pode confundir o texto com uma tag! Para escrever <, deve-se escrever &lt ou &#60 &entity_name; OR &#entity_number;

105 Entidades Non Breaking Space! Uma entidade comum em HTML é o! Os navegadores sempre truncam espaços em páginas HTML! Se forem escritos 10 espaços, o navegador remove 9 deles! Para adicionar espaços além do permitido, utiliza-se a entidade &nbsp

106 Entidades Outras entidades Resultado Descrição Nome da Entidade Número da Entidade non-breaking space < menor que < < > maior que > > & e comercial & & centavos libra yen japonês euro copyright marca registrada

107 Símbolos Símbolos matemáticos, setas, símbolos técnicos e formas não são apresentados no teclado! Para adicionar símbolos, pode-se usar nomes ou números de entidades <p> </p> <p> </p> <p> </p>

108 Símbolos Alguns símbolos matemáticos Char Número Entidade Descrição Para todo Derivada parcial Existe pelo menos um Conjunto vazio Nabla Pertence Não pertence Produto n-ário Soma n-ária

109 Símbolos Alguns outros símbolos Char Number Entity Description Copyright Marca registrada Euro Marca Seta para esqueda Seta para cima Seta para direita Seta para baixo

110 Charset (Character Sets) Para apresentar uma página HTML corretamente, o navegador precisa saber qual codificação de caracteres ele deve usar! O primeiro padrão de codificação de caractere foi o ASCII que define 127 caracteres alfanuméricos diferentes a serem usados na internet! Suporta! Números (0-9)! Letras (A-Z)! Alguns caracteres especiais (! $ + - ( < >)

111 Charset ANSI foi o charset padrão para o windows (até o 95)! Suporta 256 códigos diferentes! ISO , que é uma extensão do ASCII, é o charset padrão para o HTML 4! Também suporta 256 códigos diferentes! Como esses códigos são muito limitados, no HTML 5 a codificação padrão foi mudada para o Unicode (UTF-8)! Cobre quase todos os símbolos e caracteres no mundo! Todos os processadores HTML 4 também suportam UTF-8

112 Charset Para apresentar uma página HTML corretamente, um servidor web deve saber o charset usado na página! Isso é especificado na tag <meta> <meta charset="utf-8">

113 URL Encode URL (Uniform Resource Locator) é outra palavra para endereço web! Pode ser composta por palavras ou um endereço IP! ! Os navegadores requisitam páginas dos servidores web usando uma URL

114 URL Encode Quando o usuário clica em um link de uma página web, a tag <a> referencia um endereço na world wide web! Uma URL é usada para acessar dados ou um documento! Sintaxe scheme://host.domain:port/path/filename

115 URL Encode Significado! scheme - define o tipo do serviço de Internet (e.g. http)! host - define o domain host (padrão é o www)! domain - define o nome do domínio, google.com! port - define o número da porta no host (e.g. 80 para http)! path - define um caminho no servidor! filename - define o nome do documento ou recurso

116 URL Encode URL Schemes comuns Scheme Significado As paginas são usadas para http HyperText Transfer Protocol Páginas web comuns começam com Não encrostada https Secure HyperText Transfer Protocol Secure web pages. All information exchanged are encrypted ftp File Transfer Protocol For downloading or uploading files to a website. Useful for domain maintenance file A file on your computer

117 URL Encode URLs podem apenas ser enviadas pela Internet utilizando ASCII! Como URLs geralmente contém caracteres fora do ASCII, ela deve ser convertida! URL encoding converte os caracteres para ASCII substituindo caracteres fora da tabela em um % seguido de dois dígitos hexadecimais! URLs não contém espaços que são substituídos por um sinal +

118 URL Encode Exemplos Caractere URL-encoding %80 %A3 %A9 %AE À %C0 Á %C1 Â %C2 Ã %C3 Ä %C4 Å %C5

119 Exercícios