Web Design http://www.renovo.portalmaringa.com Projeto Renovo Sun, 13 Jun 2010 14:44:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Aula 5 – Javascript http://www.renovo.portalmaringa.com/aulas/aula-5-javascript/ http://www.renovo.portalmaringa.com/aulas/aula-5-javascript/#comments Sun, 13 Jun 2010 14:44:30 +0000 admin http://www.renovo.portalmaringa.com/?p=12 Blocos de código

Todo bloco de código tem um início representado por: { e um fim representado por: }.

Uma representação de bloco de código é:

nome do bloco { //este é o início do bloco

}//este é o fim do bloco

Funções

Uma função é um bloco de código é definida por:

nomeDaFunção(){
  //codigo a ser executado
}

Função é um bloco de código que pode ser chamado em qualquer lugar da página.

Exemplo de comparações:

function validarEntrada(){
var valor=document.getElementById("inputValor").value;
if(valor<50){
alert("menor que 50");
}else if(valor == 50){
alert("igual a 50");
}else if(valor > 50 && valor <= 75){
alert("valor entre 50 e 75");
}else{
alert("valor maior que 75");
}
}

Exercícios:

<html>
<head>
<script>
function validarEntrada(){
var valor=document.getElementById("inputValor").value;
if(valor<50){
alert("menor que 50");
}else if(valor == 50){
alert("igual a 50");
}else if(valor > 50 && valor <= 75){
alert("valor entre 50 e 75");
}else{
alert("valor maior que 75");
}
}
</script>
</head>
<body>
<input type="text" id="inputValor" />
<input type="button" onclick="validarEntrada'();"  value="Testar"/>
</body>
</html>


<html>
<head>
<title>Página de teste</title>
<script type="text/javascript">
function validaSaudacao(){
var date;
date = new Date();
if(date.getHours()>=6 && date.getHours()<12){
document.getElementById("saudacao").innerHTML="Bom Dia!";
}else if(date.getHours()>=12 && date.getHours()<18){
document.getElementById("saudacao").innerHTML="Bom Tarde!";
}else{
document.getElementById("saudacao").innerHTML="Bom Noite!";
}
}
</script>
</head>
<body onload="validaSaudacao();">
<div id="saudacao" style="width: 100% float:left;"></div>
</body>
</html>
]]> http://www.renovo.portalmaringa.com/aulas/aula-5-javascript/feed/ 0 Aula 4 – CSS, conceitos básicos http://www.renovo.portalmaringa.com/aulas/4-css-conceitos-basicos/ http://www.renovo.portalmaringa.com/aulas/4-css-conceitos-basicos/#comments Mon, 17 May 2010 14:40:00 +0000 admin http://www.renovo.portalmaringa.com/?p=10 O CSS é aplicado num html de três formas:

  • Diretamente na tag, utilizando o atributo style;

Dentro de sua tag html você pode colocar um código CSS, assim aplicando naquele elemento a formatação necessária.

Exemplo:

<html>
<head>
<title>Exemplo</title>
</head>
<body>
<h1 style="font-size:50px; color: red;">Exemplo de utilização do style</h1>
</body>
</html>

O resultado para este exemplo seria um Header primário (H1), vermelho, com tamanho da fonte em 50px.

  • Referenciado a um id;

Como já explicamos em aula anterior o atributo id é único, assim nomeamos no html os componentes, quando implementamos nosso CSS podemos atribuir formatação exclusiva ao elemento.

Exemplo (HTML):

<html>
<head>
<title>Exemplo</title>
</head>
<body>
<h1 id="titulo">Exemplo de utilização de referência por id</h1>
</body>
</html>

Exemplo (CSS):

#titulo {
font-size: 50px;
color: red;
}

Obteríamos o mesmo resultado do exemplo anterior.

  • Classes

São a melhor forma de reaproveitamento do código em CSS, você pode atribuir uma classe a vários elementos, podendo formatar de forma fácil todos esses elementos ao mesmo tempo. Classe é definida por . + nome da classe, segue exemplo.

Exemplo (HTML):

<html>
<head>
<title>Exemplo</title>
</head>
<body>
<h1 class="destacar">Exemplo de utilização de classes</h1>
<p class="destacar">Este texto também estará formatado</p>
</body>
</html>

Exemplo (CSS):

.destacar {
font-size: 50px;
color: red;
}

Obteríamos o mesmo resultado do exemplo anterior, porém tanto o título quanto o parágrafo vão ter a mesma formatação.

]]> http://www.renovo.portalmaringa.com/aulas/4-css-conceitos-basicos/feed/ 0 Aula 3 – Conceitos Básicos http://www.renovo.portalmaringa.com/aulas/aula-3/ http://www.renovo.portalmaringa.com/aulas/aula-3/#comments Mon, 17 May 2010 14:07:44 +0000 admin http://www.renovo.portalmaringa.com/?p=9 Tópicos da aula:

  • Atributos
  • Headings
  • Comentário
  • Formatação de texto utilizando html
  • Styles
  • Introdução ao CSS
]]> http://www.renovo.portalmaringa.com/aulas/aula-3/feed/ 0 Aula 2 – Conceitos Básicos HTML http://www.renovo.portalmaringa.com/aulas/2-conceitos-basicos-html/ http://www.renovo.portalmaringa.com/aulas/2-conceitos-basicos-html/#comments Mon, 12 Apr 2010 03:50:54 +0000 admin http://www.renovo.portalmaringa.com/?p=6 Conceitos Básicos HTML

Aula sobre os conceitos básicos de server-side e client-side, tags html e tabelas.


Aula 2 – Exemplos

]]> http://www.renovo.portalmaringa.com/aulas/2-conceitos-basicos-html/feed/ 2 Aula 1 – Introdução ao HTML http://www.renovo.portalmaringa.com/aulas/1-introducao-ao-html/ http://www.renovo.portalmaringa.com/aulas/1-introducao-ao-html/#comments Mon, 12 Apr 2010 03:01:37 +0000 admin http://www.renovo.portalmaringa.com/?p=3 Client-Side

É quando o processamento de uma página (direcinando para o enfoque do curso) se dá sem a necessidade de interpretação do código por um servidor;
Ex: Páginas HTML de conteúdo estático, uma vez baixada do servidor não será necessário a utilização do mesmo.

Server-side

É quando a página requer que o servidor interprete o código para montar a mesma, sendo sempre necessário um servidor ativo para sua visualização.
Ex: Páginas em php, java ou outra linguagem que requer interpretação. Site Ex: Google requer interação com servidor.

O que é HTML?

HTML é a linguagem que descreve uma página da internet.
- HTML é a sigla para Hyper Text Markup Language (Linguagem de Marcação de Hipertexto);
- HTML não é uma linguagem de programação
- Linguagem de marcação é definida por tags de marcação
- HTML usa tags de marcação para estruturar sua linguagem

HTML TAGS

Marcações html são comumente chamadas de HTML tags;

- As tags HTML são definidas pelos símbolos < e >, onde entre eles são colocadas palavras chaves;
- É comum toda tag ter um início e um fim, representando o início por: < > e o fim por </ >;

Documentos HTML = WEB PAGES

- Documentos HTML descrevem uma web page;
- Documentos HTML contem tags HTML e texto plano;

Um navegador pode interpretar diretamente um arquivo html sem ser necessária estrutura de servidores para hospedagem deste arquivo (client-side).

Exemplo de página HTML

<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Esta é minha primeira página html</p>
</body>
</html>

Explicando o código:

<html> = tag inicial para início de qualquer documento html;
<head> = cabeçalho da página
<title> = Título da página
<body> = Corpo do documento
<h1> = Título 1 ou Header 1, tag padrão para títulos
<p> = Parágrafo
todas as tag com a / indicam fim da mesma;

Exercício 1:

Utilizando as tags apresentadas anteriormente, faça uma página contendo:
- Seu nome no título da página
- Um título com o texto: Olá Mundo
- um parágrafo com seu nome completo e sua idade: Ex: Meu nome é Fernando Fabricio dos Santos, eu tenho 22 anos;

Cabeçalhos: HEADING

cabeçalhos em HTML são definidos pelas tags <h1> até <h6>

Parágrafos

Definidos pela tag <p>

Links:

Definidos pela tag <a>, e tem por função ao serem clicados levar a outra página ou realizar uma ação, uma das propriedades da tag <a> é o href, que leva a outro arquivo. Por exemplo: caso você tenha salvo seu arquivo Principal.html e outro arquivo Aula1.html no mesmo diretório se colocarmos no arquivo Principal.html a seguinte Tag: <a href=”Aula1.html”>Primeira Aula</a> ao clicar sobre o texto Primeira Aula você irá abrir o arquivo Aula1.html, dando o início a navegação. Mais propriedades desta tag serão disponibilizados posteriormente;

Arquivos para desmonstrar o exemplo:

Principal.html:

<html>
<head>
<title>Principal</title>
</head>
<body>
<a href="Aula1.html">Primeira Aula</a>
</body>
</html>

Aula1.html:

<html>
<head>
<title>Aula 1</title>
</head>
<body>
<h1>Primeira Aula de HTML</h1>
</body>
</html>

Imagens:

Para inserir uma imagem em HTML é utilizada a tag <img>, sua principal propriedade é o endereço da imagem, que é atribuído a tag pelo atributo: SRC. Exemplo:

Aula1.html

<html>
<head>
<title>Aula 1</title>
</head>
<body>
<h1>Primeira Aula de HTML</h1>
<img src="primeiraImagemInserida.jpg" />
</body>
</html>

Outros atríbutos podem ser atribuídos a tag <img> como: width (largura), height (altura), border (borda) e muitos outros que serão apresentados no decorrer do curso.

Exercício 2:

Crie uma pasta no computador com seu nome, dentro desta pasta crie seu primeiro documento html que será nomeado de: index.html. Este arquivo deverá conter:
- Título da página com seu nome;
- Título primário contendo o texto: Aulas Projeto Renovo:
- Título secundário com seguinte texto: Aula 1 – 14/03/2010;
- Link para visualizar o exercício realizado (direcionando para o Arquivo: Aula1.html) com o seguinte texto: Exercício;

Crie outro arquivo na mesma pasta nomeado Aula1.html, este arquivo deverá conter:
- Título da página com seu nome;
- Título primário contendo o texto: Primeira aula
- Parágrafo com site de onde foi tirada a imagem
- Link para retornar para a página index.html, com o seguinte texto: Retornar;

Resolução:

index.html

<html>
<head>
<title>Fernando Fabricio dos Santos</title>
</head>
<body>
<h1>Aulas Projeto Renovo:</h1>
<h2>Aula 1 - 14/03/2010</h2>
<a href="Aula1.html">Exercício</a>
</body>
</html>

Aula1.html

<html>
<head>
<title>Fernando Fabricio dos Santos</title>
</head>
<body>
<h1>Primeira Aula</h1>
<p>http://www.pogcast.com.br/wordpress/wp-content/uploads/2009/03/eumemu.jpg</p>
<img src="eumemu.jpg" />
<a href="index.html">Retornar</a>
</body>
</html>

Fonte de pesquisa:

W3 Schools:

http://www.w3schools.com/html/html_primary.asp

Motive

http://www.motive.co.nz/glossary/

]]> http://www.renovo.portalmaringa.com/aulas/1-introducao-ao-html/feed/ 0