Html e css
- 1. HTML E CSS Max Rosan <max.rosan@ymail.com>
- 2. HTML HTML (HyperText Markup Language) = Linguagem de marcação de hipertexto. Não é uma linguagem de programação (não tem estruturas de if-else, variáveis, etc. ) É utilizado para estruturar documentos, pouco diz sobre o estilo do documento. HTML é usado para descrever a semântica do documento. Consiste em uma série de elementos, cercados por tags, usados para descrever a ação ou a organização de algo. A tag <p> é usada aqui para definir um parágrafo.
- 3. HTML É possível por elementos dentro de outros elementos = aninhamento. Quero enfatizar “bom”, mas manter os parágrafos. É possível então fazer o aninhamento das tags <p> e <strong> ou qualquer outra tag.
- 4. HTML Geralmente os elementos são cercados por uma tag abrindo e fechando. Mas há exceções:
- 5. HTML Alguns elementos formam a estrutura básica de qualquer página: Nas versões mais antigas do HTML essa tag definia regras que o código em HTML devia seguir para ser validado. Hoje em dia não é mais tão importante e só identifica que é um documento HTML.
- 6. HTML O elemento <html> é considerado o elemento raiz e deve englobar todo o conteúdo da página.
- 7. HTML O elemento <head> funciona como um container para tudo que não for ser exibido na página. Por exemplo: • Keywords para mecanismos de busca; • Código CSS para mudar a aparência da página; • Definição character set; • Código de script; • Etc.
- 8. HTML Esse elemento define character set que vai ser usado no documento. O set utf-8 é suficiente para maioria das línguas.
- 9. HTML <title> define o título que vai aparecer na tab do browser ou nos favoritos.
- 10. HTML <body> contém todo o conteúdo que vai ser exibido para o usuário no browser, como texto, imagem, vídeo, formulários, etc.
- 11. HTML: ESPAÇOS E CARACTÉRES ESPECIAIS Os intepretadores de HTML vão reduzir qualquer sequência de espaços para um espaço em branco. Alguns caractéres fazem parte da linguagem e devem ser evitados ou substituídos por códigos especiais:
- 12. HTML: CABEÇALHOS E PARÁGRAFOS Maioria dos documentos é estruturada com cabeçalhos, parágrafos e listas. Com HTML é possível representar todas essas estruturas. Parágrafos: <p> Cabeçalhos: <h1>, <h2>, <h3>, etc.
- 13. HTML: CABEÇALHOS E PARÁGRAFOS As tags <h1>, <h2>, etc. Devem ser usadas de acordo com uma hierarquia.
- 14. HTML: LISTAS Listas não-ordenadas são representadas pelas tags <ul> e <li> Listas ordenadas, ou numeradas, são representadas por <ol>
- 15. HTML: TEXTO Destacar trechos de texto ou dar ênfase: <strong> e <em>. Nas versões mais antigas do HTML e dos browsers, o suporte ao CSS era ruim. O que levou a criação de tags para definir o estilo do texto: <b>, <i> e <u>.
- 16. HTML: MÍDIA Mídia na Web se define por vídeos, imagens, áudios, e animações. Imagens são definidas pela tag img: É possível adicionar, vídeos, aúdios, etc.
- 17. HTML: HYPERLINK Hyperlink (link) talvez seja o que levou a Web e o HTML ao sucesso. Permite a apontamento entre diferentes documentos, fazendo possível a navegação. Os links são criados pelas tags <a>: href: endereço para onde aponta o link title: descrição do link entre as tags: texto do link
- 18. CSS CSS = Cascading Style Sheets HTML define a semântica, a estrutura. O CSS define a aparência, o estilo do documento. Um CSS é definido por um conjuto de regras, que são usadas pelo browser para modificar o documento/HTML. Cada regra tem: Propriedades: definem como os elementos devem ser apresentados; Seletor: define quais elementos devem ser modificados.
- 19. CSS O arquivos CSS são referenciados pela tag <link> dentro de <head>. O CSS acima modifica todos os elementos com <h1> e <p>.
- 20. CSS
- 21. CSS CSS pode ser colocado também dentro do HTML.
- 22. CSS Basicamente, CSS consiste na definição de propriedades dos elementos e seus valores. Essas propriedades definem a aparência dos elementos. Esses blocos com propriedades sendo definidas são chamados de declarações.
- 23. CSS Propriedades e seus valores são case-sensitive! Há mais de 300 propriedades no CSS.
- 24. CSS
- 25. CSS: TEXTOS Com CSS, é possível mudar a fonte, a cor e o tamanho dos textos. Cor do primeiro plano Define a fonte do texto ( depende do suporte do browser ) Tamanho do texto em pixels. ( emS dá o tamanho em relação ao elemento pai ) Estilo ( normal, italic, oblique ) Nitidez do texto ( bold, normal, bolder, ligther, etc. ) Decoração ( overline, underline, line-through, none )
- 26. CSS: SELETORES E IDENTIFICADORES E se quiser modificar somente alguns elementos em específico ? Tem que usar identificadores ( atributo id ).
- 27. CSS: SELETORES E CLASSES É possível também definir uma classe de elementos nos quais o estilo vai ser aplicado.
- 28. HTML E CSS Dúvidas ?