MANUAL - 0768 - Criação de Sites WEB

ÁREA DE FORMAÇÃO 481 – Ciências informáticas
REFERENCIAIS DE FORMAÇÃO Operador/a de Informática
CURSO /UFCD 0768 - Criação de sites WEB
FORMADOR/A Rui Ronda
FICHA TÉCNICA
Tipologia de
Manual de Formação (RTP_ÁREA_COD.UFCD)
Recurso
UFCD/Curso: 0768 - Criação de sites WEB
Área de Presencial
481 – Ciências informáticas Forma de Organização
Formação: A distância
Modalidade de
Formação Contínua Carga Horária 50 horas
Formação
Ativos empregados/desempregados com idades igual ou superior a 18 anos (à data de início da
formação) e idade inferior a 18 anos, desde que, comprovadamente inseridos no mercado de trabalho.
Público Alvo: Ativos empregados (independentemente das suas habilitações, mas com a habilitação mínima exigida
para a frequência da UFCD)
Ativos desempregados, desde que detentores de habilitações iguais e superiores ao ensino secundário
Pré-Requisitos: N/ Aplicável
Objetivos
Criar documentos em hipertexto.
Gerais: Desenvolver e alojar um site na Internet.
Objetivos
Desenvolver introdução à Hyper Text Markup Language
específicos: Analisar servidores
Conteúdos
Introdução à Hyper Text Markup Language e Servidores
Programáticos
Cod. RTP / Versão Autor/a Versão Inicial Revisões Data aprovação

RTP_347_1141 V.1.0 MANUAL
Rui Ronda DO/A
17-02-2021 FORMANDO/A
0 26-02-2021
ÍNDICE
ENQUADRAMENTO...........................................................................................................................5
NAVEGADORES...............................................................................................................................6
Servidor............................................................................................................................................7
Dominio............................................................................................................................................8
O QUE É FTP....................................................................................................................................9
COMO OCORRE A TRANSFERÊNCIA DE ARQUIVOS.......................................................................9
SOFTWARE FTP............................................................................................................................9
SERVE SIDE E CLIENT SIDE...........................................................................................................10
O QUE É HTML?.............................................................................................................................11
TAGS HTML...............................................................................................................................11
ELEMENTOS HTML....................................................................................................................11
ESTRUTURA DO CÓDIGO HTML.................................................................................................12
<HEAD>................................................................................................................................12
ESVAZIAR ELEMENTOS HTML...................................................................................................13
ATRIBUTOS HTML......................................................................................................................14
TÍTULOS HTML..........................................................................................................................14
TÍTULOS SÃO IMPORTANTES......................................................................................................15
LINHAS DE HTML.......................................................................................................................15
COMENTÁRIOS EM HTML..........................................................................................................16
FORMATAÇÃO DE TEXTO HTML................................................................................................16
SINTAXE HTML LINK.................................................................................................................17
LINKS DE HTML - O ATRIBUTO ALVO.........................................................................................17
LINKS DE HTML - O ATRIBUTO NOME.........................................................................................17
IMAGENS HTML - A TAG <IMG> E O ATRIBUTO SRC..................................................................18
SINTAXE PARA DEFINIÇÃO DE UMA IMAGEM:........................................................................18
IMAGENS HTML - O ATRIBUTO ALT.........................................................................................18
IMAGENS HTML - ALTURA E LARGURA DE UMA IMAGEM.......................................................18
TABELAS HTML.........................................................................................................................19
ATRIBUTO BORDER DA TABELA.............................................................................................19
CABEÇALHO DA TABELA........................................................................................................19
LISTAS EM HTML.......................................................................................................................21
Tag Descrição........................................................................................................................21
IFRAMES HTML..........................................................................................................................22
FORMULÁRIOS HTML.................................................................................................................23
HTML FORM TAGS.....................................................................................................................24
FORMULÁRIOS HTML - O ELEMENTO DE ENTRADA..................................................................25
CAMPOS DE TEXTO.................................................................................................................25
CAMPO SENHA.......................................................................................................................25
BOTÕES DE RÁDIO..................................................................................................................25
CHECKBOXES.......................................................................................................................25
BOTÃO SUBMETER.................................................................................................................26
TEXTAREA...............................................................................................................................27
DEFINIÇÃO E USO...................................................................................................................27
SELECT E OPTION......................................................................................................................28
DEFINIÇÃO E USO...................................................................................................................28
VALORES DE CORES..................................................................................................................29
NOMES DE CORES SUPORTADAS POR TODOS OS NAVEGADORES...........................................29
TAGS HTML...................................................................................................................................35
TAG Descrição........................................................................................................................35
FONTES BIBLIOGRÁFICAS....................................................................................................37
ENQUADRAMENTO
O manual de formação que se apresenta incide sobre os conteúdos programáticos da Unidade de

Formação de Curta Duração: 50 Horas Código: 0768 incluída nos seguintes Referenciais de Formação:
Operador/a de Informática
Tem como objetivo servir de apoio às sessões de formação quer em regime presencial quer em regime
de formação à Distância das ações a implementar pela Penhas – Consultoria e Eventos.
NAVEGADORES
Um navegador de rede, navegador web, navegador da internet ou simplesmente navegador (em inglês: Web
browser, browser), é um programa que habilita seus usuários a interagirem com
documentos HTML hospedados em um servidor da rede.
Tim Berners-Lee, que foi um dos pioneiros no uso do hipertexto como forma de compartilhar informações,
criou o primeiro navegador, chamado WorldWideWeb (www), em 1990. Mais tarde, para não confundir-se
com a própria rede, trocou de nome para Nexus. A web, entretanto, só explodiu realmente em popularidade
com a introdução do NCSA 'Mosaic, que era um navegador gráfico (em oposição a navegadores de modo
texto) rodando originalmente no Unix, mas que foi também portado para o Macintosh e Microsoft
Windows logo depois. A versão 1.0 foi liberada em setembro de 1993. Marc Andreesen, o líder do
projeto Mosaic na NCSA, demitiu-se para formar a companhia que seria conhecida mais tarde
como Netscape Communications Corporation.
Servidor
Servidor web é um software responsável por aceitar pedidos em HTTP de clientes, geralmente os
navegadores, e servi-los com respostas em HTTP, incluindo opcionalmente dados, que geralmente são
páginas web, tais como documentos em HTML com objetos embutidos (imagens, etc) ou um
computador que executa um programa que provê a funcionalidade descrita anteriormente.[1] O mais
popular, e mais utilizado no mundo, é o servidor Apache (software livre). A Microsoft possui a sua
própria solução denominada IIS (Internet Information Services).
Dominio
Um domínio é um nome de fácil memorização e que serve para localizar e identificar computadores na
Internet.
Quando se visita um sítio web ou se envia um e-mail, o nosso computador precisa de saber a localização
do servidor em que a página ou a caixa de e-mail de destino se encontram armazenados para nos poder
mostrar a informação que desejamos ver (o conteúdo da página ou o relatório de entrega do e-mail).
A informação da localização destes servidores está noutro servidor (chamado servidor de nomes) que
assegura a indicação do endereço certo para a entrega dos pedidos enviados pelo nosso computador para
a Internet. Essa tarefa é operada através da conversão do nome de domínio indicado pelo nosso
computador (ex: www.dns.pt) num endereço IP, que identifica a localização dos computadores na
Internet.
O conceito de domínio foi criado com o objetivo de facilitar a memorização dos endereços de
computadores na Internet.
Imagine ter que memorizar um número como 193.136.2.193 (endereço IP) e inseri-lo na barra de
navegação para poder consultar o sítio do DNS e depois ainda decorar várias outras sequências de
números de sítios que utilize regularmente.
Seria uma tarefa bastante difícil e a Web certamente não teria o sucesso que tem hoje. Escrever dns.pt
ou google.com torna-se bastante intuitivo e fácil de memorizar.
O QUE É FTP
FTP significa File Transfer Protocol (Protocolo de Transferência de Arquivos), e é uma forma bastante rápida e versátil de
transferir arquivos (também conhecidos como ficheiros), sendo uma das mais usadas na internet.
COMO OCORRE A TRANSFERÊNCIA DE ARQUIVOS
A transferência de arquivos dá-se entre um computador chamado "cliente" (aquele que solicita a conexão para a transferência de
dados) e um servidor (aquele que recebe a solicitação de transferência). O utilizador, através de software específico, pode
selecionar quais arquivos enviar ao servidor. Para existir uma conexão ao servidor, o utilizador informa um nome de utilizador
(ou username, em inglês) e uma senha (password), bem como o nome correcto do servidor ou seu endereço IP. Se os dados
foram informados corretamente, a conexão pode ser estabelecida, utilizando-se um "canal" de comunicação, chamado de porta
(port). Tais portas são conexões no qual é possível trocar dados. No caso da comunicação FTP, o padrão para porta é o
número 21.
SOFTWARE FTP
FileZilla SmartFTP CoffeeCup
PC- http://download.cnet.com/windows/ftp-software/ MAC - http://download.cnet.com/mac/ftp-software/

SERVE SIDE E CLIENT SIDE
Este é um conceito muito importante na Web. É neste ponto, em que separamos as linguagens de programação Web que rodam no
servidor – PHP, ASP – das que somente são interpretadas pelos navegadores – JavaScript, Flash, HTML.
Todas linguagens de programação Web são construída em cima do HTML, ou seja, disso podemos concluir que: toda linguagem
Web, deve ser a princípio transmitida em HTML para o visitante do site, independente de qual tecnologia o site venha a
utilizar.
Se o site possui um código JavaScript para criar uma efeito de natal (neve), ou uma caixa que rola conforme a página é
movimentada, este script é interpretado pelo próprio navegador. E isso é o que chamados de “CLIENT SIDE”, melhor dizendo,
pelo lado do servidor. Entre as linguagens dessa categoria, temos: JavaScript, Flash, HTML, SilverLigth entre outras.
As linguagens SERVE SIDE ou linguagem de servidor é nesta categoria que entra o PHP e ASP. As linguagens SERVE SIDE
são executadas num servidor Web. Quando um utilizador entra num site que possui um registo, por exemplo, ao clicar no botão
de gravar dados, inicia-se um processo no servidor, que executa um código para gravar os dados numa base de dados.
O QUE É HTML?
HTML é uma linguagem para descrever páginas da web. HTML significa Hyper Text Markup Language
HTML não é uma linguagem de programação, é uma linguagem de marcação Uma linguagem de marcação é um conjunto de
tags de marcação
A finalidade dos tags são para descrever o conteúdo da página
TAGS HTML
HTML tags são palavras-chave (nomes de marca) cercados por colchetes como <html> Tags HTML normalmente vêm em
pares como <b> e </ b>
A primeira tag num par é a tag de início, a segunda tag é a tag de fim
A tag final é escrita como a marca de início, com uma barra antes do nome da tag
<tagname> conteúdo </tagname >
ELEMENTOS HTML
"Tags HTML" e "elementos HTML" são muitas vezes usadas para descrever a mesma coisa. Mas a rigor, um elemento HTML é
tudo entre a marca de início e a tag final, incluindo as tags:
Elemento HTML:
<p> Este é um parágrafo. </ p> Documentos HTML = Páginas da Web
Documentos HTML descrever páginas da web Documentos HTML contêm tags HTML e texto simples
Documentos HTML são também chamados de páginas web
ESTRUTURA DO CÓDIGO HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<HEAD>
<title>Title of the document</title>
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
body {background-color:yellow} p {color:blue}
</style>
<script type="text/javascript"> document.write("Hello World!")

</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>

ESVAZIAR ELEMENTOS HTML
Elementos HTML sem conteúdo são chamados de elementos vazios.
<br /> é um elemento vazio sem uma marca de fecho (o tag <br /> define uma quebra de linha).
Dica: Em XHTML, todos os elementos devem ser fechados. Adicionando uma barra dentro da tag de início, como <br />, é a
maneira correta de fechar elementos vazios em XHTML (e XML).
HTML Dica: Utilize tags minúsculas

Tags HTML não são sensíveis ao caso: <P> significa o mesmo que <p>. Muitos sites usam maiúsculas tags HTML.
Deve usar tags minúsculas porque a World Wide Web Consortium (W3C) recomenda minúsculas em HTML 4, e exige tags
minúsculas em XHTML.
ATRIBUTOS HTML
Elementos HTML podem ter atributos
Atributos fornecem informações adicionais sobre um elemento Os atributos são sempre especificados na marca de início
Atributos vêm em pares nome / valor como: name = "valor" Exemplo de Atributos
Links em HTML são definidas com a tag <a>. O endereço do link é especificado no atributo href:
Exemplo
<a href="http://www.w3schools.com"> Este é um link </ a>
TÍTULOS HTML
As posições são definidas com a <h1> para <h6>.
<h1> define a posição mais importante. <h6> define a posição, pelo menos importante.
Exemplo
<h1> Este é um título </ h1>
Nota: Os navegadores adicionar automaticamente um espaço vazio (a margem), antes e depois de cada título.
TÍTULOS SÃO IMPORTANTES
Use cabeçalhos HTML para apenas cabeçalhos. Não use títulos para tornar o texto BIG ou negrito. Os motores de busca utilizar
seus títulos para indexar a estrutura e o conteúdo de suas páginas web.
Como os utilizadores podem folhear suas páginas, seus títulos, é importante o uso de títulos para mostrar a estrutura do
documento.
Posições H1 deve ser usada como categorias principais, seguido por cabeçalhos de H2, em seguida, as posições menos
importantes H3, e assim por diante.
LINHAS DE HTML
A tag <hr /> cria uma linha horizontal numa página HTML. O elemento hr pode ser usado para separar o conteúdo:
Exemplo
<p> Este é um parágrafo </ p>
<hr />
<hr />
COMENTÁRIOS EM HTML
Os comentários podem ser inseridos no código HTML para torná-lo mais legível e compreensível. Comentários são ignorados
pelo navegador e não são exibidos.
Os comentários são escritos desta forma:
Exemplo

Nota: Existe um ponto de exclamação depois do colchete de abertura, mas não antes do colchete de fechamento.
FORMATAÇÃO DE TEXTO HTML

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
SINTAXE HTML LINK
O código HTML para um link é simples. Parece que este:
<a texto Link href="URL"> </ a>
O atributo href especifica o destino de um link. exemplo
<a href="http://www.w3schools.com/"> Visita </ a>
Ao clicar neste link irá enviar o usuário para a página inicial dos W3Schools.
Dica: O "texto Link" não tem que ser texto. Pode ser uma imagem ou qualquer outro elemento de HTML.
LINKS DE HTML - O ATRIBUTO ALVO
O atributo target especifica onde para abrir o documento vinculado.

O exemplo abaixo irá abrir o documento vinculado numa nova janela do navegador ou separador:
Exemplo
<a href="http://www.w3schools.com/" target="_blank"> Visita! </ a>
LINKS DE HTML - O ATRIBUTO NOME
O atributo name especifica o nome de uma âncora.

O atributo nome é usado para criar um marcador dentro de um documento HTML.
Nota: A próxima HTML5 padrão sugere usar o atributo id ao invés do atributo name para especificar o nome de uma âncora.
Usando o atributo id realmente funciona também para HTML4 em todos os navegadores modernos.
Marcadores não são exibidos em qualquer forma especial. Eles são invisíveis para o leitor.
Exemplo
A âncora dentro de um documento HTML:
<a name="tips">Seção Dicas Úteis </ a>
Crie um link para a "Seção Dicas Úteis" dentro do mesmo documento:

<a href="#tips"> visite a seção de Dicas Úteis </ a>
Ou então, criar um link para a "Seção Dicas úteis" de outra página:

<a href="http://www.w3schools.com/html_links.htm#tips">Visite a seção de Dicas Úteis </ a>
IMAGENS HTML - A TAG <IMG> E O ATRIBUTO SRC
Em HTML, as imagens são definidas com a tag img.
A marca <img> está vazio, o que significa que ele contém atributos apenas, e não tem nenhuma marca de fecho.
Para exibir uma imagem numa página, usa-se o atributo src. Src significa "fonte". O valor do atributo src é o URL da imagem
que deseja exibir.
SINTAXE PARA DEFINIÇÃO DE UMA IMAGEM:
<img src="url" alt="some_text"/>
O URL aponta para o local onde a imagem está armazenada. Uma imagem denominada "boat.gif", localizado na "imagens"
diretório "www.w3schools.com" tem o URL: http://www.w3schools.com/images/boat.gif.
O navegador exibe a imagem em que a marca <img> ocorre no documento. Se colocar uma tag de imagem entre dois parágrafos,
o browser mostra o primeiro parágrafo, em seguida, a imagem, e então o segundo parágrafo.
IMAGENS HTML - O ATRIBUTO ALT
O atributo alt necessário especifica um texto alternativo para uma imagem, se a imagem não poder ser exibida.
O valor do atributo alt é um texto-autor definido:
<img src="boat.gif" alt="Big Boat" />
O atributo alt fornece informações alternativo para uma imagem, se um usuário por algum motivo não pode vê-lo (por causa da
conexão lenta, um erro no atributo src, ou se o usuário usa um leitor de tela).
IMAGENS HTML - ALTURA E LARGURA DE UMA IMAGEM
Os atributos de altura e largura são utilizados para especificar a altura e a largura de uma imagem. Os valores dos atributos são
especificados em pixels por padrão:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
TABELAS HTML
As tabelas são definidas com a tag <table>.
Uma tabela é dividida em linhas (com a marca <tr>), e cada linha é dividida em células de dados (com a marca <td>). td significa
"os dados da tabela", e contém o conteúdo de uma célula de dados. A tag <td> pode conter texto, links, imagens, listas,
formulários, outras tabelas, etc
Exemplo de tabela
<table border="1">
<tr>
<td>row 1, cell 1</td>

</tr>
<tr>
</tr>
</table>
Como aparece no ecrã

row 1, cell 1 row 1, cell 2
ATRIBUTO BORDER DA TABELA
Se não se definer o atributo border a tabela por defeito não terá moldura.
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
CABEÇALHO DA TABELA
O cabeçalho numa tabela é definido com a tag <th>.

A maior parte dos navegadores apresentam o conteúdo desta tag em negrito e centrado.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>

</tr>
</table>
Como aparece no ecrã:
Header 1 Header 2
Tag Descrição
<table> Define a tabela
<th> Define o cabeçalho da tabela
<tr> Define a linha da tabela
<td> Defines a célula da tabela
<caption> Defines a legenda da tabela
<thead> Define quais as linhas no cabeçalho da tabela
<tbody> Define quais as linhas no corpo da tabela
<tfoot> Define quais as linhas no rodapé da tabela
LISTAS EM HTML
As listas mais comuns de HTML são ordenadas e listas não ordenadas:
Lista ordenada: Lista não ordenada:
The first list item List item
The second list item List item
The third list item List item
Tag Descrição
<ol> Define uma lista ordenada
<ul> Define uma lista não ordenada
<li> Define um item da lista
<dl> Define uma lista de definição
<dt> Define o item na lista de definição
<dd> Define a descrição do item
Atributo Valor lista ordenada Valor lista não ordenada

start number N/A
type 1 disc
A square circle
a
I
IFRAMES HTML
Um iframe é usado para exibir uma página web dentro de uma página web.
Sintaxe para adicionar um iframe:

<iframe src=" URL "></iframe>
O atributo SRC serve para identificar o caminho e ficheiro que se pretende chamar para dentro do iframe, o atributo
frameborder para criar uma moldura à volta da iframe, convém também definir a altura e largura do iframe na página através
dos atributos height e width.
Examplo
<iframe src="demo_iframe.htm" width=”200” height=”200” frameborder="0"></iframe>
FORMULÁRIOS HTML
Formulários HTML são usados para transmitir dados para um servidor.
Um formulário pode conter elementos de entrada, como campos de texto, checkboxes, radio-botões, botões de envio e muito
mais. Um formulário também pode conter listas de seleção, textarea, fieldset, legend, e elementos do rótulo.
O <form> é usado para criar um formulário HTML:
<form>
.
input elements
.
</form>
Atributo Valor
action URL
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
method get
post
name name
target _blank
_self
_parent
_top
framename
HTML FORM TAGS
Tag Descrição
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control

<label> Defines a label for an input element
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<option> Defines an option in a select list
TAG Descrição
<form> Define um formulário HTML para entrada do usuário
<input /> Define um controle de entrada
<textarea> Define um multi-linha de controle de entrada de texto
<label> Define um rótulo para um elemento de entrada
<fieldset> Define uma borda em torno de elementos em forma
<legend> Define uma legenda para um elemento fieldset
<select> Define uma lista de seleção (drop-down list)
<optgroup> Define um grupo de opções relacionadas em uma lista de seleção
<option> Define uma opção em uma lista de seleção
<button> Define um botão
FORMULÁRIOS HTML - O ELEMENTO DE ENTRADA
O elemento de forma mais importante é o elemento de entrada.
O elemento de entrada é usado para selecionar as informações do usuário.
Um elemento de entrada pode variar de muitas formas, dependendo do tipo de atributo. Um elemento de entrada pode ser de
tipo campo de texto, checkbox, senha, botão, botão de envio, e muito mais.
Os tipos de entradas mais utilizados são descritos abaixo.
CAMPOS DE TEXTO
<input type="text" /> define um campo de entrada de uma linha que um usuário pode inserir texto em:
<form>
Nome: <input type="text" name="firstname" /> <br /> Sobrenome: <input type="text" name="lastname" />
</ Form>
Como o código HTML acima aparece no navegador:
Nome:
Sobrenome:
Nota: O formulário em si não é visível. Observe também que a largura padrão de um campo de texto é de 20 caracteres.
CAMPO SENHA
<input type="password" /> define um campo de senha:
<form>
Senha: <input type="password" name="pwd" />
</ Form>
Nota: Os caracteres em um campo de senha são mascarados (mostrada como asteriscos ou círculos).
BOTÕES DE RÁDIO
<input type="radio" /> define um botão de rádio. Os botões de rádio permitem que um usuário selecione apenas um de um
número limitado de opções:
<form>
<input type="radio" name="sex" value="male" /> <br /> Masculino
<input type="radio" name="sex" value="female" /> Feminino
</ Form>
CHECKBOXES
<input type="checkbox" /> define uma caixa de seleção. Checkboxes permitir que um usuário selecione uma ou mais opções
de um número limitado de opções.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> Eu tenho uma bicicleta <br />
<input type="checkbox" name="vehicle" value="Car" /> Eu tenho um carro
</ Form>
BOTÃO SUBMETER
<input type="submit" /> define um botão submit.
Um botão submit é usado para enviar dados do formulário para um servidor. Os dados são enviados para a página especificada
no atributo a forma de ação.O arquivo definido no atributo action geralmente faz algo com a entrada recebida:
<form name="input" action="html_form_action.asp" method="get"> Nome de usuário: <input type="text" name="user" />
<input type="submit" value="Submit" />
</ Form>
Se você digitar alguns caracteres no campo de texto acima, e clique no botão "Enviar", o navegador irá enviar a sua entrada para
uma página chamada "html_form_action.asp". A página irá mostrar-lhe a entrada recebida.
Atributo Valor Descrição

alt text Especifica um texto alternativo para uma imagem (apenas para type =
"image")
checked checked Especifica que um elemento <input> deve ser pré-selecionado quando a
página carrega (for type = "checkbox" ou type = "radio")
disabled disabled Especifica que um elemento <input> deve ser desativado
maxlength number Especifica o número máximo de caracteres permitidos em um elemento
<input>
name name Especifica o nome de um elemento <input>
readonly readonly Especifica que um campo de entrada deve ser somente leitura
size number Especifica a largura, em caracteres, de um elemento <input>
src URL Especifica o URL da imagem para usar como um botão de envio (apenas
para type = "image")
type button Especifica o tipo de elemento <input>
checkbox
file
hidden
image
password
radio
reset
submit
text
value text Especifica o valor de um elemento <input>
TEXTAREA
DEFINIÇÃO E USO
A tag <textarea> define um multi-linha de controle de entrada de texto.

Uma área de texto pode conter um número ilimitado de caracteres, eo texto torna em uma fonte de largura fixa (geralmente
Courier).
O tamanho de uma área de texto é especificado pelo cols e os atributos de linhas.

cols number Especifica a largura visível de uma área de texto
rows number Especifica o número de linhas visíveis numa área de texto
disabled disabled Especifica que uma área de texto deve ser desativado
name text Especifica o nome para uma área de texto
readonly readonly Especifica que uma área de texto deve ser somente leitura
SELECT E OPTION
DEFINIÇÃO E USO
A tag <select> é usado para criar uma lista drop-down.

As tags <option> dentro do elemento <select> definir as opções disponíveis na lista.
Dica: O elemento <select> é um controle de forma e é usado para coletar entrada do usuário.

disabled disabled Especifica que uma lista drop-down deve ser desativado
multiple multiple Especifica que múltiplas opções podem ser selecionadas de uma só vez
name name Define um nome para a lista drop-down
size number Define o número de opções visíveis em uma lista drop-down
VALORES DE CORES
Cores em HTML são definidas usando uma notação hexadecimal (HEX) para a combinação de vermelho, verde, e os valores
de cor azul (RGB).
O valor mais baixo que pode ser administrado a uma das fontes de luz é 0 (em HEX: 00). O maior valor é 255 (em HEX: FF).
Valores HEX são especificados como 3 pares de números de dois dígitos, começando com um sinal de #.
NOMES DE CORES SUPORTADAS POR TODOS OS NAVEGADORES
147 nomes de cores são definidas no HTML e CSS especificação de cor (16 nomes de cores básicas mais 130 mais).
Dica Nota: Os 16 nomes de cores básicas são: aqua, preto, azul, fúcsia, cinza, verde, limão, marrom, marinho, verde-oliva, roxo,
vermelho, prata, verde azulado, branco e amarelo.
Nome de cor HEX Cor

AliceBlue # F0F8FF
AntiqueWhite # FAEBD7
Água # 00FFFF
Água-marinha # 7FFFD4
Azul # F0FFFF
Bege # F5F5DC
Lambuja # FFE4C4
Preto # 000000
BlanchedAlmond # FFEBCD
Azul # 0000FF
BlueViolet # 8A2BE2
Marrom # A52A2A
BurlyWood # DEB887
CadetBlue # 5F9EA0
Cor verde-amarelada # 7FFF00
Chocolate # D2691E
Coral # FF7F50
CornflowerBlue # 6495ED
Cornsilk # FFF8DC
Carmesim # DC143C
Ciano # 00FFFF
DarkBlue # 00008B
DarkCyan # 008B8B
DarkGoldenRod # B8860B
DarkGray # A9A9A9
DarkGrey # A9A9A9
DarkGreen # 006400
DarkKhaki # BDB76B
DarkMagenta # 8B008B
DarkOliveGreen # 556B2F
Darkorange # FF8C00
DarkOrchid # 9932CC
Darkred # 8B0000
DarkSalmon # E9967A
DarkSeaGreen # 8FBC8F
DarkSlateBlue # 483D8B
DarkSlateGray # 2F4F4F
DarkSlateGrey # 2F4F4F
DarkTurquoise # 00CED1
DarkViolet # 9400D3
DeepPink # FF1493
DeepSkyBlue # 00BFFF
DimGray # 696969
DimGrey # 696969
DodgerBlue # 1E90FF
Firebrick # B22222
FloralWhite # FFFAF0
ForestGreen # 228B22
Fúcsia # FF00FF
Gainsb # DCDCDC
GhostWhite # F8F8FF
Ouro # FFD700
Goldenrod # DAA520
Cinza # 808080
Cinza # 808080
Verde # 008000
GreenYellow # ADFF2F
Honeydew # F0FFF0
HotPink # FF69B4
IndianRed # CD5C5C
Índigo # 4B0082
Marfim # FFFFF0
Caqui # F0E68C
Lavanda # E6E6FA
LavenderBlush # FFF0F5
LawnGreen # 7CFC00
LemonChiffon # FFFACD
LightBlue # ADD8E6
LightCoral # F08080
LightCyan # E0FFFF
LightGoldenRodYellow # FAFAD2
LightGray # D3D3D3
LightGrey # D3D3D3
Lightgreen # 90EE90
LightPink # FFB6C1
LightSalmon # FFA07A
LightSeaGreen # 20B2AA
LightSkyBlue # 87CEFA
LightSlateGray # 778899
LightSlateGrey # 778899
LightSteelBlue # B0C4DE
LightYellow # FFFFE0
Cal # 00FF00
LimeGreen # 32CD32
Linho # FAF0E6
Magenta # FF00FF
Maroon # 800000
MediumAquaMarine # 66CDAA
MediumBlue # 0000CD
MediumOrchid # BA55D3
MediumPurple # 9370D8
MediumSeaGreen # 3CB371
MediumSlateBlue # 7B68EE
MediumSpringGreen # 00FA9A
MediumTurquoise # 48D1CC
MediumVioletRed # C71585
Midnightblue # 191970
MintCream # F5FFFA
MistyRose # FFE4E1
Mocassim # FFE4B5
NavajoWhite # FFDEAD
Marinha # 000080
OldLace # FDF5E6
Oliva # 808000
Olivedrab # 6B8E23
Laranja # FFA500
OrangeRed # FF4500
Orquídea # DA70D6
PaleGoldenRod # EEE8AA
PaleGreen # 98FB98
PaleTurquoise # AFEEEE
PaleVioletRed # D87093
PapayaWhip # FFEFD5
PeachPuff # FFDAB9
Peru # CD853F
Rosa # FFC0CB
Ameixa # DDA0DD
PowderBlue # B0E0E6
Roxo # 800080
Vermelho # FF0000
RosyBrown # BC8F8F
RoyalBlue # 4169E1
SaddleBrown # 8B4513
Salmão # FA8072
Sandybrown # F4A460
SeaGreen # 2E8B57
SeaShell # FFF5EE
Sienna # A0522D
Prata # C0C0C0
SkyBlue # 87CEEB
SlateBlue # 6A5ACD
SlateGray # 708090
SlateGrey # 708090
Neve # FFFAFA
SpringGreen # 00FF7F
SteelBlue # 4682B4
Bronzeado # D2B48C
Cerceta # 008080
Cardo # D8BFD8
Tomate # FF6347
Turquesa # 40E0D0
Violeta # EE82EE
Trigo # F5DEB3
Branco # FFFFFF
WhiteSmoke # F5F5F5
Amarelo # FFFF00
YellowGreen # 9ACD32
TAGS HTML
TAG Descrição
<- ... -> Define um comentário
<! DOCTYPE> Define o tipo de documento
<a> Define uma âncora
<abbr> Define uma abreviação
<endereço> Define informações de contato do autor / proprietário de um documento
<area /> Define uma área dentro de uma imagem do mapa-
<b> Define o texto em negrito
<base /> Especifica o URL base / meta para todas as URLs relativas em um documento
<BASEFONT /> Especifica um padrão de cor, tamanho, fonte ou para todo
<big> Define
o textoo texto
em um grande
documento
<blockquote> Define uma longa citação
<body> Define corpo do documento
<br /> Define uma quebra de linha única
<button> Define um botão clicável
<caption> Define uma legenda da tabela
<cite> Define uma citação
<dd> Define uma descrição de um item em uma lista de definições
<del> Define o texto que foi excluído de um documento
<dfn> Define um termo de definição
<div> Define uma seção em um documento
<dl> Define uma lista de definições
<dt> Define um termo (um item) em uma lista de definições
<em> Define texto enfatizado
<fieldset> Grupos de elementos relacionados em um formulário
<font> Define cor, fonte e tamanho do texto
<form> Define um formulário HTML para entrada do usuário
<frame /> Define uma janela (uma moldura) em um conjunto de quadros
<frameset> Define um conjunto de quadros
<h1> para Define cabeçalhos HTML
<h6>
<head> Define informações sobre o documento
<hr /> Define uma linha horizontal
<html> Define a raiz de um documento HTML
<i> Define o texto em itálico
<iframe> Define um frame inline
<img /> Define uma imagem
<input /> Define um controle de entrada
<INS> Define texto que foi inserida em um documento
<label> Define um rótulo para um elemento <input>
<legend> Define uma legenda para um elemento <fieldset>
<li> Define um item da lista
<link /> Define a relação entre um documento e um recurso externo
<map> Define um do lado do cliente imagem do mapa-
<meta /> Define meta dados sobre um documento HTML
<noframes> Define um conteúdo alternativo para os usuários que não suportam frames
<noscript> Define um conteúdo alternativo para os usuários que não suportam scripts client- side
<object> Define um objeto incorporado

<ol> Define uma lista ordenada
<option> Define uma opção em uma lista drop-down
<p> Define um parágrafo
<param /> Define um parâmetro para um objeto
<pre> Define o texto pré-formatado
<q> Define uma citação curta
<s> Define texto tachado
<script> Define um script do lado do cliente
<select> Define uma lista drop-down
<small> Define texto menor
<span> Define uma seção em um documento
<strike> Define texto tachado
<strong> Define texto forte
<style> Define informações de estilo para um documento
<sub> Define o texto subscrito
<sup> Define texto sobrescrito
<table> Define uma tabela
<tbody> Grupos do corpo de conteúdo em uma tabela
<td> Define uma célula em uma tabela
<textarea> Define um controle de entrada de várias linhas (área de texto)
<tfoot> Grupos conteúdo do rodapé em uma tabela
<th> Define uma célula de cabeçalho em uma tabela
<thead> Grupos O conteúdo do cabeçalho em uma tabela
<title> Define um título para o documento
<tr> Define uma linha em uma tabela
<u> Define texto sublinhado
<ul> Define uma lista não ordenada
FONTES BIBLIOGRÁFICAS
Mastering Web Site Fundamentals - Microsoft Press1998.
Mastering JavaScript and Jscript – James Jaworski – Sybex 2000
Addison-Wesley's. pp. chap. 2: A history of HTML

MANUAL - 0768 - Criação de Sites WEB

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MANUAL - 0768 - Criação de Sites WEB

Uploaded by

Copyright:

Available Formats

ÁREA DE FORMAÇÃO 481 – Ciências informáticas

REFERENCIAIS DE FORMAÇÃO Operador/a de Informática

CURSO /UFCD 0768 - Criação de sites WEB

FORMADOR/A Rui Ronda

Cod. RTP / Versão Autor/a Versão Inicial Revisões Data aprovação

O manual de formação que se apresenta incide sobre os conteúdos programáticos da Unidade de

COMO OCORRE A TRANSFERÊNCIA DE ARQUIVOS

FileZilla SmartFTP CoffeeCup

PC- http://download.cnet.com/windows/ftp-software/ MAC - http://download.cnet.com/mac/ftp-software/

<tagname> conteúdo </tagname >

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

<meta name="keywords" content="HTML, CSS, XML" />

<link rel="stylesheet" type="text/css" href="mystyle.css" />

<script type="text/javascript"> document.write("Hello World!")

<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>

HTML Dica: Utilize tags minúsculas

FORMATAÇÃO DE TEXTO HTML

LINKS DE HTML - O ATRIBUTO ALVO

O atributo target especifica onde para abrir o documento vinculado.

LINKS DE HTML - O ATRIBUTO NOME

O atributo name especifica o nome de uma âncora.

<a name="tips">Seção Dicas Úteis </ a>

Crie um link para a "Seção Dicas Úteis" dentro do mesmo documento:

Ou então, criar um link para a "Seção Dicas úteis" de outra página:

SINTAXE PARA DEFINIÇÃO DE UMA IMAGEM:

<img src="url" alt="some_text"/>

IMAGENS HTML - O ATRIBUTO ALT

<img src="boat.gif" alt="Big Boat" />

IMAGENS HTML - ALTURA E LARGURA DE UMA IMAGEM

<td>row 1, cell 2</td>

Como aparece no ecrã

ATRIBUTO BORDER DA TABELA

O cabeçalho numa tabela é definido com a tag <th>.

<td>row 2, cell 1</td>

Como aparece no ecrã:

Atributo Valor lista ordenada Valor lista não ordenada

Sintaxe para adicionar um iframe:

<textarea> Defines a multi-line text input control

<input type="password" /> define um campo de senha:

<input type="submit" /> define um botão submit.

Atributo Valor Descrição

A tag <textarea> define um multi-linha de controle de entrada de texto.

Atributo Valor Descrição

A tag <select> é usado para criar uma lista drop-down.

Atributo Valor Descrição

NOMES DE CORES SUPORTADAS POR TODOS OS NAVEGADORES

Nome de cor HEX Cor

<object> Define um objeto incorporado

Mastering Web Site Fundamentals - Microsoft Press1998.

Mastering JavaScript and Jscript – James Jaworski – Sybex 2000

Addison-Wesley's. pp. chap. 2: A history of HTML

You might also like