thiagodini

Estilizando via CSS – Introdução

Descobrindo o CSS

A Folha de Estilos em Cascata, ou CSS, como diz em seu nome, é um local no qual criamos os estilos das nossas páginas: cores, fontes, alinhamentos, vozes, e diversas outras configurações, que são aplicados na página sempre em efeito cascata.

Adicionando a folha

Podemos entender uma folha como um espaço para se colocar as configurações dos estilos de nossas páginas. Existem diversas formas de se aplicar uma folha de estilos em uma página e uma das mais simples para o HTML é a tag style. Por exemplo:

<style></style>

A partir disso estamos informando ao HTML, através de sua marcação, que o conteúdo da tag style conterá os estilos para essa página.

Estilizando uma página

Para estilizarmos a nossa primeira página web com CSS, vamos precisar de um documento estruturado, então vamos usar a seguinte estrutura de marcação HTML, já com a tag style incluída:

<style></style>
<title>Meu primeiro website</title>
<img src=thiagodini.jpg>
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href=https://twitter.com/thiagodini>Me siga no Twitter</a>


Com a estrutura pronta, precisamos selecionar as partes do documento que queremos configurar.

Regra

Um regra de CSS é formada por um seletor (ou um grupo de seletores) e um bloco declarativo, que por sua vez é composto por abertura de chaves ({), propriedade, dois pontos (:), valor e fechamento de chaves (}). Por exemplo:

seletor { propriedade: valor }

Um grupo de seletores é formado quando há mais de um seletor em uma regra. Para isso, devemos separá-los por vírgula. Por exemplo:

seletor, seletor { propriedade: valor }

Quando adicionamos mais de uma propriedade em um bloco declarativo, o que é muito comum, devemos adicionar ponto e vírgula (;) entre elas. Por exemplo:

seletor { propriedade: valor; propriedade: valor }

Utilizando as propriedades

Existem dezenas de propriedades do CSS que podem ser utilizadas no desenvolvimento de um website, mas para o seu primeiro website vamos focar em algumas bem simples, são elas:

Agora que já conhecemos algumas das propriedades mais utilizadas, vamos editar a nossa página para descobrir como ela ficará após os devidos estilos. Atualize-a assim:

<style>
h1, p, a { font-family: arial }
img { width: 5cm }
</style>
<title>Meu primeiro website</title>
<img src="thiagodini.jpg">
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href="https://twitter.com/thiagodini">Me siga no Twitter</a>

Salve as alterações no arquivo, volte ao navegador que está com a página aberta e atualize o website. Ele provavelmente estará com uma fonte personalizada, além de uma largura para a imagem.

Utilizando a cascata

A cascata é quando um elemento passa para os seus descendentes as suas propriedades, formando um efeito cascata, possibilitando estilizar um grupo de elementos. Por exemplo:

html { background: black; color: white }

Dessa forma estamos aplicando um fundo preto com conteúdo branco para todo o nosso documento HTML. Se quisermos adicionar uma cor específica para os nossos links, é só adicionar uma regra para eles. Por exemplo:

html { background: black; color: white }
a { color: aqua }

Então vamos aproveitar e utilizar todas as propriedades que aprendemos juntamente com o poder da cascata. Vamos adicionar uma fonte única para todo o nosso documento, alinhar todo o conteúdo ao centro e dar um espaçamento interno de 15% da largura da tela e deixar a nossa imagem com 5 centímetros. Atualize seu arquivo da seguinte maneira:

<style>
html { background: black; color: white; font-family: arial; text-align: center; padding: 15% }
img { width: 5cm }
a { color: aqua }
</style>
<title>Meu primeiro website</title>
<img src="thiagodini.jpg">
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href="https://twitter.com/thiagodini">Me siga no Twitter</a>

E pronto! Sua página agora tem um estilo poderoso.

Conclusão

Essa introdução nos mostra que boa parte do que vemos na internet é CSS, então podemos concluir que ela é uma das linguagens mais importantes no Desenvolvimento Front-end.

Sugestões

• Não se incomode com erros, eles são frequentes até para os profissionais
• Descubra novas propriedades e os seus possíveis valores
• Busque interagir com pessoas que também estão aprendendo

Estruturando via HTML – Introdução

O que é HTML

Um documento de hipertexto é uma página que pode ser atrelada a outros arquivos, como imagens, vídeos e até mesmo outras páginas. A Linguagem de Marcação de Hipertexto, HTML, é uma linguagem desenvolvida para marcar e identificar partes de um documento de hipertexto.

Criando uma página com HTML

Para criar a sua primeira página web com HTML você precisará adicionar um conteúdo a ela, então, abra um editor de texto simples, como o Bloco de Notas, e adicione:

Website do Thiago Dini
Olá, Mundo! Esse é o Website do Thiago Dini.

Salve o arquivo:

1. Acesse no menu do editor texto a opção arquivo e salvar como
2. Marque na caixa de seleção a opção todos os formatos
3. Salve o arquivo com o nome pagina.html

Abra o arquivo que salvou para ver o resultado. Provavelmente ele abrirá no navegador padrão do seu computador exibindo o conteúdo em uma só linha, pois quando salvamos o arquivo na extensão .html nós apenas informamos ao computador que ele é uma página web, mas por enquanto ele é apenas um texto, sem os poderes da marcação.

Definindo o conteúdo com a marcação

Para definir conteúdos como títulos, parágrafos, listas, tabelas e outros itens de uma página web, é preciso utilizar a marcação. A marcação é normalmente realizada por um par de tags que envolve o conteúdo e especifica o seu tipo através de seu nome.

A estrutura de uma marcação

Uma tag, quando usada no início da marcação de um conteúdo, é composta pelo sinal de menor que (<), seguido do nome da tag e o sinal de maior que (>). Para o fim da marcação do conteúdo a tag apresenta uma barra (/) após o sinal de menor que (<). Por exemplo:

<paragráfo>Conteúdo envolvido pela marcação</paragráfo>

Tags também podem estar presentes dentro de outras tags, exemplo:

<paragráfo>Conteúdo <itálico>envolvido</itálico> pela marcação</paragráfo>

Os atributos de uma marcação

Podemos atribuir informações adicionais em uma tag através dos seus atributos, compostos por nome do atributo, sinal de igual (=) e seu valor (texto). Por exemplo:

<paragráfo idioma=português>Conteúdo <itálico>envolvido</itálico> pela marcação</parágrafo>

Utilizando as tags

Existem dezenas de tags que podem ser utilizadas no desenvolvimento de um website, mas para o seu primeiro website vamos focar em algumas bem simples, são elas:

Agora que já conhecemos algumas das tags mais utilizadas, vamos editar a nossa página para descobrir como ela ficará após as devidas marcações. Volte para o arquivo que está aberto no editor de texto simples e atualize-o da seguinte maneira:

<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b><i>Website do Thiago Dini</i></b>.</p>

Salve as alterações no arquivo, volte ao navegador que está com a página aberta e atualize o website. Ele provavelmente estará com o título e parágrafo definidos, além de parte do texto em negrito e itálico.

Complementando os arquivos com o hipertexto

Como dito anteriormente, um documento de hipertexto é uma página que pode ser atrelada a outros arquivos, logo, vamos complementar o nosso primeiro website.

Referenciando o hipertexto com as hiperligações

A conexão entre as páginas é feita através das hiperligações, que são popularmente conhecidas como links. A tag de marcação para um link é a a, mas para atribuir o destino desse link precisaremos do atributo hypertext reference, o href. Por exemplo:

<a href="destino">Link</a>

Adicionando imagens ao documento

Um documento em HTML pode exibir imagens diretamente na página, uma funcionalidade muito útil no hipertexto. Para adicionar esse tipo de conteúdo nós utilizamos a tag de imagem, a img, juntamente do atributo resource, o src, que serve para informar o caminho da imagem. Como a tag de imagem não precisa envolver outro conteúdo, ela não precisa ser fechada. Por exemplo:

<img src="imagem.jpg">

Já que sabemos como utilizar a tag de imagem, vamos adicionar uma em nossa página. Volte para o arquivo que está aberto no editor de texto simples e atualize-o da seguinte maneira:

<img src="thiagodini.jpg">
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href="https://twitter.com/thiagodini">Me siga no Twitter</a>

Salve as alterações no arquivo e atualize a página do website no navegador. Ele provavelmente estará da mesma forma que antes, visto que nós ainda não salvamos a imagem que está atribuída com o src da tag img. Vamos resolver isso salvando a imagem que queremos adicionar:

1. Acesse o site thiagodini.com
2. Clique com o botão direito do mouse e escolha salvar imagem
3. Salve-a como ‘thiagodini.jpg’ no mesmo lugar que salvou a sua página

Abra o website e, se tudo tiver dado certo, você terá criado uma página web com foto e texto para o seu website.

Finalizando

A sua página está pronta, que tal dar um título para a ela? Para isso adicione a tag title, deixando o seu hipertexto da seguinte forma:

<title>Meu primeiro website</title>
<img src="thiagodini.jpg">
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href="https://twitter.com/thiagodini">Me siga no Twitter</a>

Sugestões

• Teste refazer o exercício com as suas informações, para reforçar o aprendizado e treinar a resolução de possíveis problemas
• Pesquise novas tags e tente descobrir coisas novas com suas infinitas possibilidades
• Espie o código de outros sites, clicando com o botão direito do mouse e acessando visualizar código fonte