Article image
Marília Pinheiro
Marília Pinheiro23/08/2023 19:43
Compartilhe

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:
    1. <html> → é a raiz do seu documento e todos os elementos html precisam estar contidos dentro dela;
    2. <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;
    3. <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
    1. <section> → uma seção genérica de conteúdo quando não houver um elemento mais específico para isso;
    2. <header> → o cabeçalho da página ou de uma seção da página;
    3. <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.;
    4. <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;
    5. <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;
    6. <p> → representa um paragrafo, mas suporta mais do que apenas texto, podendo conter, imagens, links vídeos e outros conteúdos;
    7. <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;
    8. <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;
    9. listas: 9.1 <ul> → lista não ordenada; 9.2 <ol> → lista ordenada;
    10. <h1> … <h6> → são os títulos do site, variando de tamanho, como podemos ver abaixo:
    • image
    • 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;

    image

    • 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:
    1. uppercase → todo texto em caixa alta;
    2. lowercase → caixa baixa;
    3. 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
    1. square → quadrado
    2. upper-roman → algarismo romano maiusculo
    3. \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
    Compartilhe
    Comentários (2)
    Leandro Paiva
    Leandro Paiva - 23/08/2023 20:34

    É exatamente isso. Muito esclarecedor.

    Parabéns .


    Jorge Santos
    Jorge Santos - 23/08/2023 19:56

    Ótimo artigo, parabéns!