Arquivo para Web - Bóson Treinamentos em Ciência e Tecnologia https://www.bosontreinamentos.com.br/tag/web/ Artigos e Tutoriais sobre Desenvolvimento de Software, Bancos de Dados SQL, Linux, Lógica de Programação, Inteligência Artificial, Hardware, Eletrônica, Arduino, Técnicas e Teorias de Estudo e Aprendizagem, Carreira em TI, Ciências Cognitivas, e muito mais! Thu, 12 Sep 2024 13:36:31 +0000 pt-BR hourly 1 https://wordpress.org/?v=6.8.5 Como gerar números primos em JavaScript https://www.bosontreinamentos.com.br/programacao-em-javascript/como-gerar-numeros-primos-em-javascript/ https://www.bosontreinamentos.com.br/programacao-em-javascript/como-gerar-numeros-primos-em-javascript/?noamp=mobile#respond Thu, 12 Sep 2024 13:36:31 +0000 https://www.bosontreinamentos.com.br/?p=20278 Gerar números primos em JavaScript Neste tutorial vou mostrar como criar um script relativamente simples em JavaScript que permite aos usuários gerarem uma lista com números primos, iniciando em 2 (que é o primeiro número primo) até um valor informado pelo usuário, que será o limite da lista gerada. Um número é considerado primo se ele for maior que um e divisível (no caso, divisão inteira) apenas por si próprio e por 1. Por exemplo: O número 23 é um número primo, pois ele só é divisível por 23 (ele próprio) e por 1. Já o número 24 não é primo, pois além de ser divisível por si mesmo e por 1, ele também é divisível por outros números, como 2, 3, 4 e 6. O número 1 não é considerado um número primo na matemática. Script que gera números primos em JavaScript O nosso script deverá realizar as seguintes tarefas: Calcular e mostrar na tela os números primos de 2 até um valor fornecido pelo usuário, usando JavaScript O numero fornecido pelo usuário será digitado em uma caixa de texto em uma página HTML Os números gerados serão exibidos no corpo do documento, um por linha. A geração dos [...]

O post Como gerar números primos em JavaScript apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> Gerar números primos em JavaScript

Neste tutorial vou mostrar como criar um script relativamente simples em JavaScript que permite aos usuários gerarem uma lista com números primos, iniciando em 2 (que é o primeiro número primo) até um valor informado pelo usuário, que será o limite da lista gerada.

Um número é considerado primo se ele for maior que um e divisível (no caso, divisão inteira) apenas por si próprio e por 1. Por exemplo:

  • O número 23 é um número primo, pois ele só é divisível por 23 (ele próprio) e por 1.
  • Já o número 24 não é primo, pois além de ser divisível por si mesmo e por 1, ele também é divisível por outros números, como 2, 3, 4 e 6.

O número 1 não é considerado um número primo na matemática.

Script que gera números primos em JavaScript

O nosso script deverá realizar as seguintes tarefas:

  1. Calcular e mostrar na tela os números primos de 2 até um valor fornecido pelo usuário, usando JavaScript
  2. O numero fornecido pelo usuário será digitado em uma caixa de texto em uma página HTML
  3. Os números gerados serão exibidos no corpo do documento, um por linha.
  4. A geração dos valores se dará após o usuário clicar em um botão btnGeraPrimos.
  5. O código JavaScript será declarado no cabeçalho da página HTML, para melhor organização do código, e invocado no botão.
  6. Adicionar validação: se o usuário fornecer um número negativo, avisar que não é possível gerar a sequência de primos.
  7. Mais validação: se o usuário informar um caractere que não seja um número, será avisado de que não é possível gerar a sequência de primos.

Também iremos estilizar o formulário e a saída gerada usando CSS, em um arquivo separado de folha de estilos, que chamaremos de estilos.css.

Vamos à codificação.

Códigos em HTML, CSS e JavaScript

1. Página HTML com JavaScript: arquivo index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerador de Números Primos</title>
    <link rel="stylesheet" href="estilos.css">
    <script>
        // Função para verificar se um número é primo
        function ePrimo(num) {
            if (num < 2) return false;
            for (let i = 2; i <= Math.sqrt(num); i++) {
                if (num % i === 0) return false;
            }
            return true;
        }

        // Função para gerar e exibir os números primos
        function gerarPrimos() {
            // Limpa as mensagens e a saída anterior
            document.getElementById('mensagemErro').innerHTML = '';
            document.getElementById('saida').innerHTML = '';
            // Obter o valor inserido pelo usuário
            let valor = document.getElementById('inputNumero').value;
            // Verificar se o valor é um número válido
            if (isNaN(valor) || valor.trim() === '') {
                document.getElementById('mensagemErro').innerHTML = 'Por favor, insira um número válido.';
                return;
            }
            valor = parseInt(valor);

            // Validação de número negativo
            if (valor < 2) {
                document.getElementById('mensagemErro').innerHTML = 'Por favor, insira um número maior que 1 para gerar números primos.';
                return;
            }
            let primos = [];
            // Calcular os números primos
            for (let i = 2; i <= valor; i++) {
                if (ePrimo(i)) {
                    primos.push(i);
                }
            }

            // Exibir os números primos
            const saida = document.getElementById('saida');
            if (primos.length > 0) {
                primos.forEach(function(primo) {
                    saida.innerHTML += primo + '<br>';
                });
            } else {
                saida.innerHTML = 'Nenhum número primo encontrado.';
            }
        }
    </script>
</head>

<body>
<div class="container">
    <h1>Gerador de Primos</h1>
    <label for="inputNumero">Digite um número:</label>
    <input type="text" id="inputNumero" placeholder="Ex: 50">
    <div class="error" id="mensagemErro"></div>
    <button id="btnGeraPrimos" onclick="gerarPrimos()">Gerar Primos</button>
    <div class="output" id="saida"></div>
</div>
</body>
</html>

2. Folha de estilos externa: arquivo estilos.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}
h1 {
    text-align: center;
    color: #333;
}
label {
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
}
input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.error {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
}
.success {
    color: green;
}
button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
button:hover {
    background-color: #45a049;
}
.output {
    margin-top: 20px;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
}

Teste da aplicação

Vamos abrir a página e pedir para que sejam gerados os números primos até 33:

Gerador de Números Primos em JavaScript

Caso o usuário tente gerar a sequência fornecendo um número negativo ou um caractere não-numérico, será exibida a mensagem de erro e a sequência de números primos não será gerada:

Como gerar números primos com JavaScript

Foi fornecido o número -5 (negativo), por isso a mensagem de erro.

Funcionamento do Código

HTML: O formulário possui um campo de entrada (input) no qual o usuário digita um número, e um botão para invocar a função JavaScript que gera os números primos. Há uma área para exibir os erros de validação logo abaixo e uma área de saída para exibir os números primos.

CSS: A página está estilizada para ter uma aparência limpa e amigável, como é sempre recomendável. Centralizamos o formulário na página e os elementos como caixas de texto e botões têm um design agradável, com cor de fundo verde para o botão e texto de mensagem de erro em vermelho – mas você pode alterar isso à vontade, evidentemente.

A saída dos números primos será em uma área de rolagem (output), que facilita a visualização dos números, caso sejam gerados muitos.

JavaScript: O código JavaScript foi inserido no cabeçalho da página, e consiste em duas funções com tarefas específicas:

  • ePrimo: Função que verifica se um número é primo. Ela percorre os divisores do número até sua raiz quadrada.
  • gerarPrimos: Função principal que é chamada ao clicar no botão. Ela valida a entrada do usuário, calcula os números primos até o valor fornecido, e os exibe no corpo da página.

Também são realizadas validações: Se o valor fornecido não for um número, ou se for um número negativo, uma mensagem de erro é exibida.

Conclusão

Neste post mostrei um script simples para gerar uma listagem de números primos, que você pode – e deve – usar para estudar a linguagem e se aprofundar nas suas técnicas de programação.

Nos próximos artigos veremos scripts para resolver diversos outros problemas, sempre com esse foco: o aprendizado da linguagem JavaScript.

Até!

O post Como gerar números primos em JavaScript apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> https://www.bosontreinamentos.com.br/programacao-em-javascript/como-gerar-numeros-primos-em-javascript/feed/ 0 Exemplos do comando curl no Linux – Tutorial completo https://www.bosontreinamentos.com.br/linux/exemplos-do-comando-curl-no-linux-tutorial-completo/ https://www.bosontreinamentos.com.br/linux/exemplos-do-comando-curl-no-linux-tutorial-completo/?noamp=mobile#respond Thu, 04 May 2023 12:12:07 +0000 http://www.bosontreinamentos.com.br/?p=19369 8 exemplos do comando curl no Linux O comando curl é uma ferramenta útil para transferir dados de e para um servidor, local ou remoto, diretamente a partir do terminal do Linux. Ele é usado para baixar arquivos usando protocolos como HTTP, HTTPS, FTP, MQTT, IMAPS e SCP, entre outros. A ferramenta fornece diversas opções que nos permitem, por exemplo, baixar vários arquivos de uma vez, parar e continuar um download, limitar a largura de banda usada, fazer downloads em segundo plano, e muitas outras. Instalação do curl Muitas vezes o curl já vem pré-instalado nas distribuições Linux. Se ele não estiver instalado na distro usada, basta usar o gerenciador de pacotes padrão para instalá-lo. Por exemplo, para instalar o curl no Linux Debian, Ubuntu e derivados: $ sudo apt install curl E para instalar o curl no Fedora, Red Hat e derivados: $ sudo yum install curl Sintaxe do curl A sintaxe do comando curl é a seguinte: curl [opções] url onde: [opções]: Se refere a uma das múltiplas opções disponíveis para o comando – literalmente, dezenas. Para conhecer todas, consulte a página de manual da ferramenta. url: Endereço do arquivo ou diretório que queremos baixar. Obrigatório. Se não [...]

O post Exemplos do comando curl no Linux – Tutorial completo apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> 8 exemplos do comando curl no Linux

O comando curl é uma ferramenta útil para transferir dados de e para um servidor, local ou remoto, diretamente a partir do terminal do Linux. Ele é usado para baixar arquivos usando protocolos como HTTP, HTTPS, FTP, MQTT, IMAPS e SCP, entre outros.

A ferramenta fornece diversas opções que nos permitem, por exemplo, baixar vários arquivos de uma vez, parar e continuar um download, limitar a largura de banda usada, fazer downloads em segundo plano, e muitas outras.

Instalação do curl

Muitas vezes o curl já vem pré-instalado nas distribuições Linux. Se ele não estiver instalado na distro usada, basta usar o gerenciador de pacotes padrão para instalá-lo.

Por exemplo, para instalar o curl no Linux Debian, Ubuntu e derivados:

$ sudo apt install curl

E para instalar o curl no Fedora, Red Hat e derivados:

$ sudo yum install curl

Sintaxe do curl

A sintaxe do comando curl é a seguinte:

curl [opções] url

onde:

  • [opções]: Se refere a uma das múltiplas opções disponíveis para o comando – literalmente, dezenas. Para conhecer todas, consulte a página de manual da ferramenta.
  • url: Endereço do arquivo ou diretório que queremos baixar. Obrigatório.

Se não for especificado um protocolo nas opções usadas, a ferramenta tentará deduzir qual protocolo usar, geralmente escolhendo o padrão, que é o HTTP.

Vejamos agora alguns exemplos de como usar o comando curl no terminal do Linux.

Exemplos do curl

Exemplo 1. Visualizar o código-fonte de uma página Web no terminal. Se usado sem nenhuma opção o comando curl simplesmente imprime no terminal o código-fonte da URL especificada na saída padrão.

Por exemplo:

$ curl https://www.rust-lang.com

Este comando exibe no terminal o código-fonte HTML da página inicial do projeto Rust (linguagem de programação).

Exemplo 2. Baixar um arquivo da Web. Digitamos o comando curl seguido do URL do arquivo que precisamos baixar.

Se quisermos manter o nome original do arquivo, usamos a opção -O, e Já para renomear o arquivo ao baixá-lo, usamos a opção -o.

Por exemplo, para baixar o instalador da linguagem Python a partir do endereço https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tgz, mantendo seu nome original, digitamos:

$ curl -O https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tgz

E se quisermos renomeá-lo ao baixar, por exemplo para python-3.10.tgz:

$ curl -o python-3.10.tgz https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tgz

O progresso do download é mostrado na tela do terminal, e o arquivo será baixado no diretório atual (pwd).

Para cancelar um download em andamento, execute Ctrl+C no terminal.

Exemplo 3. Também é possível limitar a velocidade do download com a opção –limit-rate. A velocidade é medida em bytes/segundo. Podemos usar os códigos k para kilobytes, m para megabytes e g para gigabytes.

Por exemplo, vamos limitar a velocidade do download do instalador do Python para 100 kB/s:

$ curl --limit-rate 100k -O https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tgz

Desta forma o curl não consome toda a largura de banda disponível na rede durante o download.

Exemplo 4. Podemos baixar vários arquivos ao mesmo tempo, adicionando suas URLs e usando a opção -O para cada uma delas. Por exemplo, para baixar os instaladores do Python para Windows e para Linux na sequência:

$ curl -O https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tgz -O https://www.python.org/ftp/python/3.11.3/python-3.11.3-amd64.exe

Exemplo 5. Outra opção para baixar múltiplos arquivos com o curl é criar um arquivo de shell script executável contendo as urls dos arquivos que desejamos baixar, separadas por espaços, e usar esse script para realizar o download.

Por exemplo, suponha que desejamos baixar os dois instaladores do Python a seguir, um para Linux e outro para Windows, usando um único comando:

https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tgz
https://www.python.org/ftp/python/3.11.3/python-3.11.3-amd64.exe

Para baixar esses arquivos com o curl, criamos um script do shell com o código mostrado abaixo (chamei o arquivo de “baixar.sh“) usando um editor de textos qualquer, como o vi, emacs ou nano:

#!/bin/bash
urls="https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tgz https://www.python.org/ftp/python/3.11.3/python-3.11.3-amd64.exe

for item in $urls
do
   curl -O "$item"
done

Note que as URLs a serem baixadas precisam estar separadas por um espaço em branco na atribuição à variável urls.

Após salvar e fechar o arquivo, damos permissão de execução ao script:

$ chmod 775 baixar.sh

E então rodamos nosso programa:

$ ./baixar.sh

Todos os recursos especificados no código serão baixados pelo curl, sequencialmente.

Exemplo 6. Se um download for interrompido, por exemplo por uma queda na conexão, podemos continuá-lo posteriormente usando a opção -C -:

$ curl -C - -O https://www.python.org/ftp/python/3.10.11/Python-3.10.11.tgz

Exemplo 7. Podemos baixar arquivos de um site de FTP também, mesmo que seja protegido por senha. Por exemplo, para baixar um arquivo de um servidor FTP usando usuário fabio e senha 123 executamos o comando como segue:

$ curl -u fabio:123 ftp://ftp.site.com.br/arquivo.zip

Podemos também enviar um arquivo a um servidor FTP, usando a opção -T. Por exemplo, para subir o arquivo script.py:

$ curl -T script.py -u fabio:123 ftp://ftp.site.com.br/

Exemplo 8. Obter os cabeçalhos HTTP de uma URL

Cabeçalhos HTTP são pares chave-valor separados por dois-pontos (:) que contém informações de uma página Web, tais como tipo de conteúdo, agente e codificação, entre outras. Esses cabeçalhos são transferidos entre servidor e cliente durante uma requisição de recurso ou resposta à requisição.

O comando curl permite ler os cabeçalhos HTTP de um recurso especificado com o uso da opção -I. Por exemplo:

$ curl -I --http2 https://www.diariodonaturalista.com.br

Neste caso também informamos o protocolo a usar, com a opção –http2 (que indica o protocolo HTTP/2).

É isso aí! O utilitário curl possui muitas outras opções úteis além das mostradas neste tutorial. Para conhecer todas as opções disponíveis, consulte suas páginas de manual executando o comando man curl no terminal.

Linux - Boson Treinamentos em Tecnologia

 

O post Exemplos do comando curl no Linux – Tutorial completo apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> https://www.bosontreinamentos.com.br/linux/exemplos-do-comando-curl-no-linux-tutorial-completo/feed/ 0 O que é uma API – Conceitos de Computação https://www.bosontreinamentos.com.br/analise-de-sistemas/o-que-e-uma-api-conceitos-de-computacao/ https://www.bosontreinamentos.com.br/analise-de-sistemas/o-que-e-uma-api-conceitos-de-computacao/?noamp=mobile#comments Fri, 17 Mar 2023 10:53:28 +0000 http://www.bosontreinamentos.com.br/?p=17107 O que é uma API A sigla API significa Application Programming Interface, ou Interface de Programação de Aplicações, em português. É um conjunto de protocolos, rotinas e ferramentas que permitem que diferentes aplicativos de software se comuniquem entre si. As APIs agem como intermediárias entre aplicativos de software, permitindo que eles troquem dados e acessem as funcionalidades uns dos outros. Uma API define um conjunto específico de regras e padrões para a construção de aplicativos de software, especificando como os componentes de software devem interagir uns com os outros. Ela fornece uma maneira padronizada para diferentes aplicativos acessarem e compartilharem dados e serviços, sem exigir que os desenvolvedores desses aplicativos entendam os detalhes de implementação subjacentes. Trata-se de uma forma de comunicação entre duas aplicações de computador, que permite a troca de informações por meio de uma rede, como a Internet, usando uma linguagem em comum, que as aplicações conseguem entender. A empresa ou organização que oferece uma API é chamada de fornecedor da API. Arquitetura de uma API Para que serve uma API? Uma API fornece acesso a dados e serviços que permitem o rápido desenvolvimento de aplicações dos mais variados tipos. As APIs são amplamente utilizadas no desenvolvimento [...]

O post O que é uma API – Conceitos de Computação apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> O que é uma API

A sigla API significa Application Programming Interface, ou Interface de Programação de Aplicações, em português. É um conjunto de protocolos, rotinas e ferramentas que permitem que diferentes aplicativos de software se comuniquem entre si.

As APIs agem como intermediárias entre aplicativos de software, permitindo que eles troquem dados e acessem as funcionalidades uns dos outros.

Uma API define um conjunto específico de regras e padrões para a construção de aplicativos de software, especificando como os componentes de software devem interagir uns com os outros.

Ela fornece uma maneira padronizada para diferentes aplicativos acessarem e compartilharem dados e serviços, sem exigir que os desenvolvedores desses aplicativos entendam os detalhes de implementação subjacentes.

Trata-se de uma forma de comunicação entre duas aplicações de computador, que permite a troca de informações por meio de uma rede, como a Internet, usando uma linguagem em comum, que as aplicações conseguem entender.

A empresa ou organização que oferece uma API é chamada de fornecedor da API.

Arquitetura de uma API

Arquitetura de uma API

Para que serve uma API?

Uma API fornece acesso a dados e serviços que permitem o rápido desenvolvimento de aplicações dos mais variados tipos.

As APIs são amplamente utilizadas no desenvolvimento de software para permitir a integração entre diferentes sistemas de software, facilitar a troca e o compartilhamento de dados e agilizar o processo de desenvolvimento.

Elas são comumente usadas para desenvolver aplicativos da web e móveis, bem como para integrar serviços de terceiros e fontes de dados em aplicativos de software existentes.

Especificações de APIs

As APIs seguem uma especificação, o que na prática significa que:

  • O fornecedor da API descreve exatamente as funcionalidades que a API irá oferecer
  • O fornecedor também descreve quando as funcionalidade estarão disponíveis, e quando existe a possibilidade de alterações nestas funcionalidades
  • O fornecedor da API também por estabelecer restrições técnicas ao uso da API, como limites de uso de banda, quantidade de acessos permitidos por uma aplicação, entre outras.
  • Os desenvolvedores (usuários) concordam em usar a API da forma como ela é descrita, seguindo as regras estabelecidas pelo fornecedor da API.

O fornecedor da API pode também:

  • Fornecer mecanismos para acesso à API
  • Fornecer documentação para ajudar a entender como ela funciona e como usá-la
  • Distribuir programas de exemplo para auxiliar os desenvolvedores interessados na API

entre outros.

Algumas APIs são abertas a todos os desenvolvedores, algumas apenas para colaboradores e parceiros e outras são empregadas apenas internamente em uma empresa, por exemplo facilitando a comunicação e colaboração entre os times de desenvolvimento.

Tipos de APIs

As APIs podem ser públicas ou privadas, dependendo do público-alvo e da finalidade.

  • APIs públicas são projetadas para serem usadas por desenvolvedores externos e normalmente são disponibilizadas por meio de documentação e portais de desenvolvedores.
  • Já as APIs privadas, por outro lado, são usadas dentro de uma organização ou por um conjunto específico de usuários e normalmente não são expostas a desenvolvedores externos.

Exemplos de APIs

Existem muitos exemplos de APIs públicas que são amplamente utilizadas por desenvolvedores para criar aplicativos da web e móveis, bem como para integrar serviços de terceiros e fontes de dados em aplicativos de software existentes. A seguir listo alguns exemplos:

  • API do Google Maps: A API do Google Maps permite que os desenvolvedores integrem o Google Maps em seus aplicativos, fornecendo aos usuários recursos como geocodificação, direções e atualizações de tráfego em tempo real.
  • API do Twitter: A API do Twitter permite que os desenvolvedores acessem dados e funcionalidades do Twitter, como pesquisar tweets, postar tweets e recuperar informações do usuário.
  • API do Facebook: A API do Facebook permite integração da funcionalidade do Facebook em seus aplicativos, como permitir que os usuários façam login com suas contas do Facebook, recuperar informações do usuário e postar nprópria rede social.
  • API OpenWeatherMap: A API OpenWeatherMap fornece aos desenvolvedores acesso a dados meteorológicos de todo o mundo, incluindo condições atuais do clima e tempo, previsões e dados históricos.
  • API do GitHub: A API do GitHub permite que o acesso às funcionalidades do GitHub, como gerenciamento de repositórios, criação de requisições e recuperação de informações do usuário.

Conclusão

No geral, as APIs desempenham um papel crucial no desenvolvimento de software moderno, permitindo que os desenvolvedores criem aplicativos de software mais robustos e interconectados que podem se comunicar e trocar dados perfeitamente entre si.

 

O post O que é uma API – Conceitos de Computação apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> https://www.bosontreinamentos.com.br/analise-de-sistemas/o-que-e-uma-api-conceitos-de-computacao/feed/ 1 Mostrar e ocultar conteúdo com os elementos details e summary em HTML https://www.bosontreinamentos.com.br/html/mostrar-e-ocultar-conteudo-com-os-elementos-details-e-summary-em-html/ https://www.bosontreinamentos.com.br/html/mostrar-e-ocultar-conteudo-com-os-elementos-details-e-summary-em-html/?noamp=mobile#respond Fri, 24 Feb 2023 11:58:59 +0000 http://www.bosontreinamentos.com.br/?p=18827 Mostrar e ocultar conteúdo com os elementos details e summary em HTML Os elementos HTML details e summary permitem que você crie uma interface interativa no estilo sanfona (“accordion“) que pode expandir ou recolher seu conteúdo, mostrando ou ocultando parte do texto ou mesmo outros elementos HTML. Isso pode ser útil para exibir muitas informações em uma página sem sobrecarregar o usuário com muito texto de uma só vez. O elemento details (“detalhes”) cria um contêiner para o conteúdo que você deseja expandir ou recolher. Já o elemento summary (“resumo”) é usado para criar o cabeçalho clicável para esse contêiner. Quando o usuário clica no elemento de resumo, o conteúdo dentro do elemento details será expandido ou recolhido. Vejamos um exemplo de como usar esses elementos em HTML: <details> <summary>Clique aqui para expandir o conteúdo</summary> <p>Conteúdo que expandido ou colapsado ao clicar no texto do elemento summary.</p> </details> No exemplo acima, o elemento summary é usado como um cabeçalho clicável e o elemento de parágrafo dentro do elemento details é o conteúdo que será expandido ou recolhido: Quando o usuário clica no texto do elemento summary, o elemento de parágrafo alterna entre ser exibido ou ocultado: Podemos adicionar mais conteúdo [...]

O post Mostrar e ocultar conteúdo com os elementos details e summary em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> Mostrar e ocultar conteúdo com os elementos details e summary em HTML

Os elementos HTML details e summary permitem que você crie uma interface interativa no estilo sanfona (“accordion“) que pode expandir ou recolher seu conteúdo, mostrando ou ocultando parte do texto ou mesmo outros elementos HTML.

Isso pode ser útil para exibir muitas informações em uma página sem sobrecarregar o usuário com muito texto de uma só vez.

O elemento details (“detalhes”) cria um contêiner para o conteúdo que você deseja expandir ou recolher. Já o elemento summary (“resumo”) é usado para criar o cabeçalho clicável para esse contêiner.

Quando o usuário clica no elemento de resumo, o conteúdo dentro do elemento details será expandido ou recolhido.

Vejamos um exemplo de como usar esses elementos em HTML:

<details>
  <summary>Clique aqui para expandir o conteúdo</summary>
    <p>Conteúdo que expandido ou colapsado ao clicar no texto do elemento summary.</p>
</details>

No exemplo acima, o elemento summary é usado como um cabeçalho clicável e o elemento de parágrafo dentro do elemento details é o conteúdo que será expandido ou recolhido:

Elementos details e summary em HTML

Quando o usuário clica no texto do elemento summary, o elemento de parágrafo alterna entre ser exibido ou ocultado:

Elementos details e summary em HTML

Podemos adicionar mais conteúdo dentro do elemento details, incluindo outros elementos HTML como cabeçalhos, listas ou imagens. Vejamos um exemplo de uso mais complexo desses elementos:

<details>
  <summary>Exibir lista de livros</summary>
    <h2>Livros</h2>
    <ul>
      <li>Cosmos</li>
      <li>Contato</li>
      <li>Pálido Ponto Azul</li>
      <li>Murmúrios da Terra</li>
    </ul>
    <img src="http://www.bosontreinamentos.com.br/wp-content/uploads/2023/02/cosmos-livro.jpg" alt="Imagem de exemplo">
</details>

Neste exemplo, há um cabeçalho de seção, uma lista e uma imagem dentro do elemento details. Quando o usuário clicar no elemento summary, todo esse conteúdo será expandido ou recolhido. A imagem a seguir mostra o conteúdo desse exemplo expandido:

Elementos summary e details em HTML

Também podemos empregar CSS para estilizar os elementos details e summary, como por exemplo para alterar o tamanho da fonte, cor do texto ou cor de fundo. Abaixo temos um exemplo de como estilizar ambos os elementos:

<style>
  details {
    width: 250px;
    height: 250px;
  }
  summary {
    background-color: #ddd;
    padding: 10px;
    border-radius: 5px;
  }
</style>

Neste exemplo, o elemento summary terá uma cor de fundo cinza e cantos arredondados, e o elemento details tem seu tamanho delimitado em 250 pixels:

Estilizar elementos summary e details com CSS

No geral, os elementos details e summary são uma forma simples e eficaz de criar um bloco colapsável no estilo sanfona em HTML. Eles podem ajudar a tornar o site mais fácil de usar e organizado, permitindo que os usuários se concentrem em um conteúdo específico por vez.

 

O post Mostrar e ocultar conteúdo com os elementos details e summary em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> https://www.bosontreinamentos.com.br/html/mostrar-e-ocultar-conteudo-com-os-elementos-details-e-summary-em-html/feed/ 0 Como arredondar números em PHP com a função ROUND() https://www.bosontreinamentos.com.br/php-programming/como-arredondar-numeros-em-php-com-a-funcao-round/ https://www.bosontreinamentos.com.br/php-programming/como-arredondar-numeros-em-php-com-a-funcao-round/?noamp=mobile#respond Fri, 20 Jan 2023 14:43:05 +0000 http://www.bosontreinamentos.com.br/?p=18735 Função Round(): Arredondamento de números no PHP O arredondamento de números é uma tarefa trivial e corriqueira em sistemas que realizam cálculos que gerem valores de ponto flutuante (“com casas depois da vírgula”). Por exemplo, um cálculo financeiro pode gerar um número com 6 casas decimais, mas só nos interessam duas delas, pois nossa moeda, o Real, somente possui como divisão os centavos – que usam duas casas decimais apenas. Mas como arredondar números em um script escrito em PHP?  A função round em PHP permite arredondar um número de ponto flutuante, retornando um valor com uma precisão especificada (número de casas decimais). Sintaxe: round(int|float $num, int $precision = 0, int $mode = PHP_ROUND_HALF_UP): float onde: num: Valor a ser arredondado precision: número de dígitos decimais para o arredondamento. Se for um valor positivo, o número é arredondado para a quantidade de dígitos significativos após o ponto decimal. Se a precisão for um valor negativo, o número será arredondado para a quantidade de dígitos significativos antes do separador decimal. Por exemplo, se a precisão for -1, num será arredondado para a casa das dezenas, se for -2, para centenas, e assim por diante. mode: modo no qual o arredondamento ocorre. [...]

O post Como arredondar números em PHP com a função ROUND() apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> Função Round(): Arredondamento de números no PHP

O arredondamento de números é uma tarefa trivial e corriqueira em sistemas que realizam cálculos que gerem valores de ponto flutuante (“com casas depois da vírgula”). Por exemplo, um cálculo financeiro pode gerar um número com 6 casas decimais, mas só nos interessam duas delas, pois nossa moeda, o Real, somente possui como divisão os centavos – que usam duas casas decimais apenas.

Mas como arredondar números em um script escrito em PHP? 

A função round em PHP permite arredondar um número de ponto flutuante, retornando um valor com uma precisão especificada (número de casas decimais).

Sintaxe:

round(int|float $num, int $precision = 0, int $mode = PHP_ROUND_HALF_UP): float

onde:

  • num: Valor a ser arredondado
  • precision: número de dígitos decimais para o arredondamento. Se for um valor positivo, o número é arredondado para a quantidade de dígitos significativos após o ponto decimal.
    Se a precisão for um valor negativo, o número será arredondado para a quantidade de dígitos significativos antes do separador decimal. Por exemplo, se a precisão for -1, num será arredondado para a casa das dezenas, se for -2, para centenas, e assim por diante.
  • mode: modo no qual o arredondamento ocorre. Pode ser:
    • PHP_ROUND_HALF_UP: arredonda o número para longe do zero, se a última casa decimal arredondada possuir valor 5 ou maior. Por exemplo, 3,5 é arredondado para 4 e -3,5 é arredondado para -4.
    • PHP_ROUND_HALF_DOWN: arredonda o número em direção ao zero, se a última casa decimal arredondada possuir valor 5 ou maior. Por exemplo, 3,5 é arredondado para 3 e -3,5 é arredondado para -3.
    • PHP_ROUND_HALF_EVEN: arredonda o número para o valor par mais próximo, se a última casa decimal arredondada possuir valor 5 ou maior. Por exemplo, tanto 3,5 quanto 4,5 são arredondados para 4.
    • PHP_ROUND_HALF_ODD: arredonda o número para o valor ímpar mais próximo, se a última casa decimal arredondada possuir valor 5 ou maior. Por exemplo, 3,5 é arredondado para 3 e 4,5 é arredondado para 5.

O valor arredondado é retornado como um número float.

Exemplos

<?php
$numero = 230.1480;
echo round($numero, 2)."<br>";
echo round($numero, 1)."<br>";
echo round($numero, 0)."<br>";
echo round($numero, -1)."<br>";
echo round($numero, -2)."<br>";
echo round($numero, 2, PHP_ROUND_HALF_DOWN)."<br>";
echo round($numero, 1, PHP_ROUND_HALF_UP)."<br>";
?>
 
Resultado:
230.15
230.1
230
230
200
230.15
230.1

Outras funções que permitem realizar arredondamento de valores em PHP são as funções ceil() e floor().

O post Como arredondar números em PHP com a função ROUND() apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> https://www.bosontreinamentos.com.br/php-programming/como-arredondar-numeros-em-php-com-a-funcao-round/feed/ 0 Trabalhando com sessões em PHP e variável $_SESSION https://www.bosontreinamentos.com.br/php-programming/trabalhando-com-sessoes-em-php-e-variavel-_session/ https://www.bosontreinamentos.com.br/php-programming/trabalhando-com-sessoes-em-php-e-variavel-_session/?noamp=mobile#comments Sat, 24 Mar 2018 13:31:46 +0000 http://www.bosontreinamentos.com.br/?p=11664 Como trabalhar com sessões em PHP Trabalhar com o conceito de sessões permite que um conjunto de dados possam ser utilizados por um usuário durante todo o tempo em que acessa e navega dentro de uma aplicação Web, sendo persistidos. Desta forma, é possível, por exemplo, verificar se um usuário está logado no site, transportar o conteúdo de um carrinho de compras, controlar as permissões de execução do usuário, e muito mais.  A variável superglobal $_SESSION é um array associativo que contém variáveis de sessão que ficam disponíveis para o script atual e para as próximas páginas acessadas por um usuário. Criando uma sessão – função session_start() A função session_start() permite iniciar uma nova sessão ou resumir (continuar) uma sessão já existente. Sintaxe: bool session_start([array $opções = array()]) Retorno da função: TRUE se a sessão é iniciada com sucesso. FALSE se a sessão falha em iniciar. A sessão é iniciada ou resumida baseada em um identificador de sessão passado via requisição GET ou POST, ou ainda via um cookie. Exemplo 01: Vamos trabalhar com duas páginas php. Na primeira página vamos iniciar uma sessão e passar valores para duas variáveis de sessão criadas: <?php // Página 01 session_start(); echo 'Esta [...]

O post Trabalhando com sessões em PHP e variável $_SESSION apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> Como trabalhar com sessões em PHP

Trabalhar com o conceito de sessões permite que um conjunto de dados possam ser utilizados por um usuário durante todo o tempo em que acessa e navega dentro de uma aplicação Web, sendo persistidos. Desta forma, é possível, por exemplo, verificar se um usuário está logado no site, transportar o conteúdo de um carrinho de compras, controlar as permissões de execução do usuário, e muito mais. 

A variável superglobal $_SESSION é um array associativo que contém variáveis de sessão que ficam disponíveis para o script atual e para as próximas páginas acessadas por um usuário.

Criando uma sessão – função session_start()

A função session_start() permite iniciar uma nova sessão ou resumir (continuar) uma sessão já existente.

Sintaxe:

bool session_start([array $opções = array()])

Retorno da função:

  • TRUE se a sessão é iniciada com sucesso.
  • FALSE se a sessão falha em iniciar.

A sessão é iniciada ou resumida baseada em um identificador de sessão passado via requisição GET ou POST, ou ainda via um cookie.

Exemplo 01:

Vamos trabalhar com duas páginas php. Na primeira página vamos iniciar uma sessão e passar valores para duas variáveis de sessão criadas:

<?php
// Página 01

session_start();

echo 'Esta é a página 01, onde a sessão será criada';

$_SESSION['aula'] = 'PHP';
$_SESSION['hora'] = time();

// Link para a página 02:
echo '<br /><a href="pagina2.php">Clique para ir à página 02</a>';
?>

Após carregar a página 01, a sessão é criada e as variáveis de sessão ‘aula’ e ‘hora’ são declaradas e inicializadas. Elas poderão ser acessadas na página 02, clicando-se no link fornecido.
A seguir está o código do arquivo pagina2.php:

<?php
// E esta é a página 02, onde recuperaremos as variáveis de sessão

session_start();

date_default_timezone_set('America/Sao_Paulo');
echo 'Agora estamos na página 02<br />';
echo "Estamos na aula de " . $_SESSION['aula'] . "<br>";
echo "E agora são " . date('H:i:s', $_SESSION['hora']) . " horas";
?>

Veja o resultado obtido na página:

Sessions em PHP

Neste exemplo, a sessão é criada logo que o usuário carrega a página 01. Porém, é muito comum que se deseje criar uma nova sessão apenas quando algum evento específico ocorrer, como o clique em um botão de formulário. No próximo exemplo vamos criar um formulário que, ao ser enviado, inicia uma sessão com dados fornecidos pelo usuário.

Exemplo 02:

Também trabalharemos com dois arquivos: a primeira página conterá um formulário onde o usuário deverá digitar seu nome e clicar em um botão para envio dos dados ao servidor, criando uma nova sessão, e o segundo arquivo será um script PHP que irá receber os dados enviados e exibi-los na página, após retomar a sessão.

Vamos aos códigos:

Primeiramente, o código do arquivo pagina01.php, que exibirá um formulário e permitirá a criação de uma sessão:

<?php
// Testando sessões em PHP
if(isset($_REQUEST['valor']) and ($_REQUEST['valor'] == 'enviado')) { // cria sessão se usuário tiver clicado no botão enviar do formulário
 session_start();
// cria variáveis de sessão e as inicializa com os dados do formulário:
 $_SESSION['nome'] = $_POST['frm_nome'];
 $_SESSION['sobrenome'] = $_POST['frm_sobrenome'];
// exibe link para a página 02:
 echo "<a href='sessao2.php'>Ir para página 2</a>";
 }
else { // Se usuário ainda não clicou no botão de enviar, mostra o formulário na página:
?>
<form name="form1" action="pagina01.php?valor=enviado" method="POST">
 Digite seu nome:
 <input type="text" name="frm_nome"><br>
 Digite seu sobrenome:
 <input type="text" name="frm_sobrenome"><br>
 <input type="submit" value="Enviar">
</form>
<?php
 }
?>

Neste exemplo, preencherei os formulário com meus dados e clicarei em Enviar:

Sessões em PHP - formulário de envio

E agora o código do arquivo de destino, pagina02.php:

<?php
// retomando a sessão criada:
 session_start();
// ecoando os dados gravados na sessão:
 echo "Os dados recebidos foram:<br><br>";
 echo "Nome: " . $_SESSION['nome'] . "<br>";
 echo "Sobrenome: " . $_SESSION['sobrenome'];
?>

Neste exemplo, usamos o array associativo $_REQUEST para verificar se o usuário enviou o formulário com os dados, lendo o valor da variável valor (se ela tiver sido criada), que é enviada como parâmetro da action do formulário.

Se a variável não existir, o formulário é apresentado ao usuário para preenchimento e envio.

Ao clicar no botão enviar, é criada uma sessão e duas variáveis de sessão são definida: nome e sobrenome, as quais são recuperadas ao acessar a página 02, clicando-se no link exibido.

Abaixo o resultado obtido após enviar o formulário:

Sessions em PHP - resultado

Encerrando a sessão

Podemos encerrar a sessão aberta com a função session_destroy(). Esta função elimina todos os dados registrados na sessão atual.

Sintaxe:

bool session_destroy();

Retorno da função:

  • TRUE se a sessão é iniciada com sucesso.
  • FALSE se a sessão falha em iniciar.

Vamos usar variáveis de sessão para criar um CRUD em PHP com sistema de login a partir das próximas lições.

 

O post Trabalhando com sessões em PHP e variável $_SESSION apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> https://www.bosontreinamentos.com.br/php-programming/trabalhando-com-sessoes-em-php-e-variavel-_session/feed/ 3 Constantes em PHP https://www.bosontreinamentos.com.br/php-programming/constantes-em-php/ https://www.bosontreinamentos.com.br/php-programming/constantes-em-php/?noamp=mobile#respond Wed, 07 Mar 2018 17:06:45 +0000 http://www.bosontreinamentos.com.br/?p=11531 Constantes em PHP Uma Constante é um valor que pode ser armazenado sob um nome, de forma parecida com uma variável, porém com uma diferença fundamental: esse valor não pode ser alterado após a constante ser definida e atribuída. Desta forma, o valor armazenado pode ser utilizado no script sempre que a constante for empregada, sem o risco de ter esse valor alterado inadvertidamente. Uma constante é muito útil para armazenar valores que nunca devem ser alterados, como constantes matemáticas (Pi, por exemplo) e strings de conexão a bancos de dados, entre outros. O escopo de uma constante é global. Criamos constantes nomeadas em PHP com o uso da função define(). Sintaxe: define(nome_constante, valor_constante[, ignora_caso]); Onde: nome_constante é o nome que queremos dar à constante valor_constante é o valor que será armazenado na constante. OS tipos de dados aceitos são integer, string, float e boolean, ou ainda o valor NULL. No PHP também são aceitos arrays. ignora_caso é um flag que ativa ou desativa a verificação de maiúsculos e minúsculos no nome da constante. O nome da constante não se inicia com o caractere $, de forma diferente das variáveis. O valor padrão para [ignora-caso] é FALSE, ou seja, o caso não [...]

O post Constantes em PHP apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> Constantes em PHP

Uma Constante é um valor que pode ser armazenado sob um nome, de forma parecida com uma variável, porém com uma diferença fundamental: esse valor não pode ser alterado após a constante ser definida e atribuída.

Desta forma, o valor armazenado pode ser utilizado no script sempre que a constante for empregada, sem o risco de ter esse valor alterado inadvertidamente.

Uma constante é muito útil para armazenar valores que nunca devem ser alterados, como constantes matemáticas (Pi, por exemplo) e strings de conexão a bancos de dados, entre outros. O escopo de uma constante é global.

Criamos constantes nomeadas em PHP com o uso da função define().

Sintaxe:

define(nome_constante, valor_constante[, ignora_caso]);

Onde:

  • nome_constante é o nome que queremos dar à constante
  • valor_constante é o valor que será armazenado na constante. OS tipos de dados aceitos são integer, string, float e boolean, ou ainda o valor NULL. No PHP também são aceitos arrays.
  • ignora_caso é um flag que ativa ou desativa a verificação de maiúsculos e minúsculos no nome da constante.

O nome da constante não se inicia com o caractere $, de forma diferente das variáveis.

O valor padrão para [ignora-caso] é FALSE, ou seja, o caso não é ignorado – maiúsculas e minúsculas no nome da constante são diferenciadas.
Alterando seu valor para TRUE não será feita diferenciação entre maiúsculas e minúsculas no nome da constante.

Exemplo:

<?php
 define("constante1", "Bóson");
 define("constante2", "Próton", TRUE);
 define("constante3", 35);
 echo constante1."<br>";
 echo Constante1."<br>";
 echo constante2."<br>";
 echo CONSTANTE2."<br>";
 echo constante3."<br>";
?>

Note que é gerado um erro ao tentar mostrar o conteúdo da constante 1 quando ela é referenciada como Constante1, com o primeiro caractere em maiúscula. Já a constante2, mesmo em maiúsculas, não gera esse erro, pois o parâmetro ignora_caso foi definido como TRUE para ela:

Erro em constantes de nome diferente no PHP

Após uma constante ser definida, seu valor não pode ser alterado durante a execução do script. Qualquer tentativa de escrever um valor diferente em uma constante já definida resultará em erro na execução do script, como é possível constatar acrescentando as seguintes instruções ao script anterior:

constante3 = 20;
echo constante3."<br>";

Será gerado o erro a seguir, mostrando que a atribuição (=) não é possível a uma constante após ter sido criada:

Erro em atribuição de constantes no PHP

Erro ao tentar atribuir valor a uma constante no PHP. Clique na imagem para ampliá-la.

Constantes e Arrays

Também podemos criar uma constante do tipo array, a partir do PHP 7. Veja abaixo um exemplo:

define('LINGUAGENS', array('C','Java','PHP','Haskell'));
echo LINGUAGENS[1]; // Saída: "Java"

Próximo: Operadores aritméticos e de atribuição de variáveis em PHP

 

O post Constantes em PHP apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> https://www.bosontreinamentos.com.br/php-programming/constantes-em-php/feed/ 0 Elementos, Tags e Atributos em HTML https://www.bosontreinamentos.com.br/html/elementos-tags-e-atributos-em-html/ https://www.bosontreinamentos.com.br/html/elementos-tags-e-atributos-em-html/?noamp=mobile#comments Sat, 01 Oct 2016 16:41:15 +0000 http://www.bosontreinamentos.com.br/?p=8264 Tags, Elementos e Atributos em HTML Neste tutorial vamos abordar o conceito de Elementos em HTML, assim como introduzir as tags e seus atributos em HTML. Tags Tags são símbolos codificados que separam uma parte de conteúdo da outra, além de informar ao navegador com qual tipo de conteúdo ele está lidando. Os navegadores Web interpretam as tags dentro do documento html e exibem a página de acordo com os tipos utilizados. Em HTML as tags são envolvidas pelos símbolos < e > para distingui-las do texto comum do documento. Por exemplo, temos a seguir uma tag típica que determina o título de uma página, o qual aparece na barra de título do navegador: <title> Em HTML as tags não são case-sensitive, ou seja, não existe a diferenciação entre letras maiúsculas e minúsculas. Porém, é recomendável que se siga um estilo comum ao escrever tags em um documento, para efeitos de clareza de código, como por exemplo sempre escrever as tags em letras minúsculas – que é o padrão que adoto nestes tutoriais. A maioria das tags vem em pares: uma tag inicia um item de conteúdo da página (tag de início), e outra tag marca o fim desse conteúdo [...]

O post Elementos, Tags e Atributos em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> Tags, Elementos e Atributos em HTML

Neste tutorial vamos abordar o conceito de Elementos em HTML, assim como introduzir as tags e seus atributos em HTML.

Tags

Tags são símbolos codificados que separam uma parte de conteúdo da outra, além de informar ao navegador com qual tipo de conteúdo ele está lidando.

Os navegadores Web interpretam as tags dentro do documento html e exibem a página de acordo com os tipos utilizados.

Em HTML as tags são envolvidas pelos símbolos < e > para distingui-las do texto comum do documento. Por exemplo, temos a seguir uma tag típica que determina o título de uma página, o qual aparece na barra de título do navegador:

<title>

Em HTML as tags não são case-sensitive, ou seja, não existe a diferenciação entre letras maiúsculas e minúsculas. Porém, é recomendável que se siga um estilo comum ao escrever tags em um documento, para efeitos de clareza de código, como por exemplo sempre escrever as tags em letras minúsculas – que é o padrão que adoto nestes tutoriais.

A maioria das tags vem em pares: uma tag inicia um item de conteúdo da página (tag de início), e outra tag marca o fim desse conteúdo (tag de fechamento). No exemplo anterior, a tag de fechamento é a seguinte:

</title>

O caractere / define a tag de fechamento. Desta forma, poderíamos definir o título de uma página web assim:

<title>Bóson Treinamentos em Tecnologia</title>

Elementos

O conjunto apresentado na seção anterior compõe um Elemento, que é o bloco básico de construção de documentos html.

Um elemento é composto pelas tags de início e fim, mais seu conteúdo, que é o texto contido entre as tags.

Alguns elementos não necessitam da tag de fechamento, e não possuem conteúdo, como por exemplo a tag <br>, que marca uma quebra de linha em um documento. Esse elemento também pode ser representado como <br />, sendo essa representação opcional atualmente. Damos a esse tipo de elemento o nome de Elemento Vazio.

Atributos

A tag de início de um elemento html pode possuir atributos que fornecem mais informações sobre o elemento, como propriedades específicas ou formatação a ser aplicada sobre ele.

Um atributo consiste em um nome de atributo seguido de um valor de atributo, ligados por um sinal de igual (=), como no exemplo:

<th class="cabeçalho">Produto</th>

Neste exemplo a tag <th>, que define um cabeçalho de uma tabela, possui um atributo class cujo valor é igual a “cabeçalho“, o que permite a aplicação de estilos de formatação diferenciados a esse elemento.

O valor de um atributo deve, preferencialmente, ser declarado entre aspas, mesmo que alguns atributos não o exijam.

Um elemento pode ter mais de um atributo, ou pode simplesmente não usar atributo algum.

A partir do próximo tutorial vamos iniciar o estudo dos elementos html individuais, incluindo seus principais atributos.

O post Elementos, Tags e Atributos em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

]]> https://www.bosontreinamentos.com.br/html/elementos-tags-e-atributos-em-html/feed/ 4