Introdução ao HTML e CSS Básico
Traduzido por
ScribdTranslationsIntrodução ao HTML e CSS Básico
Traduzido por
ScribdTranslations1
III ANO VI SEMESTRE
Papel-VII : Eletivo-C
Tecnologias da Web
[Link]
PROFESSOR DE CIÊNCIA DA COMPUTAÇÃO
COLÉGIO DE GRAU DRG GOVT PENTAPADU
2
Notas Detalhadas
UNIDADE – 1
VISÃO GERAL:
A Unidade-1 demonstra como criar páginas da web estáticas usando tags HTML básicas e apresentação de
conteúdo usando CSS. Esta unidade foca em como criar tabelas, formulários e listas para exibir o
conteúdo em páginas da web.
CONTENTS:
1. Basic HTML Tags
a. Lista
b. Tabelas
c. Imagens
d. Formulários
e. quadros
2. Folhas de Estilo em Cascata
a. Três mecanismos pelos quais podemos aplicar estilos
b. Formas de CSS
HTML significa Linguagem de Marcação de Hipertexto. É usado para exibir o documento
nos navegadores da web. As páginas HTML podem ser desenvolvidas para serem texto simples ou para
ser um programa multimídia complexo contendo som, imagens em movimento e
applet Java. HTML é considerado o formato de publicação global para a Internet.
Não é uma linguagem de programação. HTML foi desenvolvido por Tim Berners-Lee.
Os padrões HTML são criados por um grupo de organizações interessadas chamado W3C.
(consórcio mundial da web). Em HTML, a formatação é especificada usando tags. A
tag é um nome de formato cercado por colchetes angulares. Tags de fechamento que mudam um formato
também contém uma barra oblíqua.
3
Tags HTML básicas
1. Body tag :
A tag <body> contém alguns atributos, como bgcolor, background etc. bgcolor
é
usado para a cor de fundo, que aceita o nome da cor de fundo
ou hexadecimal
número e #FFFFFF e o atributo de fundo tomará o caminho do
imagem
que você pode colocar como imagem de fundo no navegador.
<body bgcolor=”#F2F3F4” background= “c:\amer\[Link]”>
2. Tag de parágrafo:
A maior parte do texto faz parte de um parágrafo de informação. Cada parágrafo está alinhado a
o
esquerda, direita ou centro da página usando um atributo chamado alinhar.
<p align="esquerda" | "direita" | "centro">
3. Tag de cabeçalho:
O HTML possui seis níveis de cabeçalho que são comumente utilizados. O maior
A tag de cabeçalho é <h1>. Os diferentes níveis da tag de cabeçalho além de <h1> são
<h2>,
<h3>, <h4>, <h5> e <h6>. Essas tags de cabeçalho também contêm atributo
chamado como
alinhar.
<h1 align="esquerda" | "direita" | "centro">........<h2>
4. tag hr:
Esta tag coloca uma linha horizontal ao longo do sistema. Essas linhas são usadas para
quebrar
a página. Esta tag também contém o atributo ou seja, largura que desenha o
horizontal
linha com o tamanho da tela do navegador. Esta tag não requer uma tag de fechamento.
<hr width="50%">
5. base font:
Este especifica o formato para o texto básico, mas não para os cabeçalhos.
<basefont size="10">
6. tag de fonte:
Isto define o tamanho da fonte, a cor e valores relativos para um determinado texto.
<font size="10" color="#f1f2f3">
7. tag em negrito:
Esta tag é usada para implementar o efeito de negrito no texto
<b>..........</b>
8. Tag itálica:
Isso implementa efeitos de itálico no texto.
<i>…….</i>
9. strong tag:
This tag is used to always emphasized the text
<strong>............</strong>
10. tag tt:
Esta tag é usada para dar efeito de datilografia ao texto
<tt>.........</tt>
11. tag sub e sup:
Essas tags são usadas para efeitos de subscrito e sobrescrito no texto.
<sub>.............</sub>
<sup>….........</sup>
12. Tag de quebra:
Esta tag é usada para quebrar a linha e começar a partir da próxima linha.
<br>
13. & < >   "
Essas são sequências de escape de caracteres que são necessárias se você quiser
exibir
caracteres que o HTML usa como sequências de controle.
Exemplo: < pode ser representado como <.
14. Tag de âncora:
Essa tag é usada para vincular duas páginas HTML, isso é representado por <a>
<a href=" caminho do arquivo "> algum texto </a>
href é um atributo usado para fornecer o caminho de um arquivo que você deseja
para
link.
Listas:
Uma das maneiras mais eficazes de estruturar um site é usar listas. Listas
fornece
índice direto no site. HTML fornece três tipos de listas, ou seja,
1. lista não ordenada,
2. lista ordenada e
3. lista de definições.
Listas podem ser facilmente incorporadas em outra lista para proporcionar um complexo, mas
estruturas legíveis. As diferentes tags usadas em listas são
explicado abaixo.
<li> …..</li>
As listas ordenadas (numeradas) e não ordenadas (com marcadores) são compostas por conjuntos de listas.
itens. Esta tag é usada para escrever itens de lista
1. lista não ordenada,
<ul type="disc"> .....</ul>
Esta tag é usada para listas não ordenadas básicas que usam um marcador na frente de cada item.
etiqueta, cada
a coisa entre a tag está encapsulada dentro de tags <li>.
2. lista ordenada,
<ol type="1" | "a" | "I" start="n">…..</ol>
Esta tag é usada para listas não ordenadas, que usam um número na frente de cada item da lista ou ele
usa qualquer elemento que é mencionado no atributo type da tag <ol>, comece
o atributo é usado para indicar o número inicial da lista.
3. lista de definições.
<dl>….. </dl>
Esta tag é usada para a terceira categoria, ou seja, lista de definições, onde números ou marcadores são
não é usado na frente do item da lista, em vez disso, usa definição para os itens.
<dt>…..</dt>
Este é uma subtag da tag <dl> chamada de termo de definição, que é usada para marcar
os itens cuja definição é fornecida na próxima definição de dados.
<dd> ….</dd>
Esta é uma sub-tag da tag <dd>, a definição dos termos está contida dentro delas.
tags. A definição pode incluir qualquer texto ou bloco.
Tabelas:
A tabela é uma das construções HTML mais úteis. As tabelas são encontradas em toda a web.
aplicação. O principal uso de tabelas é que elas são usadas para estruturar
as peças de
informações e para estruturar toda a página da web. Abaixo estão algumas das tags usadas
em
mesa.
Links
The HTML code for a link is simple. It looks like this:
<a href="url" target="">Texto do link</a>
Frames:
Os frames proporcionam uma interface agradável que torna o seu site fácil de navegar.
O frameset contém um conjunto de referências a arquivos HTML, cada um dos quais é
exibido dentro de uma moldura separada.
Com quadros, você pode exibir mais de um documento HTML no mesmo navegador
janela. Cada documento HTML é chamado de quadro, e cada quadro é independente do
outros.
O elemento frameset contém dois ou mais elementos de quadro. Cada elemento de quadro contém um
documento separado.
Forms:
Os formulários são a melhor maneira de adicionar interatividade a um elemento em uma página da web. Eles são
geralmente usado para permitir que o usuário envie informações de volta ao servidor, mas também pode ser usado para
simplificar a navegação em sites complexos. As tags que são usadas para implementar formulários são
segue.
<form action="URL" method="post" | "get">…….</form>
Folhas de Estilo em Cascata:
Um dos aspectos mais importantes do HTML é a capacidade de separar a apresentação
e conteúdo. Um estilo é simplesmente um conjunto de instruções de formatação que podem ser aplicadas a um
pedaço de texto.
Existem três mecanismos pelos quais podemos aplicar estilos aos nossos documentos HTML.
·Folha de Estilo Inline:
O estilo pode ser definido dentro da tag HTML básica.
· Folha de Estilo Interna:
O estilo pode ser definido na tag <head>
· Folha de Estilo Externa:
Estilos podem ser definidos em arquivos externos chamados folhas de estilo, que podem ser então utilizados.
em
qualquer documento incluindo o estilo através de uma URL.
UNIDADE – II
Visão Geral :
A Unidade II demonstra as validações do lado do cliente usando JavaScript. Ela se concentra em como lidar com
eventos, exceções, etc. Esta unidade também se concentra em conceitos de DHTML.
CONTENTS:
1) Conceitos de JavaScript
2) Objects in java scripts
3) DHTML com JavaScript
JavaScript (também chamado de JScript) é uma linguagem de script com o objetivo principal de dar vida a
nossas páginas da web. É muito poderoso, flexível e fácil de aprender.
Recursos
Imperativo e estruturado
Dinâmico
tipagem dinâmica
o baseado em objetos
a avaliação em tempo de execução
Funcional
as funções de primeira classe
as funções aninhadas
o fechamento
Baseado em protótipos
Diversos
Extensões específicas do fornecedor
Existem três maneiras pelas quais podemos colocar JavaScript para uso em uma página da web.
1. Dentro da seção head.
2. Dentro da seção do corpo.
3. Em um arquivo externo.
A tag <script> HTML é usado para inserir um Java Script em uma página HTML.
Eventos
Ao usar JavaScript, temos a capacidade de criar páginas web dinâmicas. Eventos são ações que
pode ser detectado por Java Script.
Cada elemento em uma página web dinâmica ou estática possui certos eventos que podem acionar o Java Script
funções. Por exemplo, podemos usar o evento onClick de um elemento de botão para indicar que um
A função será executada quando um usuário clicar nesse botão. Definimos os eventos nas tags HTML.
Exemplos de eventos:
Um clique do mouse
Uma página da web ou uma imagem carregando
Passar o mouse sobre um ponto quente na página da web
Selecionando uma caixa de entrada em um formulário HTML
Enviando um formulário HTML
Uma tecla pressionada
A tabela a seguir lista os eventos reconhecidos pelo JavaScript:
Os eventos são normalmente usados em combinação com funções, e a função não pode ser executada.
antes que o evento ocorra.
JavaScript - Capturando Erros
Existem duas maneiras de capturar erros em uma página da Web
Instrução Try...Catch
A instrução try...catch permite que você teste um bloco de código em busca de erros. O bloco try contém o
código a ser executado, e o bloco catch contém o código a ser executado se um erro ocorrer.
tente
{
//Execute algum código aqui
}
pegar(erro)
{
//Lidar com erros aqui
}
O Evento onerror
O evento onerror pode ser explicado em breve, mas primeiro você aprenderá como usar o throw
declarações para criar uma exceção. As declarações throw podem ser usadas junto com o try...catch
declaração.
O objeto Date
A classe Date é usada para armazenar e recuperar datas em JavaScript.
Array
O objeto Array é usado para armazenar um conjunto de dados ou valores em um único nome de variável.
var urArray=new Array()
DOM (modelo de objeto de documento)
Um DOM (modelo de objeto de documento) é uma interface de programação de aplicativos (API) para
representando um documento (como um documento HTML) e acessando e manipulando o
vários elementos (como tags HTML e cadeias de texto) que compõem esse documento. Java
Navegadores da web com scripts sempre definiram um modelo de objeto de documento; um navegador da web
O DOM pode especificar, por exemplo: que os formulários em um documento HTML são acessíveis
através do array forms[] do objeto Documento.
validação de formulário
A validação de formulário é o processo de verificar se um formulário foi preenchido corretamente ou não antes de
está processado.
Existem dois métodos para o formulário
validation. 1: Client-Side validation
Na validação de formulário do lado do cliente em Java Script é uma parte importante de um site onde os dados precisam ser
ser coletado do usuário. Os usuários são intrinsecamente ingênuos e vão bagunçar a entrada de dados em um site
forma se der a oportunidade. É o trabalho do programador web, então, garantir que suas páginas
quais formulários incluem validação de formulário do lado do cliente usando JavaScript.
Validação do lado do servidor
No Java Script, o servidor também se beneficia da validação do lado do cliente, pois economiza uma quantidade
de idas e vindas entre o visitante e o servidor devido a erros de digitação e facilmente identificáveis
erros. Essa vantagem não alivia a necessidade de fazer no lado do servidor.
validação.
UNIDADE - III
Overview :
Esta unidade se concentra na criação de documentos XML que são projetados para carregar dados. XML é tudo sobre
informações descritivas. XML foi projetado para transportar e armazenar dados. Podemos criar web
documentos de XML usando XSLT para transformar nossos documentos em HTML. Podemos então enviar
nosso XML para um processador XSLT no servidor web e servir esse resultado para o navegador web. Isso
torna nossa documentação disponível em qualquer formato que precisemos.
Contents :
Introdução ao XML
DTD
Esquema XML
XSLT
DOM
SAX
Introdução ao XML
XML descreve e foca nos dados enquanto HTML apenas exibe e foca em como os dados
aparências. HTML é tudo sobre exibir informações, mas XML é tudo sobre descrever informações.
As tags usadas para marcar documentos HTML e a estrutura dos documentos HTML são
pré-definido. O autor de documentos HTML só pode usar tags que estão definidas no HTML
padrão.
No HTML, alguns elementos podem estar aninhados de forma inadequada uns dentro dos outros, assim:
<b><i>Este texto é em negrito e itálico</b></i>
No XML, todos os elementos devem estar devidamente aninhados entre si, assim:
Um documento XML é composto por
1. Declarações (prologo, referência dtd)
2. Elementos
3. Comentários
4. Entidades (pré-definidas, definidas pelo usuário, entidades de caráter)
A declaração XML: Sempre a primeira linha no documento XML:
A declaração XML deve sempre ser incluída. Ela define a versão XML e o caractere
codificação usada no documento. Neste caso, o documento está em conformidade com a especificação 1.0 de
XML e usa o conjunto de caracteres ISO-8859-1 (Latin-1/Oeste Europeu).
<?xml version="1.0" encoding="ISO-8859-1"?>
Elemento Raiz: A próxima linha define o primeiro elemento do documento. Ele é chamado de raiz.
elemento
<E-mail>
Child Elements:The next 4 lines describe the four child elements of the root (To, From,
Subject and Body).
E finalmente, a última linha define o fim do elemento raiz.
</E-mail>
</E-mail>
regras-de-sintaxe
Todos os elementos XML devem ter uma tag de fechamento
As tags XML são sensíveis a maiúsculas e minúsculas
Os elementos XML devem estar devidamente aninhados
Os documentos XML devem ter um elemento raíz
Always Quote the XML Attribute Values
Com XML, o Espaço em Branco é Preserve
Comentários em XML <!-- Este é um comentário -->
Os Elementos XML têm Relações
Os elementos em um documento XML estão relacionados como pais e filhos.
Os elementos XML devem seguir estas convenções de nomenclatura:
Os nomes não devem começar com um número ou caracter de pontuação, mas podem conter letras.
números, e outros caracteres sem espaços. Nomes não devem começar com as letras
xml (ou XML, ou Xml, etc)
Atributos XML
Os elementos XML podem ter atributos na tag de início, assim como o HTML.
Os atributos são usados para fornecer informações adicionais sobre os elementos.
Os valores dos atributos devem sempre estar entre aspas. Use aspas simples ou
aspas duplas ex. <color="red"> ou <color='red'>
Se o valor do atributo em si contiver aspas duplas, é necessário usar aspas simples.
citações, como neste exemplo: <nome='Rose "Índia" Net'>
Se o valor do atributo em si contiver aspas simples, é necessário usar
aspas duplas, como neste exemplo: <name="Rose 'India' Net">
DTD (Definição de Tipo de Documento)
Uma Definição de Tipo de Documento (DTD) define os blocos de construção legais de um XML
documento. Ele define a estrutura do documento com uma lista de elementos e atributos legais.
Uma DTD pode ser definida dentro de um documento XML, ou uma referência externa pode ser
declarado.
DTD Interno
Se o DTD estiver definido dentro do documento XML, deve estar envolto em um DOCTYPE
definição com a seguinte sintaxe:
<!DOCTYPE elemento-raiz [declarações-de-elemento]>
DTD Externa
Se o DTD estiver definido em um arquivo externo, deve ser envolvido em um DOCTYPE
definição com a seguinte sintaxe:
<!DOCTYPE elemento-raiz SYSTEM "nome-do-arquivo">
Importância de um DTD
Com um DTD, um arquivo XML carrega uma descrição de seu próprio formato.
Com um DTD, grupos independentes de pessoas podem concordar em usar um DTD padrão
para trocar dados.
A aplicação do usuário pode usar um DTD padrão para verificar se os dados que recebe do exterior
o mundo é válido.
O usuário também pode usar um DTD para verificar seus próprios dados.
Blocos de construção de documentos DTD XML:
Elementos
Atributos
Entities
PCDATA
CDATA
PCDATA
PCDATA significa dados de caracteres analisados. Pode ser pensado como os dados de caracteres (texto)
encontrado entre a tag de início e a tag de fim de um elemento XML.
PCDATA é um texto a ser analisado por um analisador. O texto é verificado pelo analisador para
entidades e marcação.
Tags dentro do texto serão tratadas como marcação e entidades serão expandidas. No entanto,
Os dados de caractere analisados não devem conter nenhum &, < ou > caracteres. Estes devem ser
representado pelas entidades &, <, e >, respectivamente.
CDATA:
CDATA é dado de caractere que NÃO será analisado por um analisador. Tags dentro do texto
não será tratado como marcação e as entidades não serão expandidas.
DTD-Elementos: Elementos são os principais componentes constitutivos de documentos XML.
Os elementos podem conter texto, outros elementos ou estar vazios.
Sintaxe:
<!ELEMENT nome-do-elemento categoria>
ou
<!ELEMENT nome-do-elemento (conteudo-do-elemento)>
EX:Elementos com Dados de Caracteres Analisados
<!ELEMENT To (#PCDATA)>
<!ELEMENT De (#PCDATA)>
Elementos com Filhos (sequências)
Elementos com um ou mais filhos são declarados com o nome dos elementos filhos
dentro dos parênteses como :
<!ELEMENT nome-do-elemento (filho1)>
ou
<!ELEMENT nome-do-elemento (filho1,filho2,...)>
EX:
<!ELEMENT E-mail (To,From,Subject,Body)>
Quando as crianças são declaradas em uma sequência separada por vírgulas, as crianças devem
aparecer na mesma sequência no documento.
Em uma declaração completa, as crianças também devem ser declaradas.
Crianças podem ter filhos.
Qualificadores de etiqueta
* Indica zero ou mais ocorrências.
<!ELEMENT color (Fill-Red*)>
? Indica ocorrência zero ou uma vez.
<!ELEMENT cor (Preencher-Vermelho?)>
+ Indica uma ou mais ocorrências
<!ELEMENT color (Preenchimento-Vermelho+)>
( ) Indica um grupo de expressões a serem correspondidas juntas.
<!ELEMENT E-mail(#PCDATA|Para|De|Assunto|Corpo)*>
| Indica uma opção.
<!ELEMENT E-mail (Para, De, Assunto, (Mensagem|Corpo))>
Valores de tags especiais em DTD
• A definição da tag pode ter o seguinte em vez de subtags:
QUALQUER
Indica que a tag pode conter qualquer outro elemento definido ou PCDATA.
Geralmente usado para o elemento raiz.
Os elementos podem aparecer em qualquer ordem em um documento desse tipo.
Não recomendado para uso.
• VAZIO
Diz que o elemento não contém conteúdos (e, consequentemente, nenhum correspondente
tag-de-fim)
Ex: para permitir uma tag de bandeira usada como <flag/> em um arquivo xml, a entrada DTD deve ser
<!ELEMENT flag EMPTY>
DTD-Attributes:
Os atributos fornecem informações adicionais sobre os elementos.
In a DTD, attributes are declared with an ATTLIST declaration.
Declarando Atributos
A declaração ATTLIST define o elemento que possui um atributo com o nome do atributo,
tipo de atributo, e valor padrão do atributo. Uma declaração de atributo tem a seguinte sintaxe:
<!ATTLIST nome-do-elemento nome-do-atributo tipo-do-atributo valor-padrão>
Exemplo de DTD:
<!ATTLIST recibo tipo CDATA "cheque">
exemplo de XML:
<reciept type="check" />
{"DTD-Entities":"Entidades DTD"}
Entidades são variáveis usadas para definir atalhos para texto padrão ou caracteres especiais. Entidade
referências são referências a entidades As entidades podem ser declaradas interna ou externamente.
Declaração de Entidade Interna
Sintaxe:
<!ENTITY entity-name "entity-value">
Esquema XML
Os Esquemas XML são mais poderosos do que DTDs.
O XML Schema é um padrão W3C. É uma alternativa baseada em XML aos DTDs.
Ela descreve a estrutura de um documento XML.
A linguagem de Esquema XML também é referida como Definição de Esquema XML (XSD).
Acreditamos que em breve os Esquemas XML serão usados na maioria das aplicações Web como um
substituto para DTDs. Aqui estão algumas razões:
Os esquemas XML são extensíveis para adições futuras
Esquemas XML são mais ricos e poderosos do que DTDs
Esquemas XML são escritos em XML, suportam tipos de dados e namespaces.
O que é um Esquema XML?
O Esquema XML é usado para definir os blocos de construção legais de um documento XML, apenas
como um DTD.
Um Esquema XML define integrantes definidos pelo usuário, como elementos, sub-elementos e
atributos necessários em um documento XML.
It defines the data types for elements and attributes along with the occurrence order .
Isso define se um elemento está vazio ou pode incluir texto.
It also defines default and fixed values for elements and attributes
Características dos Esquemas XML :
Esquemas XML Suporte a Tipos de Dados
Uma das maiores forças dos Esquemas XML é seu suporte para tipos de dados. Com suporte para
data types:
É mais fácil descrever o conteúdo de documentos permitidos
É mais fácil validar a correção dos dados
É mais fácil trabalhar com dados de um banco de dados
É mais fácil definir facetas de dados (restrições sobre dados)
É mais fácil definir padrões de dados (formatos de dados)
É mais fácil converter dados entre diferentes tipos de dados
Esquemas XML usam Sintaxe XML
Outra grande força dos Esquemas XML é que eles são escritos em XML. XML simples
editores são usados para editar os arquivos do Schema. Até mesmo os mesmos analisadores XML podem ser usados para analisar
os arquivos de Esquema.
Esquemas XML são extensíveis
Os esquemas XML são extensíveis, porque são escritos em XML. Assim, um usuário pode reutilizar um
Schema em outros Schemas e também pode se referir a múltiplos schemas no mesmo documento. Ele pode
também criar seus próprios tipos de dados derivados dos tipos padrão
Esquemas XML de Comunicação de Dados Segura e Confiável
Ao enviar dados de um remetente para um receptor, é essencial que ambas as partes tenham o mesmo
"expectativas" sobre o conteúdo. Com Esquemas XML, o remetente pode descrever os dados de uma maneira
que o destinatário entenderá. Uma data como: "03-11-2004" será, em alguns países,
interpretado como 3 de novembro e em outros países como 11 de março. No entanto, um elemento XML com
um tipo de dado como este: <datetype="date">2004-03-11</date> garante um entendimento mútuo de
o conteúdo, porque o tipo de dado XML "data" requer o formato "AAAA-MM-DD".
XSLT
XSLT (Transformações de Linguagem de Estilos Extensível) é umdeclarativo, XML-baseado
idioma usado para otransformaçãode documentos XML. O documento original não está
alterado; em vez disso, um novo documento é criado com base no conteúdo de um existente.[2]O novo
o documento pode serserializadosaída pelo processador em sintaxe XML padrão ou em outro
formato, comoHTMLoutexto simples.3XSLT é mais frequentemente usado para converter dados entre
diferenteEsquemas XMLou para converter dados XML empáginas da webouPDFdocumentos.
API Simples para XML (SAX)
SAXé umlexical, orientado a eventosinterface na qual um documento é lido seriamente e seu conteúdo é
reportado comocallbacksa váriosmétodosem umobjeto manipuladordo design do usuário. SAX é rápido
e eficiente de implementar, mas difícil de usar para extrair informações aleatórias do
XML, uma vez que tende a sobrecarregar o autor da aplicação com a necessidade de acompanhar qual parte do
o documento está sendo processado. É mais adequado para situações em que certos tipos de
as informações são sempre tratadas da mesma forma, não importa onde ocorram no documento.
Modelo de Objetos do Documento (DOM)
DOM(Modelo de Objeto de Documento) é uminterfaceorientadoInterface de Programação de Aplicações
que permite a navegação de todo o documento como se fosse uma árvore de Nó" objetos
representando o conteúdo do documento. Um documento DOM pode ser criado por um analisador, ou pode ser
gerado manualmente por usuários (com limitações). Os tipos de dados nos Nós DOM são abstratos;
as implementações fornecem as suas própriasprogramaçãoespecífico de linguagemligaduras. DOM
as implementações tendem a sermemóriaintensivo, pois geralmente requerem o documento inteiro para
ser carregado na memória e construído como uma árvore de objetos antes que o acesso seja permitido.