O que é HTML e como usá-lo?

Signigica Hyper Text Markup Language. É uma linguagem de marcação usada para construção de páginas Web.

O que é e como usar uma linguagem de marcação?

É um sistema para anotação de um documento que permite uma estruturação de dados de maneira sintática.

Como criar uma página HTML?

Simplesmente criamos um arquivo com a extensão .html e colocamos nosso código HTML dentro.

Estrutura de uma página HTML

Por meio do uso das tags <!DOCTYPE>, <html>, <body>, <head>. Por exemplo:

<!DOCTYPE HTML>
<html>
    <head>
        <!-- Conteúdo da head -->
    </head>
    <body>
        <!-- Conteúdo do body -->
    </body>
</html>

O que são Tags?

São a unidade fundamental do HTML, com eles nós definimos o conteúdo da página Web.

Quais tags tem no HTML?

O que são atributos de tags?

São propriedades que alteram o comportamento do conteúdo de uma tag, por exemplo: o link que que a tag <a> nos levaria, se um vídeo de uma tag <video> pode ter controles ou não, a fonte de uma tag <p>, etc.

O que é CSS e como usá-lo

Significa cascading style sheets, é uma linguagem usada para estilizar elementos HTML em uma página Web. Basicamente com ela escrevemos como nossa página Web deve parecer

Como inserir CSS na nossa página?

Por meio de um atributo style:

<p style="color: red">

ou por meio da tag <style>:

<style>
    p {
        color: red;
    }
</style>

ou com uma tag <link>:

<link rel="stylesheet" href="style.css">

O que são regras CSS?

São blocos de código que colocamos no css que aplicam uma customização de elementos HTML, por exemplo:

p {
    color: red;
}

/*
    p = seletor
    color = propriedade
    red = valor
*/

O que são seletores CSS?

São basicamente códigos que utilizamos para selecionar um elemento HTML, existem várias opções para seletores CSS que nos permitem selecionar de maneira vasta ou específica elementos na nossa página Web, exemplos:

button { } /* seleciona todos os botões na página */

div, button { } /* seleciona todos os divs e botões na página */

div button { } /* seleciona todos os botões que estão dentro de um div */

* { } /* seleciona todos os elementos na página */ 

div * { } /* seleciona todos os elementos dentro das divs da página */

O que são IDs e classes no HTML?

Digamos que você queira selecionar um div específica na sua página, mas existem vários divs nela, por exemplo:

<div>
    <p>Este é um div</p>
</div>
<div>
    <p>E este é outro div</p>
</div>

Bem, neste caso, devemos adicionar um identificador no elemento que queremos selecionar específicamente, para que possamos estilizar apenas ele no nosso css:

<div id="primeiro-div">
    <p>Este é um div</p>
</div>
<div class="segundo-div">
    <p>E este é outro div</p>
</div>

Desta forma podemos selecionar um div específico no css usando seletores especiais:

#primeiro-div { }
.segundo-div { }

O que são propriedades CSS?

São propriedades dos elementos HTML que podemos alterar no css, por exemplo: podemos alterar a cor do texto, o tamanho do texto, a transparência do elemento, a borda dele, etc. por exemplo:

button {
    color: red;
    font-size: 16px;
    opacity: 75%;
}

O que podemos fazer com CSS?

Muita coisa, mas basicamente, com ele podemos fazer com que nossa página deixem de serem horrorosas, como essas: