- PDF Free Download

Tamanho: px

Começar a partir da página:

Download ""

Amadeu Antas Beltrão
6 Há anos
Visualizações:

10 <label>informe o seu nome</label> <label> <address> Aprenda a Utilizar Todo o Poder do HTML5 <a href= mailto:contato@htmlecsspro.com">contato</a> </address>

13 <img src="imagem.jpg" alt= HTML e CSS Pro" />

17 <html> <html lang= pr-br >

18 <head> <title> <title> Título da página que aparecerá no navegador </title>

19 <body> <body> Aqui vai o conteúdo o corpo da página do site, é aqui que vamos combinando as tags e formando nossa página de acordo com a nossa necessidade. </body>

20 <h6> <h1>título 1</h1> <h2>título 2</h2> <h3>título 3</h3> <h4>título 4</h4> <h5>título 5</h5> <h6>título 6</h6>

21 <a> <a href= index.html >Home do site</a> <a href= <a href= >Google</a>

22 <a> <a name= topo ></a> <a href= #topo >Topo</a>

23 <img> <img> <img src= imagem.jpg alt= HTML e CSS Pro />

24 <p> <p> Aqui vai o texto do paragrafo da página. Pode ter vários parágrafos numa única página. </p>

25 <table> <tr> <td> <td> <td>

26 <table> <tr> <td> <table> <tr> <td>nome do produto</td> <td>valor do produto</td> </tr> <tr> <td>caderno capa dura</td> <td>r$ 50,00</td> </tr> </table>

27 <table> <td rowspan> <table> <tr> <th>nome produto</th> <th>preço</th> <th>total</th> </tr> <tr> <td>camisa polo</td> <td>r$ 50</td> <td rowspan="2">r$ 200</td> </tr> <tr> <td>calça Jeans</td> <td>r$ 150</td> </tr> </table> RESULTADO

28 <table> <td colspan> <table> <tr> <th>nome produto</th> <th>preço</th> </tr> <tr> <td>camisa polo</td> <td>r$ 50</td> </tr> <tr> <td colspan="2" align="center">r$ 50</td> </tr> </table> RESULTADO

29 <form> <form> </form> <form action= pagina.html ></form>

30 <form> <form action= pagina.html method= get ></form>

31 <form> <form action= pagina.html method= post ></form>

32 <input> <input> <text>, <button>, <checkbox>, <radio>, <file>, <hidden>, <image>, <password>, <reset>, <submit>

33 <select> <option> <option>

34 <textarea> <textarea>

35 <button> <label> <label>

36 <div> <span> <hr> <ol> <ul> <li>

37 <ol> <li>item 1</li> <li>item 2</li> <li>item 2</li> </ol> <ul> <li>item 1</li> <li>item 2</li> <li>item 2</li> </ul>

38 <strong> <iframe> <iframe> <link> <link> <link>

39 <script> <script> <meta> <meta> <meta>

40 <pre> <style>

41 <abbr> <address> <blockquote> <caption> <code>

42 <code> </code>código Inline</code> <pre> </code> Código multilinha </code> </pre>

43 <del> <ins> <fieldset> <legend> <samp>

44 <tfoot> Rodapé de uma tabela <thead> Cabeçalho de uma tabela <th> Célula-título de uma tabela

45 <br> <b> <strong> <i> <em>.

46 <!DOCTYPE html>

60 <b> <i> <header> <footer> <time>

65 <!DOCTYPE HTML> <html lang= pt-br > <head> <meta charset= UTF-8 > <link rel= stylesheet type= text/css href= estilo.css > <title>titulo da página</title> </head> <body> Conteúdo </body> </html>

67 <html lang= pt-br >

69 <meta charset= utf-8 > <meta http-equiv= Content-Type content= text/html; charset=utf-8 >

70 <link rel= stylesheet type= text/css href= estilo.css > rel= stylesheet <link rel= alternate type= application/atom+xml title= feed href= /feed/ > rel= archives

71 <a>, <Strong>, <em>, <img>, <input>, <abbr>, <span> <label> <div>.

73 <base>, <command>, <link>, <meta>, <noscript>, <script>, <style>, <title>

74 <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <textarea>, <time>, <ul>, <var>, <video>, <wbr>

75 <article> <aside> <nav <section> <article>, <aside>, <nav>, <section> <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

76 <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>

77 <a>, <audio>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <keygen>, <label>, <menu>, <object>, <select>, <textarea>, <video>

78 input tel search url color number step, min, max range number

79 datetime date month week time datetime-local step

80 autofocus placeholder required maxlength pattern novalidate form - formnovalidate submit textarea

81 oninput input setcustomvalidity

82 spellcheck true spellcheck false

83 menu menu <menu type="toolbar"> <li> <menu label="file"> <button type="button" onclick="fnew()">new...</button> <button type="button" onclick="fopen()">open...</button> <button type="button" onclick="fsave()">save</button> <button type="button" onclick="fsaveas()">save as...</button> </menu> </li> <li> <menu label="edit"> <button type="button" onclick="ecopy()">copy</button> <button type="button" onclick="ecut()">cut</button> <button type="button" onclick="epaste()">paste</button> </menu> </li> </menu>

84 details summary

85 contenteditable true

86 hidden <div hidden= true >.</div> scrollintoview document.getelementbyid('id').scrollintoview()

87 draggable="true dragstart drag dragend dragenter dragleave dragover drop

88 iframe embed Controls Autoplay Source Codecs audio video <video controls="true" autoplay="true" width="400" height="300"> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'> <source src='video.mp4' type='video/mp4; codecs="mp4v , mp4a.40.2"'> <p>faça o <a href= video.mp4">download do vídeo</a></p> </video>

height="50" stroke="#000000 stroke-width="5"

279,161 369,161 297,215 323,301 250,250 177,301

90 <svg width="400" height="400">  <rect x="10" y="10" width="150" height="50" stroke="# stroke-width="5" fill="#ff0000" />  <polygon fill="red" stroke="blue" stroke-width="10 points="250,75 279, , , , , , , , ,161" />  <circle cx="70" cy="240" r="60" stroke="#00ff00" stroke-width="5" fill="#ffffff" /> </svg>

91 function desenhar(){ context=document.getelementbyid('x').getcontext('2d') //Iniciamos um novo desenho context.beginpath() //Movemos a caneta para o inicio do desenho context.moveto(150,50) //Desenhamos as linhas context.lineto(220,250) context.lineto(50,125) context.lineto(250,125) context.lineto(80,250) context.lineto(150,50) //Vamos pintar o interior de amarelo context.fillstyle='#ff0' context.fill() //Vamos pintar as linhas de vermelho. context.strokestyle='#f00' context.stroke() }

92 history go back forward history pushstate(data, title, url) replacestate(data, title, url) window.onpopstate

93 localstorage sessionstorage getitem(key) setitem(key, value), removeitem(key) clear()

94 navigator.geolocation.getcurrentposition(showpos) function showpos(position){ alert('your position: '+position.coords.latitude+','+ position.coords.longitude ) }

95 <canvas> <details> <summary> <header>

96 <section> <footer> <article> <figure> <figcaption>

97 <datalist> <input list="browsers"> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="safari"> </datalist>

98 <mark> <meter> <nav> <aside>

99 <output> <form> <input type="range" id="a" value="50">+ <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>

100 <progress> <time>

101 <acronym> <applet> <basefont> <big> <canter> <font> <frame> <frameset> <noframes> <strike> <tt>...

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

Documentos relacionados

Regras básicas que definem onde o elemento pode ou não estar. Existem dois tipos de elementos: De linha: marcam, na maioria das vezes, textos,

Regras básicas que definem onde o elemento pode ou não estar. Existem dois tipos de elementos: De linha: marcam, na maioria das vezes, textos, elementos de formulários, imagens. De blocos: são como caixas,