HTML - Tecnologias Web_HTML PDF

HTML – Links … Os links são facilmente percetíveis porque ao passar o rato sobre uma hiperligação, a seta do rato transforma-se numa pequena mão....

HTML – Links … Os links são facilmente percetíveis porque ao passar o rato sobre uma hiperligação, a seta do rato transforma-se numa pequena mão. Uma hiperligação não tem de ser um texto pode ser uma imagem ou qualquer outro elemento HTML! O atributo mais importante do elemento é o href, que indica o destino da hiperligação. Por defeito, as hiperligações (links) aparecem da seguinte forma em todos os browsers: Uma ligação não visitada é sublinhada e de cor azul. Uma hiperligação visitada é sublinhada e cor roxa. Uma ligação ativa é sublinhada e de cor vermelha. Exercício: É possível alterar os estilos das hiperligações utilizando CSS, conforme a imagem. A página/documento destino é normalmente é apresentado na janela atual/ativa do browser, exceto quando se especifica outro destino. Caminho absoluto: href=“https://www. https://www....”... referência para um documento/página na web, o qual está alojado num servidor diferente. Caminho relativo: href=“//path …” Referência para um ficheiro (imagem, html, …) no mesmo servidor em que se encontra alojado o site. Ao contrário do caminho absoluto não é necessário a indicação do protocolo, nem do host, apenas do caminho (path). “../”: quando se pretende aceder à diretoria (folder) hierarquicamente superior. Símbolo ISEC – Link Interno 1 - Abrir numa nova janela 2 - Link só na palavra ISEC  HTML – Links … Exercício Simples: Para criar um link para uma mensagem de correio eletrónico utiliza-se: href=“mailto:... mailto:...” mailto:... É possível definir o título da Exercício Completo: mensagem e restantes destinatários. Os espaços num URL têm que ser substituídos por “%20” (UTF-8).  HTML – Links … Para navegação interna, isto é dentro da própria página, utiliza-se href=“# #value” value Muito útil quando se tem uma página muito longa, pois evita o scroll repetido na página. O símbolo # no atributo href indica ao browser que se trata de uma âncora de navegação. Exercício: O valor do href é o valor do atributo id destino. … href=“#part2”>… …  HTML – Imagem A tag HTML img> é utilizada para incorporar uma imagem numa página web. Tecnicamente, as imagens não são inseridas numa página web, mas sim ligadas a páginas web. Exercício: A tag img> cria/aloca espaço para a imagem referenciada. A tag img> contém apenas atributos e não tem uma closing tag. A tag img> tem dois atributos obrigatórios: src - especifica o caminho para a imagem. alt - especifica um texto alternativo para a imagem. 1 – nome da imagem inválido  HTML – O elemento HTML picture> permite apresentar imagens diferentes para diferentes dispositivos ou tamanhos de ecrã. O elemento picture> contém um ou mais elementos source>, cada um referindo-se a diferentes imagens através do atributo srcset. srcset Assim o browser pode escolher a imagem que melhor se adapta à visualização e/ou ao dispositivo atual. Cada elemento source> tem um atributo media que define qual a imagem mais adequada. Obrigatório indicar um elemento img> como o último elemento filho do elemento picture>. O elemento img> é usado pelos browsers que não suportam o elemento picture>, ou se nenhuma das tags source> corresponder. Vantagens do elemento picture>: Largura de banda: se o ecrã ou dispositivo for pequeno, não é necessário carregar um ficheiro de imagem grande. O browser utilizará o primeiro elemento com valores de atributo correspondentes e ignorará qualquer um dos elementos seguintes. Suporte de formatos: alguns browsers ou dispositivos podem não suportar todos os formatos de imagem. Ao utilizar o elemento , é possível adicionar imagens de todos os formatos e o browser utilizará o primeiro formato que reconhecer e ignorará qualquer um dos seguintes elementos.  HTML – Exercício: https://www.w3schools.com/html/  HTML – O elemento HTML permite mostrar/reproduzir um vídeo numa página web. O atributo controls adiciona controlos de vídeo, como reprodução, pausa e volume. Os atributos de largura e altura devem ser sempre definidos, caso contrário, a página pode tremer enquanto o vídeo é carregado. Exemplo e Exercício: https://www.w3schools.com/html/mov_bbb O elemento source> permite especificar ficheiros de vídeo alternativos que o browser pode escolher. O browser usará o primeiro formato reconhecido. O texto entre as tags video> e só será exibido no browser se não suportar o elemento video>. 1 – substituir o atributo controls por autoplay: inicia automaticamente o vídeo; 2 – substituir o atributo controls por autoplay muted: inicia automaticamente o vídeo sem som;  HTML – O elemento HTML permite reproduzir um ficheiro audio numa página web. O atributo controls adiciona controlos de audio, como reprodução, pausa e volume. Exemplo e Exercício: O elemento source> permite especificar ficheiros de audio alternativos https://www.w3schools.com/html/ que o browser pode escolher. O browser utilizará o primeiro formato reconhecido. O texto entre as tags audio> e só será exibido se o browser não suportar o elemento audio>. 1 – substituir o atributo controls por autoplay: inicia automaticamente o ficheiro audio; 2 – substituir o atributo controls por autoplay muted: inicia automaticamente o áudio sem som;  HTML – YouTube vídeos Exemplos e Exercícios: Reproduzir um vídeo do YouTube em HTML: Fazer upload do vídeo no YouTube Anotar o ID do vídeo Definir um elemento iframe> na página web Indicar no atributo src o URL do vídeo Utilizar os atributos width e height para delimitar a área de display do vídeo Os controlos do vídeo são adicionados, como parâmetros, no URL do vídeo.  HTML – O elemento HTML especifica um inline frame, isto é, um quadro onde se coloca/adiciona um outro documento html. Deve-se utilizar CSS para estilizar o iframe>. Deve-se sempre incluir o atributo title no elemento iframe>, para que os leitores de ecrã possam ler do que se trata o conteúdo do iframe>. Indicar no atributo src a localização do documento a inserir. HTML – O atributo sandbox permite um conjunto extra de restrições para o conteúdo do iframe>. O valor do atributo sandbox pode ser vazio (então todas as restrições são aplicadas) ou uma lista de valores pré-definidos, separados por espaços, que irá REMOVER as restrições específicas. Quando o atributo sandbox está presente, este irá: Tratar o conteúdo como sendo de uma origem única Bloquear a submissão de formulários Bloquear a execução de scripts Desativar APIs Impedir que os links sejam direcionados para outros contextos de navegação Impedir que o conteúdo utilize plug-ins (através de , , ou outro) Impedir que o conteúdo navegue no seu contexto de navegação de nível superior Bloquear funcionalidades acionadas automaticamente (como a reprodução automática de um vídeo ou a focagem automática de um controlo de formulário)  HTML – Exercício 1: Exercício 2: Exercício 3: https://www.w3schools.com/tags/  HTML – Formulários Um formulário HTML é utilizado para recolher dados do utilizador. A maior parte das vezes, os dados do utilizador são enviados para um servidor para processamento. Com o formulário HTML pretende-se: Facilitar a recolha de dados do utilizador através de vários elementos. Estruturar elementos de “data input” através de elementos form>. Definir ações para a apresentação de dados após a conclusão do formulário. Suportar validação do lado do cliente para uma melhor experiência do utilizador. Estes são os seguintes elementos HTML form>: label>: define uma descrição para os elementos form>. : utilizado para obter dados de entrada (input data) do formulário e pode ser do tipo texto, palavra-passe, correio eletrónico, etc… button>: defini um botão clicável para controlar outros elementos ou executar uma funcionalidade. select>: utilizado para criar uma lista “drop-down”, ou “combo-box”. textarea>: utilizado quando se pretende texto mais longo. fieldset>: utilizado para desenhar um quadro à volta dos elementos nele contido e agrupar informação relacionada. legend>: define uma descrição para o elemento fieldset>. datalist>: utilizado para criar uma lista de opções pré-definida para controlos de entrada. : mostra o resultado de cálculos efetuados. option>: define as opções de uma lista “drop-down”. optgroup>: utilizado para definir um grupo de opções sobre o mesmo assunto, numa lista “drop-down”.  HTML – Atributos … O atributo action define a ação a ser realizada quando o form é submetido. Normalmente, os dados(data) do formulário são enviados para o servidor quando o utilizador seleciona o botão de submit. Neste exemplo, os dados do formulário são enviados para o ficheiro “action_page.php”. … marcar o resultado. O atributo method define qual o método HTTP a ser utilizado GET é bom para dados não seguros, como cadeias de consulta no Google. quando se submete os dados do formulário. Pode ter como valor “get” (valor por defeito) ou “post”. Com o método “get” os dados do formulário podem ser enviados como variáveis na URL Método POST: (Ex:https://gw2.no/nbk/get_nbk_vkurv.php?uid=test&pwd=30309) Anexa os dados do formulário dentro do corpo do pedido HTTP (os dados do formulário submetido não são visíveis no URL). Com o método “post” os dados do formulário são enviados como Este método não tem limitações de tamanho e pode ser utilizado para transação HTTP post. enviar grandes quantidades de dados. As submissões de formulários com POST não podem ser marcadas. Utilizar sempre o POST se os dados do formulário contiverem informações sensíveis ou pessoais!  HTML – Elementos Elemento pode ser apresentado de várias formas, dependo do seu atributo type. O elemento label> : define uma descrição para vários elementos do formulário. é útil para os utilizadores de leitores de ecrã, porque o leitor lê a descrição em voz alta enquanto o utilizador Exercício 1: se concentra no elemento de entrada. https://www.w3schools.com/ ajuda também os utilizadores que têm dificuldade em clicar em regiões muito pequenas (como radio buttons ou checkbox) - porque quando o utilizador clica no texto dentro do elemento label>, altera o valor do radio button/check box. o atributo for deve ser igual ao atributo id do elemento para os associar ou então colocar, por exemplo, o elemento dentro do elemento label>.  HTML – Elementos Exercício: O elemento select>: define uma lista “drop-down”. o elemento option> define uma opção que pode ser selecionada. por defeito, o primeiro item da lista é selecionado. para definir uma opção pré-selecionada, adicionar o atributo selected à opção. utilizar o atributo size para especificar o número de opções visíveis. utilizar o atributo multiple para permitir que o utilizador selecione mais do que uma opção. o atributo name é necessário para referenciar os dados do formulário depois de este ser submetido (ao omitir o atributo name, não serão submetidos quaisquer dados da lista). o atributo id é necessário para associar a lista “drop-down” a um elemento label>. HTML – Elementos Exercício utilizando o elemento num elemento :  HTML – Elementos O elemento button>: define um botão clicável. dentro deste elemento é possível inserir texto e elementos como , , strong>, br>, img>, etc… se o botão for criado com o elemento , não é possível inserir texto e elementos como com o elemento button>. deve-se especificar o atributo type para indicar ao browser que tipo de botão se trata, porque browsers diferentes podem utilizar tipos diferentes de botão. Click Me!  HTML – Elementos Exercício 2: Exercício 1:  HTML – Elementos O elemento legend>: Exercício: define a descrição para o elemento fieldset>. O elemento fieldset>: utilizado para agrupar elementos e/ou dados relacionados. o atributo disabled utiliza-se para desativar ou deixar inativos todos os elementos dentro desse grupo (). o atributo form tem como valor o id do formulário a que o elemento fieldset> pertence. o atributo name indica um nome para o elemento fieldset>.  HTML – Elementos Exercício: O elemento datalist>: especifica uma lista de opções predefinidas para um elemento de entrada. é utilizada para fornecer uma funcionalidade de "preenchimento automático“ ou “autocomplete” para elementos de entrada. os utilizadores verão uma lista das opções pré- definidas à medida que introduzem os dados. o valor do atributo id do elemento datalist> deve ser igual ao valor do atributo list do elemento , define um campo de entrada de texto, de uma linha. Exercício : password”> define um campo de entrada para palavras passe, em que os caracteres estão escondidos, isto é, substituídos por asteriscos ou círculos. submit ”> define um botão para submeter os dados do formulário.  HTML – Tipos de Input Exercício : Exercício : Exercício : reset ”> define um botão para repor todos os valores do formulário, para os seu valores predefinidos. radio”> define botões de opção, das quais só uma pode ser escolhida. checkbox”> define caixas de seleção, onde é possível selecionar nenhuma opção ou várias opções.  HTML – Tipos de Input Exercício : Exercício : Exercício : button”> define um botão, que não submete automaticamente os dados do formulário. color ”> utilizado para campos de entrada que devem conter uma cor. Dependendo do browser, pode aparecer um seletor de cores(color picker) no campo de entrada. date”> define um campo de entrada no qual uma data deve ser inserida.  HTML – Tipos de Input Exercício : Exercício : local”> define um campo de Exercício : entrada que permite inserir uma data e hora, e dependendo do browser, é possível selecionar a data através de um calendário. email”> utilizado para campos de entrada que devem ser preenchidos com um endereço de email. Exercício : Dependendo do browser, o campo pode ser validado automaticamente na submissão do formulário. image”> define uma imagem como um botão de submit. file”> define um campo de seleção de ficheiros e um botão “Procurar” para o upload de ficheiros.  HTML – Atributos do elemento Input value: value: este atributo especifica o valor inicial do campo de entrada. readonly: readonly: este atributo indica que o campo é só de leitura, isto é, não possível editar o conteúdo do campo. No entanto o valor/conteúdo do campo é enviado na submissão do formulário. disabled: disabled: este atributo indica que o campo está desativo. Não possível copiar o seu conteúdo, não possível clicar/selecionar o campo. O valor deste campo não é enviado na submissão do formulário. Exercício: size: size: especifica a largura visível, em caracteres, de um campo de entrada. Só deve ser utilizado em input do tipo: text, search, tel, url, email e password. multiple: multiple: especifica que ao utilizador é lhe permitido introduzir mais que um valor no campo de entrada. Só deve ser utilizado em inputs do tipo: email e file. pattern: pattern: especifica uma expressão regular com o qual o valor do campo de entrada é verificado, quando o formulário é submetido. Só deve ser utilizado em inputs do tipo: text, date, searh, url, tel, email e password. placeholder: placeholder: indica um breve sugestão que descreve o valor esperado, ou o seu formato, de um campo de entrada. É visível no campo de entrada até o utilizador introduzir um valor. Só deve ser utilizador em inputs do Regular Expressions: tipo: text, search, url, tel, email e password. required: required: especifica que um campo de entrada deve ser preenchido antes de submeter o formulário. Só deve ser utilizado em inputs do tipo: text, search, url, tel, email, password, date pickers, number, checkbox, radio e file. autofocus: autofocus: especifica que um campo de entrada deve ter o “focus” (o cursor deve estar nesse campo) quando a página é carregada. autocomplete: autocomplete: especifica que o preenchimento automático está ativado ou desativado. Este atributo pode estar presente no elemento form> e no do tipo: text, search, url, tel, email, password, date pickers, range e color. HTML – Exercício de formulário O exercício tem as seguintes características: Um grupo com “Dados Pessoais”: Nome: campo obrigatório e com ajuda ao preenchimento (Nome Completo). Género: M e F e só uma das opções deve ser selecionada. Idade: campo numérico e obrigatório, tem como valor mínimo 0 e máximo 60. Um grupo sobre o curso “CtesP” com uma drop-down com as seguintes opções: DW (valor da opção 1). RSI (valor da opção 2) TPSI (valor da opção 3) Campo para “Comentário” e com ajuda ao preenchimento (Insira Comentário). Botão para submeter o formulário. Botão para limpar os dados. A ação do formulário será mailto:[email protected].