Embed Size (px)
Citation preview
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.
HTML
É possível por elementos dentro de outros elementos = aninhamento.
Quero enfatizar “bom”, masmanter os parágrafos.
É possível então fazer oaninhamento das tags <p> e<strong> ou qualqueroutra tag.
HTML
Geralmente os elementos são cercados por uma tag abrindo e fechando. Mas há exceções:
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.
HTML
O elemento <html> é considerado o elemento raiz e deve
englobar todo o conteúdo da página.
HTMLO 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.
HTML
Esse elemento define character set que vai ser usado no
documento. O set utf-8 é suficiente para maioria das
línguas.
HTML
<title> define o título que vai aparecer na tab do browser
ou nos favoritos.
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.
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:
HTML: CABEÇALHOS E PARÁGRAFOS
Maioria dos documentos é estruturadacom cabeçalhos, parágrafos e listas.
Com HTML é possível representar todasessas estruturas.
Parágrafos: <p>
Cabeçalhos: <h1>, <h2>, <h3>, etc.
HTML: CABEÇALHOS E PARÁGRAFOS
As tags <h1>, <h2>, etc. Devem ser
usadas de acordo com uma hierarquia.
HTML: LISTAS
Listas não-ordenadas são representadas pelas tags <ul> e <li>
Listas ordenadas, ou numeradas, são representadas por <ol>
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>.
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.
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
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.
CSS
O arquivos CSS são referenciados pela tag <link> dentro de <head>.
O CSS acima modifica todos os elementos com <h1> e <p>.
CSS
CSS
CSS pode ser colocado também dentrodo HTML.
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.
CSS
Propriedades e seus valores são case-sensitive!
Há mais de 300 propriedades no CSS.
CSS
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 )
CSS: SELETORES E IDENTIFICADORES
E se quiser modificar somente alguns elementos em específico ?Tem que usar identificadores ( atributo id ).
CSS: SELETORES E CLASSES
É possível também definir uma classe de elementos nos quais o estilo vai ser aplicado.
HTML E CSS
Dúvidas ?
