Fundamentos Básicos de HTML PT 2

Utilizando Listas Básicas no HTML

Em HTML, você pode criar listas de duas formas principais: ordenadas e não ordenadas. Veja como cada tipo funciona e como você pode implementá-los:

Lista Ordenada (<ol>)

Uma lista ordenada é usada quando você precisa apresentar itens em uma sequência específica. Os itens são numerados automaticamente.

Exemplo de código HTML para uma lista ordenada:

    
    <ol>
        <li>Pão</li>
        <li>Arroz</li>
        <li>Feijão</li>
        <li>Batata</li>
    </ol>

Como será exibido no navegador:

  1. Pão
  2. Arroz
  3. Feijão
  4. Batata

Lista Não Ordenada (<ul>)

Uma lista não ordenada é usada para apresentar itens sem uma ordem específica. Os itens são precedidos por marcadores.

Exemplo de código HTML para uma lista não ordenada:

    
    <ul>
        <li>Academia</li>
        <li>Banco</li>
        <li>Internet</li>
        <li>Ração</li>
    </ul>

Como será exibido no navegador:

Para adicionar itens a essas listas, usamos a tag <li>, que significa "list item" (item da lista). Cada item da lista deve ser incluído dentro de uma tag <li> e colocado dentro das tags <ol> ou <ul>, dependendo

Adicionando Links no Seu HTML

Para adicionar links a uma página HTML, usamos a tag <a>. Essa tag é fundamental para criar hyperlinks, permitindo que você conecte sua página com outras páginas, seja dentro do mesmo site (links internos) ou em sites externos.

A tag <a> precisa de um atributo chamado href, que define o destino do link. A sintaxe básica para criar um link é:

<a href="URL">Texto do Link</a>

Por exemplo, para criar um link para o LinkedIn, o código HTML seria:

<a href="https://www.linkedin.com/in/rosdrigo">LinkedIn</a>

Este código cria um link visível assim:

LinkedIn

Utilizando Fontes em HTML

Antigamente, a tag <font> era usada para alterar a aparência das fontes em HTML, como a família da fonte, o tamanho e a cor. No entanto, essa tag está obsoleta e não é recomendada para uso em HTML5. Em vez disso, usamos CSS (Cascading Style Sheets) para controlar a aparência das fontes de forma mais flexível e poderosa.

Para alterar a fonte de um texto com CSS, você pode usar a propriedade font-family. Abaixo estão exemplos de como você pode definir diferentes fontes usando CSS:

Exemplos com CSS:

Para aplicar uma fonte específica a um texto, você deve incluir um estilo CSS no seu HTML. Aqui estão alguns exemplos:


    <style>
        .font-arial { font-family: Arial, sans-serif; }
        .font-courier { font-family: Courier, monospace; }
        .font-georgia { font-family: Georgia, serif; }
        .font-helvetica { font-family: Helvetica, sans-serif; }
        .font-times { font-family: Times New Roman, serif; }
        .font-trebuchet { font-family: Trebuchet MS, sans-serif; }
        .font-verdana { font-family: Verdana, sans-serif; }
    </style>

Aplique essas classes ao seu HTML para ver como cada fonte é exibida:

Texto em Arial

Texto em Courier

Texto em Georgia

Texto em Helvetica

Texto em Times New Roman

Texto em Trebuchet MS

Texto em Verdana

Em CSS, a propriedade font-family permite especificar uma lista de fontes. O navegador usará a primeira fonte disponível na lista. Se a fonte principal não estiver disponível, o navegador recorrerá às fontes secundárias, que são definidas como genéricas (por exemplo, serif ou sans-serif).

Ao utilizar CSS para estilizar fontes, você tem muito mais controle sobre a aparência do texto em seu site, além de garantir que o código esteja em conformidade com as práticas modernas de desenvolvimento web.

Usando Imagens no HTML

Para inserir imagens em uma página HTML, utilizamos a tag <img>. A tag <img> é uma tag auto-fechante e requer pelo menos um atributo para funcionar corretamente: src, que define a URL da imagem que você deseja exibir.

A sintaxe básica para a tag <img> é:

<img src="URL_da_Imagem" alt="Descrição da Imagem" />

Vamos explicar os principais atributos usados com a tag <img>:

Ir para Home Voltar ao topo Contacte-nos