Mais conteúdo relacionado
Semelhante a INF1030-Aula01versaoClaudiaVersaoReduzida.pptx
Semelhante a INF1030-Aula01versaoClaudiaVersaoReduzida.pptx (10)
Último
Último (20)
INF1030-Aula01versaoClaudiaVersaoReduzida.pptx
- 3.
- 10.
- 16. <!DOCTYPE html> <html> <head> <title>Oi</title> </head> <body> <h1 style="color:blue"> Aqui é um cabeçalho</h1> <p contenteditable="true"> E agora um parágrafo editável</p> </body> </html>
- 20.
- 21. <!DOCTYPE html> <html lang="pt-br"> <head> <title>teste</title> <meta charset="utf-8"> <style> #id1 {color:blue; font-family:Calibri; font-size:20px} #id2 {color:black; text-align:center; background-color:yellow} .classe1 {color:red; text-align:center} </style> </head> <body> <p class="classe1" ><b>Oi</b></p> <p id="id1" class="classe1"><b>INF1030</b></p> <h3 id="id2">Os elementos foram identificados com id e/ou class!!!!</h3> <p class="classe1"><b><i>Mudamos a cor e o alinhamento</b></i></p> <h3 class="classe1">com facilidade!!!!</h3> </body> </html>
- 37. <p> Primeiro parágrafo</p> <b> Texto em negrito </b> <p><b> Primeiro parágrafo em negrito</b></p> <meta charset="utf-8"/> (utiliza um charset com acentuação) <br/> (muda de linha) <img src="img/mlo.jpg" alt="logo da empresa"/> (inclui uma imagem) <tag> Conteúdo da tag </tag>. Forma geral: </tag>
- 38. Exemplos: <p style="text-align:left;font-size:25px"> Aqui está alinhado à esquerda</p> <a href="http://www.puc-rio.br" target="_blank"> PUC-Rio </a> <img src="img/logo.jpg" alt="descrição do logotipo"/> <meta charset="utf-8"/> Forma geral: nome do atributo="valor".
- 40. <p align="right"> <i>HTML</i> é uma <b>linguagem de marcação</b></p> <h6>Elementos HTML <i><b>podem</b></i> ser aninhados e identificados</h6> <br/>
- 44. <!-- este é um comentário --> <p>Palavra1 Palavra2.</p> --> Palavra1 Palavra2
- 57. Forma geral: propriedade: valor.
- 60. Forma geral:
- 61. Forma geral: <style type="text/css"> seletor1 {prop1: val1 ; prop2: val2 ; ... ;} .... seletorn {prop1: val1 ; prop3: val3 ; ... ;} </style>
- 62. <head> <link rel="stylesheet" href= "arq.css" /> </head>
- 66. <!DOCTYPE html> <html> <head> … </head> <body> <h1> Atividades da 1ª Aula </h1> <hr/> <p> <i>Disciplina:</i><b> INF1030 </b><br/> <i>Professor: </i><b>Claudia Ferlin </b><br/> <i>Horário: </i><b>Quarta-feira - 11hs às 14hs</b><br/> <i>Local:</i><b> RDC</b> <hr/> </p> <br/> <h2>Pauta </h2> <h5 style = "margin-left:24px"> Apresentação da disciplina<br/> Introdução ao <i>HTML</i><br/> Tarefas Extraclasse<br/> </h5> <hr/><hr/> <h5 style = "font-size:14px">Atividade 1 </h5> <hr/><hr/> <h5 style = "font-size:14px">Atividade 2 </h5> <hr/><hr/> <h5 style = "font-size:14px">Atividade 3 </h5> <hr/><hr/> </body> </html>
- 68. <!DOCTYPE html> <html lang="pt-br"> <head> <title>teste</title> <meta charset="utf-8"> <style> #id1 {color:blue; font-family:Calibri; font-size:20px} #id2 {color:black; text-align:center; background-color:yellow} .classe1 {color:red; text-align:center} </style> </head> <body> <p class="classe1" ><b>Oi</b></p> <p id="id1" class="classe1"><b>INF1030</b></p> <h3 id="id2">Os elementos foram identificados com id e/ou class!!!!</h3> <p class="classe1"><b><i>Mudamos a cor e o alinhamento</b></i></p> <h3 class="classe1">com facilidade!!!!</h3> </body> </html>
- 71. #ident { width: 80%; height: 200px; margin: 0 auto; background: Linen; text-align: center; } #prog { width: 80%; height: 200px; margin: 0 auto; background: Ivory; border: 3px solid red } #ativ { width: 80%; height: 400px; margin: 0 auto; background: Bisque; text-align: center; }
- 73. <img src="imagem.gif" /> <img src="diretorio/imagem.gif" /> <img src="http://www.meslin.com.br/diret/imagem.gif" /> <img src="imagem.gif" /> <img src="diretorio/imagem.gif" /> <img src="" /> <img src="..." alt="..."/>
- 74. <img src="imagem.gif" alt="um texto alternativo"/>
- 82. Forma geral: <a href="local" target="tipo">Texto a exibir/Imagem</a>
- 83. Forma geral:
- 84. <a href="sobre.html" target="_blank"> Sobre o Site </a>
- 86. Forma geral: <a name="lugar">qualquer conteúdo (geralmente vazio)</a>