Acesse os slides no link:
Faça o download dos arquivos:
12 e 13 de Setembro de 2016
12 e 13 de Setembro de 2016
12/09/2016
12/09/2016
12/09/2016
12/09/2016
Foi criada por Tim Berners-Lee (1990) usando um computador NeXT e sua função era informar sobre a nova e emocionante World Wide Web.
12/09/2016
Conjunto de rede de computadores conectados por protocolos
Dispositivos comuns e servidores
Contém a World Wide Web
http://internet-map.net/
Customização
Frameworks
Conectividade
Mobile & Web
Utilização de marcadores <.../> como
Abertura e fechamento de tag
<a>
</a>
Utilização de atributos
<a href="...">
</a>
<tagname>Conteudo</tagname>
Na maioria das vezes,
<!DOCTYPE html>
<html>
<head>
<title>Título do página</title>
</head>
<body>
<h1>Título </h1>
<p>Parágrafo</p>
<p>Insira o resto do código aqui em body ! </p>
</body>
</html>
Observação: Apenas o conteúdo dentro de <body> será mostrado no browser
<!DOCTYPE html>
<html>
<head>
<title>Título do página</title>
</head>
<body>
<h1>Título </h1>
<p>Parágrafo</p>
<p>Insira o resto do código aqui em body ! </p>
</body>
</html>
Define o início do documento para que o browser identifique como código HTML
Trata-se do cabeçalho e traz informações
Conteúdo principal e exibido pelo navegador
Utilizada para criar parágrafos.
Utilizada para pular uma linha.
Utilizada para inserir imagens na página html.
Utilizada para agrupar e dividir elementos em blocos.
Utilizada para destacar e palavras, variando do h1 até h6.
O tamanho é dado do maior (1) para o menor (6).
Utilizada para criar listas ordenadas.
Utilizada para criar listas
não-ordenadas.
12/09/2016
12/09/2016
Economiza-se tempo
em manutenção e criação da página
Código isolado num único arquivo
Interface para diferentes navegadores
Alguns comandos de CSS
Mais comandos de CSS
<link rel="stylesheet" type="text/css" href="theme.css">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
12/09/2016
Java e Scripts (e como Javascript não é um mas é o outro)
O que é:
Java
BC, OO
JVM
TIOBE: #1, 18.236%, -1.33%
Estender funcionalidade
12/09/2016
Javascript
é tipo Java
Interpretada
Browser
#1 GitHub
Java e Scripts (e como Javascript não é um mas é o outro)
* não existe um logo oficial
12/09/2016
JavaScript é uma linguagem interpretada.O uso primário de JavaScript é escrever funções que são embarcadas ou incluídas em páginas HTML. Alguns exemplos desse uso são:
12/09/2016
12/09/2016
Workshop
A melhor forma de aprender é praticar.
Neste momento, não se preocupe com as informações que você irá inserir, o importante é que você comece a se familiarizar com o HTML e CSS.
<!DOCTYPE html>
<html>
<head>
<title> Workshop </title>
<meta charset="utf-8">
</head>
<body>
<h2> A melhor forma de aprender é <span> praticar </span> </h2>
Utilizando HTML e CSS você desenvolverá seu próprio portfolio
12/09/2016
Workshop
Invista no visual
12/09/2016
Workshop
Utilize divs coloridas
12/09/2016
Workshop
Trouxemos alguns exemplos para você se inspirar.
Workshop
Exemplo 1
Workshop
Exemplo 2
Workshop
Exemplo 3
Workshop
Workshop
Que tal tentar inserir alguma animação? Tudo bem se você não chegar até aqui, teremos a próxima aula para que você continue incrementando seu portfólio.