Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney

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.

“
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.

“
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

Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney

Similar a Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney(20)

Último

Último(20)

Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney