Pular para o conteúdo principal

2 postagens marcadas com "HTML"

Ver todas os Marcadores

  • Parágrafos e Quebras

    Ao escrever um parágrafo <p></p> em um arquivo HTML, é preciso observar:

    • Qualquer texto pode ser escrito de forma corrida e sem quebra de linha, desde que esteja entre o par de tags <p></p>.
    • Se houver a necessidade de quebrar o texto em determinado local, basta utilizar a tag <br>.
    • Se houver a necessidade de um espaço maior NÃO UTILIZAR várias tags <br> <br> <br>.
    • Se houver a necessidade de escrever as tags no texto, utiliza-se: &lt; = Less than e &gt; = Greater than.
    1. &lt;p&gt; para a tag <p>.
    2. &lt;/p&gt; para a tag </p>.
    3. &lt;br&gt; para <br>.

    Exemplo de código​

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Parágrafos</title>
    </head>
    <body>
        <h1>Parágrafos e quebras de linhas</h1>
        <hr>
        <p>Você pode escrever um parágrafo de
        qualquer jeito.
        Basta colocar tudo no meio do par
        te tags &lt;p&gt; e &lt;/p&gt;
        </p>
        <p>Se precisar quebrar
            o texto em algum lugar
            específico <br> como esse
            Você pode usar a tag &lt;br&gt;.
        </p>
    </body>
    </html>

  • Símbolos e Emoji

    Abaixo estão alguns exemplos de símbolos:

    <p>Vamos adicionar alguns símbolos especiais:
            &reg;
            &copy;
            &trade;
            &euro;
            &pound;
            &cent;
            &Delta;
            &uparrow;
            &uarr;
        </p>

    Para adicionar um emoji, basta buscar pelo seu código em sites como o Emojipedia e colocar o seguinte comando antes do código do emoji: &#x.

    Exemplo de código:​

    <p>Vamos adicionar alguns emojis:
            &#x1F60A
            &#x1F680
        </p>

-- Aula do curso do Gustavo Guanabara

HTMLParágrafosSímbolosEmojisLeitura de um minuto

Formatos de Imagens: Utilizar o GIMP, software de tratamento de imagens gratuito e open source, para alterar largura, altura e resolução de imagens, de modo a transformar arquivo em algo menor, ocupando assim uma quantidade de espaço menor e consequentemente possibilitando o desenvolvimento de um site que não ocupe muito espaço.

Adicionar Imagens ao Site:

Podemos adicionar imagens ao site com o seguinte código: <img src="caminho, nome ou link" alt="descrição da imagen">

Exemplo com o código da aula:


<body>

    <h1>Testando carga e imagens</h1>

    <p>Abaixo você vai ver uma imagem</p>

    <img src="logohtml.png" alt="Logo html5">

    <p>Podemos carregar imagens que estão em subpastas:</p>

    <img src="imagens/css.png" alt="Logo css">

    <p>Podemos carregar imagens externas:</p>

    <img src="https://bognarjunior.files.wordpress.com/2018/01/1crcyaithv7aiqh1z93v99q.png" alt="Logo javascript">

</body>

É possível adicionar imagens ao site adicionando o arquivo .png na pasta onde está localizado o arquivo .html, em seguida digitamos ''img'' e pressionamos a tecla enter (o código é gerado automaticamente).

-   obs.: basta posicionar o cursor entre as aspas após "src" e apertar a tecla "ctrl + espaço", os arquivos irão aparecer para o o preenchimento automático.

Podemos preencher com:

-   Nome do arquivo se ele estiver na mesma pasta;

-   Caminho + nome do arquivo se ele estiver em uma subpasta;

-   Url da imagem que está na web, lembrando que se o servidor onde está a imagem cair a imagem do nosso site também pode cair.

Favicon de um Site:

Para adicionar um Favicon ao nosso site primeiro devemos baixar ou transformar algo em um arquivo "ICO", para baixar ícones basta utilizar o site https://www.iconarchive.com/ e para criar, utilize o site Favicon.io.

O ícone pode ser adicionado ao site com o seguinte código acima do title:


<link rel="shortcut icon" href="Dolphin.ico" type="image/x-icon">

    <title>Teste favicon</title>

Obs.: substituir pelo nome do arquivo a ser utilizado href="Dolphin.ico" .

--Aula do canal do Gustavo Guanabara

HTMLImagensGIMPFaviconLeitura de 2 minutos