Escolar Documentos
Profissional Documentos
Cultura Documentos
PROGRAMAÇÃO WEB
Elemento básico
HTML- O elemento HTML <html> (ou HTML root element) representa a
raiz de um HTML ou XHTML documento. Todos os outros elementos
devem ser descendentes desse elemento.
ESTRUTURA:
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
RESULTADO:
Metadados do documento
BASE- O elemento HTML Base (<base>) especifica o endereço (URL)
utilizada por todos os endereços relativos contidos dentro de um
documento. Há um número máximo de 1 (um) elemento Base <base> do
documento.
ESTRUTURA:
<body>
<h1>TAGS</h1>
</body>
RESULTADO:
SEÇÃO DE CONTEUDO
ADDRESS- O elemento HTML indica que o HTML incluído fornece
informações de contato para uma pessoa ou pessoas ou para uma
organização.<address>
ESTRUTURA:
<body>
<header>
<h1>TAGS</h1>
<Img src="IMG/tags.png"></header>
<main>
<article>
<h2>TAGS DE SEÇÃO DE CONTEÚDO </h2>
<p> </p>
</article>
</main>
<nav>
<ul>
<li><a href="#anc1">anside</a></li>
<li><a href="#anc2">section</a></li>
<li><a href="#anc3">footer</a></li>
<li><a href="#anc4">div</a></li>
</ul>
</nav>
<article>
<h3>Testando tags</h3>
<hr>
</article>
<aside>
<p>desenvolvimento de um trabalho de PW para falar sobre as 90 tags
exiatentes na programação</p>
</aside>
<div>
<h4>definição das TAGS</h4>
<p>As tags são usadas para informar ao navegador a estrutura do site.<br>
Ou seja: quando se escreve um códigoem HTML, as tags serão
interpretadas pelo navegador,<br>
produzindo assim a estrutura e o conteúdo visual da página.</p>
</div>
<div>
<h5>Cabeçalho</h5>
<p>Um monte de conteúdo incrível</p>
</div>
<section>
<h5>Cabeçalho</h5>
<p>Um monte de conteúdo incrível</p>
</section>
<address>
Voce pode contatar o autor em <a
href="http://www.anonimo.com/contact">www.anonimo.com</a>.<br>
<article>
<H6>...</H6>
<footer>PROGRMAÇÃO WEB</footer>
</article>
</body>
RESULTADO:
Conteúdo de texto
Blockquote- O elemento HTML indica que o texto incluído é uma
citação estendida. Normalmente, isso é renderizado visualmente por
recuo (consulte as notas para saber como alterá-lo).
ESTRUTURA:
<body>
<div>
<p><strong>Tags de conteúdo de texto</strong></p>
<blockquote>
Tudo deveria se tornar o mais simples possivel,
mas não simplificado.<cite>-Albert Einstein</cite>
</blockquote>
<pre>texto pré-formatado</pre>
</div>
<hr>
<div>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item desordenado 1</li>
<li>itemm desordenado 2</li>
<li>item desordenado 3</li>
</ul>
<dl>
<dd>Brasil na copa do mundo</dd>
<dt>HexaCAMPEÃO</dt>
<figure>
<img src="IMG/TAÇA.png" alt="TAÇA DA COPA DO MUNDO" width="150"
height="200">
<figcaption>TAÇA</figcaption>
</figure>
</dl>
</div>
</body>
RESULTADO:
Sêmanticas textuais
• Website
b- O elemento HTML( <b>) representa um intervalo de texto
estilísticamente diferente do texto normal, sem transmitir
qualquer importância ou relevância.
ESTRUTURA:
<p>Este artigo descreve vários <b>níveis de texto</b>.
Ele explica a utilização do elemento em <BR>
um documento <b>HTML</b>.
</p>
RESULTADO:
ESTRUTURA:
<p>Obama é presidente dos <abbr title="Estados Unidos da
América">EUA</abbr></p>
RESULTADO:
Obama é o presidente dos EUA
ESTRUTURA:
<p dir="ltr">Esta palavra arábica <bdi>ARABIC_PLACEHOLDER</bdi>
é automaticamente voltada da direita</p>
RESULTADO:
bdo- Substituir a direcionalidade atual do texto.
ESTRUTURA:
<p>Este texto ficará da esquerda para a direita.</p>
<p><bdo dir="rtl">Este texto ficará da direita para a
esquerda.</bdo>
</p>
RESULTADO:
ESTRUTURA:
<p>As tags são usadas para informar ao navegador a estrutura do
site.<br>
Ou seja: quando se escreve um códigoem HTML, as tags serão
interpretadas pelo navegador,<br>
produzindo assim a estrutura e o conteúdo visual da
página.</p>
RESULTADO:
RESULTADO:
O método push adiciona um ou mais elementos ao final de uma
matriz e retorna o novo comprimento da matriz.
ESTRUTURA:
p>produtos </p>
<ul>
<li><data value="3967381398">Mini Ketchup</data></li>
<li><data value="3967381399">Jumbo Ketchup</data></li>
<li><data value="3967381400">Mega Jumbo Ketchup</data></li>
</ul>
RESULTADO:
dfn- O elemento HTML <dfn> (ou Elemento Definição HTML)
representa uma instância de definição de um termo.
ESTRUTURA:
<p><dfn id="def-internet">A Internet</dfn> é um sistema global de redes
interconectadas que usam o Internet Protocol Suite (TCP/IP) para servir
bilhões de usuários no mundo todo.</p>
RESULTADO:
ESTRUTURA:
<p>Em HTML 5, o que anteriormente era chamado de conteúdo
<em>block-level</em> agora é chamado de conteúdo
<em>flow</em> .
</p>
RESULTADO:
ESTRUTURA:
<p>A expressão em latim <i class="latin">Veni, vidi, vici</i> é
frequentemente mencionada na música, na arte e na literatura.</p>
RESULTADO:
ESTRUTURA:
<p>O elemento; mark é usado para <mark>destacar</mark> partes do
texto</p>
RESULTADO:
ESTRUTURA:
<p>According to Mozilla's website,
<q cite="https://www.mozilla.org/pt BR/about/history/details/"><B>Firefox
1.0 was released in 2004 and became a big success.</B></q></p>
RESULTADO:
ESTRUTURA:
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
RESULTADO:
ESTRUTURA:
<P><s>texto invalido</s></P>
RESULTADO:
texto invalido
ESTRUTURA:
<p>UMA SIMPLES EQUAÇÃO: <var>x</var> = <var>y</var> + 2 </p>
RESULTADO:
UMA SIMPLES EQUAÇÃO: x = y + 2
ESTRUTURA:
p>https://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<
wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<
wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/d
eeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</
p>
RESULTADO:
https://this.is.a.really.long.example.com/With/deeper/level/pages/dee
per/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/
pages
IMAGEM E MULTIMÍDIA
IMG- O elemento HTML <img> (or HTML Image Element) representa a
inserção de imagem no documento.
AREA- O HTML <area> elemento define uma região hot-spot em uma
imagem, e, opcionalmente, associa-lo com um Hyperlink. Este elemento
é usado somente dentro de um map elemento.
AUDIO- O elemento audio é utilizado para embutir conteúdo de som
em um documento HTML ou XHTML.O elemento audio foi adicionado
como parte do HTML5.
MAP- O elemento HTML <map> é usado com os elementos area para
definir um mapa de imagem (a área clicável do link).
VIDEO- O elemento HTML <video> é utilizado para incorporar
conteúdo de vídeo em um documento HTML ou XHTML.
ESTRUTURA:
<figure>
<img src="IMG/TAÇA.png" alt="TAÇA DA COPA DO MUNDO" width="150"
height="200">
<figcaption>TAÇA</figcaption>
</figure>
RESULTADO:
CONTEÚDO INTEGRADO
EMBEND- O elemento HTML <embed> incorpora conteúdo externo
no ponto especificado no documento. Este conteúdo é fornecido por um
aplicativo externo ou outra fonte de conteúdo interativo, como um plug-
in de navegador.
ESTRUTURA:
<embed type="video/webm"
src="/media/videos/PSPP2.mp4"
width="250"
height="200">
RESULTADO:
IFRAME- O elemento HTML <iframe> (ou elemento HTML inline frame)
representa um contexto de navegação aninhado, efetivamente
incorporando outra página HTML para a página atual.
ESTRUTURA:
<iframe src="page.html" width="300" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
RESULTADO:
ESTRUTURA:
<object type="application/pdf"data="/media/examples/.pdf"
width="250"
height="200">
</object>
RESULTADO:
DEMARCAÇÃO DE EDIÇÕES
DEL- O elemento HTML <del> (ou Elemento HTML de Texto Excluído)
representa uma parte do texto que foi excluída de um documento.
INS- O HTML <ins>Element (ou HTML Inserted Text ) HTML representa
um intervalo de texto que foi adicionado a um documento.
ESTRUTURA:
<P><del>texto deletado</del></P>
<p><ins datetime="2022-11-28T15:31:05"></ins>NOVA FORMATAÇÃO
DE TEXTO</p>
TABELAS
TABLE- O elemento HTML Table (<table>) representa dados em duas
dimensões ou mais.
Td- O elemento HTML define uma célula de uma tabela que contém
dados.
Tr- O elemento HTML define uma linha de células em uma tabela.
Thead- O elemento HTML define um conjunto de linhas que definem o
cabeçalho das colunas da tabela.
ESTRUTURA:
<table>
<caption>Minha tabela </caption>
<thead>
<colgroup>
<col class="coluna1">
<col class="coluna2">
<col class="coluna3">
</colgroup>
<tr>
<th>nome</th>
<th>sobrenome</th>
<th>idade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Victor Emanuel</td>
<td>Rodrigues Souza</td>
<td>16</td>
</tr>
</tbody>
</table>
RESULTADO:
FORMULÁRIO
FILDSET-O elemento HTML <fieldset> é usado para agrupar elementos, assim
como labels (label), dentro de um formulário web.
IMPUT- O elemento HTML <input> é usado para criar controles interativos para
formulários baseados na web para receber dados do usuário. A semântica de
um <input> varia consideravelmente dependendo do valor de seu atributo type.
LABEL-Um elemento HTML <label> representa uma legenda para um item em uma
interface de usuário. Ele pode estar associado com um elemento de
controle, colocando este dentro do elemento label, ou usando o atributo for.
Tal controle é chamado o controle etiquetado do elemento etiqueta.
Um input pode ser associado a diversas etiquetas (<label>).
METER-O elemento HTML meter (<meter>) pode representar um
valor escalar dentro de um intervalo conhecido ou um valor fracionário.
BUTTON- O Elemento HTML <button> representa um botão clicável.
OPTGROUP-Em um Formulário Web, o elemento HTML <optgroup>
cria um agrupamento de opções dentro do elemento select.
OPTION- Em um formulário Web, o elemento HTML <option> é usado para criar
um controle que representa um item dentro de um elemento
HTML5 select, optgroup ou datalist.
OUTPUT- O elemento de saída (<output>) é um elemento no qual um site ou
aplicativo pode injetar os resultados de um cálculo ou o resultado de uma ação do
usuário.
PROGRESS-o elemento HTML progress (<progress>) é usado para visualizar o
progresso de uma tarefa. Embora as especifidades de como é mostrado ficam a cargo
do desenvolvedor, tipicamente, é mostrado como uma barra de progresso.
LEGEND-O Elemento HTML <legend> (ou Elemento HTMLCampo
"Legend") representa um rótulo para o conteúdo do seu
ancestral fieldset.
RESULTADO:
ELEMENTOS INTERATIVOS
DETAILS- O elemento HTML details (<details>) é usado como
uma ferramenta de onde o usuário irá obter informações adicionais.
DIALOG- O elemento HTML <dialog> representa uma caixa de
diálogo ou outro componente interativo, tal como um inspetor ou
janela.
ESTRUTURA:
<details>
<summary>detalhes </summary>
</details>
<dialog open=>
<p>dialogo duvidoso</p>>
</dialog>
RESULTADO: