Scribd
Carregar
8 visualizações

HTML

O documento aborda os conceitos básicos de HTML 5, explicando sua função como linguagem de marcação para estruturar páginas web. Ele detalha a sintaxe de elementos HTML, a estrutura básica de um documento, tipos de tags e atributos, além de elementos semânticos e formas de aplicar estilos. Também menciona a importância do favicon como ícone identificador do site no navegador.

Enviado por

Gabriel Cunha
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 ODT, PDF, TXT ou leia on-line no Scribd
8 visualizações

HTML

O documento aborda os conceitos básicos de HTML 5, explicando sua função como linguagem de marcação para estruturar páginas web. Ele detalha a sintaxe de elementos HTML, a estrutura básica de um documento, tipos de tags e atributos, além de elementos semânticos e formas de aplicar estilos. Também menciona a importância do favicon como ícone identificador do site no navegador.

Enviado por

Gabriel Cunha
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 ODT, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 9

HTML 5

Básico
HTML → Hiper Text Markup Language
(Não é uma linguagem de programação é de marcação)

→Tags definem como apresentar o conteúdo


→Relacionado com a forma de navegação
→Serve para construir a estrutura de uma página web
→Construímos o código com elementos de HTML

Sintaxe de Elementos de HTML(tag)

Ex: <tag>Texto</tag>

<tag> → Tag de abertura


</tag> → Tag de fechamento (/ indica o fechamento da tag)

Estrutura básica de HTML


Alinhamento: tag’s dentro de tag’s
→Primeira Tag a ser aberta é a última a ser fechada
Ex: <p><b>Esse parágrafo está em negrito</b></p>

→HTML não reconhece espaços se deve ter tag separatória

<!DOCTYPE html>
<html>
<head>

</head>

<body>

</body>

</html>
<!DOCTYPE html> → informa a página que o código é HTML

<html> </html> →Elemento mãe, todos os códigos estarão dentro


dele

<head> </head>→Cabeçalho, aqui são inseridos os metadados da


página (Título, ícone, metadados, importação de scripts, etc)

<body> </body>→Corpo da página, todo conteúdo visível da página


(parágrafos, frases, tabelas, imagens, …)

Elementos de HTML
<!-- --> → Comentar o texto

<title> → Contem o título da página que aparece mo brownser,


fica dentro do elemento <head>
Sx: <title>Titulo da página</title>

Elementos para Conteúdo de Texto <body>

<p> → Paragrafo
<p>Paragrafo</p>

<hX> →Define o destaque de um texto, o X varia de 1 a 6, sendo


o 1 o maior e 6 o menor
<h1>Titulo Maior</h1>
…
<h6>Titulo Menor</h6>
<br> → Quebra de Linha
<hr> → Quebra uma linha e adiciona uma linha separatória

<small> → Altera o texto para pequeno


<small>Texto pequeno</small>

<i> →Texto em Itálico


<i>Texto em Itálico</i>

<em> →Texto em Itálico


<em>Texto em Itálico</em>

<strong> → Texto em negrito


<strong>Texto em Negrito</strong>

<q> → Texto com aspas


<q>Texto com aspas</q>

<mark> → Realça o texto (marca-texto)


<mark>Texto Realçado</mark>

<abbr> → Adiciona uma mensagem ao texto


<abrr title=”#”>Texto</abrr>
<u> → Texto sublinhado
<u>Texto sublinhado</u>

<s> → Texto rasurado


<s>Texto rasurado</s>

<sup> → eleva o texto


<sup>Texto</sup>

<sub> → abaixa o texto


<sub> texto </sub>

<span> →Permite agrupar uma parte de um texto


<p>Texto<span>Texto a ser agrupado</span>Texto</p>

<ul> → Lista desordenada


<ul>
<li>item</li>
…..
<li>item</li>
</ul>
<ol> → Lista ordenada
<ol>
<li>item</li>
…..
<li>item</li>
<ol>

<img> → Adicionar imagem


● src → indicar o local onde está a imagem
<img src=”endereço da imagem”>

<a> → Ancorar (adicionar) hiperligações (links)


● href → indicar o link ou arquivo que vai ser direcionado
<a href=”link ou arquivo”>Texto</a>

Atributos
→Todos os elementos de HTML podem conter atributos,
em alguns eles são obrigatórios
→São propriedades adicionais para configurar ou ajustar o
comportamento dos elementos
→Os atributos são fundamentais na relação do HTML com
o CSS e com o JavaScript
→Os atributos são inseridos nas Tag’s de abertura dos
elementos
Exemplo: Hiperlink reference (href) → <a href=”#”>Texto</a>

Sintaxe: os atributos podem conter um nome e um valor como no


caso do href, ou somente o valor
<tag nome_do_atributo= valor> ou <tag nome_do_atributo>

Tipos de atributos
→Globais: podem ser aplicados em todos os elementos HTML
→Específicos: podem ser aplicados somente em alguns elementos

Principais Atributos
id → identifica de forma única um elemento no documento HTML
class → lista de classes de um elemento HTML
src → indicar o local para onde vai
href → indicar o link ou arquivo que vai ser direcionado
target=”_blank” → abre a página em outra aba no browser
alt=“descrição” → mostra descrição da imagem caso ela não
carregue

Elementos Semânticos
→São elementos de HTML que permitem agrupar outros
elementos
→Não tem conteúdo
→Permite melhorar a organização da página HTML
→Criam condições para melhor uso do CSS

<header> → serve para indicar o cabeçalho, podendo conter logos,


links e etc
<header>Cabeçalho</header>

<div> → Agrupador genérico de outros elementos


<div> Tag’s </div>

<nav> →É usada para indicar uma seção de links de navegação


em uma página
<nav> Links </nav>

<section> →É usado para definir uma seção no html


<section>conteúdo da seção</section>

<article> →É usada para marcar um conteúdo que se constitua em


um componente autossuficiente em uma página, aplicação ou site
e que possa ser distribuído ou reusado de forma independente
<article>parágrafos</article>

<footer> →Marcar o rodapé


<footer>rodapé</footer>

Formas de Aplicação de Estilos no HTML


→Estilos em linha (inline): dentro da tag se utiliza o atributo style
que permite que estilos sejam definidos para os dados que
acompanham a Tag
Ex:
<p style=“color: red;”>Texto em vermelho</p>
*Recomendado evitar o uso, somente em casos específicos

→Uso do elemento <style>: dentro da Tag head é possível utilizar


a tag <style>…</style> dentro dela pode ser escrito os padrões de
CSS que serão utilizados pela página
Ex:
<style>
.titulo{
color: red;
}
</style>

*Recomendado evitar o uso caso haja outras páginas associadas,


dificulta a mudança de estilo padronizada

→Importação de folhas de Estilo: podemos dentro da tag <head>


importar um arquivo de estilos (.css) por meio da Tag <link>
Ex:
<link ref=”stylesheet” href=”arquivo.css”>
*Uso recomendado, permite a utilização da mesma folha de estilo
em diferentes páginas e facilita a mudança de estilo sincronizada
entre eles

Favicon
Favorite Icon é uma imagem identificadora do site, fica localizada
ao lado do title no brownser

→Adicionar favicon:
<link rel="shortcut icon" href="imagem.png" type="image/x-icon">

Você também pode gostar