HTML e CSS – Criando a primeira página Web

No artigo de hoje veremos um tutorial básico de HTML e CSS. Vamos criar uma página Web simples, para exibir uma lista de Notas. O HTML (HyperText Markup Language),  é uma linguagem de marcação onde é possível criar documentos para serem exibidos em um navegador da Web. Ele é fundamental no desenvolvimento Web, pois com ele criamos interfaces para nossos usuários.

Junto com o HTML temos o CSS (Cascading Style Sheets), que é uma linguagem de folha de estilo. O CSS é utilizado para descrever a apresentação de um documento escrito em uma linguagem de marcação como o HTML. Assim o CSS faz toda a estilização da página Web escrita em HTML.

Padrão do HTML

O HTML segue um padrão de tags que identificam os elementos da página. Assim, para adicionar um elemento em nossa página Web, adicionamos uma nova tag específica para aquele elemento.

O documento HTML é escrito em um padrão de árvore de tags. Assim temos uma tag dentro da outra, e dentro das tags podemos ter elementos. A maioria das tags tem a sua parte de abertura que se inicia com < e a parte de fechamento que se inicia com </.

Estrutura básica do HTML

Vamos começar criando a estrutura padrão de um documento HTML. Crie o arquivo index.html e cole o seguinte conteúdo nele.

<!DOCTYPE HTML>
<html lang=”pt-br”>
  <head>
    <meta charset=”UTF-8”>
    <style>
    </style>
    <title>Primeira página HTML</title>
  </head>
  <body>
    <h1>Primeira página HTML</h1>
  </body>
</html>

No início temos o DOCTYPE, que é uma instrução para que o navegador Web saiba sobre qual versão de código o documento foi criado. Depois temos nossa primeira tag que é a html. Em nossa tag html temos o atributo lang que utilizamos para indicar qual é o idioma que predomina no documento. A tag html é a raiz da marcação, assim ela é a primeira a ser aberta e a última a ser fechada. Todas as outras tags ficam dentro dela.

Depois temos nossa tag head que indica o cabeçalho do documento. No head ficam todas as informações da página. Neste exemplo temos as seguintes informações em nosso head:

  • meta charset – Identifica qual a tabela de caracteres a página web está utilizando.
  • style – O CSS utilizado para estilizar a página Web.
  • title – O título que é utilizado para identificar a página.

Ao finalizar o head, temos nosso body que é a tag que identifica o corpo do documento. Dentro dele vamos colocar as demais tags que irão compor nossa página Web. Neste exemplo só temos a tag h1 em nosso body. A tag h1 é utilizada para definir um título dentro da página. Essa tag vai do h1 ao h6 sendo o h1 o maior deles. Nosso exemplo ficará com a seguinte aparência.

Primeira página HTML

Esta foi uma pequena introdução sobre HTML, com essa base podemos compreender o funcionamento da linguagem de marcação. Agora vou apresentar um exemplo de uma página Web HTML completa que faz uma simples listagem de Notas. Ela utiliza o mesmo cabeçalho da página inicial do site.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Irias Notas</title>
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
    <style>
      html {
        font-size: .875rem;
        font-family: 'Muli', sans-serif;
        margin-bottom: 50px;
      }

      * {
        box-sizing: border-box;
      }

      [class*="col-"] {
        width: 100%;
        float: left;
        padding: 15px;
      }

      .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
      }

      .row::after {
        content: "";
        clear: both;
        display: table;
      }

      .header {
        padding: 15px;
      }

      .logo-wrapper {
        height: 50px;
        display: flex;
      }

      .logo-wrapper .logo span {
        height: 10px;
        width: 10px;
        background: #37d5f2;
        display: block;
        border-radius: 20px;
        position: relative;
        bottom: 12px;
        right: 5px;
      }

      .logo-wrapper .logo {
        font-size: 2rem;
        color: #28a745;
        font-weight: 700;
        letter-spacing: -2px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: row;
        font-family: 'Poppins', sans-serif;
        text-transform: lowercase;
        font-weight: bold;
      }

      .main-menu {
        text-align: left;
      }
      
      .menu-link {
        color: #47525E!important;
        text-decoration: none;
      }

      .btn-blog {
        color: #fff;
        background-color: #37d5f2;
        border: solid 1px #37d5f2;
        font-size: bold;
        font-weight: 400;
        box-shadow: 0 1px 1px 0 rgb(66 66 66 / 8%), 0 1px 3px 1px rgb(66 66 66 / 16%);
        border-radius: 2rem;
        padding-left: 3rem!important;
        padding-right: 3rem!important;
        padding-bottom: .5rem!important;
        padding-top: .5rem!important;
        margin-left: 1rem;
        text-decoration: none;
        font-size: 1rem;
        line-height: 1.5;
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
      }

      .btn-blog:hover {
        color: #ffffff;
        border: solid 1px #ffffff;
        background-color: #000000;
      }

      .form-search {
        float: left;
        border: 1px solid #e8e8e8;
        margin-top: 25px;
        margin-bottom: 40px;
        width: 100%;
        border-radius: 15px;
      }

      .value-search {
        background: #fff;
        border: 0;
        padding: 10px;
        float: left;
        width: 87%;
        height: 35px;
        outline: none;
        font-size: 100%;
        border-radius: 15px;
      }

      .submit-search {
        background: #ffffff url(/lupa.png) no-repeat center center;
        text-indent: -9999px;
        float: right;
        width: 13%;
        height: 35px;
        padding: 0;
        margin: 0;
        border: 1px solid #e8e8e8;
        border-radius: 15px;
      }
      
      .link-card {
        text-decoration: none;
        color: #000000
      }

      .link-card:hover .card-note {
        border: 2px solid #47525E;
        transition: 0.5s ease-in;
        -webkit-transition: 0.5s ease-in;
        -moz-transition: 0.5s ease-in;
        -o-transition: 0.5s ease-in;
      }
      
      .card-note {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        box-shadow: 0 1px 1px 0 rgb(66 66 66 / 8%), 0 1px 3px 1px rgb(66 66 66 / 16%);
        border-radius: 15px;
        padding: 15px;
        border: 2px solid #fff;
      }

      .footer {
        background-color: #ffffff;
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        padding: 15px;
      }

      .btn-load {
        cursor: pointer;
        border-radius: 11px;
        background-color: rgba(247,248,248,0);
        box-shadow: inset 0 0 0 1px #d3d8d6;
        border: solid 1px #fff;
        color: #68746e;
        font-family: Fira Sans,Arial,Helvetica,sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .56px;
        line-height: 24px;
        padding: 12px 24px;
        transition: all .5s ease;
      }

      .btn-load:hover {
        color: #ffffff;
        border: solid 1px #ffffff;
        background-color: #000000;
      }

      @media only screen and (min-width: 576px) {
        .container {max-width: 540px;}
      }

      @media only screen and (min-width: 768px) {
        .container {max-width: 720px;}
        .main-menu {text-align: right!important;}
        .col-6 {width: 50%;}
        .col-12 {width: 100%;}
      }

      @media (min-width: 992px) {
        .container {max-width: 960px;}
      }

      @media (min-width: 1200px) {
        .container {max-width: 1140px;}
      }
    </style>
  </head>
  <body>
    <div class="header container">
      <div class="row">
        <div class="col-6">
          <div class="logo-wrapper">
            <div class="logo">
              <span></span>
              irias notas
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="main-menu">
            <a class="menu-link" href="/">
              <strong>Sobre</strong>
            </a>
            <a class="btn-blog" href="/blog">
              <strong>Blog</strong>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <form action="/" class="form-search" method="GET" accept-charset="utf-8">
            <input class="value-search" name="s" placeholder="Pesquisar em Notas" type="text" id="s">
            <input class="submit-search" type="submit" value="enviar">
          </form>
        </div>
        <div class="col-12">
          <a href="#" class="link-card">
            <div class="card-note">
              <strong>Nota 1</strong>
              <p>Lorem ipsum proin tempus ultricies lobortis, consectetur est urna faucibus et convallis, cubilia mollis fringilla non.</p>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a href="#" class="link-card">
            <div class="card-note">
              <strong>Nota 2</strong>
              <p>Lorem ipsum sodales ultrices euismod eros semper torquent proin, mattis justo ornare vehicula aliquam mauris laoreet.</p>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a href="#" class="link-card">
            <div class="card-note">
              <strong>Nota 3</strong>
              <p>Proin habitant semper habitant donec sociosqu maecenas molestie non purus enim, suspendisse auctor velit metus sodales accumsan iaculis morbi amet.</p>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a href="#" class="link-card">
            <div class="card-note">
              <strong>Nota 4</strong>
              <p>Eleifend auctor semper leo sollicitudin torquent, consequat tincidunt ornare ad risus ultricies, aenean sed quam cras.</p>
            </div>
          </a>
        </div>
        <div class="col-12">
          <a href="#" class="link-card">
            <div class="card-note">
              <strong>Nota 5</strong>
              <p>Litora vehicula consectetur sed lobortis laoreet pellentesque suspendisse nulla, congue enim tempus scelerisque felis mollis euismod morbi mattis.</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="footer">
      <button class="btn-load">Veja mais notas</button>
    </div>
  </body>
</html>

Coloque a imagem lupa.png no mesmo diretório do arquivo index.html, pois essa imagem é a lupa da barra de pesquisa. A página acima ficará com a seguinte aparência no navegador.

Esta é a versão de smartphone da página. Ela é uma página responsiva, assim se adapta conforme o dispositivo em que está sendo visualizada.

Neste exemplo criado, utilizei várias tags HTML e elementos CSS para compor a página Web. Não vou exemplificar todos neste artigo pois o mesmo ficaria muito extenso. Mas com esse exemplo vemos que com pouco código HTML e CSS, conseguimos criar boas interfaces Web.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *