Introdução HTML_CSS.pptx
- 2. HTML HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. O HTML usa "Marcação" para anotar texto, imagem e outros conteúdos para exibição em um navegador da Web. Por exemplo, o conteúdo pode ser estruturado em parágrafos, em uma lista com marcadores ou usando imagens e tabelas.
- 3. Marcação (Tags) A marcação HTML inclui "elementos" especiais, como: ● <head>, <body> ● <header>, <footer>, <article>, <section> ● <p>, <div>, <nav> ● <img>, <audio>, <canvas>, <video> ● <ul>, <ol>, <li>,
- 4. Marcação (Tags) Um elemento HTML é separado de outro texto em um documento por "tags", que consistem no nome do elemento entre "<" e ">". O nome de um elemento dentro de uma tag pode ser escrito em maiúsculas, minúsculas ou um mistura. Por exemplo, a tag <title> pode ser escrita como <Title>, <TITLE> ou de qualquer outra forma.
- 5. Anatomia de um elemento HTML
- 6. Anatomia de um elemento HTML As principais partes de um elemento são: 1. A tag de abertura: Consiste no nome do elemento (no caso, p), envolvido em parênteses angulares de abertura e fechamento. Isso demonstra onde o elemento começa, ou onde seu efeito se inicia, nesse caso, onde é o começo do parágrafo. 2. A tag de fechamento: Isso é a mesma coisa que a tag de abertura, exceto que inclui uma barra antes do nome do elemento. Isso demonstra onde o elemento acaba, nesse caso, onde é o fim do parágrafo. Esquecer de incluir uma tag de fechamento é um dos erros mais comuns de iniciantes e pode levar a resultados estranhos. 3. O conteúdo: Esse é o conteúdo do elemento, que nesse caso é apenas texto. 4. O elemento: A tag de abertura, a de fechamento, e o conteúdo formam o elemento.
- 7. Anatomia de um elemento HTML
- 8. Anatomia de um elemento HTML Elementos também podem ter atributos, que parecem assim: Atributos contém informação extra sobre o elemento que você não quer que apareça no conteúdo real. Aqui, class é o nome do atributo e editor-note é o valor do atributo. O atributo class permite que você forneça ao elemento um identificador que possa ser usado posteriormente para aplicar ao elemento informações de estilo e outras coisas. Um atributo sempre deve ter: 1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um). 2. O nome do atributo, seguido por um sinal de igual. 3. Aspas de abertura e fechamento, envolvendo todo o valor do atributo.
- 9. CSS CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua página Web. Assim como o HTML, o CSS não é realmente uma linguagem de programação. Também não é uma linguagem de marcação, é uma linguagem de folhas de estilos. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML.
- 10. CSS Para que o CSS funcione, precisamos aplicá-lo no seu documento HTML. Do contrário, o estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento HTML.
- 11. CSS Por exemplo, para selecionar todos os elementos parágrafo de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este CSS
- 12. Anatomia do CSS A estrutura como um todo é chamada de conjunto de regras (ou apenas"regra"). Note os nomes das partes individuais: ● Seletor (Selector) - O nome do elemento HTML no começo do conjunto de regras. Ele seleciona o(s) elemento(s) a serem estilizados (nesse caso, elementos <p>). Para dar estilo a um outro elemento, é só mudar o seletor. ● Declaração (Declaration) - Uma regra simples como color: red; especificando quais das propriedades do elemento você quer estilizar. ● Propriedades (Property) - Forma pela qual você estiliza um elemento HTML. (Nesse caso, color é uma propriedade dos elementos <p>.) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra. ● Valor da propriedade (Property value) - À direita da propriedade, depois dos dois pontos, nós temos o valor de propriedade, que escolhe uma dentre muitas aparências possíveis para uma determinada propriedade (há muitos valores color(cor) além do red(vermelho)).
- 13. Anatomia do CSS Note outras partes importantes da sintaxe: ● Cada linha de comando deve ser envolvida em chaves ({}). ● Dentro de cada declaração, você deve usar dois pontos (:) para separar a propriedade de seus valores. ● Dentro de cada conjunto de regras, você deve usar um ponto e vírgula (;) para separar cada declaração da próxima.
- 14. Sintaxe CSS Para modificar múltiplos valores de propriedades de uma vez, você deve escrevê-los separados por ponto e vírgula, desse modo
- 15. Sintaxe CSS Você também pode selecionar vários tipos de elementos e aplicar um único conjunto de regras a todos eles. Inclua múltiplos seletores separados por vírgulas.
- 16. Sintaxe CSS Nome do seletor O que ele seleciona Exemplo Seletor de elemento (às vezes, chamado tag ou seletor de tipo) Todos os elementos HTML de determinado tipo. p Seleciona <p> Seletor de ID O elemento na página com o ID especificado. Em uma determinada página HTML, é uma boa prática usar um elemento por ID (e claro, um ID por elemento) mesmo que seja permitido usar o mesmo ID para vários elementos. #my-id Seleciona <p id="my-id"> ou <a id="my-id"> Seletor de classe O(s) elemento(s) na página com a classe especificada (várias instâncias de classe podem aparecer em uma página). .my-class Seleciona <p class="my-class"> e <a class="my-class">
- 17. Caixas, caixas, é tudo sobre caixas Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas, indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página podem ser pensados como caixas umas em cima das outras.
- 18. Caixas, caixas, é tudo sobre caixas Como esperado, o layout CSS é baseado principalmente no modelo de caixas. Cada um dos blocks que ocupam espaço na sua página tem propriedades como essas: ● padding, o espaço ao redor do conteúdo (ex.: ao redor do texto de um parágrafo). ● border, a linha sólida do lado de fora do padding. ● margin, o espaço externo a um elemento.
- 19. Mais algumas propriedades ● width (largura de um elemento). ● background-color, a cor atrás do conteúdo de um elemento e do padding. ● color, a cor do conteúdo de um elemento (geralmente texto). ● text-shadow: cria uma sombra no texto dentro de um elemento. ● display: define a maneira de dispor um elemento.
- 21. É hora de praticar ● Identifique quais Tags estão sendo utilizadas nesta página. ● Como poderia mudar a cor do título da página utilizando CSS? ● Tente reproduzir a página substituindo a imagem.