Curso HTML5

Curso HTML5

1. A internet surgiu de um invento que teve na década de 70 por conta da guerra para comunicar servidor que estavam em bases militares

   • html é uma linguagem para criação de conteúdo hiper texto. http é um protocolo (idioma único que todas as máquinas falam) de transferência de hiper textos (textos, imagens, sons e qualquer tipo de arquivo multimídia com interatividade) e que evoluiu dos conjuntos de protocolos TCP (Transfer Control Protocol) e IP (internetwork protocol). E a world wide web (WWW) tecnologia que engloba todos os servidores de conteúdo multimídia que utilizam o protocolo http. E para visualizar as páginas em http é necessário um navegador
     • A transferência de arquivos acontece através dos protocolos, que dividem os arquivos em pequenos pacotes (data gramas), transfere e depois reagrupa. Para essa transferência é necessário o endereço, que é o IP (quatro partes de número, 177.192.165.124), cada computador e servidor tem um IP que a infra estrutura da internet encontra o arquivo (html, jpeg, mp3, mp4...) no servidor e transmite para o computado, onde o navegador irá interpretar o código html e mostrar na tela.

2. Website é composto por 3 tecnologias

   • Linguagem de marcação
     • HTML 5
       • Conteúdo
   • Linguagem de estilo
     • CSS 3
       • Designer
         • Cascading Style Sheets (Folha de Estilo em Cascatas) é um mecanismo para adicionar estilo a um documento web.
   • Linguagem de programação
     • JS
       • Interações

3. Marca ou Tag - Tem semântica/ significado para o html

   • É tudo aquilo que abre com "< >" e fecha com "</ >. Porém tem algumas Tags que não fecham, como o "<meta >". Dessa forma pode deixar somente a Tag de abertura ou fechar com "/>".
   • Tag que não existem não geram erros, mas sim são ignoradas
   • Demarcando edições
     • del
       • O elemento HTML <del> (ou Elemento HTML de Texto Excluído) representa uma parte do texto que foi excluída de um documento. Este elemento é (não necessariamente) renderizado pelos navegadores com uma linha entre o texto.
     • ins
       • O HTML <ins> elemento (ou HTML texto inserido) HTML representa um intervalo de texto que foi adicionado a um documento.
   • Elementos básicos
     • html
       • O elemento HTML <html> (ou HTML root element) representa a raiz de um HTML ou XHTML documento. Todos os outros elementos devem ser descendentes desse elemento.
   • Metadados do documento
     • Link
       • Quando o código style fica muito grande é recomendável fazer um arquivo a parte de style, para diminuir o tamanho e para não precisar digitar de novo para outros códigos
         • Linkar html com CSS, colocando: "<link rel="stylesheet" href="_css/estilo.css"/>" no lugar do style
           • Tag <link/>
           • stylesheet: folha de estilo
           • href: hypertext reference: referência hipertexto qd vai chamar um arquivo de fora. Para fazer isso coloca-se a pasta e o arquivo.
       • Criar uma ancora (base de criação do link) <a> </a>
         • Com o parâmetro href= (referência hipertexto)
           • Exemplo
             • <a href="link"> palavra com hiperlink </a>
               • Esse link pode ser um site ou arquivo
           • Para que o link abra uma nova aba é necessário inserir outro parâmetro: target="_blank". Caso queira que ele abra na mesma aba basta não colocar nada ou colocar o parâmetro: target="_self"
     • body
       • HTML Body Element ( <body>) define todo o conteúdo de um documento. Ele contém todo o conteúdo e tags HTML.
     • base
       • Especifica o endereço (URL) utilizada por todos os endereços relativos contidos dentro de um documento. Há um número máximo de 1 (um) elemento Base <base> do documento.
     • head
       • The HTML <head> elemento providencia informações gerais (metadados) sobre document, incluindo seu título e links para scripts e folhas de estilos.
     • meta
       • O elemento HTML <meta> define qualquer informação de metadados que não podem ser definidos por outros elementos HTML. (<base>, <link>, <script>, <style> ou <title>).
     • style
       • O elemento HTML <style> contém informações de estilo para um documento ou uma parte do documento. As informações de estilo específico estão contidas dentro deste elemento, geralmente no CSS.
     • title
       • O elemento HTML <title> (Elemento HTML Título) define o título do documento, mostrado na barra de título de um navegador ou na aba da página. Pode conter somente texto e quaisquer marcações contidas no texto não são interpretadas.
   • Separação de conteúdo
     • h1 - h6
       • Elementos de cabeçalho são implementados em seis níveis, <h1> é o mais importante e <h6> é o de menor importância. Um elemento de cabeçalho descreve brevemente o tópico da seção em que ele está. As informações de cabeçalho podem ser usadas por agentes de usuário, por exemplo, para construir uma tabela de conteúdos para um documento automaticamente.
     • hgroup
       • destina-se a agrupar cabeçalhos de diferentes níveis para uma seção do documento. Ele agrupa (é um container para) um conjunto de elementos <h1>–<h6>.
     • section
       • Elemento de seção HTML ( <section>) define uma seção de um documento para indicar um agrupamento relacionado de significado semântico. Utilize o elemento de seção, fornecendo contexto extra a partir do elemento pai, faz sentido.
     • article
       • Elemento de artigo HTML ( <article>) define uma parte do conteúdo independente. Não se refere apenas ao conteúdo principal e pode ser usado para comentários e widgets.
     • nav
       • Elemento de navegação HTML ( <nav>) define uma seção que contém links de navegação que aparecem frequentemente em um site. Você pode ter menus primário e secundário, mas nunca aninhar ou colocar um <nav>elemento dentro de um <nav>elemento.
     • aside
       • O HTML Aside Element ( <aside>) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicações ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal. Conteúdo lateral
     • header
       • Elemento de cabeçalho HTML ( <header>) define uma página que normalmente contém o logotipo, título e navegação. O cabeçalho também pode ser usado em outros elementos semânticos como <article>ou <section> - cabeçalho ou seção, contendo talvez título da secção, nome do autor, etc. <article>, <section>, <aside>, e <nav>podem ter a sua própria <header>. Apesar do nome, ele não está necessariamente posicionado no início da página ou seção.
     • footer
       • HTML rodapé Elemento ( <footer>) define um rodapé de página que normalmente contém o autor, avisos legais e às vezes alguns links - ou seção de rodapé, contendo talvez data de publicação da secção, informações de licença, etc. <article>, <section>, <aside>, e <nav>podem ter a sua própria <footer>. Apesar do nome, ele não está necessariamente posicionado no final da página ou seção.
     • main
       • Define o conteúdo principal dentro do <body> em seu documento ou aplicação.
     • address
       • fornece informações de contato para seu ancestral <article> ou <body> mais próximo; no segundo caso, ele se aplica ao documento inteiro.
   • Conteúdo textual
     • div
       • O elemento de divisão HTML <div> é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como <article> ou <nav>).
     • p
       • Parágrafo
     • pre
       • Texto será exibido exatamente da forma que foi digitado no "visual studio code", incluindo tabulações, espaços e marcas de enter
     • blockquote
       • O Elemento HTML <blockquote> (ou Elemento HTML de citação de bloco) indica que o texto incluído é uma longa citação. Normalmente, este é processado visualmente pelo recuo (ver Notas sobre como mudá-lo). A URL para a fonte da citação pode ser dada usando o atributo cite, enquanto uma representação de texto da fonte pode ser dada usando o <cite> elemento.
     • dd
       • Este elemento inclui os atributos globais como seus.
     • dir
       • É usado como um contêiner para um diretório de arquivos e/ou pastas, potencialmente com estilos e ícones aplicados pelo user agent.
     • dl
       • O elemento HTML Definition List (<dl>) engloba uma lista de pares de termos e descrições. Um uso comum para este elemento é para implementar um glossário ou exibir metadados(uma lista de pares chave e valor).
     • dt
       • O elemento HTML <dt> (ou Elemento HTML de Definição de Termo) identifica um termo na lista de definição. Este elemento pode ocorrer somente em um elemento filho de <dl>. Geralmente seguido por um elemento <dd>; ou multiplos <dt> na mesma linha indicam vários termos sendo definidos pelo próximo element <dd>.
     • figure
     • figcaption
     • hr
       • O elemento HTML <hr> representa uma quebra temática entre elementos de nível de parágrafo (por exemplo , uma mudança da cena de uma história, ou uma mudança de tema com uma seção). Nas versões anteriores do HTML, representava uma linha horizontal. Pode continuar sendo exibida como uma linha horizontal nos navegadores, mas agora está definida em termos semânticos, em vez de termos de apresentação.
     • li
     • main
     • ol
     • ul
   • Semânticas textuais inline
     • br
       • O elemento HTML quebra-de-linha <br> produz uma quebra de linha em um texto (carriage-return).É útil para escrever poemas ou um endereço, onde a divisão de linha é significante.
     • wb
       • Word Breaker - quebra de palavra. Tb pode separar sílabas.
         • Ex.: "super-<wbr/>humano"
           • Usado para quebra de site e e-mail
     • em
       • O elemento HTML <em> marca o texto que tem ênfase. O elemento <em> pode ser aninhado, com cada nível de aninhamento indicando um grau maior de ênfase.
     • span
       • É um conteiner generico em linha para conteúdo fraseado , que não representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id ), ou para compartilhar valores de atributos como lang. Ele deve ser usado somente quando nenhum outro elemento semântico for apropriado. <span> é muito parecido com o elemento <div> , entretando <div> é um elemento de nível de bloco enquanto <span> é um elemento em linha.
     • sup
       • Tudo que estiver dentro irá gerar um resultado de sobre escrito ou elevado "X²"
     • sub
       • Tudo que estiver dentro irá gerar um resultado de sob escrito
     • code
       • Tag especifica para formatar código, tudo será considerado e formatado como um código. Esta dizendo para o navegador que vc esta mostrando um trecho de código
     • i
       • O elemento HTML <i> representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo "itálico".
     • a
       • O elemento HTML <a> (ou o Elemento Ancora HTML define uma hiperligação (hyperlink), o destino de uma hiperligação, ou ambos.
     • abbr
       • O Elemento HTML <abbr> (ou Elemento de Abreviação HTML) representa uma abreviação e opcionalmente fornece uma descrição completa para ela. Se presente, o atributo title deve conter a descrição completa e apenas ela.
     • b
       • O elemento HTML <b> representa um intervalo de texto estilísticamente diferente do texto normal, sem transmitir qualquer importância ou relevância. Ele é geralmente usado para destacar palavras-chaves em um resumo, nomes de produtos em um comentário ou outros vãos de texto cuja a apresentação típica seria negrito. Outro exemplo de seu uso é como marcação da frase principal de cada paragrafo de um artigo.
     • bdi
       • Este elemento é útil ao incorporar o texto com uma direção desconhecida, de um banco de dados por exemplo, no interior do texto com uma direção fixa.
     • bdo
       • O elemento HTML <bdo> (bidirectional override) é usado para substituir a direcionalidade atual do texto. Isso faz com que a direcionalidade dos personagens seja ignorada em favor da direcionalidade especificada.
     • cite
       • O elemento HTML <cite> representa uma referência a um trabalho artístico. Deve incluir o título do trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo com as convenções usadas para a adição dos metadados de citação.
     • data
       • The HTML <data> Element links a given content with a machine-readable translation. If the content is time- or date-related, the <time> must be used.
     • dfn
       • O elemento HTML <dfn> (ou Elemento Definição HTML) representa uma instância de definição de um termo.
     • kbd
     • mark
       • O Elemento HMTL <mark> representa um trecho de destaque em um texto, por exemplo, uma sequência de texto marcado como referência, devido à sua relevância em um contexto particular. Por Exemplo, pode ser utilizado em uma página que mostra os resultados de uma busca onde todas as instâncias da palavra pesquisadas receberam destaque.
     • q
       • Este elemento inclui os atributos globais.
     • rb
     • rp
     • rt
       • The HTML <rt> Element embraces pronunciation of character presented in a ruby annotations, which are for showing pronunciation of East Asian characters and the <rt> element is used inside of <ruby> element.
     • rtc
     • ruby
       • O elemento HTML <ruby> representa uma anotação ruby. Anotações ruby são para mostrar a pronúncia de caracteres do Leste Asiático
     • s
     • samp
     • small
     • strong
       • Este elemento inclui apenas os global attributes(atributos globais).
     • time
       • O elemento HTML time (<time>) representa o tempo tanto no formato de 24 horas ou como uma data precisa no calendário Gregoriano (com informações opcionais de tempo e fuso horário)
     • tt
     • u
     • var
       • O elemento HTML Variable (<var>) representa uma variável em uma expressão matemática ou um contexto de programação.
   • Imagem e multimídia
     • area
       • O HTML <area> elemento define uma região hot-spot em uma imagem, e, opcionalmente, associa-lo com um link de hipertexto. Este elemento é usado somente dentro de um <map> elemento.
     • audio
       • O elemento audio é utilizado para embutir conteúdo de som em um documento HTML ou XHTML.
     • img
       • O elemento HTML <img> (or HTML Image Element) representa a inserção de imagem no documento, sendo implementado também pelo HTML5 para uma melhor experiência com o elemento <figure> e <figcaption>.
     • map
       • O elemento HTML <map> é usado com os elementos <area> para definir um mapa de imagem (a área clicável do link).
     • track
       • O elemento HTML <track> é usado como filho dos elementos de mídia<audio> e <video>. Ele permite que você especifique faixas de texto temporizadas (ou dados baseados em tempo), por exemplo, para lidar automaticamente com legendas. As faixas são formatadas em WebVTT format (arquivos .vtt) — Web Video Text Tracks or Timed Text Markup Language (TTML).
     • video
   • Conteúdo integrado

4. Comentários

   • CSS 3
     • /* comentários */
   • HTML 5
     • <!-- comentários -->

5. Para o html, o espaço e o enter não servem pra nada

6. Símbolos

   • &nbsp;
     • Gera um espaço - Non-breaking-Space - espaço sem quebra. Cada uso gera um espaço.
   • &shy;
     • Soft hyphen. Ele quebra as palavras da forma pedida e coloca o hífen na separação de sílabas (-).
       • Usado para quebra de sílabas
   • Tag
     • < - < menor que
     • > - > maior que
     • &le; - menor igual que
     • &ge; - maior igual que
   • Monetário
     • &pound; - Libra
     • &yen; - iene japonesa
     • &euro;
   • &copy; - copyright - direito autoral
   • &reg; - marca registrada
   • &trade; - trademark - marca comercial
   • &permil; - por mil
   • &sum; - Soma
   • &infin; - infinito
   • &times - multiplicação
   • &plusmn; - mais ou menos
   • &oplus; - mais dentro de uma circunferência
   • &radic; - raiz quadrada
   • &ne; - diferente
   • Letras gregas
     • &delta; - delta minuscula
     • &Delta; - delta maisculo
     • &Lambda; - lambda
     • &omega;
     • &phi;
   • Setas
     • &larr; - seta para esquerda
     • &rarr; - seta para direita
     • &uarr; - seta para cima
     • &darr; - seta para baixo
     • &harr; - seta para cima e para baixo
   • Colocando a primeira letra em maisculo podemos ver outra variação de alguns símbolos
   • naipes
     • &spades; - espada
     • &clubs; - Paus
     • &hearts; - Copas
     • &diams; - Ouros

7. (CSS) Style=

   • Modo de formatação
     • Global
       • Dentro do head
         • <style> p { text-align: justify; text- indent: 50px; }
     • Local
       • Dentro da Tag
         • <h2 style="text-align: right;"> Titulo de hierarquia 2 </h2>
       • Dentro do texto
         • <span> texto a ser formatado </span>
           • <span style="font-weight:900;"> texto a ser formatado </span>
   • Tb é possível colocar mais de uma formatação de style
     • style="text-align: justify; text-indent: 50px"
       • texto justificado e endentado
   • Color
     • background-color: (cor do fundo)
     • Para definição da cor, pode-se: digitar o nome, código ou selecionar (deixar o mouse em cima até que ele mostre o quadro de cores)
     • Padrão hexadecimal: #10205E
     • Padrão RGB (red, green, blue): rgb (35, 137, 195)
     • background-image: url("nome do arquivo");
     • color: rgba (0,0,0,1)
       • padrão rgb com o acréscimo do alfa, que varia de 0 a 1, sendo 0 totalmente transparente e 1 não transparente
         • Exemplo de transparência
           • background-color: rgba (0,0,0,.4);
             • Colocou uma transparência de 0.4
     • Padrão HSB (hue saturation brightness - matiz saturação luminosidade): color: hsl (165,81%,93%). Tb é possível acrescentar o canal alfa: hsla (165,81%,93%,0.5)
   • "box-shadow: 1px 1px 4px black"
     • Sombra com deslocamento horizontal de 1px, vertical de 1px, de espalhamento de 4px e cor black
   • "position:
     • absolute;" top: 0px; left: 10px"
       • Posição absoluta ou independente, é posicionado nos limites do website.
     • relative;"
       • Posição relativa a Tag, é posicionado dentro dos limites da Tag.
     • top: deslocamento vertical. left: deslocamento horizontal
     • A página tem uma margem padrão
   • Opacity
     • Especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto. Varia de 0 a 1
   • box-sizing: border-box;
     • Box sizing é o dimensionamento do espaço dentro da Tag referenciada. Aqui nesse exemplo o tamanho do espaço é "border-box", ou seja, o espaço da borda
   • Text
     • "text-decoration:
       • underline;"
         • Sublinhado
       • overline;"
         • Sublinhado acima do texto
       • line-through;"
         • Riscado no texto
       • none;"
         • nada, nenhuma formatação
     • "font-weight:
       • Quantidade de negrito que a letra terá
       • normal;"
         • sem formatação ou normal
       • bold;"
         • negrito
       • bolder;"
         • negrito + grosso
       • 400;"
         • intensidade de negrito, varia entre 100 - 900
     • "text-align:
       • center;"
       • alinhamento do texto
       • left;"
       • right;"
       • justify;"
     • "text-indent: 50px"
       • Endentação
       • Afastamento de 50 pixels da margem esquerda
     • text-transform:
       • A propriedade de CSS text-transform especifica como capitalizar um texto de um elemento. Pode ser usado para que o texto apareça com todas as letras maiúsculas ou todas minúsculas, ou com cada palavra em maiúscula.
       • uppercase;
         • Coloca tudo em maiúsculo
     • font-size: 20pt;
       • tamanho do texto
   • display:
     • Essa propriedade especifica o tipo de caixa de renderização usada por um elemento. O valor padrão em XML é inline.
     • inline-block;
       • Ordena os blocos em linha
     • block;
       • Transforma o elemento (s) em um bloco. O bloco possui propriedades independentes dentro do site
     • none;
       • Permite desativar a exibição de um elemento, todos os elementos descendentes também tem a sua exibição desativada. O documento é renderizado como se o elemento não existisse na árvore do documento.
   • Margem
     • padding: 10px;
       • A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
       • Margem interna do elemento
       • padding: 10px 10px 10px 10px; ou padding: 10px;
         • margem de cima, direita, baixo e esquerda
     • margin: px;
       • A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right, margin-bottom, e margin-left.
       • Margem externa do elemento
       • margin: 10px 10px 10px 10px;
         • margem de cima, direita, baixo e esquerda
         • Colocando "auto" no lugar do valor irá centralizar automaticamente
       • margin-left: auto; - centraliza na horizontal
       • margin-right; - centraliza na vertical
     • Todo o objeto tem
   • Propriedades abreviadas
     • São propriedades CSS que permitem definir os valores de várias outras propriedades CSS simultaneamente
     • transition
       • É uma propriedade abreviada para transition-property, transition-duration, transition-timing-function e transition-delay. Ela permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usando pseudo-classes tais como :hover ou :active; ou dinamicamente, usando javascript.
         • Exemplo: transition: opacity 1s;
           • Na exibição da "opacity" vai demorar um segundo para finalizar
         • Exemplo: transition: background-color 1s;
           • Aqui a mudança solicitada ao background através de pseudo-classe irá demorar 1s para mudar.
   • Tamanho
     • height - altura
     • width - largura
   • background
     • imagem
       • url = ("endereço do objeto")
         • no-repeat
         • 0 px 10px; (deslocamento horizontal e vertical)
   • Fontes
     • 3 maneiras de colocar
       • Padrão: nome da fonte (arial, verdana...)
       • Personalizadas do seu site
         • Para inserir a fonte colocar no style: @font-face { font-family: nome da fonte; src: url(local da fonte); }
       • Externas de outros sites
         • Para conseguir fontes externas basta procurar no google fonts ou outro site. No "Quick-use" escolhe as configurações e cópia a linha de código para inserir a fonte (html: Standard, css: @import, Javascript). Cola a linha de código no local (html, css ou JS) e para integrar a fonte ao css basta copiar a linha de código fornecida.
     • O usuário não precisa ter a fonte, a fonte fica no navegador
   • Float
     • Determina que um elemento deve ser retirado do seu fluxo normal e irá flutuar para direita, esquerdo... do seu containêr, onde textos e elementos em linha irão se posicionar ao seu redor.
   • Clear
     • Especifica se um elemento pode ter elementos flutuantes ao seu lado ou se devem ser movidos para abaixo dele (clear). Essa propriedade se aplica à elementos flutuantes ou não flutuantes.
   • Border
     • Define a borda de um elemento. border Ele define os valores de border-width, border-stylee border-color.
     • border-spacing;
       • Espaço entre os elementos que estão dentro do elemento selecionado
     • border: 8px solid red;
       • Borda com as especificações de largura, composição e cor
   • Align
     • vertical-align:
       • alinhamento vertical
       • top;
       • bottom;
       • middle;

8. Imagens

   • Formato "png" é um pouco maior que o "jpeg", pois normalmente tem resolução melhor e o recurso da transparência. Quando não for necessário esses recursos é melhor usar o formato "jpeg", pois é mais leve e com isso gera um menor tráfego e menor custo com hospedagem no servidor
   • <figure> </figure>
     • <img src="caminho+nome do arquivo"/>
       • Tag para imagem, com o parâmetro src: source - origem
     • Usada para colocar imagens e dar um significado a elas
     • <figcaption> </figcaption>
       • Tudo que estiver dentro pode ser considerado uma legenda, isso dá um significado semântico para mecanismos de buscas e visualização do usuário. Essa legenda pode ser uma Tag <p> </p>, <h3> </h3>...
   • Style
     • Tamanho
       • <img src="caminho+nome do arquivo" width="300"/>
         • width: largura e "300" pixels
           • Método pouco usado pois diminui a largura, mas o tamanho do arquivo continua o mesmo
         • width: 100%; height: 100%;
           • Ele vai ocupar 100% da largura e 100% da altura do site
       • Editor de desenhos: Photoshop ou Gimp
         • Editar o tamanho do arquivo e usar a opção de salvar ou exportar para web (arquivos menores)

9. Listas

   • <nav> </nav>
   • Tipos
     • Ordered lists (listas ordenadas) - <ol> </ol>
       • type=
         • "1" - Ordenado numericamente / Tipo padrão
         • "a" ou "A" - ordenação alfabética minuscula ou maiúscula
         • "i" ou "I" - Ordenação com algarismos romanos minuscula ou maiúscula
         • Parâmetro de inicio (start)
           • Exemplo: start="3"
             • Ele irá começar a partir do 3º número, letra ou algarismo
         • Exemplo: <nav> <h1> Menu </h1> <ol type="a" start="2"> <li> Home </li> <li> fotos </li> </ol> </nav>
     • Unordered lists (listas não ordenadas) - <ul> </ul>
       • type=
         • "disc" - marcadores de círculos preenchidos
         • "circle" - marcadores de círculos vazios
         • "square" - marcadores de quadrado
   • List items (itens da lista) - <li> </li>
   • Também é possível fazer uma lista dentro de um item da lista, basta colocar a Tag "ol" ou "ul" embaixo de um item "li"
   • list-style:
     • none; (nenhuma formatação)
     • A list-stylepropriedade CSS é uma abreviação para definir as propriedades de estilo de lista list-style-type, list-style-imagee list-style-position.
     • Vários tipos de formatos

10. Atributo

    • Global
      • id
        • Define um identificador exclusivo (ID) que deve ser único por todo o documento. Seu objetivo é identificar o elemento ao navegar por âncoras (usando um identificador de fragmento), quando utilizar scripts ou estilizando (com CSS). O valor deste atributo é uma string opaca: isso significa que os desenvolvedores não devem utilizá-lo para transmitir nenhuma informação. Significados específicos como, por exemplo, significado semântico não devem ser provenientes desta string. O valor deste atributo não deve conter lacunas (espaços, tabulações etc.). Em contraste com o atributo class, que permite múltiplos valores separados por espaço, os elementos podem ter somente um único ID.
          • Exemplo: <nav id="menu"> </nav>
        • Um id só pode ser aplicado para um objeto ou elemento. Já o class pode ser aplicado para vários objetos. Ou seja, pode-se usar um id para um elemento e uma classe para vários elementos.
      • class
        • Define uma classe ou lista das classes de um elemento, separada por espaços. Classes permitem a CSS e Javascript selecionar e acessar elementos específicos através dos seletores de classe ou funções como o método DOM (document.getElementsByClassName). Permite múltiplos valores separados por espaços, é recomendado usar nomes que descrevam o propósito semântico do elemento, em vez de sua representação. Nomes baseados em semântica permanecem coerentes mesmo se a representação da página mude.
          • Exemplo: <figure class="foto-legenda"> </figure>

11. Seletores básicos

    • Seletor universal
      • * { } - Seleção de todos os elementos de qualquer tipo
      • ns|* { } - Seleção de todos os elementos no namespace ns
      • *|* { } - Seleção de todos os elementos
      • |* { } - Seleção de todos os elementos sem nenhum espaço de nome declarado
    • Seletor de tipo: elementname
      • Corresponde aos elementos pelo nome do nó. Em outras palavras, ele seleciona todos os elementos do tipo fornecido em um documento.
        • Exemplo: span { color:red; }
    • Seletor de classe: .classname
      • Corresponde aos elementos com base no conteúdo de seus atributos.class
        • Exemplo: <p class="red"> </p> - .red { color: red;}
          • Tb é possível selecionar uma imagem, tag, etc... que esta dentro da tag com essa classe: .foto-legenda img
            • Selecionou a(s) imagem(ns) de classe "foto-legenda"
    • Seletor de ID: #idname
      • Corresponde a um elemento com base no valor de seu id atributo.
        • Exemplo: <p id="demo"> </p> - #demo { color: blue;}
          • Tb é possível selecionar uma imagem, tag, etc... que esta dentro do id: #menu ul
    • Seletor de atributos: [attr=value]
      • Corresponde aos elementos com base na presença ou no valor de um determinado atributo.
        • [attr] Representa elementos com um nome de atributo de attr.
        • [attr=value] Representa elementos com um nome de atributo de attr cujo valor é exatamente value.
        • [attr~=value] Representa elementos com um nome de atributo de attr, cujo valor é uma lista de palavras separadas por espaços em branco, uma das quais é exatamente value.
        • [attr|=value] Representa elementos com um nome de atributo de attr cujo valor pode ser exatamente o value ou pode começar com o value imediatamente seguido por um hífen -(U + 002D). É frequentemente usado para correspondências de subcódigo do idioma.
        • [attr^=value] Representa elementos com um nome de atributo de attr cujo valor é prefixado (precedido) por value.
        • [attr$=value] Representa elementos com um nome de atributo de attr cujo valor é sufixo (seguido) por value.
        • [attr*=value] Representa elementos com um nome de atributo de attr cujo valor contém pelo menos uma ocorrência de value dentro da sequência.
        • [attr operator value i] A adição de um i(ou I) antes do colchete de fechamento faz com que o valor seja comparado sem distinção entre maiúsculas e minúsculas (para caracteres dentro do intervalo ASCII).
        • [attr operator value s] A adição de um s(ou S) antes do colchete de fechamento faz com que o valor seja comparado com distinção entre maiúsculas e minúsculas (para caracteres dentro do intervalo ASCII).

12. Pseudo-classe

    • :hover
      • Corresponde quando o usuário interage com um elemento com um dispositivo apontador, mas não necessariamente o ativa. Geralmente é acionado quando o usuário passa o mouse sobre um elemento com o cursor
      • Exemplo
        • figure.foto-legenda: hover figcaption { opacity: 1; }
          • Quando passar o mouse por cima vai disparar que a "figcaption" tem opacity = 1.
    • É uma palavra-chave adicionada a um seletor que especifica um estado especial do (s) elemento (s) selecionado (s).
    • :active
      • Representa um elemento (como um botão) que está sendo ativado pelo usuário. :active Ao usar o mouse, a "ativação" geralmente começa quando o usuário pressiona o botão principal do mouse.

13. Table

    • <caption> Título da tabela </caption>
    • <tr> table rows/ linhas </tr>
    • <td> table data/ células </td>
      • rowspan='2' - Essa célula irá ocupar 2 linhas
      • colspan='2' - Essa célula irá ocupar 2 colunas