profª. elizangela m. f. da silva responsável: carlos alberto da silva

Profª. Elizangela M. F. da Silva

CURSO DE HTML E DREAMWEAVER

Responsável: Carlos Alberto da Silva

INTRODUÇÃO O que é uma Página Web?

- Página Web - textos e códigos especiais (tags).

- Além da informação textual, esse documento pode conter imagens, som, animação e vídeo.

- A página pode conter links ou ligações para outras páginas armazenadas no seu micro ou qualquer local da web (home page).

BROWSERSComo se acessa uma Página Web? O acesso de uma página Web é feito através de um

programa chamado browser.

EDIÇÃO DE DOCUMENTOS HTML

Personalização do Dreamweaver

CONFIGURAÇÃO DE UM SITE

LAYOUT

GERENCIAR ARQUIVOS E PROPRIEDADES DO SITE

HTML? COMO É A LINGUAGEM HTML

A HTML ( Hypertext Markup Language) , na sigla em inglês, significa Linguagem de Marcação de Hipertexto. É uma linguagem dedicada à construção de páginas Web.

COMO SÃO OS TAGS HTML?

- As tags podem ser apresentadas em pares ou individuais.

- Os tags são identificados por serem envolvidos pelos sinais “<>” ou “</>”.

O formato genérico de um tag é:

<Nome da tag>texto</Nome da tag>

DOCUMENTO HTML BÁSICO E SEUS COMPONENTES

<html> <head> <title>Título da Página</title> </head><body> Área para os comandos da linguagem....</body></html>

EXEMPLO I

<html> <head> <title>Minha Primeira Página</title> </head><body> Meu Curso de HTML e Dreamweaver.</body></html>

SALVE COMO: .HTM OU HTML

ALINHAR O TEXTO Marca uma divisão lógica de um documento e

é uma formatação bastante usada atualmente.

<div> e </div>

O atributo de alinhamento é: align .

As opções de alinhamento são: center - texto centralizado right - texto à direita left - texto à esquerda

EXEMPLO II<html> <head> <title>Minha Primeira Página</title> </head><body>

<div align="center"> Meu Curso de HTML e Dreamweaver.</div>

<div align=“right"> Estou aprendendo meus primeiros

comandos. .</div> <div align=“left"> Aprendi agora o comando div. .</div>

</body></html>


SEPARADORES QUEBRA DE LINHA

Quando queremos mudar de linha, usamos o elemento <BR>.

EXEMPLO III<html> <head> <title>Minha Primeira Página</title> </head><body> Só existem dois dias no ano em que nada pode ser feito. <br>

Um chama-se "ontem" e o outro "amanhã". <br>

Portanto, "hoje "é o dia certo para amar, acreditar, fazer <br>

e principalmente viver.

</body></html>


PARÁGRAFOS Não é possível adicionar parágrafo em HTML apenas

pressionando a tecla Enter.

A tag de parágrafos são: <p> e</p>

O atributo de alinhamento é: align .

As opções de alinhamento são: center - texto centralizado right - texto à direita left - texto à esquerda

EXEMPLO IV<html> <head> <title>Minha Primeira Página</title> </head><body>

<P ALIGN=CENTER> Assim como os trens, as boas idéias às vezes chegam com atraso. </P>

<P ALIGN=RIGHT> Assim como os trens, as boas idéias às vezes chegam com atraso. </P>

<P ALIGN=LEFT> Assim como os trens, as boas idéias às vezes chegam com atraso. </P>

</body></html>


CABEÇALHOS O cabeçalho é uma tag que define o tamanho de cada linha

de um texto da página. O tamanho do cabeçalho pode ser diferenciado.

As tags de parágrafos são:

<Hn> e </nH>

n – deve ser substituído por um número de 1 a 6.

<h1> cabeçalho de nível 1</h1>






EXEMPLO V<html> <head> <title>Minha Primeira Página</title> </head><body>

<h1> Cabeçalho de nível 1 </h1><br>

<h2> Cabeçalho de nível 2</h2><br>





</body></html>


ESTILOS DE TEXTOTodos os comandos que alteram o estilo do texto são do tipo

liga-desliga, ou seja, precisam ser especificados em pares, marcando o início e o fim do texto que sofrerá a formatação.

- Negrito - <B></B> - aplica o estilo negrito.

- Itálico - <i></i> - aplica o estilo itálico.

- Sublinhado - <u></u> - aplica um sublinhado.

- Big - <BIG></ BIG > - aumenta a fonte e aplica negrito.

- Small - <SMALL></ SMALL > - reduz e altera a fonte.- Sobrescrito - <SUP></SUP>- eleva o texto na linha e

diminui seu corpo.- Subscrito - <SUB></SUB> - rebaixa o texto na linha e

diminui seu corpo.- Pulsante - <BLINK></BLINK> - Faz com que o texto pisque.

EXEMPLO VI<html> <head> <title>Minha Primeira Página</title> </head><body>

<p>Bem vindos à minha página estilizada!

<p>Minha página não contém <i>imagens</i>, mas pelo menos está <b>estilizada</b>.

<p>Deveria haver mais textos aqui porém eu ainda não decidi o que escrever.<br>

</body></html>


Exercício: Escolha um texto e aplique os efeitos aprendidos em sala

(alinhamento de texto , quebra de linha, parágrafos, cabeçalhos, estilo de texto), não esqueça de postar no moodle.

Sugestão: Hino da Gloriosa PONTE PRETA ... Conhecida como a MACACA.

Dedicatoria: como o time mais antigo do Brasil ... 1905 !!!

profª. elizangela m. f. da silva responsável: carlos alberto da silva

Documents