HTML e CSS: Introdução à linguagens

HTML E CSS Max Rosan
<max.rosan@ymail.com>

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”, mas
manter os parágrafos.
É possível então fazer o
aninhamento das tags <p> e
<strong> ou qualquer
outra 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.

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.

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 é 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.

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 pode ser colocado também dentro
do 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: 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: Introdução à linguagens

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML e CSS: Introdução à linguagens

Semelhante a HTML e CSS: Introdução à linguagens (20)

Último

Último (7)

HTML e CSS: Introdução à linguagens