1 / 14

Aplicativos para Internet Aula 02

Aplicativos para Internet Aula 02. Paragrafos, listas, imagens e hyperlinks Prof. Danielle Martin Universidade de Mogi das Cruzes. HTML. Hypertext Markup Language (HTML) Linguagem de marcação de páginas web Não é linguagem de programação Identifica os elementos da página através de tags

nan
Download Presentation

Aplicativos para Internet Aula 02

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Aplicativos para InternetAula 02 Paragrafos, listas, imagens e hyperlinks Prof. Danielle Martin Universidade de Mogi das Cruzes

  2. HTML • Hypertext Markup Language (HTML) • Linguagem de marcação de páginas web • Não é linguagem de programação • Identifica os elementos da página através de tags • Exemplos: títulos, parágrafos, imagens, tabelas, listas

  3. Estrutura básica do documento HTML <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Início do documento HTML Bloco Head Declarações do cabeçalho da página: codificação de caracteres, título da página, scripts e folhas de estilo Bloco Body Conteúdo da página a ser exibido no navegador: textos, imagens, tabelas, hyperlinks Fim do documento HTML

  4. Tags do HTML • As tags HTML são delimitadas por < e > • Tags que têm fechamento são fechadas com </ e > • Exemplos: • <p>texto</p> - tag com abertura e fechamento • <br> <hr> - tags sem fechamento • No XHTML, tags sem fechamento devem ser encerradas com / • Exemplo: <br /> • Tags devem ser escritas com letras minúsculas, assim como o nome de seus atributos • Os valores dos atributos devem estar entre aspas • Exemplos: • < imgsrc = “imagem.jpg” > tag IMG atributo SRC valor (nome da imagem)

  5. Tags de títulos Títulos - <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Título de primeiro nível</h1> <h2>Título de segundo nível</h2> <h3>Título de terceiro nível</h3> <h4>Título de quarto nível</h4> <h5>Título de quinto nível</h5> <h6>Título de sexto nível</h6> </body> </html>

  6. Parágrafos e texto Parágrafos e texto - <p>, <b>, <i>, <u>, <strong>, <em> <p> Lorem<i>ipsum</i> dolorsitamet, <b>consectetur</b> adipiscingelit. Nam<u>sodales</u> sodales<strong>nulla</strong>, necrhoncusarcu. <em>Vestibulum</em>aliquetsedmaurisconsequattincidunt. Nullalobortisfelistinciduntloremeleifend, in lobortisorcimolestie. </p> <p> Maecenas est ante, pulvinarsedauctor a, euismodegetneque. Integer suscipit dictum arcuvellobortis. Donecsempersuscipitvelit at vulputate. Ut a velit a eratsodalespulvinar ac sed magna. </p>

  7. Listas Ordenadas Listas Ordenadas - <ol> e <li> <ol> <li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ol> OL = ordered list LI = list item

  8. Listas Ordenadas Atributos da tag <ol> Atributos da tag <li>

  9. Listas Não-Ordenadas Listas Não-Ordenadas - <ul> e <li> <ul> <li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ul> UL = unordered list LI = list item

  10. Listas de Definição Listas de Definição - <dl>, <dt> e <dd> <dl> <dt>Full House</dt> <dd>Uma trinca e um par.</dd> <dt>Flush</dt> <dd>Cinco cartas do mesmo naipe.</dd> </dl> DL = Definition List DT = Definition term DD = Definition description

  11. Imagem Imagem - <img> <img src="https://www.google.com.br/images/srpr/logo11w.png" alt="Google" title="Logo do Google">

  12. Imagem Atributos da tag <img>

  13. Hyperlink Hyperlink - <a> <a href=”http://www.google.com”>Google</a>

  14. Hyperlink Atributos da tag <a>

More Related