Guia passo a passo para instalar o XAMPP, criar páginas HTML5/CSS, configurar o servidor Apache e preparar um formulário para futuras aplicações dinâmicas.
1. Visão geral da atividade – O objetivo é desenvolver uma aplicação simples composta por páginas HTML5 e CSS, hospedada em um servidor web local (XAMPP). A atividade está dividida em três partes: descrição e preparação, instalação/configuração do servidor e desenvolvimento da página.
2. Ferramentas necessárias
3. Download e instalação do XAMPP – Baixe o instalador para Windows, execute e siga os passos padrão (Next, Accept, Install). Ao final, inicie o painel de controle e ative o módulo Apache.
4. Estrutura de pastas – Dentro da pasta xampp/htdocs crie um diretório para o projeto (ex.: site_estatico). Todos os arquivos HTML, CSS e imagens ficarão aqui.
5. Criação da página HTML5 – Use as tags semânticas (<header>, <nav>, <section>, <footer>) e inclua um <link> para o CSS externo. Exemplo básico:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Minha primeira página</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Título da página</h1>
</header>
<section>
<p>Conteúdo principal...</p>
</section>
</body>
</html>
6. Estilização com CSS – Crie o arquivo style.css e defina cores, fontes, margens e o layout de div ou section. Exemplo:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #1a2a6c;
}
7. Formulário estático – Inclua um <form> sem ação (por enquanto). Ele servirá para demonstração e, futuramente, será conectado a PHP ou outra linguagem.
8. Teste no navegador – Abra http://localhost/site_estatico/indice.html. Verifique se o Apache está rodando (página de teste do XAMPP) e se o conteúdo aparece corretamente.
9. Próximos passos – Na disciplina seguinte, o formulário será ligado a PHP (métodos GET/POST) e a um banco de dados MariaDB para inserção e consulta de dados.
1 Visão geral da atividade – desenvolvimento de site estático com HTML5/CSS e servidor local.
1.1 Ferramentas – editor de texto, navegador, XAMPP.
1.2 Instalação do XAMPP – download, execução, ativação do Apache.
1.3 Estrutura de pastas – htdocs e diretório do projeto.
1.4 Criação da página HTML5 – uso de tags semânticas, link para CSS.
1.5 Estilização CSS – definição de cores, fontes e layout.
1.6 Formulário estático – marcação <form> sem backend.
1.7 Teste no navegador – acesso via http://localhost/.
1.8 Próximos passos – integração com PHP e MariaDB.
Resposta correta: C) C:\xampp\htdocs
É nesta pasta que o Apache procura os arquivos a serem servidos.
Resposta correta: A) <header>
É a tag semântica destinada ao cabeçalho de um documento ou seção.
Resposta correta: B) action=""
O atributo action define para onde os dados serão enviados; ao deixá‑lo vazio o formulário não tem destino.
httpd.conf?
Resposta correta: C) Restart
Reinicia o módulo Apache, aplicando as mudanças feitas no arquivo de configuração.
Comenta todos, espero que esteram todos bem.
A gente vai dar a início a última semana da disciplina de fundamentos de integrante Ered.
E dessa vez, a gente teve um bordal de um geral de um momento.
de uma pequena aplicação com o junto com o luto de páginas, o web com HTML5, CSS.
Foi a ideia aqui, revisitar todo o conteúdo que nós aprendemos durante as semanas atiliores, dar uma ênfase ao desenvolvimento com o HTML5, CSS, apresentar para vocês como é que a instalação e confusoração do servidor web com implantar uma página dentro do servidor web.
Então essa é a ideia dessa semana.
Bom, eu decidi dividir as videoaulas em três partes, com o Nesta, o videoaula em particular, que seria parte 1, eu vou tratar da descrição da atividade, nós vamos desenvolver, que modo mais prática, os componentes necessários que vão fazer parte dessa atividade, que envolvei o seu operacional, o servidor web, uma ferramenta para a edição de coria da atividade.
Vou abordar também o download dos componentes, não vai ficar descrito aqui, nesses slides, o link ou os links para vocês fazerem os downloads dos componentes.
E aí eu assumo que todos vão fazer o download dos componentes, e já iniciou a parte 2 desta videoaula, já com um processo de instalação e confusoração, supondo que todos já fizeram download.
Depois da segunda parte eu vou tratar do processo de instalação e confusoração para 20, onde vai abordar e como é que é a processa de instalação e confusoração do servidor web.
A parte, na verdade, não conjunto de ferramentos, em uma delas eu ou servidor web.
E na parte 3 do desenvolvimento, discussões sobre o desenvolvimento, sobre a estrutura da parte da piviene, a restrição, a parte de parte que estou desenvolvendo, que é, enfim, falar sobre nesta pequena aplicação, discutido que nós aprendemos durante a semana e fazer alguns textos.
É importante fazer as pessoas que estão disciplina, disciplina de fundamentos, e vocês vão ter uma disciplina, o que vai ser possível profundar muito mais esses conceitos e aprender muito mais coisas.
Por exemplo, o linguarde de esconder da piv, até mesmo da vez per, que são linguares utilizados para desenvolver aplicações dinâmicas.
O aplicações que envolve interação com o banco de dados, com o recuperação de informação, de base de dados, de grandes em base de dados.
E a formação dessa informação fica armazenada nessas bases de dados, através de uma linguagem de uma cação e de estilização, porque não é o caso de CSS, eu já também é licinto.
Então, esse tipo de assunto, dessa acordada, uma outra, disciplina, por isso não vai ser o objeto de estudo aqui.
Bom, a equilidade do nosso desenvolvimento, envolve a criação de um mínimo currico, o HTML5 e CSS.
Não deixa de ser uma aplicação simples, mas importante para quem nunca tem oportunidade de conhecer as bases fundamentais para o inicial de o movimento de sites na internet e de sites na web, na verdade, em parte de a apressão de sites, em pages com conteúdo, pensar em a aplicações, que também se utilizam de pages e uma forma de utilizar a delas, mas com intuito de cometer informação que estão armazenadas, que podem ainda ser recuperadas de ramecamento.
Então, nesta parte da semana, na videóloga, nessa primeira parte, eu vou abordar com vocês né? Algumas informações.
Então, esta espoujura de pages, nesse que vamos desenvolver aqui, que são na verdade dos outros pages, devem indicar o título dessa página, ter algumas sessões, especialmente com o do Dive que nós vimos na semana 4, na semana 5.
Uma sessão que indique informações uma da peda página, um link dentro do comédio da TML 5, com o arquivo, com toda a sessão da página ncse, ncse, então, esperado aqui a age a separação do conteúdo da página, dois tilos dela, que desrespeita a formatação da mãe de fonte, a cor do texto, a cor do background, se parte dela vai estar desta página e estará com o Boardezuru, então, é esperado aqui nós utilizemos um link para um arquivo com extensão.
cs, iniciativo tem lá toda a descrição relacionada à estilização do conteúdo da página da TML 5.
E o formulário, que na verdade eu vou deixar preparado ao final dessa página, que você vai ter nenhuma funcionalidade por trás dele, por conta da necessidade de trabalhar com uma linguagem de apressamento de dados, um linguagem, porque processa dados, para um seu lemundo de base de informação, todo para inserir a informação via esse formulário, quanto para recuperar a informação de um bom dos dados.
Então isso não vai ser o objetivo de estudo nesse plino, mas eu vou deixar esse formulário preparado, né, a gente vai trabalhar um brevemente com o formulário, para futuramente vocês recuperarem essa pequena aplicação e melhorarem ela no sentido de através de métodos como Get, Impost, né, próprio HTTP, consegui interagir com o base de informação utilizando o PHP, por exemplo.
Bom, então a gente começa, no ponto de vista de envolvimento em plantação, nas páginas, né, e primeiro a gente tem que configurar o servidor Web local, que é nesse servidor que vão ficar armazenados com as nossas páginas, inicializar esse servidor, fazer um teste de funcionamento, então, uma vez o servidor instalado, ele já vem para configurar no caso, né, ele vai explicar o porquê, porque é pouco, a gente faz um teste rápido, né, ele fica verificado se ele está em execução, o que ele já vem com convuncido de páginas, pode organizar, permite verificar se ele está em execução quando os pedaços páginas, quando eu vou mostrar para vocês, né, e trabalhar um pouco em cima de desenvolvimento dessas páginas, embora elas fiquem disponíveis para vocês também para utilizar em depois, para melhorarem, para partir dessa página, desenvolver em outros, né, tá.
E testar todo ambiente, fazendo acesso às suas páginas no comem, tá.
Aqui a gente precisa, para esta volta, então, eu vou precisar de um sistema personal, e aqui eu do Tei, um no ASEO, base, o indústico, um editor de texto, para gente programar, né, para desenvolver o todo core HTML no tipo de sublime, mas vocês podem utilizar um DPR, um no DPR demais, um mais ou qualquer editor de texto sobre preferência.
Um navegador web, o tipo de Chrome, mas tem um poda de visual, file foco, o ópera, é o VIVOD, o que é outro navegando mais glicete.
E o cerdor web local, que local, porque vai estar instalado configurado no seu dispositivo contacional no debut, mesmo tablet, porque é um de um texto top, tá.
Bom, o Windows, é onde ficar mais enado toda essa estrutura, tá.
O cerdor web, um editor de texto, para quando for conteúdo, um navegador, para que esse tipo de possível requisitar o conteúdo do cerdor web.
E o cerdor web, o próprio indústico, que é a mazena, todas as páginas que devem ficar dispostas para serem acessadas ou requisitadas, tá.
Quais as páginas nesse conteúdo, e vai ser um motivo através de execuções que são iniciadas e iniciadas pelos processos.
Consumplamento de editor de texto bastante poderoso, que permite qualificar não só documentos em HTML em CSS, mas trabalha com o que é o tipo de linguagem, cX, pQ, Python, per RAM, bR, mais variadas, linguagens de programação, de movimentos de aplicações.
Então, vou usar aqui uma versão pro Windows, eu deixo para vocês aqui o link, tá, para fazer download.
Como é de estar no ambiente Windows, eles são aqui os executáveis, tá.
Tomar essa, é dar um nipo clique, clique, né.
E vai para uma agenda de execução.
Em geral, só seguir com, dando o Next, né.
O próximo passo não teria uma dificuldade de infelizar a instalação desses, dessas ferramentas.
O Google Chrome também, que é uma verdadeira versão que eu conhecido, bastante utilizado, muito bom de ser utilizado, inclusive, tá também da onde pode ser fita aqui, quem ainda não tem a versão, mas quem tem alguma versão, algum outro, na verdadeiro, com Firefox, o Open, é certamente conteúdo das páginas que nós vamos mostrar aqui, desenvolver elas, vão rodar nesse browse, porque é um conjunto de páginas, ele tem um ídice simples.
E por fim, o seu melhor é ver a parte, nós precisamos instalar esse servidor, porque ele, que vai armazenar todas essas páginas, né.
Esse servidor, que nós vamos instalar, faz parte de um pacote de software, né, para desenvolvimento de aplicações no contexto, nada, nada, não dá.
Não veja aplicações, mas sim, por exemplo, com um conjunto de páginas, que é nosso caso aqui, com uma aplicação de dinâmicas que envolve recuperação de informação e inserção de informações em base de dados e jalas, pequenas, médios ou gretos.
Então, esse projeto é um projeto que já é um projeto tanto quanto o antigo, mas muito bom com o conjunto de desenvolvidores, resolviu juntar o la parte, o mais que ele, mais que sentimento MariaDB, o PDAP e o Python, tá, num pacote só, para facilitar o desenvolvimento de aplicações no contexto da OEB.
Ah, por que? Porque numa tarefa tão trivial e uma tarefa costosa, que requer leitura de manuais desses software, né, para, por exemplo, linkar, né, ou ligar, ou apache ao PHP e, por consequência, o PHP é o mais queiro.
Então, essa junção entre um servidor ou éb, que os pedares contem o urdo, uma linkar de processamento, né, para processar informações de forma mais dinária, um lugar de isso, de, pode dar inscrito naquele caso, para o PHP.
E a junção dela, com um bom dos dados, para facilmente esperar e armadilhar informações, requer, é, é, razonamente, um bom conjunto de configurações e ajustes, tá.
Então, é, é, é, salutar tem um, um conjunto de software, é usar que a gente tem essa integração que facilita muito desenvolvimento da aplicação, que é, naturalmente, o foco do que mais desenvolver, tá.
Então, o X, é, ele significa, é, da ideia de tudo, né, que pode ser os recretados, né, em qualquer serem um górdia especial, então, esse projeto o champ, ele tem inversões pra línux, pra um índios, pra mim aqui o S.
Tem variantes dele, né, que são tão, é, parecidos quantos antigos também como ele, que é o caso do Lump, e o Lump, né, na abro, né.
Então, são bem parecidos com um projeto, tá.
Então, o objetivo dele é construir uma decepção fácil de instalar, para, example, vidores entrar no mundo da, do Apache, não, o solo mundo da Apache, mas o mundo desenvolvimento Web também.
Então, pra tornar conviante, por exemplo, vidores se recuperaram com todos os recursos ativados.
Então, vai ter recursos lá, pega a PE, de MariaDB, de PE, mas que a gente não deve utilizar agora, tá.
Pois é, ele está reantivado, na uma minha da insulação, a gente não deve usar todos os recursos, principalmente, pega a PE e mais que é.
Então, a gente fica bastante limitar no caso aqui, o qual o discipline, trabalhar com um junto de partes, e a partir disso, deixar o caminho aberto para uma próxima disciplina vocês.
Aplare mais um desenvolvimento, mais aprofundado de aplicações Web, mas cuja base é a se nós estamos abordando aqui, em esta disciplina.
Bom, os resultados que a gente deseja obter vão ser partes do CNHTME, e vão estar no CNHTME, que pode ser acessado localmente, e até mesmo fora de sua rede, de comentar um pouco o que seria o acesso desse conteúdo armazenado localmente, para que ele seja acessado, normalmente, tá.
Mas vamos focar inicialmente, primordialmente, no acesso ao conteúdo local, dentro de uma mesma rede, dentro da rede local, caso, rede doméstica, na rede da sua casa, o rede da organização que você trabalha e que permite que você recorcida, desenvolvesse as atividades dessa aula.
Que, e além disso, para que a gente consiga deixar preparado um formulário para que a família você possa interagir, o ir para enviar dados de a rede, para ser armazenado no seu ridô, e, na mesma forma, recuperar esses dados do seu ridô, é através de uma linguagem que pega a perda, por exemplo, formatar os resultados dessa consulta, esse servidor de banco de dados, mostrar o conteúdo da informação recuperada no braço, inclusive de forma utilizada com o CSS.
Então, aqui nós devemos trecomos resultados esperados, uma página com essa cara, então uma página com algumas divisões que são simples, por isso que eu peço para vocês, depois de eu vou mostrar o que fazemos essas divisões usando o efetive, como a gente trabalha com tabela, o peracord de tabela, coloca imagem na página, como a gente tiver uma da p, a gente trabalha com estilização dela, então essa é a ideia.
Pois a gente tem uma página um pouco mais simples, que seria parte resumida, eu vejo que isso aqui é um pouco a per inicial, porque nunca lhe deu com uma linguagem de marcação, tudo que nós vemos, conseguimos enxergar na web, no ponto de vista de contigo, a base eu já tenho ele, obviamente tem software mais sofisticados, inclusive para acelerar os movimentos de código e HTML, para a gente precisa fazer tudo na mão, lidar com todas as tags, então é uma ferramentas que eu tomatei na criação de conteúdo, basicamente, dejo com desenvolvimento mais rápido, e ferramentas que ajudam a gente desenvolver um layout melhor e esse é o caso de eu apresentar nas outras partes desta idiota, alguns movimentos que permite a gente ir editando o código HTML e resultar do parecendo automaticamente, bastante interessante que ele está para vocês, mas é diante.
Bom, e vamos gerar o que eu gostaria de falar para vocês nesta primeira parte dos vídeos da semana, é isso, transforou as referências que eu utilizei para tratar desse assunto, mas vou abordar, tendo continuidade nas partes 2, 3, estou visual, então esperamos vocês se engagem e a gente se vê na parte 2, ter daqui a pouco, obrigado a todos.