HTML - ALGUMAS TAGS

TAGS ÚTEIS

1. <meter>

O HTML 5 introduziu uma série de tags semânticas para diferentes ocasiões. Ocasiões bem específicas. Existe, por exemplo, uma tag para quando você precisa expressar uma medida em uma página da web, dentro de um determinado limite.

<meter> foi criada para aquele momento em que você precisa especificar um espaço em disco, uma nota de crítica, o resultado de uma prova, qualquer valor que faça parte de um escopo.

Os atributos mais comuns são value, min e max. O primeiro indica a medida propriamente dita, enquanto os outros servem para marcar os limites. Suponhamos que você queira indicar o espaço ocupado de 300GB de um disco rígido de 500GB, você escreveria da seguinte forma:

<meter value="300" min="0" max="500">300GB de 500GB</meter>

“Mas não é muita complicação para escrever algo que eu sempre fiz?”, você pode estar se perguntando. Em navegadores com suporte a esta tag, o resultado será exibido visualmente:

Pense agora em gráficos, dados dinâmicos e jQuery e você começará a vislumbrar a utilidade de <meter>…

2. <progress>

Se você entendeu a utilidade do <meter>, pode ter pensado: “eu poderia fazer uma barra de progresso com isso…”. Na verdade, existe uma tag especificamente criada para essa função!

Chega de gambiarras, Javascripts complicados, loadings em Flash ou GIFs animados. Com o HTML 5, você pode simplesmente usar a tag <progress> e ser feliz.

Ela possui dois atributos apenas: value (que marca o estado atual do progresso) e max (que indica a meta a ser alcançada). Então, para especificar o progresso de uma tarefa que esta na metade do caminho, você pode escrever da seguinte forma:

<progress value=”50″ max=”100″>50%</progress>

O resultado visual é similar ao do <meter>, exceto que a barra é animada, para indicar uma progressão.

Perceba que, em ambos os casos, o texto dentro do elemento é completamente ignorado por navegadores com suporte às tags. Convém inserir apenas como uma alternativa não-visual da informação para navegadores mais antigos.

3. <kbd> e <samp>

Ao contrário das duas tags anteriores, esse par aqui não gera nenhum efeito visual nem tampouco foram criadas com o HTML 5. Na verdade, elas são bem antigas e são renderizadas pelo navegador como o bom e velho <code>.

A grande vantagem de <kbd> e <samp> é sua especificidade. A primeira é utilizada para representar entrada de dados do usuário, geralmente via teclado. A segunda representa uma amostra da saída de dados de um programa ou sistema computacional.

Específico demais? Se você utiliza <code> com frequência, mas deseja um <code> “diferente” sem ter que usar uma classe e sem ligar para a semântica, experimente estas alternativas e declare seus estilos no CSS.

Exemplos:

<kbd>Essa linha é uma entrada de dados</kbd>
<samp>Essa linha é uma saída de dados</samp>

4. <small>

Eu sei o que você está pensando agora: “<small> é deprecated, ninguém usa mais desde que o CSS passou a definir o tamanho das fontes dos elementos”. Tirando a parte do deprecated, você está até certo. Mas isso foi antes do HTML 5.

Com o advento do HTML 5, o <small> deixou de ser aquela tag sem graça que apenas reduzia o tamanho da fonte para ganhar um valor semântico.

Agora, a tag simboliza elementos que normalmente seriam escritos em letra miúda fora da web, como avisos, regras, restrições legais, direitos de uso etc.

Vamos dar uma olhada como funciona:

<small>Copyright©2014</small>

5. <optgroup>

Imagine uma longa lista de opções de um <select>, mas longa mesmo. Tão longa que o bom-senso recomenda dividi-la em seções. Como fazer? Entra em cena o <optgroup>.

Com esta tag é possível criar divisões dentro de um menu de opções, facilitando o trabalho do usuário de encontrar a escolha certa.

Vamos dar uma olhada como funciona:

<select id=”filmes” name=”filmes”>
<optgroup label=”Terror”>
<option value=”1″>O Exorcista</option>
<option value=”2″>A Bruxa de Blair</option>
<option value=”3″>Atividade Paranormal</option>
</optgroup>
<optgroup label=”Comédia”>
<option value=”4″>Se Beber, Não Case</option>
<option value=”5″>Todo Mundo em Pânico</option>
<option value=”6″>Curtindo a Vida Adoidado</option>
</optgroup>
<optgroup label=”Drama”>
<option value=”7″>Crepúsculo</option>
<option value=”8″>Amistad</option>
<option value=”9″>Patch Adams</option>
</optgroup>
</select>

Visualmente, o resultado, sem nenhum estilo aplicado, seria esse:

6. <acronym> e <abbr>

Uma das tags mais úteis e uma das menos utilizadas do velho HTML, o <acronym> é ao mesmo tempo semântico e visual. Ela serve para explicar um termo, acrônimo ou abreviatura que pode não ser do conhecimento do usuário. Na prática, funciona como o valor title quando você passa o mouse por cima do elemento.

No HTML 5, o <acronym> não é mais suportado e foi substituído pelo <abbr>, que cumpre rigorosamente a mesma função.

Veja um exemplo:

<acronym title=”Search Engine Optimization – Otimização para Mecanismos de Busca”>SEO</acronym>

7. <ins> e <del>

Se você trabalha com edição e revisão de texto e não conhece ainda estas duas tags, eu acho que acabei de salvar seu dia e talvez seu emprego.

A tag  <ins> serve para marcar o texto que foi inserido em um determinado conteúdo desde sua versão anterior. Visualmente, o novo conteúdo é exibido como sublinhado, mas você pode alterar isso à vontade com folhas de estilo.

Já a tag <des> é seu exato oposto e serve para marcar o texto que foi ou deve ser deletado de um determinado conteúdo desde a última versão. Visualmente, o conteúdo aparece riscado, mas você pode alterar isso à vontade com folhas de estilo.

Veja um exemplo:

<del>Eu manjo muito de HTML</del> <ins>Meu conhecimento de HTML está sempre crescendo</ins>.

8. <wbr>

Com a web responsiva onde você não faz a menor ideia onde o navegador vai quebrar suas linhas quando o usuário estiver lendo, é sempre bom ter o mínimo de controle possível.

Para dar esse controle e sugerir ao navegador onde uma quebra de linha pode acontecer, existe a tag <wbr>. É perfeita para palavras muito longas, onde uma quebra arbitrária poderia prejudicar a compreensão ou mesmo gerar palavras indesejadas.

Perceba que não é o mesmo que um <br />, onde a quebra de linha é obrigatória. Trata-se de uma orientação ao navegador para, caso seja necessário quebrar uma linha por perto, que seja quebrada onde a tag se encontra.

Vejamos um exemplo:

<p>Use a função getElements<wbr>ByTagName() para recuperar os elementos</p>

9.<address>

Semanticamente falando, esta tag adiciona as informações de contato do autor de uma determinada página ou artigo. Se a tag <address> está contida dentro de <article>, então, a informação representa o autor daquele artigo em específico. Caso contrário, representa o autor do documento como um todo.

Visualmente falando, o conteúdo costuma ser exibido em itálico, com a separação de uma linha antes e outra depois, mas tudo isso pode ser ajustado com CSS.

Esta tag está aí desde 1993 e ganhou um reforço com o advento das marcações do HTML 5. Desde aquela época, costuma-se confundir seu uso e aplicar a tag para marcar endereços físicos. Isso é errado. Informações de contato, nesse caso, referem-se a nome, e-mail, site ou outra forma de contato, via web, com o autor daquele segmento. Se nenhum outro meio estiver disponível (o que seria extremamente raro em pleno século XXI), o endereço físico pode ser utilizado.

Vejamos um bom exemplo:

<address>
Esse artigo é de autoria de:<br />
<a href=”mailto:redacao@codigofonte.com.br”>Redação Código Fonte</a>
</address>

10. <cite> e <q>

Quem trabalha com conteúdo textual, já conhece a tag <blockquote>, para encapsular citações no texto, geralmente renderizadas com uma tabulação recuada e uma fonte diferente.

Mas existem outros métodos para inserir citações, inclusive, mais adequados para citações curtas.

No HTML 5, nós temos o <q> para especificar uma citação. Visualmente, não há recuos e a informação é exibida inline, com o navegador gerando as aspas de abertura e fechamento para você.

Você poderia escrever do lado quem é o autor da citação, mas semanticamente é mais adequado envolver esse dado com <cite>, de forma que o navegador também consiga identificar essa informação. O conteúdo é gerado em itálico, a menos que seja especificado o contrário na folha de estilo.
Vamos juntar tudo agora e ver como fica:<q>Um país se faz com homens e livros. <cite>Monteiro Lobato</cite>.</q>Conclusão

Acredite ou não, estas são apenas uma amostra das tags disponíveis na especificação do HTML e que são pouco utilizadas. Mantenha-se sempre atualizado e você ainda poderá descobrir algumas que serão essenciais para seu próximo projeto.

OUTRAS TAGS

<!– –>

Cria um comentário

<html> </html>

Envolve todo um documento html

<head> </head>

Envolve o cabeçalho de um documento html

<meta >

Fornece informações gerais sobre o documento

<style> </style>

Informações de estilo

<script> </script>

Linguagem script

<noscript> </noscript>

Conteúdo alternativo para quando a linguagem script não for suportada

<title> </title>

O título do documento

<body> </body>

Envolve o corpo (texto e tags) do documento html

• bgcolor – Cor de fundo #RRGGBB
• background – Imagem como plano de fundo
• text – Cor do texto principal
• link – Cor dos links existentes na página
• vlink – Cor do link já visitado
• alink – Cor do link que foi ativado
• marginheight – Elimina a margem esquerda apenas no Netscape
• marginwidth – Elimina a margem no topo da página apenas no Netscape
• topmargin – Elimina a margem no topo da página apenas no Internet Explorer
• leftmargin – Elimina a margem esquerda apenas no Internet Explorer

Cabeçalhos

<hn> </hn>

Cabeçalho nível n para n de 1 a 6

Parágrafos

<p> </p>

Um simples páragrafo

• align – Alinhamento do parágrafo: left, right, center e justify

Links

<a> </a>

Cria um link e inclui atributos em comum

• href – O URL do documento que será vinculado a este. Para e-mail: mailto e link externo: http
• name – O nome da âncora
• target – Identifica a janela ou local em que o link deverá ser aberto: blank, self, top, parent
• rel – Define os tipos de link que avançam
• rev – Define os tipos de link que revertem a ação
• acesskey – Atribui uma tecla de atalho para este elemento
• shape – Para uso com formas de objeto
• coords – Para uso com formas de objeto
• tabindex – Determina a ordem das guias
• onclick – É um evento JavaScript
• onmouseover – É um evento JavaScript
• onmouseout – É um evento JavaScript

Listas

<ol> </ol>

Uma lista ordenada

• start – Define a partir de qual número a listagem começa
• type – Tipos de caracteres ordenados: A, a, I, i, 1

<ul> </ul>

Uma lista não ordenada

• type – Tipos de caracteres não ordenados: disk, square, circle

<li> </li>

Um item da lista

• value – Numeração individual do item da lista
• type – Tipos de caracteres ordenados: A, a, I, i e 1 para listagem ordenada e disk, square e circle para não ordenada

<menu> </menu>

Um menu com uma lista de itens

<dir> </dir>

Uma listagem de diretórios

<dl> </dl>

Uma lista de definições ou glossário

<dt> </dt>

Marca o texto especificado como um termo de definição de um glossário

<dd> </dd>

Especifica o texto referente a um termo criado pela tag <dt> dentro de uma lista de definição

Formatação de caracteres

<em> </em>

Maior ênfase em itálico

<strong> </strong>

Maior ênfase em negrito

<code> </code>

Amostra de código

<kbd> </kbd>

Texto a ser digitado

<var> </var>

Uma variável ou espaço reservado para um outro valor

<samp> </samp>

Texto de amostra

<dfn> </dfn>

Aplica um formatação no texto definido como termo de um glossário

<cite> </cite>

Uma citação

<b> </b>

Texto em negrito

<i> </i>

Texto em itálico

<u> </u>

Texto sublinhado

<tt> </tt>

Fonte monoespaçada (texto semelhante à maquina de escrever)

<pre> </pre>

Texto pré-formatado

<strike> </strike>

Texto riscado

<s> </s>

Texto tachado



Texto subscrito



Texto sobrescrito

<big> </big>

Texto em fonte maior do que o padrão

<small> </small>

Texto em fonte menor do que o padrão

<blink> </blink>

Texto piscando somente no Nestcape

<marquee> </marquee>

Texto animado no Internet Explorer

Outros elementos

<hr>

Uma régua horizontal

• size – Espessura da linha em pixels
• width – Largura da linha em pixels ou porcentagem
• align – Alinhamento da linha em center, left, right
• color – Cor da linha em #RRGGBB
• noshade – Linha sólida

<br>

Uma quebra de linha

<center> </center>

Centralizar

<div> </div>

Conteúdo

• align – Alinhamento: left, center e right

<blockquote> </blockquote>

Texto com mais margem

<address> </address>

Assinaturas ou informações gerais sobre o autor de um documento

<font> </font>

Alterna tamanho , cor e tipo de fonte exibida

• size – O tamanho da fonte varia de 1 a 7
• color – A cor da fonte #RRGGBB
• face – O tipo da fonte

<basefonte>

Define o tamanho padrão para a fonte na página atual

• size – O tamanho da fonte varia de 1 a 7

Imagens

<img>

Insere uma imagem in-line no documento e inclui atributos comuns

• usemap – Um mapa de imagens do lado cliente
• src – O URL da imagem
• alt – Uma string de texto que será exibida em navegadores que não possam suportar imagens
• align – Determina o alinhamento de uma determinada imagem: top, middle, bottom, left e right
• height – É a altura sugerida em pixels
• width – É a extensão sugerida em pixels
• vspace – O espaço entre a imagem e o texto acima e abaixo dela
• hspace – O espaço entre a imagem e o texto à esquerda e à direita dela
• border – Largura da borda

Frames

<frameset> </frameset>

Define um frameset

• rows – Número de linhas no frame
• cols – Número de colunas no frame
• frameborder – Borda do frame
• framespacing – Espaçamento
• onload – É um evento intrínseco
• onunload – É um evento intrínseco

<frame> </frame>

Define um frameset

• name – É o nome do frame-alvo
• src – Chama a fonte de conteúdo do frame
• frameborder – Determina a borda do frame
• marginheight – Determina a largura das margens
• noresize – Determina a capacidade de redimensionar frames
• scrolling – Determina a capacidade de rolagem dentro dos frames: auto, yes e no

<iframe> </iframe>

Define um frame in-line

<noframes> </noframes>

Alterna o conteúdo quando os frames não são suportados

Tabelas

<table> </table>

Cria uma tabela

• background – Imagem de plano de fundo
• bgcolor – Cor de plano de fundo
• border – Largura da borda em pixels
• cols – Número de colunas
• cellpadding – Espaçamento nas células
• cellspacing – Espaçamento entre as células
• width – Largura da tabela
• align – Alinhamento da tabela: left, center, right
• bordercolor – Cor na borda da tabela

<caption> </caption>

A legenda para a tabela

<tr> </tr>

Uma linha na tabela

• align – O alinhamento horizontal do conteúdo das células dentro dessa linha com os valores possíveis left, right, center, justify e char
• bgcolor – Cor de fundo
• valign – o alinhamento vertical do conteúdo das células dentro dessa linha com os valores possíveis top, middle, bottom e baseline
• background – Figura como plano de fundo

<th> </th>

Um cabeçalho de célula da tabela

• align – Alinhamento horizontal
• valign – Alinhamento vertical
• bgcolor – Cor de plano de fundo
• rowspan – O número de linhas pelo qual essa célula se expandirá
• colspan – O número de colunas pelo qual essa célula se expandirá
• nowrap – Desliga o enquadramento de texto em uma célula

<td> </td>

Define uma célula de dados da tabela

• align – Alinhamento horizontal
• valign – Alinhamento vertical
• bgcolor – Cor de plano de fundo
• rowspan – O número de linhas pelo qual essa célula se expandirá
• colspan – O número de colunas pelo qual essa célula se expandirá
• nowrap – Desliga o enquadramento de texto em uma célula
• width – Largura da célula
• height – Altura da célula

Formulários

<form> </form>

Define um formulário

• action – Responsável por determinar o exato local para onde as informações coletadas no formulário deverão ser enviadas
• method – Método de empacotamento dos dados do formulário: get, post e enctype="multipart/form-data"
• name – Nome do objeto

<input>

Caixa de texto

• type – Tipo de dado: text, file, radio, checkbox, hidden, password, submit, reset, button, image
• name – Identificação do campo
• size – Largura
• maxlength – Número máximo de caracteres permitidos
• value – Texto que aparece dentro da caixa ou nome do botão
• checked value – Valor assumido quando este campo for selecionado

<textarea> </textarea>

Permite criar elementos de entrada com características de texto

• rows – Tamanho da linha da caixa de texto
• cols – Tamanho da coluna da caixa de texto
• name – Identificação do campo
• wrap – Quebra de linha da caixa de texto: off, virtual, physical

<select> </select>

Seleção

• name – Identificador

<option> </option>

Opção

• value – Valor do campo

C # NÚMERO FELIZ

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {          
            List<int> lista = new List<int>();
            for (int i = 0; i < 100; i++)
                if (VerificarNumero(i)) lista.Add(i);
            var recebe = GerarListaNumeros();

            lista.ForEach(i => Console.WriteLine("Feliz {0}", i));
            Console.ReadKey();

        }      

        public static List<int> GerarListaNumeros()
        {
            List<int> lista = new List<int>();
            for (int i = 0; i < 100; i++)
                if (VerificarNumero(i)) lista.Add(i);
            return lista;
        }

        public static bool VerificarNumero(int numero)
        {
            bool numeroFeliz = false;
            List<int> listaDigitos = new List<int>();
            listaDigitos = DividirDigitos(numero);
            for (int i = 0; i < 20 && !numeroFeliz; i++)
            {
                int sumaActual = CalcularQuadrados(listaDigitos);
                if (sumaActual != 1)
                    listaDigitos = DividirDigitos(sumaActual);
                else numeroFeliz = true;
            }
            return numeroFeliz;
        }
       
        public static List<int> DividirDigitos(int digito)
        {
            List<int> digitos = new List<int>();
            while (digito != 0)
            {
                digitos.Add(digito % 10);
                digito = digito / 10;
            }
            return digitos;
        }
       
        public static int CalcularQuadrados(List<int> listaDigitos)
        {
            int resultado = 0;
            foreach (int elem in listaDigitos) resultado += elem * elem;
            return resultado;
        }
    }
}

C # NÚMERO SORTUDO

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;


namespace ConsoleApplication2
{
    class Program
    {
        public class NumeroSortudo
        {
            public string GetNumeroSortudo(int range)
            {
                return ImprimirResultado(FindNumeroSortudo(range));
            }

            public string GetsortudoPrimoNumeros(int range)
            {
                bool[] numeros = FindNumeroSortudo(range);

                for (int i = 0; i < numeros.Length; i++)
                {
                    if (numeros[i]) continue;
                    numeros[i] = !NumeroPrimo(i + 1);
                }

                return ImprimirResultado(numeros);
            }

            private bool[] FindNumeroSortudo(int range)
            {
                if (range < 1) range = 0;
                bool[] numeros = new bool[range];
                int sortudoContar = 2;

                while (sortudoContar < numeros.Length)
                {
                    sortudoContar = NumeroFora(numeros, sortudoContar);
                }

                return numeros;
            }

            private int NumeroFora(bool[] numeros, int sortudoContar)
            {
                int contador = 0;

                for (int i = 0; i < numeros.Length; i++)
                {
                    if (numeros[i]) continue;
                    contador++;

                    if (contador == sortudoContar)
                    {
                        numeros[i] = true;
                        contador = 0;
                    }
                }

                return GetsortudoContar(numeros, sortudoContar);
            }

            private int GetsortudoContar(bool[] numeros, int pular)
            {
                if (pular >= numeros.Length) return numeros.Length;

                for (int i = pular; i < numeros.Length; i++)
                {
                    if (!numeros[i]) return i + 1;
                }

                return numeros.Length;
            }

            private static bool NumeroPrimo(int numero)
            {
                if (numero == 1) return false;

                for (short i = 3; i <= Math.Sqrt(numero); i += 2)
                {
                    if (numero % i == 0) return false;
                }

                return true;
            }

            private static string ImprimirResultado(bool[] numeros)
            {
                string resultado = string.Empty;

                for (int i = 0; i < numeros.Length; i++)
                {
                    if (!numeros[i]) resultado = resultado + (i + 1) + ",";
                }

                if (!string.IsNullOrEmpty(resultado)) resultado = resultado.Substring(0, resultado.Length - 1);

                return resultado;
            }
        }


        static void Main(string[] args)
        {
            // arrange
            NumeroSortudo sortudo = new NumeroSortudo();
            IDictionary<int, string> CasoTeste = new Dictionary<int, string>();
            for (int i = 0; i < 100; i++)
            {
                CasoTeste.Add(i, Convert.ToString(i));              
            }
            // act
            foreach (var testCase in CasoTeste)
            {
                string resultado = sortudo.GetNumeroSortudo(testCase.Key);

                // assert
                Console.WriteLine("{0}", resultado);
               
            }
            Console.ReadKey();
        }
       
    }
}