View
190
Download
0
Category
Preview:
Citation preview
CRIAÇÃO DE SITES I
Aula anterior
Apresentação da
disciplinaApresentaçã
o HTML
NESTA AULA! Formatação de documentos HTML
Recursos
OBJETIVOS: Apresentar elementos básicos do HTML
Apresentar exemplos
Formatar documentos HTML
Utilizar atributos HTML
Elementos HTML
Elemento Raiz Metadados do
documento Scripts Seções Agrupamento de
conteúdo
Semântica Edição Conteúdo
embutido Tabulação de
dados Elementos
interativos
Elemento Raiz
ELEMENTO DESCRIÇÃO
<html> Representa a raiz de um documento HTML ou XHTML. Envolve todo o documento HTML.
Metadados do documento
ELEMENTO DESCRIÇÃO
<head>Representa uma coleção de metadados sobre o documento, incluindo links suas definições de scripts e folhas de estilo. Envolve o cabeçalho do documento HTML.
<title> Especifica o título do documento HTML.
<base> Especifica uma URL base para todos os links da página.
Metadados do documento
ELEMENTO DESCRIÇÃO
<link> Especifica uma referência a um documento externo.
<meta> Fornece informações gerais sobre o documento.
<style> Tag usada para escrever CSS dentro do documento HTML.
Scripts
ELEMENTO DESCRIÇÃO
<script> Especifica scripts em um documento html.
<noscript> Especifica conteúdo alternativo para browsers que não suportam JavaScript ou outras linguagens de script.
<template> Container para conteúdo no lado cliente instanciado em tempo de execução usando JavaScript.
Seções
ELEMENTO DESCRIÇÃO
<body>Representa o principal conteúdo de um documento HTML. Há apenas um elemento <body> em um documento que envolve o corpo (texto e tags) do documento html.
<section> Define a seção do Documento.
<nav> Define uma seção que contém apenas links de navegação.
Seções
ELEMENTO DESCRIÇÃO
<article> Especifica um artigo.
<aside> Define um conteúdo reservado do restante da página e mesmo que for removida, o conteúdo restante ainda faz sentido.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
São elementos que representam os seis níveis de títulos de cabeçalhos dos documentos e que descrevem brevemente o tema da seção.
Seções
ELEMENTO DESCRIÇÃO
<hgroup>Agrupa um conjunto de elementos quando um título tem vários níveis. *tag excluída da documentação do html5 pelo W3C.
<header>Define o cabeçalho de uma página ou seção. Muitas vezes contém um logotipo, o título do site e uma menu de navegação do conteúdo.
<footer>Define o rodapé de uma página ou seção. Muitas vezes contém um aviso de copyright, alguns links para informações legal ou endereços para dar feedback.
Seções
ELEMENTO DESCRIÇÃO
<address> Define uma seção que contém informações de contato, como endereço e informações gerais sobre o autor de um documento.
<main>Define o conteúdo principal ou importante no documento. Existe apenas um elemento <main> no documento.
Agrupamento de conteúdo
ELEMENTO DESCRIÇÃO
<p> Define uma parte que deve ser exibida como um paragrafo.
<hr> Cria uma linha horizontal.
<pre>Indica que o seu conteúdo é pré-formatado e que este formato deve ser preservado.
Agrupamento de conteúdo
ELEMENTO DESCRIÇÃO
<blockquote> Representa uma citação.
<ol>Define uma lista ordenada de itens, que mudam o seu significado, se alterar a ordem dos seus elementos.
<ul> Define uma lista não ordenada.
Agrupamento de conteúdo
ELEMENTO DESCRIÇÃO
<li> Define um item de uma lista ol ou de uma ul.
<dl> Representa uma Lista de Definição.
<dt> Marca o texto especificado como um termo de definição de um glossário.
Agrupamento de conteúdo
ELEMENTO DESCRIÇÃO
<dd>Especifica o texto referente a um termo criado pela tag <dt> dentro de uma lista de definição.
<figure> Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
<figcaption> Representa a legenda do Figure.
<div> Especifica uma seção no documento, utilizado para agrupar vários elementos HTML.
Semântica
ELEMENTO DESCRIÇÃO
<a> Representa um hyperlink, ligando a outro recurso.
<em> Representa a ênfase do conteúdo.
<strong> Maior ênfase em negrito.
Semântica
ELEMENTO DESCRIÇÃO
<small> Torna o texto um tamanho de fonte menor do que o padrão no documento HTML.
<s> Marcar o texto que não está mais correto.
<cite> Representa uma citação.
Semântica
ELEMENTO DESCRIÇÃO
<q>Indica que o texto incluído é uma breve citação. Este elemento destina-se a citações curtas que não requerem quebras de parágrafo.
<dfn> É usada para indicar uma definição.
<abbr>Representa uma abreviação e opcionalmente fornece uma descrição completa para ela.
Semântica
ELEMENTO DESCRIÇÃO
<data>
A <data>tag HTML é usada para fornecer uma versão legível por máquina de seu próprio conteúdo. Isso pode ser útil nos casos em que seus dados precisam estar em um determinado formato porque para ele ser processado por um script, mas isso pode não ser o desejado para que os usuários visualizem.
<time>Representa um valor de data e hora, eventualmente, com um equivalente legível por máquina.
<code> Representa amostra de um código de computador.
Semântica
ELEMENTO DESCRIÇÃO
<var>Representa uma variável, que não é expressão matemática real. Ou contexto de programação, um identificador que representa uma constante, um símbolo de identificação de uma quantidade física, um parâmetro de função, ou um mero espaço reservado em prosa.
<samp> Especifica a saída de um programa de computador, script, etc.
<kbd> Especifica um texto que foi digitado pelo usuário.
Semântica
ELEMENTO DESCRIÇÃO
<sub>,<sup> Representa um subscrito, respectivamente sobrescrito.
<i> Texto em itálico.
<b> Texto em negrito.
Semântica
ELEMENTO DESCRIÇÃO
<u> Faz com que o texto fique com um sublinhado.
<mark>Especifica um texto destacado para fins de referência.
<ruby> Especifica texto Ruby (tipografia utilizada no Sudeste Asiático).
<rt> Especifica um componente do texto ruby em uma anotação ruby
Edição
ELEMENTO DESCRIÇÃO
<ins> Especifica que um novo texto foi inserido no lugar de um que foi removido.
<del>Especifica texto deletado.
Conteúdo embutido
ELEMENTO DESCRIÇÃO
<img> Especifica uma imagem.
<iframe> Especifica uma sub janela no documento.
<embed> Especifica uma aplicação externa com conteúdo interativo.
Conteúdo embutido
ELEMENTO DESCRIÇÃO
<object> Especifica um objeto dentro de um documento HTML.
<param> Especifica um parâmetro para um objeto incorporado no documento HTML.
<video>Representa um vídeo, e seus arquivos de áudio associados e legendas, com a interface necessária para jogar.
Conteúdo embutido
ELEMENTO DESCRIÇÃO
<audio> Representa um som, ou fluxo de áudio.
<source> Especifica múltiplos recursos multimídia em uma página.
<track>Permite aos autores especificar faixa legendada para elementos de mídia, como <video> e <audio>.
Conteúdo embutido
ELEMENTO DESCRIÇÃO
<canvas> Especifica a criação de gráficos em uma página web.
<map> Especifica um mapa de imagem.
<area> Especifica uma área no interior de um mapa de imagem.
Conteúdo embutido
ELEMENTO DESCRIÇÃO
<sgv> Define uma imagem vectorial incorporado.
<math> Define uma fórmula matemática.
Tabulação de dados
ELEMENTO DESCRIÇÃO
<table> Especifica uma tabela.
<caption> Especifica a criação de legendas em tabelas.
<colgroup> Especifica grupo de colunas em tabelas.
Tabulação de dados
ELEMENTO DESCRIÇÃO
<col> Especifica atributos para colunas em tabelas.
<tbody> Especifica um corpo para a tabela.
<thead> Especifica o cabeçalho de uma tabela.
Tabulação de dados
ELEMENTO DESCRIÇÃO
<tfoot> Especifica um rodapé para a tabela.
<tr> Especifica uma linha em uma tabela que pode conter colunas ou células individuais.
<td> Especifica uma célula para a tabela.
<th> Especifica uma célula de cabeçalho em uma tabela.
Formulários
ELEMENTO DESCRIÇÃO
<form> Especifica um formulário.
<fieldset> Especifica um grupo de elementos relacionados com o formulário.
<legend> Representa a legenda para um <fieldset>.
Formulários
ELEMENTO DESCRIÇÃO
<label> Especifica um rótulo para controle dos elementos em um formulário.
<input> Especifica um campo de entrada de texto.
<button> Representa um botão.
Formulários
ELEMENTO DESCRIÇÃO
<select> Especifica uma lista de itens selecionáveis.
<datalist> Especifica um "autocomplete" em formulários.
<optgroup> Especifica um grupo de itens relacionados dentro de uma lista.
Formulários
ELEMENTO DESCRIÇÃO
<option> Especifica as opções de uma lista, utilizado em conjunto com as tags <select> e <datalist>
<textarea>Especifica um textarea onde o usuário pode introduzir várias linhas de texto.
<keygen> Especifica um par de chaves público-privadas.
Formulários
ELEMENTO DESCRIÇÃO
<output> Especifica o resultado de um cálculo, por exemplo, o efetuado por algum script.
<progress> Especifica o progresso realização de uma tarefa.
<meter> Especifica medição dentro de um intervalo predefinido.
Elementos interativos
ELEMENTO DESCRIÇÃO
<details>Especifica informações adicionais que o usuário pode visualizar ou esconder sob demanda.
<summary>Representa um resumo, legenda ou legenda para um determinado <detalhes>.
<command> Especifica um comando que o usuário pode invocar.
<menu> Representa uma lista de comandos.
AGORA!Um exemplo, contendo alguns
dos principais elementos apresentados.
PRÓXIMA AULA! Atributos
Estilos
DÚVIDAS?
Prof. Cândido Luciano de FariasE-mail: cdcfarias@gmail.com
��
Recommended