Você está na página 1de 24

TRABALHO

PROGRAMAÇÃO WEB

ALUNO:VICTOR EMANUEL RODRIGUES SOUZA


TURMA:2°ANO TÉCNICO
TAGS DO HTML
As tags são usadas para informar ao navegador a estrutura do site. Ou
seja: quando se escreve um código em HTML, as tags serão interpretadas
pelo navegador, produzindo assim a estrutura e o conteúdo visual da
página.

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.

HEAD- O elemento HTML (<head>) Providencia informações


gerais (metadados) sobre o documento, incluindo seu título e links para
scripts e folhas de estilos.
LINK- O Elemento HTML (<link>) especifica as relações entre o
documento atual e um recurso externo. Possíveis usos para este elemento
incluem a definição de uma estrutura relacional para navegação. Este
elemento é mais usado para vincular as folhas de estilo.

META- O elemento HTML (<meta> ) define qualquer informação de


metadados que não podem ser definidos por outros
elementos HTML. (base, link, script, style ou title).

STYLE- O elemento HTML (<style>) contém informações de estilo para


um documento ou uma parte do documento. As informações de estilo
específico estão contidas dentro deste elemento, geralmente no CSS.
TITLE- O elemento HTML <title> (Elemento HTML Título) define o título
do documento, mostrado na barra de título de um navegador ou na aba
da página. Pode conter somente texto e quaisquer marcações contidas no
texto não são interpretadas.

SCRIPT- O elemento HTML <script> é usado para incluir ou referenciar


um script executável.
ESTRUTURA
<html lang="en">
<head>
<base href="https://www.Chrome.com/" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet"tipe="text/css" href="style.css">
<title>…. </title>
</head>
Raíz de seccionamento
BODY- O elemento HTML representa o conteúdo de um documento
HTML. Só pode haver um elemento em um documento.<body> <body>

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>

ARTICLE- O elemento HTML representa uma composição


independente em um documento, página, aplicativo ou site, que se
destina a ser distribuível ou reutilizável de forma independente.

ASIDE- O elemento HTML representa uma parte de um documento cujo


conteúdo está apenas indiretamente relacionado ao conteúdo principal
do documento.

FOOTER- O elemento HTML representa um rodapé para


seu conteúdo de seção ancestral mais próximo ou elemento raiz de seção.

HEADER- O elemento HTML representa o conteúdo introdutório,


normalmente um grupo de auxílios introdutórios ou de navegação .
H1/H6- Os elementos <h1> e <h6> representam seis níveis de
cabeçalhos de seção.<h1> é o nível de seção mais alto e <h6> é o mais
baixo.<h6> <h1><h6>.

MAIN- O elemento HTML representa o conteúdo dominante de um


documento. A área de conteúdo principal consiste em conteúdo
diretamente relacionado ou que se expande sobre o tópico central de um
documento ou a funcionalidade central de um aplicativo.

NAV- O elemento HTML representa uma seção de uma página cujo


objetivo é fornecer links de navegação, seja dentro do documento atual
ou para outros documentos.
SECTION- O elemento HTML representa uma seção autônoma
genérica de um documento, que não possui um elemento semântico
mais específico para representá-lo.

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

dd- O elemento HTML fornece a descrição, definição ou valor para o


termo anterior em uma lista de descrições. <dd> dtdl

DIV- O elemento HTML é o contêiner genérico para o conteúdo do


fluxo.
dl- O elemento HTML Definition List (<dl>) engloba uma lista de pares
de termos e descrições.

dt- O elemento HTML <dt> (ou Elemento HTML de Definição de Termo)


identifica um termo na lista de definição. Este elemento pode ocorrer
somente em um elemento filho de dl.
Figcaption- O Elemento HTML Figcaption (<figcaption>) representa
uma legenda ou uma legenda associada com uma figura ou ilustração
descrita pelo resto dos dados do elemento figure que seu elemento pai.

Figure- O elemento (<figure>)HTML representa conteúdo autocontido,


potencialmente com uma legenda opcional, que é especificada usando
o figcaption elemento.

hr- O elemento HTML (<hr>) representa uma quebra temática entre


elementos de nível de parágrafo (por exemplo , uma mudança da cena
de uma história, ou uma mudança de tema com uma seção).
li- O elemento HTML <li> (ou a Lista dos Itens de um elemento HTML) é
usado para representar um item que faz parte de uma lista.
ol- O Elemento HTML <ol> (ou Elemento HTML de lista ordenada)
representa uma lista de itens ordenados.

p- O elemento HTML (<p>) representa um parágrafo.


pre- HTML texto preformatado (<pre>) é a tag utilizada para
representar texto pré-formatado. Um texto dentro desse elemento é
tipicamente exibido em uma fonte não proporcional da mesma maneira
em que o texto original foi disposto no arquivo.
ul- O elemento HTML<ul> (ou elemento HTML de Lista desordenada)
representa uma lista de itens sem ordem rígida, isto é, uma coleção de
itens que não trazem uma ordenação numérica e as suas posições, nessa
lista, são irrelevantes.

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

a- O elemento <a> em HTML (ou elemento âncora), com o


atributo href cria-se um hiperligação nas páginas web,
arquivos,endereços de emails, ligações na mesma página ou
endereços na Url.
ESTRUTURA:
ul>
<li><a href="https://example.com">Website</a></li>
</ul>
RESULTADO:

• 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:

abbr- O Elemento _HTML <abbr> (ou Elemento de Abreviação


HTML) representa uma abreviação e opcionalmente fornece uma
descrição completa para ela.

ESTRUTURA:
<p>Obama é presidente dos <abbr title="Estados Unidos da
América">EUA</abbr></p>

RESULTADO:
Obama é o presidente dos EUA

bdi- O HTML <bdi>elemento (ou elemento de isolamento de Bi-


direcional) isola um trecho de texto que pode ser formatado em uma
direção diferente de outro texto fora dela.

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:

br- O elemento HTML quebra-de-linha <br> produz uma quebra de


linha em um texto (carriage-return).É útil para escrever poemas ou um
endereço, onde a divisão de linha é significante.

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:

As tags são usadas para informar ao navegador a estrutura do


site.
Ou seja: quando se escreve um códigoem HTML, as tags serão
interpretadas pelo navegador,
produzindo assim a estrutura e o conteúdo visual da página.

cite-O elemento HTML <cite> representa uma referência a um trabalho


artístico.
ESTRUTURA:
Mais informações podem ser encontradas em <cite>[ISO-
0000]</cite>.
RESULTADO:
Mais informações podem ser encontradas em [ISO-0000].

code- O elemento HTML <code> apresenta seu conteúdo estilizado de


maneira a indicar que o texto é um pequeno fragmento de código.
ESTRUTURA:
<p>O método <code>push</code> adiciona um ou mais elementos ao
final de uma matriz e retorna o novo comprimento da matriz.</p>

RESULTADO:
O método push adiciona um ou mais elementos ao final de uma
matriz e retorna o novo comprimento da matriz.

data- O elemento HTML(<data>) vincula um determinado conteúdo


a uma tradução legível por máquina. Se o conteúdo estiver
relacionado a data ou hora, <time> deve ser usado.

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:

em- O elemento HTML <em> marca o texto que tem ênfase. O


elemento <em> pode ser aninhado, com cada nível de aninhamento
indicando um grau maior de ênfase.

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:

i-O elemento HTML (<i>) representa uma parte do texto que é


destacada do restante por algum motivo, por exemplo, termos técnicos,
expressões de outros idiomas ou pensamentos de personagens fictícios.

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:

mark- O Elemento HMTL (<mark>) representa um trecho de destaque


em um texto.

ESTRUTURA:
<p>O elemento; mark é usado para <mark>destacar</mark> partes do
texto</p>

RESULTADO:

q- O elemento HTML (<q>) indica que o texto dentro da tag é uma


pequena citação.

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:

rt- O elemento HTML(<rt>) abrange a pronúncia do caractere


apresentado em anotações de rubi, que são para mostrar a pronúncia
dos caracteres do Leste Asiático e o <rt>elemento é usado dentro
do <Ruby>elemento.

rp- O elemento HTML é usado para fornecer parênteses alternativos


para navegadores que não suportam exibição de anotações ruby
usando o elemento.
Ruby- O elemento HTML <ruby> representa uma anotação ruby.
Anotações ruby são para mostrar a pronúncia de caracteres do Leste
Asiático.

ESTRUTURA:
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

RESULTADO:

s- O elemento HTML <s> renderiza um texto tachado ou uma linha


cortando o texto.

ESTRUTURA:
<P><s>texto invalido</s></P>
RESULTADO:
texto invalido

Span- O elemento HTML <span> é um conteiner generico em linha


para conteúdo fraseado , que não representa nada por natureza.
ESTRUTURA:
<p><span>ALGUM TEXTO </span></p>
RESULTADO:
ALGUM TEXTO
Strong- O elemento HTML <strong> dá ao texto uma forte importância,
e é tipicamente mostrado em negrito.
ESTRUTURA:
<p>Partes importantes podem ser <strong>mostradas em negrito</strong> em
alguns textos </p>
RESULTADO:

time- O elemento HTML time (<time>) representa o tempo tanto no


formato de 24 horas ou como uma data precisa no calendário Gregoriano
(com informações opcionais de tempo e fuso horário).
ESTRUTURA:
<p>A partida de futrbol da seleção começa as <time>16:00</time>.</p>
RESULTADO:

Var- O elemento HTML Variable (<var>) representa uma variável em uma


expressão matemática ou um contexto de programação.

ESTRUTURA:
<p>UMA SIMPLES EQUAÇÃO: <var>x</var> = <var>y</var> + 2 </p>
RESULTADO:
UMA SIMPLES EQUAÇÃO: x = y + 2

wbr- O elemento HTML <wbr> representa uma posição no texto onde o


navegador pode, opcionalmente, quebrar uma linha, embora suas regras
de quebra de linha de outra forma não criar uma ruptura naquele local.

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:

OBJECT- O elemento HTML representa um recurso externo, que


pode ser tratado como uma imagem, um contexto de navegação
aninhado ou um recurso a ser manipulado por um plug-in.

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>

Colgroup- O elemento HTML define um grupo de colunas dentro de uma tabela

TABELAS
TABLE- O elemento HTML Table (<table>) representa dados em duas
dimensões ou mais.

CAPTION- O Elemento HTML <caption> (*ou Elemento HTML Subtitulo


de Tabela) representa o título de uma tabela.

COL- O elemento HTML <col> define uma tabela contendo colunas e


sendo utilizada para definições semanticas em todas as colunas comuns.

COLGROUP- O elemento HTML define um grupo de colunas dentro


de uma tabela.
Tbody- O elemento HTML encapsula um conjunto de linhas da tabela
( elementos), indicando que eles compõem o corpo da tabela.
Tfoot- O <tfoot> é um elemento HTML que define um conjunto de
linhas as quais farão parte do rodapé de uma tabela HTML.

Th- O elemento HTML <th> define uma célula cabeçalho do grupo de


células de sua tabela.

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.

SELECT-O elemento HTML select (<select>) representa um controle que


apresenta um menu de opções. As opções dentro do menu são representadas pelo
elemento option, que podem ser agrupados por elementos optgroup. As opções
podem ser pré-selecionadas para o usuário.
TEXTAREA-O elemento HTML <textarea> representa um controle de edição
para uma caixa de texto, útil quando você quer permitir ao usuário informar um
texto extenso em formato livre, como um comentário ou formulário de retorno.
ESTRUTURA:
<form >
<fieldset>
<legend>informações</legend>
<label>cidade</label>
<select>
<optgroup>
<option>Tibau</option>
<option>Mossoró</option>
</optgroup>
</select>
<label>bairro</label>
<imput type="text"></imput>
<textarea></textarea>
<button type="submit">enviar</button>
</fieldset>
</form>

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.

SUMMARY- O elemento HTML summary (<summary>) é utilizado


como um sumário ou legenda para o conteúdo de um
elemento details.

ESTRUTURA:
<details>
<summary>detalhes </summary>
</details>
<dialog open=>
<p>dialogo duvidoso</p>>
</dialog>
RESULTADO:

Você também pode gostar