Observações importantes:
|
|
|
- Sabrina Almada Beppler
- 8 Há anos
- Visualizações:
Transcrição
1 Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB Gabarito AD1 2 semestre de Observações importantes: 1. Esta avaliação consiste no desenvolvimento do site de uma livraria, onde o usuário pode comprar livros no formato impresso ou e-book. 2. As imagens utilizadas nas páginas de exemplo estarão disponíveis para download na plataforma em breve. Você pode utilizar outras imagens desde que respeite o layout estabelecido em cada questão. 3. A resolução do monitor ou o tamanho da janela do navegador onde as páginas serão exibidas não tem importância. Nas figuras ilustrativas das questões, a janela do navegador foi dimensionada para exibir um efeito visual que sua página deve reproduzir, quando dimensionada de forma semelhante. 4. Fazer as ADs é muito importante, não apenas pela nota, mas principalmente pela experiência que permitirá um melhor desempenho nas avaliações presenciais. Os assuntos abordados na AD podem cair na prova presencial mesmo não tendo sido abordados nos vídeos ou no material escrito. 5. ATENÇÃO: A avaliação é individual. Caso existam duas ou mais implementações excessivamente coincidentes, independente de qualquer motivo, todas as avaliações envolvidas receberão nota ZERO! 6. Não serão aceitos trabalhos APENAS em papel. Se desejar o aluno pode TAMBÉM entregar uma listagem da sua avaliação. É imprescindível que o tutor receba todos os arquivos que compõem o site. A entrega destes arquivos deve ser feita através da plataforma na forma de um arquivo de extensão zip. O arquivo zip deve conter os arquivos html, css e os arquivos de imagem individualizados (e não tudo junto num arquivo pdf). 7. Não serão aceitos trabalhos em arquivos de texto DOC ou PDF. Os arquivos HTML, JS ou CSS devem estar individualizados (mesmo que agrupados num ZIP) para que o tutor possa testar seu site.
2 PÁGINA COM LAYOUT BASEADO EM TABELA 1. Escreva o código necessário para criar esta página mostrada na Fig. 1. O posicionamento dos elementos na página deve ser feito utilizando uma tabela de bordas invisíveis. Os textos da página devem utilizar a fonte verdana ou, caso este não esteja presente (como no Linux), o fonte liberation (fonte mostrado na figura). As referências do menu apontam respectivamente para as páginas: bondeler.html, generos.html, formatos.html, cadastro.html e compras.html. Os links do menu estão numa lista não numerada, com cada item indicado por um círculo vazado (circle). A seleção de um link deve causar a abertura da página correspondente em uma nova janela do navegador (ou novo tab). Use uma tag <address> para as informações de localização (endereço, telefone e ). Uma imagem no formato PNG (bondeler_tira.png) foi utilizada para o logotipo da livraria exibido no canto superior esquerdo da página As cores utilizadas foram: Fundo - #FFF077, Texto - #0000FF, Link - #0000FF e Link Visitado - #0000AA. [1,5 pontos] <html><head><title>bonde Ler</title> <base target="_blank" /></head> <body bgcolor="#fff077" text="#0000ff" link="#0000ff" vlink="#0000aa"> <table width="100%"> <tr><td colspan="2"> <img src="imagens/bondeler_tira.png" align="left" /> <div align="right"> <font face="verdana,liberation" size="-1"> <address>via literária 234<br/> Tel: (21) <br/> <a href="mailto:contato@bondelaire.com.br"> contato@bondelaire.com.br</a></address> </font> <font face="verdana,liberation" color="#008030"> <br/><hr width="370" align="left" size="3" noshade /> <b>o livro que você procura está aqui!</b> </font> </td></tr> <tr><td width="180" valign="top"><br/> <font face="verdana,liberation" color="#0000ff"> <ul type="circle"> <li><a href="2_bondeler.html">inicial</a></li><br/> <li><a href="3_generos.html">generos</a></li><br/>
3 <li><a href="4_formatos.html">formatos</a></li><br/> <li><a href="5_cadastro.html">cadastro</a></li><br/> <li><a href="6_compras.html">compras</a></li></ul> </font> </td> <td> <div align="center"> <font face="verdana,liberation"> <p><img src="imagens/bondeler_logo.png" hspace="15"/> <p>o maior acervo de livros da internet, com os melhores preços. <br/>encomende seu livro e nós enviamos pelo correio <br/>ou faça <i>download</i> da versão e-book</p></font> </td></tr> </table></body></html>
4 PÁGINA COM CSS E ESTRUTURA HTML5 O futuro chegou ao seu site. Leia o texto Caminho até o HTML5 disponibilizado na seção textos da segunda semana para que você possa implementar uma nova versão de sua página inicial e todas as demais páginas do trabalho. É recomendável também que você tenha lido o material Folhas de Estilo. 2. Faça uma nova implementação da página inicial da loja, desta vez utilizando as novas tags de estrutura do HTML5 (Fig. 2). A aparência deve ser definida por estilos armazenados em um arquivo de extensão css (não devem ser usada na página atributos e tags obsoletas). Para esta página foram criadas cinco classes de estilo: ender, apres, imglogo e sobimagem. Além disso, as tags <body>, <header>, <nav>, <section> e <a> tiveram sua aparência modificada. A descrição do estilo que deve ser aplicado a estas classes e tags está no quadro 1 logo abaixo. No quadro 2 é mostrado o estilo das tags de estrutura para produzir o posicionamento mostrado na figura. [2 pontos] Arquivo CSS: /* * Estilo Geral body { color: #0000FF; font-size: 16px; background-color: #FFF077; font-family: verdana,liberation; a:link { color:#0000ff; text-decoration:none; a:visited { color:#0000aa; text-decoration:none; ol, ul { line-height: 200%; /* * Estilo Seções header { display:block; margin-bottom: 1px; nav {
5 display:block; width: 20%; float: left; section { display:block; width: 77%; float: right; /* * Estilo Header.ender { float: right; text-align: right; font-size: 12px; line-height: 150%; img.imglogo { padding-bottom: 15px; border-bottom: 3px solid; margin-bottom: 6px;.sobimagem { color: #008030; font-weight: bold; /* * Estilo Nav nav ul { color: #0000FF; margin-top: 30px; list-style-type: circle; /*************************************** * Estilo Seção Apresentação div.apres { text-align: center;
6 Arquivo HTML: <base target="_blank" /> <link rel="stylesheet" type="text/css" href="bondeler.css" /> </head> <body> <header> <address class="ender"> Via literária 234<br/> Tel: (21) <br> <a <img class="imglogo" src="imagens/bondeler_tira.png"/><br/> <span class="sobimagem">o livro que você procura está aqui!</span> </header> <nav> <ul><li><a href="2_bondeler.html">inicial</a></li> <li><a href="3_generos.html">gêneros</a></li> <li><a href="4_formatos.html">formatos</a></li> <li><a href="5_cadastro.html">cadastro</a></li> <li><a href="6_compras.html">compras</a></li></ul> </nav> <section> <div class="apres"> <p><img src="imagens/bondeler_logo.png" /></p> <p>o maior acervo de livros da internet, com os melhores preços. <br/>encomende seu livro e nós enviamos pelo correio <br/>ou faça <i>download</i> da versão e-book</p> </section> </body></html>
7 VÁRIOS TIPOS DE LISTA 3. A Fig. 3 mostra a página que será aberta quando o link Gêneros for selecionado na página da segunda questão. A página utiliza os mesmo estilos da questão anterior, com os acréscimos da classe listageneros (lista numérica) e a redefinição do estilo da tag <ul> quando dentro de listageneros. A descrição destes novos estilos está no quadro 3 e eles devem ser adicionados ao arquivo CSS usado na questão anterior. Apenas o interior da tag section foi modificado em relação à página da segunda questão [1,5 pontos] Acrescentar no Arquivo CSS: /*************************************** * Estilo Seção Generos.listaGeneros { color: #008030; border: 2px solid #005500; margin: 30px 10px 10px 10px; padding: 10px 10px 10px 50px; background-color: #FFFFFF;.listaGeneros ul { color: #880088; list-style-type: square; Arquivo HTML: <section> <ol class="listageneros"> <li>literatura Estrangeira <ul> <li>a Menina que Roubava Livros</li> <li>a Culpa é das Estrelas</li></ul></li> <li>literatura Brasileira <ul> <li>capitães da Areia - Ed. Bolso</li> <li>um Certo Capitão Rodrigo</li></ul></li> <li>história <ul> <li>maldita Guerra</li></ul></li> </table> </section>
8 TABELA COMUM COM JUNÇÃO DE CÉLULAS 4. A Fig. 4 mostra a página que será aberta quando o link Formatos for selecionado na página da segunda questão. A página utiliza os mesmo estilos da questão anterior, com os acréscimos de estilo para as tabelas. A apresentação dos livros disponíveis é feita utilizando uma tabela com bordas de acordo com o estilo definido como tablivros. A tabela têm células td e th modificadas conforme o contexto e três novas classes: linth (utilizada nas células de título do topo da tabela), colth (utilizada nas células de título da primeira coluna) e preco (utilizada para pintar os preços de vermelho). Apenas o interior da tag section foi modificado em relação à página da segunda questão. A descrição destes novos estilos está no quadro 4 e eles devem ser adicionados ao arquivo CSS usado na questão anterior. [2 pontos] Acrescentar no Arquivo CSS: /*************************************** * Estilo Seção Formatos #tablivros { color: #006600; margin-top: 30px; border-collapse: collapse; background-color: #FFFFFF; font-family: "arial,ubuntu"; #tablivros td, #tablivros th { border: 2px solid #005500; padding: 8px 14px 8px 14px; th.linth { color: #FFFFFF; vertical-align: middle; background-color: #0044AA; th.colth { color: #FFFFFF; text-align: left; background-color: #0088FF;
9 #tablivros.preco { color: #CC0000; vertical-align: middle; Arquivo HTML: <section> <table id="tablivros"> <tr><th rowspan="2" class="linth">gênero</th> <th rowspan="2" class="linth">título</th> <th colspan="2" class="linth">formato</th></tr> <tr><th class="linth">impresso</th> <th class="linth">digital</th></tr> <tr><th rowspan="2" class="colth"> Literatura<br/>Estrangeira</th> <td>a Menina Que Roubava Livros</td> <td class="preco">r$ 26,80</td> <td class="preco">r$ 22,41</td></tr> <tr><td>a Culpa é das Estrelas</td> <td class="preco">r$ 19,80</td> <td class="preco">r$ 16,92</td></tr> <tr><th rowspan="2" class="colth"> Literatura<br/>Brasileira</th> <td>capitães da Areia - Ed. Bolso</td> <td class="preco">r$ 14,50</td> <td class="preco">---</td></tr> <tr><td>um Certo Capitão Rodrigo</td> <td class="preco">r$ 29,00</td> <td class="preco">r$ 18,53</td></tr> <tr><th class="colth">história</th> <td>maldita Guerra</td> <td class="preco">r$ 77,00</td> <td class="preco">---</td></tr> </table> </section>
10 FORMULÁRIOS COM NOVOS ELEMENTOS Nosso site termina com duas páginas de formulário. Para cria-los, devemos utilizar os elementos <fieldset> e <legend> para organizar os seus campos logicamente e para compor o seu visual. Não devemos esquecer também os elementos <label> para ligar os textos de identificação com os campos do formulário. O posicionamento dos campos do formulário sempre foi uma tarefa complicada. Antigamente, utilizavam-se tabelas sem bordas para fazer este posicionamento e definir o layout. A tendência hoje em dia é evitar o uso de tabelas para posicionamento e utilizar CSS para este fim. Nos nossos formulários devemos também utilizar, sempre que possível, os novos elementos presentes no HTML5, mesmo que nem todos os navegadores estejam atualmente preparados para aproveitar todo o potencial destes elementos. Está disponibilizado na seção textos da quinta semana (Formulários) material para que você possa implementar seus formulários com as novidades do HTML5. DICA IMPORTANTE: Não esqueça que o atributo nome deve estar definido em todos os elementos do formulário.
11 5. A Fig. 5 mostra o interior da tag section da página que será aberta quando o link Cadastro for selecionado na página da segunda questão. A página utiliza as mesmas cores e estilos definidos para as páginas das questões anteriores e alguns novos estilos. Utilizando tags como <label>, <fieldset>, <legend>, <form>, <textarea> e <input/>, faça o formulário de modo que o posicionamento de seus elementos seja como o mostrado na figura. Apenas o interior da tag section foi modificado em relação à página da segunda questão. A descrição dos novos estilos está no quadro 5 e eles devem ser adicionados ao arquivo CSS usado na questão anterior. [1,5 pontos] Acrescentar no Arquivo CSS: /*************************************** * Estilo Formulário Cadastro fieldset { margin: 20px 10px 0px 10px;.botoes { margin: 20px 10px 0px 10px; text-align: right;.fslinha { width: 470px; margin-bottom: 6px;.colPri { float: left; width: 90px; display: block;.elemdir { float: right; display:block;.inpgrande { width: 370px;.inpMedio { width: 120px;.numDD { width:30px;.numqd { width:50px;
12 .fsesq { float: left; display: inline; margin: 0px 0px 0px 0px;.fsDir { float: right; display: inline; margin: 0px 0px 0px 0px; Arquivo HTML: <section> <form method="post"> <fieldset><legend>identificação</legend> <div class="fslinha"> <label for="id " class="colpri"> </label> <input id="id " class="inpgrande" type=" " name="txt " required /> <div class="fslinha"> <label for="idsenha" class="colpri">senha:</label> <input id="idsenha" class="inpmedio" type="password" name="txtsenha" required /> <label for="idconf" class="elemdir">confirme: <input id="idconf" class="inpmedio" type="password" name="txtconf" required /></label> </fieldset> <fieldset><legend>dados Pessoais</legend> <div class="fslinha"> <label class="colpri">nome:</label> <input type="text" class="inpgrande" name="txtnomecompleto" /> </label> <div class="fslinha"> <label class="colpri">endereço:</label> <textarea name="txtender" rows="2" class="inpgrande"></textarea> </label> <div class="fslinha"> <label class="colpri">telefone:</label> <input type="text" class="inpmedio" name="txttelefone" required /> </label>
13 <label class="elemdir">celular: <input type="text" class="inpmedio" name="txtcelular" /></label> <fieldset class="fsesq"><legend>nacimento:</legend> <input type="number" name="txtdianasc" min="1" max="31" class="numdd" /> / <input type="number" name="txtmesnasc" min="1" max="12" class="numdd" /> / <input type="number" name="txtanonasc" value="1980" min="1920" max="2014" class="numqd" /> </fieldset> <fieldset class="fsdir"><legend>sexo:</legend> <label><input type="radio" name="tglsexo" value="m" checked />Masculino</label> <label><input type="radio" name="tglsexo" value="f" />Feminino</label> </fieldset> </fieldset> <div class="botoes"> <input type="submit" value="enviar" /> <input type="reset" value="limpar" /> </form> </section>
14 6. A Fig. 6 mostra o interior da tag section da página que será aberta quando o link Compras for selecionado na página da segunda questão. A página utiliza as mesmas cores e estilos definidos para as páginas das questões anteriores e alguns novos estilos. Utilizando tags como <label>, <fieldset>, <legend>, <form>, <select>, <option>, <optgroup>, <textarea> e <input/>, faça o formulário de modo que o posicionamento de seus elementos seja como o mostrado na figura. Defina o atributo readonly no campo valor. Apenas o interior da tag section foi modificado em relação à página da segunda questão. Para esta página foram criadas novas classes de estilo, muito parecidas com as criadas para o formulário anterior, mas com alguma diferença principalmente em termos de largura. A descrição das novas classes de estilos está no quadro 6 e eles devem ser adicionados ao arquivo CSS usado na questão anterior. [1,5 pontos] Acrescentar no Arquivo CSS: /*************************************** * Estilo Formulário Compras.fsEsqCompras { float: left; display: inline;.fsdircompras { float: right; display: inline;.linhacompras { width: 500px; margin-bottom: 6px;.colPriCompras { float: left; width: 86px; display: block;.inp { width: 200px;
15 Arquivo HTML: <section> <form method="post"> <fieldset><legend>identificação</legend> <div class="linhacompras"> <label class="colpricompras" for="id " > </label> <input id="id " class="inp " type=" " name="txt " required /> <label class="elemdir">senha: <input class="inpmedio" type="password" name="txtsenha" required /></label> <div class="linhacompras"> <b><i>se você ainda não tem cadastro clique <a href="5_cadastro.html">aqui</a></i></b>! </fieldset> <fieldset><legend> Lista de Compras e Pagamento </legend> <textarea class="elemdir" name="listapedidos" readonly cols="23" rows="14"> </textarea> <div class="linhacompras"> <label><input type="radio" name="tgltipo" value="imp" checked />Impresso</label> <label><input type="radio" name="tgltipo" value="ebo" />E-book</label> <div class="linhacompras"> <Select name="sellivro" id="sellivro"> <optgroup label="literatura Estrangeira"> <option>a Menina que Roubava Livros</option> <option>a Culpa é das Estrelas</option></optgroup> <optgroup label="literatura Brasileira"> <option>capitães da Areia - Ed. Bolso</option> <option>um Certo Capitão Rodrigo</option></optgroup> <optgroup label="história"> <option>maldita Guerra</option></optgroup> </select> <input type="button" value="comprar" /> <br/>
16 <fieldset class="fsesq"><legend> Dados do Cartão </legend> <fieldset class="fsesq"> <legend> Bandeira:</legend> <label><input type="radio" name="radband" checked />Visa</label> <label><input type="radio" name="radband" />Master</label> <label><input type="radio" name="radband" />Amex</label> </fieldset> <br/><br/><br/><br/> <div> <label class="colpricompras" for="mesval">validade:</label> <input type="number" name="txtmesval" id="mesval" min="1" max="12" class="numdd" value="1" /> / <input type="number" name="txtanoval" value="2014" min="2014" max="2020" class="numqd" /> <div> <br/> <label class="colpricompras" for="numcar">número:</label> <input type=text name="txtnumcard" size="20" id="numcar"/> </fieldset> <label class="elemdir" for="txttotal"><br/>valor: R$ <input type="text" name="txttotal" readonly id="txttotal" class="inpmedio" /></label> </fieldset> <div class="botoes"> <input type="submit" value="enviar" /> <input type="reset" value="limpar" /> </form> </section>
Observações importantes:
Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:
Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva
Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1
Programação para Internet I
Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode
FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)
FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário
Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário
Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores
José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript. EmpregoWeb-Registo de pessoas
José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript EmpregoWeb-Registo de pessoas Elabore um sítio Web de nome EmpregoWeb, recorrendo à linguagem HTML utilizando folhas de estilos (CCS) que registe
TECNOLOGIAS WEB AULA 7
TECNOLOGIAS WEB AULA 7 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de formulários em HTML. Compreender as principais estruturas formadas com as
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que
Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa
Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato
Desenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de
TABLELESS E PROJETO ESTRUTURAL
Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se
PROGRAMAÇÃO WEB DO LADO DO CLIENTE
PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,
Web Design Aula 15: Conhecendo CSS
Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando
Introdução à Tecnologia Web
Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.
Posicionamento e Layout com CSS
Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores
COMO FUNCIONA UM FORMULÁRIO
FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas
Roteiro de Estudos e Atividades Avaliativas HTML
Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar
Ferramentas para Multimídia e Internet - 1486
1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato
Introdução às Folhas de Estilo
Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de
Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec
Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...14 Introdução...16 Para quem foi escrito este
Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata
Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.
Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013
Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente
O código acima descreve o formulário com uma caixa de texto e dois botões
Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades
0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.
IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe
EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina
1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão
1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena
Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário
Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços
Roteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img
4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont
APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco
1) Criar o código HTML para construir a página representada pela imagem abaixo.
1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,
FORMULÁRIOS ACESSÍVEIS
Ministério da Educação Secretaria de Educação Profissional e Tecnológica IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul NAV Núcleo de Acessibilidade Virtual FORMULÁRIOS ACESSÍVEIS
Técnicas e processos de produção. Profº Ritielle Souza
Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo
Programação para Internet
Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos
mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Desenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável
Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.
![Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.](/thumbs/22/1603074.jpg "Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.")
Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. PÁGINA: 2 de 21 Nenhuma parte deste documento pode ser utilizado ou reproduzido, em qualquer meio
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver
Programação Web Prof. Wladimir
Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento
Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção
Folha Prática Nº5 CSS. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática. Tecnologias Internet - 2011/2012
Folha Prática Nº CSS / Filipe Quinaz . Folhas de Estilo 0 Internas, delimitadas pela marca style h, h font-family: sans-serif; color: #CC;
WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira
WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo
4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img
4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
7. Cascading Style Sheets (CSS)
7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma
CSS Cascading Style Sheets Folhas de Estilo em Cascata
CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1
HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.
HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte
Programação Web Prof. Wladimir
Programação Web Prof. Wladimir Linguagem HTML Listas e Formulários @wre2008 1 Sumário Listas Revisão da tag Criação de formulários HTML @wre2008 2 Listas As listas são utilizadas para citar, numerar
1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout:
Exercícios: 1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout: a) O cabeçalho Sistema de Órgãos Colegiados deve ter tamanho 3 e ficar centralizado. b) Após o cabeçalho incluir
Síntese da aula anterior
Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações 1 O que vamos fazer hoje? Vamos utilizar o que aprendemos da aula anterior juntamente com Utilização de imagens
HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;
HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está
Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados
Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do
CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata
CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,
SUMÁRIO 1. ACESSO À PÁGINA DO AMBIENTE VIRTUAL 2. CONTATANDO O SUPORTE 3. ATUALIZAR PERFIL 4. COMO ACESSAR AS DISCIPLINAS
SUMÁRIO 1. ACESSO À PÁGINA DO AMBIENTE VIRTUAL 2. CONTATANDO O SUPORTE 3. ATUALIZAR PERFIL 4. COMO ACESSAR AS DISCIPLINAS 5. PARTICIPANTES DA DISCIPLINA 6. ENVIAR MENSAGENS 7. PARTICIPAÇÃO NO FÓRUM 8.
Lista e Tabelas. Fundamentos da Linguagem Web
Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes
HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.).
HTML Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). Para se criar um novo documento HTML pode-se utilizar o Bloco de Notas, bastando para tal gravar o documento com
HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)
HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer
HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
FERRAMENTAS DE COLABORAÇÃO CORPORATIVA
FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Criação de Formulários no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Criação de Formulários no Google Drive Introdução...
HTML. Conceitos básicos de formatação de páginas WEB
HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto
DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico
DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico HTML5 - Marcação de formulário E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis
HTML: Listas, Tabelas e Formulários CST Sistemas para Internet
HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante
Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar
Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,
Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos
02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
FCT Faculdade de Ciências e Tecnologia Serviço Técnico de Informática STI SGCD Sistema Gerenciador de Conteúdos Dinâmicos
FCT Faculdade de Ciências e Tecnologia Serviço Técnico de Informática STI SGCD Sistema Gerenciador de Conteúdos Dinâmicos Manual do Usuário Presidente Prudente, outubro de 2010 Índice 1. Introdução e Instruções
Programação para Internet I
Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:
Os componentes de um formulário são: Form, Input, Select e AreaText
HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2.
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Formulários Durante a navegação em websites é comum que sejam solicitadas informações
Programação para Internet
Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos
Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes
Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,
4. Características Gerais das Tabelas do HTML
4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag
Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS
CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13
CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender
Aula 7 LISTAS E TABELAS. Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme
Aula 7 LISTAS E TABELAS Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Listas Prover mecanismos para listar informações Devem conter um ou mais itens Elementos
> Herbet Ferreira Rodrigues > contato@herbetferreira.com
Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação
NewAgent enterprise-brain
Manual NewAgent enterprise-brain Configuração Manual NewAgent enterprise-brain Configuração Este manual de uso irá ajudá-lo na utilização de todas as funções administrativas que a NewAgent possui e assim,
Exercícios Práticos de HTML e JavaScript. <FORM ACTION="mailto:teste@gmail.com" METHOD="POST" ENCTYPE="text/plain" NAME="cadastro">
Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript
MANUAL DE BOAS PRÁTICAS
MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML
Web Design Aula 01. No Caderno Responda as Questões abaixo
Aula 01 1 O que é Web Design? 2 Qual a diferença entre Web Design e Web Designer? 3 O que são Sites ou Páginas? Cite 3 tipos de Sites. 4 O que é um Navegador? 5 O que são Servidores e o que são Protocolos?
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail
Aula 5 Cabeçalhos, Imagens e Links
Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos
Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.
Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor
Compêndio códigos. {css}
Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado
BLOG ESCOLAS. Após acessar o seu respectivo blog, você será direcionado a tela a seguir. Vamos conhecê-la um pouco melhor.
1 CONHECENDO A PÁGINA PRINCIPAL Após acessar o seu respectivo blog, você será direcionado a tela a seguir. Vamos conhecê-la um pouco melhor. PAGINAS- Mostras as paginas do blog LOCALIZADOR área de busca
HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS
APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras
Introdução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.
Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem
CONSTRUÇÃO DE BLOG COM O BLOGGER
CONSTRUÇÃO DE BLOG COM O BLOGGER Blog é uma abreviação de weblog, qualquer registro frequênte de informações pode ser considerado um blog (últimas notícias de um jornal online por exemplo). A maioria das
Mais sobre uso de formulários Site sem Ajax
Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher
Web Design. Prof. Felippe
Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre
Maurício Samy Silva. Novatec
Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20