<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="folhadestilo.css">
<title>Exercício prático HTML e CSS3</title>
</head>
<body>
<div id="conteudo">
<!-- Banner-topo -->
<section id="banner">
<img src="https://www.projetodraft.com/wp-content/uploads/2017/08/cognitive_computing.jpg" alt="banner-top">
</section>
<!-- Titulo 01 -->
<div id="titulo01">
<h1>A HISTÓRIA DA INCLUSÃO</h1>
</div>
<div id="subtitulo">
<h2>BH DIGITAL - FAZENDO PARTE DESSA HISTÓRIA</h2>
</div>
<!-- Links -->
<table id="links">
<ul>
<li><a href="#galeria">GALERIA DE FOTOS E VÍDEOS</a></li>
<li><a href="#pioneira">BH, PIONEIRA EM INCLUSÃO DIGITAL</a></li>
<li><a href="#atualmente">BH, ATUALMENTE NA INCLUSÃO DIGITAL</a></li>
<li><a href="#mapa">MAPA DE INCLUSÃO DIGITAL</a></li>
<li><a href="premio">PRÊMIO INCLUSÃO DIGITAL PBH</a></li>
</ul>
</table>
<img id="imagem02" src="https://media.istockphoto.com/photos/adult-female-students-in-computer-classroom-picture-id1035127348>
<div id="texto01"><p>A história de Belo Horizonte relaciona-se com o BH Digital que foi criado em 2005 pela Prefeitura de Belo Horizonte, o BH Digital é um trabalho inspirado no programa de inclusão digital do Governo Federal. Trata-se de uma iniciação inédita no País.</p>
<p>O BH Digital que tem como objetivo a implantação de espaços públicos e gratuitos para assegurar a inclusão digital dos cidadãos de Belo Horizonte. Nele, a tecnologia digital é utilizada intensamente para ampliar a cidadania, garantindo a inserção de comunidades no mundo digital, contribuindo, assim, para o fortalecimento e desenvolvimento social.</p>
</div>
<h3 id="pioneira">BH, pioneira em projetos de inclusão digital</h3>
<div id="texto03"><p>A Prefeitura de Belo Horizonte (Brasil) concluiu mais uma importante etapa para a consolidação do projeto BH Digital. A Prodabel (Processamento de Dados do Município de Belo Horizonte) assinou nesta terça-feira, dia 26, com a WNI do Brasil, empresa de comunicações para soluções wireless (sem fio), o contrato de compra de 12 torres de transmissão que serão implantadas em todo o município, garantindo o acesso digital a toda a população.</p>
<p>O projeto, inédito no país, tem o objetivo de cobrir 95% da capital mineira com uma rede de internet sem fio de banda larga. A iniciativa foi considerada uma referência pelo presidente da WNI, Nóbile Scandelari Júnior. «O BH Digital é, sem dúvida, o projeto mais inovador do Brasil, e Belo Horizonte será um case de sucesso que a projetará em todo o mundo», afirmou.</p>
<p>A implantação das 12 torres será acompanhada, inicialmente, da instalação de antenas receptoras em 250 espaços públicos do município, incluindo escolas municipais, telecentros, Unidades Municipais de Educação Infantil (Umei), vilas, praças e parques. A Vila Cafezal, primeira a ser beneficiada, terá cinco mil residências cobertas com a tecnologia que garantirá a internet sem fio para toda a comunidade local.</p></div>
<h3 id="atualmente">BH, Atualmente na inclusão digital</h3>
<div id="texto04"><p>No BH Digital, o acesso à internet é possibilitado a partir da implantação de links da Rede Óptica Municipal instalada na região central de Belo Horizonte. O programa é baseado nas tecnologias WiMax, WiMesh e WiFi, que viabilizam a cobertura do município, além da criação de Hotspots em praças, parques e outros locais públicos.</p>
<p>A plataforma utilizada no BH Digital é a de software livre - Libertas (distribuição GNU/Linux) - desenvolvida pela Prodabel. Em todos os postos de inclusão digital de Belo Horizonte, o cidadão tem acesso à internet e aos programas oferecidos pelo Libertas. A premissa está em sintonia com o Governo Eletrônico - Serviço de Atendimento ao Cidadão (GESAC), que incentiva o uso de softwares livres e possui toda a plataforma multisserviços para Inclusão Digital.</p></div>
<h3>Mapa de inclusão social</h3>
<!-- tabela 01 -->
<table border="3" bordercolor="FFF" align="center">
<tr>
<td><strong>CIDADE</strong></td>
<td><strong>UF</strong></td>
<td><strong>COMPUTADOR</strong></td>
<td><strong>POSIÇÃO</strong></td>
<td><strong>COMPUTADOR COM INTERNET</strong></td>
</tr>
<tr>
<td>Belo Horizonte</td>
<td>MG</td>
<td>64.17</td>
<td>13</td>
<td>58.69</td>
</tr>
<tr>
<td>São Caetano do Sul</td>
<td>SP</td>
<td>76.05</td>
<td>1</td>
<td>74.07</td>
</tr>
<tr>
<td>Florianópolis</td>
<td>SC</td>
<td>74.47</td>
<td>2</td>
<td>72.03</td>
</tr>
<tr>
<td>Vitória</td>
<td>ES</td>
<td>68.41</td>
<td>3</td>
<td>73.88</td>
</tr>
<tr>
<td colspan="5">RANKING CORPORATIVO COM AS PRINCIPAIS CIDADES DO BRASIL</td>
</tr>
</table>
<!-- Tabela 02 -->
<h3 id="premio">PRÊMIO INCLUSÃO DIGITAL PBH</h3>
<table id="envio">
<tr>
<td><form>
<p> VOCÊ ESTÁ SATISFEITO COM OS SERVIÇOS DE INCLUSÃO DIGITAL DA PBH?</p>
<input type="radio" name="opcao" value="selectA" checked>SIM<input type="radio" name="opcao" value="selectB" checked>NÃO
</form></td>
</tr>
<tr>
<form action="email@email.com" method="get"><p>Email<input type="email" name="email" size="25"></td>
</tr>
<tr>
<td>Sugestões:<td>
</td>
<tr>
<td><textarea rows="2" cols="40" name="variavel"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="Enviar"><input type="reset" name="Cancelar"></td>
</tr>
</table>
</body>
</html>
body {
background-color: #E3FCFC;
}
/* conteudo da pagina */
#conteúdo {
width: 400px;
margin: 2px;
padding: 80px;
}
/* Banner-Topo/imagem 01 */
#banner {
widht: 100%;
}
#banner img{
width: 100%; height: 400px
}
/* Titulo01 e subtitulo */
#titulo01 {
background-color: #2c7a0d;
color: white;
margin: 0;
font-size: 100%;
text-align: center;
}
#subtitulo {
color: #2c7a0d;
font-size: 20px; font-family: Verdana, Geneva, Tahoma, Sans-Serif;
text-align: center;
border-bottom: 2px, solid, color: #16f716;
padding: 2px
}
h3 {
font-size: 20px; font-family: Verdana, Geneva, Tahoma, Sans-Serif;
color: #697878;
}
/* links */
#links {
padding: 10px;
}
/* Imagem 02 */
#imagem02 {
float: left;
border: 3px solid green;
width: 50%;
margin-right: 20px;
}
/* Texto 01 */
#texto01 {
font-size: 20px; font-family: Verdana, Geneva, Tahoma, Sans-Serif;
color: #2c7a0d;
width: 600px;
margin-left: auto;
padding: 20px;
float: left;
line-height: 40px;
}
/* Texto 02 */
#texto02 {
fonte-size: 25; font-family: Verdana, Geneva, Tahoma, Sans-Serif;
color: grey;
text-align: justify;
float: center;
}
#texto03 {
fonte-size: 25; font-family: Verdana, Geneva, Tahoma, Sans-Serif;
color: grey;
text-align: justify;
float: center;
}
#texto04 {
fonte-size: 25; font-family: Verdana, Geneva, Tahoma, Sans-Serif;
color: grey;
text-align: justify;
float: center;
}
/* Tabela 02 */
#envio {
border: 1px solid black;
float: left;
padding: 10px;
}
