Iniciação à programação e/ou formatação de páginas web
Links e ferramentas para produção de conteúdos web.
Editores: Atom Free || SublimeText || NotePad++ Free
Editor gráfico: Kompozer
Ftp: FileZilla Free
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 Hypertext Preprocessor - é uma linguagem script especialmente adequada para desenvolvimento web que pode ser incorporada no HTML
.:.Ferramentas .:. PhP programação
JavaScript ou JS, é uma linguagem de programação de alto nível. É uma linguagem dinâmica.
SQL Structured Query Language - Linguagem estruturada para Base de dados
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.
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.
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/
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
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;
}
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/