Programação para Web
Livros da Biblioteca do Claretiano:
- RANGEL, Alexandre Leite. Web Semântica. Batatais: Claretiano, 2014. 76 p.
Como instalar o XAMPP no Linux? Clique Aqui!
Desenvolvimento de Software
CodeShare - Compartilhamento de Código
Replit - Ferramenta de Desenvolvimento online
OnLine IDE - Compilador online
OneCompiler - Compilador Online
TutorialsPoint CodingGround - Diversos compiladores online
Cores
Geração de Paletas de Cores
Cores
Tabela de Cores Hexadecimal - Contém uma tabela de cores com os códigos em Hexadecimal
Conversor de Cores: RGB para Hexadecimal e de Hexadecimal para RGB
Ferramentas Diversas
Trello - Gerenciamento de Projetos
Lucidchart - Gerador de Diagramas
Canva - Geração de imagens e elementos gráficos
Lorem Ipsum - Geração de texto em latim para teste de layout
Mendimeter - Geração de Nuvem de Palavras
WordClouds - Gerador de Nuvem de Palavras
WordArt - Gerador de Nuvem de Palavras
QR Code Generator - Gerador de QR Code
InfoGram - Gerador de Infográficos
Venngage - Gerador de Infográficos
ResizePixel - Editor de Imagens Online
Archive.org - Histórico das Páginas da Web
Pilhas de Software
Como instalar o WampServer
Como Instalar o XAMPP
Materiais Extras
PW - B - Como Funciona a Internet.pdfPW1 - B - Introdução do Desenvolvimento para Web.pdfPW1 - C - Hiperlinks, Imagens e Listas.pdfPW1 - E - Tabelas.pdfPW- F - Formulários e Tabelas HTML.pdfCódigos
Página Padrão
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Hiperlinks
<!DOCTYPE html>
<html>
<head>
<title>Botafogo</title>
</head>
<body>
<center>
<a href="https://botafogofutebolsa.com.br/">
Botafogo de Ribeirão Preto
</a>
<br>
<a href="https://botafogofutebolsa.com.br/">
<img src="botafogo.png">
</a>
</center>
</body>
</html>
Áudio e Vídeo
<!DOCTYPE html>
<html>
<head>
<title>Media</title>
</head>
<body>
<!-- https://mixkit.co/free-sound-effects/ -->
<h1>Áudios: <i><u><b>Cachorro</b></u></i></h1>
<audio controls="controls">
<source src="sounds/dog.wav" type="audio/wav">
</audio>
<h1>Vídeos: <i><u><b>Viagem</b></u></i></h1>
<!-- https://mixkit.co/free-stock-video -->
<video width="1080" height="720" controls>
<source src="videos/viagem.mp4" type="video/mp4">
</video>
</body>
</html>
Tabelas
<!DOCTYPE html>
<html>
<head>
<title>Tabelas</title>
<style>
table, td, th {
border: 1px solid #000000;
}
th {
background-color: #c0c0c0;
}
</style>
</head>
<body>
<h1>Estilos Brasileiros</h1>
<p>
Acompanhe a seguir alguns estilos musicais e a época aproximada em ue eestes surgiram aqui no Brasil
</p>
<table>
<thead>
<tr>
<th>Estilo</th>
<th>Surgimento</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samba</td>
<td>Início do Século XX</td>
</tr>
<tr>
<td>Bossa Nova</td>
<td>Fim dos anos 1950</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">
<center>
<a href="http://www.brasil.gov.br/cultura/2009/10/musica-estilos">fonte:www.brasil.gov.br</a>
</center>
</th>
</tr>
</tfoot>
</table>
</body>
</html>
Javascript
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="Controles" id="divcor">
<h4>Cores com Javascript</h4>
<div class="Controles_vermelho">
<label for="lred">Vermelho</label>
<input type="range" id="red" min="0" max="255" onchange="setColorRed()" />
<input type="text" id="tred" name="tred" readonly size="10px" />
</div>
<div class="Controles_verde">
<label for="lgreen">Verde</label>
<input type="range" id="green" min="0" max="255" onchange="setColorGreen()" />
<input type="text" id="tgreen" name="tgreen" readonly size="10px" />
</div>
<div class="Controles_azul">
<label for="lblue">Azul</label>
<input type="range" id="blue" min="0" max="255" onchange="setColorBlue()" />
<input type="text" id="tblue" name="tblue" readonly size="10px" />
</div>
<div class="Controles_pickcolor">
<input type="color" id="ccolor" name="ccolor" onchange="getColorPick()" />
<input type="text" id="tpick" name="tpick" readonly size="10px" />
</div>
<div class="Controles_sistemacor">
<input type="radio" name="colors" id="rrgb">RGB
<input type="radio" name="colors" id="rhexa">Hexadecimal
</div>
<button type="button" id="bdefinecor" onclick="setColorBackground()">Altera Cor de Fundo</button>
</div>
</body>
</html>
CSS
.Controles {
margin: 20px 60px 30px 100px;
padding: 3px;
display: flex;
font-size: 1.5em;
width: 60vw;
justify-content: center;
flex-direction: column;
align-items: center;
border: colid;
border-radius: 2%;
border-color: rgb(30, 30, 30);
border-width: 5px;
}
.Controles_vermelho, .Controles_verde, .Controles_azul, .Controles_pickcolor {
display: flex;
flex-direction: column;
align-items: center;
margin: 2px;
padding: 5px;
gap: 5px;
border: solid;
border-radius: 2%;
border-color: rgb(30, 30, 30);
border-width: 1px;
}
.Controles_pickcolor {
box-sizing: border-box;
margin: 5px;
padding: 25px;
width: 233px;
border: solid;
border-radius: 2%;
border-color: rgb(30, 30, 30);
border-width: 1px;
}
.Controle_sistemacor {
margin-bottom: 5px;
padding: 5px;
display: flex;
align-items: center;
font-size: 0.9em;
}
input#red, input#green, input#blue, input#pick {
text-align: center;
}
input#red {
color: red;
}
input#green {
color: green;
}
input#blue {
color: blue;
}
input#red, input#green, input#blue {
appearence: none;
width: 16em;
height: 0.7em;
border-radius: 5px;
}
input#red {
background-color: rgb(255, 0, 0);
}
input#green {
background-color: rgb(0, 255, 0);
}
input#blue {
background-color: rgb(0, 0, 255);
}
Javascript
var cor_red, cor_green, cor_blue, cor_pick, cod_fundo;
window.onload = function setColorInicial() {
cor_red = document.getElementById("red").value;
document.getElementById("tred").value = cor_red;
cor_green = document.getElementById("green").value;
document.getElementById("tgreen").value = cor_green;
cor_blue = document.getElementById("blue").value;
document.getElementById("tblue").value = cor_blue;
cor_pick = document.getElementById("ccolor").value;
document.getElementById("tpick").value = cor_pick;
}
function setColorRed() {
cor_red = document.getElementById("red").value;
document.getElementById("tred").value = cor_red;
}
function setColorGreen() {
cor_green = document.getElementById("green").value;
document.getElementById("tgreen").value = cor_green;
}
function setColorBlue() {
cor_blue = document.getElementById("blue").value;
document.getElementById("tblue").value = cor_blue;
}
function getColorPick() {
cor_pick = document.getElementById("ccolor").value;
document.getElementById("tpick").value = cor_pick;
}
function setColorRGB() {
cor_fundo = 'rgb(' + cor_red + ',' + cor_green + ',' + cor_blue + ')';
document.getElementById("tpick").style.backgroundColor = cor_fundo;
document.getElementById("ccolor").style.backgroundColor = cor_fundo;
}
function setColorHexa() {
cor_fundo = 'rgb(' + cor_red + ',' + cor_green + ',' + cor_blue + ')';
document.getElementById("tpick").style.backgroundColor = cor_fundo;
document.getElementById("ccolor").style.backgroundColor = cor_fundo;
}
function setColorBackground() {
var sistemargb = document.getElementById("rrgb").checked;
var sistemahexa = document.getElementById("rhexa").checked;
if (sistemargb == true) {
setColorRGB();
} else if (sistemahexa == true) {
setColorHexa();
} else {
alert("Escolha um sistema de cor!");
}
}