Aula II - Criação de sites I

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


<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


<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


<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


<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


<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


<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


<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


<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.



<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.



<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.



<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


<a> Representa um hyperlink, ligando a outro recurso.

<em> Representa a ênfase do conteúdo.

<strong> Maior ênfase em negrito.

Semântica


<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


<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


<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


<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


<sub>,<sup> Representa um subscrito, respectivamente sobrescrito.

<i> Texto em itálico.

<b> Texto em negrito.

Semântica


<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


<ins> Especifica que um novo texto foi inserido no lugar de um que foi removido.

<del>Especifica texto deletado.

Conteúdo embutido


<img> Especifica uma imagem.

<iframe> Especifica uma sub janela no documento.

<embed> Especifica uma aplicação externa com conteúdo interativo.

Conteúdo embutido


<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


<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


<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


<sgv> Define uma imagem vectorial incorporado.

<math> Define uma fórmula matemática.

Tabulação de dados


<table> Especifica uma tabela.

<caption> Especifica a criação de legendas em tabelas.

<colgroup> Especifica grupo de colunas em tabelas.



<col> Especifica atributos para colunas em tabelas.

<tbody> Especifica um corpo para a tabela.

<thead> Especifica o cabeçalho de uma tabela.



<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


<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


<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


<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


<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


<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


<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: [email protected]

��

Software

Aula II - Criação de sites I