Please enable JavaScript.

Coggle requires JavaScript to display documents.

FLONT BASICO(HTML+CSS) - Coggle Diagram

- - - - 3- A tag <head> e </head> será utilizada para controlar as meta tags que modificam oque não fica visível no cod. (fica localizada abaixo da tag de abertura <html> e antes da tag de abertura <body>
        
        4-A tag seguir a ser utilizada sera a tag <body> em sua abertura e </body> que sera toda a parte vísivel do documento
    - - Elementos podem sempre vir acompanhado de atributos
        
        Ao inserir o atributo lang="pr-br" dentro da tag head definimos que o idioma do cod sera em português-brasileiro <html lang="pr-br>
        
        Acontecerea tambem com tag <img>(que possui a função de sinalizar que uma imagem sera utilziada) e o atributo src="img-selecionada"(que possui a função de sinalizar de onde a imagem sera extraida
        
        Com a tag <a>(que possui a função de sinalziar a utilização de links) e o atrubuto href="link" (que sinaliza da onde o link sera extraido ou ira direcionar"
        
        Link mais ex:https://www.w3schools.com/html/html_attributes.asp
  - - - O elemento HTML <p> define um parágrafo.
        Um parágrafo sempre começa em uma nova linha, e os navegadores adicionam automaticamente algum espaço em branco (uma margem) antes e depois de um parágrafo.
        
        A <hr>tag define uma quebra temática em uma página HTML e é mais frequentemente exibida como uma régua horizontal.
        O <hr>elemento é usado para separar conteúdo (ou definir uma alteração) em uma página HTML:
        
        Liks ex:https://www.w3schools.com/html/html_paragraphs.asp
        
        O elemento HTML <br> define uma quebra de linha.
        Use <br> se quiser uma quebra de linha (uma nova linha) sem iniciar um novo parágrafo
      - Formatação de texto HTML
        
        Os elementos de formatação foram projetados para exibir tipos especiais de texto:
        
        <b>- Texto em negrito
        
        <strong>- Texto importante
        
        <i>- Texto em itálico
        
        <em>- Texto enfatizado
        
        <mark>- Texto marcado
        
        <small>- Texto menor
        
        <del>- Texto deletado
        
        <ins>- Texto inserido
        
        <sub>- Texto subscrito
        
        <sup>- Texto sobrescrito
        
        Comentários HTML
        
        
- - - - O <div> elemento é usado como um contêiner para outros elementos HTML, tornando possivel modificar "blocos" especificos
        
        ex: https://www.w3schools.com/html/html_div.asp
        
        O <div> elemento é, por padrão, um elemento de bloco, o que significa que ele ocupa toda a largura disponível e vem com quebras de linha antes e depois.
        
        Alinhar ao centro um elemento <div>
        
        Se você tiver um <div>elemento que não seja 100% largo e quiser centralizá-lo, defina a marginpropriedade CSS como auto.
        
        ex:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div3
        
        Vários elementos <div>
        
        ex: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div4
        
        Alinhando elementos <div> lado a lado
        
        float(Flutuador) A float propriedade CSS é usada para posicionar e formatar conteúdo e permitir que os elementos flutuem um ao lado do outro em vez de um em cima do outro.
        
        1 more item...
        
        Bloco em linha
        
        2 more items...
      - Class
        
        O atributo HTML classé usado para especificar uma classe para um elemento HTML.Vários elementos HTML podem compartilhar a mesma classe.
        
        Usando o atributo class:O classatributo é frequentemente usado para apontar para um nome de classe em uma folha de estilo. Ele também pode ser usado por um JavaScript para acessar e manipular elementos com o nome de classe específico.
        
        No exemplo a seguir, temos três <div>elementos com um classatributo com o valor de "city". Todos os três <div> elementos serão estilizados igualmente de acordo com a .city definição de estilo na seção head:(link)https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_capitals
        
        A Sintaxe Para Classe
        
        Para criar uma classe; escreva um caractere ponto (.), seguido por um nome de classe. Então, defina as propriedades CSS entre chaves {}: .city { background-color: tomato; color: white; padding: 10px; }
        
        Várias Classes
        
        Os elementos HTML podem pertencer a mais de uma classe.Para definir várias classes, separe os nomes das classes com um espaço, por exemplo, <div class="city main">. O elemento será estilizado de acordo com todas as classes especificadas.No exemplo a seguir, o primeiro <h2>elemento pertence à cityclasse e também à mainclasse e obterá os estilos CSS de ambas as classes: (link)https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_multiple
        
        Elementos diferentes podem compartilhar a mesma classe
        
        Diferentes elementos HTML podem apontar para o mesmo nome de classe.No exemplo a seguir, tanto <h2>e <p> apontam para a classe "cidade" e compartilharão o mesmo estilo:(link):https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_tags
        
        Uso do atributo class em JavaScript
        
        O nome da classe também pode ser usado pelo JavaScript para executar determinadas tarefas para elementos específicos.JavaScript pode acessar elementos com um nome de classe específico com o getElementsByClassName()método:linkhttps://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_js
        
        1 more item...
        
        ex:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_css
      - Atributo de ID HTML
        
        O id atributo especifica um id exclusivo para um elemento HTML. O valor do id atributo deve ser exclusivo dentro do documento HTML.O idatributo é usado para apontar para uma declaração de estilo específica em uma folha de estilo. Ele também é usado pelo JavaScript para acessar e manipular o elemento com o id específico.
        
        A sintaxe para id é: escreva um caractere hash (#), seguido por um nome de id. Então, defina as propriedades CSS entre chaves {}.No exemplo a seguir, temos um <h1>elemento que aponta para o nome id "myHeader". Este <h1> elemento será estilizado de acordo com a #myHeader definição de estilo na seção head:(link)https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_css
  - - - nav: Contém links de navegação principais.
        
        main:Conteúdo Principal
        
        section:Define seções temáticas do conteúdo, agrupando conteúdos relacionados. Uma seção poderia ser, por exemplo, a descrição e comentários de um produto.
        
        article:Representa um conteúdo independente que faz sentido por si só, como posts de blog, notícias e cards de produtos. Vários <article> podem estar dentro de <main>.
        
        aside:Contém conteúdos secundários como barras laterais.
        
        footer:Esse elemento contém informações do final da página, como links secundários, política de privacidade, termos de uso e dados de contato.
  - - - O seletor aponta para o elemento HTML que você deseja estilizar. Podemos utilizar o seletor de diversar formas , como por exemplo estilzando todas as tags do mesmo tipo como <h1>(titulos) ou todas as tags <p> (paragrafos)
        
        Podemos selecionar tambem IDs,classes ou divs visando otimização de mudanças no cod
        
        O seletor de classe CSS:O seletor de classe seleciona elementos HTML com um atributo de classe específico.Para selecionar elementos com uma classe específica, escreva um ponto (.), seguido do nome da classe.
        
        ex:https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class
        
        O seletor universal CSS:O seletor universal (*) seleciona todos os elementos HTML na página.
        
        O seletor de agrupamento CSS. O seletor de agrupamento seleciona todos os elementos HTML com as mesmas definições de estilo.O seletor de agrupamento seleciona todos os elementos HTML com as mesmas definições de estilo.:ex:https://www.w3schools.com/css/tryit.asp?filename=trycss_grouping
        
        Para que um seletor(selector)funcione corretamente , é preciso que a Declaration,Property e Value estejam corretas respeitando as sintaxe
        
        Declaration pode ser descrita como a utilização do { } e ; para definir a estilização. Por exemplo ao chamar o selector para a tag <h1> utilizaremos { para abrir a declaration, em seguida a propriedade como ex color: o valor dessa propriedade que no caso poderia ser blue e utilizamos ;** para fechar a declaração.
        
        Property é oque define qual propriedade sera modificada dentro da declaração por ex: color :, font-size:, text-align: .
        
        1 more item...
        
        ex:https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1 Exemplo Explicado: p é um seletor em CSS (ele aponta para o elemento HTML que você deseja estilizar: <p>). coloré uma propriedade e redé o valor da propriedade. text-aligné uma propriedade e centeré o valor da propriedade
    - - Ex:https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body
      - Outros Elementos
        Você pode definir a cor de fundo para qualquer elemento HTML como nos cados a seguir os elementos <h1>, <p> e <div> terão cores de fundo diferentes.
        
        EX:https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_elements
        
        Opacity / Transparency
        A opacity propriedade especifica a opacidade/transparência de um elemento. Pode assumir um valor de 0,0 - 1,0. Quanto menor o valor, mais transparente:
        
        EX:https://www.w3schools.com/css/tryit.asp?filename=trycss_background_opacity
      - Com CSS, uma cor é geralmente especificada por:
        um nome de cor válido - como "vermelho" , um nome de cor válido - como "vermelho", um valor RGB - como "rgb(255,0,0)"
        
        Onde encontrar cores:https://www.w3schools.com/cssref/css_colors_legal.php
    - - Ex https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image