HTML & CSS
Fundamentos
Luis Antonio de Souza Silva
HTML & CSS - Fundamentos 02
Índice
1. Introdução 04
2. O que é HTML? 05
2.1 HTML 05
2.2 O que é TAG? 05
2.3 Estrutura básica 06
2.4 Head 07
2.5 Meta Tags 07
2.6 Body 08
2.7 Como criar 09
HTML & CSS - Fundamentos 03
Índice
3. Tags essenciais 12
4. O que é CSS? 17
4.1 Sintaxe 17
4.2 Propriedades essenciais 19
4.3 Propriedades de fundo 20
4.4 Propriedades de borda 21
4.5 Propriedades de fonte 22
4.6 Propriedades de lista 23
HTML & CSS - Fundamentos 04
Introdução
Antes de de iniciarmos nossa jornada,
precisamos entender bem o que significa
“Front-End”.
O desenvolvedor Front-End é quem cuida da
parte visual de um website. Esse profissional
trabalha principalmente com HTML, CSS e
Javascript, que são os três pilares da web
moderna.
Por ser responsável em “dar vida ao
negócio”, pois trabalha com a parte da
aplicação que vai interagir diretamente com
o usuário.
HTML & CSS - Fundamentos 05
O que é HTML? O que é TAG?
Criado por Tim Berners-Lee, em 1990, HTML
significa “HyperText Markup Language” ou É uma palavra chave entre sinais de
“Linguagem de Marcação de HiperTexto”. É a “menor” e “maior”. E normalmente
linguagem de marcação mais utilizada para aparecem em pares.
produzir páginas na Web .
- Por exemplo: <html> e </html>
HTML não é uma linguagem de programação!
E sim de marcação. Faz uso de tags para
estruturar as páginas. Os seus documentos
são interpretados pelos navegadores. A primeira tag em um par de tags, é
considerada a tag de abertura e a outra é
O HTML está na versão 5 atualmente. Essa a tag de fechamento. Um elemento é
versão trouxe novas funcionalidades sobre formado por:
semântica e acessibilidade e vem ganhando
novas atualizações e capacidades incríveis. - Tag de abertura + Conteúdo + Tag de
fechamento.
- Por exemplo: <h1>Hello World</h1>
HTML & CSS - Fundamentos 06
Estrutura básica
Um documento HTML deve começar com a
tag <html> e terminar com </html> .
Deve conter um cabeçalho, na qual serão
inseridos o título e as metatags. O cabeçalho
é delimitado pela tag <head> e </head>.
E o corpo, onde será inserido todo o
conteúdo da página, é delimitado por
OBS: Doctype não é uma tag HTML, apesar da sintaxe parecida.
<body> e </body>. O Doctype é uma declaração para informar ao navegador qual é
a versão do HTML utilizada no arquivo, geralmente é apresentada
na primeira linha do código.
Da maneira que foi declarada no documento acima, significa
que a versão usada é a 5 (atual).
HTML & CSS - Fundamentos 07
Head Meta tags:
Como dito anteriormente, o cabeçalho é São informações da página para sistemas de
delimitado pela tag <head></head> e nele buscas ou outras aplicações.
serão inseridos o título, meta tags, links, Servem para ajudar seres humanos ou
etc. máquinas a localizar e descrever informações,
melhorando o gerenciamento e uso destas
informações. Eles não são exibidos na página.
<title></title>
Exemplos:
Tag para informar ao navegador o tipo de codificação a ser
<meta> ●
usada, evitando alguns erros:
- <meta charset=”utf-8”>
<style>
● Define uma descrição da página:
- <meta name=”description” content=”Descrição aq”>
<link>
● Define o autor da página:
- <meta name=”author” content=”Luis Antonio de
<script> Souza Silva”>
● Define palavras-chaves para os mecanismos de busca:
- <meta name=”keywords” content=”tecnologia,
internet”>
HTML & CSS - Fundamentos 08
Body
É dentro da tag <body></body> e que irá todo o
conteúdo da sua página!
Diferente da <head>, o que está dentro da
<body> ficará disponível para visualização.
Título, parágrafos, textos, imagens, links… Tudo
que você quiser utilizar no seu site, terá de ser
escrito dentro da <body>. A maioria das tags
usadas para exibir conteúdos, aceitam
atributos.
Os dois principais atributos para estilizar um
elemento específico ou um grupo de OBS: Caso você não conheça alguma tag
utilizada, fique tranquilo(a). Todas serão
elementos, são: class e id. explicadas nas próximas páginas!
HTML & CSS - Fundamentos 09
Como criar
Arquivos HTML são arquivos de textos. Para criar um,
você precisará apenas de um software que permita
a criação de texto simples, como o bloco de notas!
Existem editores de texto próprios para o
desenvolvimento de softwares. Esses editores
geralmente facilitam na hora de criar sua
aplicação. Recomendo usar o Visual Studio Code ou
o Sublime Text, mas isso é da sua preferência!
Você pode fazer os downloads através desses links:
- Visual Studio Code
- Sublime Text
HTML & CSS - Fundamentos 10
Tags Essenciais
- <header></header>: Essa tag define um - <footer></footer>: Essa tag define um rodapé
cabeçalho. Portanto, todo conteúdo que para a página e geralmente utilizadas no
estiver dentro dela faz parte de um final da página;
cabeçalho, podendo ser utilizado dentro de
outras sessões. Não confundir com a tag - <section></section>: Essa tag define uma
<head></head>; sessão para sua página;
- <main></main>: Essa tag representa o - <article></article>: Essa tag define um artigo
conteúdo principal do seu corpo, ou seja, o da sua página. Nesse sentido, são utilizadas
conteúdo que está relacionado diretamente para separar o conteúdo da sua página.
com o tópico central da página ou com a Muito utilizado principalmente por blogs ou
funcionalidade central da aplicação; páginas de conteúdo;
- <article></article>: Define um bloco de - <nav></nav>: Essa tag define um conteúdo
conteúdo que faz referência ao conteúdo de navegação. Muito utilizado em conjunto
principal que o cerca. com listas e na criação de menus;
HTML & CSS - Fundamentos 11
Tags Essenciais
- <div></div>: Define uma divisão da Todas as tags citadas até agora servem
página. Funciona como um container basicamente para dividir o conteúdo das
para conteúdo de fluxo. É muito utilizado nossas páginas. Mas prestem bem atenção
no nome de cada uma.
para organizar melhor o conteúdo.
Anteriormente ao HTML5, era utilizado no Todas fazem a mesma coisa, mas existe um
lugar das categorias citadas significado em cada uma delas. Você pode
anteriormente. usar <div> pra separar tudo, mas seu código
vai ficar extremamente confuso, ruim para
estilizar e péssimo para o SEO.
Nenhuma delas terá um retorno visual, mas
são de extrema importância na organização
do nosso código, semântica e para a
estilização.
HTML & CSS - Fundamentos 12
Tags Essenciais - Títulos e Subtítulos
No HTML, temos seis tags que definem o título e
os subtítulos, onde <h1> é utilizado para títulos
dentro da página e <h2>, <h3>, <h4>, <h5> e
<h6> são subtítulos.
HTML & CSS - Fundamentos 13
Tags Essenciais - Textos
- <p></p>: Principal tag de texto, cria um - <i></i>: Transforma o conteúdo em itálico;
parágrafo;
- <span></span>: Costuma ser utilizada - <br/>: Essa tag não necessita de
apenas para pequenas informações, fechamento, ela executa a função de
como legendas de um formulário, quebra de linha;
legendas de uma imagem, etc. Também
pode ser utilizada para formar um
container;
- <hr/>: Essa tag não necessita de
fechamento, ela forma uma linha
horizontal;
- <b></b>: Transforma o conteúdo em
negrito;
HTML & CSS - Fundamentos 14
Tags Essenciais
- <a></a>: Tag que cria um link.
Responsável por fazer a ligação entre um
documento e outro, para isso, existe um
atributo chamado “href”, onde será Exemplo:
informado a url ou nome do arquivo;
- <img>: Tag utilizada para incluir uma
imagem na página. É necessário o
atributo “src”, onde será informado o
local em que a imagem se encontra.
Aceita um atributo opcional “alt” que
descreve o conteúdo da imagem,
ajudando na acessibilidade;
HTML & CSS - Fundamentos 15
Tags Essenciais - Listas
- <ol></ol>: Tag utilizada para criar uma Exemplo:
lista ordenada. É necessário incluir a tag
<li></li> para cada elemento da lista.
- <ul></ul>: Tag utilizada para criar uma
lista não ordenada. É necessário incluir a
tag <li></li> para cada elemento da lista.
HTML & CSS - Fundamentos 16
Tags Essenciais
- <form></form>: Tag para criar um - <label></label>: Define o nome para cada
formulário; campo do formulário;
Também há o atributo placeholder, que é um
texto que ficará disponível enquanto nada for
- <input>: Tag usada para definir um digitado nesse campo.
campo em um formulário. Possui o Também é importante definir um atributo name
atributo “type”, que varia de diversos para cada input.
tipos:
Exemplo:
- <input type=”text”>: Define um campo que
receberá qualquer caractere;
- <input type=”email”>: Define um campo que
receberá caracteres e verificará se o mesmo
consiste em um e-mail válido;
- <input type=”password”>: Define um campo
destinado a senhas e irá esconder os caracteres
digitados;
HTML & CSS - Fundamentos 17
O que é CSS? Sintaxe:
Criado por Håkon Wium Lie e Bert Bos, em 1995, seletor {
significa “Cascading Style Sheet” ou “Folhas propriedade: valor;
de estilo em cascata”. }
É a linguagem utilizada para formatar a
informação entregue pelo HTML e controlar a Seletor: É um elemento da marcação HTML
aparência de uma página Web. identificado pelo seu nome (tag), classe
(.nome-da-classe) ou id (#nome-do-id).
É através do CSS que você irá definir o layout e
deixar sua página bonita e amigável. O CSS Propriedade: Define o que mudará no elemento
pode ser aplicado de três formas diferentes: HTML (exemplo: tamanho da fonte, cor do texto,
altura do elemento).
- Estilo externo (importado de outro documento);
- Estilo incorporado (definido no head); Valor: É a característica que o elemento HTML irá
- Estilo inline (dentro de um elemento do HTML);
assumir (exemplo: letra tipo arial, cor azul, fundo
verde, altura igual a 300px).
HTML & CSS - Fundamentos 18
Exemplo de código
- O exemplo acima define uma cor de fundo preta para o site.
HTML & CSS - Fundamentos 19
Propriedades essenciais
Margin: Configura a margem de um elemento Display: Especifica o comportamento de
HTML em pixels, porcentagem e EMs. Tais exibição (o tipo de caixa de renderização) de um
margens podem ser definidas em geral ou para elemento.
qualquer um dos cantos do elemento.
Width e Height: Especificam a largura e altura do
Padding: Funciona praticamente como a elemento respectivamente.
margem, mas, ao invés de empurrar o
elemento, ele cria um espaçamento interior.
Box-Sizing: Permite incluir o preenchimento e a
borda na largura e altura total de um elemento.
HTML & CSS - Fundamentos 20
Propriedades de fundo
Propriedade Descrição
Background Configura todas as propriedades de
fundo em uma linha
Background-color Configura a cor do fundo
Background-image Configura uma imagem de fundo para
um elemento
Background-size Configura o tamanho de uma imagem
de fundo
Background-position Configura a posição de uma imagem de
fundo
Background-repeat Configura como uma imagem de fundo
deve se repetir
HTML & CSS - Fundamentos 21
Propriedades de borda
Propriedade Descrição
Border Configura todas as propriedades de
borda em uma linha
Border-radius Configura o estilo de todas as bordas
Box-shadow Cria uma sombra em um elemento
HTML & CSS - Fundamentos 22
Propriedades de fonte
Propriedade Descrição
Font Configura todas as propriedades de
fonte
Font-family Configura a família da fonte utilizada
Font-size Configura o tamanho da fonte
Font-style Configura o estilo da fonte
Font-weight Configura a espessura da fonte
HTML & CSS - Fundamentos 23
Propriedades de lista
Propriedade Descrição
List-style Especifica todas as propriedades de
elementos de lista
List-style-image Especifica uma imagem para marcar
uma lista
List-style-position Configura a posição dos elementos de
uma lista
List-style-type Configura o estilo de um elemento de
uma lista
HTML & CSS - Fundamentos 24
Dicas
Uma das melhores formas de aprender é praticar!
Agora que você conhece um pouco das duas tecnologias, mete a mão na massa e crie projetos.
Frontend: Programação:
- Se aprofunde em HTML5 e CSS3; - Estude Lógica de Programação;
- Estude Flex Box e CSS Grid; - Escolha uma linguagem. Recomendo
- Estude sobre Design Responsivo; Javascript;
- Estude Javascript;
- Aprenda um Framework Javascript.
Recomendo React.
