Revisão
HTML, CSS e BOOTSTRAP
EEEP Leopoldina Gonçalves
Hello!I am Franciosney Souza
Teacher of develop WEB
EEEP Leopoldina Gonçalves Quezado
Academic training
Bachelor in Information Systems
Professional Master in Software Engineering
2
Linguagem de Marcação de
Hipertexto
HTML é uma linguagem de marcação
utilizada na construção de páginas na
Web.
Este elemento é a base para a
construção de páginas na internet, que
podem ser interpretados
por navegadores como Google
Chrome, Mozilla Firefox, Internet
Explorer e ETC.
3
Quem é Tim Berners-Lee ?
Berners-Lee é considerado o pai da internet, ele criou a linguagem de marcação
HTML, a URL, o protocolo HTTP, o primeiro servidor e o primeiro navegador de
internet na década de 90.
4
“
5
As tags são usadas para informar ao
navegador a estrutura do site. Ou seja:
quando se escreve um código em
HTML, as tags serão interpretadas pelo
navegador, produzindo assim a
estrutura e o conteúdo visual da
página.
O que são tags HTML?
“
6
● <!DOCTYPE html>
A tag !DOCTYPE informa ao navegador
a versão do HTML que está sendo
utilizada no documento.
● <html></html>
Esta tag é o elemento básico da
estrutura do HTML. Assim sendo, ela
conterá todos os elementos do seu
documento. Todo documento HTML
deve iniciar e finalizar com essa tag;
Principais tags do HTML?
“
7
● <head></head>
Essa tag delimita o cabeçalho do
documento. Não possui nenhum valor
visível;
● <title></title>
Essa tag define o título da sua página, o
nome que aparecerá na sua aba, janela
ou guia.
Principais tags do HTML?
“
8
● <meta/>
Essa tag permite inserir metadados ao seu
documento, no caso acima, a informação
charset=”UTF-8″, que garante a compatibilidade do
código com os caracteres de padrão latino
americano;
● <body></body>
Finalmente, a tag que representa o corpo do
documento. Em síntese, é nessa tag que todos os
elementos visíveis do seu site devem ser inseridos.
Principais tags do HTML?
“
9
Os atributos são usados para personalizar as tags,
modificando sua estrutura ou funcionalidade.
Igualmente, os atributos são utilizados para atribuir
uma classe ou id a um elemento.
O que são atributos no HTML
“
10
❖ class=”…“
Atribui uma classe ao elemento (uma classe
pode ser utilizada para um ou mais elementos);
❖ id=”…“
Atribui um id ao elemento (um id deve ser
único, ou seja atribuído a um único elemento);
Principais atributos do HTML
Estrutura básica de um
documento HTML
11
Cascading Style Sheets
CSS é uma folha de estilo utilizada para
definir a aparência de páginas da
internet que adotam para o seu
desenvolvimento Linguagem de
Marcação de Hipertexto.
12
“
13
A sintaxe CSS é formada por uma regra com 3
itens fundamentais para definir um estilo. São
eles:
Seletor;
Propriedade;
Valor.
Sintaxe CSS (Escrita)
“
14
● O seletor vincula um elemento do documento
HTML a declaração CSS.
● A propriedade define uma característica
visual para o elemento HTML “selecionado”
pelo seletor.
● Já o valor atribui valor a propriedade
escolhida para o elemento selecionado.
Sintaxe CSS (Escrita)
JavaScript
JavaScript é uma das linguagens de
programação utilizada para construir
páginas dinâmicas na WEB (Interação
com o Usuário), desenvolver aplicativos
para smartphones e até jogos
eletrônicos.
15
O que é o Bootstrap?
16
Bootstrap é um framework web gratuito para
desenvolvimento de interface e front-end para sites e
aplicações web usando HTML, CSS e JavaScript.
Como baixar
o bootstrap?
Entrar no site getbootstrap.com e
clicar na opção download.
17
Estrutura do pacote bootstrap
18
Bootstrap
CSS JS
bootstrap.min.js
bootstrap.min.css
CSS é responsável
pela decoração.
JS é responsável
pela Interação com
o usuário.
“
19
❖ EXTERNO
Busca de um servidor Ex:
CSS -> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
JS - > <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
❖ INTERNO
Busca do computador Ex:
CSS -> <link href="CSS/bootstrap.min.css" >
JS - > <script src="JS/bootstrap.min.js"></script>
Existe duas forma de chamar o bootstrap na página HTML
“
20
Chamando bootstrap Local
“
21
O Bootstrap trabalha com um sistema de grid padrão que
utiliza 12 colunas para cada linha (ROW), quem podem ser
quebradas em subcolunas (COL).
ROW
ROW
ROW
Place your screenshot here
22
Grid Desktop
Para a versão responsiva
em desktop e tablet
utiliza-se col-md-
tamanho da coluna, col-
sm-tamanho da coluna.
Grid Mobile
Para a versão responsiva
em celulares utiliza-se col-
xs-tamanho da coluna.
Place your screenshot here
23

Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney

  • 1.
    Revisão HTML, CSS eBOOTSTRAP EEEP Leopoldina Gonçalves
  • 2.
    Hello!I am FranciosneySouza Teacher of develop WEB EEEP Leopoldina Gonçalves Quezado Academic training Bachelor in Information Systems Professional Master in Software Engineering 2
  • 3.
    Linguagem de Marcaçãode Hipertexto HTML é uma linguagem de marcação utilizada na construção de páginas na Web. Este elemento é a base para a construção de páginas na internet, que podem ser interpretados por navegadores como Google Chrome, Mozilla Firefox, Internet Explorer e ETC. 3
  • 4.
    Quem é TimBerners-Lee ? Berners-Lee é considerado o pai da internet, ele criou a linguagem de marcação HTML, a URL, o protocolo HTTP, o primeiro servidor e o primeiro navegador de internet na década de 90. 4
  • 5.
    “ 5 As tags sãousadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um código em HTML, as tags serão interpretadas pelo navegador, produzindo assim a estrutura e o conteúdo visual da página. O que são tags HTML?
  • 6.
    “ 6 ● <!DOCTYPE html> Atag !DOCTYPE informa ao navegador a versão do HTML que está sendo utilizada no documento. ● <html></html> Esta tag é o elemento básico da estrutura do HTML. Assim sendo, ela conterá todos os elementos do seu documento. Todo documento HTML deve iniciar e finalizar com essa tag; Principais tags do HTML?
  • 7.
    “ 7 ● <head></head> Essa tagdelimita o cabeçalho do documento. Não possui nenhum valor visível; ● <title></title> Essa tag define o título da sua página, o nome que aparecerá na sua aba, janela ou guia. Principais tags do HTML?
  • 8.
    “ 8 ● <meta/> Essa tagpermite inserir metadados ao seu documento, no caso acima, a informação charset=”UTF-8″, que garante a compatibilidade do código com os caracteres de padrão latino americano; ● <body></body> Finalmente, a tag que representa o corpo do documento. Em síntese, é nessa tag que todos os elementos visíveis do seu site devem ser inseridos. Principais tags do HTML?
  • 9.
    “ 9 Os atributos sãousados para personalizar as tags, modificando sua estrutura ou funcionalidade. Igualmente, os atributos são utilizados para atribuir uma classe ou id a um elemento. O que são atributos no HTML
  • 10.
    “ 10 ❖ class=”…“ Atribui umaclasse ao elemento (uma classe pode ser utilizada para um ou mais elementos); ❖ id=”…“ Atribui um id ao elemento (um id deve ser único, ou seja atribuído a um único elemento); Principais atributos do HTML
  • 11.
    Estrutura básica deum documento HTML 11
  • 12.
    Cascading Style Sheets CSSé uma folha de estilo utilizada para definir a aparência de páginas da internet que adotam para o seu desenvolvimento Linguagem de Marcação de Hipertexto. 12
  • 13.
    “ 13 A sintaxe CSSé formada por uma regra com 3 itens fundamentais para definir um estilo. São eles: Seletor; Propriedade; Valor. Sintaxe CSS (Escrita)
  • 14.
    “ 14 ● O seletorvincula um elemento do documento HTML a declaração CSS. ● A propriedade define uma característica visual para o elemento HTML “selecionado” pelo seletor. ● Já o valor atribui valor a propriedade escolhida para o elemento selecionado. Sintaxe CSS (Escrita)
  • 15.
    JavaScript JavaScript é umadas linguagens de programação utilizada para construir páginas dinâmicas na WEB (Interação com o Usuário), desenvolver aplicativos para smartphones e até jogos eletrônicos. 15
  • 16.
    O que éo Bootstrap? 16 Bootstrap é um framework web gratuito para desenvolvimento de interface e front-end para sites e aplicações web usando HTML, CSS e JavaScript.
  • 17.
    Como baixar o bootstrap? Entrarno site getbootstrap.com e clicar na opção download. 17
  • 18.
    Estrutura do pacotebootstrap 18 Bootstrap CSS JS bootstrap.min.js bootstrap.min.css CSS é responsável pela decoração. JS é responsável pela Interação com o usuário.
  • 19.
    “ 19 ❖ EXTERNO Busca deum servidor Ex: CSS -> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > JS - > <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> ❖ INTERNO Busca do computador Ex: CSS -> <link href="CSS/bootstrap.min.css" > JS - > <script src="JS/bootstrap.min.js"></script> Existe duas forma de chamar o bootstrap na página HTML
  • 20.
  • 21.
    “ 21 O Bootstrap trabalhacom um sistema de grid padrão que utiliza 12 colunas para cada linha (ROW), quem podem ser quebradas em subcolunas (COL). ROW ROW ROW
  • 22.
    Place your screenshothere 22 Grid Desktop Para a versão responsiva em desktop e tablet utiliza-se col-md- tamanho da coluna, col- sm-tamanho da coluna.
  • 23.
    Grid Mobile Para aversão responsiva em celulares utiliza-se col- xs-tamanho da coluna. Place your screenshot here 23