Visitantes

Powered By Blogger

Pesquisar neste Blog

Mostrando postagens com marcador HTML. Mostrar todas as postagens
Mostrando postagens com marcador HTML. Mostrar todas as postagens

sábado, 16 de setembro de 2023

HTML Dicas

FREE HTML Cheatsheets 👇🏻

1. Stanford
➩ web.stanford.edu/group/csp/cs21…

2. Geeksforgeeks
➩ geeksforgeeks.org/html-cheat-she…

3. Softwaretestinghelp
➩ softwaretestinghelp.com/html-cheat-she…

4. Digital
➩ digital.com/tools/html-che…

5. Freecodecamp
➩ freecodecamp.org/news/html-chea…

6. Htmlcheatsheet
➩ htmlcheatsheet.com

7. Hostinger
➩ hostinger.in/tutorials/html…

8. Interviewbit
➩ interviewbit.com/html-cheat-she…

9. Html . co
➩ html.com/wp-con...](htt…

10. Websitesetup
➩ websitesetup.org/html5-cheat-sh…

11. Htmlreference
➩ htmlreference.io

12. Overapi
➩ overapi.com/html

13. devhints
➩ devhints.io/html

14. Cheatography
➩ cheatography.com/tag/html/

sexta-feira, 22 de outubro de 2021

HTML (Front-end)

HTML (Front-end)

HTML é uma abreviatura de Hypertext Markup Language, é uma linguagem de programação para a criação de documentos eletrônicos chamados de páginas apresentadas na web. Cada página tem várias conexões com hiperlinks ou links para outras páginas.

Todas as páginas da Internet foram criadas com o uso de alguma forma de HTML. É um requisito essencial para os navegadores aprenderem a exibir textos ou realizar o carregamento de diferentes elementos.

Recursos

  • Html é uma linguagem de programação com uma curva de aprendizado fácil e de fácil usabilidade.
  • A linguagem também é independente de plataforma.
  • Html facilita a adição de vídeos, imagens e conteúdo de áudio a uma página da web.
  • O idioma também pode ser usado para adicionar conteúdo de hipertexto a seções de texto.
  • Html é uma linguagem de marcação e muito menos complexa do que outras linguagens.

Vantagens

  • HTML é fácil de aprender e usar – a maioria dos desenvolvedores considera o HTML uma das linguagens de programação mais fáceis de aprender. Muitos desenvolvedores aprendem HTML antes de qualquer outra linguagem e é parte integrante de qualquer curso de desenvolvimento. O HTML é fácil de aprender, pois usa tags simples e não há problema com a distinção entre maiúsculas e minúsculas.

  • HTML é gratuito – HTML é uma linguagem livre e os desenvolvedores não precisam comprar nenhum software para começar a usá-lo. O idioma não exige que os usuários trabalhem com nenhum plug-in externo e software para acessar os principais recursos. É por isso que muitas empresas em todo o mundo confiam no HTML para cumprir os requisitos de design de seus sites. É possível ter sites inteiros construídos em HTML.

  • HTML oferece suporte para vários navegadores – HTML é compatível com os navegadores mais amplamente usados. Portanto, se um site foi escrito em HTML, não há nenhuma preocupação relacionada ao suporte do navegador. Os sites HTML podem ser otimizados para os diferentes navegadores de onde podem ser carregados.

Desvantagens

  • Não é suficiente para páginas dinâmicas – Usar HTML básico não é suficiente para facilitar muitos dos recursos que os sites modernos oferecem a seus usuários. Os desenvolvedores podem achar difícil adicionar conteúdo dinâmico a páginas da web com HTML. Eles são obrigados a aprender outras linguagens, como JavaScript, PHP ou ASP.

  • Limitada para exibição de conteúdo – HTML também não é a escolha ideal para mostrar o conteúdo exibido de maneira atraente. Essa é uma limitação da qual a maioria dos desenvolvedores está ciente. Eles precisam contar com CSS ou Cascading Style Sheets para tornar o conteúdo da página HTML mais atraente aos olhos. Os designers e desenvolvedores da Web são obrigados a criar e manter dois conjuntos de arquivos diferentes em alguns casos.


terça-feira, 9 de junho de 2020

A Jornada do HTML para HTML6: O que esperar?


A Jornada do HTML para HTML6: O que esperar?

https://www.ashokkuikel.com/a-journey-into-html-to-html6-what-features-you-will-get-in-html6/

HTML5 vs HTML6

HTML5 vs HTML6

HTML6 is Coming – Here is a Sneak Peek

HTML6 is Coming – Here is a Sneak Peek




HTML6 - Estrutura Básica

HTML6 - Estrutura Básica
<!DOCTYPE html xmlns:xhtml="http://www.w3.org/1999/xhtml">
<html:html>
    <html:head>
        <html:title>A Look Into HTML6</html:title>
        <html:meta type="title" value="Page Title">
        <html:meta type="description" value="HTML example with namespaces">
        <html:link src="css/mainfile.css" title="Styles" type="text/css">
        <html:link src="js/mainfile.js" title="Script" type="text/javascript">
    </html:head>
    <html:body>
        <header>
            <logo>
                <html:media type="image" src="images/xyz.png">
            </logo>
            <nav>
               <html:a href="/img1">a1</a>
               <html:a href="/img2">a2</a>
             </nav>
        </header>
        <content>
            <article>
                <h1>Heading of main article</h1>
                <h2>Sub-heading of main article</h2>
                <p>[...]</p>
                <p>[...]</p>
            </article>
            <article>
                <h1>The concept of HTML6</h1>
                <h2>Understanding the basics</h2>
                <p>[...]</p>
               </article>
        </content>
        <footer>
            <copyright>This site is &copy; to Anonymous 2014</copyright>
        </footer>
    </html:body>
</html:html>

Está chegando o HTML6 - O que há de novo no HTML6



Está chegando o HTML6 - O que há de novo no HTML6

HTML, a linguagem da web, é uma das tecnologias da web mais conhecidas. O HTML tem sido usado continuamente para construir a Internet desde o momento em que foi introduzido.

Embora muitas novas técnicas tenham tornado o processo de criação de sites mais simples e eficiente, o HTML sempre esteve presente.

O HTML5 saiu em 2014; foi mais um passo em direção à padronização da linguagem de marcação de hipertexto. A especificação HTML revisada em outubro de 2014 era razoável.

As pessoas agora estão esperando por outra atualização e adivinhem? O HTML6 está a caminho.

WHATWG - O corpo que regula as especificações HTML mudará as especificações HTML continuamente ao longo do tempo, não sendo amplas de uma só vez (como dizem as fontes).

Neste artigo, veremos o que provavelmente mudaria no HTML6 e o ​​que há de novo no HTML6.
Aperte os cintos, pois vamos mergulhar no conteúdo principal.

Índice

Tags Expressas
Suporte a Modais Nativos
Liberdade para redimensionar imagem
Bibliotecas dedicadas em HTML 6
Anotações para imagens e vídeos
Aprimoramento de autenticação
Menus personalizados em HTML6
Câmera Integrada HTML6
Good Microformats
Aplicativos de página única sem JavaScript
Conclusão
Tags expressas
Como o nome sugere, essas tags são expressas. Marcas como o logotipo da sua página da Web podem ser usadas.
Além disso, tags como,, estariam disponíveis.

Suporte a modais nativos em HTML 6
O elemento de diálogo está a caminho com HTML6. Esse elemento é considerado equivalente às janelas modais ativadas por JavaScript.

Os elementos de caixa de diálogo já estão padronizados, mas apenas alguns navegadores, como o Chrome e o Samsung, têm suporte total. Não se preocupe, ele estará funcionando em todos os navegadores em breve.

Esse elemento, em seu formato padrão, só mostraria o cursor sobre o local em que foi colocado.

Para usar uma interface modal mais comum, você pode abrir o método modal por meio de JavaScript.

No formulário padrão, o elemento cria um plano de fundo cinza com conteúdo não interativo abaixo dele.

Um atributo de método pode ser usado nos formulários dentro do elemento de diálogo. Isso enviaria o valor e passaria o valor de volta para o próprio objeto de diálogo.

No geral, esse elemento de diálogo é benéfico em uma pequena interação com o usuário e na melhoria da interface do usuário.

Você pode alternar o atributo aberto para abri-lo e fechá-lo no formulário HTML padrão.


  Caixa de diálogo criada com HTML 6

Liberdade para redimensionar imagem
Os especialistas acreditam que está a caminho uma atualização que permitiria que os navegadores redimensionassem a imagem para obter a melhor experiência de visualização.

Os navegadores enfrentam dificuldades para mostrar o melhor tamanho de imagem em relação ao tamanho do dispositivo e da janela.

As tags Src e IMG não são muito poderosas para lidar com esse problema. Uma nova tag ** ** pode estar disponível.

Essa tag pode facilitar o navegador a escolher entre mais de uma imagem para mostrar a melhor visualização.

Bibliotecas dedicadas em HTML 6
A introdução de bibliotecas selecionáveis ​​em HTML6 será um passo para melhorar a produtividade de web designers e usuários.

Anotações para imagens e vídeos
Seria ótimo se pudéssemos anotar imagens e vídeos em HTML. O HTML5 nos oferece a capacidade de interpretar palavras, frases e parágrafos, mas não imagens e vídeos.

Muitas organizações no campo ofereceram soluções, e parece que o WHATWG consideraria pelo menos algumas delas.

Vamos torcer; estaremos anotando imagens e vídeos em HTML em breve.

Aprimoramento de autenticação
Embora o HTML5 não seja ruim em termos de segurança. Navegadores e tecnologias da web também fornecem proteção razoável. Sem dúvida, há muito mais que poderia ser feito no domínio da autenticação e segurança.

As chaves podem ser armazenadas fora do local; isso impediria o acesso de pessoas indesejadas e reforçaria a autenticação. Usando chaves incorporadas em vez de cookies, melhorando a assinatura digital, etc.

Pessoas e grupos de reflexão têm muitas soluções a oferecer, tudo depende do WHATWG aceitá-las ou rejeitá-las.

Menus personalizados em HTML6
As tags UI e OL são benéficas, mas não se encaixam bem em todas as necessidades. Uma tag ou tag de menu que poderia lidar melhor com elementos interativos é a necessidade da hora.

O menu pode lidar com elementos da lista acionados por botões dentro do menu.

 O menu pode aprimorar os recursos da lista em HTML e funcionar bem, mesmo como uma lista usual.

Câmera Integrada HTML6
O HTML6 nos permitiria usar a câmera e a mídia em nosso dispositivo para o melhor. Poderíamos controlar a câmera, seus efeitos, modos, imagens panorâmicas, HDR e outras coisas.

Poderíamos usar qualquer mídia e redirecioná-la. Há muitas coisas que poderiam ser melhoradas com a câmera e o HTML6.

Good Microformats
Muitas vezes, precisamos definir nossas informações gerais na internet.
Informações gerais could ser público como nosso número de telefone, nome, endereço etc. Os microformatos são os padrões capazes de definir dados gerais.

Os microformatos podem aprimorar os recursos de um designer e reduzir os esforços do mecanismo de pesquisa necessários para deduzir nossas informações públicas.

Aplicativos de página única sem Javascript
Bobby Mozumder, editor-chefe da FutureClaw Magazine sugere:

vinculando elementos âncora a JSON / XML, pontos de extremidade da API, fazendo com que o navegador carregue os dados internamente em uma nova estrutura de dados e o navegador substitua os elementos DOM por quaisquer dados carregados conforme necessário. Os dados iniciais (assim como as respostas de erro padrão) podem estar em acessórios de cabeçalho, que podem ser substituídos posteriormente, se desejado.

Segundo ele, esse é o padrão de design da web para aplicativos de página única que melhoraria a capacidade de resposta e o tempo de carregamento, pois não seria necessário carregar o javascript.

Conclusão
Nada é perfeito nem HTML; portanto, há muitas coisas que poderiam ser feitas com a especificação HTML para torná-lo melhor.

A padronização de algumas normas úteis deve ser feita para aprimorar os poderes do HTML. Pequenas mudanças já começaram a ser implementadas.

Considerar o que os especialistas em tecnologia têm a dizer e também ouvir o público em geral pode fornecer uma idéia.

Aprimorar o suporte a Bluetooth, transferência de arquivos p2p, proteção contra malware, integração de armazenamento em nuvem, são algumas coisas que devem ser consideradas na próxima versão do HTML.

Isto é para o futuro. No entanto, já existem algumas atualizações que foram introduzidas e algumas provavelmente serão anunciadas em breve, enquanto outras são meras previsões.

Espero que este artigo ajude você a ter uma idéia do HTML6. Obrigado por ler e compartilhá-lo com outros geeks da tecnologia e nerds em HTML.

texto traduzido inglês-portugues de https://morioh.com/p/6d422fc49bd2


A Look Into HTML6 – What Is It and What It Has to Offer?

HTML6 - O que ele pode oferecer





A Look Into HTML6 – What Is It and What It Has to Offer?
https://www.script-tutorials.com/a-look-into-html6-what-is-it-and-what-it-has-to-offer/


Introdução ao HTML6



Introdução ao HTML6

Depois de receber respostas surpreendentes de suas versões já lançadas, o HTML sendo uma linguagem fácil de desenvolvimento web, está pronto para atrair os desenvolvedores da web através de sua 6ª versão, o que certamente deixará sua marca no mercado. Desta vez, é iniciado o HTML6, que é montado de namespaces construídos no XML e no HTML padrão. A versão atual HTML6 é refletida como uma das alterações mais preferidas e populares quando comparada a outras versões mais antigas.

Se você quer ser um web designer experiente, é obrigatório aprender HTML6. A maioria dos temas e plugins avançados do WordPress funciona em HTML6. Você pode personalizar esses temas com habilidades básicas em HTML.

Um olhar sobre HTML5
A última versão HTML5 oferece aos desenvolvedores da Web um novo aspecto sobre como executar na expansão de aplicativos da Web de ordem máxima, aplicando elementos significativos como <header>, <menu>, <nav>, <Menuitem>, etc. Os desenvolvedores da Web também podem adquira poucos recursos interessantes do HTML5, como suporte a áudio e vídeo, armazenamento local offline e a capacidade de criar sites otimizados para dispositivos móveis. O HTML5 ainda permite que os desenvolvedores usem o recurso de tipo de tags como <link> e <script>, e também organizem o conteúdo em métodos melhores usando tags como <article>, <section>. Ainda assim, existem poucos desvios que precisam ser bem conectados para incentivar melhores resultados em projetos da web.

 O conceito de HTML6
O HTML6 é considerado como uma versão revisada do HTML, que envolve espaços de nome junto com a estrutura XML. A função vital dos namespaces é fornecer aos desenvolvedores o uso de tags como <logo></logo><toolbar> </toolbar> para alocar um logotipo na página da web. O desenvolvedor pode usar apenas <container> do que <div id = 'container'> e é aqui que o HTML6 é encontrado. O HTML6 incluirá 2 tipos de tags: tags únicas que contêm os atributos, mas sem conteúdo de texto; e tags duplas que podem ou não conter conteúdo de texto.

Vamos discutir mais sobre o HTML6 e o ​​método usado para expandir as soluções de sites de última geração.

Conheça as APIs HTML antes de acessar o HTML6 Web Development
Mencionamos aqui uma lista de atributos de tag que estão incluídos no HTML6 que terão namespace html, como <html: html>, <html: head>, <html: title>, <html: meta>, <html: link>, <html: a>, <html: media>, <html: body> e <html: button>.

Lista de 10 propostas para um HTML6 brilhante
1. Dimensionamento de imagens no navegador: o tamanho de pixel de uma foto varia de desktop a laptop e móvel. Um procedimento HTML6 aprimorado poderia recomendar uma altura ou largura aspirada para uma imagem específica, e o servidor poderia contribuir com a resolução mais favorável.

2. Idiomas conectáveis: o HTML6 está chegando com linguagens conectáveis ​​mais vigorosas que incluem mais elasticidade e seleções de design para os desenvolvedores da web. Isso pode ser implementado por todos os navegadores quando houver uma execução firme de código aberto.

3. Mais controle sobre o objeto de vídeo: o HTML6 pode oferecer mais controle sobre como as estruturas de vídeo são espalhadas nas páginas da web. Esta versão compacta um retângulo, juntamente com uma série de estruturas de um vídeo, e fornece ao desenvolvedor mais controle sobre um caminho de texto com legendas, anotações etc.

4. Pré-processadores conectáveis: os desenvolvedores da Web agora podem utilizar pré-processadores conectáveis ​​para a tradução de "idiomas", por exemplo, CoffeeScript em JavaScript. O CoffeeScript é bastante semelhante ao JavaScript; é considerado mais uma sintaxe alt do que um idioma distinto.

5. Incorporação de câmeras: Com a ajuda do HTML6, a câmera da web do celular está descobrindo uma excelente maneira de inserir uma captura de foto ou vídeo em variedades. O dispositivo poderia fornecer um gerenciamento aprimorado da câmera e também a taxa de captura.

6. Bibliotecas Garantidas: A programação JavaScript foi transfigurada pelo jQuery, entre bibliotecas padrão. Se um grande número de web designers endossar uma biblioteca definida, ela poderá ser dispersa pelos navegadores, e o novo HTML6 padronizado deverá se sair bem. Mais tempo será economizado, restaurando a versão em cache do jQuery 1.9 adicionalmente.
 
7. Autenticação reforçada: com o acesso ao HTML6, o navegador pode oferecer muito na abordagem da autenticação rápida e reforçada, dada a dificuldade de desenvolver hardware confiável. No lugar de cookies, o navegador pode propor tokens de assinatura junto com chaves entrincheiradas.

8. Micro-formatos mais fortes: O W3C (World Wide Web Consortium) vem descobrindo imensamente micro-formatos mais fortes para marcar pequenos pedaços de dados. Os desenvolvedores também podem utilizar marcações mais abrangentes para horários, datas, locais, bibliografias, itens de venda e todas as variedades de dados padrão.

9. Melhor anotação: Uma estrutura padrão pode incluir anotações anexadas às frases, palavras ou parágrafos. Uma versão elegante do HTML6 também pode permitir anotações nas imagens ou nos momentos capturados nos vídeos. Poucos benefícios são acessíveis na regulação da API para que navegadores e sites sirvam as anotações essenciais no mesmo método.

10. Acesso protegido a informações de contato: À medida que o HTML6 faz uma entrada, as interfaces podem propor um controle suave para permitir que os usuários forneçam acesso automático ao código exibido em poucos domínios, mas não em outros domínios.

tradução português do texto inglês em https://w3lessons.info/introduction-to-html6/