PPSI 1 - Post
a)
Características
O HTML (HyperText
Markup Language) é uma linguagem de marcação utilizada para produzir
páginas na Web. Ele descreve a estrutura de um documento, definindo os
elementos
lógicos da página sob a interpretação do browser com relação ao conteúdo
baseado
no seu modelo de apresentação. Além disso, os browsers são muito tolerantes
a erros,
ignorando qualquer coisa que não for reconhecida, já que as informações de
erros
não são reportadas.
b)
Estrutura básica de uma página
<!DOCTYPE
HTML>
<html
lang="pt-br">
<head>
<meta
charset="UTF-8">
<link
rel="stylesheet" type="text/css">
href="estilo.css">
<title></title>
</head>
<body>
</body>
</html>
c) Metadados: head, title, link, meta, style
<head>: Define o cabeçalho de um
documento HTML, que traz informações sobre o documento que está sendo aberto.
<title>:
Define o
título da página, que é exibido na barra de título dos navegadores.
<html>
<title> Este é o título </title>
<body>
</body>
</html>
<title> Este é o título </title>
<body>
</body>
</html>
<link>:
Define
ligações da página com outros arquivos como feeds, CSS, scripts, etc.
Ex:<link
rel="stylesheet" type="text/css">
href="estilo.css">
<meta>:
Define
propriedades da página, como codificações de caracteres, descrição da
página,
autor, etc.
Ex: <meta
charset="UTF-8">
<style>:
Define a
formatação em CSS: <style
type="text/css">
d)
Sessões: body, article, section, nav, aside, h1, h2, h3, h4, h5, h6,
hgroup,
header, footer, address
<body>:
Define o
conteúdo principal, o corpo do documento. Esta é a parte do
documento
HTML que é exibida no navegador. No corpo podem se definir atributos comuns
a toda
página, como cor de fundo, margens e outras formatações.
<article>:
Representa
um parte da página que poderá ser distribuído e reutilizável em
feeds,
por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários
ou
apenas um
bloco de texto comum.
<section>:
Define
uma nova seção genérica no documento.
<nav>:
Representa
uma seção da página que contém links para outras partes do website.
<aside>:
Representa
um bloco de conteúdo que referencia o conteúdo que envolta do
elemento
aside. Pode ser representado por conteúdos em sidebars em textos impressos,
publicidade
ou até mesmo para criar um grupo de elementos nav e outras informações
separados
do conteúdo principal do website.
<h1><h2><h3><h4><h5><h6>:
Cabeçalhos
e títulos no documento em diversos
tamanhos.
Ex:
<html>
<title>HTML básico</title>
<body>
<h1>Nível 1</h1>
<h2>Nível 2</h2>
<title>HTML básico</title>
<body>
<h1>Nível 1</h1>
<h2>Nível 2</h2>
<h3>Nível 3</h3>
<h4>Nível 4</h4>
<h4>Nível 4</h4>
<h5>Nível 5</h5>
<h6>Nível 6</h6>
<h6>Nível 6</h6>
</body>
</html>
<hgroup>:
Agrupador
de 2 ou mais elementos, organizando-os em uma hierarquia de
títulos e
subtítulos.
<header>: Representa um grupo de introdução
ou elementos de navegação. Pode ser
utilizado
para agrupar índices de conteúdos, campos de busca ou até mesmo logos.
<footer>: Representa o rodapé da página.
<address>: Define um elemento de
endereço.
e)
Comentário HTML
Os
comentários HTML são como uma etiqueta que tem um início e um fim. Todo o texto
que
colocar dentro, não aparecerá na página. O comentário começa por <!-- e finaliza por
--> considerando que o
texto está comentado.
f)
Elementos de agrupamento: p, hr, blockquote, ol, ul, li, dt, dt, dd, div
<p>: Novo parágrafo.
<html>
<title>HTML básico</title>
<body>
Vamos separar esta sentença com marcação de parágrafo.
<title>HTML básico</title>
<body>
Vamos separar esta sentença com marcação de parágrafo.
<p> Para verificar a diferença.
</body>
</html>
Vamos
separar esta sentença com marcação de parágrafo.
Para
verificar a diferença.
<hr>: Cria uma linha divisória horizontal.
<blockquote>: Define uma citação longa.
<ol>: Abertura e fechamento de uma lista ordenada.
<ul>: Abertura e fechamento de uma lista não ordenada.
<li>: Inicia um item de lista ordenada ou não ordenada.
Exemplo
de uma lista ordenada:
<ol>
<li> laranjas </li> <li> peras </li> <li> uvas </li> </ol> |
Resulta
neste formato:
|
Exemplo
de uma lista não-ordenada:
<ul>
<li> maçãs <li> bananas <li> peras </ul> |
Vai
aparecer assim:
|
<dl>: Abertura e fechamento de uma lista de definições.
<dt>: Inicia o termo a ser definido.
<dd>: Inicia a definição do termo.
Exemplo
com ambos elementos juntos:
<dl>
<dl> BANANA <dd> Banana é uma fruta de cor amarela <dt> PERA <dd> Pera é uma fruta de cor verde </dl> |
Será
vista desta forma:
BANANA
Banana é uma fruta de cor amarela
PERA
Pera é uma fruta de cor verde
|
<div>: Abertura e fechamento de uma divisão de página
cujos elementos que estão dentro dela obedecerão às mesmas definições.
g)
Elementos de texto semânticos: a, abbr, span, strong, em, br
<a>: Estabelece um texto ou imagem como link.
<html>
<title>HTML básico</title>
<body>
<a href="index.htm">Índice</h1>
</body>
</html>
</html>
<abbr>: Define uma abreviação (sigla).
<span>: Define uma seção num documento.
<strong>: Define texto de forte ênfase.
<em>: Define texto enfatizado.
<br>: Quebra de linha.
h) Conteúdo
embutido: img
<img>: Representa a inserção de uma imagem.
Nenhum comentário:
Postar um comentário