Como codificar um site

Como codificar um siteDeseja aprender como criar um site com HTML e CSS?


Você está no lugar certo. Neste guia, mostramos todas as etapas para passar de uma tela em branco para um site funcional, otimizado e bonito ao mesmo tempo.

Mas primeiro, o que é HTML e CSS?

Bem, você pode procurar os dois termos na Wikipedia, mas essas definições não são muito fáceis de ler. Vamos simplificar um pouco as coisas:

  • HTML (Hypertext Markup Language) define a estrutura e o conteúdo de uma página da Web – Onde as coisas vão, como eles são dispostos e o que é na página
  • CSS (Cascading Style Sheets) define o estilo / apresentação de uma página da web e os elementos nela

Você realmente não pode ter um sem o outro – os dois trabalham juntos para criar a página da web final, seu design e o conteúdo que está nele.

Nota; quando dizemos “uma página da web”, queremos dizer um único documento HTML – uma única página que faz parte do seu site. Visto que “um site” é a coisa completa – todo o site com todas as suas páginas individuais.

Como criar um site usando HTML e CSS (sumário):

  1. Aprenda o básico do HTML
  2. Entender a estrutura do documento HTML
  3. Conheça os seletores de CSS
  4. Coloque uma folha de estilo CSS
  5. Obtenha o Bootstrap
  6. Escolha um desenho
  7. Personalize seu site com HTML e CSS
  8. Adicione conteúdo e imagens
  9. Ajustar cores e fontes
  10. Crie páginas adicionais

Tempo total para criar um site: 4-5 horas
Nível de habilidade: Intermediário

Se você acha que isso é muito complicado, recomendamos a criação de um site usando o WordPress ou a escolha de um dos criadores de sites. Você também pode conferir uma lista dos melhores IDE selecionados para desenvolvimento web. 

Contents

Antes de começar, reúna seus recursos:

Portanto, a primeira coisa que você precisa, mesmo antes de criar um site com HTML e CSS, é um servidor da web (hospedagem). Não se preocupe, no entanto; você não precisa comprar sua própria máquina. Muitas empresas de hospedagem vendem um serviço de hospedagem simples em suas máquinas. Basta procurar no Google por “hospedagem na web” e escolher algo que não seja muito caro.

Com o servidor classificado, a próxima coisa que você precisa é de um nome de domínio. O nome do domínio é o que o site é identificado na web. Por exemplo, o nome de domínio deste site é websitesetup.org.

Quando você possui um nome de domínio e um servidor, pode conectar os dois.

Transparência completa: Ganhamos uma comissão se você acabar comprando o Bluehost através de nossos links de referência neste guia. Isso nos ajuda a manter o WebsiteSetup em funcionamento e atualizado. Obrigado por seu apoio.

Para resolver isso sem problemas, recomendamos que você se inscreva em uma empresa como Bluehost.

Eles cuidarão de toda a configuração para você. Significando que eles irão: (uma) configurar uma conta de hospedagem para você, b) registrar um nome de domínio em seu nome, c) configurar tudo para trabalhar juntos e d) dar acesso a um painel fácil de usar.

Vá em frente e inscreva-se Bluehost, bem espere. Quando você voltar e o servidor da Web configurado e pronto, vá para a próxima etapa.

P.S. Se você quiser apenas experimentar um site HTML no seu computador, e não pretende torná-lo público, use um software de servidor da web local. O que recomendamos e gostamos de usar é chamado XAMPP. Possui versões para Mac e PC, e é fácil de usar. Aqui está um guia sobre como instalá-lo no seu computador.

1. Aprenda o básico de HTML

O principal elemento de uma estrutura HTML é um HTML tag.

Uma tag, por exemplo, fica assim:

ALGUMA COISA

Aqui, estamos lidando com um tag. Este vai negrito um pedaço de texto que está entre a tag de abertura () e a tag de fechamento () Nesse caso, esse pedaço de texto é ALGUMA COISA.

Mas existem outras tags, apenas para citar algumas:

  • ... colocará em itálico o texto entre as tags de abertura e fechamento
  • ... irá sublinhar
  • ...

    é um parágrafo de texto


  • ...

    é o cabeçalho principal na página

Além dessas tags simples, também existem tags mais complexas. Por exemplo, se você deseja criar uma lista como a seguinte:

  • Item 1
  • Item 2
  • Item 3

… Você pode fazer isso com o seguinte código HTML:

  • Item 1
  • Item 2
  • Item 3

Ou, se você deseja adicionar um link para outra página, como esta:

Este é um link para a nossa página inicial

… Você pode fazer isso com este pedaço de código:

Este é um link para minha página inicial

Leia isto para obter o lista completa de tags HTML. Isso será útil quando você criar um site com HTML e CSS.

2. Entenda a estrutura do documento HTML

Pense na sua página HTML como se fosse construída com Legos. Você coloca tijolos diferentes uns sobre os outros para terminar com uma determinada estrutura maior.

Mas em vez de peças de Lego, você recebe tags HTML …

Aqui está a estrutura mais simples de documento HTML:





Olá Mundo!


Olá Mundo!

Minha primeira página da web.

Você pode pegar o código acima, copiá-lo e colá-lo em um novo arquivo, salvar o documento como index.html, e será uma página HTML perfeitamente válida.

Vamos explicar as partes individuais deste código:

  • – a declaração inicial do documento
  • – outra declaração; diz que o que virá a seguir é um documento HTML escrito em inglês
  • – marca o início do cabeça seção; a cabeça seção é onde todos os parâmetros básicos da página vão; a maioria deles não será mostrada na tela; eles apenas definem o que está acontecendo sob o capô
  • – define qual conjunto de caracteres é usado para escrever o documento; não há necessidade de gastar muito tempo com isso; basta usar esta declaração como está
  • Olá Mundo! – o título da página; é isso que as pessoas verão na barra de título de seus navegadores, por exemplo:

título no navegador da web ao criar um site com HTML e CSS

  • – marca o início do corpo seção; é para onde vai todo o conteúdo da página; é a parte principal de um documento HTML; vamos enfatizar isso, é nesta seção que você inclui todo o conteúdo que deve aparecer na página

  • Olá Mundo!

    – o cabeçalho principal na página

  • Minha primeira página da web.

    – um simples parágrafo de texto

  • – a tag de fechamento de todo o documento HTML

Uma nota importante aqui. Trabalhar em um arquivo HTML em um aplicativo de texto básico ou em um processador de texto complexo como o MS Word não é uma boa experiência. Para facilitar as coisas, instale uma ferramenta chamada Texto sublime. Possui versões para Mac e PC e é gratuito.

Porque é melhor? Entre outras coisas, ele colorirá a sintaxe de um arquivo HTML. Ou seja, distinguirá visualmente suas tags HTML do conteúdo do texto, dos parâmetros e outros valores. Basicamente, tudo ficará legível. Veja como é nossa estrutura HTML simples no Texto sublime:

sintaxe sublime é excelente ao criar um site com HTML e CSS

Ok, de volta ao tópico. Você pode pegar esse novo index.html seu arquivo, copie-o para onde está o diretório principal do seu servidor da web e, em seguida, veja essa página navegando até ela através de um navegador da web. Mas não fique muito animado; esta página será bastante feia (veja abaixo).

esta página é feia

Ok, então a página é feia, como torná-la não tão?

3. Conheça os seletores de CSS

Assim como o HTML tem suas tags, o CSS tem seletores.

Os seletores descrevem como um determinado elemento deve se comportar em termos de aparência. Aqui está um exemplo de um seletor de CSS:

p {
tamanho da fonte: 18 px;
}

Esse seletor indica que todo o HTML

as tags no documento terão um tamanho de fonte de 18px.

No entanto, uma maneira mais prática de usar seletores CSS não é restringir todas as tags de um determinado tipo a um determinado estilo, mas criar “classes” diferentes e atribuí-las às tags uma a uma..

Por exemplo, um seletor de classe em CSS se parece com isso:

.texto normal {
tamanho da fonte: 18 px;
}

Observe o ponto (.) antes do nome da classe (texto normal) Com a classe “texto normal” definida, agora podemos atribuir essa classe às tags HTML específicas que queremos aumentar em 18 px.

Por exemplo:

Este texto terá 18px.

Vamos levar mais um minuto para explicar todos os elementos desse trecho de código CSS acima:

  • .texto normal – definição de classe; tudo depois do nome da classe e entre os colchetes de abertura e fechamento {} define como serão os elementos atribuídos a essa classe
  • tamanho da fonte – uma propriedade CSS de exemplo
  • 18px – um valor atribuído à propriedade

Há várias propriedades CSS além das acima tamanho da fonte. Aqui está o Lista completa se você está curioso.

4. Monte uma folha de estilo CSS

Um documento HTML é muito estrutural – cada elemento tem seu lugar, e a ordem dos elementos é crucial para a construção e aparência finais da página da web em questão. Um documento CSS é muito menos.

Documentos CSS são freqüentemente chamados de folhas de estilo. Basicamente, uma folha de estilo CSS é uma lista de todas as definições de classe que estão sendo usadas no documento HTML correspondente. A ordem das definições de classe não é tão crucial na maioria das vezes (pelo menos para projetos simples).

A maneira como você cria uma folha de estilo CSS é definindo cada classe uma por uma e testando se o resultado no design da página é o que você deseja.

Isso soa como um trabalho tedioso, e é.

Mas facilitaremos as coisas para você e não forçaremos você a aprender HTML e CSS manualmente. Em vez de ensinar tudo do zero, pegaremos um organismo vivo e dissecamos seus elementos.

É aqui que uma coisa chamada Bootstrap entra em cena.

5. Faça o download / instale o Bootstrap

O Bootstrap é um kit de ferramentas de código aberto para criar um site com HTML e CSS.

Em inglês simples, o Bootstrap cuida da estrutura básica de um documento HTML e folha de estilo CSS para você. Ele fornece uma estrutura que garante que o principal andaime da sua página da web esteja pronto e otimizado para desenvolvimento adicional.

Basicamente, o Bootstrap permite que você não comece do zero e vá direto para a parte divertida. Com isso, você não precisa trabalhar nos estágios iniciais muitas vezes entediantes da criação de um site com HTML e CSS.

Existem dois caminhos que você pode seguir:

  • Opção (uma): aprenda o Bootstrap – acesse a página inicial do Bootstrap, faça o download do pacote principal do Bootstrap e comece a construir sobre ele.
  • Opção b): use um atalho – obtenha um pacote inicial para o Bootstrap com um design bonito e uma página da web de demonstração já criada.

Opção (uma) pode ter alguma curva de aprendizado no início, mas não é a pior maneira de abordar a criação de um site com HTML e CSS. Depois de dominar a estrutura principal do Bootstrap, pode ser mais fácil criar novas páginas e fazê-las parecer exatamente como você deseja. o Documentação de inicialização é um ótimo lugar para começar esse caminho.

Nós vamos usar a opção b) para este guia. Estamos fazendo isso por alguns motivos, o principal deles:

Começar com uma estrutura pronta evita muita dor ao tentar descobrir as necessidades básicas de um documento HTML. Isso permite que você se concentre em coisas interessantes – como exibir o conteúdo e torná-lo com boa aparência.

Em suma, aprender as coisas dessa maneira fornecerá um resultado com melhor aparência mais rapidamente, o que achamos que é o que você deseja.

6. Escolha um desenho

Ao criar um site com HTML e CSS, você pode usar qualquer modelo de Bootstrap que desejar. Todos eles devem funcionar de maneira semelhante o suficiente.

No entanto, neste guia, usaremos um dos modelos ao Iniciar o Bootstrap. Eles têm uma ótima seleção de modelos gratuitos otimizados, sem problemas e também muito bem projetados.

O tema que vamos usar é chamado Criativo. O efeito final que vamos buscar será mais ou menos assim:

página inicial final após a criação de um site com HTML e CSS

Para começar, o modelo do criativo, clique no ícone Download grátis botão que está à direita (no esta página) e salve o pacote zip na área de trabalho.

Descompacte o pacote e mova seu conteúdo para o diretório principal do seu servidor web local ou sua conta de hospedagem na web.

Agora abra esse local através do seu navegador da web. Você verá a versão de estoque do modelo:

iniciar modelo de inicialização

Já é muito bonito, mas agora é hora de aprender a usar HTML e CSS para transformá-lo exatamente no que você deseja que seja.

7. Personalize seu site com HTML e CSS

Vamos trabalhar primeiro na página inicial do design. Isso nos mostrará como substituir os gráficos, textos e ajustar tudo em geral.

Falamos sobre a seção principal de um documento HTML brevemente acima. Vamos dar uma olhada mais profunda aqui.

Quando você abre o index.html arquivo do seu site Bootstrap em Sublime Text, você verá uma seção principal como essa (removemos todas as coisas não cruciais deste código para maior clareza *):






Criativo - Iniciar tema do Bootstrap





* Além do acima, também havia código para carregar as fontes do Google, os ícones Font Awesome e um módulo de caixa de luz para as imagens exibidas na página.

A maioria das declarações aqui já sabemos, mas há algumas novas:

  • Primeiro, tudo entre o colchetes é um comentário em HTML. Ele não aparece na página final.
  • – é uma das próprias tags de declaração do Bootstrap. Ele define o tamanho da janela de exibição do site.
  • – essa linha carrega a folha de estilo CSS do modelo do criativo e também abriga a folha de estilo padrão do Bootstrap.

Vamos modificar a última declaração – a linha que carrega o CSS – para facilitar o trabalho mais tarde.

Mude essa linha para:


Essa é apenas uma pequena diferença – ele carregará a versão não reduzida da mesma folha CSS. Esta versão é apenas mais fácil de modificar.

Agora role para baixo até a parte inferior do index.html Arquivo. Você verá as seguintes linhas logo antes do fechamento corpo tag:

        

Eles são responsáveis ​​por carregar arquivos JavaScript que lidam com algumas das interações mais visuais do design. Por exemplo, quando você clica no Sobre No menu superior, você será direcionado facilmente para o bloco about na mesma página. Isso, entre outras coisas, é feito via JavaScript. Não precisamos nos preocupar em entender esse código agora. Vamos deixar isso para outra hora.

Em vez disso, vamos trabalhar para adicionar nosso próprio conteúdo à página:

8. Adicione conteúdo e imagens

A primeira coisa que você deseja fazer é alterar o título da página.

1. Altere o título

Encontre o título na seção head e substitua o texto entre as tags por algo de sua preferência:

Meu site HTML

2. Personalize a seção Hero

A seção de heróis é o que chamamos de bloco:

seção de herói

Seria legal ter nosso próprio conteúdo. Para modificar este bloco, volte ao seu index.html arquivo e localize esta seção:

...


...

Descubra mais

Todo esse bloco de código controla o que está na seção de heróis.

Existem algumas novas tags aqui:


  • – esta é uma tag que define que toda essa seção é o cabeçalho da página; essa tag tem dois irmãos e irmãs na forma de

    tag e

    tag
  • – é uma tag CSS geral que indica que o que se segue é uma seção separada (também conhecida como divisão) no documento HTML; seu uso facilita a distinção visual de seções individuais na página

Você também notará que algumas das outras tags (que já sabemos) parecem um pouco mais complexas, com várias classes CSS atribuídas a elas. Por exemplo:

...

As classes atribuídas ao

tag aqui é texto em maiúsculas texto em branco fonte peso em negrito.

Essas classes foram criadas pelo Bootstrap e pelo desenvolvedor do tema Criativo. A boa notícia é que você também pode usá-los livremente ao criar um site com HTML e CSS.

Francamente, você pode personalizar qualquer tag adicionada à estrutura da sua página, atribuindo a ele um número qualquer de classes.

Se você quiser ver a lista completa das aulas disponíveis, pode abrir as principais creative.css arquivo que está no css subdiretório do tema Criativo.

Compreender todas essas classes pode parecer intimidador no começo, mas na verdade é muito mais fácil do que parece.

Por exemplo, uma das classes atribuídas a alguns dos parágrafos em nossa index.html arquivo é font-weight-light. Quando você pula no creative.css arquivo e ctrl + f procurando esse nome de classe, você verá que ele simplesmente define o espessura da fonte parâmetro assim:

.font-weight-light {
peso da fonte: 300;
}

Modificando os textos padrão no index.html arquivo é muito simples. Basta encontrar a tag que você deseja editar e alterar o que está entre as tags de abertura e fechamento.

Por exemplo, para alterar o título principal, basta alterar isso:

Seu favorito ...

Para algo como o seguinte:

Admire meu site HTML!

Você pode fazer o mesmo com todos os parágrafos e outras tags da página.

O importante é que você também pode adicionar novos parágrafos livremente. Por exemplo, podemos pegar o parágrafo que já está na página, fazer uma cópia e colá-lo logo abaixo do parágrafo original; igual a:

Iniciar o Bootstrap pode ...

§ 2

Agora, com os textos resolvidos, vamos substituir a imagem que está em segundo plano.

Isso é um pouco mais complicado, pois exige que entremos no arquivo da folha de estilo CSS e façamos a modificação lá. Como você pode ver no código HTML do Masthead Na seção, nenhuma tag indicaria a inclusão de uma imagem na página. Tudo isso é feito via CSS.

Quando você examina novamente todo o bloco de código que lida com o Masthead seção, você verá que está atribuído a uma classe chamada mastro. Esta linha de código lida com a atribuição de classe:

o mastro classe é a que coloca uma imagem em segundo plano de todo o bloco.

Vamos abrir o creative.css novamente e procure a classe “masthead”:

header.masthead {
padding-top: 10rem;
fundo do preenchimento: calc (10rem - 72px);
plano de fundo: gradiente linear (para baixo, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
posição de fundo: centro;
repetição em segundo plano: sem repetição;
anexo em segundo plano: rolagem;
tamanho do plano de fundo: capa;
}

Esse código faz todos os tipos de coisas sofisticadas em nossa imagem (como adicionar uma sobreposição, sombreamento etc.), mas a parte importante é esta: url ("../ img / bg-masthead.jpg"). Esta é a linha que indica onde encontrar a imagem de fundo. Vai estar no img subdiretório.

Para alterar esta imagem de plano de fundo, tire qualquer imagem sua, copie-a para o img subdiretório e, em seguida, copie e cole seu nome no lugar do original bg-masthead.jpg Arquivo. Em resumo, mude isso: url ("../ img / bg-masthead.jpg") para isso: url ("../ img / YOURFILE.jpg").

3. Personalize os outros blocos na página

Conforme você passa pelo index.html arquivo, você notará que já existem muitas seções diferentes na página. Temos uma seção para o navegação, e sobre um bloco, alguns Serviços, uma portfólio, uma apelo à ação, uma contato bloco e um rodapé.

Embora exista conteúdo diferente em todas essas seções, as próprias seções são de estrutura semelhante. Todos eles têm aproximadamente o mesmo conjunto de tags HTML – apenas diferentes classes CSS atribuídas a eles.

A melhor maneira de modificar a página para atender às suas necessidades é percorrer os blocos um por um e experimentar alterando as coisas.

Além de modificar os textos, você também pode mover seções inteiras (as partes entre os

Tag). É verdade que você precisa fazer isso manualmente (cortando e colando elementos no lugar), ainda é fácil fazer isso.

Com isso dito, há duas modificações bastante básicas sobre as quais ainda não falamos. Vamos abordar a seguir:

9. Ajuste de cores e fontes

Mudar cores ou fontes é muito fácil de fazer em HTML e CSS. A coisa mais simples que você pode fazer é atribuir um estilo em linha a uma tag HTML. Por exemplo:

Texto vermelho

Em HTML, as cores são representadas por seus valores hexadecimais; “# FF0000” está vermelho. Aqui está uma tabela de todos os outros cores padrão.

Uma maneira melhor de atribuir cores é fazê-lo através da folha de estilo CSS. Por exemplo, para obter o mesmo efeito que o código acima, podemos colocar isso em nossa folha de estilo CSS:

p.red {
cor: # FF0000;
}

E, em seguida, use o seguinte trecho de código HTML no documento principal:

Texto vermelho

Esse segundo método é basicamente como as coisas são feitas no Bootstrap.

Para alterar a cor de qualquer texto na página, localize primeiro a tag responsável pelo estilo desse texto e, em seguida, vá para a folha de estilo e modifique a classe correspondente ou crie uma nova classe.

Aqui está um exemplo; diga que deseja alterar a cor do cabeçalho dizendo “Ao seu serviço”. Atualmente, é preto, e este é o código que trata disso:

A seu serviço

Para mudar sua cor, a melhor maneira é criar uma nova classe chamada, digamos, .texto-laranja e defina o valor da cor, da seguinte forma:

.text-orange {
cor: # f4623a! important;
}

* O !importante garantirá que essa configuração de cor substitua qualquer outra configuração anterior.

Agora, podemos voltar ao nosso cabeçalho e alterar seu código para:

A seu serviço

Com essas alterações, o cabeçalho ficará laranja:

h2 laranja

Para alterar a fonte e seu tamanho, você pode fazer algo muito semelhante. Mas primeiro, um exemplo de como um bloco de definição de fonte se parece em CSS:

.SOMECLASS {
família de fontes: "Merriweather", Roboto, sans-serif;
tamanho da fonte: 18 px;
}
  • carregar fontes Merriweather, Roboto, e um padrão do sistema sem serifa fonte (leia isto para aprender sobre fontes seguras para a web)
  • defina o tamanho da fonte como 18px

Esse tipo de definição pode ser colocado em qualquer classe CSS, assim como a definição de cores. Na verdade, as definições de fonte e cor são frequentemente encontradas nas mesmas declarações de classe.

Voltando ao nosso exemplo anterior, para alterar o tamanho da fonte do cabeçalho que diz “Ao seu serviço”, poderíamos primeiro criar uma classe como esta:

.text-xxl {
tamanho da fonte: 50 px;
}

E, em seguida, atribua esta classe ao cabeçalho:

A seu serviço

Changing Ao alterar as cores ou fontes no modelo criado pelo Bootstrap, primeiro procure na folha de estilo CSS por classes que já podem fornecer tamanhos ou cores alternativos. Use aqueles quando disponíveis.

10. Crie páginas adicionais

Agora que você personalizou a página inicial, é hora de começar a trabalhar em algumas páginas adicionais e vinculá-las à página inicial.

Ao criar um site com HTML e CSS, você pode criar qualquer número de subpáginas e vincular todas elas.

Aqui estão algumas das páginas comuns de que a maioria dos sites precisa:

  • sobre a página
  • contato
  • portfólio
  • produtos / serviços
  • equipe
  • políticas (política de privacidade, termos etc.)

1. Comece com o layout

Ao criar uma nova página da web, a primeira decisão a ser tomada é o que você deseja que o layout seja.

Ao criar um site com HTML e CSS, nada o impede de criar tanto faz layout que você deseja. A única dificuldade é realmente montá-lo.

É difícil lidar com HTML e CSS ao iniciar a partir de uma tela em branco; portanto, usaremos o Bootstrap aqui também. Primeiro, mostraremos alguns princípios para criar um layout e depois demonstrar como fazer isso com o Bootstrap.

A maneira como você pode pensar no layout da sua página da web é considerá-la uma sequência de blocos individuais – um em cima do outro. Algo assim (observe os quatro blocos distintos):

o layout ao criar um site com HTML e CSS

O melhor do Bootstrap é que ele lida com os princípios básicos de layout e detalhes de aparência para você, para que você possa se concentrar apenas em colocar esses blocos nos lugares certos.

Nesta seção do guia, criaremos uma nova página “sobre”.

Para começar, criaremos apenas um projeto muito básico do layout. Algo como o acima.

  • existe um menu de navegação na parte superior,
  • um bloco de título de largura total abaixo do menu,
  • a seção de conteúdo principal no meio, encaixotada no centro da tela (sem largura total),
  • e um rodapé.

Agora vamos criar esse layout em HTML.

2. Crie uma nova página

A maneira mais fácil de começar a trabalhar em uma nova página é duplicar uma página existente e usá-la como modelo. É isso que vamos fazer.

Crie uma cópia do index.html arquivo e renomeá-lo about.html.

Para facilitar a distinção entre as páginas nesta etapa inicial, edite o novo about.html arquivar e alterar o que está no </code> tag. Por exemplo, <code><title>Sobre mim.

Agora, vamos examinar o arquivo linha por linha e decidir o que deixaremos e o que removeremos:

  • o navegação menu (abaixo ) Você provavelmente deseja manter esta seção intacta, apenas para tornar a experiência de navegação uniforme em todas as páginas.
  • o herói principal seção (abaixo ) Este não será necessário de acordo com o nosso projeto de layout. Você pode ir em frente e apagar a seção inteira.
  • o sobre seção (abaixo ) Vamos reutilizar esta seção como nosso principal bloco de manchetes.
  • o Serviços seção, portfólio seção, apelo à ação seção e contato seção (tudo entre e ) Não precisamos dessas seções. Você pode ir em frente e apagá-los.
  • o rodapé seção e tudo abaixo dela (abaixo ) Precisamos manter isso.

Isso torna nosso código atual bastante simples. Basicamente é apenas isso:



























O que estamos perdendo aqui é o conteúdo principal seção. Para construí-lo, vamos reutilizar a seção sobre.

Vá em frente e faça uma cópia da seção sobre. Este:

...


...

Agora mude as duas primeiras linhas para isso:

Como não precisamos do

cabeçalho lá e o


elemento, vamos removê-los. A única coisa que resta neste bloco inteiro será um parágrafo de texto. Igual a:

Um parágrafo de texto.

Quando você salva o arquivo e o navega pelo navegador, verá basicamente dois blocos muito semelhantes, um abaixo do outro, com a mesma cor de fundo:

sobre o cabeçalho da página

Seria melhor ter um plano de fundo branco na seção de conteúdo principal. Para mudar, a única coisa que precisamos fazer é remover o bg-primary classe do principal

tag. Em outras palavras, faça a tag para isso:

Isso é melhor:

sobre o cabeçalho da página 2

Vamos adicionar alguns parágrafos simulados à página para preenchê-la um pouco mais, além de talvez um subtítulo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subtítulo

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Aqui está o que parece na página:

sobre o ver 1

Se você não quiser que o texto seja centralizado, remova o centro de texto classe de um dos

Tag.

sobre o ver 2

Se você quiser dar mais um toque a esses blocos de texto, poderá criar novas classes CSS (como antes) e atribuí-las aos parágrafos do bloco. Ou, você pode dar uma olhada na folha de estilo atual e ver quais classes já existem para esse fim. Aqui estão os que atribuímos ao

e

Tag:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subtítulo

E aqui está o efeito:

sobre o ver 3

Mais uma coisa que vamos fazer aqui é adicionar uma imagem em algum lugar da página.

Veja como é uma tag de imagem de exemplo em HTML:


Bastante simples, certo? O único parâmetro lá é o caminho para o arquivo de imagem. Para manter as coisas bem organizadas, você pode colocar sua imagem na img diretório novamente (como você fez com esse plano de fundo há um tempo atrás). Nesse caso, a tag da imagem será:


Dito isto, a etiqueta da imagem nesta configuração específica é bastante limitada. Para torná-lo um pouco mais refinado, vamos atribuir algumas classes de Bootstrap a ele. Particularmente:


Essas duas classes fornecerão cantos arredondados à sua imagem e também garantirão que o tamanho da imagem não exceda o tamanho do bloco onde está localizado.

Agora você pode adicionar uma tag como essa em algum lugar na seção de conteúdo principal da sua página sobre. Por exemplo, aqui:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subtítulo

E aqui está o efeito final na página:

sobre o ver 4

Aqui está nossa página sobre em toda a sua glória:

sobre a página concluída

3. Link para a nova página

Com a nova página pronta, agora vamos vinculá-la na página inicial (a index.html Arquivo). Naturalmente, o melhor lugar para adicionar esse link é no menu de navegação (abaixo ).

Em particular, procure esta linha:

Sobre

Vamos mudar para isso:

Sobre

Isso é algo sobre o qual ainda não conversamos, mas o tag é uma tag de link em HTML. Usando-o, você pode vincular a qualquer página da Web fornecendo o endereço dessa página no href parâmetro. O texto do link – a parte clicável do link – será o texto entre a abertura e o fechamento Tag.

Ao atualizar a página inicial agora, você verá seu novo link apontando para a página sobre.

Leitura adicional:

Nesta fase, você basicamente construiu um site simples, composto por duas páginas – uma pagina inicial e um sobre página.

O que você deve fazer agora é enxaguar e repetir, criando novas páginas, ajustando-as, adicionando conteúdo a elas e vinculando tudo no menu de navegação.

Outras coisas que vale a pena fazer ao seguir essas etapas são aprender mais os princípios de HTML e CSS, examinar a lista de verificação e também aprender o Bootstrap e suas estruturas e classes. Alguns recursos para isso:

  • Folha de dicas HTML5
  • Folha de dicas CSS
  • Folha de dicas do Javascript
  • Tutorial HTML
  • Tutorial de inicialização
  • Folha de dicas do Bootstrap

Dominar o Bootstrap, provavelmente o melhor caminho atualmente disponível para criar sites otimizados e bonitos com HTML e CSS.

Se você tiver alguma dúvida sobre a criação de um site com HTML e CSS, não hesite em enviá-lo nos comentários.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me