HTML_pt

Prévia do material em texto

Desenvolvimento Web para Hackers
Luli Rosenberg
Desenvolvimento Web para Hackers
Ministramos cursos Mundialmente
Orador em conferencias de Cyber Security
Pesquisador de Cyber na empresa Check Point.
Amamos aprender novas tecnologias
:)
 Quem Somos
Desenvolvimento Web para Hackers
Visão geral do curso
Aprender HTML, JavaScript, PHP, MySQL.
Aprender conceitos web e como aplica-los.
Aprender como construir um simples aplicativo web
Como fazer debug de seu aplicativo web
Desafios de injeção de códigos
Projeto final
Desenvolvimento Web para Hackers
O que é HTML?
HTML (Hyper Text Markup Language) é o bloco de construção mais básico da Web. Ele define o significado e a estrutura do conteúdo da web. 
Outras tecnologias além do HTML são geralmente usadas para descrever a aparência ou apresentação de uma página da web ou funcionalidade como CSS e JavaScript
Desenvolvimento Web para Hackers
Editor – notepad++
Notepad++ é um editor de código-fonte gratuito que suporta várias linguagens de programação em execução no Windows.
Este é o editor mais simples que usaremos neste curso.
https://notepad-plus-plus.org/downloads/v7.8.6/
brackets.io Um editor de textos moderno e de código aberto que entende web design. Para usuários avançados, sugerimos o uso dele
http://brackets.io/
Desenvolvimento Web para Hackers
Anatomia de um documento HTML
https://www.w3schools.com/html/default.asp
Desenvolvimento Web para Hackers
O que está em sua cabeça(head)?
O cabeçalho de um documento HTML (head) é a parte que não é exibida no navegador da Web quando a página é carregada.
Ele contém informações como o título da página, links para favicons personalizados e outros metadados.
Desenvolvimento Web para Hackers
Anatomia de um documento HTML
Desenvolvimento Web para Hackers
Elementos – heading(cabeçalho) e paragrafo
As seguintes tags html são importantes para criar uma página da web simples:
<h1> - <h6> 	Essa tag define 6 níveis de cabeçalhos.
<p>			Essa tag define um paragrafo.
<br/>		This tag is a line break.
<hr/>		Essa tag é uma quebra de linha.
<pre>		Define o texto pré-formatado.
Desenvolvimento Web para Hackers
Elements – Elementos de formatação
O HTML também define elementos especiais para definir texto com um significado especial.
<b>  			Texto em negrito
<strong> 		Texto importante
<i> 			 Texto em itálico
<em> 			Texto enfatizado
<mark> 	 		Texto marcado
<small> 	 	 Texto pequeno
<del> 			Texto deletado
<ins> 			Texto inserido
<sub> 			Texto subscrito
<sup> 			Superscript
Desenvolvimento Web para Hackers
Elementos – Lista
Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>.
<ul><li></li></ul> - Lista simples
<ol type="a"> - Lista de um tipo (type)
 <li>Coffee</li>
</ol>
For more info: https://www.w3schools.com/html/html_lists.asp
Desenvolvimento Web para Hackers
Elementos – Comentários 
Você pode adicionar comentários à sua fonte HTML usando a seguinte sintaxe:
<! - Este é um comentário ->
<p> Este é um parágrafo. </p>
<! - Lembre-se de adicionar mais informações aqui ->
Desenvolvimento Web para Hackers
Elementos – imagens
As imagens podem melhorar o design e a aparência de uma página da web.
<img src="hacker.jpg" alt="hacker" width="500" height="600">
Desenvolvimento Web para Hackers
Elementos – Hyperlinks
Os links são encontrados em quase todas as páginas da web. Os links permitem que os usuários cliquem no caminho de uma página para outra.
<a href="url"> texto do link </a>
Ou torne um objeto clicável:
<a href="index.html">
 <img src="back.png">
</a>
Desenvolvimento Web para Hackers
Elementos – Hyperlinks
Marcadores HTML são usados para permitir que os leitores pulem para partes específicas de uma página da Web.
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
Desenvolvimento Web para Hackers
Elementos – iframe
Um iframe é usado para exibir uma página da web dentro de uma página da web.
<iframe src="url"></iframe>
<iframe src="https://platform.itsafe.co.il" height="200" width="300"></iframe>
Desenvolvimento Web para Hackers
Elementos – Tabelas
Uma tabela HTML é definida com a tag <table>
para obter mais informações:
https://www.w3schools.com/html/html_tables.asp
Desenvolvimento Web para Hackers
Id e Class
Um elemento HTML pode ter apenas um ID exclusivo que pertença a esse único elemento, enquanto um nome de classe pode ser usado por vários elementos
O valor do ID pode ser usado pelo CSS e JavaScript para executar determinadas tarefas para um elemento exclusivo com o valor do ID especificado, enquanto o nome da classe permite executar determinadas tarefas para vários elementos.
Desenvolvimento Web para Hackers
Id e Class
Desenvolvimento Web para Hackers
Anatomia de um elemento HTML
Nesting elements - Elementos Aninhados
Block versus inline elements - Elementos block level 
Empty Elements - Elementos vazios 
Attributes - atributos
Boolean attributes - Atributos Booleanos
Omitting quotes around attribute values - Omitindo aspas em atributos
Single or double quotes - aspas simples ou duplas
 
Desenvolvimento Web para Hackers
Israel Wenik (IW) - Vc tem alguma sugestao melhor para traduzir esses elementos?
Y R (YR) - A verdade que ja gravei esse slide com o ingles mesmo, mas vale a pena ajeitar pros alunos baixarem depois. Botei a tradução ,ais proxima do ingles, nao sei se ta 100%, mas de qualquer forma eu explico no video
Anatomia de um elemento HTML
Elementos aninhados
Desenvolvimento Web para Hackers
Anatomia de um elemento HTML
Elementos block-level
Desenvolvimento Web para Hackers
Anatomia de um elemento HTML
Elementos e atributos vazios
Desenvolvimento Web para Hackers
Anatomia de um elemento HTML
Atributos Booleanos
Omitir aspas em elementos
Aspas simples ou duplas 
Desenvolvimento Web para Hackers
Anatomia de um documento HTML
Caracteres especiais Entidade HTML
HTML hex encoding:
Desenvolvimento Web para Hackers
Ações de Form (Formulário) – GET & POST
O elemento HTML <form> representa uma seção do documento que contém controles interativos para enviar informações para um servidor da web.
action – back-end que analisará o formulário
enctype – tipo de codificação
Application/x-www-form-urlencoded (default)
mutlipart/form-data (to send a file)
text/plain
method – Metodo HTML 
get
post
target –	onde abrir o quadro
self
_blank
_parent
 
Desenvolvimento Web para Hackers
Quiz
Tente enviar o seguinte form
<form action="api.php">
	<input type="text" placeholder="username">
</form>
 
Desenvolvimento Web para Hackers
Eventos HTML 
Eventos adicionam a capacidade de permitir que eventos acionem ações em um navegador, como iniciar um JavaScript quando um usuário clica em um elemento.
https://www.w3schools.com/tags/ref_eventattributes.asp
Desenvolvimento Web para Hackers
HTML Tags
No HTML, há algumas novas tags e algumas antigas que agora estão obsoletas. Você precisa se familiarizar com algumas tag que podem ser usadas para encontrar vulnerabilidades
https://www.w3schools.com/tags/default.asp
Desenvolvimento Web para Hackers
Home Work 👻
Resolva os seguintes desafios:
https://desafios.cysource.com.br/HTML/stage1.php?HTML=apple
https://desafios.cysource.com.br/HTML/stage2.php?HTML=apple
https://desafios.cysource.com.br/HTML/stage3.php?HTML=apple
Desenvolvimento Web para Hackers
Home Work 👻
Familiarize-se com todas as seguintes tags HTML:
https://www.w3schools.com/tags/ref_byfunc.asp
Crie as seguintes 4 páginas simples:
Login/Registrar
Página principal do banco, que conterá algumas informações sobre a conta
Página de transferência de dinheiro
Página de perfil para atualizar as informações do titular da conta
Desenvolvimento Web para Hackers
Perguntas
Desenvolvimento Web para Hackers