Prévia do material em texto
Sobre HTML5 e CSS responde: a) Como é possível associar um campo criado pelo “Input” a um rótulo criado pelo elemento “Label”? Dê exemplo. A)Para essa utilização é necessário que exista um atributo “id” que será utilizado como identificação no formulário. B)Uma das novidades nesse tema é que com a atualização de atributos de algumas tags como <input>: type, pattern e require não se faz necessário a utilização do javascript. C)Radios são opções de marcação única, em um formato de circulo geralmente utilizados em formulários. Checkbox são quadradas e de múltipla marcação de acordo com o questionamento do formulário. D)É uma forma de customizar dando estilo a pagina de um site, mudando fonte, borda e etc.. E)<section> é um bloco de um determinado tema, um assunto de uma parte da pagina. <div> é utilizado para dividir algum documento dentro de um blocos por exemplo. (2.5 Pontos) 2 Descreva o que é HTML5 e qual a diferença entre HTML5 e HTML4. Cite algumas vantagens de HTML5. No mínimo 4 linhas. O HTML 5 é a evolução da linguagem de marcação de hipertexto. Uma de suas finalidades é permitir que os sites sejam compatíveis com qualquer navegador. Alguns pontos positivos dessa evolução são: Melhor tratamento de erros, o suporte a aplicativo web modernos, semântica melhorada, melhora no suport mobile, tratamento de áudio e vídeo, manutenção de gráficos vetoriais. Além disso o HTML 5 também pode utilizar banco de dados SQL web e cache de aplicativos, dando uma certa tranquilidade na memória RAM do usuário. (1.5 Pontos) 3 Cria uma página com a estrutura mostrada na imagem com fundo da sua escolha. Utilize um arquivo CSS externo para a formatação. HTML <!DOCTYPE html> <html> <head> <title>AV 1 Aula com CSS</title> <link rel="stylesheet" type="text/css" href="Estilos AV1.css"> </style> </head> <body> <h1>Minha tela com CSS</h1> <p class="paragrafo" id="paragrafo-rosa">Parabéns, você esta assistindo aula de CSS!</p> <div> <figure> </figure> </div> </body> </html> CSS h1{ color: red; /* Cor da letra paragrafo*/ border: 1px solid blue; /*colocando borda 1px, estilo e cor*/ background-color: yellow /*cor de fundo*/ width: 300px; /*largura do paragrafo */ height: 50px; /*altura do paragrafo */ padding-left: 20px; /*margem esquerda */ padding-top: 20px; /*margem de cima */ text-align: center; margin:2 auto; font-style: arial; } p{ color: yellow; /* Cor da letra paragrafo*/ border: 1px solid black; /*colocando borda 1px, estilo e cor*/ background-color: black; /*cor de fundo*/ width: 250px; /*largura do paragrafo */ height: 100px; /*altura do paragrafo */ padding-left: 20px; /*margem esquerda */ padding-top: 10px; /*margem de cima */ text-align: center; margin:0 auto; } body{ background-image: url(Maragogi.jpg); /*abrir imagem */ background-repeat: no-repeat; /*não repetir imagem */ background-size: cover; /*centraliar imagem do tamanho da tela */ font-family: sans-serif; /* fonte da letra */ /*border: 1px solid red;*/ } figure{ color: yellow; /* Cor da letra paragrafo*/ border: 1px solid black; /*colocando borda 1px, estilo e cor*/ background-color: green; /*cor de fundo*/ width: 250px; /*largura do paragrafo */ height: 500px; /*altura do paragrafo */ /*padding-left: 20px;*/ /*margem esquerda */ /*padding-top: 10px;*/ /*margem de cima */ text-align: center; margin:2 auto; 4 Construa uma outra pagina com nome dados_profissionais com um formulário contendo campo para digitação de nome, campos de radio para sexo, campo para areas de atuação pre-definida, um campo para upload de imagem do perfil e dois botões com nomes (Salvar e Cancelar). O campo para digitação de nome deve aceitar tipo de dados texto, ser nomeado como nome, ter tamanho visível de 30 e aceita no máximo 30 caracteres. Campo sexo deve ser do tipo radio e deve possuir masculino e feminino respetivamente. Campo área de atuação deve ter o tipo checkbox com nomes da área (Administração, Informática, Contabilidade, Direito, Pedagogia e Medicina). O campo Informática deve aparecer selecionada. Cada campo deve estar em uma linha diferente. (2 Pontos) 5 Criar uma página com nome index que contenha um formulário para entrada de cpf, nome, e-mail, data de nascimento e contato em uma linha diferente e que tenha dois botões do tipo submit com rótulos ( Enviar sem validar e outro Validar e Enviar). Os campos cpf, nome e e-mail devem ter preenchimento obrigatório, porem, ao clicar no botão Enviar sem validar esse validação de preenchimento obrigatório deve ser ignorada. Ao clicar no botão Validar e Enviar, a validação de preenchimento obrigatório deve ser considerado. (2 Pontos)