HTML 5 e CSS 3
- Introdução a Criação de Websites com HTML5 e CSS3Introdução ao HTML 5
- Não dizemos que o HTML é uma linguagem de programação já que ela não possui capacidade para executar lógica ou algoritmos e sim uma linguagem de marcação, o que quer dizer que ela é utilizada para estruturar e formatar o conteúdo de páginas web.
- Tags obrigatórias:
- <html> → é a raiz do seu documento e todos os elementos html precisam estar contidos dentro dela;
- <head> → contém os elementos que serão lidos pelo navegador, e contem as tags de links para outros elementos que vão interferir no layout da página web, como links para o CSS e para o JavaScript;
- <body> → onde vai ficar todo o conteúdo visível ao usuário da página, como textos, imagens e todo o resto;
- Semântica
- A semântica no HTML5 refere-se ao uso de elementos de marcação que expressam significado estrutural e funcional do conteúdo web, melhorando a compreensão tanto para os navegadores quanto para os desenvolvedores. Você pode se perguntar em que diretamente isso afeta o código, e acredite afeta bastante já que a utilização adequada de elementos semânticos no código HTML não apenas melhora a estrutura do site para facilitar sua interpretação pelos mecanismos de busca, mas também contribui para a acessibilidade, usabilidade e, consequentemente, pode influenciar positivamente o rankeamento nos resultados de pesquisa.
- Tags
- <section> → uma seção genérica de conteúdo quando não houver um elemento mais específico para isso;
- <header> → o cabeçalho da página ou de uma seção da página;
- <article> → representa um conteúdo independente e de maior relevância dentro de uma página, como um post de blog, uma notícia etc.;
- <aside> → seção que engloba conteúdos relacionados ao conteúdo principal, como artigos relacionados, biografia do autor e publicidade. Normalmente são representadas como barras laterais, por isso o nome aside;
- <footer> → o rodapé do conteúdo, podendo ser rodapé do site principal ou da tag onde ele estiver contido, como o article ou o aside;
- <p> → representa um paragrafo, mas suporta mais do que apenas texto, podendo conter, imagens, links vídeos e outros conteúdos;
- <a> → link, que precisa receber a atribuição href=”” com o endereço do link que você deseja que o usuário acesse ao clicar no conteúdo, e a atribuição target=”_blank” apesar de não obrigatória é importante já que o usuário vai acessar esse link em uma nova aba;
- <img> → insere imagem, e a atribuição src=”” é obrigatória já que indica o endereço da imagem que vai ser mostrada a o usuário, outra atribuição é o alt=”” que apesar de não ser obrigatória é altamente recomendada por dois motivos principais, o primeiro é acessibilidade dos usuários e o segundo motivo é a para que os ajuda os mecanismos de busca possam entender melhor o contexto da imagem e pode melhorar a classificação nos resultados de pesquisa, outra atribuição é o tittle=”” que vai adicionar um texto para quando o usuário passar o mouse por cima da imagem;
- listas: 9.1 <ul> → lista não ordenada; 9.2 <ol> → lista ordenada;
- <h1> … <h6> → são os títulos do site, variando de tamanho, como podemos ver abaixo:
- Introdução ao CSS 3
- Estilizando elementos
- O que são seletores? elementos html (seletores de tipo)
- recebem declarações que são propriedades e valores
- exemplo:
- color: red (color é propriedade, red é valor)
- font-size: 14px
- Classes e ids também são seletores
- padding → espaçamento interno, entre o box e o conteúdo dele;
- margin → espaçamento entre elementos , por exemplo entre o box e outro elemento relativo a ele;
- Estilizando textos
- font-family → o tipo da fonte;
- font-size → o tamanho da fonte;
- font-style → a aparência do texto, itálico, negrito etc.
- font-weight → peso do texto;
- text-transform:
- uppercase → todo texto em caixa alta;
- lowercase → caixa baixa;
- capitalize → primeira letra de todas as palavras no maiúsculo;
- background →
- shorthand de border: largura estilo e cor;
- border-radius um valor altera tudo, mas segue a mesma ordem do padding e margin;
- top right bottom e left
- Estilizando listas
- list-style-type
- square → quadrado
- upper-roman → algarismo romano maiusculo
- \1f44D → simbolo
- list-style-image → url da imagem
- Propriedades de dimensões e alinhamento
- width → largura;
- height → altura;
- max-widht → largura máxima;
- max-height → altura máxima;
- min-width → largura mínima;
- min-height → altura mínima;
- margin → margem;
- text align → alinhamento do texto