Fpin 101 HTML

Instituto Federal de Educao, Cincia e Tecnologia IFAL Coordenadoria de Informtica
Introduo ao HTML
por Prof. MSc. Ricardo R Nunes Ricardo (arroba) ifal.edu.br
Objetivos
Entender como funciona o HTML e seus elementos Compreender a estrutura bsica de um documento HTML Estudar os elementos utilizados para criar informaes sobre a pgina Aprender a utilizar os elementos de contedo Aprender a utilizar listas, tabelas, iframes, imagens, links
FPIN 4
Introduo
Como criar um stio na WEB?
Utilizando o HTML
FPIN
Introduo
O que HTML?
Hyper Text Markup Languague...
Por que se utiliza isso? Como surgiu? Como funciona?
FPIN
As linguagens de marcao
HTML
Hyper Text Markup Languague... Ou Linguagem de Marcao de Hipertexto Linguagem utilizada para formatar um texto com suas marcaes
FPIN
Marcao
Tags (marcas) HTML para marcar/formatar o texto So palavras chaves escritas entre < > Exemplo: <HTML> </HTML>
FPIN
Como funciona?
O Texto e suas marcaes so colocadas em um arquivo com extenso .html ou .htm O navegador interpreta as extenses e exibe o texto formatado
FPIN
Editando HTML
Pode ser utilizado qualquer editor de texto, como o bloco de notas... ou editores WYSIWYG (what you see is what you get) para o HTML como dreamweaver; expression; frontpage; etc. Os arquivos HTML no so compilados! Erros nos arquivos HTML no so fatais
FPIN
10
Editando HTML
O arquivo principal de um site deve se chamar index.html ou index.htm
H variaes como default.htm/html
Ao acessar um site um arquivo index.html automaticamente procurado.

http://meusite.com/index.html
FPIN
11
Especificao W3C
HTML5 (substitui HTML 4 e XHTML)
http://www.w3.org/TR/html5/
Permite criar pginas com contedo rico sem utilizar plugins

Animaes Grficos udio Vdeo
Multiplataforma
FPIN
12
Especificao W3C
Verses antigas
HTML 4.01
http://www.w3.org/TR/html401/
HTML 4.0
http://www.w3.org/TR/1998/REC-html40-19980424/
HTML 3.2
http://www.w3.org/TR/REC-html32.html
XHTML 1.0
http://www.w3.org/TR/xhtml1/
FPIN
13
Validar Documentos
The W3C HTML Validation Service http://validator.w3.org/ The Web Design Group Validation Service http://www.htmlhelp.com/tools/validator/ The W3C CSS Validation Service http://jigsaw.w3.org/css-validator/
FPIN
14
Editores ?
Online: http://htmledit.squarefree.com/ Offline: Notepad, Notepad++
FPIN
15
Navegadores
Programa utilizado para visualizar um docuemento HTML
Firefox, Chrome, Safari, Lynx, Opera, SeaMonkey, Internet Explorer Os principais navegadores suportam HTML 5
Algumas caractersticas ainda em desenvolvimento
FPIN 16
Servidor Web
Apache
XAMPP
FPIN
17
Estrutura bsica de documentos

Declaraes doctype
Identifica a verso do HTML
<!DOCTYPE html>
FPIN
19

Marcao HTML: identifica incio e fim da pgina
Marcao HEAD: cabealho da pgina Marcao BODY: contedo da pgina
FPIN
20
Exemplo 01
Resumo Tipo do documento: #1 Incio e Fim: #2 e #12 Comentrio: #10 Cabealho: #3 - #7 Ttulo: #4 Corpo: #8 - #11 Ttulo 1: #9
FPIN
21
<Head> </Head>
Traz informaes sobre a pgina Marcaes
TITLE : ttulo da pgina STYLE: define informaes de estilo para o doc SCRIPT: define script client-side NOSCRIPT: contedo alternativo para navegadores que no suportam script META : define informaes adicionais BASE : localizao inicial das URLs relativas LINK : relacionamento entre um conjunto de documentos
FPIN
22
Exemplo 02
Onde est o ERRO neste cdigo?
FPIN
23
<BODY> </BODY>
Somente uma seo por pgina Tipos de marcaes para body
Todos os elementos de contedo de um documento HTML (texto, links, imagens, tabelas, etc) so colocados no tag. Atributos de layout do tag foram removidos no HTML 5
FPIN
24
<BODY ...>
As marcaes podem ter atributos que definem sua configurao/comportamento
BACKGROUND; BGCOLOR; TEXT; LINK; VLINK; ALINK (No suportados no HTML5 / DEPRECATED no HTML 4.01) TITLE DIR EVENTOS
FPIN
25
Janela
Formulrio
Eventos
Teclado
FPIN
26
Mouse
Eventos
Mdia
Mdia
FPIN
27
Cabealhos/Ttulos
So utilizados para definir ttulos do documentos. <h1>, <h2> ... <h6>
<h1 align=left>
Os valores para propriedade align so: left, right, center, justify ALIGN no mais suportado no HTML e deprecated no HTML 4.01
FPIN
28
Resumo Incio do contedo: #8 Configuraes: #8 Fim do contedo: #22 Negrito: #11 Pargrafo: #12 Ttulos: #15 - #20
Exemplo 03
ERROS ?
FPIN 29
Tabela de Cores
FPIN
30
Elementos body
<P>: pargrafo <PRE>: preserva os espaos no pargrafo <ADDRESS>: informaes de contato <BLOCKQUOTE>: citao ...
FPIN
31
Exemplo 04
FPIN
32
Listas
Listas Numeradas e Lista com Marcadores <OL>: listas ordenadas

<LI>: elemento da lista Atributos para <OL> type (1,A,a,I,i), start (valor inicial) type & start so deprecated no HTML 4.01, mas ainda so suportados no HTML 5 Atributos para <LI> value (valor inicial)
<UL>: listas com marcadores

<LI>: elemento da lista Atributos para <UL> type (disk, circle, square) type deprecated no HTML 4.01 e NO suportado no HTML 5
FPIN 34
FPIN
35
Exerccio 1
Faa uma pgina em HTML 5 que contenha
Ttulo da pgina Nome do aluno Perodo Lista das disciplinas que est cursando Para cada disciplina, sublista com o nome de pelo menos dois alunos da disciplina
Disponibilize a pgina atravs do servidor web APACHE - XAMPP

FPIN 36
Tabelas
<table> </table>
<table>: cria tabelas
<caption>: ttulo da tabela <th>: cabealho das colunas <tr>: linha da tabela <td>: clula (dado da tabela)
FPIN
38
FPIN
39
Atributos de <Table>
BORDER: largura (em pixels) da borda deprecated HTML 4.01 e No suportado HTML 5)
ALIGN: Alinhamento horizontal da tabela CELLSPACING: espao entre duas clulas CELLPADDING: espao entre a borda e os dados FRAME: quais bordas sero desenhadas (a partir do HTML 4.0)
BGCOLOR, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT : cores
WIDTH: largura da tabela
FPIN
40
Atributos
<tr>
deprecated HTML 4.01 e No suportado HTML 5)
ALIGN: alinhamento horizontal vALIGN: alinhamento vertical BGCOLOR
<th> ou <td>
COLSPAN: mesclar colunas ROWSPAN: mesclar linhas deprecated HTML 4.01 e No suportado HTML 5)
ALIGN e VALIGN: alinhamento vertical e horizontal WIDTH e HEIGHT: largura e altura
FPIN 41
Agrupando Contedo da Tabela

<THEAD ...> ... </THEAD> <TBODY ...> ... </TBODY> <TFOOT ...> ... </TFOOT> Atributos (deprecated HTML 4.01 e No suportado HTML 5)
ALIGN e VALIGN
FPIN
42
ERRADO! Por que?
Antigo Atualizado
FPIN
43
CORRETO! Por que?
FPIN
44
Outros Elementos Nvel de bloco
<HR>
Linha horizontal Atributos no suportados HTML 5 e deprecated HTML 4.01
Align: alinhamento Width: largura Size: tamanho (altura) Color: cor
FPIN
46
<div>
Divide o documento em sees distintas Usado para configurar layout (antigamente se utilizava tabelas) Atributo no suportado no HTML 5 e deprecated HTML 4.01
align
FPIN
47
IFrame
Usado para mostrar uma pgina web dentro de outra pgina web. <iframe src="URL"> </iframe>
FPIN
48
SCRIPT e NOSCRIPT
Script: usado para embutir scripts clientside... NOSCRIPT: ignorar o contedo script
FPIN
49
<br>
Quebra de linha
FPIN
50
Estilos para caracteres
<b> </b>: negrito <I> ... </I>: itlico <SUB> ... </SUB>: subscrito <SUP> ... </SUP>: sobrescrito <DEL> ... </DEL>: delete <INS> ... </INS>: insert <SMALL> ... </SMALL>: texto em tamanho menor <Q> ... </Q>: citao <CODE> ... </CODE>: exibir cdigo fonte Elementos deprecated HTML 4.01 e no suportados HTML5 <BIG> ... </BIG>: texto em tamanho maior <FONT ...> ... </FONT>: configura a fonte
Atributos: size (1 at 7), color,
<U> ... </U>: sublinhado

FPIN 52
FPIN
53
Exerccios 02
Tabela que relaciona as disciplinas j cursadas pelo aluno e o perodo de cada disciplina <iframe> para inserir o contedo do exerccio 01 na pgina do exerccio 02
FPIN
54
Links
Links
Permite a ligaes entre documentos distintos Podem ser utilizados tanto texto como imagens
<a href=url> clique aqui para ir daqui pra l</a>
A url pode ser absoluta ou relativa
FPIN
56
Links
Cad o erro?
As ncoras so feitas com o tag <a> e requerem atributos.

Ex.: <a href=www.bla.com>clique aqui</a>
FPIN
57
Links
Exemplo 2: <p> Duvidas? Escrevam para <a href ="mailto:ricardo@ifal.edu.br"> Ricardo Rubens </a> </p>
FPIN
58
Links Internos
Permitem fazer ligaes (links) dentro de um mesmo documento <a name=aqui> <a href=aqui> clique aqui para ir pra l</a>
FPIN
59
FPIN
60
Imagens
Imagens
<img>: permite inserir imagens Atributos
src: Endereo absoluto ou relativo do arquivo alt: texto alternativo height e width: altura e largura align: alinhamento (DEPRECATED HTML 4.01 / no suportado HTML 5)
Exemplo:
<img src="imagens/rr.jpg" alt="texto alternativo" height="" width=""/>
FPIN 62
FPIN
63
Caracteres
FPIN
65
Exerccios 03
1. Lista para seus sites favoritos e links para os mesmos 2. <iframe> para inserir o contedo dos exerccios 01 e 02 na pgina do exerccio 03 3. Imagem com logo do IFAL e bandeira do Brasil 4. Link interno no incio da pgina para acessar diretamente os itens [1], [2] e [3] sem precisar rolar a pgina

FPIN 66
Referncias
Recomendao W3C
http://www.w3.org/TR/html5/ http://www.w3.org/TR/REC-html40/
W3Schools
http://www.w3schools.com/html/
Outros
http://www.w3c.br/Cursos/CursoHTML5
FPIN
67

Fpin 101 HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Fpin 101 HTML

Caricato da

Copyright:

Formati disponibili

Instituto Federal de Educao, Cincia e Tecnologia IFAL Coordenadoria de Informtica

Ao acessar um site um arquivo index.html automaticamente procurado.

Permite criar pginas com contedo rico sem utilizar plugins

Estrutura bsica de documentos

Estrutura bsica de documentos

Estrutura bsica de documentos

Onde est o ERRO neste cdigo?

Listas Numeradas e Lista com Marcadores <OL>: listas ordenadas

<UL>: listas com marcadores

Disponibilize a pgina atravs do servidor web APACHE - XAMPP

BGCOLOR, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT : cores

WIDTH: largura da tabela

Agrupando Contedo da Tabela

ERRADO! Por que?

CORRETO! Por que?

Outros Elementos Nvel de bloco

Estilos para caracteres

<U> ... </U>: sublinhado

Disponibilize a pgina atravs do servidor web APACHE - XAMPP

A url pode ser absoluta ou relativa

As ncoras so feitas com o tag <a> e requerem atributos.

Disponibilize a pgina atravs do servidor web APACHE - XAMPP

Potrebbero piacerti anche