Introdução à Linguagem HTML: Guia Completo para Iniciantes, Manuais, Projetos, Pesquisas de Desenvolvimento de Aplicações para Internet

Baixe Introdução à Linguagem HTML: Guia Completo para Iniciantes e outras Manuais, Projetos, Pesquisas em PDF para Desenvolvimento de Aplicações para Internet, somente na Docsity!

Programação para Internet

Módulo 2

Introdução à Linguagem HTML

Prof. Dr. Daniel A. Furtado

Universidade Federal de Uberlândia

Faculdade de Computação

 HTML – Hypertext Markup Language

• Linguagem de marcação de hipertexto usada para

desenvolver páginas web;

• Permite a elaboração da estrutura da página web,

incluindo a definição de tabelas, títulos, links , figuras,

vídeos, etc.

• Páginas web são conectadas com outras páginas

através de hiperlinks;

• Desenvolvida e supervisionada pela W3C;

• Arquivo com a extensão .html ou .htm

• Um documento em HTML é interpretado e

apresentado por um programa navegador, como o

Google Chrome ou o Mozilla Firefox.

Programação para Internet 2

HTML - Introdução

Hipertexto

Prof. Dr. Daniel A. Furtado

 1991: Berners-Lee apresenta seu sistema de hipertexto para a

comunidade científica (surgimento do HTML);

 1994: HTML2;

 1999: HTML4.01;

 2000: XHTML - eXtensible Hypertext Markup Language

• Reformulação da HTML, baseada em XML

 2012: HTML5 se torna uma recomendação candidata da W3C

 2014: HTML5 é recomendada pela W3C

Programação para Internet 4

HTML – Breve Histórico

Prof. Dr. Daniel A. Furtado

 Uma página HTML é composta normalmente por um conjunto de elementos HTML;

 Cada elemento HTML desempenha uma função própria dentro da página, como exibir

um link ou criar um título;

 Os elementos HTML são inseridos utilizando os caracteres ‘<‘ e ‘>’, formando o que é

conhecido como tag;

 A primeira tag é chamada tag de abertura; a segunda é a tag de fechamento ;

 Entre a tag de abertura e a tag de fechamento está o conteúdo do elemento;

 A tag de fechamento é escrita utilizando uma barra antes do nome da tag;

 Os elementos HTML podem conter atributos para definir características particulares do

elemento. Exemplo:

Programação para Internet 5

Elementos HTML

UFU

Nome do elemento

Atributo

Valor do atributo

Conteúdo do elemento

Tag de fechamento do

elemento

Prof. Dr. Daniel A. Furtado

OBS: alguns elementos HTML não possuem conteúdo e não utilizam a tag de fechamento. O

elemento
é um exemplo. Ele é utilizado para inserir uma quebra de linha.

 O atributo lang do elemento é utilizado para definir o idioma da página HTML. Tal informação pode ser utilizada, por exemplo, por buscadores (como o Google) de acordo com o idioma de busca definido pelo usuário;  O atributo charset do elemento define o tipo de codificação dos caracteres da página. O formato UTF-8 suporta vários tipos de caracteres, incluindo caracteres especiais do português, como cedilhas e acentos;  O elemento

• Define o título que aparece na aba do navegador;
• Fornece o título para a página quando ela é adicionada para as páginas favoritas;
• Mostra um título para a página nos resultados dos sites de busca; Programação para Internet (^) Prof. Dr. Daniel A. Furtado 7 Idioma, Codificação e Título da Página

Programação para Internet (^) Prof. Dr. Daniel A. Furtado 8

Primeira Página HTML

Sitemas de Informação

**O Curso de** **Sistemas de Informação** **da** **UFU** **tem como objetivo ...**

**O estudante em horário integral terá a oportunidade...**

**Da Carreira**

**Algumas possibilidades de carreira oferecidas pelo curso são:**

Gerente de Projetos ( Project Manager )
Programador Administrador de Banco de Dados

Das Disciplinas

**Algumas das disciplinas do currículo do curso são:**

Programação Procedimental Estruturas de Dados Programação para Internet

A Universidade

Página HTML Exemplo 1

 Alguns servidores Web, como o Apache HTTP no Linux, são sensíveis à caixa e portanto fazem distinção entre maiúsculas e minúsculas. Nesses servidores, image.jpg não pode ser acessado como Image.jpg;  Entretanto há outros servidores, como o Microsoft IIS, que não são sensíveis à caixa. Neste caso, image.jpg poderia ser acessado tanto como Image.jpg ou image.jpg;  Para evitar problemas, utilize sempre letras minúsculas nos nomes de arquivos (se possível), pois assim o arquivo será adequadamente encontrado, independentemente do servidor web utilizado. Programação para Internet (^) Prof. Dr. Daniel A. Furtado 10 Dica : Utilize letras minúsculas em nomes de arquivos

Adaptado de w3schools.com

 O consórcio W3C oferece um serviço gratuito de validação de

páginas em HTML5;

 Acesse validator.w3.org  ”validate by file upload” e utilize o

serviço para verificar a sintaxe do arquivo anterior;

 Realizar tal validação garante que a sintaxe utilizada está de

acordo com os padrões definidos pela W3C, reduzindo as

chances de incompatibilidade com alguma versão de navegador

de Internet.

Programação para Internet 11

Validação da Página HTML

Prof. Dr. Daniel A. Furtado

Dica1: Como exercício, faça a validação da página do exemplo anterior

(anexos/HTML-Exemplo01.html)

Dica2: Após realizar a validação, insira um atributo de nome inexistente no elemento (por

exemplo, ) e refaça a validação

Programação para Internet 13 Alguns Elementos de Formatação de Texto

TAGs Descrição/Exemplo

Coloca o texto em negrito (sem adicionar importância).

Ex: Este texto aparecerá em negrito

Coloca o texto em negrito, adicionando significado de “ forte importância “ (Esta semântica

pode ser utilizada por buscadores, por exemplo).

Ex:

o curso de Sistemas de Informação é...

Coloca o texto em itálico (sem adicionar importância).

Ex: Este texto aparecerá em itálico

Coloca o texto em itálico, mas adicionando significado de ênfase.

Ex: Texto enfatizado

Coloca o texto sublinhado ( underline )

Ex: Texto sublinhado

Coloca o texto subscrito.

Coloca o texto sobrescrito.

Define o texto como “removido” ou “riscado”.

Prof. Dr. Daniel A. Furtado

Listas em HTML Programação para Internet (^14)

Tópico com marcador

Tópico com marcador

Tópico com marcador

Tópico com marcador

Lista com marcadores: um marcador é

exibido antes de cada tópico;

Lista numerada: os tópicos da lista são

numerados automaticamente.

Prof. Dr. Daniel A. Furtado

Tópico 1

Tópico 2

Tópico 3

Tópico 4

Resultado

Resultado

DICA: Listas não devem ser inseridas como conteúdo de parágrafos (não coloque ou

dentro de

). Como exercício, insira dessa forma e faça a validação em validator.w3.org )

Há três formas de definir cores em HTML/CSS:

1. Utilizando nomes de cores pré-definidas, como green, white, etc.

Lista de nomes suportados: http://www.w3schools.com/colors/colors_names.asp

2. Indicando, por meio de um número decimal de 0 a 255, a intensidade de cada

cor base: rgb( red , green , blue ). Exemplo:

3. Indicando a intensidade de cada cor base utilizando dígitos hexadecimais

seguidos do caractere

Explore a combinação de cores por meio da página a seguir:

http://www.w3schools.com/html/html_colors.asp

Cores em HTML/CSS Programação para Internet (^) Prof. Dr. Daniel A. Furtado 16

 Um _elemento de bloco_ começa sempre com uma **_quebra de linha_** e ocupa toda a largura disponível. Exemplos:

• , , ...,
• -

  -

  - , ,  Um _elemento de linha_ não começa com quebra de linha e ocupa somente a largura necessária para sua exibição. Exemplos: - - - - - Elementos de Bloco x Elementos de Linha Programação para Internet (^) Prof. Dr. Daniel A. Furtado 17

Tabelas em HTML Programação para Internet (^19)

TAGs Descrição/Exemplo

Cria uma nova tabela

table row

Utilizada para criar uma nova linha na tabela

table data

Utilizada para criar uma célula padrão dentro de uma linha

table head

Utilizada para criar uma célula de cabeçalho dentro de uma linha

Insere um título na tabela

,

,

Define, respectivamente, seções de cabeçalho, corpo e rodapé dentro da tabela.

Prof. Dr. Daniel A. Furtado

As tags mais utilizadas para criação de tabelas são , e

Programação para Internet (^) Prof. Dr. Daniel A. Furtado 20

Tabela simples

Aluno
Prova 1
Prova 2

Marcelo 28,5 19,0

Juliana 17,0 23,5

Tabelas em HTML – Exemplo 1

DICA: os atributos border e width definem,

respectivamente, a largura da borda da tabela e a

largura da tabela em si com relação à largura da página.

Entretanto, tais atributos são considerados obsoletos e

foram utilizados aqui por conveniência, para que o

leitor tenha uma melhor percepção da tabela.

Resultado: