Scribd
Carregar
25 visualizações24 páginas

03 - Linguagem HTML

O documento discute elementos básicos da estrutura HTML como tags, parágrafos, exibição, listas e formatação de texto.

Enviado por

glendamariasilvadapascoa
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
25 visualizações24 páginas

03 - Linguagem HTML

O documento discute elementos básicos da estrutura HTML como tags, parágrafos, exibição, listas e formatação de texto.

Enviado por

glendamariasilvadapascoa
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 24

Programação Web Responsiva Prof. Me.

Fernando Stela
Estrutura da página HTML

Todos os documentos HTML devem começar com


uma declaração de tipo de documento:
<!DOCTYPE html>

O próprio documento HTML começa


<html> e termina com </html>

A parte visível do documento HTML está entre


<body> e </body>
Parágrafos HTML

Um parágrafo sempre começa em uma nova linha e


geralmente é um bloco de texto.

Parágrafos HTML são definidos com a tag <p> tag:


<p>Esse é um parágrafo.</p>
<p>Esse é um outro parágrafo.</p>
Mais uma forma de parágrafo.<p>
Exibição HTML

Normalmente não temos certeza de como uma página HTML


será exibida pois, na diversidade de dimensões de telas, o
conteúdo é redimensionado para a exibição conforme o
tamanho do dispositivo.
Dessa forma, não se pode alterar a exibição do conteúdo com
a adição de espaços ou linhas vazias a ser exibidas em seu
código HTML.
O navegador removerá automaticamente quaisquer espaços e
linhas extras quando a página for exibida.
Exibição HTML

<p> <p>
Este parágrafo Este parágrafo
contém muitas linhas no contém muitos espaços no
código-fonte, código-fonte,
mas o navegador mas o navegador
ignora isso. ignora isso.
</p> </p>

<p>
O número de linhas em um parágrafo depende do tamanho da janela
do navegador. Se você redimensionar a janela do navegador, o
número de linhas neste parágrafo mudará.
</p>
Exibição HTML
Exibição HTML tag <pre>.

A solução para essa questão é a tag <pre>.


Os elemento HTML <pre> define um texto pré-formatado. O texto dentro
da tag será exibido em uma fonte de uma largura fixa e preserva espaços e
quebra de linha.

<pre>
As cores do arco-íris, tão bonitas no céu
Estão também nos rostos das pessoas que passam
Vejo amigos apertando as mãos, dizendo: Como vai você?
Eles realmente dizem: Eu te amo!
</pre>
Exibição HTML
Exibição HTML
<!DOCTYPE html> A tag <hr>: define uma quebra de linha
<html> e exibe uma linha na horizontal.
<body>
<h1>Título 1</h1>
<p>Aqui ficará o texto.</p>
<hr>

<h2>Título 2</h2>
<p>Aqui ficará outro texto.</p>
<hr>

<h2>Título 2</h2>
<p>Aqui ficará mais um texto.</p>
</body>
</html>
Blockquote e citação e
abreviaturas

A tag <blockquote> define uma seção que é citada de outra


fonte. Os navegadores geralmente indentam os elementos
<blockquote> .
A tag <q> para citações curtas. Os navegadores normalmente
inserem aspas no conteúdo do elemento <q>.
A tag <abbr> define uma abreviação ou um acrônimo, como
"HTML", "CSS", "Mr.", "Dr.".
Blockquote e citação e
<!DOCTYPE html>
<html>
abreviaturas
<body>
<p>Tags blockquote, q e abbr</p>
<blockquote>
Com mais de 20 anos de atuação no mercado goiano,
a empresa <q>Fashion Consultoria e Sistemas</q>
tornou-se especialista no
fornecimento se soluções para negócios de empresas do segmento
de moda/vestuário e suporte aos seus
<abbr title="Planejamento, Plano e Controle da Produção"> PPCP
</abbr>.
Com experiencia adquirida através dos anos em
observância das necessidades do mercado, desenvolvemos uma
solução ideal para alavancar o seu negócio, através de
processos de sistemas ágeis e com informações precisas
para a gestão dos negócios da sua empresa.
</blockquote>
</body>
</html>
Blockquote e citação e abreviaturas
Comentários HTML

Os comentários HTML não são exibidos no navegador, mas


podem ajudar a documentar seu código-fonte HTML.
Você pode adicionar comentários à sua fonte HTML usando a
seguinte sintaxe:

<!-- Escreva seu comentário aqui-->

Os comentários não são exibidos pelo navegador, mas podem


ajudar a documentar seu código-fonte HTML.
Listas HTML

As listas HTML permitem que os desenvolvedores da


web agrupem um conjunto de itens relacionados em
listas. Exemplo:
Lista Não ordenada em HTML
Uma lista não ordenada começa com a tag <ul> e para cada item da lista
usa-se a tag <li>.
<ul>
<li>Segunda</li>
<ul>
<li>Pão na chapa</p>
<li>broa</li>
<li>café</li>
</ul>
<li>Terça</li>
<ul>
<li>Bolo</li>
<li>Pão de queijo</li>
<li>café</li>
</ul>
</ul>
Listas Não Ordenadas em HTML
Lista Ordenada em HTML
Uma lista ordenada começa com a tag <ol> e para cada item da lista usa-
se a tag <li>.
<ol>
<li>Segunda</li>
<ol>
<li>Pão na chapa</p>
<li>broa</li>
<li>café</li>
</ol>
<li>Terça</li>
<ol>
<li>Bolo</li>
<li>Pão de queijo</li>
<li>café</li>
</ol>
</ol>
Listas Ordenadas em HTML
Lista de descrição
HTML também oferece suporte a listas de descrição, que é
uma lista de termos, com uma descrição para cada termo.
A tag <dl> define a lista de descrição, a tag <dt> define o
termo (nome) e a tag <dd> descreve cada termo:
<dl>
<dt>Café</dt>
<dd>- bebida preta quente </dd>
<dt>Milk</dt>
<dd>- bebida branca gelada</dd>
<dt>Pão de queijo</dt>
<dd>- delícia mineira</dd>
<dt>Bolo</dt>
<dd>- delicioso bolo (receita da vovó)</dd>
</dl>
Listas de descrição em HTML
Elementos de formatação de texto

<b>- Texto em negrito</b><br>


<strong>
-Texto importante
</strong><br>
<i>- Texto em itálico</i><br>
<em>- Texto enfatizado</em><br>
<mark>- Texto marcado</mark><br>
<small>- Texto menor</small><br>
<del>- Texto excluído</del><br>
<ins>- Texto inserido</ins><br>
<sub>- Texto subscrito</sub><br>
<sup>- Texto sobrescrito</sup><br>’
User-agents e atributo lang
Os user-agents funcionam como usuários robôs dos
navegadores ou de ferramentas de busca e fazem a varredura
do conteúdo dos sites. Assim, quanto mais aderente a eles a
página estiver, maior é a chance de o site ser recomendado
por eles nos buscadores.

Nesse sentido, dizemos aos user-agents qual é a linguagem


nativa do documento, ou seja, em qual idioma os leitores do
site encontram o conteúdo que nele está disposto. Para isso,
utilizamos o elemento lang dentro da tag <html>. No entanto,
é preciso salientar que não se trata de um elemento restrito à
tag <html>, isto é, que pode ser usado a qualquer momento
para indicar trechos do site em outro idioma, por exemplo.
User-agents e atributo lang

<!DOCTYPE html>
<html lang="pt-br">

</html>
Metatag charset
Havendo uma tag <head> conseguiremos colocar os metadados
necessários na página com o que chamamos em HTML de Metatag. Trata-
se de tags que possuem metadados, mas que se diferenciam das demais,
pois não necessitam ser fechadas.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8“>
</head>
</html>

A Metatag charset é responsável por informar ao navegador quais são os


tipos de caracteres que a página utiliza, ou seja, os acentos e as
pontuações necessários para escrever corretamente em português.
Vale lembrar que utilizamos em nossa região demográfica o utf-8 como
padrão, mas, dependendo da região do planeta, existem outros padrões.

Você também pode gostar