HTML - aula 1
- 1.
- 2.
- 3. CERN, o LaboratórioEuropeu de Física de Partículas, em Genebra, na Suíça.
- 4. Tim Berners O inventorda Web O HTML que usamos hoje foi desenvolvida a partir do protótipo desenvolvido por Tim Berners-Lee em 1992
- 5.
- 6. •Head • Title • Metatags •Chamadas • CSS • Javascript •Body • Conteúdo • Parte visível da página
- 7. <html> <head> <title>Treinamento HTML/CSS</title> </head> <body> <div> <h1>Treinamento HTML/CSS</h1> <div> <p><ahref="link.html">Link</a></p> <p><a href="table.html">Tabela</a></p> <p><a href="form.html">Formulário</a></p> </div> </div> </body> </html> Estrutura HTML
- 8.
- 9. Links <a href=“#titulo”> Link</a> <h1 name=“titulo”> Título 1 </h1> <a href=“index.html#titulo”> Link </a> Atributo name: <a href="mailto:luciana.santana@avansys.com.br"> Enviar e-mail </a> Link para um e-mail: <a href=“link.html” target="_blank|_self|_parent|_top|framename“> Texto do link </a> Atributo target:
- 10. Listas <ul> <li>Item 1</li> <li>Item 2</li> </ul> Listanão ordenada: <dl> <dt>Item 1</dt> <dd>Primeiro item da lista</dd> <dt>Item 2</dt> <dd>Segundo item da lista</dd> </dl> Lista de definição: <ol> <li>Item 1</li> <li>Item 2</li> </ol> Lista ordenada: • Item 1 • Item 2 1. Item 1 2. Item 2 Item 1 Primeiro item da lista Item 2 Segundo item da lista
- 11.
- 12.
- 13. Elementos em blocoElementos em linha <div> <span> <p> <a> <h1><h2><h3><h4><h5><h6> <ul><ol><li> <dl><dt><dd>
- 14. Test Drive 1. Criarum diretório com seu nome para que suas páginas estejam juntas 2. No notepad++, criar um arquivo de texto chamado index.html que será sua página inicial 3. Estruturar uma página HTML com: 1. Um title 2. Uma div contendo o título “Treinamento HTML / CSS” (usando marcação de cabeçalho) e uma lista ordenada de links que será o menu com os seguintes links a. Layout - layout.html b. Link - link.html c. Tabela - table.html d. Formulário - form.html obs: os links de tabela e formulário devem abrir em outra aba
- 15. Layout – conceitotableless
- 16. Layout com tabela <tr> <tdrowspan=‘2’> </td> <tr><td colspan=‘3’></td></tr> <td rowspan=‘2’> </td> </tr> <td></td> <tr> <td></td> </tr> <tr><td colspan=‘3’></td></tr> table
- 17. Segunda Terça QuartaQuinta Sexta Tabela Exibição de dados tabulares
- 18. Layout – conceitotableless div div div div div div div div
- 19. <table> <tr> <th> título 1</th> <th> título 2 </th> <th> título 3 </th> </tr> <tr> <td> conteúdo 1.1 </td> <td> conteúdo 1.2 </td> <td> conteúdo 1.3 </td> </tr> <tr> <td> conteúdo 2.1 </td> <td> conteúdo 2.2 </td> <td> conteúdo 2.3 </td> </tr> <tr> <td colspan=“3”> footer </td> </tr> </table> título 1 título 2 título 3 conteúdo 1.1 conteúdo 1.2 conteúdo 1.3 conteúdo 2.1 conteúdo 2.2 conteúdo 2.3 footer
- 20. <table> <thead> <tr> <th> título 1</th> <th> título 2 </th> <th> título 3 </th> </tr> </thead> <tbody> <tr> <td> conteúdo 1.1 </td> <td> conteúdo 1.2 </td> <td> conteúdo 1.3 </td> </tr> <tr> <td> conteúdo 2.1 </td> <td> conteúdo 2.2 </td> <td> conteúdo 2.3 </td> </tr> </tbody> <tfoot> <tr> <td colspan=“3”> footer </td> </tr> </tfoot> </table> título 1 título 2 título 3 conteúdo 1.1 conteúdo 1.2 conteúdo 1.3 conteúdo 2.1 conteúdo 2.2 conteúdo 2.3 footer
- 21. colspan e rospan Tabelade Contas Tipo de Despesa Descrição Valor Doméstica Luz R$ 100,00 Água R$ 90,00 Externa Almoço R$ 200,00 Total R$ 390,00 <table cellspacing=‘1’ cellpadding=‘5’ border=‘1’> <tr> <th colspan=“3”> Tabela de Contas</th> </tr> <tr> <th> Tipo de Despesa </th> <th> Descrição </th> <th> Valor </td> </tr> <tr> <td rowspan=“2”> Doméstica </td> <td> Luz </td> <td> R$ 100,00 </td> </tr> <tr> <td> Água </td> <td> R$ 90,00 </td> </tr> <tr> <td> Externa </td> <td> Almoço </td> <td> R$ 200,00 </td> </tr> <tr> <td colspan=“2”> Total </td> <td> R$ 390,00 </td> </tr> </table>
- 22. Test Drive 1. Criarum arquivo chamado table.html 2. Estruturar uma página HTML com as tabelas abaixo: a. As tabelas devem ter borda, espaçamento entre células e espaçamento interno Função Pontuação Valor Manual Automática Soma
- 23. Form Action - Especificapara onde enviar o formulário de dados, quando um formulário for enviado. Method – get ou post • GET • Acrescenta dados para a URL em pares nome / valor • Limite para a quantidade de dados (depende do browser) • POST • Mais seguro • Sem limitação de tamanho Vamos ver de perto
- 24. Fieldset legend <fieldset> <legend> Formcom GET </legend> <input type=“text/> </fieldset> Form com GET
- 25. Form <form action=“success.html” enctype=“*”method=“get/post”> <input type=“text/> </form> *ver enctype nos próximos slides
- 26. Input - texte password textarea <input type=“text” value=“texto aqui...”/> texto aqui... <input type=“password” value=“senha”/> ..... <textarea rows="4" cols="20"></textarea>
- 27. Input - radioe checkbox label <label>Sexo</label> <input type=“radio” name=“sexo” value=“masculino” id=“masculino”/> <label for=“masculino”>Masculino</label> <input type=“radio” name=“sexo” value=“feminino” id=“feminino” /> <label for=“feminino”>Feminino</label> femininomasculinoSexo <label>Veículo</label> <input type=“checkbox” value=“moto” id=“moto”/> <label for=“moto”>Moto</label> <input type=“checkbox” value=“carro” id=“carro” /> <label for=“carro”>Carro</label> carromotoVeículo
- 28. Input - submitbutton <form action=‘enviar.html’> <input type=“submit” value=“Enviar” /> </form> Enviar Voltar <button type="button" title=“Voltar para a página inicial"> Voltar</button> type= button - botão type= reset - limpa os campos type= submit - envia um formulário
- 29. Input - filee hidden <form enctype=“multipart/form-data”> <input type=“file” value=“Escolher arquivo”/> </form> Escolher arquivo <input type="hidden" name="assinatura" value="Treinamento_Avansys"/>
- 30. Form - enctype <formenctype=“application/x-www-form-urlencoded”> Padrão. Todos os caracteres são codificados antes de serem enviadas (espaços são convertidos em símbolos "+", e caracteres especiais são convertidos para valores HEX ASCII) <form enctype=“multipart/form-data”> Não caracteres são codificados. Este valor é necessário quando você estiver usando formulários que possuem um arquivo de controle de upload <form enctype=“text/plain”> Espaços são convertidos em símbolos "+", mas sem caracteres especiais são codificados
- 31. Form - detalhes Tabindex <inputtype=“text” tabindex=“1” /> <input type=“password” tabindex=“2” /> <input type=“submit” tabindex=“3” /> Name - identifica o campo <input type=“text” name=“nome”/> Value - valor do campo <input type=“checkbox” name=“opcao” value=“opcao1”/>
- 32. Test Drive 1. Criarum arquivo chamado form.html 2. Estruturar 2 formulários 1. Um com método get com: a. nome b. e-mail c. sexo d. a mensagem sendo passada para sucess.html, onde haverá uma mensagem de sucesso e. Uma página sucess.html com uma mensagem de sucesso 2. Um com método post com: a. nome b. e-mail c. foto d. data e. feedback sobre a aula f. opção de receber lista de exercícios g. enviar para luciana.santana@avansys.com.br
- 33.
Notas do Editor
- #4 CERN, o Laboratório Europeu de Física de Partículas, em Genebra, na Suíça.
- #5 Pesquisa de física de partículas, muitas vezes envolve a colaboração entre os institutos de todo o mundo. Tim estava trabalhando em uma seção de serviços de computação do CERN, quando teve a idéia de permitir que pesquisadores de sites remotos do mundo para se organizar e cultivar juntos asinformações. Mas, longe de simplesmente fazer disposição uma grande quantidade de documentos de pesquisa, como os arquivos que podem ser baixados para computadores individuais, ele sugeriu que você realmente pode vincular o texto nos próprios arquivos.
- #6 E assim surgiu o HTML - Hyper Text Markup Language
- #7 O HTML possui duas partes primordiais: O HEAD, onde incluímos o titulo, os metadados e as chamadas e códigos css e javascript. Metadados são informações sobre dados. A tag <meta> fornece metadados sobre o documento HTML que não serão exibidos na página, mas legíveis por máquina. No BODY, incluímos tudo o que será visível.
- #10 _blank: Opens the linked document in a new window or tab _self: Opens the linked document in the same frame as it was clicked (this is default) _parent: Opens the linked document in the parent frame _top: Opens the linked document in the full body of the window
- #11 ul --> Unordered Lists ol --> Ordered Lists dl --> Definition Lists
- #21 O <thead>, <tbody> e elementos <tfoot> não afetarão o layout da tabela por padrão. No entanto, você pode usar CSS para mudar como esses elementos afetam o layout da tabela.
- #29 Dentro de um elemento <button> você pode colocar conteúdo, como texto ou imagens. Esta é a diferença entre este elemento e os botões criada com o elemento <input>. Nota: Se você usar o elemento <button> em um formulário HTML, navegadores diferentes podem apresentar valores diferentes. Use <input> para criar botões em um formulário HTML.
- #32 Value - valor do item