faculdades integradas santa cruz curso básico de html professor: julio eduardo martins

Faculdades Integradas Santa Cruz

Curso Básico de HTMLProfessor: Julio Eduardo Martins

Introdução

O que é uma página WEB?• É um documento composto por texto e

códigos especiais chamados tags;

• Pode conter também sons, imagens, links para outros documentos e códigos de programação;

• As páginas podem ser codificadas em um editor de texto comum.

Introdução (2)

As páginas são “interpretadas” pelo Browser e apresentadas;

O código HTML é independente de plataforma, sistema operacional ou hardware.

HTML

HTML não é uma linguagem em si; Trata-se apenas de comandos

específicos para formatação e apresentação de componentes gráficos.

HTML - Hypertext Markup Language

HTML (2)

Todo o HTML é estruturado em tags. Uma tag tem o seguinte formato:

• <nome_da_tag>Conteudo_da_tag</nome_da_tag>

A grande maioria das tags ocorre em pares e pode ser utilizada de maneira aninhada.

Estrutura Básica de uma Página

<html>

<head>

<title> Titulo da Página </title>

</head>

<body>

<p> Parágrafo 1 </p>

</body>

</html>

Cabeçalhos

Tags de cabeçalho servem para definir tópicos em um documento HTML.

Os tipos de cabeçalhos podem ser:• <h1> Cabeçalho nível 1 </h1>

• <h2> Cabeçalho nível 2 </h2>





Espaços

Espaços em branco não tem sentido em HTML. O browser substitui qualquer seqüência de espaços por um único espaço simples.

Se quisermos forçar uma sequencia de espaços em branco, devemos substituir o espaço em branco por &nbsp

Quebras de Linha

Para produzir uma quebra de linha em HTML não basta apenas dar <enter> no código.

É preciso utilizar um caractere especial:

<br/>

Parágrafos

Uma forma mais simples e correta de produzir um parágrafo em um documento HTML (melhor do que colocar uma sequencia de quatro &nbsp) é utilizar a tag:

<p> Conteúdo_do_Parágrafo</p>

Formatação de Caractere

<b> Texto_em_negrito </b> <i> Texto_em_itálico </i> <u> Texto_sublinhado </u> <sup> Texto_sobrescrito </sup> <sub> Texto_subscrito </sub> <blink> Texto_piscante </blink>

Formatação de Caractere (2)

<em> Texto_com_ênfase </em> <strong> Texto_mais_enfático </strong> <big> Tamanho_grande </big> <small> Tamanho_pequeno </small>

Texto sem formatação

Algumas vezes se faz necessária a apresentação de texto sem qualquer formatação adicional realizada pelo browser. Para isto, temos a tag:

<pre> Texto_sem_formatação </pre>

Formatação de Fonte

Para formatar a fonte dos carteres a tag é:

<font size=n face=nome color=cor>

Onde:

n : Tamanho da fonte;

face: Nome da fonte;

color: cor da fonte em RGB ou nome.

Listas

Existem alguns tipos de listas. São elas:• Listas Ordenadas: <ol>

• Listas Não Ordenadas: <ul>

Listas (2)

Exemplos:• Listas Ordenadas:

<ol>

<li> Item 1 </li>

<li> Item 2 </li>

</ol>

Listas (3)

Exemplos (2):• Listas não ordenadas:

<ul>

<li> Item 1 </li>

<li> Item 2 </li>

</ul>

Links

Links em uma mesma página:• É possível criar links direcionados para uma

mesma página. Para tal, primeiramente é necessário criar uma âncora (ponto de referência para onde o link irá apontar)

<a name=“#Nome da âncora”>Texto em destaque</a>

Links (2)

Links em uma mesma página (2):• Para criar um link que aponte para a âncora

previamente estabelecida a sintaxe é:

<a href=“#Nome da âncora”>Texto usado como hipertexto</a>

Links (3)

Links para outras páginas:• Para direcionar um link para uma outra página basta

usar a sintaxe:

<a href=“intro.htm”>Introdução</a><a href=“conceitos.htm#parte2”>Conceitos Básicos</a>

<a href=“biblio/refer.htm”>Referências</a>

<a href=“www.juliomartins.net/index.htm”>Legal</a>

Imagens

Geralmente GIF, JPG ou PNG Sintaxe:

<IMG SRC=“arquivo.gif”>

<IMG ALiGN=“top/middle/BOTTOM” SRC=“paisagem.jpg”>

<IMG SRC=“arquivo.gif” HEIGHT=100 WIDTH=165>

<A HREF=“livro-bd.htm”> <IMG SRC=“korth.gif”> </A>

Cores e Fundos

Você pode alterar as cores e alguns padrões alterando atributos da tag <body>:

<body bgcolor=#000000 text=#EEEEBB link=#33CCFF vlink=#CC0000>

<BODY BACKGROUND=“marmore.gif”>

Endereço e Rodapé de Página

Para dar informações adicionais sobre a data de criação e o autor da página usamos a tag:

<address> Informações </address>

Tabelas

As tabelas servem para a apresentação de informação de forma tabular, porém são também um poderoso recurso para a definição do layout de uma página HTML.

Tabelas (2)

Tags: <table> : Indica o início de uma tabela <caption>: Cria uma legenda para a tabela <tr> : (table row) – Cria uma linha na tabela <td> : (table data) : Define os dados de uma

celula <th> : (table header) : Faz o mesmo que o

<td> porém com a formatação diferenciada

Tabelas (3)

Atributos importantes:• align : Define o alinhamento horizontal da célula

• valign: Define o alinhamento vertical da célula

• colspan: Indica quantas colunas da tabela a célula deve ocupar

• rowspan: Indica quantas linhas da tabela a célula deve ocupar

• border: Define a espessura da borda da tabela

• width: Define a largura da tabela (em % ou absoluta)

Frames

Os frames (molduras) permitem apresentar mais de uma página HTML na tela, simultaneamente.

É necessário, inicialmente, criar um documento especial que contém as definições de todas as janelas.

Frames (2)

<frameset cols=tamanho frameborder=1/0 framespacing=espaçamento

rows=tamanho> <frame name=nome scrolling=yes/no

noresize src=endereço>. . .</frameset>

Frames (3)

Exemplo

<html>

<frameset cols=30%, * >

<frame name=“menu” SRC=“indice.htm”>

<frame name=“texto”>

</frameset>

</html>

Frames (4)

<html>

<head><title>Menu Principal</title>

<base target=“texto”>

</head>

<body>

. . .

</body>

</html>

Dúvidas

Faculdades Integradas Santa Cruz

Curso Avançado de HTMLProfessor: Julio Eduardo Martins

faculdades integradas santa cruz curso básico de html professor: julio eduardo martins

Documents