1 of 56

INTRODUÇÃO AO HTML/CSS

Prof. Dr. Lucimar Sasso Vieira

2 of 56

Aula de PMI

2

Introdução e Conceitos de HTML

  • Hyper Text Markup Language

​

  • Linguagem de Marcação de Hipertexto

​

  • Tim Berners-Lee, 1990

​

  • É uma linguagem de marcação

​

  • Não é uma linguagem de programação

​

  • Funciona por meio de “tags”

3 of 56

Aula de PMI

3

Minha Primeira Página HTML

<html>

<head>

<title>Minha Primeira Pagina HTML</title>

</head>

<body>

Boa tarde!

</body>

</html>

​

4 of 56

FUNDAMENTOS DA PROGRAMAÇÃO CLIENTE/SERVIDOR

Prof. Dr. Lucimar Sasso Vieira

5 of 56

Aula de PMI

5

Fundamentos da Programação Cliente Servidor

  • Computador Cliente

​

  • Computador Servidor

​

  • Hospedagem no Servidor (pagos e gratuitos)

​

  • Domínios (registro.br)

​

6 of 56

Aula de PMI

6

Fundamentos da Linguagem HTML

  • Introdução e Conceitos
  • Tags Fundamentais
  • Formatação
  • Tabela de Cores (cor da fonte, fundo da página, etc.)
  • Tabela de Acentuação
  • Imagens (no corpo, no fundo da página, etc.)
  • Links
  • Frames, Tabelas, iframes e Divs
  • Listas
  • Formulários

7 of 56

Aula de PMI

7

Bibliografia

  • W3S

​

  • Playlist

​

​

8 of 56

Aula de PMI

8

Programação WEB

  • HTML
  • CSS (com Bootstrap)
  • JavaScript (com Jquery)

​

  • Banco Dados (SQL)

+

  • Linguagem de Programação WEB

​

​

9 of 56

PROJETO FINAL: �GRUPOS E REGRAS

Prof. Dr. Lucimar Sasso Vieira

10 of 56

10

MANHÃ

  • Grupo 1: Isaque, João Carlos e Henrique
  • Grupo 2: Gabriela, Gislaine e Gabrielly
  • Grupo 3: João Victor, Matheus C. e Gabriel R.
  • Grupo 4: Heitor, Lucas G. e Rodrigo D.
  • Grupo 5: Carlos e Max
  • Grupo 6: Heliana e Marcelo
  • Grupo 7: Caio e Kawany
  • Grupo 8: Adila, Angelica e Giovana
  • Grupo 9: Ricardo e Felipe
  • Grupo 10: Kainan e Lucas A.
  • Grupo 11: Ana Beatriz, Lucas R. e Rodrigo M.
  • Grupo 12: Ketelly, JV Laguna
  • Grupo 13: Ronie, Anderson e Leonardo
  • Grupo 14: Caio e Rebeca
  • Grupo 15: Rian e Geovana
  • Grupo 16: Marcelo, Paulo
  • Grupo 17: André e Lucas B.

​

11 of 56

11

NOITE

  • Grupo 1: Vinicius T., Fausto e Julio G.
  • Grupo 2: Luiz Felipe e Taynara
  • Grupo 3: Gustavo, Estevão e Matheus F.
  • Grupo 4: João Paulo e Eric
  • Grupo 5: Arthur, Hugo e Mateus H.
  • Grupo 6: Sara e Lucas
  • Grupo 7: Ronaldo, Claudiney e Alvaro
  • Grupo 8: Gabriel B., André e Carlos
  • Grupo 9: Isabella e Letícia
  • Grupo 10: Bruna e Bruna
  • Grupo 11: Carolina, Juliano e Rafael X.
  • Grupo 12: Eduardo, Daniel e Rafael
  • Grupo 13: Pamela e Marina
  • Grupo 14: Matheus T., Vinicios Maeda e Gabriel P.

12 of 56

Aula de PMI

12

Projeto

  • MS-Word 🡺 analise de Requisitos de uma situação real

​

  • MS-Excel 🡺 custos, despesas, hora homem e receitas

​

  • MS-Power Point 🡺 apresentação da metodologia do projeto

​

  • HTML/CSS etc... 🡺 site de uma pessoa, empresa ou evento

​

  • Git/Github 🡺 código fonte

13 of 56

Aula de PMI

13

Apresentação dos Slides

  • Capa
  • Introdução
  • Objetivo Geral
  • Objetivo Específico
  • Fundamentação Teórica (Revisão Bibliográfica)
  • Materiais e Métodos (Metodologia)
  • Desenvolvimento
  • Resultados
  • Conclusões
  • Bibliografia

14 of 56

Aula de PMI

14

Algumas Tags HTML

<nome> 🡺 abrindo uma tag

</nome> 🡺 fechando uma tag

<nome>...</nome>

​

<html>...</html> 🡺 iniciar e finalizar um documento HTML

<head>...</head> 🡺 cabeçalho da página

<title>...</title> 🡺 título da página

<body>...</body> 🡺 corpo da página 🡺 conteúdo

15 of 56

Aula de PMI

15

Incrementando o cabeçalho

<!DOCTYPE html>

<html lang="pt-br">

16 of 56

Aula de PMI

16

Tags de Formatação de Texto

<b>...</b> 🡺 negrito

<i>...</i> 🡺 itálico

<s>...</s> 🡺 tachado

<u>...</u> 🡺 sublinhado

<br> 🡺 pula uma linha em branco

17 of 56

Aula de PMI

17

Tags de Formatação de Texto

<h?>...</h?> 🡺 Título de Cabeçalho

<h6>...</h6> 🡺 menor texto

-

-

-

<h1>...</h1> 🡺 maior texto

<p>...</p> 🡺 parágrafos

<!-- Este é um comentário em HTML-->

<hr> 🡺 desenha uma linha (filete)

18 of 56

Aula de PMI

18

Tags de Formatação de Texto

<blockquote>...</blockquote> 🡺 texto destacado

<sub>...</sub> 🡺 texto inferior

<sup>...</sup> 🡺 texto superior

​

<p style="color:blue">Cor Azul</p>

<p style="font-family:verdana">Tipo Verdana</p>

<p style="font-size:30px">Tamanho 30</p>

19 of 56

Aula de PMI

19

Tabela de Acentuação

Á â ã à ó ô ç

​

&reg;

&copy;

​

<meta charset="UTF-8">

20 of 56

20

Sistemas de Cores

  • RGB

​

  • Hexadecimal

​

  • CMYK

​

21 of 56

Aula de PMI

21

Cores de Fundo

  • Fundo da Página

​

  • Background da Página

​

22 of 56

Aula de PMI

22

Bgcolor

<body bgcolor=“blue”>

​

ou

​

<body style="background-color: #FFFF00;">

​

​

23 of 56

Aula de PMI

23

Inserindo Imagens

<img src = “caminho/arquivo.ext”>

<img src = "url">

​

<img src="boat.gif" alt="Big Boat">

​

<img src="/images/hackanm.gif“ width="20" height="20">

​

​

​

24 of 56

Aula de PMI

24

Background

<body background="clouds.gif">

​

<body background="http://www.w3schools.com/clouds.gif">

​

​

25 of 56

Aula de PMI

25

Links (âncoras)

<a href="url">Texto a ser exibido</a>

​

<a href=“menu1.html">Menu1</a>

​

<a href="http://www.w3schools.com/">Visite as W3Schools!</a>

​

<a href="http://www.w3schools.com/"

target="_blank">Visite as W3Schools!</a>

​

Inserir imagem como hiperlink

26 of 56

Aula de PMI

26

Layouts em HTML

  • Table

​

  • Frames

​

  • iFrames

​

  • Divs

​

27 of 56

Aula de PMI

27

Tabelas

  • Table: <table>linhas e colunas</table>
        • <tr> linhas </tr>
        • <td> colunas </td>

​

  • Exemplo Boletim
  • Bordas
  • Cabeçalho (Título)
  • Cor de Fundo da Tabela e Células
  • Mesclar Células
  • Imagem nas Células
  • Etc.

​

28 of 56

Aula de PMI

28

Frames

<frameset cols="50%,50%">

<frame src=“pagina1.html">

<frame src=“pagina2.html">

</frameset>

​

(só digita o código acima na index.html)

29 of 56

Aula de PMI

29

iFrames

  • <iframe>...</iframe>

30 of 56

Aula de PMI

30

Divs

  • <div>...</div>

​

style="border: 1px solid;"

​

​

​

31 of 56

Aula de PMI

31

Listas Ordenadas e Não Ordenadas

<ul>

<li>Arroz</li>

<li>Arroz</li>

<li>Arroz</li>

</ul>

​

<ol>

<li>Arroz</li>

<li>Arroz</li>

<li>Arroz</li>

</ol>

​

32 of 56

Aula de PMI

32

Formulários de Captura de Dados

<form>

​

</form>

​

33 of 56

Aula de PMI

33

Campos de Texto

<form>

<label>Nome</label>

<input type="text" name=“f_nome“ id=“f_nome”>

<br>

<label>E-mail</label>

<input type="text" name=“f_email“ id=“f_email”>

</form>

34 of 56

Aula de PMI

34

Botões Radiais

<form>

<input type="radio" name=“genero" value="masculino“ id=“genero“>

<label>Masculino</label>

<br>

<input type="radio" name=" genero " value=“feminino“ id=“genero“>

<label>Feminino</label>

</form>

35 of 56

Aula de PMI

35

Caixas de Seleção

<form>

<input type="checkbox" name=“arroz“ id=“arroz” value=“arroz”>

<label>Arroz</label>

<br>

<input type="checkbox" name=“feijao“ id=“feijao” value=“feijão”>

<label>Feijão</label>

<br>

<input type="checkbox" name=“bife“ id=“bife” value=“bife”>

<label>Bife</label>

</form>

36 of 56

Aula de PMI

36

Drop Down

<form>

<select name="carros“ id=“carros”>

<option value="volvo">

<label>Volvo</label>

<option value=“mercedes">

<label>Mercedes</label>

<option value=“bmw">

<label>BMW</label>

<option value="audi">

<label>Audi</label>

</select>

</form>

37 of 56

Aula de PMI

37

Area de Texto

<form>

<textarea name=“texto“ id=“texto" rows="5" cols="33">

</form>

38 of 56

Aula de PMI

38

Submit

<form action=“programa.php“ method=“post“ name=“enviar“ id=“enviar” >

<label>Nome do Usuário:</label>

<input type="text" name="usuario">

<input type="submit" value=“enviar">

</form>

39 of 56

Aula de PMI

39

Fundamentos do CSS

  • Cascading Style Sheets

​

  • Folhas de Estilo em Cascatas

​

  • Wium Lie e Bert Bos,1994

​

  • Estilizar, formatar, “enfeitar” páginas HTML

​

  • Facilita o reaproveitamento de estilos

​

​

​

​

40 of 56

Aula de PMI

40

Fundamentos do CSS

  • Seletor

​

  • Declaração

​

  • Propriedade

​

  • Valor

​

p { color: #FF00FF; }

​

​

41 of 56

Aula de PMI

41

Como utilizar CSS

  • Inline

​

  • Interno

​

  • Externo

​

​

​

​

42 of 56

Aula de PMI

42

Inline

<body style="background-color:#FF00FF;">

</body>

​

<div style="border: 1px solid;">

Boa noite

</div>

​

​

​

43 of 56

Aula de PMI

43

Interno

<head>

<style>

body{background-color: #00FF00;}

div{border: 1px solid;}

</style>

</head>

​

​

​

44 of 56

Aula de PMI

44

Externo

  • Jogar o CSS interno do site para um arquivo style.css e chamar na index.html:

​

<link rel="stylesheet" href="style.css">

​

​

​

​

45 of 56

Aula de PMI

45

Exemplo Site (CSS Externo)

  • Passar pen drive ou whatsapp

​

​

46 of 56

Aula de PMI

46

Tipos de Seletores

  • tag

​

  • #id

​

  • .class

​

​

​

​

47 of 56

47

Tag

  • É quando o seletor é uma tag HTML

​

  • Basta colocar o nome da tag no código CSS

​

body

{

background-color: #00FF00;

}

​

​

​

​

48 of 56

48

#ID

  • É quando criamos um identificador para um determinado componente HTML específico

​

  • Para referenciar no CSS é necessário colocar o símbolo “#” antes do nome do id

​

#header

{

background-color: #FFFFFF;

}

​

​

​

​

49 of 56

49

.Class

  • As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a VÁRIOS elementos de uma vez

​

  • Para referenciar no CSS é necessário colocar o símbolo “.” antes do nome da class

​

.leftcol

{

text-align: right;

}

​

​

​

​

​

​

50 of 56

Aula de PMI

50

Introdução ao Bootstrap

  • 2010

​

  • É um framework front-end que fornece estruturas de CSS para a criação de sites e aplicações responsivas de forma rápida e simples

​

  • Foi desenvolvido para o Twitter

​

  • Mark Otto e Jacob Thornton Logo

​

51 of 56

Aula de PMI

51

Onde encontrar Bootstrap

https://getbootstrap.com

52 of 56

Aula de PMI

52

Como usar Bootstrap

  • Ver linha no head do Legacy!!!!!!!!!!!!!!!!!!!!!

​

53 of 56

Aula de PMI

53

RESPONSIVIDADE

<meta http-equiv="X-UA-Compatible" content="IE=edge">

​

<meta name="viewport" content="width=device-width, initial-scale=1.0">

54 of 56

Aula de PMI

54

Introdução ao jQuery

  • Passar o site

​

  • ?????w

​

55 of 56

Aula de PMI

55

Introdução a Programação Backend e Frameworks

  • PHP, Java, .Net, Python, etc...

​

  • MySQL, SQL Server, Oracle, Postgree, etc...

​

56 of 56

FIM!

Prof. Dr. Lucimar Sasso Vieira