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.
Da mesma forma que, para comunicar utilizamos uma língua (português, inglês etc), os programas de computador utilizam uma linguagem para tomarem forma, os documentos utilizam um formato.
As páginas web utilizam
o formato HTML. Que significa Hyper Text Markup Language. Uma página web não é mais que um ficheiro de texto que contém comandos HTML. O termo 'página web' refere-se normalmente a uma página html. Um 'web
site' é, normalmente, um conjunto de páginas web.
<html>
Tudo que fizer terá que estar aqui no meio
</html>
Este tag indica que tudo que está dentro dele está em html. Este tag usado com o par correspondente no fim: </html>
<html>
<body>
<b>texto a ser destacado</b>
</body>
</html>
Um tag é um comando que diz ao browser que vai carregar a página e que deve aparecer num determinado local. Existem tags para uma infinidade de coisas, desde tags que inserem texto, dizem
qual o formato desse texto, imagens, sons, etc.
A maioria dos tags são usados aos pares, sendo que um é para abrir a instrução e outro para a fechar.
Exemplo, o tag que escreve o texto em negrito (bold)
envolve o texto que deverá aparecer: Este é o <b>texto a ser destacado</b>
Exemplo de um Tag que não é fechado <br> apenas muda
de linha.
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Cabeçalho tipo H1 tag h1</h1>
<p>Paragrafo
tag p</p>
<!-- comentário
em html -->
<br>
</body>
</html>
Neste exemplo podemos ver um código HTML com algumas tags básicas
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Cabeçalho tipo H1 tag h1</h1>
<p>Paragrafo
tag p</p>
<!-
-comentário em html
-->
<br>
</body>
</html>
Definição e Uso
O <! A declaração DOCTYPE> deve ser a primeira coisa no seu documento HTML, antes da tag <html>.
O <! DOCTYPE> declaração não é uma tag HTML; é uma instrução
para o browser sobre qual versão do HTML em que a página está
escrita.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Título da página</title>
</head>
<body>
<h1>Cabeçalho
tipo H1 tag h1</h1>
<p>Paragrafo
tag p</p>
<!- comentário em html -->
<br>
</body>
</html>
<meta charset=utf-8>
O padrão HTML5: Unicode UTF-8
Como os conjuntos de caracteres no ISO-8859 eram limitados em tamanho e não eram compatíveis em ambientes multilíngues, o
Unicode Consortium desenvolveu o Padrão Unicode.
O Padrão Unicode abrange (quase) todos os caracteres, pontuações e símbolos do mundo.
O Unicode permite o processamento, armazenamento e transporte de texto
independente da plataforma e do idioma.
A codificação de caracteres padrão no HTML-5 é UTF-8.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Título da página</title>
</head>
<body>
<h1>Cabeçalho tipo H1 tag h1</h1>
<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>
Atributos são informações que passamos através da Tag para que ela se comporte de determinada maneira. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag,
através de especificação).
Os Atributos possuem nome e um valor.
Lista de tags HTML
https://www.w3schools.com/tags/att_body_background.asp
<p>elemento</p> necessita_de fechar
<br> não necessita de fechar
O que são Tags?
Tags são o conjunto de caracteres que formam um elemento, ou seja, quando nos referimos à Tag "p" estamos a falar de: <p>
Existem dois tipos de Tags, as que necessitam de
fechar e as que não necessitam de Fechar.
Os elementos que não necessitam de fecho, também conhecidos como elementos vazios, somente utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de
maior ( > ).
Os containers são uma parte muito importante do HTML5, uma vez, a organização de um site depende dos containers e do tipo de containers que escolhemos para organizar o conteúdo do site.
<p>elemento</p> necessita_de fechar
O que são Tags?
Tags são o conjunto de caracteres que formam um elemento, ou seja, quando nos referimos à Tag "p" estamos a falar de: <p>
Existem dois tipos de Tags, as que necessitam de
fechar e as que não necessitam de Fechar.
Os elementos que não necessitam de fecho, também conhecidos como elementos vazios, somente utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de
maior ( > ).
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/
Aquando da elaboração de um site é necessário manter os ficheiros que o compõe bem organizados, nesse sentido a imagem ilustra um exemplo de organização comummente usado por programadores experientes.
As imagens são uma componente importante de qualquer site, contudo é necessário ter cuidado com os direitos de utilização das imagens usadas. Uma solução simples para este problema é pesquisar no Google por imagens etiquetadas para
reutilização.
Extensão - A extensão de uma imagem define o seu tipo e quando é inserida no site deve estar devidamente identificada, ou seja, é importante saber que Imagem.Jpg é diferente de imagem.JPG ou imagem.png. Para evitar
erros devemos certificar-nos que o nome e extensão da imagem correspondem integralmente ao nome e extensão inseridos no código HTML.
Caminho- Outro erro frequente é o de não identificar claramente o caminho da imagem no código HTML. Se for utilizada a estrutura de pastas mencionada anteriormente todas as imagens em index.html terão como caminho
e.g. img/imagem.jpg
<img src="limg/imagem.jpg" alt="HTML 5 Logo" /> // código para inserir uma imagem
<body style="background-image:url(img/entrudo.jpg)"> //Imagem de fundo, atributo do body