Introdução ao HTML e ao CSS

HTML e CSS:

HTML:

HTML significa HyperText Markup Language → Não é uma linguagem de programação, mas sim uma linguagem de marcação, utilizada para que navegadores (chrome, firefox, Explorer, opera) interpretem suas marcações e transforme na página que será visualizada.

DOM → Document Object Model

Basicamente a estruturação de documentos Web (o padrão de formato).

Estruturado em 3 partes principais: Doctype, Head, Body

TERMOS COMUNS EM HTML

ELEMENTS

Designações. Definem a estrutura e o conteúdo em uma página.

Identificados entre "<" e ">"

Exemplo:

TAGS

A utilização dos símbolos "<" e ">" ao redor do elemento criam a tag.

As tags mais comuns são abertas e fechadas em pares.

<div>
Temos acima a abertura da tag div (divisão) e abaixo o fechamento da tag.
</div>

ATRIBUTOS

Propriedades que providenciam maiores informações acerca do elemento.

<a href="http://sitequalquer.com">Clique aqui para acessar um site qualquer</a>
     |-----> atributo da tag 'a' (âncora)

ESTRUTURAÇÃO DO HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title> Hello, World!</title>
    </head>
    <body>
        <h1> Hello, my World!</h1>
        <p>Isso vai aparecer no site.</p>
    </body>
</html>

SEMÂNTICA

Prática de fornecer conteúdo, sentido e estrutura, utilizando o elementos ideais para cada caso.

Desconsidera questões visuais, avaliando a estrutura semântica da página por meio de seus elementos.

ARQUITETURA DE UM HTML

Outro elemento importante é o nav:

<nav>
Utilizado aqui para navegar entre as informações do site, do servidor, etc.
</nav>

CSS:

CSS significa Cascading Style Sheets.

Utilizado em conjunto com as outras linguagens HTML e JS, conferindo um conjunto de estilos como propriedades de cada elemento desejado na página HTML.

TERMOS COMUNS EM CSS

SELETOR

Seleciona qual elemento (s) está sofrendo alteração em seu estilo.

Pode sofrer especificações, identificando elementos específicos elementos específicos (id, nomes, classes).

PROPRIEDADES

Estilos adicionados ao elemento selecionado

VALOR

Comportamento da propriedade

|--> SELETOR
p {
    |--> PROPRIEDADE
    color : orange;
    font-size : 12px;
                  |-->VALOR
}

REFINANDO OS SELETORES

TYPE

Seleção por tipo do elemento

div {...}
Todo elemento com tag <div>

CLASSE

Selecionamos elementos a partir de sua classe

div.suaclasse { ... }
.suaclase { ... }

Exemplo 1: elementos com tag e classe "suaclasse".

Exemplo 2: elementos de qualquer tag, com classe "suaclasse".

OBS .: podemos determinam um objeto no HTML com várias classes, de modo a modularizar a escolha de estilo:

<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>

Neste caso, temos uma classe comum (btn), na qual a fonte de tamanho 16 pixels será padrão. Depois temos 2 especificações de modo a individualizar as outras 2 "sub-classes"

.btn {
  font-size: 16px;
}
.btn-danger {
  background: red;
}
.btn-success {
  background: green;
}

Selecionamos, especificamente, um elemento a partir do seu ID.

div#seuID { ... }
#seuID { ... }

Exemplo 1: elemento com tag e id "seuID".

Exemplo 2: elemento de qualquer tag, com id "seuID".

REFERENCIANDO O CSS NO HTML

Dentro do HTML

<head>
    <link rel="stylesheet" href="main.css">
</head>

Referência:

Web Development

PreviousEntendendo as URLs NextDirectory Traversal

Last updated 5 years ago