Cef 63 Apin Ufcd 0792

Escola Secundária Jaime Moniz
Curso de Educação e Formação - Tipo 6 Nível 4

Técnico/a de Informática - Sistemas
Disciplina: Aplicações Informáticas
UFCD 0792 Criação de páginas para a web em

hipertexto
Turma CEF 63 12º Ano
Professor:
João Paulo Quintal Fernandes
Avaliação
• Testes – 50%
• Trabalhos – 40%
• Atitudes – 10%
UFCD 0792 Criação de páginas para a web em hipertexto
Objetivos:
1. Elaborar páginas para a web, com recurso a
hipertexto.
Conceitos gerais de HTML
O HTML (Hypertext Markup Language) é interpretado pelos web
Browsers.
World Wide Web Consortium: http://www.w3.org/

W3schools: http://W3schols.com
Tags: comandos embutidos no documento e têm indicadores de

início e de fecho.
Estrutura básica de uma página em HTML:
<html>
<head>
Cabeçalho do documento
</head>
<body>
Corpo do documento
</body>
</html>
Tags e elementos
• Todos os comandos de HTML são criados através
do uso de tags. A maioria das instruções tem tag de
abertura e tag de fecho. Cada tag está entre os
sinais de menor”<“ e maior “>”. A tag de fecho tem
o símbolo ”/” logo a seguir do sinal de menor: </ >.
• As tags têm atributos que podem assumir
determinados valores. Exemplos:
– <ol type=“a”>.
– <font size=1>.
– <body bgcolor=“#000000>.
As Tags html, head, title, body
• As tags <html> e </html> indicam ao browser
onde começa e termina um documento em html.
• As tags <head> e </head> indicam o início e o fim
do bloco de documento situado antes do bloco
body.
• As tags <body> e </body> delimitam o corpo do
documento. Estas contêm as tags e o texto que
formam o conteúdo principal da página web, tais
como cabeçalhos, parágrafos, listas, imagens e
hiperligações.
Cabeçalhos
• O HTML tem seis níveis de cabeçalhos,
identificados com as tags H1, H2, H3, H4, H5,
H6, do maior para o menor tamanho.
• Estas tags podem ter opcionalmente o
atributo align que pode assumir os valores:
left, right, center e justify.
Cabeçalhos
<html>
<head>
<title> Título da página </title>
</head>
<body>
<H1> Texto 1</H1>
<H2> Texto 2</H2>
<H3> Texto 3</H3>
<H4> Texto 4</H4>
<H5> Texto 5</H5>
<H6> Texto 6</H6>
</body>
</html>
Parágrafos
<html>
<head>
<title> Título da página </title>
</head>
<body>
<p> Isto é um parágrafo
<p> Isto é um parágrafo </p>
</body>
</html>
Quebras de linha
<html>
<head>
<title> Exemplo </title>
</head>
<body>
<p>
Isto<br> é um parágrafo com <br> uma quebra de linha
</p>
</body>
</html>
Divisões
<html>
<head>
<title>Exemplo</title>
</head>
<body>
<p>A tag hr desenha uma linha horizontal:</p>
<hr>
<p>Isto é uma linha horizontal</p>
</body>
</html>
Lista Ordenada
<html>
<head>
<title>Lista Ordenada</title>
</head>
<body>
<h4>Desportos</h4>
<ol>
<li>Futebol</li>
<li>Andebol</li>
<li>Basquetebol</li>
<li>Ginástica</li>
<li>Natação</li>
</ol>
<body>
</html>
Lista Ordenada com atributos
<html>
<head>
<title>Lista Ordenada</title>
</head>
<body>
<h4>Planetas</h4>
<ol>
<li>Planetas Superiores</li>
<ol type=“I”>
<li>Marte</li>
<li>Júpiter</li>
<li>Saturno</li>
<li>Úrano</li>
<li>Neptuno</li>
<li>Plutão</li>
</ol>
<li>Planetas Inferiores</li>
<ol type=a>
<li>Mercúrio</li>
<li>Vénus</li>
</ol>
</ol>
</body>
</html>
Lista desordenada
<html>
<head>
<title>Lista desordenada</title>
</head>
<body>
<h4>Lista desordenada</h4>
<ul>
<li>Ferrari</li>
<li>Porsche</li>
<li>Lexus</li>
</ul>
</body>
</html>
Lista de definição
<html>
<head>
<title>Lista de definição</title>
</head>
<body>
<dl>
<dt><b>Planetas superiores</b></dt>
<dd>têm uma órbita maior que a terra.</dd>
<dt><b>Planetas inferiores</b></dt>
<dd>são os que se encontram mais próximo do Sol.</dd>
</dl>
</body>
</html>
Uso das cores
• Os códigos e cores em HTML têm por base a codificação
RGB (Red, Green, Blue) e podem ser referenciadas de três
maneiras distintas:
– Pelo nome da cor em inglês. Exemplo: black.
– Pelo sistema de numeração hexadecimal. Exemplo: #FFFF00.
– Pelo sistema de numeração decimal. Exemplo: rgb(2,255,0).
• Uma paleta de cores pode conter mais de 16 milhões e
cores: 255*255*255=16581375 cores.
• Para o desenvolvimento de páginas web é recomendável
utilizar um conjunto de 216 cores, que correspondem às
cores seguras. São consideradas seguras porque é
garantido que sejam visualizadas em todos os sistemas sem
serem alteradas. A tabela das cores seguras pode ser
consultada em:
– http://www.w3schools.com/html/html_colors.asp.
– http://www.colorpicker.com.
Definição do fundo da página
<html>
<head>
<title> Definição do fundo de página</title>
</head>
<body bgcolor:”#00ff00”>
<font color=“#cc00ff”>Isto é o documento principal de HTML.</font>
</body>
</html>
Texto nas páginas em HTML
<html>
<head>
<tile>Tamanhos</title>
<head>
<body>
<font size=1>Viva a escola</font><br>
</body>
</html>
Uso das imagens
• É possível colocar variados formatos de imagens nos
documentos HTML, embora, por questões de eficiência
e tamanho, os formatos mais comuns sejam o JPEG, o
GIF e o PNG.
• A inserção de imagens num documento HTML é feita
através da tag <img>:
– O atributo src é o mais importante da tag <img>. Este
atributo especifica a localização da imagem que se
pretende mostrar.
– O atributo align permite o alinhamento das imagens em
relação aos elementos circundantes. Pode assumir um dos
seguintes valores: right, left, top, middle, bottom,
absmiddle, texttop, baseline, absbottom.
Alinhamento de imagens
<html>
<head>
<title>alinhamento com imagens</title>
</head>
<body>
<p>
<img src=“Folhas.jpg” align=“center”>
<p>Outono </p>
Uma da quatro estações do ano
</p>
</body>
</html>
Atributos das imagens: altura e largura
• Para definir as dimensões, altura e largura das
imagens inseridas num documento HTML,
utilizam-se os atributos height (altura) e width
(largura), em percentagem ou em píxeis. Desta
forma, cria-se um espaço reservado para a
visualização da imagem que se deseja inserir no
documento. Contudo, não se alteram as
dimensões reais da imagem nem o tamanho do
seu ficheiro. Deve-se respeitar a proporção da
imagem real, para que esta não seja mostrada
distorcida.
Hiperligações
• A principal característica do HTML é a possibilidade de
criar hiperligações (hypertext, hyperlink ou link) para
secções do mesmo documento e para outros
documentos internos ou externos.
• Em HTML para criar hiperligações utiliza-se o atributo
href na tag <a> inicial, tendo o cuidado de deixar um
espaço antes do atributo href. Exemplos:
– Sintaxe de uma hiperligação a partir do texto:
<a href=“nome do documento”> texto</a>
– Sintaxe de uma hiperligação a partir de uma imagem:
<a href=“nome do documento”><img src=“nome da
imagem”></a>
Hiperligação a partir de texto
<html>
<head>
<title>Hiperligação a partir do texto</title>
</head>
<body>
<p>
hiperligação a partir do <a href=“desporto.html”>texto</a>
para um documento interno.
</p>
</body>
</html>
Hiperligação a partir de uma imagem
<html>
<head>
<title>Hiperligação a partir de uma imagem</title>
</head>
<body>
<p>
hiperligação a partir <a href=“desporto.html”><img src=“folha.jpg”></a>de uma
imagem.
</p>
</body>
</html>
Hiperligação para documentos
• Documentos externos ao website:
<a href= “http://www.nome do website/nome do
documento”>texto</a>
• Documentos internos ao website:
<a href=“nome do documento”>o documento situa-se
na mesma pasta da página atual</a>
<a href=“../nome do documento”>o documento situa-se
na pasta imediatamente anterior</a>
• Secções internas do documento:
<a name=“nome do marcador”>texto associado ao
marcador</a>
<a href=“#nome do marcador”>texto associado à
hiperligação</a>
Hiperligação para documentos
• Hiperligação para uma secção de um documento
contido na pasta anterior à do documento actual:
<a href=“../nome do documento#nome do
marcador”>texto associado à hiperligação</a>
• Hiperligação para secção de um documento
contido noutro website:
<a href=“http://www.nome do website/nome do
documento#nome do marcador”>texto associado à
hiperligação<a/>
• Para endereços de e-mail:
<a href=“mailto:endereço do correio electrónico do
destinatário”>texto associado à hiperligação</a>
Hiperligação a partir do texto
<html>
<head>
<title>Hiperligação partir do texto</title>
</head>
<body>
<p>
hiperligação a partir do
<a href=“desporto.html”>texto</a> para um documento
interno.
</p>
</body>
</html>
Hiperligação a partir de uma imagem
<html>
<head>
<title>Hiperligação a partir de uma imagem</title>
</head>
<body>
<p>
hiperligação a partir
<a href=“desporto.html”><img src=“folha.jpg”></a>de uma
imagem.
</p>
</body>
</html>
Hiperligação para um documento externo
<html>
<head>
<title>Hiperligação para um documento de outro
site</title>
</head>
<body>
<a href= “http://www.rede-nonio.min-
edu.pt/icic/agrup_ovar/historia_castelos.htm”>
<p>
Castelos de Portugal</a>
</p>
</body>
</html>
Marcadores e hiperligações no mesmo documento de
HTML 1ª parte
<html>
<head>
<title>Hiperligações para marcadores</title>
</head>
<body>
<p><b><a name=“inicio”>Dias da semana: </a>Dias úteis /<a href=“#fds”> Dias
do fim-de-semana</a></b></p>
<br>
<br>
<br>
<i>Segunda-feira</i> <br>
<b>Primeiro dia útil da semana, após o fim-de-semana.</b>
<br>
<br>
<br>
HTML 2ª parte
<i>Terça-feira</i> <br>
<b>Segundo dia útil da semana, após o fim-de-semana.</b>
<br>
<br>
<br>
<i>Quarta-feira</i> <br>
<b>Terceiro dia útil da semana, após o fim-de-semana.</b>
<br>
<br>
<br>
<i>Quinta-feira</i> <br>
<b>Quarto dia útil da semana, após o fim-de-semana.</b>
<br>
<br>
<br>
HTML 3ª parte
<i>Sexta-feira</i> <br>
<b>Quinto e último dia útil da semana.</b>
<br>
<br>
<br>
<i><a name=“fds”>Fim-de-semana</a></i>
<br>
<br>
<br>
<i>Sábado</i> <br>
<b>Primeiro dia do fim-de-semana.</b>
<br>
<br>
<br>
HTML última parte
<i>Domingo</i> <br>
<b>Segundo e último dia do fim-de-semana.</b>
<br>
<br>
<br>
<b><a href=“#inicio”>Voltar ao início</a></b>
</body>
</html>
Tabelas
• A criação de tabelas tem como objetivo principal
o enquadramento de informação e contribuir
para a sua formatação, ao dispor os vários
elementos de forma tabular.
• Para definir tabelas nos documentos HTML,
utilizam-se as tags <table> e </table>. Estas tags
podem conter as seguintes tags:
– <caption> e </caption>.
– <tr> e </tr>.
– <th> e </th>.
– <td> e </td>.
Tabelas
Tag Descrição
<table> Define a tabela
<th> Define um cabeçalho numa linha da tabela
<tr> Insere uma linha numa tabela
<td> Insere uma célula numa linha da tabela
<caption> Define uma legenda associada a uma tabela
Tabelas
Atributo Valor Descrição
align left; center; rigt Define o alinhamento horizontal.
valign top; middle; bottom Define o alinhamento vertical.
bgcolor rgb(x,x,x);#xxxxxx; NomeDaCor Especifica a cor de fundo.
Border píxeis Especifica a espessura da linha de
contorno.
Cellpadding píxeis Especifica o espaço em branco entre o
texto e os limites da célula, definindo a
área do texto.
Cellspacing Píxeis Especifica o espaço em branco que fica
entre as células adjacentes.
Summary Texto Fornece um sumário da tabela para ser
lido por software de síntese de voz.
Width Píxeis; % Especifica a largura da tabela

Colspan Número Une horizontalmente duas ou mais
células
Rowspan Número Une verticalmente duas ou mais células
Estrutura básica das tabelas
• Passos para conceber a estrutura básica das tabelas
num documento HTML:
– definir a tabela e os seus atributos com a tag <table>;
– definir as linhas e os seus atributos com a tag <tr> por
cada linha desejada;
– definir as colunas e os seus atributos com as tags <th> e
<td>, inserindo numa linha as células por cada coluna
desejada.
• Nas células de uma tabela pode-se colocar todo o tipo
de informação: textos, imagens, listas e tabelas.
• Por defeito uma tabela é alinhada à esquerda do
documento e não cria linhas delimitadoras para as suas
células sem a utilização do atributo border.
Estrutura básica de uma tabela
• O número total de colunas de uma tabela é
identificado a partir do maior número de
células definido para cada linha.
• Os browsers têm dificuldade em lidar com
células vazias. Para contornar esta limitação
são inseridos espaços nas células que não
contêm qualquer tipo de informação (&nbsp).
Tabela com três linhas e três colunas
<html>
<head>
<title>estrutura básica de uma tabela </title>
</head>
<body>
<p> Exemplo de uma tabela </p>
<table border=2>
<tr>
<td>Linha 1 coluna 1</td>
</tr>
Tabela com três linhas e três colunas 2ª parte
<tr>
<td>&nbsp</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Tabelas inseridas em tabelas
<html>
<head>
<title>Tabelas inseridas em tabelas</title>
</head>
<body>
<table border=1>
<tr> <th>Tabela Principal</th> <tr>
<tr>
<td>
<table border=1>
<tr> <th>Subtabela 1</th> </tr>
<tr> <td>Item 1.1</td>
<td>Item 1.2</td> </tr>
</table>
</td>
Tabelas inseridas em tabelas 2ª parte
<td> </td>
<td>
<table border=1>
<tr> <th>Subtabela 2</th> </tr>
<td>Item 2.2</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Tabelas com limites
<html>
<head>
<title>Tabelas Border</title>
</head>
<body>
<table border=4>
<tr> <th>tabela principal</th> <tr>
<tr>
<td>
<table border=5>
<tr> <td>Subtabela 1</td> </tr>
</table>
</td>
Tabelas com limites 2ª parte
<td> </td>
<td>
<table border=5>
<td>Item 2.2</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Espaçamentos
<html>
<head>
<title>Espaçamento entre células</title>
</head>
<body>
<table border=4>
<tr>
<td>
<table border=5 cellspacing=20>
</table>
</td>
Espaçamentos 2ª parte
<td> </td>
<td>
<table border=5 cellspacing=20>
<td>Item 2.2</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Espaçamento entre o texto e os limites
<html>
<head>
<title>Área de texto nas células</title>
</head>
<body>
<table border=4>
<tr>
<td>
<table border=5 cellspacing=20 cellpadding=20>
</table>
</td>
Espaçamento entre o texto e os limites 2ª parte
<td> </td>
<td>
<table border=5 cellspacing=20 cellpadding=20>
<td>Item 2.2</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Dimensões
<html>
<head>
<title>Dimensões</title>
</head>
<body>
<table border=3 width=600>
<tr>
<td>
<table border=6 cellspacing=6 width=200>
</table>
</td>
Dimensões 2ª parte
<td>
<table border=6 cellspacing=6 width=200>
<td>Item 2.2</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Alinhamento
<html>
<head>
<title>Alinhamento de tabelas</title>
</head>
<body>
<table align=“right” border width=80%>
<tr>
<td>
<table border=2 cellspacing=6 width=100%>
<tr align=“center”>
<td>Subtabela 1</td> </tr>
<td>Item 1.1</td>
</table>
</td>
Alinhamento 2ª parte
<td with=20%> </td>
<td>
<tr align=“right”>
<td>Subtabela 2</td> </tr>
<tr align=“right”>
<td>Item 2.1</td>
</table>
</td>
</tr>
</table>
</body>
</html>
Fusão de células
<html>
<head>
<title>Alinhamento de tabelas</title>
</head>
<body>
<table border width=80%>
<caption align=“bottom”> Fusão de células </caption>
<tr> <th colspan=3>tabela principal</th> <tr>
<tr>
<td>
<td colspan=2>Subtabela 1</td> </tr>
<td>Item 1.1</td>
<td>Item 1.3</td>
</table>
</td>
Fusão de células 2ª parte
<td with=20%> </td>
<td>
<td>Item 2.1</td>
<td rowspan=2>Item 2.2</td>
</table>
</td>
</tr>
</table>
</body>
</html>
Fundos
<html>
<head>
<title>Fundo da tabela</title>
</head>
<body>
<table border width=80% bgcolor=“rgb(0,255,0)”>
<caption align=“bottom”> Tabelas encapsuladas </caption>
<tr> <th colspan=3>tabela principal</th> <tr>
<tr>
<td>
<table border=2 cellspacing=6 width=100% bgcolor=“rgb(0,0,255)”>
<tr align=“center” bgcolor=“rgb(255,0,0)”>
<td>Item 1.1</td>
<td>Item 1.3</td>
</table>
</td>
Fundos 2ª parte
<td with=20%> </td>
<td>
<table border=2 cellspacing=6 width=100% bgcolor=“rgb(0,0,255)”>
<td>Item 2.1</td>
<td rowspan=2 bgcolor=“rgb(255,0,0)”>Item 2.2</td>
</table>
</td>
</tr>
</table>
</body>
</html>
Hiperligação para diferentes secções do documento
<html>
<head>
<title>Estações</title>
</head>
<body>
<h3>Estações do Ano</h3>
<p><a href=“alinhamento.html” target=“documento”>Página
principal</a></p>
<p><a href=“alinhamento.html#primavera”
target=“documento”>Primavera</a></p>
<p><a href=“alinhamento.html#verao”
target=“documento”>Verão</a></p>
<p><a href=“alinhamento.html#outono”
target=“documento”>Outono</a></p>
<p><a href=“alinhamento.html#inverno”
target=“documento”>Inverno</a></p>
</body>
</html>
Fundamentos do planeamento de
um website
• Regras para um website eficaz.

• Planear o website.
• Conceber websites para diferentes
suportes.
• Editores de páginas web.
Regras para um website eficaz
• Sobre o conteúdo:
– Categorização dos conteúdos: o desenvolvimento de um
website é efetuado a partir de um tema previamente
definido. Depois de conhecido o tema, é necessário
decompô-lo em diversos conteúdos que devem ser
organizados por categorias e subcategorias. A estrutura
lógica dos conteúdos permite maior flexibilidade,
escalabilidade e convertibilidade, facilitando a expansão
e renovação do website.
– Condensação: os conteúdos devem ser apresentados de
forma simples e direta aos utilizadores que constituem o
público-alvo do website.
• Sobre a forma:
– Consistência e previsibilidade: correspondem a um
conjunto de características que são definidas para os
elementos que constituem as páginas de um website,
tais como o esquema organizativo, os tipos de letra e
o tamanho dos tipos de letra. O conjunto das
características definidas para os elementos que
constituem as páginas pode ser caracterizado através
da criação de folhas de estilo.
• Consistência: a definição das características permite ao
utilizador identificar de forma mais fácil as páginas como
pertencentes ao mesmo website.
• Previsibilidade: a definição das características permite ao
utilizador localizar de forma fácil e rápida os principais
elementos que podem estar presentes em todas as páginas,
como o menu de navegação, botões e imagens.
• Sobre a forma:
– Uso racional da tecnologia: inicialmente, o
desenvolvimento das páginas web, utilizando apenas o
HTML, resultava em páginas com conteúdos estáticos. O
desenvolvimento de páginas com conteúdos dinâmicos e
interativos era feito recorrendo à tecnologia CGI (Common
Gateway Interface). Atualmente existe um conjunto de
novas tecnologias , tanto do lado do servidor como do
lado do cliente, que permitem criar conteúdos dinâmicos
e interativos de forma diferente.
– Recurso a imagens: a utilização de imagens pode ajudar a
tornar as páginas web mais atrativas e legíveis, podendo
contribuir para um aumento do número de utilizadores.
• Sobre a forma:
– Combinação de cores: a utilização da cor é um aspeto muito
importante a ter em atenção no desenvolvimento das páginas
web. As cores e as suas combinações devem ser selecionadas
para obter conjuntos harmoniosos. Estas combinações devem
ser efetuadas segundo um conjunto de regras:
• Cores com o mesmo tom;
• Cores com o mesmo nível de saturação e luminosidade;
• O fundo de uma página web deve contrastar com o texto e
os elementos gráficos da mesma.
Modelos de páginas
• Modelo de página é um conjunto predefinido de formatos de texto
e gráficos, a partir da qual se criam as páginas do website. Os
modelos de páginas web podem incluir tabelas de esquema, estilos,
formatação, gráficos ou outros elementos de página. Os programas
editores de páginas web do tipo WYSIWYG (What You See Is What
You Get) têm um conjunto de páginas modelo, permitindo de
forma fácil a sua criação.
• Página de abertura: corresponde à primeira página que é carregada
no browser quando se acede a um website. Exemplo site da
Universidade do Porto.
• Página inicial: corresponde à página que é carregada no browser
após a página de abertura, quando se acede a um website. Em
muitos websites, devido à inexistência da página de abertura, a
página inicial e a página de abertura são a mesma. Os ficheiros
onde são guardados os dados das páginas de abertura ou inicial são
designados por default ou index e têm extensões htm ou html.
Modelos de páginas
• FAQ: a página de FAQ (Frequently Asked Questions) é utilizada nos
websites para apresentar um conjunto de questões e as respetivas
respostas. As questões são formuladas de acordo com o contexto e
o assunto em que se insere o website.
• Contactos: a página de contactos permite divulgar dados sobre a
empresa, a instituição ou outras entidades. Normalmente, os dados
referidos nesta página podem ser o endereço, o telefone, o e-mail,
o fax e outros.
• Mapa do site: a página mapa do site mostra aos utilizadores a
organização hierárquica das páginas do website, através de uma
representação esquemática. A partir desta página é possível
navegar nas páginas do website, através dos seus links, à
semelhança do índice de um livro.
• Livro de visitas: a página do livro de visitas é constituída por um
formulário, que depois de preenchido é enviado para o servidor do
website. A entidade pode requerer dados do utilizador e
comentários ao website.
• Páginas de conteúdo: correspondem às páginas web utilizadas para
divulgar informação relacionada com os objetivos do website, sob a
forma de texto, gráfico, vídeo e/ou som.
Planear o website
• O planeamento do desenvolvimento de um website
pode passar por um conjunto de etapas, tais como:
– Estabelecer os seus objetivos;
– Refletir sobre a audiência;
– Listar as características pretendidas para o site;
– Organizar a estrutura do site;
– Desenhar o esquema de navegação;
– Definir a estrutura das páginas.
Conceber websites para diferentes suportes
• Servidores Linux e Windows: um servidor web
ou servidor http é um computador que
disponibiliza informação, sob a forma de
páginas web, através da rede, aos
computadores clientes.
• Para implementar um servidor web é
necessário instalar software específico:
– IIS da Microsoft para o Windows;
– Apache para Linux e para Windows.
Servidores
servidor Características funcionalidades
• Open source • Linguagens suportadas: Perl, PHP, ASP,
• Elevada fiabilidade Pyton.
• Excelente desempenho • CGI: todo o tipo de linguagens
• Suporte de várias plataformas suportadas pelo SO.
Apache • Suporte do protocolo HTTP 1.1 • Bases de dados: todas através de
SQL/ODBC.
• Controlo de acesso e encriptação:
ficheiros com password, NIS, LDAP,
certificados e SSL.
• Manipulação flexível de URL.
• Proprietário da Microsoft • Linguagens suportadas: ASP, ActiveX
• Razoável fiabilidade • CGI: PHP, Perl, linguagens suportadas
• Bom desempenho pelo SO.
IIS • Suporte de plataforma • Bases de dados através de SQL/ODBC.
Windows • Controlo de acesso e encriptação: SMB,
• Suporte de protocolo HTTP 1.1 LDAP, certificados e SSL.
• Uso de ISAPI DLL para manipular URL.
Os diferentes browsers
• Inicialmente, a Internet funcionava apenas com documentos
de texto criados utilizando hipertexto. Com a evolução para
documentos com conteúdos gráficos, houve necessidade de
melhorar os browsers, para permitir a visualização e a
navegação nessas páginas.
• Os browsers são desenvolvidos para funcionarem em
diferentes sistemas operativos e têm de interpretar
tecnologias para além do HTML, como o ActiveX, o DHTML, o
XML, o XHTML, o Flash, o HTTP, o HTTPS, o CSS, o JavaScript,
os plug-ins e os Java Applets.
• Exemplos:
– Microsoft Edge;
– Mozilla Firefox;
– Google Chrome;
– Safari;
– Opera.
Editores de páginas web
• Os editores de páginas web são programas desenvolvidos para
permitirem ao utilizador criar websites e páginas web. Existem
editores do tipo WYSIWYG ou HTML.
• Editores WYSIWYG (What You See Is What You Get): são programas
para criação e edição de websites com aparência profissional que
permitem ver, na sua janela, o aspeto com que o site vai ser
apresentado após a sua publicação. Todo o código necessário ao
funcionamento do website é automaticamente gerado sem que o
utilizador se aperceba. Exemplo: Dreamweaver.
• Editores HTML: editores de texto simples, sem formatação, embora
alguns deles apresentem funcionalidades acrescidas como a
geração automática de código, inserção de códigos e a pré-
visualização da página. A utilização deste tipo de editores implica o
conhecimento prévio da sintaxe do HTML. Exemplos: bloco de
notas, notepad++.

Cef 63 Apin Ufcd 0792

Enviado por

Dados do documento

Descrição 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

Cef 63 Apin Ufcd 0792

Enviado por

Direitos autorais:

Formatos disponíveis

Escola Secundária Jaime Moniz

Curso de Educação e Formação - Tipo 6 Nível 4

UFCD 0792 Criação de páginas para a web em

Turma CEF 63 12º Ano

World Wide Web Consortium: http://www.w3.org/

Tags: comandos embutidos no documento e têm indicadores de

Width Píxeis; % Especifica a largura da tabela

• Regras para um website eficaz.

Você também pode gostar