Muitas pessoas pensam que criar seu próprio site éeste é um negócio complicado que requer preparação séria e o uso de ferramentas complexas. Na verdade, um mínimo de conhecimento e o programa mais básico do Windows, o Bloco de Notas, são suficientes para começar. Seguindo as instruções simples sobre como criar um site no Bloco de notas, você pode criar a primeira página completa em algumas horas.
Desenvolvedores profissionais da web, experientesconstrutores de sites raramente usam o Bloco de notas em seu trabalho, mas existem duas categorias de usuários para os quais este programa é uma excelente escolha:
Muitos profissionais se familiarizaram com o layout eHTML, descobrindo como criar um site usando o Bloco de notas. Isso permitiu que consolidassem de forma confiável e rápida todo o conhecimento adquirido. O Notepad não se destina a trabalhar com código e marcação, não possui dicas embutidas, autocompletar e outros chips disponíveis em programas modernos, o que significa que o desenvolvedor pode confiar apenas em si mesmo e em sua memória.
O editor de texto do bloco de notas tem o mais modestointerface minimalista, o que significa que não é necessário por muito tempo para entender a complexa funcionalidade do programa. Isso é muito atraente para usuários que não planejam perder tempo aprendendo uma ferramenta que não usarão com frequência.
As instruções passo a passo sobre como criar um site em HTML no Bloco de notas começam abrindo o programa. A maneira mais fácil de localizar o Bloco de notas é por meio do menu Iniciar do Windows na seção Acessórios.
O novo arquivo aberto deve ser salvo comextensão html. Isso é importante porque essa extensão dirá ao navegador que é uma página da web. O comando "Salvar como" no menu "Arquivo" abrirá uma nova janela. Aqui você precisa nomear o documento como index.html, selecionar a codificação utf-8 e a pasta para salvar.
Agora você pode abrir este arquivo a qualquer momento clicando duas vezes nele ou clicando com o botão direito do mouse no menu de contexto e selecionando "Abrir com Bloco de Notas".
A página já foi criada e você pode ver como fica no navegador. Existem várias maneiras de abrir um documento em um navegador da web:
file: /// C: /Users/UserName/Desktop/my-site/index.htmlAgora que a página está em branco previsivelmente virgem, é hora de preenchê-la com informações.
Todas as páginas da web na vastidão da World Wide Websão escritos em uma linguagem especial HTML (Hypertext Markup Language). Entender seus fundamentos é muito importante para descobrir como criar um site no Bloco de Notas ou em qualquer outro editor. O desenvolvedor usa HTML para explicar ao navegador como a página deve ser exibida. É por isso que é importante definir a extensão correta para o arquivo.
O idioma é baseado em tags - combinações de caracteres entre colchetes angulares.
Exemplos de tags:
<h1> Cabeçalho de primeiro nível </h1> <i> Texto em itálico </i>O texto entre as tags de abertura e fechamento será tratado de forma especial pelo navegador.
Além dos dados exibidos diretamente na página, ao criar uma página, você deve especificar informações de serviço especiais destinadas ao próprio navegador.
Você deve começar a trabalhar com a formatação correta do documento html. A estrutura básica da página é assim:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> O melhor site do mundo </title> </head> <body> </body> </html>O significado de cada elemento:
DOCTYPE - informações técnicas do navegador, indicando como ele deve interpretar o código;html - tag da raiz da página;cabeça - seção de informações de serviço não visível para os visitantes do site;meta - uma etiqueta de serviço, o atributo charset define a codificação do texto;título - o nome da página exibida na guia do navegador;corpo - o corpo do documento, exibido diretamente na página.Ao salvar o código e reabrir (ou recarregar) o arquivo no navegador, você pode ver a primeira alteração - o nome do site aparece na guia.
Antes de descobrir como criar seu site em HTML usando o Bloco de Notas, você precisa imaginar claramente como esse site deve ser. Por exemplo, vamos pegar o blog pessoal de um certo John Doe.
Os principais elementos da estrutura desta página são:
O código HTML para esta página será semelhante a este:
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> O melhor site do mundo </title> </head> <body> <div class = "wrapper"> <cabeçalho> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </h1> </header> <nav> <ul> <li> <a href="bio.html"> Autobiografia </a> </li> <li> <a href="life.html"> Minha vida, minhas realizações </a> </li> <li> <a href="gallery.html"> Álbum de fotos </a> </li> <li> <a href="contacts.html"> Entre em contato comigo </a> </li> <li> <a href="thanks.html"> Obrigado </a> </li> </ul> </nav> <main> <artigo> <h2> Super Concerto </h2> <div> Valeu uma fila de quilômetros de comprimento para os ingressos para curtir esse show !! </div> <a href="posts/concert.html"> Veja mais </a> </article> <artigo> <h2> Por que eu amo sorvete </h2> <div> Eu quero compartilhar as razões profundas meu amor por sorvete ... </div> <a href="posts/ice-cream.html"> Veja mais </a> </article> <artigo> <h2> Ser ou não ser? </h2> <div> Questões de vida e morte. </div> <a href="posts/to-be-or-not-to-be.html"> Veja detalhes </a> </article> </main> <footer> John Doe (c) 2018 </footer> </div> </body> </html>Tags semânticas do padrão HTML5 são usadas para descrever a página da web: cabeçalho, a Principal, nav, rodapé, artigo.
Explicações para o código:
imagens nivelar com o arquivo index.html... No código para ele usando o atributo largura a largura é estritamente definida para 100 pixels.h1, o que sublinha a sua importância.H2.embrulho... Atributos de classe são comumente usados para estilizar elementos.Agora a página se parece com isto:
Esta visão não é muito semelhante à planejada. Para corrigir a situação, você precisa adicionar uma decoração.
Para fazer isso, você precisará criar outro arquivo, ao lado de index.html e nomeá-lo style.css... Ele conterá todos os estilos necessários.
No momento, a estrutura do projeto é assim:
Continuando a descobrir como criar um site no Bloco de notas, vamos para um novo nível - conectando uma folha de estilo.
Para que o navegador entenda de onde obter o design, você deve especificar o endereço do arquivo css. Esta é uma informação de serviço, deve ser colocada na seção cabeça.
<head> <meta charset = "utf-8"> <title> O melhor site do mundo </title> <link rel = "stylesheet" href = "style.css"> </head>Agora tudo o que será descrito no arquivo style.css, o navegador será aplicado à página. Por exemplo, vamos mudar a cor de fundo:
corpo { plano de fundo: # 89745d; }Todo o conteúdo da folha de estilo ficará assim:
corpo { preenchimento: 0; família de fontes:sem serifa; tamanho da fonte: 16px; plano de fundo: # 89745d; } .embrulho { preenchimento: 20px; margem esquerda: automático; margem direita: automático; largura: 960px; } header a { decoração de texto: nenhum; } header img { alinhamento vertical: meio; margem direita: 20px; } cabeçalho h1 { display: bloco embutido; alinhamento vertical: meio; cor: # f8d9b7; } nav { acolchoamento superior: 20px; acolchoamento inferior: 20px; } nav ul { margem: 0; alinhamento de texto: centro; } nav ul li { display: bloco embutido; estilo de lista: nenhum; preenchimento: 0px 15px; } nav ul li a { cor: # f8d9b7; decoração de texto: nenhum; } nav ul li a: hover { decoração de texto: sublinhado; } artigo { preenchimento: 20px; margem: 20px 0; plano de fundo: # f8d9b7; sombra da caixa: 0 0 15px # f8d9b7; } artigo h2 { margin-top: 0px; margin-bottom: 15px; cor: # d57106; } artigo a { tamanho da fonte: 14px; estilo da fonte: itálico; cor: # d57106; } rodapé { preenchimento: 20px; alinhamento de texto: direita; cor: # f8d9b7; tamanho da fonte: 14px; intensidade da fonte: Negrito; }Explicações para estilos:
Se você atualizar o documento no navegador, poderá ver sua representação final. A primeira página da web foi criada com sucesso!
No entanto, um blog não pode consistir apenas no principalpáginas com uma lista de artigos. É necessário, de alguma forma, exibir uma postagem separada com o texto completo, além disso, as páginas indicadas no menu de navegação já estão planejadas.
O conceito mais importante da Internet é a vinculação de documentos individuais por meio de links. Como criar um site com hiperlink no Bloco de notas?
Na verdade, tudo o que é necessário já foi feito. Itens de menu e ponteiros "Assistir" são envolvidos em mais detalhes em uma tag especial uma, que é responsável pela formação do hiperlink. O endereço necessário é indicado no atributo href... Resta apenas criar as próprias páginas e colocá-las ao lado do arquivo index.html.
Amostra de código para uma página de álbum de fotos (gallery.html):
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> O melhor site do mundo </title> <link rel = "stylesheet" href = "style.css"> </head> <body> <div class = "wrapper"> <cabeçalho> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </h1> </header> <nav> <ul> <li> <a href="bio.html"> Autobiografia </a> </li> <li> <a href="life.html"> Minha vida, minhas realizações </a> </li> <li> <a href="gallery.html"> Álbum de fotos </a> </li> <li> <a href="contacts.html"> Entre em contato comigo </a> </li> <li> <a href="thanks.html"> Obrigado </a> </li> </ul> </nav> <main> <div class = "gallery"> <figura> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> Na floresta </figcaption> </figure> <figura> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> No inverno </figcaption> </figure> <figura> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> Praia </figcaption> </figure> <figura> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> No trabalho </figcaption> </figure> <figura> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption> Ano Novo </figcaption> </figure> <figura> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> Auto-retrato </figcaption> </figure> </div> </main> <footer> John Doe (c) 2018 </footer> </div> </body> </html>A estrutura principal, cabeçalho, navegação e rodapé duplicam completamente a página principal, apenas a seção muda a Principalque agora contém uma galeria com vários blocos figura... Dentro de cada bloco há uma imagem e uma legenda para ele.
O mesmo arquivo é usado para projetar a página style.cssconectado dentro da seção cabeça... Você precisa adicionar algumas regras para a galeria:
.gallery { tamanho da fonte: 0; } figura { mostrar:bloco embutido; alinhamento vertical: inferior; largura: 33,3333%; dimensionamento da caixa: caixa de borda; preenchimento: 10px 15px; margem: 0px; tamanho da fonte: 14px; cor: # f8d9b7; alinhamento de texto: centro; } figura img { largura: 100%; margin-bottom: 10px; }Aqui, é usada uma técnica css que permite colocar blocos em três em uma linha e definir sua largura para exatamente um terço da largura do contêiner pai.
A visão final da galeria é mostrada abaixo.
Os hiperlinks permitem a movimentação entre as páginas do site: a partir do menu você pode ir para o "Álbum de fotos" e, clicando no logotipo, você pode voltar para a página principal.
Então, descobrimos usando instruções passo a passo sobre como criar um site no Bloco de notas. Mas agora ninguém o vê! Mas blogs pessoais são criados para compartilhar sua vida com o mundo inteiro.
Para remediar a situação, você precisa colocartodos os arquivos criados na hospedagem e selecione um domínio para o site usando um serviço especial. Há um grande número de provedores de hospedagem que oferecem serviços para todos os gostos e carteiras.
Após fechar um acordo com o hoster, você terá acesso ao painel de controle, onde poderá transferir todos os arquivos criados. No momento, a estrutura do projeto é a seguinte:
Aqui, você também deve adicionar arquivos HTML para o restante das páginas do site.
Agora você sabe como criar um site html emBloco de notas, mas existem maneiras mais convenientes. Profissionais usam editores especiais projetados para trabalhar com código. Eles oferecem muitas opções úteis para facilitar a criação e edição de sites.
Ferramentas mais populares - Visual StudioCódigo, Texto Sublime, Bloco de Notas ++. Não se deve ter medo de sua complexidade. Sabendo como criar um site usando o Bloco de Notas, você pode facilmente descobrir o que é. Todas as funcionalidades adicionais desses editores são projetadas para facilitar o trabalho do webmaster e não devem interferir com ele no processo.
Construir um site usando o Notepad é apenas o começo de uma longa e interessante jornada como desenvolvedor web.
