Noções Iniciais em HTML - Apostila

AULA 1
doctype -
indica ao navegador como ele deverá interpretar o documento.
<!doctype html>
Tag
marca o inicio e o final de um bloco de códigos.

tags de abertura <>
tags de fechamento </>
Algumas tags podem ainda conter atributos ou ter diferentes formas de fechamento.
tag geral de html - dentro da qual estarão contidos todos os outros elementos.
abertura <html>
fechamento </html>
Seções básicas do html: <head> e <body>
<head> e </head>
<body> e </body>
Atributos
Tipo de conteúdo que pode vir dentro de uma tag
Ex: <tag atributo="valor"> conteúdo da tag </tag>
ou <tag atributo="valor" /> (outro tipo de fechamento, selfclose).
Estrutura básica de um documento html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
Head - Tudo que é importante para o navegador, mas não aparece no conteúdo da página.
Ex: Título da página, o que aparece no navegador, conjunto de caracteres utilizados pelo
navegador para ler o documento html (charset).
obs. para inserir o charset, utilizamos a tag <meta>. Esta tag é utilizada para outras coisas na
seção head.
<meta charset="utf-8" /> (esta é outra forma de fechar a tag) - esse tipo de fechamento se
chama selfclose.
seria equivalente a escrever <meta charset="utf-8"></meta>
tipos de codificação:
unicode
utf-8 (mais novo e queridinho no mercado, teoricamente mais universal.)
ANSI
Body - tudo que é visível na página.
Exercício 1 - Criar título para página (head)
Exercício 2 - Colocar texto no conteúdo (body)
Exercício 3 - definir conjunto de caracteres (codificação)
EXEMPLO
<!doctype html>
<html>
<head>
<title> pagina ifpe </title>
<meta charset="utf-8" />
</head>
<body>
meu primeiro site ifpe
</body>
</html>
--------------------------------------------------------------------
AULA 2
Alternativas para o bloco de notas:

Sublime Text (compatível com todas as plataformas, bom custo beneficio).
Brackets
Atom
Vim
Algumas tags
<h1></h1> : título
<p></p> : parágrafo
<br /> : quebra de linha
<em></em> : itálico
<strong>
Exercício 4: inserindo tags no nosso documento html
EXEMPLO
<!doctype html>
<html>
<head>
<title> pagina ifpe </title>
<meta charset="utf-8" />
</head>
<body>
<h1>meu primeiro site ifpe</h1>
<p>Noções iniciais em <em>html</em> com testes no <strong>Dreamweaver<strong/>. <br
/>Site sem design.<p>
</body>
</html>
Para ver o código fonte de páginas e exercitar o olhar, basta clicar com o botão direito do
mouse e selecionar exibir código fonte ou opção semelhante.
ATENÇÃO!! Elementos pais, filhos e irmãos.

Ao fazer um documento html, o organizamos em tabulações, cada tag segue uma tabulação.
Quanto mais dentro do código, mais para direita.
_____________________________________________________________________________
AULA 3 - Listas em Html
Tipos de lista:
Não ordenada: criada em tópicos, sem numeração.

<ul></ul> tag lista não ordenada
<li></li> ícones da lista
<h1>lista não ordenada</h1>

<ul>
<li>marca</li>
<li>cores</li>
<li>concorrentes</li>
</ul>
Ordenada: criada em tópicos, com numeração.

<ol></ol> tag lista ordenada
<li></li> icones da lista
<h1>Lista Ordenada</h1>
<ol>
<li>marca</li>
<li>cores</li>
<li>concorrentes</li>
</ol>
Lista de definição: traz tópicos escritos e as suas definições.

<dl></dl>
<dt></dt>
<dd></dd>
<h1>Lista de definição</h1>
<dl>
<dt>marca</dt>
<dd>signo visual que representa uma empresa, produto ou serviço.</dd>
<dt>cores</dt>
<dd>elemento visual que enfatiza, diferencia a cria atmosfera significativa</dd>
<dt>concorrentes</dt>
<dd>principais similares no mercado</dd>
</dl>
Texto
A lucidez perigosa
Estou sentindo uma clareza tão grande

que me anula como pessoa atual e comum:
é uma lucidez vazia, como explicar?
assim como um cálculo matemático perfeito
do qual, no entanto, não se precise.
Estou por assim dizer

vendo claramente o vazio.
E nem entendo aquilo que entendo:
pois estou infinitamente maior que eu mesma,
e não me alcanço.
Além do que:
que faço dessa lucidez?
Sei também que esta minha lucidez
pode-se tornar o inferno humano
- já me aconteceu antes.
SO - otimização para motores de busca
PARTE ii
<h1></h1> deve haver só um, o mais importante, e que indicará caminhos de busca pelo
google.
<h2></h2> importância secundária
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Os tamanhos podem ser personalizados por css. Podemos deixar por exemplo o h5 no mesmo
tamanho do <h6>
A ideia é sempre colocar de acordo com a importância de conteúdo.
tags meta - para acrescentar descrição do site:
description
<meta name="description" content= "descrição completa do site, respeitando limite de
caracteres" />
--->>> mostrar no buscador google, descrições dos sites.
keywords
<meta name="keywords" content= "ifpe, computação, gráfica, design" />
author
<meta name="author" content= "Swanne Almeida" />
Aula 5 - Tags de organização principais do html5
<header> cabeçalho do site. Parte que é igual para todas as páginas.

<nav> menu de navegação. Esta tag pode vir dentro da tag header ou da tag footer,
dependendo de como se estrtura o documento.
<section> seção do site.
<article> espécie de seção independente do site
<aside> conteúdo lateral.
<footer> rodapé
As tags header e footer também podem ser utilizadas dentro de uma section ou de um article.
SOBRE BLOCKQUOTES E LINKS
Tag <blockquote> - serve para citações

<blokquote> <p> "esta é a minha citação </p> </blockquote>
Esta tag é interessante no contexto css, pois permite uma formatação diferenciada.
INSERINDO IMAGENS
<img src="img/imagem.png" />

Por padrão, a imagem é inserida no tamanho original. Podemos alterar através da tag width.
<img src="img/imagem.png" width="100" />
O mais correto é definir largura via css ou ainda utilizar o tamanho das imagens de forma
correta, para não sobrecarregar o navegador desnecessariamente.
um item que não pode faltar na tag de imagem é o alt, que vai descrever o elemento.
<img src="img/imagem.png" alt="a cidade de fortaleza" />
essa descrição serve para os buscadores e indicar a informação para o usuário, enquanto a
imagem está carregando.
Ao invés do diretório, também podemos linkar a imagem com o link, no local do diretorio. essa
prática não é recomendada, é mais indicado baixar a imagem e colocar num diretório.
dentro da tag img, também podemos colocar uma espécie de mousewover descrito utilizando
a tag title.
<img src="img/imagem.png" alt="a cidade de fortaleza" title="acesse" />
INSERINDO LINKS
Utilizamos links, quando queremos inserir uma imagem, passar para outra página ou ir para
outra seção, etc.
<a href="destino.html">Texto do link</a>

o href direciona uma pessoa a algum lugar.
o name, nomeia
Dentro dessa tag, ainda podemos definir a forma como o novo conteúdo irá se abrir:
_self: mesma página. (já é o padrão).
_blank: nova aba.
<a href="destino.html" target="_blank">Texto do link</a>
Exercício - Criando página 1 e página 2 e vinculando páginas.

<a href="pagina1.html">Página 1</a> - <a href="pagina1.html">Página 2</a>
Trabalhando com pastas

Quando se coloca o nome do arquivo ex: pagina1.html, a procura é feita no diretório atual da
página trabalhada. Caso o destino esteja em uma pasta diferente, precisamos especificar o
caminho.
<a href="nome diretorio/nomedoarquivo.html">Texto do link </a>
Exercício - Voltando da página1, para a página inicial.

Quando vamos entrar em um diretório, colocamos no destino o nome da pasta e a página.
Quando saímos de um diretório, utilizamos o ../
<a href="../home.html">Texto do link </a>
Para entrar em subpastas, se coloca todo o caminho percorrido:

<a href="site/páginas/pagina1.html">Texto do link </a>
Para sair de subpastas, utilizamos o ../ em sequência.

<a href="../../pagina1.html">Texto do link </a>
Exercicio:
Montar página com titulo, texto e link para pagina seguinte e página voltar. Inserir imagem na
página seguinte.
AULA 7 - TAGS DE FORMATAÇÃO

No html5, a linguagem se foca na semântica e o css é que identifica o estilo da página.
<b></b>
<strong></strong> (html5 - informa ao buscador que o trecho é importante)
<i></i>
<em></em> (html5 - informa ao buscador que é uma enfase, que deve ser lido mais
enfaticamente)
- insere espaço em branco entre palavras.
<pre></pre> mantém a disposição do texto no parágrafo, de acordo com o colocado no

código.
Alinhamento - usamos mas está defasado:

<p align="center"> ou <center> </center>
<p align="right">
<p align="left"> e justify
O que mais está defasado??

<u> underline, agora fazemos com css
<s> tachado, agora utilizamos a tag <del>
Utilizando css em trechos e palavras dentro de um parágrafo span

A tag span é utilizada quando queremos mudar apenas o estilo de palavras ou trechos.
<span style="text-decoration: underline";> palavra </span>
<style= "propriedade: valor";>
<span style="text-decoration: underline";> --- sublinhado

<span style="text-decoration: overline";> linha acima do texto
<span style="text-decoration: linethrough";> tachado
<span style="text-decoration: none";> nenhum
<span style="font-weight: normal";>

<span style="font-weight: bold";>
<span style="font-weight: bolder";>
<span style="font-weight: valor";>
<span style="text-align: center ";>

<span style="text-align: left ";>
<span style="text-align: right ";>
<span style="text-align: justify;">
ou fazer dentro de uma tag como um todo: exemplo h1, parágrafo

<p style="text-align: justify;"> </p>
style="text-align: center; color: red; font-weight: bold"

background-color
INTEGRANDO HTML COM CSS
Exercício: aplicando estilo em linha (in line)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meu primeiro site</title>
</head>
<body>
<a href=" pagina1.html" style ="color: red;">Texto do link </a>
</body>
</html>
propriedade ="atributo: valor;" O ponto e vírgula é colocado indicando o final do comando.
Exercício: retirando sublinhado do link.
<!doctype html>
<html>
<head>
</head>
<body>
<a href=" pagina1.html" style ="color: red; text-decoration: none;" >Texto do
link </a>
</body>
</html>
"propriedade= atributo: valor;"

exemplo: "style= font-size: 24px;"
Formas de aplicar o estilo CSS
1. Estilo em linha - o atributo é colocado dentro da tag html que deseja-se formatar. -
prevalece em relação ao head
2. Dentro do head - os atributos são colocados dentro do head. prevalece sobre tags antigas
de html.
3. Utilizando um arquivo a parte css.
o estilo que vem por ultimo é o que prevalece.
Dentro do head
<!doctype html>
<html>
<head>
<style type="text/css"> ou usar <style> </style>
a { color: red;
text-decoration: none;
font-size: 18px;
font-family: helvetica, calibri;
}
</head>
<body>
<a href=" pagina1.html" style ="color: red; text-decoration: none;" >Texto do
link </a>
</body>
</html>
Utilizando um arquivo css separado.
new file> estilo.css
a { color: red;
text-decoration: none;
font-size: 18px;
font-family: helvetica, calibri;
}
Salvamos em um arquivo css separado e depois linkamos ele dentro da seção head da página.
>>dentro de head
<link rel="stylesheet" type="text/css" href="estilo.css" />
Para utilizarmos atributos modificados dentro do css, utilizamos as classes

e os ids. O id só pode ser utilizado uma vez na página em um único
elemento, já a classe pode ser utilizada em vários elementos dentro de
uma mesma página.
Para ID, utilizamos hashtag e para classes ponto.
se quisermos especificar ainda a seção, colocamos a tag antes de .link

Exemplo: a.link
Inserindo background no css - colocar imagem em png com fundo transparente
body { background-image: url

background-repeat: no-repeat / repeat-x ou repeat-y
background-color:
}
Como seria o background em html?

Dentro da tag body, colocaríamos propriedades de cor e imagem.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Background
O atributo background configura o plano de fundo para uma imagem. O valor do atributo é a URL da imagem que você quer
usar. Se a imagem é menor do que a janela do navegador, a imagem será repetida até preencher a janela inteira do navegador.
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
Como colocamos o background em css?

Propriedade Descrição Valores
background Propriedade para configurar todas as background-color,
propriedades do plano de fundo em background-image,
uma declaração background-repeat
background-attachment,
background-position
background-attachment Especifica se uma imagem de plano de scroll, fixed
fundo é fixa ou rola com o resto da
página
background-color Configura a cor do plano de fundo de color-rgb, color-hex, color-
um elemento. name, transparent
background-image Configura uma imagem como plano de url, none
fundo.
background-position Configura a posição inicial de uma top left, top center, top right,
imagem de plano de fundo. center left, center center,
center right, bottom left,
bottom center, bottom right,
x-% y-%, x-pos y-pos.
background-repeat Estabelece se uma imagem de plano de repeat, repeat-x, reapeat-y,
fundo será repetida ou não. no-repeat
Inserindo background html
Alinhar tabela
<table align="center"> ou usar as tags <center></center>
ou no css utilizar margin: 0 auto.
table{ margin: 0 auto;
}

Noções Iniciais em HTML - Apostila

Enviado por

Dados do documento

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

Noções Iniciais em HTML - Apostila

Enviado por

Direitos autorais:

Formatos disponíveis

AULA 1

indica ao navegador como ele deverá interpretar o documento.

marca o inicio e o final de um bloco de códigos.

Seções básicas do html: <head> e <body>

Estrutura básica de um documento html

Body - tudo que é visível na página.

Exercício 1 - Criar título para página (head)

Exercício 2 - Colocar texto no conteúdo (body)

Exercício 3 - definir conjunto de caracteres (codificação)

Alternativas para o bloco de notas:

Exercício 4: inserindo tags no nosso documento html

ATENÇÃO!! Elementos pais, filhos e irmãos.

AULA 3 - Listas em Html

Não ordenada: criada em tópicos, sem numeração.

<h1>lista não ordenada</h1>

Ordenada: criada em tópicos, com numeração.

Lista de definição: traz tópicos escritos e as suas definições.

Estou sentindo uma clareza tão grande

Estou por assim dizer

SO - otimização para motores de busca

A ideia é sempre colocar de acordo com a importância de conteúdo.

tags meta - para acrescentar descrição do site:

Aula 5 - Tags de organização principais do html5

<header> cabeçalho do site. Parte que é igual para todas as páginas.

Tag <blockquote> - serve para citações

<img src="img/imagem.png" />

<a href="destino.html">Texto do link</a>

<a href="destino.html" target="_blank">Texto do link</a>

Exercício - Criando página 1 e página 2 e vinculando páginas.

Trabalhando com pastas

Exercício - Voltando da página1, para a página inicial.

Para entrar em subpastas, se coloca todo o caminho percorrido:

Para sair de subpastas, utilizamos o ../ em sequência.

AULA 7 - TAGS DE FORMATAÇÃO

&nbsp; - insere espaço em branco entre palavras.

<pre></pre> mantém a disposição do texto no parágrafo, de acordo com o colocado no

Alinhamento - usamos mas está defasado:

O que mais está defasado??

Utilizando css em trechos e palavras dentro de um parágrafo span

<span style="text-decoration: underline";> --- sublinhado

<span style="font-weight: normal";>

<span style="text-align: center ";>

ou fazer dentro de uma tag como um todo: exemplo h1, parágrafo

style="text-align: center; color: red; font-weight: bold"

INTEGRANDO HTML COM CSS

Exercício: aplicando estilo em linha (in line)

propriedade ="atributo: valor;" O ponto e vírgula é colocado indicando o final do comando.

Exercício: retirando sublinhado do link.

"propriedade= atributo: valor;"

new file> estilo.css

Para utilizarmos atributos modificados dentro do css, utilizamos as classes

se quisermos especificar ainda a seção, colocamos a tag antes de .link

body { background-image: url

Como seria o background em html?

Como colocamos o background em css?

Inserindo background html

Você também pode gostar

- insere espaço em branco entre palavras.