Programador

Tags Principal

• <DOCTYPE html>
• <html lang="pt-BR">
• <head>
• <titile>Primeira Pagina</titile>
• <meta charset="utf-8"> // define o tipo de caracteres
• </head>
• <body>
• </body>
• </html>

Espaço em branco

• <DOCTYPE html>
• <html lang="pt-BR">
• <head>
• <titile>Primeira Pagina</titile>
• <meta charset="utf-8"> // define o tipo de caracteres
• </head>
• <body>
• Até &nbsp; amanha <!-- espaço em branco -->
• </body>
• </html>

Elemento Head

• <DOCTYPE html>
• <html lang="pt-BR">
• <head>
• <titile>Primeira Pagina</titile>
• <meta charset="utf-8">
• <link rel="stylesheet" type="text/css" href="estyle.css">
• <style>
• body{ <!-- estilo para o corpo-->
• background: #f00; <!-- Vermelho cor de fundo-->
• color: #ff0099; <!-- cor do texto -->
• font-family: sans-serif ; <!-- estilo da letra / tipo de letra -->
• }
• </style>
• </head>
• <body>
• </body>
• </html>

Adicionar o Script - Javascript

• <DOCTYPE html>
• <html lang="pt-BR">
• <head>
• <titile>Primeira Pagina</titile>
• <meta charset="utf-8">
• <link rel="stylesheet" type="text/css" href="estyle.css">
• <style>
• body{ <!-- estilo para o corpo-->
• background: #f00; <!-- Vermelho cor de fundo-->
• color: #ff0099; <!-- cor do texto -->
• font-family: sans-serif ; <!-- estilo da letra / tipo de letra -->
• }
• </style>
• </head>
• <script>
• function inicial(){
• nome.innerHtml = "Claudio Silva";
• }
• window.onload = inicial;
• <body>
• <p id="nome"></p>
• </body>
• </html>

META TAG

• <DOCTYPE html>
• <html lang="pt-BR">
• <head>
• <titile>Primeira Pagina</titile>
• <meta charset="utf-8">
• <meta name="author" content="André Fontenelle">
• <meta name="generator" content="Brackets">
• <meta name="Keywords" content="HTML5, Curso HTML, Curso Front End, CSS , Javascript">
• <meta name="application-name" content="iMedia Brasil">
• <meta http-equiv="refresh" content="3"> <!-- reload da pagina a cada tres segundos -->
• <script>
• function SorteioNumero( ){
• sorteio.innerHTML = Math.round(Math.random() * 50); <!--numero aleatorio -->
• }
• window.onload = sorteioNumero;
• </script>
• <body>
• <p id="sorteio"></p>
• </body>
• </html>

Cabeçalho

• <DOCTYPE html>
• <html lang="pt-BR">
• <head>
• <titile>Primeira Pagina</titile>
• <meta charset="utf-8"> // define o tipo de caracteres
• </head>
• <body>
• <hgroup> <!-- reunir nossos cabeçalho -->
• <h1> I can , I believe me </h1> <!-- Maior destaque -->
• <h2> Let´s go</h2> <!-- segundo maior destaque-->
• <h3></h3><!-- -->
• <h4></h4> <!-- -->
• <h5></h5> <!-- -->
• <h6></h6> <!-- -->
• </hgroup>
• </body>
• </html>

Slide 7

• <titile>Primeira Pagina</titile>
• <meta charset="utf-8"> // define o tipo de caracteres
• </head>
• <body>
• <hgroup> <!-- reunir nossos cabeçalho -->
• <h1> I can , I believe me </h1> <!-- Maior destaque -->
• <h2> Let´s go</h2> <!-- segundo maior destaque-->
• <p>First example paragraph</p>
• <p>Second example paragraph</p>
• <p>third example paragraph</p>
• </hgroup>
• </body>
• </html>

Slide 8

• </head>
• <body>
• <p>
• <adress>
• Claudio silva <br>
• Sao Paulo - Sp <br>
• Brasil <br>
• Cancer
• <adress>
• </p>
• </body>
• </html>

Marcação no texto

• <DOCTYPE html>
• <html lang="pt-BR">
• <head>
• </head>
• <body>
• <p> test this <b>text</b></p>
• <p> test this <i>text<i></p>
• <p> test this <u>text</u></p>
• <p> test this _text</p>
• <p> test this ^text</p>
• <p> test this <s>text</s></p>
• </body>
• </html>

Slide 10

• <DOCTYPE html>
• <html lang="pt-BR">
• <head>
• <titile>Primeira Pagina</titile>
• <meta charset="utf-8"> // define o tipo de caracteres
• </head>
• <body>
• <!-- Lista sem ordem -->
• <ul type="square; circle;">
• <li> Brasil </li>
• <li> Argentina </li>
• <li> Uruguai </li>
• <li> Venezuela </li>
• </ul>
• <!-- Lista em Ordem -->
• <ol type="a;A;i">
• <li> Alonso </li>
• <li> Vettel </li>
• <li> Massa </li>
• <li> Button </li>
• </ol>
• <!-- Lista descritiva -->
• <dl>
• <dt>Unidade 01</dt>
• <dd>
• Apresentação do curso
• Melhores softwares para usar neste curso
• </dd>
• <dt>Unidade 02</dt>
• <dd>
• <p>
• Uma breve história do HTML5<br>
• Especificações do HTML5<br>
• HTML5 VS HTML4<br>
• </p>
• </dd>
• </dl>
• </body>
• </html>

SEMANTICA

• I - E
• em , strong