Please enable JavaScript.

Coggle requires JavaScript to display documents.

Introdução ao HTML e CSS (HTML (Tags muito usadas (Tags de Título (Definem…

- - - - Tag <head>
        
        Tag <title>
        
        Tag <meta>
      - Tag <body>
    - - Isto não é uma tag, mas uma instrução especial, ela informa ao navegador qual versão do HTML usar, normalmente usamos a sintaxe básica, que informa ao navegador para usar a versão mais recente da linguagem
      - Sintaxe Básica:
        <!DOCTYPE html>
  - - - Indica para o navegador que ele vai processar um documento html, todas as tags são filhas dela.
    - - Tag que abriga informações que são pertinentes somente ao navegador
    - - Normalmente é filha da tag <head>, é usada para definir o nome da aba do navegador
    - - Normalmente filha da tag <head>, possui o parâmetro "charset" que define em qual grupo de caracteres o documento irá utilizar (Unicode, latin, etc)
    - - Tag que contém todo o conteúdo que será exibido pelo navegador, junto com a tag <html>, é uma das mais importantes tags da linguagem
    - - Definem em ordem crescente o tamanho e destaque de um texto:
      - <h1>
      - <h2>
      - <h3>
      - <h4>
      - <h5>
      - <h6>
    - - Tag usada para conter parágrados.
    - - Tags usadas para realçar ou destacar uma determinada parte do texto (normalmente são usadas juntas com a tag <p>)
      - <strong>
        
        Aplica negrito ao texto
      - <em>
        
        Aplica itálico ao texto
      - <small>
        
        Diminui o tamanho do texto
  - - - Usamos a tag <ul> para criar a lista e tag <li> para os tópicos
    - - Para uma lista ordenada, usamos a tag <ol> para criar a lista, para os tópicos, a tag <li> continua a mesma
    - - Muito usada em grossários
      - Se usa a tag <dl> para criar a lista, <dt> para a definição e <dd> para a explicação da definição
- - - - Basta inserir esse atributo e preenchê-lo com as propriedades na tag que quer estilizar
    - - Diferente da anterior, nessa tag você terá que mencionar os elementos que quer estilizar, para isso use o seletor css.
      - Sintaxe do seletor css:
        [tag que você quer estilizar] {
        [conteúdo]
        }
    - - Nessa forma, você irá criar um arquivo .css e irá colocar a estilização lá, será necessário mencionar no arquivo html que você irá usar um css externo, para isso use a tag link.
      - Sintaxe da tag link para o arquivo externo:<link rel="stylesheet" href="[nome do arquivo css]">
  - - - Muda a fonte do elemento
      - Pode receber o valor com ou sem aspas
      - Pode receber mais de um valor, seguindo a ordem de disponibilidade da fonte no sistema
      - Exemplo:
        font-family: roboto;
    - - Alinha o texto do elemento segundo o valor repassado
      - Exemplo:
        text-align: center;
    - - Muda o fundo do elemento
      - Precisa de um url do arquivo de imagem
      - Exemplo:
        background-image: url(img/batatinha.jpg);
    - - Muda as bordas do elemento
      - Pode se mudar a cor, seu estilo de exibição e sua largura
      - Se divide nas propriedades:
      - border-color
      - border-style
      - border-width
      - Também pode usar a forma resumida que junta as 3 subpropriedades!
        Exemplo:
        border: red solid 1px;
      - Atenção, para que o efeito apareça o propriedade border-style tem que ser diferente do padrão
    - - Mudar a cor de texto do elemento
      - Pode receber como parâmetro o nome da cor, ou, para ser mais específico, sua notação hexadecimal
      - possui propriedades mais específicas auto-explicativas, que são:
        
        background-color
        
        border-color
  - - - defini o espaçamento interno dos elementos
      - Possui as sub-propriedades:
        
        padding-top
        
        Aplica o espaçamento na parte de cima
        
        padding-right
        
        A direita
        
        padding-bottom
        
        Abaixo
        
        padding-left
        
        Esquerda
      - Possui uma sintaxe diferente:
        Se passado um valor para ele, ele será aplicado em todas as sub-propriedades.
        Se passado dois, o primeiro valor será aplicado em cima e em baixo, e o segundo na direita e esquerda.
        Se passado três, o primeiro irá para cima, o segundo pros lados, e o terceiro em baixo.
        Se passado quatro, eles serão aplicados em cima, direita, embaixo e esquerda
    - - Adiciona espaçamento além dos limites do elemento
      - Possui as mesmas sub-propriedades e comportamento do padding.
    - - Controla as dimensões do elemento
  - - - Para estilizar um elemento a partir do seu id, faça assim:
        '#'[nome do id] {
        [conteúdo]
        }
      - Esse seletor segue uma hierarquia, por isso, você pode selecionar um elemento mais específico que está com esse id, assim:
        '#'[nome do id] [nome do elemento que você quer estilizar] {
        [conteúdo]
        }