Aula 3 - Formulários HTML e CSS - Introdução às Tecnologias Web - PDF

Introdução às tecnologias Web - ITW Aula 3 – Listas, Estilos (CSS), Fontes & Formulários HTML Sumário Marcadores HTML Listas Marcadores especiais Formulários Entrada de dados Usabilidade e acessibilidade CSS’s – Cascading Style Sheet’s Tipos de letra - Fontes Estrutura base de um documento html [relembrando…] Cabeçalho do documento [Este conteúdo não é representado] Titulo do Documento Conteúdo do documento [Este conteúdo é representado e é aqui que deve ser inserido o código HTML criado] Características de um elemento html [relembrando…] Um marcador / etiqueta (tag em inglês) num documento html fica sempre colocada entre os símbolos “”. As etiquetas são responsáveis pela formatação da linguagem Nas últimas versões da linguagem, 1. Um elemento é constituídos por um par de início e de fim de marcador 2. O marcador inicial deve conter a lista de atributos, caso haja Os atributos modificam os valores padrão dos elementos e os valores caracterizam essa mudança. 3. O corpo do marcador pode ter texto ou outros marcadores texto ou outros marcadores Características de um elemento html [relembrando…] Exemplo de um elemento simples (não possui filhos): Os atributos são sempre colocados dentro do marcador inicial Exemplo de um elemento com atributos: Universidade de Aveiro Exemplo de um elemento com filho com atributos: A Universidade de Aveiro é a minha Universidade. Os elementos filho deverão estar completamente inseridos dentro do elemento pai Marcadores HTML Listas Listas Listas ordenadas: … Criar listas ordenadas – Marcador Elementos da lista – Marcador Listas Ordenadas Maçã Pera Laranja Tipo de marcador da lista – Atributo type Valores possíveis: 1, A, a, I, i https://jsfiddle.net/JoaquimSousaPinto/3z0oqyd1/ Listas Listas não ordenadas: … Criar listas não ordenadas – Marcador Elementos da lista – Marcador Listas Não Ordenadas Azul Amarelo Verde Tipo de marcador da lista – Atributo type Valores possíveis: disc, circle, square https://jsfiddle.net/JoaquimSousaPinto/1d5qf05h/ Listas Listas não ordenadas: … Do exemplo da última aula prática… Listas Dicionários / Listas de definições: … Criar lista de definições – marcador: Marcador para identificação do termo: ; Marcador para a definição do termo: HTML Linguagem de marcadores … CSS Linguagem utilizada para … Listas / Resumo Exemplos Listas Maçã Pera Laranja Azul Amarelo Verde HTML Linguagem de marcadores … CSS Linguagem utilizada para … https://jsfiddle.net/JoaquimSousaPinto/juavx9fz/ Marcadores HTML Caracteres Especiais Representação de carateres especiais em HTML Há um conjunto de carateres que, ou não possuem representação direta, ou não pertencem a todos os alfabetos, por isso precisam de uma forma especial de representação. Exemplo: © → © início de caracter especial fim de caracter especial corpo do caracter especial 13 Representação de carateres especiais em HTML Caracteres & símbolos matemáticos: Char Number Entity Description ∀ ∀ ∀ FOR ALL ∂ ∂ ∂ PARTIAL DIFFERENTIAL ∃ ∃ ∃ THERE EXISTS Outros símbolos: Char Number Entity Description ∅ ∅ ∅ EMPTY SETS © © © COPYRIGHT SIGN ∇ ∇ ∇ NABLA ® ® ® REGISTERED SIGN ∈ ∈ ∈ ELEMENT OF € € € EURO SIGN ™ ™ TRADEMARK ∉ ∉ ∉ NOT AN ELEMENT OF ← ← ← LEFTWARDS ARROW ∋ ∋ &ni; CONTAINS AS MEMBER ↑ ↑ ↑ UPWARDS ARROW ∏ ∏ ∏ N-ARY PRODUCT → → → RIGHTWARDS ARROW ∑ ∑ ∑ N-ARY SUMMATION ↓ ↓ ↓ DOWNWARDS ARROW ♠ &spades; BLACK SPADE SUIT ♣ &clubs; BLACK CLUB SUIT ♥ &hearts; BLACK HEART SUIT Fonte: http://www.w3schools.com/html/html_symbols.asp (ver mais) Outros símbolos: http://www.sabinanore.com/design/html-special-symbols/ Marcadores HTML Formulários Formulários HTML … Os formulários são utilizados para a recolha de informação por parte dos utilizadores dos sítios na internet. São inseridos num bloco … Atributos: Name – nome do formulário; Action – endereço da entidade processadora a informação; Method – forma de envio dos dados para a entidade processadora dos dados. Suporta os valores: GET, POST, PUT, DELETE Exemplo: … … Para as aulas de ITW, de modo a que se possam fazer testes com dados reais, a entidade processadora está localizada em http://192.168.160.36/FormEcho.aspx. Nota importante: este endereço só é válido e visível dentro da UA – nas salas de aula ou, de casa, através de uma ligação por VPN. Campos de um formulário Marcador input - O marcador input é um dos principais responsáveis pela recolha de informação em formulários. Sintaxe: Atributos: Type - dependendo do valor assumido por este campo o comportamento do marcador altera-se. Os valores possíveis para ao atributo type são: button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week (23!) Campos de um formulário Texto - Linha simples – Permite a inserção de uma linha de texto Atributos: Type – define o tipo de input. Para uma linha de texto, "texto"; Name – define o nome do atributo. Obrigatório. De outra forma essa informação não é passada à entidade processadora da informação; Value – (pode estar vazio ou omisso). Quando preenchido contém o valor a apresentar pela linha de texto; Placeholder – texto que aparece na caixa quando esta está vazia. Normalmente serve de ajuda ao utilizador. Exemplos: Campos de um formulário Texto - Password – Permite a inserção de uma linha de texto sem que o seu conteúdo possa ser lido na interface Atributos: Type – define o tipo de input. Para uma linha de texto, "password"; Name – define o nome do atributo. Obrigatório. De outra forma essa informação não é passada à entidade processadora da informação; Value – (normalmente/recomendavelmente vazio). Não faz sentido introduzir um texto que se pretende secreto e depois ele estar escrito no documento html … Placeholder – texto que aparece na caixa quando esta está vazia. Normalmente serve de ajuda ao utilizador. Exemplo: Campos de um formulário Texto – Hidden – Permite a inserção de texto sem que o seu conteúdo seja mostrado na interface Atributos: Type – define o tipo de input. Para uma linha de texto, "hidden"; Name – define o nome do atributo. Obrigatório. De outra forma essa informação não é passada à entidade processadora da informação; Value – contém o valor a enviar para a entidade processadora. Exemplo: Campos de um formulário Texto multilinha – … Permite a inserção de um texto com várias linhas. Atributos: Name – define o nome do atributo. Obrigatório. De outra forma essa informação não é passada à entidade processadora da informação; Rows – número de linhas Cols – número de colunas Placeholder – texto que aparece na caixa quando esta está vazia. Normalmente serve de ajuda ao utilizador Exemplo: Campos de um formulário Botão de submit- O botão de submit é o que permite o envio dos dados do formulário para a entidade processadora Atributos: Type – define o tipo de input. Para as opções, o tipo é "submit"; Name – define o nome do atributo. Opcional. Value – contém o texto do botão; também é enviado para a entidade processadora, caso o botão tenha um nome. Tal como referido, Para as aulas de ITW, de modo a que se possam fazer testes com dados reais, a entidade processadora está localizada em http://192.168.160.36/FormEcho.aspx. Nota importante: este endereço só é válido e visível dentro da UA – nas salas de aula ou, de casa, através de uma ligação por VPN. https://jsfiddle.net/JoaquimSousaPinto/ke8zpz9e/ Campos de um formulário Botão de reset - O botão de reset permite reverter o estado atual de um formulário ao seu estado inicial – tal como foi mostrado inicialmente - Atributos: Type – define o tipo de input. Para as opções, o tipo é "reset"; Name – define o nome do atributo. Opcional. Value – contém o texto a mostrar no botão. Campos de um formulário Secções do formulário – … O marcador … permite criar secções dentro de um formulário. Marcadores filhos: Cabeçalho da secção: …; Todos os outros campos de um formulário. Atributos: Name – define o nome do fieldset. Campos de um formulário Checkboxes - Este marcador permite a escolha de ZERO OU MAIS opções de uma lista Atributos: Type – define o tipo de input. Para as opções, o tipo é “checkbox"; Name – define o nome do atributo. Obrigatório. De outra forma essa informação não é passada à entidade processadora da informação; Value – contém o valor a enviar para a entidade processadora. Exemplos: Meios de transporte Bicicleta Carro Comboio https://jsfiddle.net/JoaquimSousaPinto/m5yhd5hq/ Campos de um formulário Radio boxes - Este marcador permite a escolha de ZERO OU UMA OPÇÃO de uma lista. Atributos: Type – define o tipo de input. Para as opções, o tipo é “checkbox"; Name – define o nome do atributo. Obrigatório. De outra forma essa informação não é passada à entidade processadora da informação; Value – contém o valor a enviar para a entidade processadora. Exemplos: Cor preferida Azul Verde Vermelho Outra Nota importante: se mais que um input do tipo radio possuir o mesmo nome, estes input’s comportam-se como um grupo. Num grupo NENHUMA ou APENAS UMA das opções pode ser selecionada https://jsfiddle.net/JoaquimSousaPinto/thxgqfvg/ Campos de um formulário Botão genérico - O botão genérico não possui um comportamento associado por omissão. Depende do que for configurado pelo utilizador Atributos: Type – define o tipo de input. Para as opções, o tipo é “button"; Value – contém o texto a mostrar no botão. Voltaremos a este botão quando for lecionada programação de comportamento de botões Campos de um formulário Botão genérico - O botão do tipo file permite o envio de ficheiros para o servidor - Atributos: Type – define o tipo de input. Para as opções, o tipo é “reset"; Name – contém o nome do ficheiro a enviar para a entidade processadora. Nota importante: para que os ficheiros possam ser recolhidos no servidor é imprescindível incluir no marcador do o atributo enctype com o valor multipart/form-data....... Campos de um formulário Listas de valores – seleção simples - … As listas de valores são importantes quando se pretende que o utilizador selecione valores dentro de uma gama pré-definida. Para definer a lista é utilizado o marcador …. As opções da lista são delimitadas por marcadores … Atributos: Value – o valor a enviar para a entidade processadora Selected – (Opcional). Indica que esta opção é a pré-selecionada. Toma sempre o valor "selected". Audi Peugeot Other Caso o utilizador escolha a marca Audi, o valor enviado à entidade processadora será “1”! https://jsfiddle.net/JoaquimSousaPinto/xhLfg5t8/ Campos de um formulário Listas de valores – seleção múltipla - … Qualndo se pretende utilizer uma lista em que utilizador pode escolher mais do que um elementos, isso deve ser assinalado no marcador … com o atributo multiple. Atributos: Multiple – atributo que indica que é possível escolher mais que um elemento na lista. Caso esteja presente, toma sempre o valor “multiple”. keyboard mouse speakers Pergunta: como se escolhe mais que um elemento na lista (keyboard e mouse, por exemplo …)? https://jsfiddle.net/JoaquimSousaPinto/xhLfg5t8/2/ Usabilidade e acessibilidade Labels Os labels são utilizados para associar um texto explicativo a um marcador de um formulário. A associação entre ambos faz-se através do atributo ID Isso significa que para além de um Name, os marcadores passam também a necessitar de um atributo ID que pode, ou não, ser igual ao Name. First Name Sempre que se seleciona um label (click com o rato), se o campo associado for um input do tipo "text" ou uma o campo respetivo fica selecionado; se for um input do tipo "radio" a opção fica imediatamente selecionada; se for um input do tipo "checkbox" a opção troca de estado (selecionado/desselecionado) Usabilidade e acessibilidade Labels Os labels são muito importantes do ponto de vista da usabilidade e da acessibilidade de uma página web. São obrigatórios para que um formulário seja considerado “acessível” nos testes respetivos. Para mais informação sobre acessibilidade na web , ver em: https://www.w3.org/WAI/test-evaluate/, consultado em 03out2023 Para testar páginas pessoais sobre a sua conformidade de acordo com as normas de acessibilidade, testar em: https://achecks.org/achecker consultado em 03out2023 Usabilidade e acessibilidade Tabindex O atributo tabindex controla a ordem por que os campos e hiperligações são apresentadas sempre que carregamos na tecla [Tab]. São um elemento de auxílio e de usabilidade pois a utilização do rato como dispositivo apontador nem sempre é uma opção para todos os utilizadores. CSS – Cascading Style Sheets Introdução CSS – Cascading Style Sheets O que é? CSS é o acrónimo de Cascading Style Sheets, ou numa tradução literal para português, folhas de estilos encadeados. Os estilos CSS permitem fazer a separação entre a estrutura do documento HTML e a sua representação. A linguagem HTML define que um conjunto de elementos estruturais de um documento Exemplos: um cabeçalho de nível 1 é representado por () ou um parágrafo é representado por (); A linguagem CSS controla as fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamento, entre muitos outros, de todos os elementos html. CSS – Cascading Style Sheets Origem / necessidade Tal como foi referido na aula anterior, a linguagem HTML foi criada para publicação e disseminação de informação científica. Para isso, foram desenvolvidos um conjunto de marcadores que se preocupavam muito mais com a semântica e estrutura do documento que com a sua forma de representação. Com a massificação da sua utilização (fora do contexto original) a WWW ganhava popularidade. Mas o resultado não satisfazia e, … … os designers começavam a sentir a necessidade de encontrar meios de representar a informação de forma mais atrativa novos tipos de letra, cores, imagens, representação sem ser em tabelas,... CSS – Cascading Style Sheets Origem / necessidade Foram criados novos marcadores HTML tais como, por exemplo, o marcador , e. Exemplo análogo ocorreu com o marcador , que era destinado a representar informação tabular e que passou a ser utilizado para a definição do layout da página e não para a representação de informação na forma tabular – tal como fizemos na aula prática. As CSS’s vieram trazer ordem à confusão entretanto criada colocando à disposição dos web designers meios sofisticados para projetar layouts. Assim foi possível manter uma separação entre os elementos de representação da estrutura dos documentos (p, div, span, li, etc…) e a sua representação (amarelo, grande, à esquerda, …), facilitando a manutenção dos web sites. Isso permite que o mesmo documento, quando submetido a folhas de estilos diferentes, seja representado distintamente. (letra maior/letra menor, fundo branco/fundo preto, …) CSS – Cascading Style Sheets Formas de definição e hierarquia As instruções CSS podem ser definidas de três formas distintas: Global – colocadas num ficheiro externo que pode depois ser associado a um ou mais documentos html. Document – colocadas dentro de um marcador localizado no do documento; In-line – colocadas na linha do marcador html; A precedência é Global → Document → Inline, ou seja, a instrução que prevalece é a que estiver mais próxima do elemento. CSS – Cascading Style Sheets Notação In-line Document / Global seletor {propriedade : valor; propriedade : valor;} CSS – Cascading Style Sheets Notação - Exemplos Inline Document div { background-color: #FF0000; } … Documento html Global … Ficheiro style.css div { background-color: #FF0000; } CSS – Cascading Style Sheets Cores A propriedade color define a cor de um elemento. Exemplo 1: Documento / Global: p { color : #F0FFFF; } In-line: … Os primeiros dois símbolos no código de cor HTML representam a intensidade da cor vermelho – 00 é o mínimo e FF é o mais intenso. O terceiro e o quarto símbolos representam a intensidade de verde; O quinto e o sexto símbolos representam a intensidade de azul. Nem todas as cores são representadas na Web. O conjunto de cores representáveis é denominado por “safe colors” / “cores seguras”. Uma tabela com os nomes e códigos destas colors está disponível em http://www.flextool.com.br/tabela_cores.html, visitado em 23Out2021 CSS – Cascading Style Sheets Cores A propriedade color define a cor de um elemento. Exemplo2: Documento / Global: p { color : rgb(240,255,255); } In-line: … Neste caso a cor é representada na forma decimal através da função rgb(rr,gg,bb). Há ainda uma forma similar de representação rgba(rr,gg,bb,tt), em que tt é a transparência e pode variar entre 0.0 (transparente) e 1.0 (opaco) As cores são separadas por uma vírgula Testar cores em http://www.css3maker.com/css-3-rgba.html, visitado em 04out2022 CSS – Cascading Style Sheets Cores A propriedade color define a cor de um elemento. … Exemplo 3: Documento / Global: p { color: Azure1; } In-line: … Neste caso a cor é definida pelo seu nome. Lista de nomes de cores: http://www.tedmontgomery.com/tutorial/clrnmsWH.html, visitado em 04out2022 Nem todos os browsers interpretam as cores pelo seu nome. CSS – Cascading Style Sheets Fundos Propriedades: background-color background-image – url("url da imagem") Exemplo: div { background-image: url "https://cdn.pixabay.com/photo/2012/03/03/23/06/wall-21534_960_720.jpg"); } background-repeat background-repeat: repeat-x – repete-se na horizontal background-repeat: repeat-y – repete-se na vertical background-repeat: repeat – repete-se tanto na horizontal como na vertical background-repeat: no-repeat – não se repete em qualquer direção CSS – Cascading Style Sheets Fundos background-attachment Background-attachment: scroll - imagem move-se quando é feito o arrastamento Background-attachment: fixed - imagem fica fixa quando é feito o arrastamento background-position background-position: 2cm 2cm – imagem a 2 cm da esquerda e 2 cm para baixo na página background-position: 50% 25% a – imagem centrada na horizontal e a um quarto (25%) para baixo na página background-position: top right – imagem é posicionada no canto superior direito CSS – Cascading Style Sheets Fundos É ainda possível representar um background combinando as diversas partes do mesmo. Exemplo: div { background: #FFCC66 url("https://cdn.pixabay.com/photo/2012/03/03/23/06/wall-21534_960_720.jpg") no-repeat; } CSS – Cascading Style Sheets Exemplo de Hierarquia / Precedência style.css body {background-color: #FF0000;} teste.html Exemplo body {background-color: #00FF00;} De que cor é o fundo deste documento? Respondam a esta pergunta … CSS – Cascading Style Sheets Fontes de texto Propriedade font-family A propriedade font-family é usada para definir a lista das fontes a utilizar num marcador e qual a sua prioridade para apresentação. Se a primeira fonte da lista não estiver instalada, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada. Exemplo: body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, Sans-Serif} h1 {font-family: Arial, Verdana, Sans-Serif;} h2 {font-family: 'Times New Roman’, Serif;} Perguntas: por que razão se pode/deve utilizar uma lista de fontes e não apenas uma? porque há nomes entre aspas ('Segoe UI') e outros sem nada (Serif)? CSS – Cascading Style Sheets Fontes de texto Propriedade font-style - normal | italic | oblique | initial | inherit; font-variant - normal | small-caps | initial | inherit; font-weight - normal | bold | bolder | lighter | (100-900) | initial | inherit; 300 = light; 400 = normal; 700 = bold; font-size 1. medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | initial | inherit 2. valor numérico (10px, 8pt, 1.2cm, …) 3. % - percentagem relativamente ao elemento anterior (elemento pai) (80%, 75%, …) CSS – Cascading Style Sheets Fontes de texto Exemplo de um estilo CSS na forma expandida p { font-style: 1em; font-weight: normal; font-size: 12px; font-family: 'Segoe UI', sans-serif; } Exemplo de um estilo CSS na forma reduzida p { font: 1em normal 12px 'Segoe UI', sans-serif; } CSS – Cascading Style Sheets alinhamento – largura e altura Propriedade width – 100% | 800px | 600pt | 1.2em; height - 100% | 600px | 200pt | 1.2em; Exemplo de um estilo CSS td { width: 100px; height: 100px; } CSS – Cascading Style Sheets alinhamento – horizontal e vertical Propriedade align - left | right | center | justify; valign - top | base | middle | bottom; Exemplo: td { align: center; valign: top; } Elementos, classes e Id’s Qual a diferença? Para descrever o conteúdo em um documento utilizamos marcadores básicos como , , , , etc. Contudo, esse conjunto básico de marcadores não cobre todos os tipos possíveis de elementos da página ou escolha de layout. Para particularizar, precisamos de ID’s e classes. Por exemplo para definir um rodapé, podemos fazer algo como isto:. Ou se quisermos caixas para manter o conteúdo separado de alguma forma:. Elementos, classes e Id’s Qual a diferença? Esses IDs e classes são os “elos de ligação” que precisamos de utilizar na marcação para os podemos modelar da forma pretendida. O CSS precisa desses elos de ligação para construir seletores e fazer os nossos estilos, mas outras linguagens como o JavaScript, também dependem deles. Mas qual é a diferença entre IDs e classe? Os IDs são únicos Cada elemento pode ter apenas um ID Cada página pode ter apenas um elemento com esse ID As classes não são únicas Pode-se usar a mesma classe em vários elementos. Pode-se usar várias classes no mesmo elemento. Elementos, classes e Id’s Qual a diferença? Combinações de classes e IDs É possível combinar classes e IDs encadeando esses seletores sem espaços. ID e seletor de classe: #one { color: blue; } #one.two { color: red; } This Should Be Blue This Should Be Red Elementos, classes e Id’s Qual a diferença? Múltiplo seletor de classe É possível marcar um elemento com várias classes. O exemplo abaixo possui duas classes, mas não está limitado a duas. Podem ser “N” Utilização de classes e ID's #one { color: blue; } #one.two { color: red; }.three { color: purple; }.four { color: brown; }.three.four { color: green; } This Should Be Blue This Should Be Red This Should Be Purple This Should Be Brown This Should Be Green Elementos, classes e Id’s Qual a diferença? Resumo importante: Os estilos CSS marcadores html utilizam o nome do marcador como identificador; Os estilos das classes começam com ponto (“.”); Os estilos dos IDs começam com cardinal (“#”) Utilização de fontes CSS – Cascading Style Sheets Fontes de texto - utilização de fontes próprias Uma das principais características do desenvolvimento de websites institucionais é poder aplicar a imagem institucional na sua plenitude. Isso implica, muitas vezes, na utilização de fontes/tipos de letra próprios, feitas especificamente para essa marca. Essas fontes não estão disponíveis nos computadores dos clientes que lhes acedem… CSS – Cascading Style Sheets Fontes de texto - utilização de fontes próprias Solução? A solução inicial foi criar imagens e disponibilizar esses texto como imagens. Isso não é fácil e obriga a um gasto de dados maior para a transmissão dessas imagens… A solução ideal passa por enviar as fontes de texto para os computadores dos utilizadores remotos … Para além das fontes pré-existentes nos computadores é possível a instalação de novas fontes numa página web. Neste caso, é necessário possuir os ficheiros de definição da fonte no seu computador. CSS – Cascading Style Sheets Fontes de texto - utilização de fontes próprias Há inúmeras fontes disponíveis na Internet e que podem ser utilizadas. Mas … nem todas fontes estão adaptadas a todos os tipos de dispositivos. Exemplos: CSS – Cascading Style Sheets Fontes de texto - utilização de fontes próprias https://www.fontsquirrel.com/ Incorporando fontes em páginas @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; } Fontes públicas – Google Fonts Para além do exemplo anterior, em que os ficheiros de definição estão no computador do utilizador ou no servidor web, há outra forma de utilizar fontes – carregando-as diretamente do distribuidor. Neste caso vamos utilizar as fontes públicas da Google, Ver: https://fonts.google.com/ (1.006 famílias em 13/10/2020, 1.291 em 23/10/2021) Cada família possui um ou mais estilos Exemplo de utilização Utilização de fonte externa body { font-family: 'Open Sans', sans-serif; }

Aula 3 - Formulários HTML e CSS - Introdução às Tecnologias Web - PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue