Introdução ao HTML André Luiz Silva de Moraes Instituto Federal de Santa Catarina

Tamanho: px

Começar a partir da página:

Download "Introdução ao HTML André Luiz Silva de Moraes Instituto Federal de Santa Catarina"

Lara Jardim Wagner
7 Há anos
Visualizações:

1 Introdução ao HTML André Luiz Silva de Moraes

2 Hypertext Markup Language Linguagem de Marcação de Hipertexto Padroniza a Escrita do texto Permite que um navegador reconheça elementos para inserir em uma página Determina propriedades para os elementos da página 2

3 Desde a sua invenção, passou pelas modificações 1990 Criação de Hyperlinks ligando páginas em computadores diferentes HTML recebeu as versões 2 e 3 Criada a marcação para tabelas Surgem as versões 3.2, 4.0 e 4.01, sendo esta última utilizada até os dias atuais 2007 Surge o HTML versão 5.0 Incluiu várias necessidades dos navegadores modernos Diversos fabricantes de navegadores contribuem para o aprimoramento da linguagem 3

4 Um arquivo HTML é um arquivo de texto A diferença é a extensão.html no arquivo Mas ainda assim é um arquivo texto Pode ser editado com um editor simples de texto A padronização de elementos é denominada TAGS Uma TAG é um nome entre os sinais < e > <body>, <head>, <p>, <table> São exemplos de elementos 4

5 5

6 Atributo é uma configuração que pode ser alterada Atributos de um texto Cor, tamanho, tipo de letra Atributos de uma página Plano de fundo, margens O HTML permite que sejam alterados atributos de uma TAG Hoje isto é realizado pelo CSS (Cascading Style Sheets) 6

7 São configurações que podem modificar o comportamento de uma TAG Devem ser controlados pelo CSS (Cascading Style Sheets) O HTML antigo permitia e era comum alterar atributos diretamente no HTML Hoje não é uma forma prática de editar páginas 7

8 8

9 Existe uma estrutura padrão Sempre se repete Sem ela provavelmente a página não será exibida pelo navegador Qualquer página com esta estrutura será exibida no navegador 9

10 É uma extensão do HTML Originário da evolução das linguagens e consequentemente a difusão do uso de XML para atividades diversas XML? O HTML nasceu disto XML permite padronizar qualquer tipo de linguagem É utilizado para trocar informações entre diferentes aplicações Passou a integrar o HTML para inserir mais informações sobre cada página 10

11 11

12 Criar o layout das páginas É comum encontrar layouts prontos A maioria utiliza a tela dividida em colunas Colunas na vertical Colunas na horizontal Uma, duas ou três colunas Existem algumas formas de criar os layouts Com tabelas Com Frames Com Div s 12

13 Cabeçalho x navegação x duas colunas x rodapé Cabeçalho x duas colunas x rodapé 13

14 Cabeçalho x navegação esquerda x rodapé Exemplo de layout na prática 14

15 Tabelas Muitos ainda consideram a melhor forma de organizar o conteúdo Organiza o texto e as imagens Código fica confuso Não se adapta aos dispositivos que estão visualizando a página 15

16 Separam a página em partes independentes Cada parte é uma nova página Confuso de manipular Permite mostrar conteúdo estático e dinâmico simultaneamente 16

17 Fizeram parte da evolução dos layouts Se adaptam aos dispositivos que visualizam a página Permitem automatizar a sua aparência e posicionamento Requer um forte entendimento de posicionamento de elementos para serem utilizadas com total sucesso 17

18 CSS (Cascading Style Sheets) Utiliza uma linguagem diferente do HTML Continua o padrão de uso de atributos do HTML Utiliza o padrão de elemento, propriedade e valor Permite configurações diversas para vários elementos em várias páginas 18

19 19

20 Sempre teremos uma discussão sobre Layout Você sempre vai querer alterar a aparência da sua página É muito importante detalhar as cores antes de configurar a aparência dos elementos da página Cores são identificadas por nome, código RGB, código Hexadecimal Existem várias páginas que detalham escalas de cores que podem ser utilizadas, como exemplo: 20

21 HTML não é dinâmico Uma página dinâmica permite acessar dados também dinâmicos de outro computador HTML não faz isto É necessário o uso de outras linguagens Chamads de linguagens do lado Servdor 21

22 É melhor utilizar HTML 4.01 ou HTML 5? Não há tanta diferença entre as duas linguagens O que existe é uma ampliação e padronização das TAGS Também foram incluídas novas TAGS com novas funcionalidades HTML 5 é fácil de utilizar e é parecido com 4.01 Use HTML 5 quando necessitar 22

23 HTML é um arquivo texto Qualquer editor de texto pode ser utilizado Ex: Geany (linux), Notepad ++ (Windows) 23

24 Utilizar a marcação básica das TAGS <HTML>, <HEAD><BODY> Não esquecer de fechar as TAGS O arquivo deve ter a extensão.html Arquivos HTML podem ser abertos diretamente Sempre devem ser salvos no diretório.htdocs para serem visualizados no servidor Web (apache) 24

25 25

26 Site Maujor, disponível em Site W3Schools, disponível em 26

Documentos relacionados

Iniciando Layouts. No html5 existem algumas tags padrões para se iniciar Layouts. Estrutura Básica:

Iniciando Layouts. No html5 existem algumas tags padrões para se iniciar Layouts. Estrutura Básica: Aula 09 Iniciando Layouts No html5 existem algumas tags padrões para se iniciar Layouts. Estrutura Básica: header: é onde definimos o cabeçalho. nav: é onde definimos o menu ou a navegação do nosso site.