02 - HTML

Thiago Miranda dos Santos Souza

HTML

Autoria Web

Introdução a HTML e as principais tagsda linguagem


Conteúdos

Os materiais de aula, apostilas e outras informaçõesestarão disponíveis em:

www.thiagomiranda.net

Autoria Web

Objetivos

� Apresentar a HTML� Apresentar as principais Tags do HTML


Autoria Web

Evolução


Autoria Web

Evolução


Autoria Web

Atualmente

HTML


Autoria Web

•HTML significa linguagem de marcação de hipertextos.

•Utilizada para construção de páginas para Internet.

•Na forma de documentos interpretados por aplicativosdenominados navegadores (browser).

•Um hipertexto é um documento que combina textos,imagens, sons, vídeos, animações, interações e ligações comoutros documentos.

HTML


Autoria Web

•Hyper Text Markup Language: –não é uma linguagem de programação; - Linguagem de Marcação•Documento HTML: –formato texto, portanto pode ser feito em qualquer editor simples de texto; –extensão .htm ou .html; –visualizado no navegador (eg. firefox, ie, chrome);

HTML


Autoria Web

Um documento HTML é formado através deetiquetas (TAGs), as quais são constituídas naforma <...>

A maioria das etiquetas tem uma correspondentede abertura <...> e outra de fechamento </...>

Ex: <HTML> </HTML>

Podem ser escritas em maiúsculas ou minúsculas.

Tags HTML


Autoria Web

Tags HTML são palavras-chave entre colchetes angulares como <html>

Tags HTML normalmente vêm em pares, como <strong> e </ strong>

A primeira tag em um par é a tag de início, a segunda tag é a tag final

Marca inicial e final são também chamados de abertura tags e fechamento de tags

Documentos HTML = Páginas Web

Sintaxe HTML


Autoria Web

•Tag: <tag> ... </tag>

•Tag com atributos: <tag atributo1=“...” atributo2=“...”> ... </tag>

•Tag sem marcador final: <tag />

•Tag com atributos e sem marcador final: <tag atributo1=“...” atributo2=“...” />

Exemplo HTML


Autoria Web

Abrir o Bloco de Notas e digitar o seguinte texto:<html>

<head></head>

<body><h1>Página de Teste</h1>

<p> Olá!Este é um exemplo de código HTML.</p>

</body></html>• Criar uma pasta com seu nome e Salvar o arquivo com o nome exemplo1.html

Exemplo HTML


Autoria Web

O texto entre <html> e </html> descreve a página web

O texto entre <body> e </ body> é o conteúdo da página visível

O texto entre <h1> e </ h1> é exibida como um título

O texto entre <p> e </ p> é exibido como um parágrafo

HTML


Autoria Web

HTML


Autoria Web

No cabeçalho vão informações como:

<title> para definição do título da página.

<style> definição de formatação do conteúdo.

<script> programação de conteúdo dinâmico.

<link> para ligação de arquivos externos.

<meta> define meta informações da página.

HTML


Autoria Web

Comentários

 para inserção de comentários.

<!– Primeira página em HTML --><html><head>

<title>Página teste...</title></head><body>

Primeira página em HTML.<hr color="red">

</body></html>

HTML


Autoria Web

Títulos

<H1> ... </H1>, <H2> ... </H2> e <H3> ... </H3>

<html><head>


<h1>Título em formato H1</h1><h2>Título em formato H2</h2><h3>Título em formato H3</h3>

</body></html>

HTML


Autoria Web

Parágrafos

<p> ... </p>Define um parágrafo com quebra de linha e inserção de uma linha deseparação entre os parágrafos.

<html><head>


<p>Este é um parágrafo.</p><p>Este é um segundo parágrafo.</p>

</body></html>

HTML


Autoria Web

<em>... </em> Ênfase com a mesma formatação do Itálico

<strong> </strong> Ênfase com a mesma formatação do Negrito

<sup> ... </sup> sobrescrito.

<sub> ... <sub> subscrito.

<blockquote> ... </blockquote> identado.

<address> ... </address> endereço.

<del>...</del> Risca o Texto

Formatação do texto

HTML


Autoria Web

Tag <br> - Quebra de Linhas

Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag <br>

HTML


Autoria Web

Tag <hr> - Linha

Uma tag que desenha uma linha na tela. Pode ser utilizada para separar conteúdo.

Listas Ordenadas

• Uma lista ordenada inicia com <ol> e finaliza com </ol>– Cada item da lista inicia por <li> e finaliza com </li>

<ol><li>Café</li><li>Leite</li>

</ol>

HTML

Listas OrdenadasHTML

• Uma lista ordenada consiste em criar uma lista com numeração.

• A tag para criar uma lista ordenada é a tag ol (ordened list).

• Cada item da lista deve ter o comando li (list item):

<ol>

<li> Primeiro item da lista </li>

<li> Segundo item da lista </li>

</ol>

Listas Ordenadas

• O comando ol tem os seguintes parâmetros:• Start � escolher em que posição sua lista ira iniciar

• Type � escolher o tipo de numerador pra lista entre: 1 / i / I / a / A

<ol start=“3” type=“a”>



</ol>

HTML

Listas Desordenadas

• Uma lista desordenada consiste em criar uma lista com marcadores.

• A tag para criar uma lista ordenada é a tag ul(unordened list).

• Cada item da lista deve ter o comando li (list item):

<ul>



</ul>

HTML

Listas Desordenadas

• O comando ul tem os seguintes parâmetros:• Type � escolher o tipo de marcador pra lista entre:

square / circle / disc

<ul type=“square”>



</ul>

HTML

Endereços na Internet

• Um objeto na internet possui uma URL• –• Também conhecido como endereço eletrônico• Exemplos:• Portal do IFBA: • http://www.ifba.edu.br

• Facebook: • http://www.facebook.com.br/

• Site de busca do Google: • http://www.google.com

Autoria Web

Endereço Absoluto

• O endereço absoluto inclui o protocolo, o domínio e o caminho no servidor para a página ou localização do recurso

• http://www.ifba.edu.br/index/informatica.html

• É independente da página atual.

Autoria Web

Endereço Relativo

• É o endereço para a localização do objeto a partir da página atual

• Usará o domínio e o caminho da página que está visualizando para “montar” a URL dos objetos

Autoria Web

HTML


Autoria Web

Hyperlinks

<a> ... </a>

Permite a criação de elos entre páginas ou seções de um hiperdocumento.

HTML


Autoria Web

Criação de elos entre documentos

<!– Primeira página em HTML -->

<html>

<head>

<title>Página teste...</title>

</head>

<body>

<a href="segundo.html>Leva a próxima página.</a>

</body>

</html>

HTML


Autoria Web

Imagens

<img src=“arquivo” alt=“texto alternativo”/>

Permite a inserção de imagens em um documento HTML.

src define o caminho e nome do arquivo a ser inserido.

alt define um texto alternativo caso a imagem não seja carregada.

Ex: <img src="barco.gif" alt=“Um barco" />

HTML

• ALT

– O parâmetro alt é utilizado para quando a imagem não for carregada exibir um texto(no mesmo local da imagem) ALTernativo, este texto também é exibido quando o cursor estiver sobre a imagem.

<img src=“bat.jpg” alt=“Cartaz do Batman”>

Imagens

– WIDTH e HEIGHT

– Atributos de dimensão – largura e altura – daimagem, em pixels. Grande parte dos

– Uma das vantagens de se usar esses atributos éque o browser pode montar mais rapidamente aspáginas, por saber de antemão o espaço quedeverá ser reservado a elas.

– Formato:

– <img src="endereço_imagem” alt="descrição_imagem“

width="largura" height="altura“>

HTML

HTML


Autoria Web

Com o comando img podemos inserir uam imagem na página.

<img src=“caminho\da\imagem”>

Existem parâmetros para:Alterar altura e largura: height / width , os valores devem ser em pixel(não

utiliza nenhum simbolo) ou porcentagem (%)

<img src=“foto.jpg” width=“10%”>

<img src=“foto.jpg” width=“100”>

No primeiro exemplo a imagem será exibida com á largura de 10% de seu tamanho original, já no segundo a imagem será

exibida com á largura de 100 pixels.

Imagens

Criando Tabelas

• Uma tabela é formada por linhas e colunas

Linha

Coluna

HTML

Criando Tabelas

• Para criar a tabela anterior segue código:<table>

<tr>

<td> .... </td>

<td> .... </td>

<td> .... </td>

</tr>

<tr>

<td> .... </td>

<td> .... </td>

<td> .... </td>

</tr>

</table>

HTML

<table> ABRE UMA TABELA<tr> ABRE UMA LINHA

<td> Segunda </td> UMA COLUNA<td> Terça </td> UMA COLUNA

<td> Quarta </td> UMA COLUNA<td>Quinta</td> UMA COLUNA

</tr> FECHA UMA LINHA</table> FECHA A TABELA

HTML

02 - HTML

Documents

Transcript of 02 - HTML