Programação Web

Iniciação à programação e/ou formatação de páginas web

Links e Ferramentas

Links e ferramentas para produção de conteúdos web.
Editores: Atom Free || SublimeText || NotePad++ Free 
Editor gráfico: Kompozer
Ftp: FileZilla Free

HTML - "Conteúdo"

Html e Html5 -  Hypertext Markup Language, sistema padronizado para formatação de ficheiros de texto para obter efeitos de fontes, cores, gráficos e hiperlinks nas páginas da World Wide Web.

PHP - "Funcionalidade"

PHP Hypertext Preprocessor - é uma linguagem script especialmente adequada para desenvolvimento web que pode ser incorporada no HTML 
.:.Ferramentas .:. PhP programação

JavaScript - "Interatividade"

JavaScript ou JS, é uma linguagem de programação de alto nível. É uma linguagem dinâmica.

SQL - "Base de dados"

SQL Structured Query Language  - Linguagem estruturada para Base de dados

CSS - "Estilo"

CSS Cascading Style Sheets, HTML é usado para estruturar um documento da web, CSS especifica o estilo do documento - layout, cores e fontes. 


Cascading Style Sheets (CSS) é um mecanismo que permite adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web.
Em vez de colocar a formatação dentro do documento, o CSS cria um link para uma página que contém os estilos. Quando quiser alterar a aparência da página, basta modificar apenas o ficheiro CSS. Com a variação de atualizações dos browsers, o suporte ao CSS também pode variar.

O CSS cascading style sheets é fundamental para que o site tenha uma boa apresentação. Neste exemplo o CSS estará dentro do HTML mas é possível colocar o CSS num ficheiro à parte e posteriormente fazer referencia a esse ficheiro no HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Título da página</title>

h2
{
color:red;
font-size: 70px;
margin: 0px;
background-color: blue;
}
p{
color:#999999;
}

</head>
<body>
<h1>Cabeçalho tipo H1 tag h1</h1>

<h2>Este tag tem formatação CSS </h2>

<p>Paragrafo tag p</p>
<p> <font size="6">Paragrafo
tag p e tag font com atributo size</font> </p>
<!- comentário em html -->
<br>
</body>
</html>



CSS dentro do HTML.
Neste exemplo o código CSS foi colocado dentro do HTML entre os tags HEAD.
Caracterização do CSS usado neste exemplo:  - O CSS foi criado para formatar o tag H2 e P
O que vai acontecer ao tag H2: Agora, sempre que escrever o tag H2 dentro do HTML ele vai buscar a formatação criada no CSS.

Ver este código online


Nota: este é apenas um exemplo para usar CSS, no entanto o CSS tem inúmeras formatações para ver mais visita https://www.w3schools.com/css/


Neste exemplo o CSS estará dentro da tag HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Título da página</title>
h2
{
color:red;
font-size: 70px;
margin: 0px;
background-color: blue;
}
p{
color:#999999;
}
</head>
<body>

<h1 style="background-color:#999999;">Cabeçalho tipo H1 tag h1</h1>


<h1>Cabeçalho tipo H1 tag h1 - sem CSS</h1>
<h2>Este tag tem formatação CSS </h2>
<p>Paragrafo tag p</p>
<p> <font size="6">Paragrafo
tag p e tag font com atributo size</font> </p>
<!- comentário em html -->
<br>
</body>
</html>



CSS dentro da tag html.
Neste exemplo o código CSS foi colocado dentro da tag do HTML.
Caracterização do CSS usado neste exemplo:  - O CSS foi criado para formatar o tag H1
O que vai acontecer ao tag H1: Apenas este tag H1 ficará formatado com o código CSS, uma vez que o Style foi criado dentro da tag H1 e apenas para este caso.

Ver este código online


Nota: este é apenas um exemplo para usar CSS, no entanto o CSS tem inúmeras formatações para ver mais visita https://www.w3schools.com/css/

Neste exemplo o CSS estaránum ficheiro com extensão CSS com o nome Style.css que depois será referenciado no código html

<!- Ficheiro HTML -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Título da página</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>

<h1 style="background-color:#999999;">Cabeçalho tipo H1 tag h1</h1>
<h1>Cabeçalho tipo H1 tag h1 - sem CSS</h1>
<h2>Este tag tem formatação CSS em ficheiro externo </h2>
<p>Parágrafo tag p - Css em ficheiro externo</p>
<div>
     <h2>h2 dentro de div Este tag tem formatação CSS em ficheiro externo </h2>
</div>
<p> <font size="6">Paragrafo tag p e tag font com atributo size e formatação CSS em ficheiro externo</font> </p>

<br>
</body>
</html>

<!- Ficheiro CSS-->

h2{
 color:green;
 font-size: 50px;
 margin: 0px;
 background-color: red;
}
p{
color:#000066;
}
div h2 {
 color:white;
 font-size: 30px;
}





CSS num ficheiro  externo. Style.css
Neste exemplo o código CSS foi colocado num ficheiro externo chamado Style.css, posteriormente o HTML irá fazer referencia ao ficheiro *.css.  importando o estilo criado no ficheiro Style.css.




Nota: CSS num ficheiro  externo com DIV. Style.css
Para ser possível alterar o estilo de um elemento ou tag podemos estabelecer uma hierarquia com a tag DIV, assim, como mostra o exemplo o H2 que está dentro do div terá um estilo diferente do h2 que não está dentro do DIV


Nota: este é apenas um exemplo para usar CSS, no entanto o CSS tem inúmeras formatações para ver mais visita https://www.w3schools.com/css/

Reset CSS - no início do ficheiro CSS: Para que o CSS funcione bem é necessário fazer reset ao Style. Para este propósito podemos copiar um código já pronto que irá fazer reset do Style sempre que um browser abre a página. Para ver e copiar o código  http://html5doctor.com/html-5-reset-stylesheet/



Ver este código online

O CSS tem aparticularidade de afetar todos os tags HTML definidos no ficheiro CSS.
Como posso afetar apenas uma Tag? Utilizando Class é possível afetar apenas a Tag ou container definido na Class.

<!- Ficheiro HTML -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Título da página</title>
<link rel="stylesheet" href="Style2.css">
</head>
<body>

<h2 class="cssPara-h2">Class CSS - formatação CSS em ficheiro externo</h2>

<div class="cssParaDiv">
   <h2> CSS através de Classes</h2>
   <p> Parágrafo tag p - Css em ficheiro externo através de CLASS com nome cssParaDiv</p>
   <p>  Todos os parágrafos que colocar dentro de DIV serão afetados pela formatação da CLASS </p>
</div>

<p>Parágrafo tag p - Css em ficheiro externo</p>
<div>
     <h2>h2 dentro de div Este tag tem formatação CSS em ficheiro externo </h2>
</div>
<p> <font size="6">Paragrafo tag p e tag font com atributo size e formatação CSS em ficheiro externo</font> </p>
<br>
</body>
</html>

<!- Ficheiro CSS-->

h2{
 color:green;
 font-size: 50px;
 margin: 0px;
 background-color: red;
}
p{
color:#000066;
}
div h2 {
 color:white;
 font-size: 30px;
}

.cssPara-h2{
 color: white;
 background-color: black;
}

.cssParaDiv p{
 color: blue;
 background-color: green;
}

CSS num ficheiro  externo. (Afetar a tag H2 através de Class)
Outra forma de implementar o estilo CSS é através de Class. Uma CLASS pode ser definida para uma tag espacífica ou para um container como é o caso do DIV
Neste exemplo o tag H2 foi afetado pela Class cssPara-H2. O estilo da Class foi definido no ficheiro Css.

Amostra do ficheiro HTML - Class em tag

Amostra do ficheiro Css - Class em tag           



CSS num ficheiro  externo. (Afetar o container DIV através de Class)
Neste exemplo o container DIV foi afetado pela Class .cssParaDiv p

Importante: Neste exemplo todas as Tags p (parágrafo) dentro do container DIV com a class .cssParaDiv p. serão afetadas pelo estilo criado

Amostra do ficheiro HTML - Class em container

Amostra do ficheiro Css - Class em container          




Ver este código online

Nota: este é apenas um exemplo para usar CSS, no entanto o CSS tem inúmeras formatações para ver mais visita https://www.w3schools.com/css/

As id têm um funcionamento muito semelhante às Classes
O que é que as ID podem fazer que as Class não podem?   As id permitem fazer links dentro da mesma página (ancoras)

<!- Ficheiro HTML -->

<!DOCTYPE html>
<html><head> <meta charset=utf-8>
<title>Título da página</title>
<link rel="stylesheet" href="Style3.css">
</head>
<body>

<a href="#ancoraLinha15">link (ancora) para a linha 15</a>

<h2 id="ID1para-h2" >ID CSS - O id inicia com # </h2>

<h2 id="ID2para-h2">A class inicia com . </h2>

<div id="ancoraLinha15">
    <p>Esta é a linha 15</p>
</div>
</body>
</html>

<!- Ficheiro CSS-->

#ID1para-h2{
 color: red;
}
#ID2para-h2{
background-color: red;
font-size: 100px;

Ver este código online

Nota: este é apenas um exemplo para usar CSS, no entanto o CSS tem inúmeras formatações para ver mais visita https://www.w3schools.com/css/