Elementos Básicos HTML e Formatação de textos

Tamanho: px

Começar a partir da página:

Download "Elementos Básicos HTML e Formatação de textos"

Wagner Azenha Ventura
6 Há anos
Visualizações:

1 Elementos Básicos HTML e Formatação de textos

2 O Html é uma linguagem de marcação (markup languages em inglês). As linguagens que combinam texto com informações extras sobre o texto. Essas informações extras são representada pelo que chamamos de tags.

3 Cabeçalho da página, configurações, importações de links de referencia css, javascript Corpo da página documentos que serão exibidos pelo browser <html> <head> <title></title> </head> <body> </body> </html> Titulo da página Inicio e Fim do documento html

4 As que tags são delimitadores de texto, que informam ao interpretador (browser) como esse texto deve ser apresentado. A sintaxe de uma tag é bem simples. Uma palavra (ou apenas uma letra) delimitada pelos caracteres < e >. Por exemplo, <p> é a tag usada para descrever parágrafos em HTML. <p> é uma tag.

5 Existem dois tipos de tag: de abertura e de fechamento. A tag de abertura deve vir imediatamente antes do texto a ser marcado e a tag de fechamento, imediatamente depois. A única diferença entre uma tag de abertura e uma de fechamento é que a de fechamento tem uma / antes da letra ou palavra. Exemplo: a tag de fechamento de um parágrafo é </p> <p>um paragrafo</p> Tag de abertura Tag de fechamento

6 Existe também as tags vazias. As tags vazias tem em sua estrutura tanto tag de abertura quanto a de fechamento. Sozinha ela forma um elemento. <br /> <hr /> Tag de vazia

7 Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo após o nome do elemento, precedido de um espaço e é composto de um nome de atributo, um sinal de igual (=) e um valor de atributo, cercado por aspas duplas (") ou simples ( ) Um bom exemplo de atributo é o id, que serve para identificar, de maneira única, um elemento dentro de um documento HTML. Exemplo

8 Atributo da tag <p id= p1 >Um paragrafo</p> Tag de abertura Tag de fechamento Os atributos sempre ficam na tag de abertura

9 Atributos da tag <img src="koala.bmp" alt="fsd" /> inicio inicio Tag de vazia Uma tag pode ter vários atributos, propriedades.

10 Um elemento é uma estrutura semântica, composta de: tag de abertura, conteúdo e tag de fechamento ou por uma tag vazia. <p id= p1 >Um paragrafo</p> Elementos <img src="koala.bmp" alt="fsd" />

12 A tag p cria um paragrafo. Os Browsers automaticamente adicionar algum espaço (margem) antes e após cada elemento p. Exemplo: <p>pula uma linha</p> <p>estou afastado da linha de cima</p>

13 A tag br quebra a linha de uma linha no documento, diferentemente da tag p não adiciona espacamento. Exemplo Primeira linha de texto<br />segunda Linha

14 A tag hr cria uma linha horizontal entre os elementos. Exemplo Um texto<hr />na linha de baixo separado por uma barra horizontal

15 A tag h1, h2, h3, h4, h5, e h6 criam titulos para destacar conteudo da página, o numero na frente da letra h indica o tipo de titulo. Exemplo <h1>titulo 1</h1> <h2>titulo 2</h2> <h3>titulo 3</h3> <h4>titulo 4</h4> <h5>titulo 5</h5> <h6>titulo 6</h6>

16 A tag <ol> cria uma lista ordenada, as tags <li> criam elementos da lista ordenada. Exemplo <ol> <li>elemento 1 </li> <li>elemento 2</li> <li>elemento 3</li> </ol>

17 A tag <ul> cria uma lista não ordenada, as tags <li> criam elementos da lista ordenada. Exemplo <ul> <li>elemento 1 </li> <li>elemento 2</li> <li>elemento 3</li> </ul>

19 tag <em> <strong> Descrição Processa texto como enfatizado Torna tão forte de texto (em destaque) Etiquetas: Exemplos <em>texto enfatizado </em><br/> <strong>texto forte </strong><br/>

20 Tag <i> <b> <small> <big> <sub> <sup> Descrição Exibe o texto em itálico Exibe o texto em negrito Processa texto como menor Processa texto como maior Processa o texto em subescrito Processa o texto em sobreescrito

21 <i>texto em itálico</i> <b>texto em negrito</b> <big>texto Big</big> <small>pequeno texto</small> <sub>subescrito</sub> <sup>sobreescrito</sup>

22 A tag div define uma seção ou divisão em um documento html. Esta tag é muito utilizada em conjunto com css. Exemplo <div> texto e outros elementos </div>

23 Qual a estrutura básica de um documento html? O que é uma tag? O que é um atributo? O que é um elemento? Qual a diferença enter a tag <title> e <h1> Qual a diferença entre as tags <p> e <br /> Qual código html devo usar para escrever na tela do navegador: O volume da caixa é 1m 3 Crie a seguinte lista ordenada em html: 1. Maria 2. Jose 3. Carlos

24 Crie a seguinte lista não ordenada em html: Matemática Álgebra Calculo Conjunto Português Ortografia Concordância Estatística Variância Desvio Padrão

Documentos relacionados

HTML: INTRODUÇÃO TAGS BÁSICAS

HTML: INTRODUÇÃO TAGS BÁSICAS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 1 SUMÁRIO Definição Editores HTML Estrutura básica de um documento