aula 2 - iniciação ao html · figura:codigo html equipe instrutor do departamento de inform atica...
TRANSCRIPT
![Page 1: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/1.jpg)
TAGs avancadas no Body(corpo)Exercıcios
Aula 2 - Iniciacao ao HTML
Equipe Instrutor do Departamento de Informatica
Universidade Federal do Parana - UFPR
21 de Julho de 2010
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 2: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/2.jpg)
TAGs avancadas no Body(corpo)Exercıcios
1 TAGs avancadas no Body(corpo)TAG <H>formatacao de textosAtributosLinkImagemTabela
2 ExercıciosEquipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 3: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/3.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAGs Avancadas
Ja sabemos as TAGs :
<html>: inicio do HTML.
<head>: inicio do cabecalho.
<title>: nome da pagina.
<body>: o que aparece na pagina.
<p>: inicio de um texto.
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 4: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/4.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
<Hn>
H: representa o inicio de um cabecalho.
n: representa um numero, que e a de importancia docabecalho.
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 5: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/5.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Exemplo do uso da TAG <Hn>
Figura: codigo html
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 6: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/6.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Resultado
Figura: codigo html
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 7: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/7.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
TAGs <b> <o> <br /> <hr /> e <small>
<b>: texto em negrito.
<i>: texto em italico.
<br />: pula linha.
<hr />: uma linha na linha(um traco).
<small>: letra pequena.
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 8: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/8.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
formatacao
Figura: codigo html
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 9: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/9.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Resultado formatacao
Figura: codigo html
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 10: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/10.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
LISTA TAGs <ul> <ol> e <li>
<ul>: uma lista de itens em pontos.
<ol>: uma lista de itens em numeros.
<li>: itens da lista devem estar entre essa TAG.Esta TAG deve estar entre uma das acima.
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 11: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/11.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Lista
Figura: codigo htmlEquipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 12: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/12.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Resultado Lista
Figura: codigo html
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 13: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/13.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 14: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/14.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Link
Estrutura:<a href=“site”>o que vai aparecer no link
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 15: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/15.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Link
Figura: codigo html
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 16: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/16.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Resultado
Figura: codigo htmlEquipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 17: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/17.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Imagem
Estrutura:<img scr=“local da imagem”
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 18: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/18.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Tabela
Estrutura:
<table>: inicia a tabela.
<tr>: inicia uma linha.
<td>: quantidade de celulas na linha.
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 19: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/19.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Tabela
Figura: codigo htmlEquipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 20: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/20.jpg)
TAGs avancadas no Body(corpo)Exercıcios
TAG <H>formatacao de textosAtributosLinkImagemTabela
Resultado Tabela
Figura: codigo html
Equipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML
![Page 21: Aula 2 - Iniciação ao HTML · Figura:codigo html Equipe Instrutor do Departamento de Inform atica Aula 2 - Inicia˘c~ao ao HTML. TAGs avan˘cadas no Body(corpo) Exerc cios TAG](https://reader036.vdocuments.net/reader036/viewer/2022070805/5f0394bb7e708231d409c1c2/html5/thumbnails/21.jpg)
TAGs avancadas no Body(corpo)Exercıcios
Exercıcios
Figura: codigo htmlEquipe Instrutor do Departamento de Informatica Aula 2 - Iniciacao ao HTML