Dev Web em 40

Internet em pauta
Desmistificando o desenvolvimento de websites
Gabriel Augusto Fernandes

Agenda
• Glossário
• Visão Geral
• HTML
• Introdução
• Tags
• Atributos
• CSS
• Introdução
• Seletores
• Propriedades

• Formação
• ETEC – Informática para Internet
• UNESP – Sistemas de Informação
• Illinois State University
• Hobbies
• Atividades outdoor
• Fotografia
• Culinária
Perfil

Sopa de Letrinhas
• IP (Internet Protocol)
• 192.168.255.255
• 2001:0db8:85a3:08d3:1319:8a2e:0370:7344
• DNS (Domain Name System)
• FTP (File Transfer Protocol )
• Domínio
• Servidor Web

Nuvem
Cloud, Nube, Nubes, Nuage, Wolke, Ybatinga, 雲, облако

Introdução ao HTML
• HyperText Markup Language
• Linguagem de marcação
• Atualmente na versão 5
• Tags criam semântica

ativando modo hacker...
carregando html...

Tags HTML
<!DOCTYPE html>
<html>
<head>
<title> Que tal esse texto colorido? </title>
</head>
<body>
Conteúdo da página
</body>
</html>

Tags HTML
<h1> Texto bem bem grande </h1>
<h2> Texto bem grande </h2>
<h3> Texto grande </h3>
<p> parágrafo de um texto</p>
Primeira linha <br> Segunda linha

Tags HTML
<a href="pagina.html"> Link </a>
<img src="olar.jpg">
<div> Conteúdo </div>

Tags HTML
<ul>
<li> Ponto </li>
<li> Ponto </li>
<li> Ponto </li>
</ul>
<ol>
<li> Primeiro </li>
<li> Segundo </li>
<li> Terceiro </li>
</ol>

Tags HTML
<table>
<tr>
<td> Primeira linha, primeira coluna </td>
<td> Primeira linha, segunda coluna </td>
</tr>
<tr>
<td> Segunda linha, primeira coluna </td>
<td> Segunda linha, segunda coluna </td>
</tr>
</table>

Tags HTML
<form action="pagina_destino.html">
<input type="text" name="email">
<textarea name="descricao"></textarea>
<input type="password" name="senha">
<button type="submit"> Enviar </button>
</form>

Atributos HTML
<div id="menu"> ... </div>
<h1 class="titulo"> ... </h1>
<div class="artigo"> ... </div>
<div class="artigo destaque"> ... </div>

Atributos HTML
<a href="pagina.html"> Link </a>
<img src="olar.jpg" alt="Um olar bem grande">

Atributos HTML
<form action="pagina_destino.html">
<input type="text">
<input type="password">
<button type="submit"> Enviar </button>
</form>

Introdução ao CSS
• Cascading Style Sheets
• Apresentação (aparência)
• Criação de padrões
• Atualmente na versão 3

carregando css...

Seletores CSS
table {}
.titulo {}
#menu {}
h1, h2 {}
h1.titulo {}
.artigo p {}
.artigo.destaque {}
a:hover {}

Propriedades CSS
.titulo {
font-family: Arial;
font-size: 16px;
text-align: center;
color: #F00;
}
h1.titulo {
font-weight: bold;
}

Propriedades CSS
#menu {
width: 100%;
height: 80px;
}
a:hover {
background-color: #EEE;
}

Propriedades CSS
h1, h2 {
margin-top: 10px;
margin-bottom: 10px;
}
.artigo.destaque {
padding: 20px;
}

Lógica de Programação
• O que é lógica de programação?
• O que é Javascript?

carregando javascript...

Variáveis
<script>
var status = "ativo";
var contador = 2;
var lista = ["gabriel", "maria", "rodrigo", "bianca"];
</script>

Operações Condicionais
<script>
if (contador < 2) {
// faço alguma coisa
}
</script>

Operações de Repetição
<script>
for (var i = 0; i < 10; i++) {
// repete a mesma execução 10 vezes
}
</script>

Operações de Repetição
<script>
var contatdor = 0;
while (status != "ativo") {
if (contador == 3) {
status = "ativo";
}
contador++;
}
</script>

Funções
<script>
function mostrarMensagem () {
// executa alguma coisa
}
</script>

Funções
<script>
function mostrarMensagem (mensagem) {
alert(mensagem);
}
</script>

Funções
<script>
mostrarMensagem("Olar");
</script>

Funções
<script>
function mostrarMensagem (mensagem) {
alert(mensagem);
return "enviado";
}
var retorno = mostrarMensagem("Olar");
</script>

Refêrencia
• https://www.w3schools.com
• https://www.caelum.com.br/apostila-html-css-javascript/introducao-
a-html-e-css/
• http://tableless.github.io/iniciantes/manual/html/
• http://tableless.github.io/iniciantes/manual/css/

Dev Web em 40

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (15)

Semelhante a Dev Web em 40

Semelhante a Dev Web em 40 (20)

Dev Web em 40