Criação de sites com tags semânticas

1.
Criação de sites páginas na Internet dentro dos padrõesda Web semântica;
IDE´S
https://html-css-js.com/css/editor/
https://html5-editor.net/ https://htmled.it/or/
https://onlinehtmleditor.dev/
https://htmleditor.tools/
vscode
JS
https://playcode.io/online-javascript-editorhttps://jsfiddle.net/
https://chrome.google.com/webstore/detail/javascript-editor/enhkeonpo
https://js.do/
https://repl.it/languages/javascript
2. Conceito de TAG´s
Significa etiqueta, rótulo. E etiqueta é algo que colocamos emobjetos, mercadorias, arquivos, etc.
para nos ajudar na lida diária, para nos orientar.
são os recipientes destes diferentes tipos de elementos. Elas consistem de parênteses angulares
com nome ou abreviação para cadacódigo dentro inserido.
Elas costumam abrir com <> e fechar com </>. Atualmente, o HTML encontra-se em sua quinta
versão, o HTML5, sendo essa a versão mais utilizada
na Internet.
Veja bem, é uma linguagem de marcação e nãode programação como muitos dizem por aí.
HTML é escrito na forma de elementos HTML que consistem em tags de marcação. Essas tags de
marcação são a característica fundamental do HTML. Cada tag de marcação é composto por uma
palavra-chave, cercado por colchetes, tais como <html>, <head>, <body>, <title>, <p>, e assim por
diante.
As tags HTML normalmente vêm em pares como <html>e </html>. A primeira tag de um par é
freqüentemente chamada de tag de abertura (ou tag inicial), e a segunda tag é chamada de tag de
fechamento (ou tag final).
Uma tag de abertura e uma tag de fechamento são idênticas, exceto uma barra ( /) após o colchete
1
angular de abertura da tag de fechamento, para informar ao navegador que o comando foi concluído.
3. Utilização de TAG´s semânticas;
• header
• O <header> é utilizado para representar o cabeçalho de um documento ou seção declarado no
HTML. Nele podemos inserirelementos de <h1> a <h6>, até elementos para representar
imagens, parágrafos ou mesmo listas de navegação.
• Exemplo de uso de <header>:

• header>
• <h1>Título da página</h1>
• <h2>Subtítulo da página</h2>
• </header>
A tag head é sempre utilizada como filha direta da tag html e serve para passar informações ao navegador que
não serão apresentadas na tela para o usuário. É dentro dessa tag, por exemplo, que pedimos para o navegador
carregar um arquivoCSS dentre outras coisas! Já a tag header surgiu no HTML5 e é utilizada dentro da tag body
para representar ocabeçalho da página!
Sintaxe do elemento HTML

Um elemento HTML é um componente individual de um documento HTML. Representa semântica ou
significado. Por exemplo, o titleelemento representa o título do documento.
A maioria dos elementos HTML são escritos com uma tag de início (ou tag de abertura) e uma tag de
finalização (ou tag de fechamento), com conteúdo intermediário. Os elementos também podem conter atributos
que definem suas propriedades adicionais. Por exemplo, um parágrafo, que é representado pelo pelemento, seria
escrito como:
Não diferenciação de maiúsculas e minúsculas em tags e atributos HTML

Em HTML, os nomes de tag e atributo não diferenciam maiúsculas de minúsculas (mas a maioria
dos valores de atributo diferencia maiúsculas de minúsculas). Significa a tag <P>, e a tag <p>define
a mesma coisa em HTML que é um parágrafo.
2
. Estrutura básica do HTML5: Doctype e Metadados (ex1)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Estrutura</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
O DOCTYPE (não é uma tag) é uma declaração (DTD = Document Type Declaration) e representa a
primeira linha do documento HTML. É uma maneira de informar ao navegador o tipo de documento e
garantir que esse documento seja manipulado da mesma maneira em diferentes navegadores,devido ao
modo padrão (Standard mode) que é um comportamento descritopelas especificações HTML e CSS.
Por padrão, todos os elementos presentes dentro da head não são exibidos pelo navegador.
Escrevendo comentários em HTML

Os comentários são geralmente adicionados com o objetivo de tornar o código-fonte mais fácil
de entender. Isso pode ajudar outro desenvolvedor (ou você no futuro, ao editar o código-fonte)
a entender o que você estava tentando fazer com o HTML. Os comentários não são exibidos no
navegador.
Um comentário HTML começa , conforme mostrado no exemplo abaixo:
<html lang="pt-br">
<head>
<title>Criando Comentários</title>
</head>
<body>


<p>Texto normal em HTML.</p>
<p><strong>Nota:</strong>Comentários não são exibidos no bro
wsers.</p>
</body>
</html>
3
5-Metadados (ex4 index e ex listas)
As Meta Tags auxiliam os mecanismos de busca (search engines) a encontrarem o seu site naweb, isso
porque são elas que dão um pequeno resumo sobre o que será encontrado na sua página, sendo assim uma
forma de indexar o conteúdo web disponível, mas essas tags não seresumem apenas a melhoria para
mecanismos de busca,
O Google, por exemplo, programou o seu robô de busca para ignorar as Meta tags devido a grande
quantidade de “metatag spamming” encontrado na rede, sendo assim o próprio conteúdoda sua página é
indexado no banco de dados ao invés da meta tag “description”.
Se você quiser descobrir se uma determinada página estáusando metatags, basta clicar com o botão direito
do mouse em qualquer lugar da página e selecionar “View Page Source“.
Uma nova guia será aberta no Chrome (no Firefox, seráuma janela pop-up). A parte no topo, ou
“cabeça” da página, é onde as meta tags devem estar.
As meta tags serão parecidas como está na figura abaixo:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Aula de Construção de Aplicações WEB">
<meta name="keywords" content="HTML,CSS,e JavaScript">
<meta name="author" content="Ricardo Marciano">
</head>
<body>
<p> Todas as meta informações vão para a seção principal...</p>
</body>
</html>
4
6 Listas (teoria)
Listas Não Ordenadas

Uma lista não ordenada é uma lista de itens. As listas de itens são
marcadas com bullets (tipicamente pequenos círculos pretos). Uma lista não ordenada começa com a
tag <ul>. Cada item da listacomeça com a tag <li>.
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
Listas ordenadas
Uma lista ordenada é também uma lista de itens. As listas de itenssão marcadas com números.
Uma lista ordenada começa com a tag <ol>. Cada item da listacomeça com a tag <li>.
<ol>
<li>Café</li>
<li>Leite</li>
</ol>
Lista de Definições
Uma lista de definições não é uma lista de itens. Esta é uma lista de termos eexplicações
dos termos.
Uma lista de definições começa com a tag <dl>. Cada termo da lista de definições começa com a tag
<dt>. Cada definição da lista de definições começa com a tag <dd>.
<dl>
<dt>Café</dt>
<dd>Bebida quente preta</dd>
<dt>Leite</dt>
<dd>Bebida fria branca</dd>
</dl>
<ol> Define uma lista ordenada

<ul> Define uma lista não ordenada
<li> Define um item de lista
<dl> Define uma lista de definições
<dt>< Define um termo de definição
10
<dd> Define uma descrição de definição
<!doctype html> 10. listas – ex4
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>2cw uso de listas</title>
</head>
<body>


<ul type=square>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>D3</li>
</ul>

<ol>
<li>FRONT</li>
<li>BACK</li>
<li>FULL</li>
<li>BIBLIOTECA</li>
</ol>


<dl>
<dt>Unidade 01</dt>
<dd>
Apresentação do cursoIDE´s
</dd>
<dt>Unidade 02</dt>
<dd>
Dream<br>
VS<br>
Brackets<br>
</dd>
</dl>
</body>
</html>
11
12

Criação de sites com tags semânticas

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Criação de sites com tags semânticas

Enviado por

Direitos autorais:

Formatos disponíveis

1.

Criação de sites páginas na Internet dentro dos padrõesda Web semântica;

versão, o HTML5, sendo essa a versão mais utilizada

3. Utilização de TAG´s semânticas;

• Exemplo de uso de <header>:

Sintaxe do elemento HTML

Não diferenciação de maiúsculas e minúsculas em tags e atributos HTML

Escrevendo comentários em HTML

Listas Não Ordenadas

<ol> Define uma lista ordenada

Você também pode gostar