Introdução ao HTML e CSS

HTML

A Agência Bgrid oferece uma introdução ao HTML (expressão inglesa HyperText Markup Language, traduzindo para português quer dizer Linguagem de Marcação de Hipertexto) que é a linguagem de programação utilizada na estrutura de um site, que pode ser acompanhada de uma outras linguagens como o PHP, Javascript e CSS, que é a linguagem que ajuda a estruturar a aparência do HTML no navegador do usuário.

HTML é resultado da "fusão" de dois padrões HyTime e SGML.

HyTime é um padrão para a representação estruturada de conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações.SGML é um padrão de formatação de textos.

MetaTags

Metatags, São códigos em html definidos em determinada página, Que descrevem o conteúdo do seu site para robôs de indexação e aplicações web. Entre eles estão os buscadores, Que buscam por Metatags pra dar detalhes do conteúdo do seu website.

Páginas da Web

Uma página web é uma "página" na world wide web, geralmente em formato HTML e com ligações de hipertexto que permitem a navegação de uma página, ou secção, para outra. As páginas web usam com frequência ficheiros gráficos associados para fins de ilustração, e também estes ficheiros podem ser ligações clicáveis. Por isso se usa HTML que permite todos estes recursos em uma só página ao mesmo tempo.

Ela pode ser crida por você que esta vendo esse artigo, e por uma agência de criação de site, como são as agências em desenvolvimento de site em Belo Horizonte.

Etiquetas (tags)

Todo documento HTML possui tags (ou etiquetas), palavras entre parênteses angulares (chevron) (< e >); essas tags são os comandos de formatação da linguagem. Um elemento é formado por um nome de etiqueta (tag), atributos, valores e filhos (que podem ser outros elementos ou texto). Os atributos modificam os resultados padrões dos elementos e os valores caracterizam essa mudança. Exemplo de um elemento simples (não possui filhos):

<tag atributo="valor"/>

Exemplo de um elemento composto (possui filhos):

<tag atributo="valor">Filho.</tag>

<tag> é a etiqueta de abertura
</tag> é a etiqueta de fechamento

Outro exemplo de elemento composto (possui filhos):

<p><font color="red" size="10">texto</font></p>

p = atributo que define um parágrafo
font = atributo que define a fonte
color = atributo que define a cor do texto
red = valor do atributo, que irá alterar a cor do texto
size = define o tamanho da fonte
/ = é a barra, define o fechamento do elemento

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o conteúdo que receberá a formatação ou marcação necessária, específica. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no documento

Cada elemento tem seus atributos possíveis e seus valores.

CSS - Cascading Style Sheets

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML, HTML5 ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.

Sintaxe CSS

CSS tem uma sintaxe simples e utiliza uma série de palavras em inglês para especificar os nomes de diferentes estilos de propriedade de uma página.

Uma folha de estilo consiste de uma lista de regras. Cada regra ou conjunto de regras consiste de um ou mais seletores e um bloco de declaração. Um declaração de bloco é composta por uma lista de declarações entre chaves. Cada declaração em si é uma propriedade, dois pontos (:), um valor, então um ponto e vírgula (;).^[1]

O CSS define o estilo de um elemento da página, Um elemento em HTML pode ser estilizado desse modo:


<style>
#elemento{
// Código CSS
} // fim do estilo denominado 'elemento'
elemento{ // Toda tag html chamada de elemento obtem o estilo CSS dessa parte.
color: #0E2377;
}

</style>

Pra podermos utilizar o efeito de estilo denominado na CSS, Somente em determinado elemento, Devemos utilizar #nome no código CSS. Assim para obter o estilo do elemento, Devemos utilizar por exemplo:

id="nome" = #nome do elemento dentro da tag <style> </style> que determina o estilo CSS da página.
<nome> Pra colocar um estilo CSS em toda tag com esse nome, Bastaria deixar somente o nome do elemento na tag <style></style> e denominar o estilo dentro do corpo da tag.

Exemplo:

<style>



elemento{ // Toda tag html chamada de elemento obtem o estilo CSS dessa parte.
color: #0E2377;
}

</style>

<div id="elemento"><h1>Okok</h1></div>
id= Denomina estilo do CSS.

Exemplo de definição CSS em um elemento fora do <style>:

<p><h1 style="font-family:magneto;">Olá Mundo!</h1></p>

h1 = Tamanho da letra
font-family: = Tipo de fonte, Magneto no exemplo.

Em CSS, seletores são usados para declarar a quais elementos de marcação um estilo se aplica, uma espécie de expressão correspondente. Os seletores podem ser aplicados a todos os elementos de um tipo específico, ou apenas aqueles elementos que correspondam a um determinado atributo; elementos podem ser combinados, dependendo de como eles são colocados em relação uns aos outros no código de marcação, ou como eles estão aninhados dentro do objeto de documento modelo.

Pseudo-classe é outra forma de especificação usada em CSS para identificar os elementos de marcação, e, em alguns casos, ações específicas de usuário para o qual um bloco de declaração especial se aplica. Um exemplo freqüentemente utilizada é o :hover pseudo-classe que se aplica um estilo apenas quando o usuário 'aponta para' o elemento visível, normalmente, mantendo o cursor do mouse sobre ele. Isto é anexado a um seletor como em a:hover ou #elementid:hover. Outras pseudo-classes e pseudo-elementos são, por exemplo, :first-line, :visited or :before. Uma pseudo-classe especial é :lang(c), "c".

Uma pseudo-classe seleciona elementos inteiros, tais como :link ou :visited, considerando que um pseudo-elemento faz uma seleção que pode ser constituída por elementos parciais, tais como :first-line ou :first-letter.

Seletores podem ser combinados de outras formas também, especialmente em CSS 2.1, para alcançar uma maior especificidade e flexibilidade. ^[2]

Aqui está um exemplo que resume as regras acima:

selector [, selector2, ...][:pseudo-class] {
  property: value;
 [property2: value2;
  ...]
}
/* comment */

Tags CSS

Editores HTML

É com eles que iremos mais trabalhar, aconselho Adobe Dreamweaver e Notepad++

Referências

HTML: Fale a Linguagem da Internet. 1.ed. Maringá - PR: Independente, 1997. 50 p. 500 v. v. 1.

[1] Predefinição:Cite web

[2] see the complete definition of selectors at the W3C Web site.

[1]

[2]