{"id":22468069,"url":"https://github.com/isaacalves7/front-end","last_synced_at":"2025-08-02T08:31:51.260Z","repository":{"id":61150899,"uuid":"298365083","full_name":"IsaacAlves7/front-end","owner":"IsaacAlves7","description":"🧑🏽‍🎨 It's a repository of Front-end development and design.","archived":false,"fork":false,"pushed_at":"2024-12-01T20:06:09.000Z","size":2172,"stargazers_count":6,"open_issues_count":12,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-01T21:19:59.305Z","etag":null,"topics":["adobe-creative-cloud","ajax","bem-methodology","blender","bom","bootstrap","cgi","css","dom","figma","front-end","html","ionic","javascript","jquery","sass","web-design"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IsaacAlves7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-24T18:37:25.000Z","updated_at":"2024-12-01T20:06:12.000Z","dependencies_parsed_at":"2023-11-14T18:43:03.771Z","dependency_job_id":"d980aa36-7a55-41c8-8c8f-95bdb575e279","html_url":"https://github.com/IsaacAlves7/front-end","commit_stats":null,"previous_names":["isaacalves7/web"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsaacAlves7%2Ffront-end","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsaacAlves7%2Ffront-end/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsaacAlves7%2Ffront-end/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsaacAlves7%2Ffront-end/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IsaacAlves7","download_url":"https://codeload.github.com/IsaacAlves7/front-end/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228454004,"owners_count":17922584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe-creative-cloud","ajax","bem-methodology","blender","bom","bootstrap","cgi","css","dom","figma","front-end","html","ionic","javascript","jquery","sass","web-design"],"created_at":"2024-12-06T11:14:58.733Z","updated_at":"2025-08-02T08:31:51.236Z","avatar_url":"https://github.com/IsaacAlves7.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://github.com/IsaacAlves7/web\"\u003e\u003cimg src=\"https://www.webinfonex.com/data/assets/uploads/service/ser_5.jpg\"\u003e\u003c/a\u003e\n\n# It's a repository of Web Development 🌐\n\u003e 🌐 **Preparação\u003c/code\u003e: Para este conteúdo, o aluno deverá dispor de um computador com acesso à internet, um web browser com suporte a HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera etc.), um editor de texto (VSCode etc.) e uma plataforma de hospedagem (gratuita ou paga).\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"https://images.fineartamerica.com/images/artworkimages/medium/3/keep-calm-and-let-the-web-developer-handle-it-funny-gift-ideas-transparent.png\" height=\"177\"\u003e\u003c/div\u003e\n\n- https://www.frontendmentor.io/\n- https://daily.dev/\n- https://getcssscan.com/css-box-shadow-examples\n- https://whirl.netlify.app/\n- https://flexboxfroggy.com/\n- https://courses.cs.washington.edu/courses/cse154/flexboxducky/\n- http://www.flexboxdefense.com/\n- https://cssgridgarden.com/\n- https://gridcritters.com/\n- https://caniuse.com/\n- https://www.magicpattern.design/tools/blob-generator\n- https://meyerweb.com/eric/tools/css/reset/\n- https://HTML5boilerplate.com/\n- https://www.color-hex.com/color-palette/22942\n- https://www.greatfrontend.com/pt-BR\n- https://echarts.apache.org/en/index.HTML\n\nQuando falamos sobre website, podemos notar que este termo se trata da junção de duas palavras em inglês: “web”, que significa rede e faz referência a rede mundial de computadores, e “site”, que quer dizer lugar. Nesse sentido, um website ou site é um local que pode ser acessado na internet, por meio de uma URL, e possui um conjunto de páginas programadas em alguma linguagem. \n\nPara entendermos melhor sobre esse assunto, vamos a um exemplo: quando você digita em seu navegador de internet o endereço blog.betrybe.com para acessar o blog da Trybe, o navegador vai buscar onde este site está localizado na internet. Em seguida, será feita uma requisição ao servidor. \n\nNesse servidor estão armazenados todos os arquivos de texto, imagem e estilo que compõem a página web. Então, o servidor devolverá este conjunto de documentos ao navegador para que ele possa exibir o conteúdo como você vê em sua tela. \n\nOs websites podem apresentar variadas formas e conteúdos. Entre algumas das opções, estão: as lojas virtuais, como Mercado Livre e Amazon, onde a compra e venda de produtos pode ser feita; os sites institucionais e portfólios, usados por empresas e pessoas para se apresentarem e serem encontradas por clientes; e os blogs, como este que você lê. \n\nAlém disso, os sites também podem ser classificados em estáticos ou dinâmicos. Os sites estáticos são desenvolvidos utilizando, de modo geral, HTML, CSS e JavaScript. Seu conteúdo é mais simples e não há interação com uma base de dados. \n\nJá os sites dinâmicos, além de usufruírem do HTML, CSS e JavaScript, também utilizam linguagens de programação mais robustas, como PHP. Estes sites possuem funcionalidades conectadas a um banco de dados. Dessa forma, cada página acessada pode trazer dados específicos. \n\n# 🎨 Web Design\n\u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Canva-prototype-blue?style=flat\u0026logo=Canva\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Figma-prototype-tomato?style=flat\u0026logo=Figma\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Moqups-templates-blue?style=flat\u0026logo=Moqups\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/GitHub-boilerplate-gold?style=flat\u0026logo=GitHub\u0026logoColor=white\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/\"\u003e\u003cimg src=\"https://em-content.zobj.net/source/microsoft-teams/363/artist-palette_1f3a8.png\" height=\"77\" align=\"right\"\u003e\u003c/a\u003e\n\nCom o **Web Design** você precisa observar a importância da interface para o desenvolvimento de websites, evolução das tecnologias utilizadas na construção de páginas web ricas (web 1.0, web 2.0, web 3.0 e web 4.0), evolução das interfaces (mudanças estéticas, funcionais e estruturais).\n\nPortanto, você necessita compreender a importância da elaboração de interfaces ricas para a construção de um website, visando a melhor experiência de navegação e usabilidade para o usuário final, conhecendo algumas tecnologias utilizadas no passado para a construção de sites online. A partir dessa visão, observar antigas tendências de mercado, assim como enxergar novas tendências na elaboração de interfaces.\n\nPaleta de cores:\n\n- https://paletadecolores.online/pt/magenta/\n- https://simpleicons.org/\n- https://colorhunt.co/\n- https://coolors.co/\n- https://colors.muz.li/\n- https://www.toptal.com/designers/colourcode/\n- https://lospec.com/palette-list\n- https://mycolor.space/\n- https://www.pantone.com/articles/color-palettes\n- https://atmos.style/color-generator\n- https://github.com/EmilHvitfeldt/r-color-palettes\n- https://www.color-hex.com/color-palettes/\n- https://visme.co/blog/website-color-schemes/\n- https://colorpalettes.com/\n- https://colorpalettes.net/\n- https://oklch.com/#0.7,0.1505,252,100\n\nGradientes:\n\n- https://www.grabient.com/\n- http://gradientsguru.com/\n- https://www.eggradients.com/\n- https://uigradients.com/#Zinc\n- https://webgradients.com/\n- https://cssgradient.io/\n\nIcons:\n\n- https://lucide.dev/\n- https://iconscout.com/\n- https://www.svgrepo.com/\n- https://freesvgicons.com/\n\nFontes:\n\n- https://www.dafont.com/pt/\n- https://www.1001freefonts.com/pt/\n- https://fonts.google.com/\n\n# 🌐 Web Development\n\u003cimg src=\"https://em-content.zobj.net/source/microsoft-teams/363/globe-with-meridians_1f310.png\" height=\"77\" align=\"right\"\u003e\n\nBasicamente, desenvolvimento web significa codificar páginas para a internet. No entanto, essa tarefa vai além da utilização de HTML e CSS, as ferramentas básicas para a criação de uma página estática — que apresenta informações que só podem ser modificadas com a edição do código fonte.\n\nAo contrário, as páginas em um site podem ser dinâmicas. Isso significa que o conteúdo exibido pode ser alterado sem a interferência no código fonte. Para que isso seja possível, as partes dinâmicas do site ficam armazenadas em um banco de dados, que é acessado sempre que for necessário recuperar esse conteúdo.\n\nEssa característica permite o desenvolvimento de aplicações complexas, que utilizam regras de negócios, APIs — Application Programming Interface — e muito mais. Portanto, existe uma divisão nas atividades voltadas ao desenvolvimento para web, a codificação do lado cliente (front-end) e a do lado do servidor (back-end).\n\n\u003e Exemplo de API com, a estrutura mais usada atualmente para Aplicações Web e Mobile, REST API também chamado de **RESTful API**.\n\nAplicações Web são o número cada vez maior de sites na Web, isto é, eles imitam aplicações de desktop ao invés dos documentos tradicionais e\nestático de links de textos e imagens que compõem a maioria da Web. Como exemplo, temos os processadores onlines de texto, ferramentas de edição de foto, sites de mapeamento etc. Altamente movidos com JavaScript, eles levaram o HTML4 à beira do limite de suas capacidades. O HTML5 especifica novas APIs (Interface de Programação de Aplicações) para DOM (Modelo de Objeto de Documento), que é uma convenção multiplataforma e independente de linguagem para representação e interação com objetos e documentos HTML, XHTML e XResponsive.\n\nEssas novas APIs ajudam a arrastar e soltar objetos enviados pelo servidor, tais como, desenho, vídeos e similares.\n\nEssas novas interfaces que as páginas HTML expõem ao JavaScript via objetos na DOM tornam mais fácil escrever as aplicações,\nutilizando padrões altamente especificados, ao invés de apenas artimanhas mal-documentadas.\n\nAinda mais importante é a necessidade de um padrão aberto livre (para utilizar e para implementar) que possa competir com padrões proprietários como\nAdobe Flash ou Microsoft Silverlight. Independentemente do que você acha dessas tecnologias ou empresas, acreditamos que a Web seja uma plataforma vital à sociedade, comércio e comunicações para estar nas mãos de um fabricante.\n\nHá milhões de páginas Web já em uso por aí, e é imperativo que elas continuem a ser reproduzidas. Então, o HTML5 é, em sua maioria, um derivativo do HTML4 que continua a definir como os navegadores devem lidar com marcações antigas como `\u003cfont\u003e`, `\u003ccenter\u003e` e outras novas, pois milhões de páginas web as utilizam.\n\n# 🎨 Interface\nO termo **interface** pode dispor de vários significados dependendo da área na qual ela é estudada. Na área da Tecnologia da Informação, interface significa a **possibilidade de comunicação entre dois sistemas que não poderiam se comunicar naturalmente sem alguma ajuda externa**.\n\nO IHC é o estudo da interação entre pessoas e computadores. É uma matéria interdisciplinar que relaciona a ciência da computação, artes, design, ergonomia, psicologia, sociologia, semiótica, linguística, e áreas afins. A interação entre humanos e máquinas acontece através da interface do utilizador, formada por software e hardware.\n\n\u003e A interação humano-computador é uma disciplina preocupada com o design, a avaliação e a implementação de sistemas computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor deles.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/61624336/194796066-6256d836-86ae-4249-a45b-898e85537a16.jpg\" title=\"Interface gráfica\" height=\"77\" align=\"right\"\u003e\n\nPor exemplo, um usuário de um site de e-commerce que está à procura de determinado produto, como um sapato, deverá de alguma forma passar a informação do produto que ele está pensando em adquirir para o sistema, como o tamanho do calçado, o tipo de solado, o material utilizado para a sua confecção, entre outros.\n\nA forma pela qual a aplicação recebe essa informação do usuário pode ser considerada como a sua interface. A finalidade de uma interface é facilitar a interação de uma pessoa com um sistema ou até mesmo a comunicação entre diferentes sistemas.\n\n\u003e **Comentário\u003c/code\u003e: Para o caso específico da comunicação entre diferentes sistemas, existem vários recursos que podem ser utilizados. Alguns dos mais empregados atualmente são os **web services**. Para garantir a correta operação na interligação de sistemas, são utilizados outros recursos além do HTTP, como SOAP, REST e XResponsive-RPC. \n\nSegundo Benyon (2011), A interface para um sistema interativo são todas as peças do sistema com as quais as pessoas têm contato, física, perceptiva ou conceitualmente:\n\n- **Fisicamente\u003c/code\u003e: Fisicamente, podemos interagir com um dispositivo apertando botões ou movimentando alavancas, e o dispositivo interativo pode responder fornecendo retorno através da pressão do botão ou alavanca;\n- **Perceptivamente\u003c/code\u003e: Perceptivamente, o dispositivo exibe coisas em uma tela que podemos ver, ou emite sons que podemos ouvir;\n- **Conceitualmente\u003c/code\u003e: Conceitualmente, interagimos com um dispositivo tentando concluir o que ele faz e o que deveríamos estar fazendo. O dispositivo fornece mensagens e outros indicadores feitos para nos ajudar nesse sentido.\n\n\u003e Uma interface deve oferecer meios para que um usuário possa passar instruções de forma simples, como também deverá informar ao usuário algum retorno, que pode ser uma informação, uma imagem, um aviso sonoro, uma animação ou até um filme.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/61624336/194799532-9908b16c-6394-47d8-a92e-7c563321bc5f.jpg\" title=\"Interface gráfica nos smartphones\" height=\"177\" align=\"right\"\u003e\n\nPodemos observar, atualmente, uma enorme variedade de interfaces, nos mais variados dispositivos que utilizamos em nosso cotidiano, tais como smartphones, controles remotos, geladeiras, aparelhos de micro-ondas e joysticks utilizados em videogames.\n\nO projeto de construção de um sistema é muito mais complexo do que apenas a criação de uma interface. Toda a interação entre o homem e o sistema deve ser levada em consideração desde a sua concepção. Na área de Tecnologia da Informação, o design de interfaces refere-se à criação da interface do usuário para softwares, sites ou aplicativos. Trata-se de programar o visual da aplicação, visando sempre a facilitar a usabilidade e melhorar a experiência do usuário final.\n\n# 📙 HTML5 - Hypertext Makup Language 5\n\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg\" height=\"77\" align=\"right\"/\u003e\n\nA linguagem de formatação de documentos com a capacidade de links de hipertexto (termo que remete a um texto ao qual se agregam outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso ocorre através de referências específicas, no meio digital, denominadas hiperlinks, ou simplesmente links) e que tornou-se o formato básico para publicação na web.\n\nIn 1990, the **HTML** (\u003ci\u003eHyperText Markup Language\u003c/i\u003e) has been created by Tim Bernes-Lee. A mais nova versão do HTML, chamada de versão 5, representa uma evolução dos \"padrões\" para definição de páginas para internet, representando uma nova linguagem de marcação, com elementos, atributos e comportamentos, além de um conjunto maior de tecnologias que permitem o desenvolvimento de aplicações quando associadas a outras linguagens.\n\n**HTML Timeline**\n1. HTML é tornado público - 1989\n2. HTML - 1991\n3. Primeira especificação - 1992\n4. HTML 2.0 é publicado e é criado o JavaScript (JS)- 1995\n5. Inclusão de novos elementos e a apresentação do CSS 1 - 1996\n6. HTML 3.2 - 1997\n7. HTML 4 é publicado - 1998\n8. HTML 4.01 - 1999\n9. Norma ISO para o HTML e o XHTML 1 - 2000\n10. HTML5 é publicado - 2008\n11. 11W3C parou de trabalhar no XHTML e a desviou recursos para HTML5 - 2009\n12. HTML5 - 2014\n13. HTML5.1 - 2016 e 2017 (2nd ed.)\n14. HTML5.2 - 2017/(Atualmente)\n\nEm 1998, a W3C decidiu que não continuaria a evoluir o HTML. O futuro da programação para páginas de internet era o XResponsive. Então o HTML foi congelado na versão 4.01 e uma especificação foi lançada com nome de XHTML, que era uma versão do HTML baseada no XResponsive, exigindo regras de sintaxe como atributos com aspas, algumas tags com fechamento, enquanto outras eram autocontidas.\n\nUm pequeno grupo, dos criadores do navegador Opera, entretanto, não estava convencido que o XResponsive era o futuro para todos os autores web. Este grupo começou a desenvolver um trabalho separado, para criar uma nova forma de utilização dos antigos códigos HTML, principalmente ligado ao uso de formulários, sem deixar de atender às determinações básicas do XResponsive. Aquela especificação eventualmente se tornou Web Forms 2.0 e, subsequentemente, foi incorporado na especificação HTML5.\n\nEm 2006, a W3C percebeu que talvez tivesse sido otimista demais na esperança de que o mundo se mudasse para o XResponsive. Essas ideias foram implementadas e outras rejeitadas independentemente de qual fosse a fonte e quem ela representasse, ou até mesmo onde elas foram inicialmente debatidas.\n\n\u003cimg src=\"https://www.w3schools.com/HTML/img_sem_elements.gif\" align=\"right\" height=\"177\"/\u003e\n\nO **HTML Semântico** serve para organizar e estruturar os elementos do documento em partes específicas para não correrem soltos pelo body de maneira desorganizado e ilegível.\n\nAté a versão 4 do HTML as divs eram as principais semânticas de estruturamento da página, com a chegada do HTML5 surgiram novas TAGs com funções das divs que eram criadas para estruturar os elementos contidos no documento, o que facilitou muito no estruturamento da página. Nota-se que dá pra comparar a estrutura de uma página web com layout de uma **folha de jornal**, pois ambas contém cabeçalhos, rodapés, artigos e seções.\n\n- O elemento `\u003csection\u003e` (seção) representa uma seção genérica dentro de um documento. Esse elemento pode conter um agrupamento de textos com vários capítulos, seções numeradas etc. No exemplo a seguir, é apresentado um artigo contendo um assunto principal e, dentro desse assunto, várias seções com assuntos distintos.\n\n![Sem Título-1](https://user-images.githubusercontent.com/61624336/105736626-c63f8100-5f13-11eb-81b8-f6c3e341ea4b.jpg)\n\n```HTML\n\n```\n\n- O elemento `\u003cheader\u003e` (cabeçalho) utilizado também para delimitar o título da seção, trabalha em conjunto com os elementos anteriores, no entanto, não é obrigatório.\n\n```HTML\n\n```\n\n![Sem Título-1](https://user-images.githubusercontent.com/61624336/105736972-28988180-5f14-11eb-83c6-bbceb25bf757.jpg)\n\n- `\u003cnav\u003e` (navegação) este elemento é a seção onde ficam as informações de de página. Geralmente nesta seção são colocadas as ligações (links internos) para a própria página ou ligações externas para outras páginas de sites externos.\n\n```HTML\n\n```\n\n![Sem Título-1](https://user-images.githubusercontent.com/61624336/105737577-defc6680-5f14-11eb-8363-9b10b09089a6.jpg)\n\n- `\u003carticle\u003e` (artigo) este elemento é um artigo independente dentro de um texto, este elemento pode estar ou não dentro de um elemento `\u003csection\u003e`. Imagine um jornal com as seções de esportes, fofocas, etc. Dentro de cada seção existem vários artigos sobre textos específicos, por exemplo, na seção de esportes pode ter um artigo falando sobre o time A, outro sobre time B e o outro sobre o time C. Um artigo pode conter um elemento `\u003cheader\u003e` que é o título e um elemento `\u003cfooter\u003e` que é o rodapé do elemento.\n\n```HTML\n\n```\n\n![Sem Título-1](https://user-images.githubusercontent.com/61624336/105737941-461a1b00-5f15-11eb-8528-d9bf452796ab.jpg)\n\n- `\u003cfooter\u003e` (rodapé) este elemento é um que contém basicamente as informações sobre o conteúdo da seção, como, por exemplo, o autor, links relacionados etc.\n\n```HTML\n\n```\n\n![Sem Título-1](https://user-images.githubusercontent.com/61624336/105738329-add06600-5f15-11eb-8cac-403ab42f3e3a.jpg)\n\n- `\u003caside\u003e` (de lado) neste elemento estão contidas as informações que não estão relacionadas diretamente com o texto. Por exemplo: comerciais pagos, links promocionais etc.\n\n```HTML\n\n```\n\n![Sem Título-1](https://user-images.githubusercontent.com/61624336/105738607-f720b580-5f15-11eb-9440-76725a31f908.jpg)\n\n## [HTML5] TAGs essenciais\nÉ necessário entender o que é **TAG** (linguagens de marcação), o “comando” do HTML. TAGs são estruturas de linguagem de marcação contendo instruções, tendo uma marca de início e outra de fim para que o navegador possa renderizar uma página. O elemento que compõe a estrutura do documento HTML5 é iniciado com o símbolo menor ( `\u003c` ) e terminado com o símbolo maior ( `\u003e` ), como por exemplo: `\u003cmeta\u003e`, `\u003ch1\u003e`, `\u003cimg\u003e` etc. \n\nOu seja, todo elemento HTML é chamado de **tag** que é definida pelos os sinais de abertura **\u003ctag aberta\u003e** e de fechamento **\u003c/tag fechada\u003e**, há exceções de Tags que não precisam de um fechamento somente a Tag de abertura, como é o caso do `\u003cmeta\u003e` e `\u003clink\u003e`.\n\nAlém disso, são divididas em categorias conforme a seguir:\n\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eMetadados\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eO elemento root\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eAgrupamento de conteúdo\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eSeções\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eScript\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eEdições\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eSemânticas de nível de texto\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eConteúdo incorporado\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eTabelas\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eFormulários\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-HTML-tags-de-tabelas\"\u003eInterativo\u003c/a\u003e\n\nUma TAG pode conter **atributos**, que são informações que alteram o comportamento da TAG. Os atributos podem ser divididos em atributos específicos para cada TAG e atributos globais que são comuns a todas as tags.\n\nAlém das TAGs, existem outros elementos que ajudam na construção de documentos HTML5, que são: o **CSS**, o **Javascript**.\n\n**Atributos** são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem **atributos globais** (que funcionam em todas as Tags) e **específicos** (que são direcionados para cada Tag, através de especificação).\n\nOs Atributos possuem **nome** e um **valor**. Existem Atributos que você vai usar sempre e existem outros que serão mais raros. Exemplo de atributo da tag `\u003clink\u003e`:\n\n```HTML\n\u003clink rel=\"stylesheet\" href=\"/assets/public/styles/css/style.css\"\u003e\n```\n\nComo pode ver o atributo `rel=\"\"` indica o valor da conexão, que no caso é `rel=\"stylesheet\"` que significa \"folha de estilo\" para reconhecer o arquivo CSS externo. O atributo `href=\"\"` significa o endereço dessa conexão, é importante que o endereço seja bem declarado para a conexão funcionar, caso contrário não irá funcionar.\n\nAtributos Específicos de uma TAG:\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cstrong\u003eAtributo\u003c/strong\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cstrong\u003eFunção do atributo\u003c/strong\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003erel=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica o relacionamento entre o documento atual e o documento linkado\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003esrc=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica a URL do arquivo de mídia\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003etype=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica o tipo do documento\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ealt=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eMostra o texto quando a aparência não renderiza\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003etarget=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica o modo de abrir o link em janela\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ewidth=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica a largura do elemento\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eheight=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica a altura do elemento\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ename=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica o nome do elemento\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003evalue=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica o valor do elemento\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\nAtributos Globais de uma TAG:\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cstrong\u003eAtributo\u003c/strong\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cstrong\u003eFunção do atributo\u003c/strong\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003etitle=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica a informação extra sobre o elemento, como um balãosinho de texto\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eclass=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica uma ou mais classes para um elemento ou varios elementos (referência de classe para o CSS)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eid=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eEspecifica uma unica id para um elemento (referência de id para o CSS)\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\n# 📘 CSS3 - Cascading Style Sheets 3\n\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg\" height=\"77\" align=\"right\"/\u003e\n\nO **CSS** (Cascading Style Sheets), é um \"Stylesheets\" (folha de estilo) composta por \"camadas\" e usado para definir a aparência de páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XResponsive, HTML e XHTML), criando assim as interfaces. O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.\n\nHá várias formas de inserir modificação no estilo com CSS. Com o CSS você pode especificar muitas propriedades de estilo para qualquer elemento HTML. Cada propriedade tem um nome e um valor, separados por dois pontos `:`. Cada declaração de propriedade é separada por um ponto e vírgula `;`.\n\nConforme W3C, Cascading Style Sheets (CSS) é um mecanismo simples para adicionar estilo (por exemplo, fontes, cores, espaçamento) nos documentos da Web. O \u003cstrong\u003eCSS\u003c/strong\u003e é um conjunto de comandos que alteram o comportamento dos elementos HTML 5 e, portanto, existem algumas formas de fazer isso, veja abaixo quais são e as suas sintaxes:\n\n**CSS interno\u003c/code\u003e: as formatações são definidas dentro do arquivo HTML. Exemplo de CSS interno:\n \n```HTML\n\u003cstyle\u003e * { margin: 0; padding: 0;} \u003c/style\u003e\n```\n \n**CSS externo\u003c/code\u003e: as formatações são definidas um arquivo CSS que é linkado ao arquivo HTML. Exemplo de CSS externo:\n \n```HTML\n\u003clink rel=\"stylesheet\" href=\"/assets/public/styles/css/style.css\"\u003e\n```\n \n**CSS inline\u003c/code\u003e: a definição do estilo é feita na mesma linha da TAG HTML a ser formatada. Neste método, o CSS é aplicado diretamente no elemento, utilizando o atributo \u003cstrong\u003estyle\u003c/strong\u003e. É caracterizado por possuir uma implementação mais simples, no entanto, este método dificulta a manutenção do código. Exemplo de CSS inline:\n \n```HTML\n\u003cp style=\"color:olive;font-size:19px;background-color:black\"\u003e\u003c/p\u003e\n```\n\nEstilo incorporado ou interno: Caracteriza-se por escrever o código CSS, utilizando o comando `\u003cstyle\u003e` do HTML. Esse método é superior ao anterior, pois **todas as regras CSS** estão localizadas no início do código HTML5. No entanto, essas regras só poderão ser utilizadas dentro deste documento, impedindo o compartilhamento e a reutilização das regras.\n\nExemplo de utilização:\n\n```HTML\n \u003chead\u003e\n \u003cstyle\u003e\n * {margin: 0; padding: 0; box-sizing: border-box;}\n body {width: 100%; height: 100vh;}\n \u003c/style\u003e\n \u003c/head\u003e\n```\n\nEstilo externo: As regras foram escritas em um arquivo com extensão **.css** e podem ser carregadas ao documento HTML5 de duas formas:\n\nUtilizando o elemento \u003clink\u003e no HTML\n\n```HTML\n\u003chead\u003e\n \u003clink rel=\"stylesheet\" href=\"default.css\"\u003e\n \u003clink rel=\"stylesheet\" href=\"green.css\" title=\"Green styles\"\u003e\n \u003clink rel=\"alternate stylesheet\" href=\"contrast.css\" title=\"High contrast\"\u003e\n \u003clink rel=\"alternate stylesheet\" href=\"big.css\" title=\"Big fonts\"\u003e\n \u003clink rel=\"alternate stylesheet\" href=\"wide.css\" title=\"Wide screen\"\u003e\n\u003c/head\u003e\n```\n\nUtilização do elemento `@import` no CSS permite **importar** regras de estilo dentro de outras regras de estilo. Esse método permite aplicar regras comuns a todos os documentos HTML.\n\n**Exemplo de utilização\u003c/code\u003e:\n\nDentro de um documento `.css` podemos aplicar nas primeiras linhas, a chamada de arquivos externos, para utilizar comandos já existentes.\n\n```css\n@import \"mystyle.css\";\n@import url(\"mystyle.css\");\n@import url(\"fineprint.css\") print; /* mídia específica para impressão */\n@import url(\"bluish.css\") projection, tv; /* mídia específica grandes mídias*/\n@import url(\"narrow.css\") handheld and (max-width: 400px); /* mídia específica mídias portáteis*/\n```\n\nO CSS nível 3 implementou o conceito de módulos, em que cada módulo é desenvolvido de forma independente, seguindo um cronograma próprio. A principal vantagem é independência na construção das novas funcionalidades. Os principais conceitos do CSS são divididas em categorias conforme a seguir:\n\n- \u003ca href=\"\"\u003eSeletores, Declarações, Propriedades e Valores\u003c/a\u003e\n- \u003ca href=\"https://github.com/IsaacAlves7/web#-css-box-model\"\u003eBox Model, padding e margin\u003c/a\u003e\n- \u003ca href=\"\"\u003eTexto, Background, Foreground e Variáveis\u003c/a\u003e\n- \u003ca href=\"\"\u003eClasses e IDs\u003c/a\u003e\n- \u003ca href=\"\"\u003eKeyframes e Animations\u003c/a\u003e\n- \u003ca href=\"\"\u003ePseudo-classes\u003c/a\u003e\n- \u003ca href=\"\"\u003ePseudo-elementos\u003c/a\u003e\n- \u003ca href=\"\"\u003eTransform e Transition\u003c/a\u003e\n- \u003ca href=\"\"\u003ePositions, Dimensions e Displays\u003c/a\u003e\n- \u003ca href=\"\"\u003eMedia Queries e Layouts Responsivos\u003c/a\u003e\n\n## [CSS] Box Model\n\u003cimg src=\"https://pressupinc.com/wp-content/uploads/2014/01/box-model.png\" height=\"277\" align=\"right\"\u003e\n\nWhen we are creating the layout of a website the browser represents each HTML element as a retangular box, this is the **box-model**. And with the CSS we can alterate the aparence of this box (width, height, background color, etc.). That box is compost for 4 areas: the content, the padding, the border and the margin.\n\n\u003col\u003e\n \u003cli\u003e\u003ccode\u003emargin\u003c/code\u003e - São os espaçamentos entre elementos (transparente).\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003eborder\u003c/code\u003e - A borda, onde circulam o padding e o conteúdo, dá para alterar a largura, cor e forma.\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003epadding\u003c/code\u003e - Espaçamento entre a borda e o conteúdo.\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003econtent\u003c/code\u003e - O conteúdo inserido no elemento HTML.\u003c/li\u003e\n\u003c/ol\u003e\n\nBesides that, the Box model have his positions:\n\n\u003cimg src=\"https://www.csssolid.com/images/box-model/css-box-model.png\" height=\"177\" align=\"right\"/\u003e\n\n\u003cul\u003e\n \u003cli\u003e\u003ccode\u003etop\u003c/code\u003e: Up position\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003eright\u003c/code\u003e: Right position\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003ebottom\u003c/code\u003e: Down position\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003eleft\u003c/code\u003e: Left position\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003e 📦 \u003ccode\u003eBox Model\u003c/code\u003e: ` top, right, down, left `\n\nSempre será referenciada por esta ordem: topo, direita, inferior e esquerda (top, right, bottom, left).\n\nExemplo:\n\n```css\nul {\n margin: 12px;\n padding: 12px;\n}\n```\n\nDessa forma, é possível inserir de uma vez os espaçamentos da ordem (top, right, bottom, left) de um modelo padrão de 12px para cada posição, porém não permite diferenciar e alterar uma posição da ordem, pois ambos foram solicitados para 12px. Outra forma, é inserir essa instrução passo a passo para a ordem (top, right, bottom, left) o que permite diferenciar o espaçamento de cada um, como desejado.\n\n```css\nul {\n margin: 12px 12px 12px 12px; /*top, right, bottom, left = 12px*/\n padding: 12px 0px 12px 12px; /*espaçamento direito entre a borda e o conteúdo = 0px; top, left, bottom = 12px*/\n}\n```\n\nOutra forma é inserir a propriedade do box model de acordo com suas posições, o que não é muito prático.\n\nExemplo:\n\n```css\nul {\n margin-top: 12px; /*topo da margem = 12px*/\n margin-right: 12px; /*direito da margem = 12px*/\n margin-bottom: 12px; /*abaixo da margem = 12px*/\n margin-left: 12px; /*esquedo da margem = 12px*/\n \n padding-top: 12px; /*espaçamento topo entre a borda e o conteúdo = 12px*/\n padding-right: 0px; /*espaçamento direito entre a borda e o conteúdo = 0px*/\n padding-bottom: 12px; /*espaçamento inferior entre a borda e o conteúdo = 12px*/\n padding-left: 12px; /*espaçamento esquerdo entre a borda e o conteúdo = 12px*/\n}\n```\n\n\u003e OBS: Perceberam a discrepância entre os dois métodos? E como é mais prático o primeiro.\n\n## [CSS3] Seletores, Declarações, Propriedades e Valores\nApós a criação do HTML a necessidade de formatar as páginas ficou evidente, assim, em 1996, foi criada a linguagem de estilo que conhecemos por **CSS**.\n\nA sintaxe é bem simples e pode ser explicada com a frase \"você cria regras de estilo para elementos ou grupos de elementos\".\n\nVamos usar um elemento HTML que vimos anteriormente, a âncora , para exemplificar.\n\nUma regra CSS é representada por um **seletor** ou um **grupo de seletores**, no nosso caso é o **a**, então dentro de um par de chaves adicionamos as \u003cstrong\u003edeclarações\u003c/strong\u003e, no exemplo abaixo estamos alterando cor e tamanho da fonte desse título, as **declarações** são formadas por uma propriedade e um valor.\u003c/p\u003e\n\nUma regra CSS é representada por:\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003ePropriedade:\u003c/strong\u003e Determina a modificação a ser feita.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSeletor:\u003c/strong\u003e É o alvo da regra (nome do comando) CSS.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eValor:\u003c/strong\u003e A alteração.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDeclaração:\u003c/strong\u003e É o conjunto de propriedades e valores.\u003c/li\u003e\n\u003c/ul\u003e\n\nExemplo:\n\n```css\na { \n color: #000;\n}\n```\n\n\u003cul\u003e\n \u003cli\u003e\u003ccode\u003ea\u003c/code\u003e = seletor\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003ecolor\u003c/code\u003e = propriedade\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003e#000\u003c/code\u003e = valor\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003e{color:#000;}\u003c/code\u003e = declaração\u003c/li\u003e\n\u003c/ul\u003e\n\nNo CSS, a seleção de elementos pode variar de uma forma simplificada até padrões contextuais ricos.\n\nOs tipos de seleção são muito importantes, pois a ordem deles alteram no resultado do processamento da página.\n\n**Agrupamento\u003c/code\u003e: O CSS permite agrupar declarações repetidas.\n\nExemplo:\n\n```css\nh1 { font-family: sans-serif }\nh2 { font-family: sans-serif }\nh3 { font-family: sans-serif }\n```\n\nÉ equivalente a:\n\n```css\nh1, h2, h3 {\nfont-family: sans-serif\n}\n```\n\u003e OBS: Todos os `h1`, todos os `h2` e todos os `h3`\n\n**Seletores descendentes\u003c/code\u003e: Um elemento pode estar contido dentro de outro elemento.\n\nExemplo:\n\n```HTML\n\u003cH1\u003eEste texto é \u003cEM\u003emuito\u003c/EM\u003e importante\u003c/H1\u003e\n```\n\n```css\nh1 { color: red } /* indica que todos os elementos h1 possuem a cor vermelha */\nem { color: red } /* indica que todos os elementos em possuem a cor vermelha */\nh1 em { color: blue } /* indica que os elementos em contidos em um elemento h1 possuem a cor azul */\n```\n\n**Seletores filhos\u003c/code\u003e: Um elemento filho é caraterizado quando os elementos são separados por “\u003e\".\n\n```css\ndiv ol \u003e li p {color: green }\n```\n\nEste exemplo, todos os elementos \u003cstrong\u003ep\u003c/strong\u003e serão de cor verde quando estiverem dentro de um elemento item `\u003cli\u003e`, filho de uma lista `\u003col\u003e` dentro de uma `\u003cdiv\u003e`.\n\t\nSeletores por prioridade: Um elemento por prioridade é caracterizado quando os elementos são separados por \"`+`\". Ou seja, o primeiro parágrafo que vem depois da div.\n\n```css\n div + p {\n color: red;\n }\n```\n\nSeletores por atributos: Especifica regras para os elementos que possuem determinado atributo.\n\nExemplo:\n\n```css\nspan[hello=\"Cleveland\"][goodbye=\"Columbus\"] { color: blue; }\n```\n\nA regra será aplicada a todos os elementos span que possuem o atributo `hello=\"Cleveland\"` e o atributo `goodbye=\"Columbus\"`.\n\n**Seletores por classes\u003c/code\u003e: Uma classe permite atribuir um conjunto de regras a um determinado elemento. É determinado por asterisco ponto (`*.`) ou simplesmente ponto (`.`).\n\nExemplo:\n\n```css\n.pastoral { color: green } /* todos os elementos com a classe~=pastoral */\n/*ou*/\n*.pastoral { color: green } /* todos os elementos com a classe~=pastoral */\n```\n\n**Seletores por ID\u003c/code\u003e: O atributo ID permite identificar um elemento único no documento HTML. Para selecionar este elemento basta utilizar o caracter “`#`” seguindo pelo nome do elemento.\n\nExemplo:\n\n```css\nh1#titulo1 { text-align: center } /* aplica a regra ao elemento h1 com o id=titulo */\n*.pastoral { color: green } /* todos os elementos com a classe~=pastoral */\n```\n\nNo exemplo anterior criamos uma regra que altera um elemento HTML diretamente, mas isso significa que todos os elementos \u003ca\u003e ficarão com aquela aparência, e normalmente temos sites mais complexos que precisam de várias regras diferentes para elementos iguais.\n\nPara ficar mais tangível vamos relembrar um pouco o site que começamos a fazer no módulo passado, ele tinha vários elementos header, mas não vamos querer que o header principal tenha a mesma formatação que o header de uma postagem, é aí que entram os IDs e Classes.\n\nO seletor que vimos no primeiro exemplo é um seletor de tipo, pois ele representa um elemento HTML, e com IDs e Classes podemos representar qualquer tipo de elemento mas há algumas diferenças entre eles:\n\n\u003cstrong\u003eID\u003c/strong\u003e: é representado pelo símbolo # (hash) seguido de um nome para esse ID. Só pode ser utilizado uma única vez!\n\n```css\n#id{\n }\n```\n\n\u003cstrong\u003eClasse\u003c/strong\u003e: a classe é representada de forma parecida do ID, mas é precedida por um ponto em vez do hash. Pode ser utilizado mais de uma vez!\n\n```css\n.class{\n }\n```\n\nE a diferença mais importante entre eles é a forma como devem ser usados: o ID só pode ser usado uma vez em uma página HTML enquanto a classe não tem restrições.\u003c/p\u003e\n\n## [CSS3] Pseudo-Classes\nE há um último detalhe nesse exemplo: a **pseudo-classe**. Elementos HTML sofrem alterações causadas pela interação do usuário, como mover o mouse por cima ou clicar nesse elemento. As pseudo-classes são bem parecidas com os eventos do JavaScript, porém não possuem o mesmo poder de manipular os elementos.\n \nSintaxe:\n\n```css\n seletor:pseudo-class { \n property: value;\n }\n```\n\nO `a:hover` do exemplo significa que a âncora também terá essa aparência quando o usuário passar o mouse por cima de um hyperlink.\u003c/p\u003e\n\nTipos de Pseudo-Classes:\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003e**Pseudo-classe**\u003c/td\u003e\n \u003ctd\u003e**Definição**\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:hover\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera o elemento por passar o mouse por cima.\u003c/td\u003e\n \u003c/tr\u003e \n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:active\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera o elemento por clica-lo.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:link\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os links não visitados.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:visited\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os links visitados.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:focus\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera o elemento `\u003cinput\u003e` que tem o foco.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:checked\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os elementos `\u003cinput\u003e` marcados.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:disable\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os elementos `\u003cinput\u003e` desativados.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:enabled\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os elementos `\u003cinput\u003e` habilitados.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:empty\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os elementos `\u003cp\u003e` que não têm filhos.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:first-child\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento `\u003cinput\u003e` habilitado.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:enabled\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento `\u003cinput\u003e` habilitado.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:first-child\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento `\u003cp\u003e` que é primeiro filho do elemento pai.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:first-of-type\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento `\u003cp\u003e` que é o primeiro elemento `\u003cp\u003e` de seu elemento pai.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:in-range\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera elementos `\u003cinput\u003e` com um valor dentro de um intervalo especificado.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:invalid\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os elementos `\u003cinput\u003e` com um valor inválido.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:lang(language)\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento `\u003cp\u003e` com um valor de atributo lang começando com \"`it`\".\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:last-child\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os elementos `\u003cp\u003e` que são os últimos filhos de seu elemento pai.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:last-of-type\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os elementos `\u003cp\u003e` que é o último elemento `\u003cp\u003e` de seu elemento pai.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:link\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os links não visitados.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:not(selector)\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento que não é o elemento `\u003cp\u003e`.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:nth-child(n)\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento \u003cp\u003e que é ordenado do seu elemento pai.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:nth-last-child(n)\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento \u003cp\u003e que é ordenado do seu elemento pai, contando a partir do último filho.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:nth-last-of-type(n)\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento \u003cp\u003e que é o segundo elemento \u003cp\u003e de seu pai, contando a partir do último filho.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:nth-of-type(n)\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento \u003cp\u003e que é o segundo elemento \u003cp\u003e de seu elemento pai.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:only-of-type\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera o elemento \u003cp\u003e que é o único elemento \u003cp\u003e de seu elemento pai.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:only-child\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera cada elemento \u003cp\u003e que é o único filho de seu elemento pai.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:optional\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera os elementos \u003cinput\u003e sem atributo \"obrigatório\".\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:out-of-range\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera os elementos \u003cinput\u003e com um atributo \"somente leitura\" especificado.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:read-write\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera os elementos \u003cinput\u003e sem o atributo \"somente escrita\" especificado.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:required\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera os elementos \u003cinput\u003e com um atributo \"obrigatório\" especificado.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:root\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera o elemento raiz do documento.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:target\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera o elemento ativo atual (clicado em um URL contendo o nome da âncora).\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e:valid\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera todos os elementos `\u003cinput\u003e` com um valor válido.\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\nAplicações:\n![img11](https://user-images.githubusercontent.com/61624336/112897063-8a609d80-90b5-11eb-84a6-977c76e21cf2.jpg)\n![img12](https://user-images.githubusercontent.com/61624336/112897068-8b91ca80-90b5-11eb-9683-751146a318d6.jpg)\n![img13](https://user-images.githubusercontent.com/61624336/112897072-8d5b8e00-90b5-11eb-9961-9fa0e8dc799a.jpg)\n![img14](https://user-images.githubusercontent.com/61624336/112897086-90567e80-90b5-11eb-8d76-541b90de78e5.jpg)\n![img15](https://user-images.githubusercontent.com/61624336/112897092-92204200-90b5-11eb-9319-883412d62ee9.jpg)\n![img16](https://user-images.githubusercontent.com/61624336/112897098-93ea0580-90b5-11eb-8f98-01cce0f8eb4f.jpg)\n![img17](https://user-images.githubusercontent.com/61624336/112897107-964c5f80-90b5-11eb-97f4-eec02f0f0bcd.jpg)\n\nExemplo 1:\n```\np:first-child {\n color: blue;\n}\n```\n```\np i:first-child {\n color: blue;\n}\n```\n```\np:first-child i {\n color: blue;\n}\n```\n\n## [CSS3] Pseudo-Elementos\nOs \u003cstrong\u003epseudo-elementos\u003c/strong\u003e são usados para estilizar partes específicas de um elemento. Como por exemplo: a primeira letra ou linha de um elemento ou talvez inserir um conteúdo antes ou depois do conteúdo de um elemento.\n\nSintaxe:\n\n```\nselector::pseudo-element {\n property: value;\n}\n```\n\nTipos de Pseudo-Elementos:\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003e**Pseudo-elemento**\u003c/td\u003e\n \u003ctd\u003e**Definição**\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e::after\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eInsire algo após o conteúdo de cada elemento.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e::before\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eInsire algo antes do conteúdo de cada elemento.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e::first-letter\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eSeleciona a primeira letra de cada elemento.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e::first-line\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eSeleciona a primeira linha de cada elemento.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003e::selection\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eSeleciona a parte de um elemento que é selecionado por um usuário (A mancha/ marca da seleção nos contents).\u003c/td\u003e\n \u003c/tr\u003e \n\u003c/table\u003e\n\nExemplo 1:\n\n```HTML\n\u003c!DOCTYPE HTML\u003e\n\u003cHTML\u003e\n\u003chead\u003e\n\u003cstyle\u003e\np::after { \n content: \" - Remember this\";\n}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n \u003cp\u003eMy name is Donald\u003c/p\u003e\n \u003cp\u003eI live in Ducksburg\u003c/p\u003e\n\u003c/body\u003e\n\u003c/HTML\u003e\n```\n\n```css\n::selection {\n color: red;\n background: yellow;\n}\n```\n\n## [CSS3] Variáveis no CSS\nAs \u003cstrong\u003evariáveis no CSS\u003c/strong\u003e servem para definir um padrão para a maioria dos elementos HTML5, poupando assim muitas linhas de código na folha de estilo. É muito comum usar as variáveis para fazer uma paleta de cores para uma página web mais complexa.\n\nSintaxe:\n\n```css\n:root{\n --nome da variável: #141414;\n}\n\n.bg{\n background-color: var(--nome da variável);\n}\n```\n\nBasta utilizarmos a pseudo-classe `:root` e inserirmos os seletores `--nome da variável` para podermos atribuir os valores. Para chama-la é simples, basta somente utilizar o seletor desejável e o valor `var(--nome da variável)`.\n\n## [CSS3] Border\nNo entanto, a \u003cstrong\u003eborder\u003c/strong\u003e é diferente da \u003cstrong\u003emargin\u003c/strong\u003e e do \u003cstrong\u003epadding\u003c/strong\u003e: 'border-top-width', 'border-right-width', 'border-bottom-width', e 'border-left-width‘.\n\nExemplo de utilização:\n\n```\nh1 { border-width: thin } /* thin thin thin thin */\nh1 { border-width: thin thick } /* thin thick thin thick */\nh1 { border-width: thin thick medium } /* thin thick medium thick */\u003c/p\u003e\n```\n\nEstilos da borda: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style‘, 'border'.\n\nExemplo de utilização:\n\n```css\n#xy34 { border-style: solid dotted }\n```\n\nTipos de Borda:\n![Tipos de bordas](https://user-images.githubusercontent.com/61624336/108574726-eb4ac800-72f6-11eb-9906-b8f8e1ca5d5c.png)\n\n🔺 Como fazer Bordas de Triângulos:\n![como fazer triângulos com bordas](https://user-images.githubusercontent.com/61624336/107122854-0ccc9e00-6879-11eb-9ec0-9f604afc59c8.gif)\n\n# 📜 JavaScript (JS)\n\u003ca href=\"https://github.com/IsaacAlves7/js\"\u003e\u003cimg src=\"https://blog.vandersonguidi.com.br/wp-content/uploads/2016/11/js3.png\" height=\"77\" align=\"right\"/\u003e\u003c/a\u003e\n\nO **JavaScript** (JS) é uma linguagem de programação do **lado cliente**, ou seja, é processada pelo próprio navegador (processada pelo cliente).\n\nCom o JavaScript podemos criar efeitos especiais para nossas páginas na Web, além de podermos proporcionar maior interatividade com nossos usuários. O JavaScript é uma linguagem orientada a objetos, ou seja, ela trata todos os elementos da página como objetos distintos, facilitando a tarefa da programação.\n\nResumindo, o JavaScript é uma poderosa linguagem que deve ser dominada por quem deseja criar páginas Web dinâmicas e interativas.\n\nÉ uma linguagem de programação baseada em scripts e padronizada pela ECMA Internacional. Foi criada por **Brendan Eich** (Netscape) e surgiu em 1995 como linguagem de script client-side de páginas web.\n \n\u003e Atualmente, o JavaScript compete com outras linguagens de programação em alta no mercado, sendo indispensável o seu aprendizado.\n\n```HTML\n\u003cimg src=\"1.jpg\" onclick=\"functionClick()\"/\u003e\n```\n\nO HTML tem a habilidade de gerar eventos desencadeando ações para o navegador, como iniciando uma função JavaScript quando o usuário interage em um elemento. Devido a extensão desse conteúdo criei um repositório mais focado no desenvolvimento JavaScript, clique no badge acima para saber mais sobre os Eventos!\n\nEm 1995, o desenvolvimento de páginas web ganha um poderosíssimo aliado, que o acompanha até os dias de hoje: o **Javascript**. Graças a essa nova tecnologia, designers do mundo inteiro puderam superar algumas das limitações do HTML. A navegação na web começa a ficar menos estática e um pouco mais interativa. Com essa inovação, por exemplo, deu-se início às janelas pop-ups.\n\n\u003e Um dos problemas da utilização dessa até então nova tecnologia é que o Javascript necessitava ser carregado no topo da página, o que aumentava consideravelmente o tempo de carregamento dos sites. É de se salientar que em meados dos anos 1990, a velocidade máxima de conexão com a internet não ultrapassava a velocidade de 56Kpbs. Muitas das funções iniciais do Javascript acabaram sendo incorporadas ao CSS. \n\n# 💻 [Front] A Estrutura do Website\n\nTudo começa com o diretório, e dentro dele as pastas `/public/` e `/src/` , e lá os arquivos `index.HTML` e `style.css`.\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n[![CSS3](https://img.shields.io/badge/-style.css-000000?style=social\u0026logo=CSS3\u0026logoColor=1877F2)](#)\n[![JS](https://img.shields.io/badge/-main.js-000000?style=social\u0026logo=JavaScript\u0026logoColor=yellow)](#)\n\nO `index.HTML` é o padrão da Web de ser o primeiro arquivo processado pelo navegador, geralmente é usado para uma áreas de Login ou a Home da página, e o `style.css` é o padrão para editar um ou mais arquivos HTML.\n\n**HTML5 boilerplate\u003c/code\u003e:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003c!DOCTYPE HTML\u003e\n\u003cHTML lang=\"pt-br\"\u003e\n \u003chead\u003e\n \u003cmeta charset=\"utf-8\"\u003e\n \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n \u003cmeta name=\"description\" content=\"\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n \u003clink rel=\"stylesheet\" href=\"\"\u003e\n\t\u003ctitle\u003eHTML5 boilerplate\u003c/title\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n\t\u003ch1\u003eHello, World!\u003c/h1\u003e\n \u003cscript src=\"\" async defer\u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/HTML\u003e\n```\n\nBasicamente, a estrutura do documento HTML se baseia em `\u003c!Doctype HTML\u003e`, `\u003cHTML\u003e`, `\u003chead\u003e`, `\u003cbody\u003e`. Observe a tag muito cuidadosamente. Aqueles acostumados a escrever XHTML perceberam três estranhezas. A primeira é que a tag está muito mais curta do que costumava ser até então - estávamos acostumados a utilizar:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003cmeta http-equiv=\"Content-Type\" content=\"text/HTML;charset=UTF-8\"\u003e\n```\n\nIsso ainda é possível, mas a versão mais curta é preferível, já que é mais fácil de digitar e funciona em todo lugar.\n\nVocê também perceberá que não colocamos aspas no atributo `charset=utf-8` nem utilizamos o autoencerramento na tag. O HTML5 não é uma linguagem XResponsive, então você não precisa dessas coisas.\n\nOs navegadores nunca se importaram com a sintaxe XHTML, se ela fosse enviada como text/HTML (apenas um validador XHTML se importaria). Assim, favorecer uma forma em detrimento da outra no HTML5 seria totalmente arbitrário e tornaria inválidas as páginas que não seguissem o formato, apesar delas funcionarem perfeitamente em qualquer navegador. Desse modo, não importa para o HTML5 qual forma você utiliza.\u003c/p\u003e\n\n`\u003c!Doctype HTML\u003e` é o tipo do documento, vale ressaltar que não é obrigatório.\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003c!Doctype HTML\u003e\n```\n\n`\u003cHTML\u003e` é a tag onde editamos o documento HTML, vale ressaltar que é obrigatória para o documento funcionar. Possui o atributo `lang=\"\"` que define a língua regional do documento.\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003cHTML lang=\"pt-br\"\u003e\u003c/HTML\u003e\n```\n\nO `\u003chead\u003e` representa uma coleção de comandos em que podemos definir as informações do site em si, caracterizadas, como **metadados**. Nesse elemento, são carregadas as informações referentes ao documento como, por exemplo, comandos **CSS** e \u003cstrong\u003eJavaScript\u003c/strong\u003e.\n\nNo `\u003chead\u003e` encontramos:\n\n`\u003ctitle\u003e` que representa o título do documento da página HTML:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n \n```HTML\n\u003ctitle\u003eEstrutura do HTML\u003c/title\u003e\n```\n \n`\u003clink\u003e` que representa ligação com os arquivos externos:\n \nChamando uma folha de estilo externa:\n \n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#) [![CSS3](https://img.shields.io/badge/-style.css-000000?style=social\u0026logo=CSS3\u0026logoColor=1877F2)](#)\n \n```HTML\n\u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n```\n \nChamando uma ícone para a guia do navegador:\n \n[![SVG](https://img.shields.io/badge/-icon.svg-000000?style=social\u0026logo=SVG\u0026logoColor=FFB13B)](#)\n \n```HTML\n\u003clink rel=\"shortcut icon\" href=\"icon.svg\"\u003e\n```\n\n`\u003cmeta\u003e` que representa comandos para definições globais da página:\n \n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n \n```HTML\n \u003cmeta charset=\"utf-8\"\u003e\n \u003cmeta name=\"description\" content=\"Free Web Tutorials\"\u003e\n \u003cmeta name=\"keywords\" contents=\"HTML,CSS,XResponsive,JavaScript\"\u003e\n \u003cmeta name=\"author\" content=\"Hege Refsnes\"\u003e\n \u003cmeta http-equiv=\"refresh\" content=\"30\"\u003e\n```\n \nAtualizar a página depois de 1 segundo sem JavaScript!\n\n```HTML\n\u003cmeta http-equiv=\"refresh\" content=\"1;url=index.HTML\"\u003e\n```\n\n`\u003cscript\u003e` comando para chamada de rotinas em JavaScript e ligação com os arquivos js externos:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003cscript\u003e\n function myFunction {\n document.getElementById(\"demo\").innerHTML = \"Hello JavaScript!\";\n }\n \u003c/script\u003e\n\u003cscript type=\"script/javascript\" src=\"main.js\"\u003e\u003c/script\u003e\n```\n\n`\u003cstyle\u003e` comando para estilização do CSS do tipo interno:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n ```\u003cstyle\u003e\n h1 {\n color: blue;\n font-size: 200px;\n }\n\u003c/style\u003e\n```\n \u003c/p\u003e\n\u003c/ul\u003e\n\n\nO `\u003cbody\u003e` localizado no mesmo nível do `\u003chead\u003e`, este elemento representa o conteúdo principal da página. Aqui estão localizados todos os comandos necessários para a criação do documento HTML.\n\n`\u003ch1\u003e\u003ch2\u003e\u003ch3\u003e\u003ch4\u003e\u003ch5\u003e\u003ch6\u003e` tags de títulos que são por ordem de h1-h6 diminuindo a fonte (do maior para o menor). `\u003chgroup\u003e` é uma tag para um grupo de tags, não possui valor semântico, apenas serve para deixar o código mais legível.\n\n```HTML\n\u003chgroup\u003e\n \u003ch1\u003etítulo 1\u003c/h1\u003e\n \u003ch2\u003etítulo 2\u003c/h2\u003e\n \u003ch3\u003etítulo 3\u003c/h3\u003e\n \u003ch4\u003etítulo 4\u003c/h4\u003e\n \u003ch5\u003etítulo 5\u003c/h5\u003e\n \u003ch6\u003etítulo 6\u003c/h6\u003e\n\u003c/hgroup\u003e\n```\n\n`\u003cp\u003e` elemento que representa um parágrafo:\n\n```HTML\n\u003cp\u003eparágrafo\u003c/p\u003e\n```\n\n`\u003ci\u003e` e `\u003cem\u003e` elementos que representam o texto do estilo do tipo \u003cem\u003eitálico\u003c/em\u003e.\n\n```HTML\n\u003ci\u003eitálico\u003c/i\u003e\n\u003cem\u003eitálico\u003c/em\u003e\n```\n\n`\u003cb\u003e` e `\u003cstrong\u003e` elementos que representam o texto do estilo do tipo **negrito**.\n\n```HTML\n\u003cb\u003enegrito\u003c/b\u003e\n\u003cstrong\u003enegrito\u003c/strong\u003e\n```\n\nelemento que apresenta um bloco de texto pré-formatado, preservando seu conteúdo.\nBloco de texto pré-formatado.\n\n`\u003cbr\u003e` elemento que serve para quebrar uma linha da página.\n\n`\u003cbr\u003e`\n\n`\u003chr\u003e` elemento que possui uma forma linha horizontal com a função para dividir os elementos da página.\n\n`\u003chr\u003e`\n\n`\u003cwbr\u003e` elemento que dá uma oportunidade de quebra de linha, se necessário.****.\n`\u003cwbr\u003e`\n\n`\u003csub\u003e` elemento que representam o texto do estilo do tipo sobscrito.\n\n```HTML\n\u003csub\u003etexto sobscrito\u003c/sub\u003e\n```\n\n`\u003csup\u003e` elemento que representam o texto do estilo do tipo sobrescrito.\n\n```HTML\n\u003csup\u003etexto sobrescrito\u003c/sup\u003e\n```\n\n`\u003cbig\u003e` elemento que representa o texto com fonte maior que o padrão.\n\n```HTML\n\u003cbig\u003etexto com fonte maior do que o padrão\u003c/big\u003e\n```\n\n`\u003csmall\u003e` elemento que representa o texto com fonte menor que o padrão.\n\n```HTML\n\u003csmall\u003etexto com fonte menor do que o padrão\u003c/small\u003e\n```\n\n`\u003cdel\u003e` elemento que representa o texto com a fonte rabiscada.\n\n```HTML\n\u003cp\u003etexto com a \u003cdel\u003e\u003cdel\u003efonte rabiscada\u003c/del\u003e\u003c/del\u003e\u003cp\u003e\n```\n\n`\u003cblockquote\u003e` elemento que tem como função exibir o texto indicando de qual referência foi retirado (citação).\n\n```HTML\n \u003cbloquote cite=\"http://www.quote.com/sample.HTML\"\u003e\n \u003cp\u003eElemento textual.\u003c/p\u003e\n \u003c/blockquote\u003e\n```\n \n`\u003cfigure\u003e` elemento que permite definir logicamente as informações de uma imagem. Trabalha com `\u003cfigcaption\u003e`, que permite dar um título a uma imagem, e `\u003cimg\u003e` elemento que exibe a imagem.\n\n```HTML\n \u003cfigure\u003e\n \u003cfigcaption\u003eFoto de férias\u003c/figcaption\u003e\n \u003cimg src=\"stata.jpg\" alt=\"Fotos das férias no Rio de Janeiro\"/\u003e\n \u003c/figure\u003e\n```\n \n`\u003cdiv\u003e` elemento que representa um bloco de texto. As TAGs `\u003cbody\u003e`, `\u003cheader\u003e`, `\u003cfooter\u003e` etc. possuem regras de utilização bem definidas. Caso o desenvolvedor necessite da criação de um bloco de texto que não se encaixe em alguma regra defina de bloco, pode-se utilizar o recurso da `\u003cdiv\u003e`. A `\u003cdiv\u003e` é um bloco de texto que pode ser usado em qualquer lugar do documento. Geralmente a `\u003cdiv\u003e` é usada para diagramar o layout de um site.\n\n```HTML\n\u003cdiv\u003eteste\u003c/div\u003e\n```\n\n`\u003cspan\u003e` elemento que possui uma utilização genérica semelhante ao elemento `\u003cdiv\u003e`.\n\n```HTML\n\u003cspan\u003etexto de exemplo\u003c/span\u003e\n```\n\n`\u003cs\u003e` elemento que transforma o texto em um conteúdo não relevante.\n\n```HTML\n\u003cp\u003eO texto é \u003cs\u003eirrelevante\u003c/s\u003e\u003c/p\u003e\n```\n\n`\u003ccite\u003e` elemento que transforma o texto em uma citação.\n\n```HTML\n\u003cp\u003eO texto é do \u003ccite\u003estar wars\u003c/cite\u003e\u003c/p\u003e\n```\n\n`\u003cq\u003e` elemento que coloca aspas em um bloco de texto.\n\n```HTML\n\u003cp\u003eO texto é do \u003cq\u003estar wars\u003c/q\u003e\u003c/p\u003e\n```\n\n`\u003ccode\u003e` elemento que representa um fragmento de código de computador.\n\n```HTML\nconsole.log('Hello, World!');\n```\n\n# 🖼️ [Front] Imagem\n```\u003cimg src=\"/assets/public/img/img.svg\"\u003e```\n\n# 📋 [Front] Listas\nAs listas são importantes para a organização do texto e orientação do usuário.\n\n- `\u003cul\u003e` define uma lista comum, não-numerada (não-ordenada).\n\n```HTML\n\u003cul\u003e\n \u003cli\u003eexemplo 1\u003c/li\u003e\n \u003cli\u003eexemplo 2\u003c/li\u003e\n \u003cli\u003eexemplo 3\u003c/li\u003e\n \u003cli\u003eexemplo 4\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n - `\u003cli\u003e` elemento que representa um os itens das listas.\n\n```HTML\n\u003c!-- Lista não ordenada: circle, square, disc --\u003e\n\u003cul type=\"disc\"\u003e \u003c!-- padrão --\u003e\n \u003cli\u003eexemplo 1\u003c/li\u003e\n \u003cli\u003eexemplo 2\u003c/li\u003e\n \u003cli\u003eexemplo 3\u003c/li\u003e\n\u003c/ul\u003e\n```\n \n- `\u003col\u003e` define uma lista numerada (ordenada).\n\n```HTML\n\u003c!-- Lista ordenada: 1, A, a, 2 --\u003e\n\u003col type=\"1\"\u003e \u003c!-- padrão --\u003e\n \u003cli\u003eComida favorita?\u003c/li\u003e\n \u003cli\u003ecarro favorito?\u003c/li\u003e\n \u003cli\u003eSérie favorita?\u003c/li\u003e\n\u003c/ol\u003e\n```\n \n- `\u003cdl\u003e` elemento textual que exibe uma lista de definições, com termos específicos. Trabalha com as tags `\u003cdt\u003e` termo a ser exibido e `\u003cdd\u003e` elementos do termo.\n\n```HTML\n\u003cdl\u003e\n \u003cdt\u003eCarro\u003c/dt\u003e\n \u003cdd\u003eUno\u003c/dd\u003e\n \u003cdd\u003eGol\u003c/dd\u003e\n \u003cdt\u003eMoto\u003c/dt\u003e\n \u003cdd\u003eHonda\u003c/dd\u003e\n \u003cdd\u003eYamaha\u003c/dd\u003e\n\u003c/dl\u003e\n```\n\n# 🔗 [Front] Âncora\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"https://www.computerhope.com/jargon/h/HTML-tag.gif\"\u003e\u003c/div\u003e\n\u003cp\u003e`\u003ca\u003e` elemento que representa uma âncora de endereço. Você pode âncorar um endereço de um site e inclusive criar links da sua página HTML. Com o atributo para renderizar endereços `href=\"\"`você pode barrar o endereço como `href=\"#\"` , apenas com o `#` ou até mesmo seu email com `**href=\"mailto:webmaster@example.com\"**` que irá enviar uma mensagem para seu email.\u003c/p\u003e \n\n\u003cp\u003eAlém dos atributos citados, existe o `target=\"\"` que possui a função de opção da abertura do link. Os valores do `target=\"\"` podem ser:\u003c/p\u003e\n\u003cul\u003e\n \u003cli\u003e`_blank` abre o link em uma nova guia no navegador.\u003c/li\u003e\n \u003cli\u003e`_self` abre o documento na mesma janela (esse é o padrão, portanto não é obrigatório!).\u003c/li\u003e \n \u003cli\u003e`_parent` abre o documento na armação parente.\u003c/li\u003e\n \u003cli\u003e`_top` abre o documento no corpo todo da janela.\u003c/li\u003e\n\u003c/ul\u003e\n\nExemplo 1: Abrindo o link em uma nova guia\n```\u003ca href=\"https://www.google.com/\" target=\"_blank\"\u003eClique no endereço\u003c/a\u003e```\n\nExemplo 2: Linkando dentro das imagens\n```\u003ca href=\"https://www.google.com/\" target=\"_self\"\u003e\u003cimg src=\"/assets/public/images/img.svg\" height=\"100\"\u003e\u003c/a\u003e```\n\nExemplo 3: Enviando mensagem para o email\n```\u003ca href=\"mailto:webmaster07@gmail.com\"\u003eEnviar email\u003c/a\u003e```\n\n# 🔊 [Front] Multimedia\n\u003cimg src=\"https://jibigit.github.io/cheat-HTML/images/media.png\" align=\"right\" height=\"77\"\u003e\n\nO termo mídia digital é oposto de mídia analógica, esta era configurada por uma base material: o som era gravado em pequenos sulcos, sobre uma superfície de vinil e, quando uma agulha passava por esses sulcos o som era reproduzido. Nas mídias digitais o suporte físico praticamente desaparece, e os dados são convertidos em sequências numéricas ou de dígitos - por isso uso do termo digital. Dessa forma, os sons, imagens, textos, são na realidade sequências de números, o que permite o compartilhamento, armazenamento e conversão de dados. No sentido mais amplo, mídia digital pode ser definida como o conjunto de veículos e aparelhos de comunicação baseados em tecnologia digital, permitindo a distribuição ou comunicação digital das obras intelectuais escritas, sonoras ou visuais. Meios de origem eletrônica utilizados nas estratégias de comunicação das marcas com seus consumidores, geralmente chamada de mídia digital.\n\nO **Flash** sempre foi a alternativa mais viável para quem precisava adicionar vídeos e músicas nas páginas Web. Ele estava e ainda está presente em quase todos os navegadores e tínhamos um formato que podia ser usado sem maiores problemas.\n\nBastava adicionar uma **chamada para o plugin** e funcionava.\n\n```html\n\u003cobject width=\"426\" height=\"240\"\u003e\n\u003cparam name=\"movie\" value=\" https://youtu.be/S2Vty9srpFw\"\u003e\u003c/param\u003e\n\u003cparam name=\"allowFullScreen\" value=\"true\"\u003e\u003c/param\u003e\n\u003cparam name=\"allowscriptaccess\" value=\"always\"\u003e\u003c/param\u003e\n\u003cparam name=\"allowscriptaccess\" value=\"always\"\u003e\u003c/param\u003e\n\u003cembed src= https://www.youtube.com/embed/S2Vty9srpFw\ntype=\"application/x-shockwave-flash\"\nallowscriptaccess=\"always\"\nallowfullscreen=\"true\"\nwidth=\"426\"\nheight=\"240\"\u003e\n\u003c/embed\u003e\n\u003c/object\u003e\n```\n\nEm virtude das inconsistências dos navegadores, era preciso adicionar tanto o comando `\u003cobject\u003e`; quanto o comando `\u003cembed\u003e`;, comandos específicos para utilização do plugin, duplicando muitos atributos. Isso sem falar que plugins como o Flash causam muitas instabilidades, ocasionando erros que levam até ao fechamento do navegador.\n\nDevido a tudo isso, o HTML 5 vem com um novo suporte, nativo na linguagem, para evitar o uso de plugins e comandos desnecessários. Atualmente, basta colocar a chamada simples, como se fosse uma imagem e o arquivo é acionado.\n\n```html\n\u003cvideo controls src=\"video.mp4\" width=\"426\" height=\"240\"\u003e\u003c/video\u003e\n```\n\nO problema apresentado pelo novo comando é o uso do atributo `src` que não funciona bem em alguns navegadores. E se pretendemos que todos possam abrir a página, com qualquer navegador, é necessário usar outro tipo de atributo. Por isso, é comum o uso do atributo `\u003csource\u003e` na tag `\u003cvideo\u003e`.\n\nO elemento `\u003csource\u003e` pode ser usado múltiplas vezes e permite definir um formato de vídeo para cada navegador, fazendo com que você tenha um alcance maior.\n\nvideo:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003cvideo width=\"426\" height=\"240\" controls\u003e\n \u003csource src=\"video.mp4\" type=\"video/mp4\"\u003e\n \u003csource src=\"video.webm\" type=\"video/webm\"\u003e\n \u003csource src=\"video.ogg\" type=\"video/ogg\"\u003e\n\u003c/video\u003e\n```\n\naudio:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003caudio controls\u003e\n \u003csource src=\"audio.mp3\" type=\"audio/mpeg\"\u003e\n \u003csource src=\"audio.ogg\" type=\"audio/ogg\"\u003e\n \u003csource src=\"audio.wav\" type=\"audio/wav\"\u003e\n\u003c/audio\u003e\n```\n\nExistem diversos **codecs**, possíveis e você precisará exportar pelo menos duas versões para ter um alcance maior.\n\n\u003e Codecs são programas utilizados para codificar e decodificar arquivos de mídia. Eles compactam o formato original, favorecendo o armazenamento, e descompactam na hora da reprodução, transformando novamente em imagem ou áudio.\n\nTodos os exemplos de audio e video citados são importados via documento no diretório. E a dúvida é, como faço para importar um vídeo já hospedado em um site como o YouTube ou o Vimeo? E qual das duas soluções (Via documento ou via server) é a mais vantajosa? Vamos ver como importar videos do YouTube e do Vimeo, passo a passo!\n\n# 🔲 [Front] Tabelas\nAté o aparecimento do HTML5, as **tabelas** eram utilizadas como recurso para diagramação de layouts para páginas. Os designers usavam tabelas como uma grade para exibir imagens e textos, e foram amplamente utilizadas, tornando-se a forma predominante de projeto de sites, criando assim um visual rico.\n\nEntretanto, hoje, o uso de tabelas está, de fato, interferindo na construção de sites melhores, mais acessíveis, flexíveis e funcionais, principalmente para as novas mídias, como os celulares, tablets etc.\n\nEssas tabelas ainda continuam existindo no HTML 5 como recurso para exibição de dados tabulares, informações vindas de base de dados. Com a nova versão do HTML, podemos criar sites feitos completamente sem tabelas (tableless), criando assim layouts dinâmicos que aparecem em telas grandes como no computador e se adaptam bem para uma tela pequena do smartphone. Mais pra frente você verá como construir layouts e layouts responsivos com HTML5 e CSS3.\n\nO comando tabela não foi retirado da linguagem, mas ficou restrito o seu uso. Em contrapartida, ainda temos vários sites que utilizam esse recurso, portanto, é importante entendermos como funciona até para poder, se for necessário, dar manutenção nesse tipo de página.\n\nO comando para se inserir uma tabela é `\u003ctable\u003e`. Para iniciar uma **linha**, devemos introduzir a tag `\u003ctr\u003e` e para uma **célula** `\u003ctd\u003e\u003ccode\u003e, que divide a linha da tabela. `\u003cth\u003e` divide a linha da tabela colocando o conteúdo em negrito. Todos esses comandos são encerrados como `\u003c/table\u003e`, `\u003c/tr\u003e` e \u003c/code\u003e\u003c/td\u003e` respectivamente.\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003c/td\u003e\n \u003ctd\u003e\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n```\n\nO comando `\u003ctable\u003e` tem uma série de atributos que ajudam na formatação da tabela. Os principais são:\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ealign=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003ealinha a tabela nas três posições: \u003ccode\u003ecenter\u003c/code\u003e, \u003ccode\u003eleft\u003c/code\u003e, \u003ccode\u003eright\u003c/code\u003e e \u003ccode\u003ejustify\u003c/code\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ebgcolor=\"\"\u003c/code\u003e\u003c/td\u003e \n \u003ctd\u003edetermina a cor da tabela\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eborder=\"\"\u003c/code\u003e\u003c/td\u003e \n \u003ctd\u003edetermina o tamanho da borda, se for zero não mostra a borda\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ecellspacing=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003edetermina o espaçamento entre células\u003c/td\u003e\n \u003c/tr\u003e \n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ecolspan=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003edetermina o agrupamento entre duas ou mais colunas da tabela (sentido para os lados)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003erowspan=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003edetermina o agrupamento entre duas ou mais linhas da tabela. (sentido para baixo e cima)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ecellpadding=\"\"\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003edetermina o espaçamento entre o texto e a borda da célula\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\n`\u003ccaption\u003e` exibe um texto centralizado em relação à tabela, como se fosse uma legenda.\n\nPara escolher as linhas internas que serão mostradas dentro da tabela, usamos o atributo `RULES`, dentro da tag . Os complementos desse atributo são:\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003enone\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003enenhuma linha inteira.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eall\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003epara mostrar todas as linhas entre cada coluna e linha na tabela (default)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003erows\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003epara as linhas horizontais entre cada linha da tabela.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003ecols\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003epara as linhas verticais entre cada coluna da tabela.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003egroups\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003epara linhas entre grupos de colunas e seções horizontais, definidas por tags especiais como `\u003ccolgroup\u003e` e `\u003cthead\u003e\u003c/code\u003e\u003c/td\u003e\n \u003c/tr\u003e \n\u003c/table\u003e\n\nVeja alguns exemplos:\n\n```HTML\n\u003ctable border rules=\"all\"6\u003e\n```\n\n````\u003ctable border rules=\"none\"6\u003e````\n````\u003ctable border rules=\"cols\"6\u003e````\n````\u003ctable border rules=\"groups\"6\u003e````\n````\u003ctable border rules=\"rows\"6\u003e````\n\n# 🆗 [Front] Formulários\nA parte de formulários em HTML é muito importante para o preenchimento de dados que os usuários inserem na página HTML. O recolhimento desses dados é feita pelo back-end com uma linguagem de programação back-end (PHP, JavaScript, Python, Java etc.) que armazena e consulta esses dados em um banco de dados (MySQL, PostgreSQL, MongoDB, OracleDB etc.). Vejamos as tags de formulários:\n\n**Formulário de Login (boilerplate)\u003c/code\u003e:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#)\n\n```HTML\n\u003cHTML\u003e\n \u003cbody\u003e\n \u003ch2\u003eLogin\u003c/h2\u003e\n \u003cform\u003e\n\tLogin:\u003cbr\u003e\n\t\u003cinput type=\"email\" name=\"email\"\u003e\u003cbr\u003e\n\tSenha:\u003cbr\u003e\n\t\u003cinput type=\"password\" name=\"senha\"\u003e\u003cbr\u003e\n\t\u003cinput type=\"submit\" value=\"Logar\"\u003e\n \u003c/form\u003e\n \u003c/body\u003e\n\u003c/HTML\u003e\n```\n\nAtravés do atributo `type` podemos definir o tipo do nosso `input` usado, o atributo `name=''` podemos processar os dados enviados através de uma linguagem de programação. \n\n**Formulário de Login (boilerplate) - Com PHP\u003c/code\u003e:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#) [![PHP](https://img.shields.io/badge/-processa.php-000000?style=social\u0026logo=PHP\u0026logoColor=indigo)](#) \n\n```HTML\n\u003cHTML\u003e\n \u003cbody\u003e\n \u003ch2\u003eLogin\u003c/h2\u003e\n \u003cform action=\"processa.php\"\u003e\n\tLogin:\u003cbr\u003e\n\t\u003cinput type=\"email\" name=\"email\" required\u003e\u003cbr\u003e\n\tSenha:\u003cbr\u003e\n\t\u003cinput type=\"password\" name=\"senha\" required\u003e\u003cbr\u003e\n\t\u003cinput type=\"submit\" value=\"Logar\"\u003e\n \u003c/form\u003e\n \u003c/body\u003e\n\u003c/HTML\u003e\n```\n\n**Formulário de Cadastro (boilerplate)\u003c/code\u003e:\n\n[![HTML5](https://img.shields.io/badge/-index.HTML-000000?style=social\u0026logo=HTML5\u0026logoColor=orangered)](#) [![PHP](https://img.shields.io/badge/-processa.php-000000?style=social\u0026logo=PHP\u0026logoColor=indigo)](#) \n\n```HTML\n\u003cHTML\u003e\n \u003chead\u003e\n \u003ctitle\u003eCadastro\u003c/title\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003ch2\u003eCadastre-se\u003c/h2\u003e\n \u003cform action=\"processa.php\"\u003e\n\t Nome Completo:\u003cbr\u003e\n\t \u003cinput type=\"text\" name=\"nome\" required\u003e\u003cbr\u003e\n\t \u003c!-- \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e --\u003e\n Email:\u003cbr\u003e\n\t \u003cinput type=\"email\" name=\"email\" required\u003e\u003cbr\u003e\n\t Senha:\u003cbr\u003e\n\t \u003cinput type=\"password\" name=\"password\" required\u003e\u003cbr\u003e\n\t Repita a senha:\u003cbr\u003e\n\t \u003cinput type=\"password\" name=\"password\" required\u003e\u003cbr\u003e\n\t \t\n\t Sexo:\u003cbr\u003e\n\t \u003cinput type=\"radio\" name=\"sexo\" value=\"masculino\"\u003e Masculino\u003cbr\u003e\n\t \u003cinput type=\"radio\" name=\"sexo\" value=\"feminino\"\u003e Feminino\u003cbr\u003e\n\t \n\t Interesses:\u003cbr\u003e\n\t \u003cinput type=\"checkbox\" name=\"interesse\" value=\"futebol\"\u003e Futebol\u003cbr\u003e\n\t \u003cinput type=\"checkbox\" name=\"interesse\" value=\"video-games\"\u003e Video-games\u003cbr\u003e\n\t \u003cinput type=\"checkbox\" name=\"interesse\" value=\"academia\"\u003e Academia\u003cbr\u003e\n\t \n\t Estado\u003cbr\u003e\n\t \u003cselect name=\"estado\"\u003e\n\t \u003coption value=\"RJ\"\u003eRJ\u003c/option\u003e\n\t \u003coption value=\"SP\"\u003eSP\u003c/option\u003e\n\t \u003coption value=\"MG\"\u003eMG\u003c/option\u003e\n\t \u003coption value=\"ES\"\u003eES\u003c/option\u003e\n\t \u003c/select\u003e\u003cbr\u003e\n\t\n\t Comente!\u003cbr\u003e\n\t \u003ctextarea name=\"comentario\"\u003e\u003c/textarea\u003e\u003cbr\u003e\n\n\t \u003cinput type=\"submit\" value=\"Cadastrar\"\u003e\n \u003c/form\u003e\n \u003c/body\u003e\n\u003c/HTML\u003e\n```\n\nSó vamos poder conseguir fazer o `input` entre radios se o `name` for o mesmo, dessa forma conseguimos agrupar essas informações e apenas uma dela será marcada.\n\nCom `checkbox` podemos escolher mais de uma opção para marcar.\n\nCom \n\nPodemos definir os tipos de `\u003cinput\u003e` e seus atributos:\n\n- `button`\n- `password`\n- `text`\n\n\u003cimg src=\"https://davidwalsh.name/demo/HTML5-buttons.png\" height=\"77\" align=\"right\"\u003e\n\nOs elementos `\u003ca\u003e`, `\u003cinput\u003e` e `\u003cbutton\u003e` são todos usados para criar botões em uma página HTML, mas cada um tem finalidades ligeiramente diferentes e é usado em diferentes contextos.\n\n`\u003ca\u003e` o âncora é usado para criar links em HTML. Ele é usado principalmente para navegar entre diferentes páginas da web ou ancorar-se em diferentes seções de uma página. Quando um usuário clica em um elemento `\u003ca\u003e`, ele é direcionado para o URL especificado no atributo `href`. Os elementos `\u003ca\u003e` geralmente são estilizados com CSS para se parecerem com botões, mas eles têm comportamento de link padrão.\n\n```HTML\n\u003ca href=\"pagina.HTML\"\u003eLink\u003c/a\u003e\n```\n\n`\u003cinput\u003e` é usado para criar elementos de entrada em um formulário HTML. Embora seja frequentemente usado para criar campos de entrada de texto, também pode ser usado para criar botões. O tipo de botão é especificado pelo atributo `type`. Alguns valores comuns para o atributo `type` são `\"button\"`, `\"submit\"` e `\"reset\"`. Os botões `\u003cinput\u003e` são úteis quando você precisa enviar dados de um formulário para um servidor ou executar ações específicas quando um botão é clicado.\n\n```HTML\n\u003cinput type=\"button\" value=\"Clique Aqui\"\u003e\n```\n\n`\u003cbutton\u003e` é usado para criar botões em HTML. Ele pode conter texto, elementos de imagem ou outros elementos HTML. Assim como os botões `\u003cinput\u003e`, os botões `\u003cbutton\u003e` podem ter um tipo específico especificado pelo atributo `type`, como `\"button\"`, `\"submit\"` ou `\"reset\"`. Os botões `\u003cbutton\u003e` oferecem mais flexibilidade em termos de conteúdo e comportamento do que os botões `\u003cinput\u003e`, especialmente quando se trata de estilização e manipulação de eventos usando JavaScript.\n\n```HTML\n\u003cbutton type=\"button\"\u003eClique Aqui\u003c/button\u003e\n```\n\nEm resumo, se você está criando um botão para navegação, use `\u003ca\u003e`. Se está criando um botão para enviar dados de um formulário, use `\u003cinput type=\"submit\"\u003e` ou `\u003cbutton type=\"submit\"\u003e`. Se está criando um botão para executar uma ação específica na página (como mostrar ou ocultar conteúdo), use `\u003cbutton type=\"button\"\u003e`.\n\n# 🖼️ [Front] Foreground e Background\nO CSS permite alterar as cores de primeiro plano (\u003cem\u003eforeground\u003c/em\u003e) e plano de fundo (\u003cem\u003ebackground\u003c/em\u003e) dos elementos. O W3C recomenda que a regra background seja utilizado no elemento \u003cem\u003ebody\u003c/em\u003e.\n\nSempre que pensamos em criar um layout, devemos configurar a cor de fundo (background) para que a página que será aberta apresente a mesma cor em qualquer navegador. Caso não seja definida, corre o risco do usuário ter modificado a cor padrão da máquina e como não está configurada no HTML, a página vai mostrar a cor padrão, alterando, assim, o que foi definido no layout.\n\nO mesmo caso acontece com a cor da fonte (foreground) que deve ser definida da mesma forma. O W3C recomenda sempre que o body contenha essas definições para que todas as páginas apresentem uma formatação.\n\nBackground para alterar a cor de fundo de uma página HTML, usando atributos do CSS, devemos usar conforme o exemplo:\n\nModificando a cor do plano de fundo (background):\n\u003cp\u003eDentro da Tag \u003cbody\u003e, alteramos o atributo **background-color** com a cor desejada.\u003c/p\u003e\n\n```HTML\nbody {\n background-color: yellow;\n}\n```\n\nDefinindo, assim, uma cor amarela para o fundo da página.\n\nA definição do background pode ser feita também com a utilização de imagens como fundo, para isso devemos pensar da mesma forma e utilizar os comandos específicos para imagens de fundo.\n\n\u003cstrong\u003eExemplo de elemento do plano de fundo (background)\u003c/strong\u003e:\n\n```css\nbody{\n background-image: url(\"paper.gif\");\n background-color: #cccccc;\n}\n```\n\nDefinindo assim uma cor e uma imagem repitida para o fundo da página.\n\nQuando definimos uma imagem de fundo, o atributo url pode conter um endereço completo de onde se encontra a imagem, podendo estar até em outro domínio.\n\n```css\nbody{\n background-image: url(\"//www.exodocientifica.com.br/wp-content/uploads/2014/08/fundo-site.jpg\");\n backgroud-color: #cccccc;\n}\n```\n\nA definição da imagem de fundo pode ser configurada com alguns atributos especiais como:\n\n```css\nbody{\n background-image: url(\"paper.gif\");\n background-repeat: repeat-y;\n}\n```\n\nEssa regra repete a imagem no eixo especificado. Se usar `background-repeat: no-repeat;` a imagem não será repetida.\n\nPodemos fixar a imagem em um determinado local da tela.\n\n```css\nbody{\n background-image: url('smiley.gif');\n background-repeat: no-repeat;\n background-attachment: fixed;\n background-position: center;\n}\n```\n\n`attachment` fixa a imagem e `position` determina a sua localização. O resultado é a imagem totalmente centralizada na página.\n\nGradientes são muito usado para mesclar duas ou mais cores no background, o que deixa a interface mais moderna e atraente ao usuário.\n\nLinear-gradient\n\n# 🔡 [Front] Textos\nUma das novidades do CSS 3 é o uso de fontes da própria internet, podemos agora usar fontes livres que são disponíveis na internet, sem que tenha a necessidade de estar instalada na máquina do usuário.\n\nO site do Google disponibiliza uma quantidade grande de fontes livres. No endereço https://fonts.google.com/ encontramos as fontes e a forma de como colocar no nosso código.\n\nPara colocar no código da página, escolhemos a fonte e depois copiamos o código que vai ser colocado no `\u003chead\u003e` da página.\n\n```HTML\n\u003chead\u003e\n \u003clink href=\"https://fonts.googleapis.com/css?family=Abhaya+Libre|Bungee+Inline\" rel=\"stylesheet\"/\u003e\n\u003c/head\u003e\n```\n\nDepois no CSS colocamos o comando para o seu uso.\n\n```css\nfont-family:'Bungee Inline', cursive;\nfont-family:'Abhaya Libre', serif;\n```\n\nO comando `font-family` é o que determina a fonte que será usada. No CSS, temos ainda uma série de definições de comandos para fonte como:\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cstrong\u003ePropriedade\u003c/strong\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cstrong\u003eFunção da propriedade\u003c/strong\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003efont-family\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003edetermina a fonte que será usada\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003efont-size\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eDefine o tamanho da fonte\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003efont-style\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eDefine o estilo da fonte\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003efont-variant\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eDefine a caixa da fonte\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003efont-weight\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eDefine o corpo da fonte\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eletter-spacing\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eDefine o espaçamento das letras da fonte\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003etext-transform\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAlterna o texto entre maiúsculas e minúsculas\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003etext-decoration\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAdiciona destaque a um texto (linhas)\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\nExemplo:\n\n```css\n h1{\n font-size: 250%;\n font-style: normal;\n font-variant: small-caps;\n }\n\n h2{\n font-size: 100px;\n font-style: italic;\n font-weight: normal;\n }\n\n h3{\n font-size: 2cm;\n font-style: italic;\n font-weight: bold;\n }\n\n h4{\n font-size: 10rem;\n font-style: italic;\n font-weight: 900;\n }\n\n p{\n font-size: 100pc;\n font-style: oblique;\n letter-spacing: 2px;\n }\n```\n\nEstilizando listas:\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003ePropriedade\u003c/td\u003e\n \u003ctd\u003eFunção da propriedade\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003elist-style-type\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eAltera o marcador da lista\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\nExemplo:\n\n```css\nul {\n list-style-type: square;\n}\n\nol {\n list-style-type: upper-roman;\n}\n\nul {\n list-style-type: \"\\1F44D\"; /*Código do Emoji de um joinha*/\n}\n```\n\nExemplo: Estilizando a lista com imagem\n\n```css\nul {\n list-style-type: url('rocket.png');\n}\n```\n\n# ↕️ [Front] Positions and dimensions\n\u003cp\u003eAs propriedades CSS \u003cstrong\u003eposition\u003c/strong\u003e e \u003cstrong\u003efloat\u003c/strong\u003e determinam como um box será posicionado no modelo visual de formatação de um documento. Esse box pode conter imagens, textos, listas, entre outros e, com isso, podemos montar layouts com a mesma qualidade de um programa gráfico feito para este fim.\n\nAs recomendações do W3C para as CSS 3 preveem a existência de três esquemas de posicionamento:\u003c/p\u003e\n\n1. Esquema Normal esse esquema segue o fluxo normal em que os elementos são exibidos um após o outro e de cima para baixo. Ele é simples e atualmente a maioria das páginas usam essa forma.\n\nUm exemplo usando textos em sequência:\n```css\nem{\n padding: 2px;\n margin: 2em;\n border-width: medium;\n border-style: dashed;\n line-height: 2.4em;\n}\n```\n\n2. Esquema Float (Flutuante) definido pela regra **float** de posicionamento, juntamente com as regras \u003cstrong\u003eleft, right, none e inherit (herdado)\u003c/strong\u003e.\n\nO box é deslocado para uma nova posição e seu espaço original é preenchido por outro elemento, na medida do possível.\n\nExemplo de uso: Neste exemplo a imagem está com o float: LEFT o que a coloca ao lado do texto.\u003c/p\u003e\n\n```css\nimg {\n float: left;\n}\n\nbody, p, img {\n margin: 2em;\n}\n```\n\n4. Esquema Relativo\n![EuKdtFOVcAIac3j](https://user-images.githubusercontent.com/61624336/113332439-8de36700-92f7-11eb-9e31-7a356f8d03cf.jpg)\n\n3. Esquema Absoluto definido pela regra position com valores **absolute** e **fixed**. O box é removido do fluxo completamente sem impactar nos elementos posteriores.\n\nNo exemplo, seu uso para montar layouts com várias partes:\n\n```css\nbody {\n height: 8.5in;\n}\n\n#header {\n position: fixed;\n width: 100%;\n height: 15%;\n top: 0;\n right: 0;\n bottom: auto;\n left: 0;\n background-color: red;\n}\n\n#sidebar {\n position: fixed;\n width: 10em;\n height: auto;\n top: 15%;\n right: auto;\n bottom: 100px;\n left: 0;\n background-color: blue;\n}\n\n#main {\n position: fixed;\n width: auto;\n height: auto;\n top: 15%;\n right: 0;\n bottom: 100px;\n left: 10em;\n background-color: yellow;\n}\n\n#footer{\n position: fixed;\n width: 100%;\n height: 100px;\n top: auto;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: black;\n}\n```\n\n# ⤴️ [Front] Transition e Transform\n[![CodePen](https://img.shields.io/badge/-CodePen-000?style=for-the-badge\u0026logo=CodePen\u0026logoColor=white)](https://codepen.io/isaacalves7/pen/zYKowjP)\n\nO **CSS3** em conjunto com o **JavasScript** e o **HTML5** passaram a dar suporte a transformações em tempo real, de objetos HTML.\n\nPodemos modificar posição, rotacionar, aumentar e diminuir, tudo isso dentro de todos os eixos gráficos disponíveis na sua tela.\n\nVamos começar com um exemplo de como mudar uma div de posição sem precisar chamar novamente a página, isto é, diretamente no navegador.\u003c/p\u003e\n\nVejamos os códigos:\n\n```HTML\n\u003c!DOCTYPE HTML\u003e\n\u003cHTML\u003e\n\u003chead\u003e\n \u003clink\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n \u003cp\u003eRotacionar o element DIV\u003c/p\u003e\n \u003cdiv id=\"div1\"\u003eAqui o texto!\u003c/div\u003e\n Rotacionar: \u003cbr\u003e\n \u003cinput type=\"range\" min=\"-360\" max=\"360\" value=\"7\" onchange=\"rotate(this.value)\"/\u003e\u003cbr\u003e\n transformação: rotacionar(\u003cspan id=\"span1\"\u003e7deg\u003c/span\u003e);\n\u003c/body\u003e\n\u003c/HTML\u003e\n```\n\n```css\n#div1 {\n width: 120px;\n height: 100px;\n background-color: yellow;\n border: 1px solid black;\n transform: rotate(7deg);\n -ms-transform: rotate(7deg); /*IE 9*/\n -webkit-transform: rotate(7deg); /*Opera, Chrome and Safari*/\n}\n```\n\n```javascript\nfunction rotate(value){\n document.getElementById('div1').style.webkitTransform=\"rotate(\"+value+\"deg)\";\n document.getElementById('div1').style.webkitTransform=\"rotate(\"+value+\"deg)\";\n document.getElementById('div1').style.webkitTransform=\"rotate(\"+value+\"deg)\";\n document.getElementById('div1').style.msTransform=\"rotate(\"+value+\"deg)\";\n document.getElementById('div1').style.MozTransform=\"rotate(\"+value+\"deg)\";\n document.getElementById('div1').style.OTransform=\"rotate(\"+value+\"deg)\";\n document.getElementById('div1').style.tranform=\"rotate(\"+value+\"deg)\";\n document.getElementById('span1').innerHTML=value+\"deg\";\n}\n```\n\n\u003e Agora veja como ficará a página. Arrastando a barra de rolagem, teremos a modificação da caixa amarela.\n\nTipos de transformações possíveis:\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd\u003eValor\u003c/td\u003e\n \u003ctd\u003eDescrição\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003enone\u003c/td\u003e\n \u003ctd\u003eNenhum tipo de transformação.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003ematrix(n,n,n,n,n,n)\u003c/td\u003e\n \u003ctd\u003eDefine transformação 2D com seis valores.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003ematrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)\u003c/td\u003e\n \u003ctd\u003eDefine transformação 3D com uma matrix de 16 valores.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003etranslate(x,y)\u003c/td\u003e\n \u003ctd\u003eDefine deslocamento 2D.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003etranslate3d(x,y,z)\u003c/td\u003e\n \u003ctd\u003eDefine deslocamento 3D.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003etranslateX(x)\u003c/td\u003e\n \u003ctd\u003eDeslocamento pelo eixo X.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003etranslateY(y)\u003c/td\u003e\n \u003ctd\u003eDeslocamento pelo eixo Y.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003etranslateZ(z)\u003c/td\u003e\n \u003ctd\u003eDeslocamento pelo eixo Z.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003escale(x,y)\u003c/td\u003e\n \u003ctd\u003eModifica o tamanho em 2D.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003escale3d(x,y,z)\u003c/td\u003e\n \u003ctd\u003eModifica o tamanho em 3D.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003escaleX(x)\u003c/td\u003e\n \u003ctd\u003eModifica o tamanho pelo eixo X.\u003c/td\u003e\n \u003c/tr\u003e \n \u003ctr\u003e\n \u003ctd\u003escaleY(y)\u003c/td\u003e\n \u003ctd\u003eModifica o tamanho pelo eixo Y.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003escaleZ(z)\u003c/td\u003e\n \u003ctd\u003eModifica o tamanho pelo eixo Z.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erotate(angle)\u003c/td\u003e\n \u003ctd\u003eRotacionar pelo ângulo.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erotate3d(x,y,z,angle)\u003c/td\u003e\n \u003ctd\u003eRotacionar.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erotateX(angle)\u003c/td\u003e\n \u003ctd\u003eRotacionar pelo eixo X.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erotateY(angle)\u003c/td\u003e\n \u003ctd\u003eRotacionar pelo eixo Y.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erotateZ(angle)\u003c/td\u003e\n \u003ctd\u003eRotacionar pelo eixo Z.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eskew(x-angle,y-angle)\u003c/td\u003e\n \u003ctd\u003eModifica torcendo o objeto pelo ângulo.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eskewX(angle)\u003c/td\u003e\n \u003ctd\u003eModifica torcendo o objeto pelo ângulo.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eskewY(angle)\u003c/td\u003e\n \u003ctd\u003eModifica torcendo o objeto pelo ângulo.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eperspective(n)\u003c/td\u003e\n \u003ctd\u003ePerspectiva.\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\nExemplo de aplicação: Fotos de uma câmera Polaroid\n\n```HTML\n\u003c!DOCTYPE HTML\u003e\n\u003cHTML\u003e\n\u003chead\u003e\n \u003clink\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class=\"polaroid rotate_right\"\u003e\n \u003cimg src=\"pulpitrock.jpg\" alt=\"Pulpit rock\" width=\"284\" height=\"213\"\u003e\n\u003cp class=\"caption\"\u003eO púlpito em Lysefjorden, Noruega.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"polaroid rotate_left\"\u003e\n\u003cimg src=\"cinqueterre.jpg\" alt=\"Monterosso al Mare\" width=\"284\" height=\"213\"\u003e\n\u003cp class=\"caption\"\u003eMonterosso al Mare. Uma das cinco aldeias de Cinque Terre\u003c/p\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/HTML\u003e\n```\n\nstyle.css\n\n```css\nbody {\n margin: 30px;\n background-color: #E9E9E9;\n}\ndiv.polaroid{\n width: 249px;\n padding: 10px 10px 20px 10px;\n border: 1px solid #BFBFBF;\n background-color: white;\n box-shadow: 10px 10px 5px #aaaaaa;\n}\ndiv.rotate_right{\n float: left;\n -ms-transform: rotate(7deg);/*IE 9*/\n -webkit-transform: rotate(7deg);/*Safari*/\n transform: rotate(7deg);\n}\ndiv.rotate_left{\n float: left;\n -ms-transform: rotate(-8deg);/*IE 9*/\n -webkit-transform: rotate(-8deg);/*Safari*/\n transform: rotate(-8deg);\n}\n```\n\n# 📺 [Front] Displays\n\n# ⬜ [Front] Canvas\n\u003cimg src=\"https://github.com/user-attachments/assets/0e3342cd-47c6-4e70-a580-c40129395938\" align=\"right\" height=\"77\"\u003e\n\nO HTML Canvas é um elemento HTML5 que permite a criação de gráficos e imagens dinâmicas em uma página web, utilizando JavaScript. Também chamado de tela, o elemento HTML é usado para desenhar gráficos, em tempo real, via JavaScript com a tag `\u003ccanvas\u003e`.\n\nO elemento é apenas um contêiner para gráficos. Você deve usar JavaScript para realmente desenhar os gráficos. O Canvas possui vários métodos para desenhar caminhos, caixas, círculos, texto e adicionar imagens. O Canvas é suportado por todos os principais navegadores.\n\n# 📱 [Front] Responsive Layout\n\u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Responsive-Flexbox-blue?style=flat\u0026logo=CSS3\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Responsive-Grid-tomato?style=flat\u0026logo=CSS3\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Responsive-Flexbox-gold?style=flat\u0026logo=CSS3\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Responsive-Grid-green?style=flat\u0026logo=CSS3\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Responsive-Grid-yellow?style=flat\u0026logo=CSS3\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Responsive-Grid-red?style=flat\u0026logo=CSS3\u0026logoColor=white\"\u003e\u003c/a\u003e \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/badge/Responsive-Grid-blue?style=flat\u0026logo=CSS3\u0026logoColor=white\"\u003e\u003c/a\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/61624336/112909640-3ca16080-90c8-11eb-85a4-d5cc3a6aaa85.gif\" align=\"right\" height=\"177\"\u003e\n\n**Mobile First** propõe que, ao desenvolver um site ou outro produto, o mobile seja levado em conta primeiro. Ao contrário do que se fazia antes, as adaptações devem ser feitas de mobile para desktop.\n\nPodemos definir **media queries** como a maneira que o navegador define que formatação de página vai apresentar a cada tipo de dispositivo. Os **media types** são definidos para cada tipo de media recebendo um certo código CSS, fazendo com que o navegador direcione a abertura da página de uma certa forma. O HTML foi gerado para ser portátil, ou seja, lido e interpretado por qualquer tipo de dispositivo. Só que cada dispositivo exibe o HTML de uma maneira, devido a fatores como, por exemplo, as dimensões da tela.\n\nImagine que visitamos um site em um desktop; ele não terá o mesmo aspecto se visitarmos o mesmo site em um dispositivo móvel. Isso ocorre porque são dispositivos diferentes e formas diferentes de navegação. Por isso, a importância de usar essa nova forma de definição de CSS. Isso facilita a leitura do site em mídias diferentes.\n\nPara que possamos manter nossas páginas sempre adequadas a cada tipo de visualização, utilizamos **media types** com a seguinte formatação:\n\n\u003cul\u003e\n \u003cli\u003e\u003cstrong\u003eall\u003c/strong\u003e = para todos os dispositivos.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003ebraille\u003c/strong\u003e = para os dispositivos táteis.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eembossed\u003c/strong\u003e = para os dispositivos que imprimem em braille.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eprint\u003c/strong\u003e = para a impressão em papel.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eprojection\u003c/strong\u003e = para apresentações como PPS.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003escreen\u003c/strong\u003e = para monitores ou dispositivos com telas coloridas e resolução adequada.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003espeech\u003c/strong\u003e = para sintetizadores de voz. O CSS 2 têm uma especificação de CSS chamada \u003cstrong\u003eAural\u003c/strong\u003e, onde podemos formatar a voz dos sintetizadores.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003etty\u003c/strong\u003e = para dispositivos que possuem uma grade fixa para exibição de caracteres, tais como: Teletypes, Terminais e também dispositivos portáteis com display limitados.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003etv\u003c/strong\u003e = para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitados.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003ehandheld\u003c/strong\u003e = para dispositivos portáteis, geralmente com telas pequenas e banda limitada.\u003c/li\u003e\n\u003c/ul\u003e\n\nObserve, abaixo, um exemplo de utilização:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"estilo.css\" media=\"screen and (color)\"/\u003e\n```\n\nOnde:\n\n\u003cul\u003e\n \u003cli\u003e\u003cstrong\u003erel\u003c/strong\u003e = define o tipo do arquivo.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003ehref\u003c/strong\u003e = define a localização do arquivo.css.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003emedia\u003c/strong\u003e = define o tipo de saída do arquivo.\u003c/li\u003e\n\u003c/ul\u003e\n\nCom esse arquivo definimos que ele será usado quando for acessado pela mídia correspondente. Dessa maneira, o CSS não será aplicado em \u003cstrong\u003edispositivos monocromáticos.\u003c/strong\u003e\n\nNas \u003cem\u003emedia queries\u003c/em\u003e são utilizados três operadores lógicos:\n\nUnidades de resolução responsivas: `vh`, `%`, `em`\n\nPadrão para tela inteira responsiva (Responsive Landing Page):\n\n```css\nsection {\n width: 100%; height: 100vh;\n}\n```\n\n## [Front] Grid Layout\n\u003cimg src=\"https://miro.medium.com/max/840/1*kuzeYL058uQGHPt8_wuoqg.png\" height=\"177\" align=\"right\"/\u003e\n\nO Módulo de **Grid Layout** oferece um sistema de layout baseado em grade, com linhas e colunas (rows and columns). O Módulo de Layout em Grade permite que os desenvolvedores criem facilmente layouts web complexos. O Módulo de Layout em Grade facilita a criação de uma estrutura de layout responsiva, sem usar flutuação ou posicionamento.\n\nAs propriedades de grade CSS são suportadas em todos os navegadores modernos.\n\n`not` usamos para dispositivos monocromáticos, pois estamos negando o atributo color.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"estilo.css\" media=\"all and (not color)\"/\u003e\n```\n\nNo próximo exemplo, podemos definir a resolução de vídeo que queremos modificar:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"estilo.css\" media=\"screen and (max-width: 480px)\"/\u003e\n```\n\n\u003e As modificações serão feitas em dispositivos de media screen e com resolução máxima de 480px.\n\n`or` Define a localização do arquivo.css.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"estilo.css\" media=\"all and (not color)\"/\u003e\n```\n\n`only` Define o tipo de saída do arquivo.\n\n## [Front] Layout multicolunas\nSua principal vantagem é a flexibilidade, pois independe de dispositivo. Esta especificação permite que o conteúdo da página se adeque de uma coluna para outra e o número de colunas pode variar dependendo do tamanho da janela.\n\nPara facilitar o seu entendimento, vamos direto a um exemplo:\n\nNo código CSS definimos em quantas colunas apresentaremos o texto, fazendo distinção de navegador (existem comandos específicos para cada navegador).\n\n```\ndiv {\n -webkit-column-count: 3; /* Chrome, Safari, Opera */\n -moz-column-count: 3; /* Firefox */\n column-count: 3;\n }\n\np { \n margin: 0; padding: 0; \n }\n\nimg { \n display: none;\n }\n```\n\nNo HTML temos um código simples de texto.\n\n```\n\u003cHTML\u003e\n\u003chead\u003e\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv\u003e\n \u003cp\u003eLorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Popularizou-se na década de 1960, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/HTML\u003e\n```\n\n\u003cblockquote\u003eSe diminuirmos o navegador, o layout irá se ajustar. Podemos ainda dividir as colunas com uma linha. Para isso, utilizaremos o CSS.\u003c/blockquote\u003e\n\n```\n div {\n -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3;\n /** Define o espaçamento entre as colunas **/ -webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -moz-column-gap: 30px; /* Firefox */ column-gap: 30px;\n /** Define uma linha solida entre as colunas **/\n -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; \n } \n p { margin: 0; padding: 0 }\n```\n\n## [Front] Flexbox Layout\n\u003cimg src=\"https://miro.medium.com/max/3200/1*K1TTuVckzyeMdv2qGIT_vA.png\" height=\"177\" align=\"right\"/\u003e\n\nO CSS Flexible Box Layout, conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação de candidatos (CR) do W3C. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela (ou dispositivo).\n\nÉ um novo algoritmo para disposição de boxes dentro do HTML. Este modelo permite um controle mais apurado do Box permitindo “dobrar” suas dimensões para preencher espaços não utilizados.\n\nVeja as propriedades a seguir:\u003c/p\u003e\n\u003cul\u003e\n \u003cli\u003e\u003cstrong\u003edisplay: ;\u003c/strong\u003e /*flex, inline-flex*/\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eflex-direction: ;\u003c/strong\u003e /*row, column, row-reverse, column-reverse*/\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eflex-wrap: ;\u003c/strong\u003e /*nowrap, wrap, wrap-reverse*/\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eflex-flow: ;\u003c/strong\u003e /*forma abreviada para declarar flex-direction e flex-wrap*/\u003c/li\u003e\n\u003c/ul\u003e\n\nVamos ao exemplo! Renderização dos boxes (.box1 e .box2) contidos no div#container renderizados segundo o Box Model CSS 2.1.\n\nObserve agora a estilização padrão da marcação e sua respectiva renderização.\n\n```css\n.container {\nwidth: 240px;\nheight: 240px;\n}\n\n.box-flex {\nwidth: 80px;\nheight: 80px;\n}\n\n.box-flex p {\ncolor: #fff;\nfont-weight: bold;\nmargin: 0 !important;\npadding: 0 !important;\n}\n\n.box1 {\nbackground-color: rgba(0, 153, 0, 0.9); /* verde 10% transparente */\n}\n.box2 {\nbackground-color: rgba(204, 51, 0, 0.9); /* vermelho 10% transparente */\n```\n\n```html\n\u003cdiv id=\"container\" class=\"container\"\u003e\n\n \u003cdiv class=\"box-flex box1\"\u003e\n\u003cp\u003eBox 1\u003c/p\u003e\n\u003c/div\u003e\n \u003cdiv class=\"box-flex box2\"\u003e\n\u003cp\u003eBox 2\u003c/p\u003e\n\u003c/div\u003e\n \u003c/div\u003e\n```\n\nAgora, iremos criar um identificador container e configurar como queremos colocar as caixas.\n\nCriar container:\n\n```css\n#container {\n display: box;\n box-align: stretch;\n box-orient: horizontal;\n}\n```\n\nDefinir a largura das caixas:\n```css\n.container {\n /*width: 240px;*/\n height: 240px;\n}\n```\n\nTornar o box flexível:\n```css\n.box-flex {\n box-flex: 1;\n}\n```\n\nDefinir as medias do box:\n\n```css\n.box-flex {\n/* width: 80px; */\nheight: 80px;\n}\n\n.box-flex p {\ncolor: #fff;\nfont-weight: bold;\nmargin: 0 !important;\npadding: 0 !important;\n}\n\n.box1 {\nbackground-color: rgba(0, 153, 0, 0.9); /* verde 10% transparente */\n}\n\n.box2 {\nbackground-color: rgba(204, 51, 0, 0.9); /* vermelho 10% transparente */\n```\n\n# 👓 [Front] Sass\n\u003cimg src=\"https://cdn.worldvectorlogo.com/logos/sass-1.svg\" height=\"77\" align=\"right\"\u003e\n\nPara um desenvolvimento web moderno, o CSS é muitas vezes visto como primitivo e incompleto. Há muitas funcionalidades que nos facilitaria na hora de desenvolver aplicações mais complexas. Um **pré-processador** é um programa que recebe um texto, realiza algumas alterações e nos devolve um novo texto. E isso já nos ajuda com parte do nosso problema! Só conseguimos estilizar nossas páginas com CSS. E se criássemos uma espécie de \"CSS com superpoderes\", criando novas funcionalidades? Então, nós usaríamos um pré-processador para utilizar esse código e transformar em CSS comum, fazendo com que qualquer navegador possa entender nosso código.\n\nAssim, podemos trabalhar melhor e com mais produtividade, fazendo proveito de funcionalidades que são inexistentes no CSS comum. Há vários pré-processadores, não só para CSS, mas também para JavaScript. Para CSS, os mais famosos são **Sass**, Less e Stylus. \n\nO HTML5, por si só, não possui pré-processadores, como o CSS tem o Sass ou Less. No entanto, existem ferramentas e linguagens que podem ser usadas em conjunto com HTML5 para facilitar o desenvolvimento web. Alguns exemplos incluem:\n\n1. **Pug (anteriormente conhecido como Jade)\u003c/code\u003e: Pug é uma linguagem de modelagem que compila para HTML. Ele permite que você escreva HTML de maneira mais concisa e legível, usando uma sintaxe simplificada.\n\n2. **HaResponsive\u003c/code\u003e: Assim como o Pug, o HaResponsive é outra linguagem de modelagem que visa simplificar a criação de HTML. Ele usa uma sintaxe mais limpa e minimalista do que o HTML tradicional.\n\n3. **Slim\u003c/code\u003e: Slim é semelhante ao HaResponsive e ao Pug, oferecendo uma sintaxe mais simples para escrever HTML. Ele é projetado para ser mais expressivo e fácil de ler do que o HTML padrão.\n\nEssas linguagens não são tecnicamente pré-processadores de HTML, mas podem ser usadas para gerar HTML de uma maneira mais eficiente e legível. Assim como o CSS tem pré-processadores como Sass e Less, o JavaScript também possui algumas ferramentas que podem ser consideradas pré-processadores ou linguagens que compilam para JavaScript. Alguns exemplos populares incluem:\n\n1. **TypeScript\u003c/code\u003e: TypeScript é um superconjunto tipado de JavaScript que adiciona tipos estáticos opcionais ao JavaScript. Ele compila para JavaScript padrão e é amplamente adotado em projetos grandes e complexos para fornecer verificação de tipo durante o desenvolvimento.\n\n2. **CoffeeScript\u003c/code\u003e: CoffeeScript é uma linguagem que compila para JavaScript. Ela tem uma sintaxe mais sucinta e expressiva do que o JavaScript padrão e é projetada para tornar a escrita de código JavaScript mais rápida e fácil.\n\n3. **Babel\u003c/code\u003e: Embora não seja estritamente um pré-processador, o Babel é uma ferramenta popular para transpilação de código JavaScript. Ele permite que você escreva código usando as últimas características do JavaScript (como as especificadas no ECMAScript 6 e posteriores) e compile esse código para uma versão compatível com navegadores mais antigos.\n\n4. **Elm\u003c/code\u003e: Elm é uma linguagem funcional compilada para JavaScript. Ela é projetada para criar aplicativos web front-end robustos e escaláveis, enfatizando a imutabilidade e a arquitetura de aplicativos orientada a modelos.\n\nEssas ferramentas e linguagens podem ser usadas para escrever JavaScript de maneira mais eficiente, segura e expressiva, facilitando o desenvolvimento de aplicativos web complexos.\n\nEntão, o Sass possui uma sintaxe muito parecida com o CSS comum. Isso significa que qualquer código CSS é interpretado pelo Sass! Possui uma grande comunidade e é utilizado por grandes frameworks, como o Bootstrap (que antigamente usava o Less), também possui um código bem maduro, com um desenvolvimento ativo há mais de 9 anos. Segundo uma pesquisa feita pelo ashleynola.co.uk, o Sass é utilizado por pelo menos 66% dos desenvolvedores. No Google Trends, se procurarmos por “Less” e “Sass”, veremos que o Sass é bem mais pesquisado. Ambos são ótimos pré-processadores e normalmente a escolha dependerá do gosto da equipe que estiver desenvolvendo o sistema.\n\nQuando começamos a ler sobre Sass, encontramos também o termo \"SCSS\". Afinal, qual a diferença? Sass é o nome do pré-processador, originalmente criado em Ruby. No começo, era necessário instalar o Ruby em sua máquina para poder gerar o CSS.\n\nA sintaxe era bem diferente do CSS comum:\n\n[![Sass](https://img.shields.io/badge/-style.sass-000?style=social\u0026logo=Sass\u0026logoColor=pink)](#)\n\n`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaacalves7%2Ffront-end","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisaacalves7%2Ffront-end","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaacalves7%2Ffront-end/lists"}