| Avaliações e Critérios | |||
|---|---|---|---|
| AV1 | Trabalho indivivual: página pessoal |
|
2.0 |
| Trabalho em grupo: sítio de e-commerce |
|
8.0 | |
| AV2 | Avaliação integrada | 10.0 | |
| AV3 | Trabalho em grupo: sítio de e-commerce e confirmação de pedido |
|
10.0 |
Tecnologia web é definida por todo o código e recurso fornecido por um servidor web que tenha como resultado a execução em um navegador web. Devido ao grande número de navegadores existentes no mercado, foi necessário uma padronização dos recursos a serem interpretados pelos navegadores. Na busca desta padronização, foram definidos três linguagens padrõe: HTML, CSS e JavaScript.
O HTML tem a função de exibir e estruturar o conteúdo para o usuário, já o CSS fornece informações de formato e estilos de exibição, por fim, o JavaScript permite uma maior interatividade com o usuário. As especificações e validações dessas linguagem foi assumida por um consórcio de empresas, o W3C - www.w3.org.
Na página do W3C é possível encontrar toda a especifição HTML, CSS e JavaScript a qual serve de sugestão para ser implementado pelos fabricantes de navegadores para internet. Também, através do sítio http://validator.w3.org, é possível validar e diagnosticar prováveis erros em uma página web.
Definição: é uma liguagem baseada em tags, que é interpretada pelos navegadores de internet, por exemplo, Internet Explorer, Firefox, Chrome, Opera e outros. As tags são referências de blocos de conteúdo para o navegador, por isto, toda tag tem que ser aberta e fechada, tornando todo o conteúdo entre essa marcação parte de um bloco.
Atributos comuns a quase todas as tags são atributos de controle de tamanho, por exemplo: WIDTH e HEIGHT. Outra tag de destaque é a de comentário, esta permite colocar anotações no meio do código HTML sem que o navegador exiba ao usuário, tudo que for comentado deve estar entre <!- e -->.
Como descrito na seção anterior, o HTML é uma linguagem basea em TAGs, ou rótulos. Como a grande maioria das linguagens baseada em tags, ao iniciar um arquivo .HTML é necessário definir o seu conteúdo, para isto é usado a tag <HTML>. Dentro desta taga existe uma organização básica que divide o código em dois grandes blocos: cabeçalho e corpo. Respectivamente, estes blocos são definidos pelas tags: <HEAD> e <BODY>.
<HTML>
<HEAD>
<!- Área de cabeçalho -->
</HEAD>
<BODY>
<!- Corpo da página -->
</BODY>
</HTML>
O cabeçalho e o corpo do HTML possuem funções distintas, sendo que:
O uso adequado do cabeçalho é para definição de título da página, assim como, suas configurações de localidade, expiração, conjunto de caracteres, autoria e outros. Para realizar esta tarefa, existem um conjunto de tags especiais para o cabeçalho, chamadas de tag metas.
<HTML>
<HEAD>
<TITLE>Título do arquivo de Exemplo</TITLE>
<META NAME="description" CONTENT="A simple tutorial" />
<META NAME="keywords" CONTENT="Basic Tutorial" />
<META NAME="author" CONTENT="Humberto Sandmann" />
</HEAD>
<BODY>
<!- Corpo da página -->
</BODY>
</HTML>
Um tipo mais especializado de tag meta é a HTTP-EQUIV, que configura o navegador com certas especificações, por exemplo, o conjunto de caracteres utilizado na construção da página. Existe uma extensa lista de configurações que podem ou não funcionar de acordo com o navegador eleito pelo usuário. É sugerido seguinte link que maiores especificações: http://www.w3schools.com.
A formatação de fontes, cores e estilos em geral de uma página HTML pode ser feita atráves da configuração dos atributos de uma tag.
Porém, com a intenção de manter uma maior independência e organização no código, a definição de estilo e formatos é feita usualmente por folhas de estilos. Estas folhas de estilos são definidas em uma outra linguagem de tag, chamada CSS (abordada mais adiante neste tutorial).
Com o CSS é possível definir de estilo e formato para uma determinada tag em todo HTML, assim, é possível por exemplo especializar uma tag de de parágrafo para todo o texto. Em contra-partida, algumas vezes é necessário uma formatação de parágrafo (<p>) específica apenas para uma região da página, na forma de gerar um destaque, por exemplo. Para que permitir múltiplas definições de estilos e formatações de tags em uma mesma página HTML existem algumas tags especiais. São elas: <SPAN> e <DIV>.
<HTML>
<HEAD>
<TITLE>Título do arquivo de Exemplo</TITLE>
</HEAD>
<BODY>
<P>Este é um parágrafo comum, com as configurações padrões da página.</P>
<DIV>
<P>Este é um parágrafo que obedece as regras de estilo e formatação da DIV no qual esta inserido, isto é, quando definida uma configuração diferente (mais adiante). <span>Este trecho está destacado</span>, pode ser usado por exemplo para destaques em buscas pelo texto.</P>
</DIV>
</BODY>
</HTML>
O grande sucesso da internet é a possibilidade de acessar rapidamente qualquer informações através de uma menção de um assunto em uma página. Esta rápida conexão de um termo com outras páginas na internet que possuem um detalhamento mais aprofundado deste é o "link".
A tag responsável por links no HTML é a tag <A>. Quase que obrigatoriamente, esta tag usa o atributo HREF, que serve para definir o destino do links, ou seja, o local aonde o leitor irá parar.
Um outro link especial que permite uma iteratividade "Hyper" são os links para imagens. Com eles é possível inserir uma imagem dentro de um arquivo HTML. A tag responsável por esta revolução é a <IMG> e também vem acompanhada por um atributo quase obrigatório SRC, o qual define o caminho onde o navegador pode encontrar a imagem.
Tabelas são bastante úteis na apresentação de dados. Para HTML existem tags específicas para trabalhar com tabelas. Toda table no HTML é definida dentre as tags <TABLE> e </TABLE>.
As linhas e colunas de uma tabela são definidas respectivamente por <TR> e <TR>. Sendo que o número de colunas de uma tabela é sempre dado pelo número de colunas da linha com mais colunas.
No exemplo 1.8 é importante notar que a tabela possui uma linha de título, caracteristica comum em tabelas. Para destacar no HTML esses título é usada a tag <TH>. Logo:
Outro recurso adicional, mesclar células dentro de uma tabela pode ajudar em muito em seu layout. Para mesclar colunas deve-se usar o atributo COLSPAN, já para linhas o ROWSPAN.
Adicionalmente, existem tags para separar as linhas da tabela em grupos. Sendo possível dividir entre cabeçalho, corpo e rodapé. Para tanto são usadas as tags: <THEAD>, <TBODY> e <TFOOT>.
A intenção do HTML é tornar as páginas dinâmicas e atrativas para serem consultadas. Um funcionalidade permitida no HTML é a inserção de um frame, como um quadro, onde o conteúdo deste é proveniente totalmente de uma outra página. Esta funcionalidade é bem interessante para criação de menus e sub-menus. A tag é a <IFRAME> e seus atributos mais significativos são: SRC, que define a página a ser exibida no frame; HEIGHT, define a altura do frame, e; WIDTH, responsável pela largura do frame.
Definição: uma liguagem de definição de estilo (formatação de fontes, layouts, cores e outros) que pode ser aplicada a diversas mídias, dentre elas ao HTML ou XML. Na maioria das vezes o CSS é usado para definir padrões de formatação para páginas na Web.
A folha de estilo pode ser incorporada ao HTML de três formas basicamente:
<P><SPAN style='color: #FF0000; font-size: 120%;'>Parte em destaque</SPAN>: este é um exemplo de declaração de CSS inline.</P>
<HTML>
<HEAD>
<STYLE type="text/css">
P {
text-align: center;
color: #8888FF;
}
</STYLE>
</HEAD>
<BODY>
<P>Parágrafo formatado com CSS interno.</P>
</BODY>
</HTML>estilo.css
P {
text-align: center;
color: #8888FF;
}exemplo.html
<HTML>
<HEAD>
<LINK href="estilo.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY>
<P>Parágrafo formatado com CSS externo.</P>
</BODY>
</HTML>Cada elemento, no HTML, possui uma área de exibição. Através do CSS é possível configurar essa área de exibição, como: controle de margem e espaçamento.
Margem é o espaço entre o elemento e os demais elementos do contexto. Na figura 2.1 é a área amarelada. Para configurar a margem é usado o atributo: margin.
Espaçamento é o espaço entre as bordas do elemento e seus conteúdo. Na figura 2.1 é a área acinzentada. Para configurar o espaçamento é usado o atributo: padding.
É possível estabelecer a cada lado do elemento uma configuração específica. Para tanto, deve-se configurar uma a uma, por exemplo: margin: 10px 0px 20px; 0px, sendo a ordem: superior, direita, inferior e esquerda. Isto é também válido para a maioria dos atributos CSS, como cores de borda, estilo de borda, entre outros.
As cores são facilmente definidas no CSS através de uma codificação em hexadecimal. Como a maioria do uso do CSS é feito para monitores, o padrão mais utilizado é o RBG. O padrão RGB, Red-Green-Blue, controla a quantidade da intensidade de três cores básicas: vermelho, verde e azul.
A configuração pode ser feita setando 24 bits em hexadecimal, isto para monitores com capacidade de 24 bits de cores, ou 224 = 16777216 cores. A cada 8 bits é configurada uma cor. Logo na ordem:
A cada bit acesso é dada uma intesidade maior à cor. Logo, no exemplo acima, a cor é a combinação de todas as intensidades: FA3783. Resultado:
Outra forma de cálculo é usado os valores de base decimal, então para o exemplo acima, o código em hexadecimal pode ser trocador por: rgb(250, 55, 131).
As cores podem ser aplicadas a grande maioria das tags do HTML via CSS. Para fonte por exemplo é usado o atributo: color: #FA3783; ou color: rgb(250, 55, 131);. Já para cor de fundo, a tag é: background-color; ou um cor de borda para cada lado, border-color: #FF0000 #CC0000 #00FF00 #0000FF;
Para definir fontes no CSS é utilizado o atributo font-family. E para alinhamentos pode ser ajustado pelo atributo text-align.
O alinhamento também é aplicado para a grande maioria dos elementos HTML, como DIV, SPAN, IFRAME, IMG e outros.
Ajuste de tamanho é de grande importância para o layout de uma página web. Ele opde ser configurado para fontes e elementos, como tamanho de DIV, por exemplo.
Os atributos CSS responsáveis pelo ajuste do tamanho são: WIDTH e HEIGHT. Os seus valores podem ser absolutos, relativos ou percentuais. Valores absolutos são definidos em pixels (px); já relativos possuem como referência o tamanho padrão definido na configuração do navegador (em) e; para valores percentuais, a referência é o elemento no qual a tag está inserida, no caso de não estar dentro de elemento algum, então é usado o tamanho do BODY.