TEC. DESENVOLVIMENTO WEB Prof.: Jean Carlo Mendes

Páginas Web - Uma página web é um arquivo ou documento de texto gravado com a extensão.html ou.htm, cujo conteúdo é composto basicamente de texto e códigos de marcação, conhecidos como tags HTML. - Pode conter textos, imagens, vídeos, animações, sons, etc... - Conhecida como Home Page

Páginas Web - O acesso à páginas web é realizado através de programas conhecidos como navegadores (browsers) - IE, Firefox, Chrome, Opera, Safari, O navegador, conectado à internet, faz uma requisição ao servidor web (através do endereço – URL). O servidor processa o pedido e devolve o documento HTML.

Servidores Web

Navegadores - Browser

Navegadores – desktop - Mundo Fonte:

Navegadores – desktop - Brasil Fonte:

Navegadores – desktop - EUA Fonte:

Navegadores – mobile- mundo Fonte:

Navegadores – mobile- Brasil Fonte:

Navegadores – mobile- EUA Fonte:

Navegadores – tablet - mundo Fonte:

Navegadores – tablet - Brasil Fonte:

Navegadores – tablet - EUA Fonte:

O HTML - O HTML não é uma linguagem de programação. É uma linguagem de marcação - O HTML possuí um conjunto de tags - Uma página web é definida pelo conjuntos de tags associado ao texto da página. - Documentos HTML = Páginas Web

HTML - A estrutura de um documento básico em HTML deve conter as seguintes tags: - HTML  (Indica o início do documento) - HEAD  (Seção de cabeçalho) - BODY  Corpo do documento

HTML - As tags HTML (salvo algumas exceções) devem conter marcações de início e de fim. A marcação de fim é iniciada por uma barra “/” antes do nome da tag. - Exemplo: -

Exemplo de página Hello World!

HTML - Exercício: - Criar uma página Hello World (ver slide anterior) - Gravar em um arquivo hello.html - Abrir a página no navegador...

HTML - Acentuação - Alguns navegadores e SOs não conseguem lidar bem com caracteres acentuados escritos diretamente no documento HMTL. - Nestes casos é necessários informar a codificação do caracter especial - á  aacute; - â  acirc; - Ç  Ccedil; - Tabela de acentuação Tabela de acentuação

HTML - Cores - As cores devem ser definidas através de códigos hexadecimais, usando as definições de cores em RGB (Red, Green, Blue). Cada par de valor indica a intensidade da cor naquele canal. - Preto  # Branco  #FFFFFF - Azul  #0000FF - Tabela de cores Tabela de cores

HTML - Headings - Existem marcações (tags) especiais para textos de cabeçalhos. Estas tags são divididas por níveis. Cada nível é formatado de uma forma diferente (tamanho da fonte) - Cabeçalho Nível 1 - Cabeçalho Nível 2 - Cabeçalho Nível 3 - Cabeçalho Nível 4 - Cabeçalho Nível 5 - Exemplo Exemplo Cabeçalhos aceitam atributo de alinhamento...

HTML - Quebra de linhas - A quebra de linha em documentos HTML é feita através da tag. Esta tag não precisa de fechamento. - Exemplo: Esta é a primeira linha. Esta é a segunda linha. Esta é a terceira linha.

HTML - Formatação de parágrafos - Todo o corpo do documento HTML deve estar contido entre as tags e - O parágrafo é representado pela tag - Quando o navegador encontra uma tag ele avança uma linha e inicía a exibição na próxima linha

HTML - O parágrafo aceita atributo de alinhamento: Este texto será centralizado Este texto será alinhado à esquerda Este texto será justificado - Exemplo Exemplo

HTML - Textos também podem ser centralizados usando a tag - Exemplo: - - Este texto foi centralizado usando a tag center - - Exemplo Exemplo

HTML – Cor de fundo - A cor de fundo de uma página pode ser definida usando o atributo bgColor da tag - - Exemplo Exemplo - ** Observação. Este atributo está caindo em desuso. Será retirado na especificação final do HTML 5

HTML – Sobrescrito e Subscrito - Representados pelas tags e Fórmula da água é: H 2 O Einstein disse que: E = mc 2 Exemplo

HTML – Negrito e Itálico - Representados pelas tags e Este texto está em negrito Este texto está em itálico

HTML – Exercício Tente reproduzir, com o que sabe até o momento, a seguinte página Modelo - Crie variações da página desenvolvida acima, alterando-se as cores e formatações