HTML e CSS: Fundamentos do Desenvolvimento Web
Traduzido por
ScribdTranslationsHTML e CSS: Fundamentos do Desenvolvimento Web
Traduzido por
ScribdTranslationsHTML e CSS
AULAS BÁSICAS DE DESENVOLVIMENTO WEB
Conteúdo
Introdução ao Html
Tags HTML – IMG, Formulário, Hiperlinks, Frames, Tabelas
Exercício
Folhas de Estilo em Cascata – Introdução
Vantagens do CSS
Tipos de Folhas de Estilo
Seletores
Conceitos Chave
Exemplo
Introdução [Continua...]
Navegador da Web
Estabelece a conexão com o servidor Web especificado, na
URL solicitado (Localizador de Recursos Uniforme (URL))
Interpreta e formata as informações encontradas no servidor, e
exibe as informações formatadas.
Servidor Web
Um computador que entrega/fornece páginas da Web.
Todo servidor Web tem um endereço IP e possivelmente um nome de domínio.
Por exemplo: Se você inserir a URL [Link] em seu
navegador, isso envia uma solicitação ao servidor cujo nome de domínio é
[Link]. O servidor então busca a página chamada [Link]
e o envia para o seu navegador.
Cada servidor Web contém documentos que estão escritos em
Linguagem de Marcação de Hipertexto (HTML)
Solicitações e respostas são trocadas entre navegadores da Web e
Servidores web usando o Protocolo de Transferência de Hipertexto (HTTP)
Introdução [Cont.]
Protocolo de Transferência de Hipertexto (HTTP)
protocolo sem estado, em nível de aplicação.
HTTP define como
o navegador estabelece conexão com o servidor
o navegador solicita informações do servidor
o servidor responde ao pedido do navegador
o servidor/navegador fecha a conexão
Funciona em arquitetura Cliente-Servidor
Introdução [Continua...]
Linguagem de Marcação de Hipertexto (HTML)
uma linguagem de marcação simples usada para definir e descrever o layout de
uma página da web
Localizador Uniforme de Recursos (URL)
identificador padrão usado para localizar informações na Web
elementos em uma URL – protocolo://nome do domínio/nome do arquivo
protocolo hipertexto – [Link]
protocolo de transferência de arquivos – [Link]
Noções Básicas de URL
Um localizador uniforme de recursos, comumente abreviado como URL
especifica a localização do recurso no
internet/intranet ou uma aplicação web.
URL types:
URLs Absolutas
URLs relativas
URLs de fragmento
URLs Absolutas
URLs absolutas usam um endereço de Internet completo para fornecer a localização de
a resource.
Exemplos:
[Link]
[Link]
Noções Básicas de URL
URLs relativas
URLs relativas são usadas para acessar arquivos quando a Internet completa
endereço é desnecessário.
Examples:
[Link]
/[Link]
[Link]?frame=true
URLs de Fragmento
URLs de fragmento são usados para acessar uma localização específica dentro de uma URL.
Exemplos:
[Link]
Introdução - TagsHTML
As tags HTML estão entre colchetes angulares, <como este>
Os atributos são comandos adicionados às tags para especificar vários
opções.
Qualquer arquivo HTML deve começar com a tag <HTML> e terminar com o
tag </HTML>
O texto entre as tags de início e fim é o conteúdo do elemento
HTML tags arenot case sensitive,<b> means the same as <B>
O arquivo HTML é salvo com a extensão htm ou html
Isso é [Link] ou [Link]
Introdução - HTMLTags [Continuação...]
HTML simples como exemplo,
<HTML>
<HEAD>
<TITLE>My First HTML Page </TITLE>
</HEAD>
<BODY>Esta é a minha primeira tarefa de HTML. Eu devo fazê-la corretamente.</BODY>
</HTML>
Introdução - HTMLTags [Continuação…]
Tag com atributos
<HTML>
<Cabeça>
<TITLE>My First HTML Page </TITLE>
</CABEÇALHO>
<BODY bgcolor="#cccccc" text="#660000">
Esta página HTML foi projetada para explicar os atributos da tag body.
<p>bgcolor e texto são os atributos da tag body.</p>
<p>bgcolor="#cccccc" indica a cor de fundo da página html.<br>
#660000
</CORPO>
</HTML>
Usando Hyperlinks e Ancoragens
Usos de Hiperlinks:
Conectando a outras páginas HTML que fazem parte de um site ou a
material relacionado de outros sites.
Conectando a recursos não-HTML, incluindo documentos portáteis
como arquivos PDF do Adobe Acrobat ou clipes de vídeo como QuickTime
filmes.
Estrutura de Hiperligações:
<a href="[Link] da URL</a>
onde, [Link] é uma URL e <a..> é o âncora
etiqueta.
<a href="[Link]/downloads">Baixar</a> Adobe
Adobe Acrobat Reader
Output:DownloadAdobe Acrobat Reader
Adicionando Imagens a uma Página da Web
<IMG> a tag é usado para incluir uma imagem no documento da web.
Exemplo
Code: <IMG SRC="[Link]" width="105" height="97" border="0">
Output:
Criando tabelas HTML
Uma tabela é um sistema de colunas e linhas.
Usando tabelas, você pode controlar precisamente como deseja seu
conteúdo dividido e onde você quer que ele esteja.
Para criar um HTML, use a tag <table> e seus atributos.
Cada linha de uma tabela é especificada usando uma tag <tr>.
Cada célula de uma tabela é especificada usando uma tag <td>.
O cabeçalho da tabela é especificado usando uma tag <th>.
Tabelas [Continua...]
Ex.
<table border=1>
<tr>
<th>Ano
Year Amount
<th>Quantidade
</tr> 2002 85.000
<tr> 2001 65.000
<td>2002
85.000
</tr>
<tr>
<td>2001</td>
65.000
</tr>
</tabela>
Especificando rowspan e colspan
Especificando Colspan
<tabela>
<tr> <td colspan=2>Cabeçalho</tr> Cabeçalho
Um
Um Dois
Dois
</tr>
</tabela>
Especificando Rowspan
<table border=1> Dois
Um
<tr><td rowspan=2>Um<td> Dois Três
</tr>
Três
</table>
Quadros [Continua...]
Qualquer link em um frame pode abrir uma página em outro frame.
Realize isso usando o atributo thename da tag <frame> e o target.
atributo da tag <a>.
O atributo name dá a cada quadro uma identidade, como qualquer nome que você
escolha.
Referencie o nome do quadro no atributo target da tag <a>
[Link]
<frameset cols="20%,80%">
<frame name="toolbar" src="[Link]">
<frame name="content" src="[Link]">
</frameset>
[Link]
<a href="[Link]" target="content">início</a>
<a href="[Link]" target="content">produtos</a>
<a href="[Link]" target="content">sobre nós</a>
<a href="[Link]" target="content">feedback</a>
Estruturas [Continua…]
[Link] and [Link]
Usando Formulários em HTML [Contd…]
Introdução
Os formulários HTML atuam como uma interface entre o usuário final e o
Aplicação do lado do servidor. No lado do cliente, o formulário é preenchido e os dados são
transmitido para o servidor, onde os dados são interpretados e utilizados
consequentemente.
Elementos Diferentes
Forma
Input
Selecione e Opção
Textarea
Others [Button, Label, Fieldset and Legend]
Usando Formulários em HTML [Continuação...]
Elemento de Formulário
The form has got two main attributes viz.. Action and Method.
O atributo de ação é obrigatório. Os métodos são 'get', que é o padrão, e
publicar
Outros atributos definem o tipo de codificação e o evento
handlers[javascript/vbscript]
Aqui está um exemplo de tag Form
<form action=URL method=get/post enctype="multipart/form-data">
onSubmit [script – event handling] onReset[script]>
</form>
O atributo action tem a URL para a qual os dados do formulário devem ir
Usando Formulários em HTML [Continuação…]
O método GET envia os pares nome/valor para a URL
especificado no atributo de ação, adicionando à URL. ex: urlname?
FirstName=value&SecondName=value
Isso pode ser visto na barra de endereços do navegador
O método POST envia os dados como parte do corpo HTML
O ENCTYPE é usado para declarar o tipo de codificação do formulário
conteúdos. O padrão é 'application/x-www-form-urlencoded'.
Existem dois atributos [onSubmit e onReset] que são usados
em relação à programação.
O evento ONSUBMIT é acionado quando um botão de enviar é
clicado e a partir daqui o controle pode ser passado para qualquer
função de um script
ex. javascript ou vbscript Uso: <form ….
OnSubmit="javascript: return functionName()"> ---- </form>
Usando Formulários em HTML [Continuação…]
Basicamente, isso pode ser usado sempre que quisermos invocar um
função javascript/vbscript ao clicar em um botão ‘Enviar’
Sempre que utilizamos qualquer elemento de formulário em uma página da web, deve ser com
em <form></form> tags.
Elementos de Entrada
botão – Usado para invocar uma função de script ou para brincar com
controles de elementos de formulário
checkbox - Off/on
arquivo - Usado para selecionar arquivo pelo usuário
oculto – para manter elementos de formulário ocultos que não aparecem no
página da web
imagem – fazer uma imagem equivalente a um botão de Enviar
senha – para mascarar a entrada
rádio - uma entrada escolhendo
Redefinir – redefinir os valores dos elementos do formulário
Usando Formulários em HTML [Continuação...]
Escondido
O valor oculto permite enviar informações do formulário que estão invisíveis para
o usuário na página da web.
Eg.<input type="hidden" name="Página"
valor="valorEscondido">
Imagem
Isto é o mesmo que um botão 'Enviar', mas a única diferença é que ele
substitui o botão Submit simples por uma Imagem. Caso contrário, possui o
mesma função.
<input type="image" src="imagens/enviar_Imagem">
Usando Formulários em HTML [Continua…]
Senha
Este é um controle de entrada onde o texto é mascarado com um asterisco.
Caso contrário, é semelhante a uma caixa de texto.
<input type="password" name="userpswd">
Usando Formulários em HTML [Continuação...]
Enviar
Isto é usado para enviar os pares nome/valor do formulário ativo
elementos à URL
Especificado na declaração do FORM
A especificação HTML permite múltiplos botões de Enviar
Está declarado como<input type="submit">
Texto
Isso pode ser usado para inserir texto de uma única linha em uma caixa de texto
Ex.<input type="text" name="firstname" size="15">
maxlength="20">
O atributo 'size' define o comprimento da caixa de texto
O atributo 'maxlength' limita [número de caracteres] o usuário para
digitando texto
Mais um atributo é 'readonly'. Isso trava o cursor ao focar em
a caixa de texto e não permite que o usuário digite qualquer texto
Usando Formulários em HTML [Continua...]
Select and Option Elements
O elemento SELECT é usado para criar uma lista de opções, seja como um
menu suspenso ou uma caixa de lista. Cada uma das opções na lista é um
elemento OPTION
<SELECIONE nome="controlName" tamanho="controlWidth"
onChange=script>
<option value=”Value1”>First Option</option>
<option value="Value2" selected>Segunda Opção</option>
<option value=”Value3”>Third Option</option>
</SELECIONAR>
onChange é um evento para a caixa de seleção e direciona o fluxo de controle para
the specified script function.
O valor padrão se não for especificado explicitamente para uma tag de opção seria
seu conteúdo.
The attribute selected leaves that option highlighted
Usando Formulários em HTML [Continuação...]
Elemento da Área de Texto
O elemento textarea é semelhante ao tipo de texto do elemento INPUT.
Mas neste caso, o usuário pode digitar uma seção maior de texto do que eles
pode com as caixas de texto
É uma entrada de texto de várias linhas.
<TEXTAREA name="controle" rows="numRows" cols="numCols">
As dimensões da janela de textarea são especificadas pelos atributos
‘rows’ and ‘cols’
Usando Formulários em HTML [Cont.]
Exercício
Crie uma página da web 'Formulário de Registro' em HTML simples com os seguintes nomes de campos:
Escolha o elemento de formulário apropriado para cada campo.
1 UserID
2 Senha
3 RetypePassword
4 Nome
5 Sobrenome
6 País – Lista de alguns países
7 Cidades – Lista de alguns estados desse país
8 Your interests ---------Entertainment,Business, Shopping,Health,Music,Travel, Others Please
especificar
Você é um novato?
10 Write a note on your experiences at MindTree so far
11 Faça o upload da sua foto
12 ID de Email
Provide all necessary buttons to suite this form. The submit button is an image.
CSS
O que são folhas de estilo?
Folhas de estilo fornecem um meio para os autores especificarem como desejam
documentos escritos em uma linguagem de marcação como XML ou HTML para
ser formatado.
CSS [Contd...]
Por que Folhas de Estilo
Existem duas respostas para isso:
HTML não foi projetado para estilizar documentos - quando você escreve um HTML
documento, você está especificando apenas o conteúdo que o elemento
contém. . Se você desejasse afirmar que quer que seus títulos sejam
amarelo Helvetica, então você poderia ter<H1><FONT
A
título</FONT></H1>, mas isso é ruim por várias razões:
Você tem que adicionar esse trecho de código a cada cabeçalho que você deseja estilizar - isso é
demorado, propenso a erros e faz os arquivos excessivamente inchados (uma página típica
estilizado usando HTML será 1/3 de tags de formatação).
Se você quiser mudar esses títulos para Arial rosa, então você terá que mudar
cada título individualmente - uma tarefa extremamente trabalhosa em um site grande.
HTML simplesmente não oferece controle suficiente sobre a formatação do documento
efeitos de formatação importantes, como o espaçamento (o espaço entre
linhas), sombras de texto e muitos outros efeitos simplesmente não podem ser feitos usando
HTML.
CSS [Continuação...]
Por que Folhas de Estilo?
Style Sheets helps incost reduction, but also thedownload speed
aumentará para os visualizadores de suas páginas
CSS [Contd…]
Quais são as razões para não usar folhas de estilo?
Nem todos os navegadores suportam a Folha de Estilos corretamente.
Advantages of using Style Sheets
As folhas de estilo têm as seguintes vantagens:
Eles separam o conteúdo da formatação.
Manutenção fácil
Eles reduzem o tempo de download removendo informações de formatação
de documentos
Eles oferecem muito mais controle sobre a formatação do que o HTML - tais
recursos como imagens de fundo e cores em todos os elementos - não
apenas o documento inteiro, etc.
Eles garantem uma aparência consistente em todo o site
CSS [Continua…]
Tipos de Folhas de Estilo
Estilo Inline
Folha de Estilo Embutida
Folhas de Estilo Ligadas
Importing Style Sheets
Estilo Inline
Por exemplo, veja o seguinte trecho
<P style="color: green"> Estilo de parágrafo em linha </P>
Dentro do atributo de estilo vêm as declarações de estilo. Neste exemplo, o elemento P é
sendo tornado verde.
<BODY style="color: #FFFFFF; background:#000000"> Parágrafo
estilo em linha </CORPO>
No trecho acima, estamos aplicando o estilo Inline à tag Body, que dará
o fundo preto para o corpo e cor branca para todo o texto que aparecerá
na tag Body.
CSS [Continuação...]
Folha de Estilo Incorporada
Folhas de estilo incorporadas estão encerradas em um <STYLE
tipo="text/css"> e </STYLE> tag. Eles vão no cabeçalho
de uma página:
Por exemplo, veja o seguinte trecho:
<HTML>
<CABECALHO>
<ESTILO type="text/css">
<!--
BODY {color: red}
-->
</ESTILO>
</HEAD>
<BODY>
O conteúdo principal aparecerá na seção do Corpo
</CORPO>
</HTML>
CSS [Continuação...]
Eles têm dois benefícios
Eles não afetam todos os outros estilos que você pode usar.
Se um documento for salvo e lido offline, o estilo será mantido
CSS [Continua...]
Folha de Estilo Vinculada
As folhas de estilo estão vinculadas usando o <LINK rel="stylesheet"
tag type="text/css" href="[Link]">, que deve ir em
o cabeçalho de uma página.
rel="stylesheet" isso diz que é um link avançado, e diz ao
navegador o que esperar do outro lado, nomeadamente uma folha de estilo.
O atributo type, o tipo de folha de estilo (sempre text/css)
O atributo href, a localização da folha de estilo.
CSS [Continuação…]
Veja o seguinte trecho para Folha de Estilos Vinculada
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="[Link]">
</CABEÇALHO>
<CORPO>
O conteúdo principal aparecerá aqui na Seção do Corpo
</CORPO>
<HTML>
Depois de vincular a folha de estilo à sua página, você terá
para criar a folha de estilo. Por exemplo:
BODY {color: black;
font-family: Geneva, Helvetica, Arial, sans-serif;
background-color: white}
Se você salvou o exemplo acima como uma folha de estilo, então cada página
que o conectam terão os estilos especificados.
CSS [Continua…]
Vantagem das Folhas de Estilo Ligadas
Como uma folha de estilo pode ser anexada a centenas de
arquivos, a manutenção de páginas da web torna-se muito mais fácil.
Ajuda a alcançar a consistência nos estilos através de
fora das páginas.
Desvantagem
Se o usuário baixar a página e se ele esquecer de
baixe o CSS vinculado, então ele/ela não poderá
veja a página com todos os estilos.
CSS [Contd…]
Importando Estilos
A regra @import permite assim que você mantenha algumas coisas iguais enquanto
tendo outros diferentes
gramática:@import url(nome do [Link])
Deve vir no início da folha de estilo, antes de qualquer conjunto de regras (um conjunto de regras é
algo como P {cor: vermelho})
Alternativamente, pode ser especificado como
@import "[Link]";
como @import url("[Link]");
ou como @import 'nome do [Link]';.
No entanto, o Internet Explorer suporta apenas os formatos url(), não os " e '
formatos.
CSS [Continua…]
Seletores
Para lhe dar mais liberdade para selecionar quais elementos seu estilo é
aplicado a.
Seletores de Tipo de Elemento:
Para a declaração de estilo, veja o seguinte trecho.
H1 { cor: vermelho }
H1, H2, H3 { cor: vermelho }
CSS [Continuação...]
Seletores de Atributo:
Classe
ID
O atributo CLASS permite que você aplique declarações a um grupo de
elementos que têm o mesmo valor no atributo CLASS
All elements inside BODY can have a CLASS attribute
boldtxt { font-weight: bold }
Veja o trecho a seguir para a implementação real da Classe
atributo
CSS [Continuação...]
<HTML>
<TITLE>Class Attributes</TITLE>
<STYLE TYPE="text/css">
.boldtxt { font-weight: bold }
.nrmltxt { font-weight: normal }
</ESTILO>
<CORPO>
<P CLASS= boldtxt >Este é um Texto em Negrito</P>
Esta é uma linha de texto normal
<P CLASS= boldtxt >Segunda Linha de Texto em Negrito</P>
<P CLASS= nrmltxt >Segunda Linha de Texto Normal</P>
</CORPO>
</HTML>
CSS [Continuação...]
ID Atributo:
O atributo ID funciona como o atributo CLASS com uma importante
diferença
O valor de um atributo ID deve ser único em todo o documento.
Um seletor que inclui um atributo ID é chamado de seletorID
A sintaxe é: #undltxt { text-decoration: underline }
A sintaxe HTML do elemento no qual você deseja usar o ID
o atributo se assemelha ao de outros elementos com atributos; por exemplo:
<P ID=undltxt>Texto sublinhado</P>
CSS [Continuação...]
Style Attribute:
O atributo STYLE é na verdade um substituto para todo o seletor
mecanismo
Em vez de ter um valor que pode ser referido em um seletor (o qual é
qual ID e CLASSE têm), o valor do atributo STYLE é na verdade
uma ou mais declarações CSS.
<P STYLE="text-decoration: underline">Sublinhado
texto</P>
Actual Implementation of Style Attribute
<HTML>
<TITLE>Class Attributes</TITLE>
<CORPO>
<P STYLE="font-weight: bold">Esta é uma linha de texto em negrito</P>
Este é um texto normal
linha</P>
</CORPO>
</HTML>
CSS [Continuação...]
Classes Pseudo de Âncoras
Atualmente, apenas um tipo de elemento em HTML utiliza pseudo-classes: o A
(âncora) elemento
Uma pseudo-classe de âncora é um mecanismo pelo qual um navegador indica
para um usuário o status dos hyperlinks em um documento que o usuário está visualizando.
A:link { cor: vermelho } /* link não visitado */
A:visitado { cor: azul } /* link visitado */
A:active { cor: lima } /* link ativo */
CSS [Contd…]
KEY Concepts
Herança se você especificar BODY {cor: preto} então tudo
dentro do BODY herdará essa cor a menos que uma declaração contrária seja
feito.
Sensível a Maiúsculas Todo CSS é insensível a maiúsculas
Teste sua folha de estilo em mais de um navegador.
A modularidade do CSS permite um carregamento de página mais rápido
CSS [Contd…]
Exemplo - Folha de Estilo Embutida
CSS [Continuação…]
Aqui está o arquivo fonte para o programa acima.
CSS [Contd...]
Exemplo – Folha de Estilo Vinculada
CSS [Contd…]
Aqui está o arquivo fonte para o programa acima.
CSS [Contd…]
Abaixo está o arquivo [Link]
CSS [Continua…]
Links de Referência para CSS
[Link]
[Link]
[Link]
[Link]