HTML+&+CSS++Fundamentos.pdf

HTML & CSS
Fundamentos
Luis Antonio de Souza Silva

Í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 02

Í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

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.

O que é HTML?
Criado por Tim Berners-Lee, em 1990, HTML
significa “HyperText Markup Language” ou
“Linguagem de Marcação de HiperTexto”. É a
linguagem de marcação mais utilizada para
produzir páginas na Web .
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.
O HTML está na versão 5 atualmente. Essa
versão trouxe novas funcionalidades sobre
semântica e acessibilidade e vem ganhando
novas atualizações e capacidades incríveis.
O que é TAG?
É uma palavra chave entre sinais de
“menor” e “maior”. E normalmente
aparecem em pares.
- Por exemplo: <html> e </html>
A primeira tag em um par de tags, é
considerada a tag de abertura e a outra é
a tag de fechamento. Um elemento é
formado por:
- Tag de abertura + Conteúdo + Tag de
fechamento.
- Por exemplo: <h1>Hello World</h1>

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
<body> e </body>.
OBS: Doctype não é uma tag HTML, apesar da sintaxe parecida.
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).

Head
Como dito anteriormente, o cabeçalho é
delimitado pela tag <head></head> e nele
serão inseridos o título, meta tags, links,
etc.
<title></title>
<meta>
<style>
<link>
<script>
Meta tags:
São informações da página para sistemas de
buscas ou outras aplicações.
Servem para ajudar seres humanos ou
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.
Exemplos:
● Tag para informar ao navegador o tipo de codificação a ser
usada, evitando alguns erros:
- <meta charset=”utf-8”>
● Define uma descrição da página:
- <meta name=”description” content=”Descrição aq”>
● Define o autor da página:
- <meta name=”author” content=”Luis Antonio de
Souza Silva”>
● Define palavras-chaves para os mecanismos de busca:
- <meta name=”keywords” content=”tecnologia,
internet”>

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
elementos, são: class e id.
OBS: Caso você não conheça alguma tag
utilizada, fique tranquilo(a). Todas serão
explicadas nas próximas páginas!

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

Tags Essenciais
- <footer></footer>: Essa tag define um rodapé
para a página e geralmente utilizadas no
final da página;
- <section></section>: Essa tag define uma
sessão para sua página;
- <article></article>: Essa tag define um artigo
da sua página. Nesse sentido, são utilizadas
para separar o conteúdo da sua página.
Muito utilizado principalmente por blogs ou
páginas de conteúdo;
- <nav></nav>: Essa tag define um conteúdo
de navegação. Muito utilizado em conjunto
com listas e na criação de menus;
- <header></header>: Essa tag define um
cabeçalho. Portanto, todo conteúdo que
estiver dentro dela faz parte de um
cabeçalho, podendo ser utilizado dentro de
outras sessões. Não confundir com a tag
<head></head>;
- <main></main>: Essa tag representa o
conteúdo principal do seu corpo, ou seja, o
conteúdo que está relacionado diretamente
com o tópico central da página ou com a
funcionalidade central da aplicação;
- <article></article>: Define um bloco de
conteúdo que faz referência ao conteúdo
principal que o cerca.

Tags Essenciais
- <div></div>: Define uma divisão da
página. Funciona como um container
para conteúdo de fluxo. É muito utilizado
para organizar melhor o conteúdo.
Anteriormente ao HTML5, era utilizado no
lugar das categorias citadas
anteriormente.
Todas as tags citadas até agora servem
basicamente para dividir o conteúdo das
nossas páginas. Mas prestem bem atenção
no nome de cada uma.
Todas fazem a mesma coisa, mas existe um
significado em cada uma delas. Você pode
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.

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.

Tags Essenciais - Textos
- <p></p>: Principal tag de texto, cria um
parágrafo;
- <span></span>: Costuma ser utilizada
apenas para pequenas informações,
como legendas de um formulário,
legendas de uma imagem, etc. Também
pode ser utilizada para formar um
container;
- <b></b>: Transforma o conteúdo em
negrito;
- <i></i>: Transforma o conteúdo em itálico;
- <br/>: Essa tag não necessita de
fechamento, ela executa a função de
quebra de linha;
- <hr/>: Essa tag não necessita de
fechamento, ela forma uma linha
horizontal;

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á
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;
Exemplo:

Tags Essenciais - Listas
- <ol></ol>: Tag utilizada para criar uma
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.
Exemplo:

Tags Essenciais
- <form></form>: Tag para criar um
formulário;
- <input>: Tag usada para definir um
campo em um formulário. Possui o
atributo “type”, que varia de diversos
tipos:
- <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;
- <label></label>: Define o nome para cada
campo do formulário;
Também há o atributo placeholder, que é um
texto que ficará disponível enquanto nada for
digitado nesse campo.
Também é importante definir um atributo name
para cada input.
Exemplo:

O que é CSS?
Criado por Håkon Wium Lie e Bert Bos, em 1995,
significa “Cascading Style Sheet” ou “Folhas
de estilo em cascata”.
É a linguagem utilizada para formatar a
informação entregue pelo HTML e controlar a
aparência de uma página Web.
É através do CSS que você irá definir o layout e
deixar sua página bonita e amigável. O CSS
pode ser aplicado de três formas diferentes:
- Estilo externo (importado de outro documento);
- Estilo incorporado (definido no head);
- Estilo inline (dentro de um elemento do HTML);
Sintaxe:
seletor {
propriedade: valor;
}
Seletor: É um elemento da marcação HTML
identificado pelo seu nome (tag), classe
(.nome-da-classe) ou id (#nome-do-id).
Propriedade: Define o que mudará no elemento
HTML (exemplo: tamanho da fonte, cor do texto,
altura do elemento).
Valor: É a característica que o elemento HTML irá
assumir (exemplo: letra tipo arial, cor azul, fundo
verde, altura igual a 300px).

Exemplo de código
- O exemplo acima define uma cor de fundo preta para o site.

Propriedades essenciais
Margin: Configura a margem de um elemento
HTML em pixels, porcentagem e EMs. Tais
margens podem ser definidas em geral ou para
qualquer um dos cantos do elemento.
Padding: Funciona praticamente como a
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.
Display: Especifica o comportamento de
exibição (o tipo de caixa de renderização) de um
elemento.
Width e Height: Especificam a largura e altura do
elemento respectivamente.

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

Propriedades de borda
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

Propriedades de fonte
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

Propriedades de lista
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

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:
- Se aprofunde em HTML5 e CSS3;
- Estude Flex Box e CSS Grid;
- Estude sobre Design Responsivo;
- Estude Javascript;
- Aprenda um Framework Javascript.
Recomendo React.
Programação:
- Estude Lógica de Programação;
- Escolha uma linguagem. Recomendo
Javascript;

HTML+&+CSS++Fundamentos.pdf

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a HTML+&+CSS++Fundamentos.pdf (20)

Último (20)

HTML+&+CSS++Fundamentos.pdf