HTML 5 e CSS 3

#HTML
#CSS

Introdução a Criação de Websites com HTML5 e CSS3Introdução ao HTML 5
Não dizemos que o HTML é uma linguagem de programação já que ela não possui capacidade para executar lógica ou algoritmos e sim uma linguagem de marcação, o que quer dizer que ela é utilizada para estruturar e formatar o conteúdo de páginas web.
Tags obrigatórias:

<html> → é a raiz do seu documento e todos os elementos html precisam estar contidos dentro dela;
<head> → contém os elementos que serão lidos pelo navegador, e contem as tags de links para outros elementos que vão interferir no layout da página web, como links para o CSS e para o JavaScript;
<body> → onde vai ficar todo o conteúdo visível ao usuário da página, como textos, imagens e todo o resto;

Semântica
A semântica no HTML5 refere-se ao uso de elementos de marcação que expressam significado estrutural e funcional do conteúdo web, melhorando a compreensão tanto para os navegadores quanto para os desenvolvedores. Você pode se perguntar em que diretamente isso afeta o código, e acredite afeta bastante já que a utilização adequada de elementos semânticos no código HTML não apenas melhora a estrutura do site para facilitar sua interpretação pelos mecanismos de busca, mas também contribui para a acessibilidade, usabilidade e, consequentemente, pode influenciar positivamente o rankeamento nos resultados de pesquisa.
Tags

<section> → uma seção genérica de conteúdo quando não houver um elemento mais específico para isso;
<header> → o cabeçalho da página ou de uma seção da página;
<article> → representa um conteúdo independente e de maior relevância dentro de uma página, como um post de blog, uma notícia etc.;
<aside> → seção que engloba conteúdos relacionados ao conteúdo principal, como artigos relacionados, biografia do autor e publicidade. Normalmente são representadas como barras laterais, por isso o nome aside;
<footer> → o rodapé do conteúdo, podendo ser rodapé do site principal ou da tag onde ele estiver contido, como o article ou o aside;
<p> → representa um paragrafo, mas suporta mais do que apenas texto, podendo conter, imagens, links vídeos e outros conteúdos;
<a> → link, que precisa receber a atribuição href=”” com o endereço do link que você deseja que o usuário acesse ao clicar no conteúdo, e a atribuição target=”_blank” apesar de não obrigatória é importante já que o usuário vai acessar esse link em uma nova aba;
<img> → insere imagem, e a atribuição src=”” é obrigatória já que indica o endereço da imagem que vai ser mostrada a o usuário, outra atribuição é o alt=”” que apesar de não ser obrigatória é altamente recomendada por dois motivos principais, o primeiro é acessibilidade dos usuários e o segundo motivo é a para que os ajuda os mecanismos de busca possam entender melhor o contexto da imagem e pode melhorar a classificação nos resultados de pesquisa, outra atribuição é o tittle=”” que vai adicionar um texto para quando o usuário passar o mouse por cima da imagem;
listas: 9.1 <ul> → lista não ordenada; 9.2 <ol> → lista ordenada;
<h1> … <h6> → são os títulos do site, variando de tamanho, como podemos ver abaixo:

Introdução ao CSS 3
Estilizando elementos
O que são seletores? elementos html (seletores de tipo)
recebem declarações que são propriedades e valores
exemplo:
color: red (color é propriedade, red é valor)
font-size: 14px
Classes e ids também são seletores
padding → espaçamento interno, entre o box e o conteúdo dele;
margin → espaçamento entre elementos , por exemplo entre o box e outro elemento relativo a ele;

Estilizando textos
font-family → o tipo da fonte;
font-size → o tamanho da fonte;
font-style → a aparência do texto, itálico, negrito etc.
font-weight → peso do texto;
text-transform:

uppercase → todo texto em caixa alta;
lowercase → caixa baixa;
capitalize → primeira letra de todas as palavras no maiúsculo;

background →
shorthand de border: largura estilo e cor;
border-radius um valor altera tudo, mas segue a mesma ordem do padding e margin;
top right bottom e left
Estilizando listas
list-style-type

square → quadrado
upper-roman → algarismo romano maiusculo
\1f44D → simbolo

list-style-image → url da imagem
Propriedades de dimensões e alinhamento
width → largura;
height → altura;
max-widht → largura máxima;
max-height → altura máxima;
min-width → largura mínima;
min-height → altura mínima;
margin → margem;
text align → alinhamento do texto