Embed Size (px)
Citation preview
HTML – Aula 3
Conceitos básicos
Atributos
• Elementos HTML podem possuir atributos• Atributos proporcionam informações
adicionais para os elementos• Devem ser colocados sempre na tag inicial• São definidos por nome / valor. Ex:
nome="valor"
Atributos
• Sempre utilize aspas para valores• Atributos sempre devem ser iniciados e
finalizados por aspas, sendo elas geralmente duplas, porém aspas simples também podem ser empregadas. Em alguns casos são definidos valores em aspas simples.
Referência de atributos
• id: deve ser único, utilizado para identificar o elemento
• class: classe do elemento• style: definições do estilo dentro do texto• title: texto indicativo do texto (tool tip)
Headings (títulos)
• É importante utilizar os títulos (<h1> a <h6>) somente como títulos mesmo, não para nenhum outro fim. Os motores de busca utilizam títulos como um critério de indexação das páginas.
• Lembrar que headers também devem ser utilizados mantendo estrutura hierárquica.
Comentários
• Comentários são inicializados pela tag: <!-- e finalizaos por --> ou seja:
<!-- Este é um comentário -->• São úteis para identificar o código e assim
facilitar o trabalho de atualização ou alteração em seu documento
Formatando texto<html><body>
<p><b>Este é um texto em negrito</b></p><p><big>Este é um texto BIG</big></p><p><i>Este é um texto em itálico</i></p><p><code>Este é um texto para computador</code></p><p>Este é <sub> Subscrito</sub> e <sup>Sobrescrito</sup></p>
</body></html>
Text Formatting TagsTag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead
"Computer Output" Tags
Tag Description<code> Defines computer code text<kbd> Defines keyboard text <samp> Defines sample computer code<tt> Defines teletype text<var> Defines a variable<pre> Defines preformatted text<listing> Deprecated. Use <pre> instead <plaintext> Deprecated. Use <pre> instead
<xmp> Deprecated. Use <pre> instead
Citations, Quotations, and Definition
Tag Description<abbr> Defines an abbreviation<acronym> Defines an acronym<address> Defines an address element<bdo> Defines the text direction<blockquote>
Defines a long quotation<q> Defines a short quotation<cite> Defines a citation<dfn> Defines a definition term
ExercícioUtilizar tags para formatar o texto conforma o seguinte texto:
Vamos escrever um pouco do texto utilizando cada tipo de formatação:
Alguns trechos do texto devem ser em negrito e outros em itálico
Também devemos utilizar texto Subscrito e sobre escrito, conforme a necessidade
Arquivo base em: http://fernando.portalmaringa.com/renovo/Aula3.zip
HTML Styles
• O propósito de um atributo style é:• Proporcionar uma maneira comum de
estilizar seus elementos HTML• Podem ser atribuídos diretamente a tag
utilizando o atributo style ou por um arquivo CSS.
CSS
• Para utilizar um style em seu documento html a tag:
<link rel="stylesheet" type="text/css" href="mystyle.css">
• Deve estar dentro do seu <head>
CSS• <html>• <head>• <style type="text/css">• body• {• background-color:#d0e4fe;• }• h1• {• color:orange;• text-align:center;• }• p• {• font-family:"Times New Roman";• font-size:20px;• }• </style>• </head>
• <body>
• <h1>CSS example!</h1>• <p>This is a paragraph.</p>
• </body>• </html>
