HTML + CSS + BOOTSTRAP
HTML (HyperText Markup Language ou Linguagem de Marcação de Hipertexto) é uma linguagem, mesmo que não considerada como linguagem de programação por muitos, faz parte do tripé de linguagens comumente utilizadas para criação de websites, sendo estas: HTML, CSS e JavaScript.
Cada uma dessas têm sua funcionalidade, e a do HTML é a de informação, ou seja, peguemos como exemplo o Youtube, um website que se constitui basicamente de consumo e compartilhamento de imagens, vídeos e textos. Toda a parte estrutural da informação é HTML, o título de um vídeo, os comentários, a caixa de texto de busca, e muito mais. Já a estilização de todos esses elementos é feito por CSS, então a cor e tamanho da fonte de textos, o posicionamento das imagens de vídeos na tela, entre outros.
Então, o HTML serve para dispor a informação no website, mas além disso, ele também dá significado a essa informação. Mas o que isso significa?
Veja o exemplo:
<h1>Aqui vai o seu título</h1>
O <h1> trata-se de uma Tag existente no HTML, h sendo utilizado para identificar títulos, e o número para o tamanho da fonte, ou seja, quanto maior o número, menor o tamanho da fonte do título.
Vejamos outra Tag:
<p>Aqui você pode escrever várias informações, se trata de um parágrafo.</p>
Como já dito acima, a Tag <p> se refere a um parágrafo.
Então Tags são...
O conjunto de caracteres que formam um elemento, ou seja, quando nos referenciamos à Tag "p" estamos falando disso: <p>
Existem dois tipos de Tags, as que necessitam de fechamento e as que não necessitam de fechamento.
Para as que necessitam de fechamento, utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de maior ( > ) para abertura. Para fechamento, utilizamos o sinal de menor ( < ), seguido de barra ( / ), nome do elemento e o sinal de maior ( > ).
Como nos exemplos:
<h1>A Tag de título requer fechamento.</h1>
Assim como:
O texto a seguir sofrerá quebra de linha<br>
Estou em uma nova linha.
A Tag <br> chamada de elemento vazio, não precisa de fechamento, e é utilizada para quebra de linha.
O que são Elementos?
Elementos são formados a partir de Tags e entre as Tags é que está o conteúdo do Elemento.
Se quisermos exibir um parágrafo, utilizamos a Tag <p> que semanticamente quer dizer que o conteúdo que se espera nesse Elemento é um parágrafo, que se resume a texto.
Mas atenção, não confunda Elemento com Tag, estas servem para marcar onde começa e termina um Elemento, já aquela é uma parte semântica que tem começo e fim.
A estrutura do HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- Conteúdo -->
</body>
</html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- Conteúdo -->
</body>
</html>
Na estrutura acima podemos ver quais são as Tags essenciais para que nossa página em HTML consiga ser interpretada pelo browser e, assim, ser visualizada pelo usuário.
CSS (Cascading Style Sheets) é a linguagem oficial para estilização de páginas HTML. Com ela é possível definir todas as características relacionadas à aparência dos elementos presentes em uma página, customizando cores, formas, fontes, etc. Ademais, em conjunto com HTML e JavaScript, compõe a base para o desenvolvimento de aplicações web, o que reforça a sua importância. Vamos, então, aprender sobre CSS.
O Cascading Style Sheets (CSS) foi proposto pela primeira vez em Outubro de 1994, por Hakon Lie, que queria facilitar a programação de sites, que na época era muito mais complexa. As pessoas tinham que utilizar mais códigos para chegar a um resultado simples, como criar uma tabela.
Em 1995 o CSS1 foi desenvolvido pela W3C, um grupo de empresas do ramo da informática. A linguagem de estilos ganhou muito destaque entre 1997 e 1999, neste período ficou conhecido por grande parte dos programadores.
No início, o HTML era a única linguagem utilizada para criar sites. Quando começou a ganhar popularidade, algumas tags (comandos) foram criadas pelos navegadores para facilitar o uso da linguagem; Para facilitar ainda mais a criação destes layouts, a W3C (World Wide Web Consortium) criou o CSS, colocando a disposição dos Webdesigners.
O CSS é uma linguagem que determina a aparência (layout) de páginas para a Web. Este programa permite ao usuário criar páginas da Web com códigos mais fáceis de elaborar que os códigos HTML. Estes códigos permitem fazer as aplicações com facilidade.
Este programa é utilizado pelos programadores em todo o mundo. O CSS controla as opções de margem, linhas, cores, alturas, larguras, imagens e posicionamento, sem necessidade de programar em HTML. O CSS tem também alguns códigos prontos, permitindo aos usuários pouparem tempo criando códigos muito comuns.
Alguns benefícios do CSS:
A partir de um só documento do CSS, controlam-se vários documentos html.
Facilidade de criação dos layouts, que não precisam de códigos muito complicados
linguagem de rápido aprendizado
O CSS é mais um dos programas para facilitar a vida de quem trabalha na área de informática. Este programa, embora tenha algumas falhas - na realidade as falhas são dos navegadores que não implementam o CSS corretamente, como algumas versões do Internet Explorer -, ajuda muito na hora de criar sites e páginas da WEB.
Estilizando com CSS
Quando escrevemos o HTML, marcamos o conteúdo da página com tags que melhor representam o significado daquele conteúdo. Aí quando abrimos a página no navegador é possível perceber que o navegador mostra as informações com estilos diferentes.
Um h1, por exemplo, fica em negrito numa fonte maior. Parágrafos de texto são espaçados entre si, e assim por diante. Isso quer dizer que o navegador tem um estilo padrão para as tags que usamos. Mas, claro, pra fazer sites bonitos vamos querer customizar o design dos elementos da página.
Antigamente, isso era feito no próprio HTML. Se quisesse um título em vermelho, era só fazer:
<h1><font color="red">Titulo</font></h1>
Além da tag font, várias outras tags de estilo existiam. Mas isso é passado. Tags HTML para estilo são má prática hoje em dia e jamais devem ser usadas.
Em seu lugar, surgiu o CSS, que é uma outra linguagem, separada do HTML, com objetivo único de cuidar da estilização da página. A vantagem é que o CSS é bem mais robusto que o HTML para estilização, como veremos. Mas, principalmente, escrever formatação visual misturado com conteúdo de texto no HTML se mostrou algo bem impraticável. O CSS resolve isso separando as coisas; regras de estilo não aparecem mais no HTML, apenas no CSS.
Sintaxe e inclusão de CSS
A sintaxe do CSS tem estrutura simples: é uma declaração de propriedades e valores separados por um sinal de dois pontos ":", e cada propriedade é separada por um sinal de ponto e vírgula ";" da seguinte maneira:
background-color: yellow;
color: blue;
O elemento que receber essas propriedades será exibido com o texto na cor azul e com o fundo amarelo. Essas propriedades podem ser declaradas de três maneiras diferentes.
Atributo style
A primeira delas é como um atributo style no próprio elemento:
<p style="color: blue; background-color: yellow;">
O conteúdo desta tag será exibido em azul com fundo amarelo no navegador!
</p>
Entretanto, não se recomenda esse tipo de uso na prática, mas sim os que veremos a seguir.
A tag style
A outra maneira de se utilizar o CSS é declarando suas propriedades dentro de uma tag <style>.
Como estamos declarando as propriedades visuais de um elemento em outro lugar do nosso documento, precisamos indicar de alguma maneira a qual elemento nos referimos. Fazemos isso utilizando um seletor CSS. É basicamente uma forma de buscar certos elementos dentro da página que receberão as regras visuais que queremos.
No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua cor e background:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulo 2</title>
<style>
p {
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<p>
O conteúdo desta tag será exibido em azul com fundo amarelo!
</p>
<p>
<strong>Tambem</strong> será exibido em azul com fundo amarelo!
</p>
</body>
</html>
O código anterior da tag <style> indica que estamos alterando a cor e o fundo de todos os elementos com tag p. Dizemos que selecionamos esses elementos pelo nome de sua tag, e aplicamos certas propriedades CSS apenas neles.
Arquivo externo
A terceira maneira de declararmos os estilos do nosso documento é com um arquivo externo, geralmente com a extensão .css. Para que seja possível declarar nosso CSS em um arquivo à parte, precisamos indicar em nosso documento HTML uma ligação entre ele e a folha de estilo.
Além da melhor organização do projeto, a folha de estilo externa traz ainda as vantagens de manter nosso HTML mais limpo e do reaproveitamento de uma mesma folha de estilos para diversos documentos.
A indicação de uso de uma folha de estilos externa deve ser feita dentro da tag <head> do nosso documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulo</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>
O conteúdo desta tag será exibido em azul com fundo amarelo!
</p>
<p>
<strong>Tambem</strong> será exibido em azul com fundo amarelo!
</p>
</body>
</html>
E dentro do arquivo estilos.css colocamos apenas o conteúdo do CSS:
p {
color: blue;
background-color: yellow;
}
Propriedades tipográficas e fontes
Da mesma maneira que alteramos cores, podemos alterar o texto. Podemos definir fontes com o uso da propriedade font-family.
A propriedade font-family pode receber seu valor com ou sem aspas. No primeiro caso, passaremos o nome do arquivo de fonte a ser utilizado, no último, passaremos a família da fonte.
Por padrão, os navegadores mais conhecidos exibem texto em um tipo que conhecemos como "serif". As fontes mais conhecidas (e comumente utilizadas como padrão) são "Times" e "Times New Roman", dependendo do sistema operacional. Elas são chamadas de fontes serifadas pelos pequenos ornamentos em suas terminações.
Podemos alterar a família de fontes que queremos utilizar em nosso documento para a família "sans-serif" (sem serifas), que contém, por exemplo, as fontes "Arial" e "Helvetica". Podemos também declarar que queremos utilizar uma família de fontes "monospace" como, por exemplo, a fonte "Courier".
h1 {
font-family: serif;
}
h2 {
font-family: sans-serif;
}
p {
font-family: monospace;
}
É possível, e muito comum, declararmos o nome de algumas fontes que gostaríamos de verificar se existem no computador, permitindo que tenhamos um controle melhor da forma como nosso texto será exibido. Normalmente, declaramos as fontes mais comuns, e existe um grupo de fontes que são consideradas "seguras" por serem bem populares.
Em nosso projeto, vemos que as fontes não têm ornamentos. Então vamos declarar essa propriedade para todo o documento por meio do seu elemento body:
body {
font-family: "Arial", "Helvetica", sans-serif;
}
Nesse caso, o navegador verificará se a fonte "Arial" está disponível e a utilizará para renderizar os textos de todos os elementos do nosso documento que, por cascata, herdarão essa propriedade do elemento body.
Caso a fonte "Arial" não esteja disponível, o navegador verificará a disponibilidade da próxima fonte declarada, no nosso exemplo a "Helvetica". Caso o navegador não encontre também essa fonte, ele solicita qualquer fonte que pertença à família "sans-serif", declarada logo a seguir, e a utiliza para exibir o texto, não importa qual seja ela.
Temos outras propriedades para manipular a fonte, como a propriedade font-style, que define o estilo da fonte que pode ser: normal (normal na vertical), italic (inclinada) e oblique (oblíqua).
Alinhamento e decoração de texto
Já vimos uma série de propriedades e subpropriedades que determinam o estilo do tipo (fonte). Vamos conhecer algumas maneiras de alterarmos as disposições dos textos.
Uma das propriedades mais simples, porém muito utilizada, é a que diz respeito ao alinhamento de texto: a propriedade text-align.
p {
text-align: right;
}
O exemplo anterior determina que todos os parágrafos da nossa página tenham o texto alinhado para a direita. Também é possível determinar que um elemento tenha seu conteúdo alinhado ao centro ao definirmos o valor center para a propriedade text-align, ou então definir que o texto deve ocupar toda a largura do elemento aumentando o espaçamento entre as palavras com o valor justify. O padrão é que o texto seja alinhado à esquerda, com o valor left, porém é importante lembrar que essa propriedade propaga-se em cascata.
É possível configurar também uma série de espaçamentos de texto com o CSS:
p {
line-height: 3px; /* tamanho da altura de cada linha */
letter-spacing: 3px; /* tamanho do espaço entre cada letra */
word-spacing: 5px; /* tamanho do espaço entre cada palavra */
text-indent: 30px; /* tamanho da margem da primeira linha do texto */
}
Imagem de fundo
A propriedade background-image permite indicar um arquivo de imagem para ser exibido ao fundo do elemento. Por exemplo:
h1 {
background-image: url(sobre-background.jpg);
}
Com essa declaração, o navegador vai requisitar um arquivo sobre-background.jpg, que deve estar na mesma pasta do arquivo CSS onde consta essa declaração.
Bordas
As propriedades do CSS para definirmos as bordas de um elemento nos apresentam uma série de opções. Podemos, para cada borda de um elemento, determinar sua cor, seu estilo de exibição e sua largura. Por exemplo:
body {
border-color: red;
border-style: solid;
border-width: 1px;
}
Para que o efeito da cor sobre a borda surta efeito, é necessário que a propriedade border-style tenha qualquer valor diferente do padrão none.
Conseguimos fazer também comentários no CSS usando a seguinte sintaxe:
/* deixando o fundo diferente */
body {
background: gold;
}
Bootstrap
Ele foi desenvolvido por Jacob Thorton e Mark Otto, engenheiros do Twitter, como uma tentativa de resolver incompatibilidades dentro da própria equipe. O intuito era otimizar o desenvolvimento de sua plataforma através da adoção de uma estrutura única. Isto reduziria inconsistências entre as diversas formas de se codificar, que variam de profissional para profissional. E a tentativa deu tão certo que eles perceberam o grande potencial da ferramenta, lançando-a no GitHub como um software livre.
Atualmente é possível encontrar no Github mais de 100 mil usuários utilizam a ferramenta para desenvolver sites e aplicações baseadas nas funções do Bootstrap, sejam em javascript, jquery ou css. Se analisarmos em relação a quantidade do seu segundo concorrente em 2017 teremos o Foundation com 25 mil usuários somente.Portanto o Bootstrap se destaca também pela popularidade, documentação e facilidade de utilização.
Como funciona?
- Mobile First pois projetos são desenvolvidos para serem amigáveis com todos os dispositivos móveis desde o ínicio do código.
- Utilizam media queries para controlar a responsividade para elementos que controlam a manipulação dos tamanhos exibidos.
/* Dispositivos extra pequenos (extra small) (celulares, menores que 768px) */
/* No media query since this is the default in Bootstrap */
/* Dispositivos pequenos (tablets, 768px e superiores) */
@media (min-width: @screen-sm-min) { ... }
/* Dispositivos médios (desktops, 992px e superiores) */
@media (min-width: @screen-md-min) { ... }
/* Dispositivos grandes (desktops grandes, 1200px e superiores) */
@media (min-width: @screen-lg-min) { ... }
/* No media query since this is the default in Bootstrap */
/* Dispositivos pequenos (tablets, 768px e superiores) */
@media (min-width: @screen-sm-min) { ... }
/* Dispositivos médios (desktops, 992px e superiores) */
@media (min-width: @screen-md-min) { ... }
/* Dispositivos grandes (desktops grandes, 1200px e superiores) */
@media (min-width: @screen-lg-min) { ... }
- O framework é todo baseado em um sistema de grids, descrito abaixo:
- Existem classes e códigos javascripts para desenvolver com agilidade de maneira genérica e eficiente.
Instalação
A instalação é bem simples, no arquivo baixado existe um pacote com uma pasta com arquivos css e outra com arquivos js que servem para padronizar o layout do site e colocar funcionalidades mais complexas porém comum a muitos projetos para funcionarem.
2º passo: descompacte o arquivo e coloque dentro de seu projeto ou utilize o tutorial do site https://getbootstrap.com/docs/4.0/getting-started/introduction/ para iniciar um projeto.
Comentários
Postar um comentário