Aula II - Criação de sites I

Aula anterior
Apresentação
da disciplina
Apresentaçã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 Farias
E-mail: cdcfarias@gmail.com
😉

Aula II - Criação de sites I

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula II - Criação de sites I

Mais de info_cimol

Aula II - Criação de sites I