Aula 6

Prévia do material em texto

Tecnologia para Internet I
Aula 2
Vidal. Ronnison Reges1
1Ana´lise e Desenvolvimento de Sistemas - Parangaba
Centro Universita´rio Esta´cio do Ceara´
2018
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 1 / 19
DROPBOX
https://goo.gl/.....
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 2 / 19
ROTEIRO
1 INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
Atributos de uma TAG
Uma breve definic¸a˜o de CSS
DOM
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 3 / 19
ROTEIRO
1 INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
Atributos de uma TAG
Uma breve definic¸a˜o de CSS
DOM
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 4 / 19
E´ o elemento que compo˜em a estrutura do documento HTML5, este
elemento e´ iniciado com o s´ımbolo menor ( ) e terminado com o
s´ımbolo maior ( ), como por exemplo:
doctype , html , div , etc .Assa˜odivididasconformecategoriasabaixo :
O elemento root
metadados
Script
sec¸o˜es
agrupamento de conteu´do
Semaˆnticas de n´ıvel de texto
Edic¸o˜es
Conteu´do incorporado
Tabelas
Formula´rios
Interativo
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 5 / 19
INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
Estrutura Ba´sica
Figure: Estrutura ba´sica do HTML
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 6 / 19
INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
!DOCTYPE
O Doctype indica para o navegador e para outros meios qual a
especificac¸a˜o de co´digo utilizar. Em verso˜es anteriores, era necessa´rio
referenciar o DTD diretamente no co´digo do Doctype. Com o HTML5,
a refereˆncia por qual DTD utilizar e´ responsabilidade do Browser.
O Doctype na˜o e´ uma tag do HTML, mas uma instruc¸a˜o para que o
browser tenha informac¸o˜es sobre qual versa˜o de co´digo a marcac¸a˜o foi
escrita.
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 7 / 19
INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
Meta
Metadados sa˜o dados (informac¸o˜es) sobre dados.
A marca ¡meta¿ fornece metadados sobre o documento HTML. Os
metadados na˜o sera˜o exibidos na pa´gina, mas sera˜o analisa´veis por
ma´quina.
Os elementos meta normalmente sa˜o usados para especificar a
descric¸a˜o da pa´gina, as palavras-chave, o autor do documento, a
u´ltima modificac¸a˜o e outros metadados.
Os metadados podem ser usados por navegadores (como exibir
conteu´do ou recarregar pa´gina), motores de busca (palavras-chave) ou
outros servic¸os da Web.
O HTML5 introduziu um me´todo para permitir que os web designers
assumissem o controle sobre a viewport (a a´rea vis´ıvel do usua´rio de
uma pa´gina da web), atrave´s da marca ¡meta¿.
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 8 / 19
INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
Link
Ha´ dois tipos de links no HTML: a tag A, que sa˜o links que levam o
usua´rio para outros documentos e a tag LINK, que sa˜o links para
fontes externas que sera˜o usadas no documento
No nosso exemplo ha´ uma tag LINK que importa o CSS para nossa
pa´gina:
¡link rel=”stylesheet” type=”text/css” href=”estilo.css” ¿
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 9 / 19
ROTEIRO
1 INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
Atributos de uma TAG
Uma breve definic¸a˜o de CSS
DOM
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 10 / 19
INTRODUC¸A˜O AO HTML5
Atributos de uma TAG
Uma TAG pode conter atributos, que sa˜o informac¸o˜es que alteram o
comportamento da TAG. Os atributos podem ser divididos em
atributos espec´ıficos para cada TAG e atributos globais que sa˜o
comuns a todas as tags.
Ale´m das TAGs, existem outros elementos que ajudam na construc¸a˜o
de documentos HTML5, que sa˜o: o CSS, o Javascript.
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 11 / 19
INTRODUC¸A˜O AO HTML5
Atributos de uma TAG
lang=”pt-br”
O atributo LANG e´ necessa´rio para que os user-agents saibam qual a
linguagem principal do documento.
Lembre-se que o atributo LANG na˜o e´ restrito ao elemento HTML, ele
pode ser utilizado em qualquer outro elemento para indicar o idioma do
texto representado.
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 12 / 19
INTRODUC¸A˜O AO HTML5
Atributos de uma TAG
charset=”UTF-8”
A Web e´ acessada por pessoas do mundo inteiro. Ter um sistema ou
um site que limite o acesso e pessoas de outros pa´ıses e´ algo que vai
contra a tradic¸a˜o e os ideais da internet. Por isso, foi criado uma
tabela que suprisse essas necessidades, essa tabela se chama Unicode.
A tabela Unicode suporta algo em torno de um milha˜o de caracteres.
Ao inve´s de cada regia˜o ter sua tabela de caracteres, e´ muito mais
sensato haver uma tabela padra˜o com o maior nu´mero de caracteres
poss´ıvel. Atualmente a maioria dos sistemas e browsers utilizados por
usua´rios suportam plenamente Unicode. Por isso, fazendo seu sistema
Unicode voceˆ garante que ele sera´ bem visualizado aqui, na China ou
em qualquer outro lugar do mundo
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 13 / 19
INTRODUC¸A˜O AO HTML5
Atributos de uma TAG
rel
O atributo rel=”stylesheet” indica que aquele link e´ relativo a
importac¸a˜o de um arquivo referente a folhas de estilo
type
O tipo de arquico a ser importado
href
Indica a fonte a ser importada.
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 14 / 19
ROTEIRO
1 INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
Atributos de uma TAG
Uma breve definic¸a˜o de CSS
DOM
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 15 / 19
INTRODUC¸A˜O AO HTML5
Uma breve definic¸a˜o de CSS
E´ uma abreviac¸a˜o do termo Cascading Style Sheet (Folhas de Estilo
em Cascata). O CSS permite, de uma forma simples, a a utilizac¸a˜o
de estilos (cor do texto, tamanho e tipo da fonte) ao documento
HTML. Tem como finalidade fornecer ao navegador a forma como os
elementos sa˜o apresentados.
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 16 / 19
ROTEIRO
1 INTRODUC¸A˜O AO HTML5
O que e´ uma TAG HTML?
Atributos de uma TAG
Uma breve definic¸a˜o de CSS
DOM
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 17 / 19
INTRODUC¸A˜O AO HTML5
DOM
O que e´ DOM (Document Object Model) ou Modelo de Objetos do
Documento
E´ a interface entre a linguagem Javascript e os objetos do HTML.
Basicamente quando o documento HTML e´ carregado pelo navegador,
o mesmo fica armazenado em uma estrutura hiera´rquica em forma de
a´rvore que pode ser facilmente manipula´vel atrave´s de comandos
Javascript.
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 18 / 19
Vidal. Ronnison Reges (Centro Universita´rio Esta´cio do Ceara´)Tecnologia para Internet I 2018 19 / 19
	INTRODUÇÃO AO HTML5
	O que é uma TAG HTML?
	Atributos de uma TAG
	Uma breve definição de CSS
	DOM