PARTE 1 HyperText Markup Language Linguagem de Marcao

  • Slides: 20
Download presentation
PARTE 1 Hyper-Text Markup Language Linguagem de Marcação de Hipertexto Professora: Sónia Santos 1

PARTE 1 Hyper-Text Markup Language Linguagem de Marcação de Hipertexto Professora: Sónia Santos 1

O Código HTML �Formata os documentos no sentido de definir onde e com que

O Código HTML �Formata os documentos no sentido de definir onde e com que aspecto é apresentada a informação. �É feito em ficheiros de texto simples, como por exemplo o Bloco de Notas. �No Internet Explorer, podemos visualizar o código HTML, no menu VER > Código fonte. 2

O Código HTML �Entre os elementos mais comuns que aparecem no corpo de uma

O Código HTML �Entre os elementos mais comuns que aparecem no corpo de uma página temos os seguintes: ◦ Parágrafos de texto (texto simples, texto formatado, texto artístico (ex: wordart) ◦ Tabelas ◦ Links ou Hiperlinks (ligações no mesmo documento ou a outros documentos ou sites) ◦ Imagens, animações gráficas, vídeo, som, etc. 3

Significados �Hipertexto: texto com ligações a outro �Markup: Código baseado em marcas ou etiquetas

Significados �Hipertexto: texto com ligações a outro �Markup: Código baseado em marcas ou etiquetas (tags em inglês) �A maior parte das linguagens de programação utiliza expressões em inglês. 4

Tipos de sites � Hoje em dia, temos dois tipos distintos de Web sites:

Tipos de sites � Hoje em dia, temos dois tipos distintos de Web sites: ◦ Web sites estáticos: compostos por páginas ou documentos HTML. ◦ Web sites dinâmicos: são constituídos por páginas em HTML ou DHTML (Dynamic HTML) ou outra linguagem como por exemplo Java, Java script, ASPActive Server Pages, PHP- Personal Home Page ext. 5

Criação de Página Web em HTML <HTML> <HEAD> <TITLE> Título da página </TITLE> </HEAD>

Criação de Página Web em HTML <HTML> <HEAD> <TITLE> Título da página </TITLE> </HEAD> <BODY> Aqui entra o conteúdo principal da página </BODY> </HTML> 6

Parâmetros do <BODY> �Entre <body> e </body> fica tudo o que são configurações e

Parâmetros do <BODY> �Entre <body> e </body> fica tudo o que são configurações e informações da página. Nesta TAG podemos ainda acrescentar parâmetros como: ◦ <body bgcolor=“…”> para definir uma cor de fundo para a página. Entre as aspas coloca-se o código da cor. ◦ <body background=“…”> para definir uma imagem de fundo para a página. Entre aspas coloca-se o nome completo (nome e extensão, ex: fundo. jpg) ou o caminho para o ficheiro. 7

Parâmetros do <BODY> ◦ <body text=“…”> para definir uma cor do texto para a

Parâmetros do <BODY> ◦ <body text=“…”> para definir uma cor do texto para a página. Entre as aspas coloca-se o código da cor ou o nome em inglês. ◦ <body link=“…”> para definir a cor dos links na página. Convém que os links sejam de cor diferente do resto do texto para se diferenciar. ◦ <body vlink=“…”>para definir a cor dos links que já foram visitados. Convém que os links sejam de cor diferente do resto do texto para se diferenciar. 8

Parâmetros do <BODY> ◦ Quando definimos uma cor pelo nome por exemplo Azul. �<body

Parâmetros do <BODY> ◦ Quando definimos uma cor pelo nome por exemplo Azul. �<body bgcolor=“blue”> ◦ Podemos escurecer a tonalidade. �<body bgcolor=“darkblue”> ◦ Podemos iluminar (aclarar) a tonalidade. �<body bgcolor=“lightblue”> 9

Exemplo <html> <head> <title> A minha primeira página </title> </head> <body bgcolor=“blue”> </body> </html>

Exemplo <html> <head> <title> A minha primeira página </title> </head> <body bgcolor=“blue”> </body> </html> Exemplo 1. html 10

Tamanho da letra Os títulos implicam também uma separação em parágrafos, portanto, tudo o

Tamanho da letra Os títulos implicam também uma separação em parágrafos, portanto, tudo o que for escrito dentro de <h 1> e </h 1> (ou qualquer outro títulos ) será colocado em um parágrafo independente. Podemos ver como se apresentam alguns títulos a seguir: <html> <head> <title>Todos os cabeçalhos</title> </head> <body> <h 1> Isto é um título de 1º nível </h 1> <h 2> Isto é um título de 2º nível </h 2> <h 3> Isto é um título de 3º nível </h 3> <h 4> Isto é um título de nível 4</h 4> <h 5> Isto é um título de nível 5</h 5> <h 6> Isto é um título de nível 6</h 6> </body> </html> 11

Formatação dos títulos Os títulos podem ser alinhados ao Centro, direita ou esquerda. <h

Formatação dos títulos Os títulos podem ser alinhados ao Centro, direita ou esquerda. <h 1 Align=Center>Isto é um título de 1ºnível e centrado </h 1> <h 4> Align=Right> Isto é um título de 4ºnível e alinhado à direita </h 4> Exemplo 2. html 12

Formatação dos estilos de texto �Itálico <i>Texto em itálico</i> �Sublinhado <u> Texto em sublinhado</u>

Formatação dos estilos de texto �Itálico <i>Texto em itálico</i> �Sublinhado <u> Texto em sublinhado</u> �Subscrito e sobrescrito <sup> e </sup> para os sobrescritos <sub> e </sub> para os subscritos �Negrito <b>Isto só está em negrito<i>e isto em negrito e itálico</i></b> 13

FORMATAÇÃO DO TIPO DE LETRA Existem 7 níveis de tamanhos distintos numerados de 1

FORMATAÇÃO DO TIPO DE LETRA Existem 7 níveis de tamanhos distintos numerados de 1 a 7 por ordem crescente. Escolheremos portanto um valor size="1" para a menor letra ou size="7" para a maior. <font face=Comic Sans MS> Este texto tem outra letra</font> �Tamanho <font size=4>Este texto é maior</font> 14

FORMATAÇÃO DA COR A cor do texto pode ser definida através do atributo cor.

FORMATAÇÃO DA COR A cor do texto pode ser definida através do atributo cor. Cada cor é por sua vez definida por um número hexadecimal que está composto por três partes. Cada uma destas partes representa a contribuição do vermelho, verde e azul sistema RGB. Por outro lado é possível definir 15

Cores Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver

Cores Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow 16

Formatação do texto �Text: Este atributo serve para atribuir a cor do texto da

Formatação do texto �Text: Este atributo serve para atribuir a cor do texto da página. Por padrão é o preto. <body text=#rrggbb > 17

Exemplo: �<font color="red">Este texto está em vermelho</font> 18

Exemplo: �<font color="red">Este texto está em vermelho</font> 18

Atributos para páginas As páginas HTML podem ser construídas com uma variedade de atributos

Atributos para páginas As páginas HTML podem ser construídas com uma variedade de atributos que lhe podem dar um aspecto à página muito personalizado. Podemos definir atributos como a cor de fundo, a cor do texto ou dos links. 19

Atributos para fundos �Bgcolor: especificamos uma cor de fundo para a página. <body bgcolor=“blue”>

Atributos para fundos �Bgcolor: especificamos uma cor de fundo para a página. <body bgcolor=“blue”> <body bgcolor=#FFCCCC> � Background: serve para indicar a inserção de uma imagem como fundo da página. <body background="fundo. jpg"> 20