Baixe o app para aproveitar ainda mais
Prévia do material em texto
Aprenda HTML e CSS de CSS de forma fácil e divertida! Neste curso, você vai aprender a criar páginas da web incríveis, do zero, do zero, utilizando as tecnologias mais populares para desenvolvimento desenvolvimento front-end. by Paulo Odilon Introdução ao HTML O que é HTML? HTML é uma linguagem de marcação utilizada para criar páginas web. Como funciona? Cada tag HTML possui uma função função específica que representa representa um elemento na página. página. Por que usar? HTML é a base de toda a estrutura e conteúdo de qualquer site. Estrutura básica de uma página HTML Doctype e HTML Toda página HTML começa com o Doctype e a tag HTML. Head e Body Os conteúdos da página são divididos divididos entre o Head e o Body. Tags HTML A estrutura de uma página HTML é composta por várias tags. Tags de texto em HTML 1 Parágrafos A tag <p> é usada para criar parágrafos de texto. 2Cabeçalhos Os cabeçalhos, representados pelas tags <h1> até <h1> até <h6>, são utilizados para destacar títulos títulos e subtítulos. 3 Texto em destaque A tag <em> é usada para enfatizar o texto e a tag a tag <strong> para dar maior ênfase. Tags de imagem e links em HTML Tag <img> A tag <img> é utilizada para inserir imagens na página. Tag <a> A tag <a> é usada para criar links para outras páginas. Links em imagens As imagens também podem ser usadas usadas como links para outras páginas. páginas. Tags Semânticas 1 O que são? São tags HTML que possuem significado e estruturação semântica. 2 Exemplos <header>, <nav>, <main>, <main>, <section>, <article>, <aside>, <footer>. 3 Vantagens Melhoram a acessibilidade, a navegação e a indexação do conteúdo pelos mecanismos de busca. Layouts com Tags Semânticas 1 <header> e <footer> O <header> contém informações como títulos e títulos e links para outras páginas, e o <footer> <footer> informações adicionais. 2<nav> Usado para criar menus de navegação. 3 <section> e <article> <section> pode ser usada para dividir a página em página em seções e <article> para representar um representar um conteúdo independente. Modelos de Layouts Layout em Colunas Combinando tags semânticas, é possível criar layouts com colunas de colunas de conteúdo. Exemplo: <header>, <nav>, <section>, <section>, <article>, <aside>, <footer> <footer> Layout em Grade Usando CSS Grid, é possível criar layouts com uma grade de células. células. Exemplo: <div> com classe "grid- container" e várias <div> internas Layout Flexível Usando CSS Flexbox, é possível criar criar layouts flexíveis com alinhamento alinhamento e distribuição de elementos. Exemplo: <div> com classe "flex- container" e vários <div> internos internos Introdução ao CSS 1 O que é CSS? CSS é uma linguagem de estilo utilizada para modificar a aparência de elementos HTML. 2 Como funciona? Cada propriedade CSS é utilizada para alterar características específicas dos elementos HTML. 3 Por que usar? CSS permite personalizar o estilo de qualquer página, tornando tornando- - a mais atraente e profissional. a Estilizando elementos com CSS 1 Seletor de Elemento O seletor de elemento é usado para selecionar um selecionar um elemento HTML específico.2Seletor de Classe O seletor de classe é usado para estilizar um elemento HTML através de uma classe específica. específica. 3 Seletor de ID O seletor de ID é usado para selecionar um elemento HTML através do seu ID. Propriedades de CSS Propriedades de Texto Ex: font-size, font-weight, color, text-align. Propriedades de Fundo Ex: background-color, background- image, background-repeat. Propriedades de Borda Ex: border-style, border-width, border-color. Criando layouts responsivos com CSS Design Responsivo Significa que o layout da página é ajustado dinamicamente para se adaptar adaptar a diferentes tamanhos de tela. tela. Media Queries São utilizadas para aplicar diferentes diferentes estilos CSS de acordo com as com as características do dispositivo dispositivo utilizado para acessar a página. Flexbox O Flexbox é uma ferramenta do CSS que que permite criar layouts flexíveis que se que se adaptam aos diferentes tamanhos tamanhos de tela. Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12
Compartilhar