Se você estiver começando no desenvolvimento web e seu foco não é se especializar no front-end, umas das barreiras que pode ser mais dolorosa é conseguir estilizar de forma fácil seu HTML feioso.
Para quem tem o primeiro contato, é algo enigmático, místico, sobrenatural tentar entender um HTML que possui uma sequência de letras e números com classes utilitárias predefinidas para aplicar estilos ao HTML, por exemplo:
<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
Os frameworks CSS que utilizam classes utilitárias são excelentes, versáteis, responsivos, elegantes e possuem muitas outras qualidades, mas o Tailwind CSS não é a única solução. Se você precisa de algo rápido e mais simples, usar um framework CSS classless ou class-light será uma solução melhor.
Frameworks CSS classless estilizam elementos HTML diretamente, sem classes. Frameworks class-light combinam estilos automáticos com algumas classes utilitárias opcionais para personalização, o que adicionar maior versatilidade com seu uso.
Usando uma abordagem classless ou class-light você pode resolver a estilização do HTML de forma rápida com uma, duas ou três linhas.
Veremos a seguir:
- Utilização do framework Ruby on Rails na versão 8, com Propshaft e Importmap;
- Conhecendo o arquivo com o layout padrão das páginas HTML;
- Criando e adicionando conteúdo em 4 páginas HTML para testar a estilização com CSS;
- Uma breve menção sobre as rotas criadas para as páginas;
- Alterar o layout padrão para incluir o link para as páginas criadas;
- Adicionar 12 frameworks CSS via CDN ao layout padrão;
- Saber identificar se o frameworks CSS possui o modo light e dark configurados por padrão;
- Sugestões para os próximos passos;
Inicie um novo aplicativo Rails
- O
timeantes do comandorailsserve para exibir no final da execução do comando o seu tempo de execução. No exemplo abaixo, levou 47 segundos.
$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
O Rails 8, dentro de sua filosofia No Build, utilizará por padrão o Propshaft como biblioteca de pipeline de assets e o Importmap como biblioteca para JavaScript. O Importmap não realiza nenhum tipo de processamento do JavaScript.
Abra o projeto com o VSCode ou seu editor preferido
$ cd classless-css-cdn && code .
Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb.
Exibir mais …
application.html.erb como layout padrão para renderizar todas as páginas;<!DOCTYPE html>
<html>
<head>
<title><%= content_for(:title) || "Classless Css" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= yield :head %>
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
<head> … </head> possuem os elementos estruturais importantes para que a página seja renderizada e funcione corretamente. A tag headé usada para incluir metadados e recursos importantes que ajudam a configurar o comportamento da página (com javascript), sua aparência (com CSS), sua relação com outros sistemas e serviços e configurações de segurança como a proteção para CSRF e CSP ;<body> </body>, através da tag ERB <%= yield %>. Esta tag serve como ponto de integração para incluir o conteúdo de uma view renderizada dinamicamente pelo Rails;
Gere as páginas de teste, com um controller pages e as actions html_test_1, html_test_2, html_test_3 e html_test_4
Exibir mais …
$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
create app/controllers/pages_controller.rb
route get "pages/html_test_1"
get "pages/html_test_2"
get "pages/html_test_3"
get "pages/html_test_4"
invoke erb
create app/views/pages
create app/views/pages/html_test_1.html.erb
create app/views/pages/html_test_2.html.erb
create app/views/pages/html_test_3.html.erb
create app/views/pages/html_test_4.html.erb
invoke helper
create app/helpers/pages_helper.rb
Abra o arquivo config/routes.rb pelo VSCode
controller pages e action html_test_1 criados anteriormente. Assim, a primeira página a ser exibida ao acessar seu site ou sistema será a página html_test_1, do controller pages. Caso contrário, iria exibir a página padrão do rails.
root "pages#html_test_1"
--skip-routes ao criar o controller. O comando completo passaria a ser rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes
Exibindo as rotas do Rails
Usando o terminal, você pode exibir as rotas especificando um controller (com -c), por exemplo, do Ou pode exibir todas as rotas comExibir mais …
controller pages
$ rails routes -c pages
Prefix Verb URI Pattern Controller#Action
pages_html_test_1 GET /pages/html_test_1(.:format) pages#html_test_1
pages_html_test_2 GET /pages/html_test_2(.:format) pages#html_test_2
pages_html_test_3 GET /pages/html_test_3(.:format) pages#html_test_3
pages_html_test_4 GET /pages/html_test_4(.:format) pages#html_test_4
$ rails routes
Prefix Verb URI Pattern Controller#Action
/assets Propshaft::Server
pages_html_test_1 GET /pages/html_test_1(.:format) pages#html_test_1
pages_html_test_2 GET /pages/html_test_2(.:format) pages#html_test_2
pages_html_test_3 GET /pages/html_test_3(.:format) pages#html_test_3
pages_html_test_4 GET /pages/html_test_4(.:format) pages#html_test_4
rails_health_check GET /up(.:format) rails/health#show
(...)
http://127.0.0.1:3000/rails/info/routes. Não esqueça de iniciar o servidor de desenvolvimento com bin/dev ou o servidor rails padrão com rails server do diretório raíz do seu projeto. O servidor de desenvolvimento fica “escutando” alterações nos arquivos de javascript e nos arquivos de css para realizar o processamento necessário para disponibilizá-los aos usuários.Rails Livre Reload.
Vamos criar quatro páginas com conteúdo HTML para testar os estilos CSS.
O Ruby on Rails utiliza a arquitetura MVC (Model-View-Controller) por padrão para iniciar a organização de seu projeto. Boa parte do seu código está organizado nas seguintes pastas:
- Quando o código estiver relacionado à lógica de domínio/negócio e dados, mantenha na pasta
app/models; - O código relacionado à exibição (HTML, JSON, XML, etc...) ficará em
app/views; - Código elacionado ao ciclo de vida da requisição, ficará em
app/controllers;
Insira o conteúdo da página html_test_1
Exibir mais …
main, conforme abaixo
<main>
<section id="content" class="container">
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Element demos</h2>
<p>
This is supposed to be a demo page so we need more elements!
</p>
<h3>Form elements</h3>
<form>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john.doe@gmail.com">
</div>
<div>
<label for="id">User id (read only)</label>
<input readonly name="id" id="id" value="04D6H89Z">
</div>
<div>
<label for="disabled">Random disabled input</label>
<input disabled name="disabled" id="disabled" placeholder="Because why not?">
</div>
<div>
<label for="about">About me</label>
<textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
</div>
<div>
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember me</label>
</div>
<div>
<label>
<input type="checkbox" name="in-label" id="in-label" checked>
Is this checkbox inside a <code><label></code> element?
</label>
</div>
<div>
<fieldset>
<legend>Choose a cardinal direction:</legend>
<div>
<input type="radio" id="north" name="direction" value="north" checked>
<label for="north">North</label>
</div>
<div>
<input type="radio" id="east" name="direction" value="east">
<label for="east">East</label>
</div>
<div>
<input type="radio" id="south" name="direction" value="south">
<label for="south">South</label>
</div>
<div>
<input type="radio" id="west" name="direction" value="west">
<label for="west">West</label>
</div>
</fieldset>
</div>
<input type="submit">
</form>
<h3>Code</h3>
<p>
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
</p>
<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
<h3>Other</h3>
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
<img src="http://via.placeholder.com/408x287" alt="Example image">
<hr>
<p>And here's a nicely marked up table!</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Godzilla</td>
<td>2</td>
<td>$299.99</td>
</tr>
<tr>
<td>Mozilla</td>
<td>10</td>
<td>$100,000.00</td>
</tr>
<tr>
<td>Quesadilla</td>
<td>1</td>
<td>$2.22</td>
</tr>
</tbody>
</table>
<h3>Typography</h3>
<blockquote>
This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href="/">here</a>'s a link.
</p>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</article>
</section>
</main>
app/views/pages/html_test_1.html.erb e cole o conteúdo copiado acima
Insira o conteúdo da página html_test_2
Exibir mais …
<form action="/">, conforme abaixo
<form action="/">
<legend>A Sample Form Legend</legend>
<label for="name">Name: </label>
<input type="text" value="Name" name="Name" />
<label for="email">Email: </label>
<input type="email" value="Email" name="Email" />
<label>Button: </label>
<input type="button" value="Button" name="button" />
<label>Single Checkbox:
<input type="checkbox" value="checkbox1" name="button" /></label>
<fieldset>
<legend>Group of Checkboxes: </legend>
<label>Checkbox 1:
<input type="checkbox" value="checkbox1" name="checkgroup[]" /></label>
<label>Checkbox 2:
<input type="checkbox" value="checkbox2" name="checkgroup[]" /></label>
<label>Checkbox 3:
<input type="checkbox" value="checkbox3" name="checkgroup[]" /></label>
<label>Checkbox 4:
<input type="checkbox" value="checkbox4" name="checkgroup[]" /></label>
</fieldset>
<label>Color: </label>
<input type="color" value="color" name="color" />
<label>Date: </label>
<input type="date" value="date" name="date" />
<label>Date, Time (Local): </label>
<input type="datetime-local" value="datetime" name="datetime" />
<label>File: </label>
<input type="file" value="file" name="file" />
<input type="hidden" value="hidden" name="hidden" />
<label>Image: </label>
<input type="image" value="image" name="image" />
<label>Month: </label>
<input type="month" value="month" name="month" />
<label>Number: </label>
<input type="number" value="number" name="number" />
<label>Password: </label>
<input type="password" value="password" name="password" />
<label>Single Radio:
<input type="radio" value="radio" name="radio" /></label>
<fieldset>
<legend>Group of Radios: </legend>
<label>Radio 1:
<input type="radio" value="radio1" name="radiogroup" /></label>
<label>Radio 2:
<input type="radio" value="radio2" name="radiogroup" /></label>
<label>Radio 3:
<input type="radio" value="radio3" name="radiogroup" /></label>
<label>Radio 4:
<input type="radio" value="radio4" name="radiogroup" /></label>
</fieldset>
<label>Range: </label>
<input type="range" value="range" name="range" />
<label>Reset: </label>
<input type="reset" value="reset" name="reset" />
<label>Time: </label>
<input type="time" value="time" name="time" />
<label>Search: </label>
<input type="search" value="search" name="search" />
<label>Tel: </label>
<input type="tel" value="tel" name="tel" />
<label>Text: </label>
<input type="text" value="text" name="text" />
<label>URL: </label>
<input type="url" value="url" name="url" />
<label>Week: </label>
<input type="week" value="week" name="week" />
<button>This is a button!</button>
<label>Select 1: </label>
<select name="select" size="1">
<option>Test</option>
<option>Test</option>
</select>
<label>Select 2: </label>
<select name="select1" size="3">
<option>Test</option>
<option>Test</option>
</select>
<label>Select Multiple: </label>
<select name="select2" size="3" multiple>
<option>Test</option>
<option>Test</option>
</select>
<label>Select Groups: </label>
<select name="select3" size="1" multiple>
<optgroup label="First Group">
<option>Test</option>
<option>Test</option>
</optgroup>
<optgroup label="Second Group">
<option>Test</option>
<option>Test</option>
</optgroup>
<optgroup label="Third Group">
<option>Test</option>
<option>Test</option>
</optgroup>
</select>
<fieldset>
<legend>Datalist: </legend>
<input type="text" name="datalist" list="samplelist">
<datalist id="samplelist">
<option>Something</option>
<option>Something else</option>
<option>Another thing</option>
</datalist>
</fieldset>
<label>A textarea!</label>
<textarea name="textarea">A paragraph in here</textarea>
<label>Progress (very unsupported): </label>
<progress value="20" max="100"></progress>
<label>Meter (very unsupported): </label>
<meter min="0" value="20" max="100" low="10" high="90" optimum="80">20 in the meter</meter>
<input type="submit" value="GO" />
</form>
app/views/pages/html_test_2.html.erb e cole o conteúdo copiado acima
Insira o conteúdo da página html_test_3
Acesse o link https://github.com/cbracco/html5-test-page/blob/master/index.html e copie todo o conteúdo Exibir mais …
da <div> após <body>, que possui o texto <div id="top" role="document"> . Troque o texto “index.html”por <%= root_path %> sem aspas. Ele aparece em três lugares e já foi substituído no HTML abaixo:
<nav>
<ul>
<li>
<a href="#text">Text</a>
<ul>
<li><a href="#text__headings">Headings</a></li>
<li><a href="#text__paragraphs">Paragraphs</a></li>
<li><a href="#text__lists">Lists</a></li>
<li><a href="#text__blockquotes">Blockquotes</a></li>
<li><a href="#text__details">Details / Summary</a></li>
<li><a href="#text__address">Address</a></li>
<li><a href="#text__hr">Horizontal rules</a></li>
<li><a href="#text__tables">Tabular data</a></li>
<li><a href="#text__code">Code</a></li>
<li><a href="#text__inline">Inline elements</a></li>
<li><a href="#text__comments">HTML Comments</a></li>
</ul>
</li>
<li>
<a href="#embedded">Embedded content</a>
<ul>
<li><a href="#embedded__images">Images</a></li>
<li><a href="#embedded__bgimages">Background images</a></li>
<li><a href="#embedded__audio">Audio</a></li>
<li><a href="#embedded__video">Video</a></li>
<li><a href="#embedded__canvas">Canvas</a></li>
<li><a href="#embedded__meter">Meter</a></li>
<li><a href="#embedded__progress">Progress</a></li>
<li><a href="#embedded__svg">Inline SVG</a></li>
<li><a href="#embedded__iframe">IFrames</a></li>
<li><a href="#embedded__embed">Embed</a></li>
<li><a href="#embedded__object">Object</a></li>
</ul>
</li>
<li>
<a href="#forms">Form elements</a>
<ul>
<li><a href="#forms__input">Input fields</a></li>
<li><a href="#forms__select">Select menus</a></li>
<li><a href="#forms__checkbox">Checkboxes</a></li>
<li><a href="#forms__radio">Radio buttons</a></li>
<li><a href="#forms__textareas">Textareas</a></li>
<li><a href="#forms__html5">HTML5 inputs</a></li>
<li><a href="#forms__action">Action buttons</a></li>
</ul>
</li>
</ul>
</nav>
<main>
<section id="text">
<header><h1>Text</h1></header>
<article id="text__headings">
<header>
<h2>Headings</h2>
</header>
<div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__paragraphs">
<header><h2>Paragraphs</h2></header>
<div>
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__blockquotes">
<header><h2>Blockquotes</h2></header>
<div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<cite><a href="#!">Said no one, ever.</a></cite>
</blockquote>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__lists">
<header><h2>Lists</h2></header>
<div>
<h3>Definition list</h3>
<dl>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>
<h3>Ordered List</h3>
<ol type="1">
<li>List Item 1</li>
<li>
List Item 2
<ol type="A">
<li>List Item 1</li>
<li>
List Item 2
<ol type="a">
<li>List Item 1</li>
<li>
List Item 2
<ol type="I">
<li>List Item 1</li>
<li>
List Item 2
<ol type="i">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__blockquotes">
<header><h1>Blockquotes</h1></header>
<div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<cite><a href="#!">Said no one, ever.</a></cite>
</blockquote>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__details">
<header><h1>Details / Summary</h1></header>
<details>
<summary>Expand for details</summary>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
</details>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__address">
<header><h1>Address</h1></header>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__hr">
<header><h2>Horizontal rules</h2></header>
<div>
<hr>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__tables">
<header><h2>Tabular data</h2></header>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__code">
<header><h2>Code</h2></header>
<div>
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
<p><strong>Inline code:</strong> <code><div>code</div></code></p>
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
<h2>Pre-formatted text</h2>
<pre>P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__inline">
<header><h2>Inline elements</h2></header>
<div>
<p><a href="#!">This is a text link</a>.</p>
<p><strong>Strong is used to indicate strong importance.</strong></p>
<p><em>This text has added emphasis.</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
<p>The <i>i element</i> is text that is offset from the normal text.</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
<p><s>This text has a strikethrough</s>.</p>
<p>Superscript<sup>®</sup>.</p>
<p>Subscript for things like H<sub>2</sub>O.</p>
<p><small>This small text is small for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
<p><cite>This is a citation.</cite></p>
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight.</p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__comments">
<header><h2>HTML Comments</h2></header>
<div>
<p>There is comment here: <!--This comment should not be displayed--></p>
<p>There is a comment spanning multiple tags and lines below here.</p>
<!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
<p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
<p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>
<section id="embedded">
<header><h2>Embedded content</h2></header>
<article id="embedded__images">
<header><h2>Images</h2></header>
<div>
<h3>Plain <code><img></code> element</h3>
<p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
<h3><code><figure></code> element with <code><img></code> element</h3>
<figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
<h3><code><figure></code> element with <code><img></code> and <code><figcaption></code> elements</h3>
<figure>
<img src="https://placekitten.com/420/420" alt="Photo of a kitten">
<figcaption>Here is a caption for this image.</figcaption>
</figure>
<h3><code><figure></code> element with a <code><picture></code> element</h3>
<figure>
<picture>
<source srcset="https://placekitten.com/800/800"
media="(min-width: 800px)">
<img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
</picture>
</figure>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__bgimages">
<header><h2>Background images</h2></header>
<div style="background-image:url('https://placekitten.com/300/300'); width:300px; height: 300px;"></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__audio">
<header><h2>Audio</h2></header>
<div><audio controls="">audio</audio></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__video">
<header><h2>Video</h2></header>
<div><video controls="">video</video></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__canvas">
<header><h2>Canvas</h2></header>
<div><canvas>canvas</canvas></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__meter">
<header><h2>Meter</h2></header>
<div><meter value="2" min="0" max="10">2 out of 10</meter></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__progress">
<header><h2>Progress</h2></header>
<div><progress>progress</progress></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__svg">
<header><h2>Inline SVG</h2></header>
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__iframe">
<header><h2>IFrame</h2></header>
<div><iframe src=<%= root_path %> height="300"></iframe></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__embed">
<header><h2>Embed</h2></header>
<div><embed src=<%= root_path %> height="300"></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__object">
<header><h2>Object</h2></header>
<div><object data=<%= root_path %> height="300"></object></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>
<section id="forms">
<header><h2>Form elements</h2></header>
<form>
<fieldset id="forms__input">
<legend>Input fields</legend>
<p>
<label for="input__text">Text Input</label>
<input id="input__text" type="text" placeholder="Text Input">
</p>
<p>
<label for="input__password">Password</label>
<input id="input__password" type="password" placeholder="Type your Password">
</p>
<p>
<label for="input__webaddress">Web Address</label>
<input id="input__webaddress" type="url" placeholder="https://yoursite.com">
</p>
<p>
<label for="input__emailaddress">Email Address</label>
<input id="input__emailaddress" type="email" placeholder="name@email.com">
</p>
<p>
<label for="input__phone">Phone Number</label>
<input id="input__phone" type="tel" placeholder="(999) 999-9999">
</p>
<p>
<label for="input__search">Search</label>
<input id="input__search" type="search" placeholder="Enter Search Term">
</p>
<p>
<label for="input__text2">Number Input</label>
<input id="input__text2" type="number" placeholder="Enter a Number">
</p>
<p>
<label for="input__file">File Input</label>
<input id="input__file" type="file">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__select">
<legend>Select menus</legend>
<p>
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
<p>
<label for="select_multiple">Select (multiple)</label>
<select id="select_multiple" multiple="multiple">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__checkbox">
<legend>Checkboxes</legend>
<ul>
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__radio">
<legend>Radio buttons</legend>
<ul>
<li><label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"> Option 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio"> Option 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio"> Option 3</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__textareas">
<legend>Textareas</legend>
<p>
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__html5">
<legend>HTML5 inputs</legend>
<p>
<label for="ic">Color input</label>
<input type="color" id="ic" value="#000000">
</p>
<p>
<label for="in">Number input</label>
<input type="number" id="in" min="0" max="10" value="5">
</p>
<p>
<label for="ir">Range input</label>
<input type="range" id="ir" value="10">
</p>
<p>
<label for="idd">Date input</label>
<input type="date" id="idd" value="1970-01-01">
</p>
<p>
<label for="idm">Month input</label>
<input type="month" id="idm" value="1970-01">
</p>
<p>
<label for="idw">Week input</label>
<input type="week" id="idw" value="1970-W01">
</p>
<p>
<label for="idt">Datetime input</label>
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
</p>
<p>
<label for="idtl">Datetime-local input</label>
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
</p>
<p>
<label for="idl">Datalist</label>
<input type="text" id="idl" list="example-list">
<datalist id="example-list">
<option value="Example #1" />
<option value="Example #2" />
<option value="Example #3" />
</datalist>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__action">
<legend>Action buttons</legend>
<p>
<input type="submit" value="<input type=submit>">
<input type="button" value="<input type=button>">
<input type="reset" value="<input type=reset>">
<input type="submit" value="<input disabled>" disabled>
</p>
<p>
<button type="submit"><button type=submit></button>
<button type="button"><button type=button></button>
<button type="reset"><button type=reset></button>
<button type="button" disabled><button disabled></button>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
</form>
</section>
</main>
<footer>
<p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
</footer>
app/views/pages/html_test_3.html.erb e cole o conteúdo copiado acima
Insira o conteúdo da página html_test_4
Exibir mais …
<main id="main">, conforme abaixo, removendo tudo que estiver entre as tags <script> </script>. O HTML limpo pode ser visto a seguir
<main id="main">
<nav id="nav">
<h2>Navigation</h2>
<ul>
<li><a href="#sections">Sections</a></li>
<li><a href="#grouping-content">Grouping content</a></li>
<li><a href="#text-level-semantics">Text-level semantics</a></li>
<li><a href="#edits">Edits</a></li>
<li><a href="#embedded-content">Embedded content</a></li>
<li><a href="#tabular-data">Tabular data</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#interactive-elements">Interactive elements</a></li>
<li><a href="#scripting">Scripting</a></li>
</ul>
</nav>
<section id="sections">
<header>
<h2>Sections</h2>
<p>Elements: <code><body></code>, <code><article></code>, <code><section></code>, <code><nav></code>, <code><aside></code>, <code><h1>–<h6></code>, <code><header></code>, <code><footer></code></p>
</header>
<article>
<header>
<h3><code><h1>–<h6></code>:</h3>
</header>
<!--
Note that, in this context, this use of <h*>s is not of appropriate
(accessible) rank, but used for testing purposes.
-->
<h1><code><h1></code> A unique title, specific for the page</h1>
<h2><code><h2></code> Heading levels should reflect structure, not style</h2>
<p>It can also be useful to test how body text below a heading appears on the page, for example to check the margin. This text is wrapped in <p> and is a direct sibling to the above <h2>.</p>
<h3><code><h3></code> If you need a visually smaller title, use CSS</h3>
<p>To create a semantically correct HTML structure that's accessible for everyone, make sure you're nesting the headings correctly. Never use more than one <h1> per page, and don't skip heading levels.</p>
<h4><code><h4></code> Headings below level 4 are not used as much</h4>
<h5><code><h5></code> But that doesn't mean you should forget about them</h5>
<h6><code><h6></code> And last, but not least, the heading with the lowest rank</h6>
</article>
<article id="article">
<header id="header">
<h3><code><body> + <article> + <section> + <nav> + <aside> + <header> + <footer></code>:</h3>
</header>
<p>All these tags are already in use on the page. The list below contains links to each use case. See the source code of this file for more details.</p>
<ul>
<li><a href="#body"><code><body></code></a></li>
<li><a href="#article"><code><article></code></a></li>
<li><a href="#sections"><code><section></code></a></li>
<li><a href="#nav"><code><nav></code></a></li>
<li><a href="#aside"><code><aside></code></a></li>
<li><a href="#header"><code><header></code></a></li>
<li><a href="#footer"><code><footer></code></a></li>
</ul>
</article>
<footer id="footer">
<a href="#body">Back to top 👆</a>
</footer>
</section>
<section id="grouping-content">
<header>
<h2>Grouping content</h2>
<p>Elements: <code><p></code>, <code><address></code>, <code><hr></code>, <code><pre></code>, <code><blockquote></code>, <code><ol></code>, <code><ul></code>, <code><li></code>, <code><dl></code>, <code><dt></code>, <code><dd></code>, <code><figure></code>, <code><figcaption></code>, <code><main></code>, <code><div></code></p>
</header>
<article>
<header>
<h3><code><p></code>:</h3>
</header>
<p>Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. [1]</p>
</article>
<article>
<header>
<h3><code><address></code>:</h3>
</header>
<address>
Name: Alexander Sandberg<br>
Street adress: 1 Rover street<br>
State: N/A<br>
Planet: Mars<br>
Digital home: <a href="https://alexandersandberg.com">alexandersandberg.com</a><br>
</address>
</article>
<article>
<header>
<h3><code><hr></code>:</h3>
</header>
<hr>
</article>
<article>
<header>
<h3><code><pre></code>:</h3>
</header>
<pre>Preformatted text
will be presented
exactly as written
in the HTML file.
</pre>
</article>
<article>
<header>
<h3><code><blockquote></code>:</h3>
</header>
<blockquote>
<p>The text inside this blockquote is wrapped in <code><p></code> tags. Sometimes the quote is really long, and possibly have to occupy multiple lines, but that shouldn't be a problem.</p>
</blockquote>
</article>
<article>
<header>
<h3><code><ol> + <ul> + <li></code>:</h3>
</header>
<ol>
<li>List item 1</li>
<li>List item 2
<ol>
<li>List item 1</li>
</ol>
</li>
<li>List item 3
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</li>
<li>List item 2</li>
</ul>
</li>
<li>List item 3</li>
</ul>
</li>
<li>List item 4</li>
</ol>
<ul>
<li>List item 1
<ul>
<li>List item 1
<ul>
<li>List item 1</li>
</ul>
</li>
<li>List item 2</li>
</ul>
</li>
<li>List item 2</li>
<li>List item 3
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</li>
</ul>
</article>
<article>
<header>
<h3><code><dl> + <dt> + <dd></code>:</h3>
</header>
<dl>
<dt>This is a term</dt>
<dd>And this is the accompanying description, explaining the above term.</dd>
<dd>You can also have multiple descriptions (<code><dt></code>), like this one, for each term (<code><dt></code>).</dd>
<dd>And why not nest lists inside this description?
<dl>
<dt>Another term</dt>
<dd>With some description.</dd>
</dl>
<ul>
<li>List item 1</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</dd>
</dl>
</article>
<article>
<header>
<h3><code><figure> + <figcaption></code>:</h3>
</header>
<p>Used with an <code><img></code>:</p>
<figure>
<img src="https://placekeanu.com/600/300" alt="Keanu Reeves looking fine">
<figcaption>Wholesome Keanu Reeves from <a href="https://placekeanu.com" target="_blank">placekeanu.com</a>.</figcaption>
</figure>
<p>Used with a <code><blockquote></code>:</p>
<figure>
<blockquote>
<p>Seek wealth, not money or status. Wealth is having assets that earn while you sleep. Money is how we transfer time and wealth. Status is your place in the social hierarchy.</p>
</blockquote>
<figcaption>
<cite>Naval Ravikant (@naval)</cite> on <a href="https://twitter.com/naval/status/1002103497725173760">Twitter</a>.
</figcaption>
</figure>
</article>
<article>
<header>
<h3><code><main></code>:</h3>
</header>
<p>See the <a href="#main">main content</a> of this page for a use case of <code><main></code>.</p>
</article>
<article>
<header>
<h3><code><div></code>:</h3>
</header>
<div>
<p>This paragraph of text is contained inside a <code><div></code>. The element really has no special meaning, other than grouping content together, and should be used as a last resort when no other element is suitable.</p>
</div>
</article>
<footer>
<a href="#body">Back to top 👆</a>
</footer>
</section>
<section id="text-level-semantics">
<header>
<h2>Text-level semantics</h2>
<p>Elements: <code><a></code>, <code><em></code>, <code><strong></code>, <code><small></code>, <code><s></code>, <code><cite></code>, <code><q></code>, <code><dfn></code>, <code><abbr></code>, <code><ruby></code>, <code><rb></code>, <code><rt></code>, <code><rtc></code>, <code><rp></code>, <code><data></code>, <code><time></code>, <code><code></code>, <code><var></code>, <code><samp></code>, <code><kbd></code>, <code><sub></code>, <code><sup></code>, <code><i></code>, <code><b></code>, <code><u></code>, <code><mark></code>, <code><bdi></code>, <code><bdo></code>, <code><span></code>, <code><br></code>, <code><wbr></code></p>
</header>
<article id="a">
<header>
<h3><code><a></code>:</h3>
</header>
<p>Here is <a href="#a">a link</a> inside a paragraph of text. Below you can find a list of links with different <code>href</code> attributes.</p>
<ul>
<li><a href="https://github.com/alexandersandberg/html5-elements-tester">Link to an external website</a></li>
<li><a href="#a">Anchor link to this element</a></li>
<li><a href="">Link with an empty <code>href</code> attribute</a></li>
<li><a>Link missing an <code>href</code> attribute</a></li>
</ul>
</article>
<article>
<header>
<h3><code><em> + <i> + <strong> + <b></code>:</h3>
</header>
<p>The <code><em></code> element represents <em>stress emphasis</em> of its contents. Meanwhile, <code><i></code> is since HTML5 used for text in an alternative voice or mood, or otherwise offset from the <i>normal prose</i>, as you may define it.</p>
<p>If you want to <b>draw attention</b> to some text, feel free to use <code><b></code>. However, if you want to mark the importance of something, <strong>you should use <code><strong></code></strong>.</p>
</article>
<article>
<header>
<h3><code><small> + <u> + <mark> + <s></code>:</h3>
</header>
<p><small>When you want your text to represent small print, use <code><small></code>.</small></p>
<p>In most cases, there's a better element than <code><u></code> to use, but it can be useful for labelling <u>msispelt</u> text. Avoid using it, however, where the text could be confused for a hyperlink.</p>
<p>You can <mark>highlight text</mark> for reference purposes with <code><mark></code>, or if the contents is <s>no longer accurate or relevant</s>, wrap it with <code><s></code>.</p>
</article>
<article>
<header>
<h3><code><abbr> + <dfn></code>:</h3>
</header>
<p>By wrapping an abbreviation like <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> in both <code><dfn></code> and <code><abbr></code>, we define the term. This can later be used only using <code><abbr></code>, since we already defined <abbr title="Cascading Style Sheets">CSS</abbr> once before.</p>
</article>
<article>
<header>
<h3><code><q> + <cite> + <data> + <time></code>:</h3>
</header>
<p>When citing creative work, include the reference with a <code><cite></code> element. <cite>www.w3.org</cite> explains that <q>A citation is not a quote (for which the <code><q></code> element is appropriate)</q> instead, like used here.</p>
<p>If you want to link content with a <data value="123">machine-readable</data> translation, use <code><data></code> with a <code>value</code> attribute. However, if this data is a time- or date-related, like the date <time datetime="2019-07-04">July 4</time>, you have to use <code><time></code> together with the <code>datatime</code> attribute.</p>
</article>
<article>
<header>
<h3><code><code> + <var> + <samp> + <kbd> + <sub> + <sup></code>:</h3>
</header>
<p>When sharing code-snippets, make sure to use the <code><code></code> element. This can be done both <code>display: inline;</code>, as well as block-level:</p>
<pre><code>* {
color: rebeccapurple;
background: aliceblue;
}</code></pre>
<p>Variables should be surrounded by <code><var></code>, or <var>x</var> amount of people might be confused.</p>
<p>Sample or quotes output are represented with <code><samp></code>: <samp>Your expression '1 + 1' equals 2</samp>.</p>
<p>To represent user input, like the shortcut <kbd><kbd>Cmd</kbd> + <kbd>R</kbd></kbd> on macOS, use <code><kbd></code>.</p>
<p>If you want to <sub>subscript</sub> or <sup>superscript</sup> text, use <code><sub></code> or <code><sup></code>.</p>
</article>
<article>
<header>
<h3><code><bdi> + <bdo> + <ruby> + <rb> + <rt> + <rtc> + <rp></code>:</h3>
</header>
<p>Consider using <code><bdi></code> when working with bidirectional content, like the names <bdi>Alexander</bdi> and <bdi>علي</bdi>.</p>
<p>If you need to override the bidirectional algorithm for some content and its children, use <code><bdo></code>:</p>
<p><bdo dir="rtl">Don't forget to specify the <code>dir</code> attribute!</bdo></p>
<p><bdo dir="ltr">I said, don't forget to specify the <code>dir</code> attribute!</bdo></p>
<p>Some use of <code><ruby></code> and its related elements:</p>
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
<br>
<ruby><rb>旧<rb>金<rb>山<rt>jiù<rt>jīn<rt>shān<rtc>San Francisco</ruby>
<p>More information about the explanation and usage of these can be <a href="https://www.w3.org/TR/2017/REC-html52-20171214/single-page.html#the-ruby-element" target="_blank">read here on www.w3.org</a>.</p>
</article>
<article>
<header>
<h3><code><span> + <br> + <wbr></code>:</h3>
</header>
<p>A <code><span></code> can be used to mark up inline text for various uses, <span style="font-weight: bolder;">here to make the text bolder</span>.</p>
<p>If you have really long text you might want to insert a<br>blank line with the <code><br></code> element. You can also insert word breaking opportunities using <code><wbr></code>, to help the browser break long words like Pneumonoultramicro<wbr>scopicsilico<wbr>volcanoconiosis.
</p>
</article>
<footer>
<a href="#body">Back to top 👆</a>
</footer>
</section>
<section id="edits">
<header>
<h2>Edits</h2>
<p>Elements: <code><ins></code>, <code><del></code></p>
</header>
<article>
<header>
<h3><code><ins> + <del></code>:</h3>
</header>
<p>If you make a <del>really huge</del> mistake, you can always go back and fix it later. <ins>And don't forget to learn from your mistake.</ins></p>
<ins><p>Both <code><ins></code> and <code><del></code> can be block-level, like this.</p></ins>
<del><p>Here's a block-level paragraph removal.</p></del>
</article>
<footer>
<a href="#body">Back to top 👆</a>
</footer>
</section>
<section id="embedded-content">
<header>
<h2>Embedded content</h2>
<p>Elements: <code><picture></code>, <code><source></code>, <code><img></code>, <code><iframe></code>, <code><embed></code>, <code><object></code>, <code><param></code>, <code><video></code>, <code><audio></code>, <code><track></code>, <code><map></code>, <code><area></code>, <code><math></code>, <code><svg></code></p>
</header>
<article>
<header>
<h3><code><img> + <svg></code>:</h3>
</header>
<img src="https://placekeanu.com/600/250/g" alt="Keanu Reeves looking fine">
<svg height="250" width="510">
<polygon points="220,10 300,210 200,245 123,234" style="fill:tomato;stroke:rebeccapurple;stroke-width:5" />
This is a fallback message. If you see this, your browser does not support inline SVG.
</svg>
</article>
<article>
<header>
<h3><code><picture> + <source></code>:</h3>
</header>
<p>A different image will be shown depending on viewport size.</p>
<picture>
<source srcset="https://placekeanu.com/800/400/y" media="(min-width: 1200px)">
<img src="https://placekeanu.com/400/300" alt="Keanu Reeves looking fine">
</picture>
</article>
<article>
<header>
<h3><code><iframe></code>:</h3>
</header>
<iframe src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=New%20york+(HTML5%20Elements%20Tester)&ie=UTF8&t=k&z=14&iwloc=B&output=embed"></iframe>
</article>
<article>
<header>
<h3><code><embed></code>:</h3>
</header>
<embed src="http://techslides.com/demos/samples/sample.webm" type="video/webm">
</article>
<article>
<header>
<h3><code><object> + <param></code>:</h3>
</header>
<object data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" type="application/pdf">
<param name="parameter" value="example">
</object>
</article>
<article>
<header>
<h3><code><video> + <audio> + <track></code>:</h3>
</header>
<audio controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3">
<p>This is a fallback text. If you see this, your browser does not support embedded audio.</p>
</audio>
<p>Audio is from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio">an example on MDN</a>.</p>
<video controls width="400">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.mp4" type="video/mp4">
<track default kind="captions" srclang="en" src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt">
<p>This is a fallback text. If you see this, your browser does not support embedded videos.</p>
</video>
<p>Video and subtitles are from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track">an example on MDN</a>.</p>
</article>
<article>
<header>
<h3><code><map> + <area></code>:</h3>
</header>
<p>Each side of the image below is linked to different anchors on this page. Give it a try!</p>
<map name="image-map" id="image-map">
<area shape="circle" coords="75,75,75" href="#image-map">
<area shape="circle" coords="275,75,75" href="#body">
</map>
<img usemap="#image-map" src="https://placekeanu.com/350/150/y" alt="Keanu Reeves looking fine">
</article>
<article>
<header>
<h3><code><math></code>:</h3>
</header>
<p>The quadratic formula is:<br>
<math>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">-</mo> <mi>b</mi>
<mo>±</mo>
<msqrt>
<msup> <mi>b</mi> <mn>2</mn> </msup>
<mo>-</mo>
<mn>4</mn> <mo></mo> <mi>a</mi> <mo></mo> <mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn> <mo></mo> <mi>a</mi>
</mrow>
</mfrac>
</math>
</p>
</article>
<footer>
<a href="#body">Back to top 👆</a>
</footer>
</section>
<section id="tabular-data">
<header>
<h2>Tabular data</h2>
<p>Elements: <code><table></code>, <code><caption></code>, <code><colgroup></code>, <code><col></code>, <code><tbody></code>, <code><thead></code>, <code><tfoot></code>, <code><tr></code>, <code><td></code>, <code><th></code></p>
</header>
<article>
<header>
<h3><code><table> + <caption> + <colgroup> + <col>+ <tbody> + <thead> + <tfoot> + <tr> + <td> + <th></code>:</h3>
</header>
<table>
<caption>This is the table caption</caption>
<colgroup>
<col>
<col span="2">
<col span="1">
</colgroup>
<thead>
<tr>
<th><code><thead></code></th>
<th>2nd colgroup</th>
<th>2nd colgroup</th>
<th>3rd colgroup</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code><tbody></code></th>
<td colspan="2">This is a cell spanning two columns</td>
<td>Last column</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row"><code><tfoot></code></th>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tfoot>
</table>
</article>
<footer>
<a href="#body">Back to top 👆</a>
</footer>
</section>
<section id="forms">
<header>
<h2>Forms</h2>
<p>Elements: <code><form></code>, <code><label></code>, <code><input></code>, <code><button></code>, <code><select></code>, <code><datalist></code>, <code><optgroup></code>, <code><option></code>, <code><textarea></code>, <code><output></code>, <code><progress></code>, <code><meter></code>, <code><fieldset></code>, <code><legend></code></p>
</header>
<article>
<header>
<h3><code><form> + <label> + <input> + <button> + <select> + <datalist> + <optgroup> + <option> + <textarea> + <fieldset> + <legend></code>:</h3>
</header>
<form action="#forms">
<fieldset>
<legend>Welcome to the form</legend>
<p>
<label for="input-hidden">
Hidden: <input type="hidden" id="input-hidden">
</label>
</p>
<p>
<label for="input-text">
Text: <input type="text" id="input-text">
</label>
</p>
<p>
<label for="input-text-readonly">
Text (readonly): <input type="text" id="input-text-readonly" value="You can't change this" readonly>
</label>
</p>
<p>
<label for="input-text-disabled">
Text (disabled): <input type="text" id="input-text-disabled" value="This is not available" disabled>
</label>
</p>
<p>
<label for="input-search">
Search: <input type="search" id="input-search">
</label>
</p>
<p>
<label for="input-tel">
Telephone: <input type="tel" id="input-tel">
</label>
</p>
<p>
<label for="input-url">
URL: <input type="url" id="input-url">
</label>
</p>
<p>
<label for="input-email">
Email: <input type="email" id="input-email">
</label>
</p>
<p>
<label for="input-password">
Password: <input type="password" id="input-password">
</label>
</p>
<p>
<label for="input-date">
Date: <input type="date" id="input-date">
</label>
</p>
<p>
<label for="input-month">
Month: <input type="month" id="input-month">
</label>
</p>
<p>
<label for="input-week">
Week: <input type="week" id="input-week">
</label>
</p>
<p>
<label for="input-time">
Time: <input type="time" id="input-time">
</label>
</p>
<p>
<label for="input-datetime-local">
Datetime-local: <input type="datetime-local" id="input-datetime-local">
</label>
</p>
<p>
<label for="input-number">
Number: <input type="number" id="input-number">
</label>
</p>
<p>
<label for="input-range">
Range: <input type="range" id="input-range">
</label>
</p>
<p>
<label for="input-color">
Color: <input type="color" id="input-color">
</label>
</p>
<p>
<label for="input-checkbox-1">
Checkbox 1: <input type="checkbox" id="input-checkbox-1" name="checkbox">
</label>
<label for="input-checkbox-2">
Checkbox 2: <input type="checkbox" id="input-checkbox-2" name="checkbox">
</label>
<label for="input-checkbox-3">
Checkbox 3 (disabled): <input type="checkbox" id="input-checkbox-3" name="checkbox" disabled>
</label>
</p>
<p>
<label for="input-radio-1">
Radio 1: <input type="radio" id="input-radio-1" name="radio">
</label>
<label for="input-radio-2">
Radio 2: <input type="radio" id="input-radio-2" name="radio">
</label>
<label for="input-radio-3">
Radio 3 (disabled): <input type="radio" id="input-radio-3" name="radio" disabled>
</label>
</p>
<p>
<label for="select">
Select: <select name="select" id="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</label>
</p>
<p>
<label for="select-size">
Select (size): <select name="select-size" id="select-size" size=5>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>
</label>
</p>
<p>
<label for="select-multiple">
Select (multiple): <select name="select-multiple" id="select-multiple" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</label>
</p>
<p>
<label for="select-optgroup">
Select with optgroup: <select name="select-optgroup" id="select-optgroup">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</optgroup>
</select>
</label>
</p>
<p>
<label for="datalist">
Datalist:
<input name="datalist" list="datalist">
<datalist id="datalist">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
<option value="Option 4">
</datalist>
</label>
</p>
<p>
<label for="textarea">
Textarea: <textarea name="textarea" id="textarea"></textarea>
</label>
</p>
<p>
<label for="input-file">
File (single): <input type="file" id="input-file">
</label>
</p>
<p>
<label for="input-file-multiple">
File (multiple): <input type="file" id="input-file-multiple" multiple>
</label>
</p>
<p>
<label for="input-submit">
Submit: <input type="submit" id="input-submit">
</label>
</p>
<p>
<label for="input-image">
Image button: <input type="image" id="input-image" src="https://placekeanu.com/100/40">
</label>
</p>
<p>
<label for="input-reset">
Reset: <input type="reset" id="input-reset">
</label>
</p>
<p>
<label for="input-button">
Button: <input type="button" id="input-button" value="I'm an input with type=button">
</label>
</p>
<p>
<button type="button">I'm a <code><button></code></button>
</p>
</fieldset>
</form>
</article>
<article>
<header>
<h3><code><output></code>:</h3>
</header>
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
<fieldset>
<legend>Testing the <code><output></code> element</legend>
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output name=o for="a b"></output>
<p>Code is taken from <a href="https://www.w3.org/TR/2017/REC-html52-20171214/single-page.html#example-5b22c23a" target="_blank">this example by W3</a>.</p>
</fieldset>
</form>
</article>
<article>
<header>
<h3><code><progress> + <meter></code>:</h3>
</header>
<form action="#forms">
<fieldset>
<legend>Testing <code><progress></code> and <code><meter></code></legend>
<p>
<label for="progress">
Progress: <progress id="progress" max="100" value="64">64%</progress>
</label>
</p>
<p>
<label for="meter-2">
Meter (ok): <meter id="meter-2" max="100" low="30" high="80" optimum="50" value="50">50/100</meter>
</label>
</p>
<p>
<label for="meter-1">
Meter (warning): <meter id="meter-1" max="100" low="30" high="80" optimum="50" value="20">20/100</meter>
</label>
</p>
<p>
<label for="meter-3">
Meter (critical): <meter id="meter-3" max="100" low="60" high="70" value="90">80/100</meter>
</label>
</p>
</fieldset>
</form>
</article>
<footer>
<a href="#body">Back to top 👆</a>
</footer>
</section>
<section id="interactive-elements">
<header>
<h2>Interactive elements</h2>
<p>Elements: <code><details></code>, <code><summary></code>, <code><dialog></code></p>
</header>
<article>
<header>
<h3><code><details> + <summary></code>:</h3>
</header>
<details>
<summary>This can be expanded</summary>
<p>And by doing so, more information is revealed.</p>
</details>
</article>
<article>
<header>
<h3><code><dialog></code>:</h3>
</header>
<dialog>
<p>This text is inside a <code><dialog></code> box! It should be hidden by default, and shown to the user when given an <code>open</code> attribute.</p>
</dialog>
</article>
<footer>
<a href="#body">Back to top 👆</a>
</footer>
</section>
<section id="scripting">
<header>
<h2>Scripting</h2>
<p>Elements: <code><script></code>, <code><noscript></code>, <code><template></code>, <code><canvas></code></p>
</header>
<article>
<header>
<h3><code><script> + <noscript></code>:</h3>
</header>
<p>Dynamic scripts and data blocks are included with the <code><script></code> element.</p>
<p>If scripting is disabled when loading the page, content inside <code><noscript></code> is used instead.</p>
<noscript>
<p>I see you disabled JavaScript!</p>
</noscript>
</article>
<article>
<header>
<h3><code><template></code>:</h3>
</header>
<p>Below this paragraph, there's a <code><template></code> element containing a HTML declaration, that can be used by scripts.</p>
<template>
<p>Hi! I'm a paragraph inside the <code><template></code> element.</p>
</template>
</article>
<article>
<header>
<h3><code><canvas></code>:</h3>
</header>
<p>A <code><script></code> is used to draw a rectangle in the <code><canvas></code> below.</p>
<canvas id="canvas">
Alternative text explaining what's on display in this <canvas>.
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'tomato';
ctx.fillRect(10, 10, 100, 100);
</script>
</article>
<footer>
<a href="#body">Back to top 👆</a>
</footer>
</section>
</main>
<aside id="aside">
<h2>About this project</h2>
<p>A test page containing most of the HTML5 elements that you'll ever need. Useful for testing CSS resets or CSS frameworks.</p>
<p>This section is inside an <code><aside></code> element.</p>
</aside>
<footer>
<p><a href="https://github.com/alexandersandberg/html5-elements-tester">HTML5 elements tester</a> by <a href="https://alexandersandberg.com">Alexander Sandberg</a> · <a href="#body">Back to top 👆</a></p>
</footer>
app/views/pages/html_test_4.html.erb e cole o conteúdo copiado acima
Altere a Página app/views/layouts/application.html.erb para Incluir um Link para as Páginas html_test_1, html_test_2, html_test_3 e html_test_4
Exibir mais …
<body> </body>para que inclua um link para as páginas de teste do HTML, conforme copiado abaixo
<body>
<div>
<%= link_to "HTM de Teste 1", pages_html_test_1_path %> /
<%= link_to "HTM de Teste 2", pages_html_test_2_path %> /
<%= link_to "HTM de Teste 3", pages_html_test_3_path %> /
<%= link_to "HTM de Teste 4", pages_html_test_4_path %>
</div>
<%= yield %>
</body>
Inicie o servidor do Rails e veja o feioso HTML puro 😟
Exibir mais …
bin/dev ou o servidor padrão com rails server e abra o navegador no endereço 127.0.0.1:3000
$ bin/dev
=> Booting Puma
=> Rails 8.0.0.1 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 6.5.0 ("Sky's Version")
* Ruby version: ruby 3.3.6 (2024-11-05 revision 75015d4c1f) +YJIT [x86_64-linux]
* Min threads: 3
* Max threads: 3
* Environment: development
* PID: 98083
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
html_test_1, html_test_2, html_test_3 e html_test_4 que criamos anteriormente.
Abra novamente a página app/views/layouts/application.html.erb para referenciar os estilos CSS sem classe via CDN
Exibir mais …
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>, cole o conteúdo a seguir. Você não precisa de todos esses estilos, eles foram inseridos para que você possa testar várias opções.
<%# ---[ Normalize CSS: https://github.com/necolas/normalize.css/ ]--- %>
<%# Normaliza alguns estilos, preserva padrões importantes, corrige bugs de alguns navegadores, etc ... %>
<%# Por exemplo, o o <h1> pode ter margens ou fontes diferentes entre navegadores %>
<%# Mantenha este descomentado junto com um dos frameworks CSS abaixo %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css">
<%# ---[ Pico CSS: https://picocss.com/ ]--- %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
<%# ---[ MVP CSS: https://andybrewer.github.io/mvp ]--- %>
<%# Para usar a configuração do SO para o modo escuro/claro, configure na tag HTML assim: <html color-mode="user"> %>
<%# <link rel="stylesheet" href="https://unpkg.com/mvp.css"> %>
<%# ---[ Chota CSS: https://jenil.github.io/chota/ ]--- %>
<%# <link rel="stylesheet" href="https://unpkg.com/chota"> %>
<%# ---[ Simple CSS: https://simplecss.org/ ]--- %>
<%# <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"> %>
<%# ---[ Classless CSS: https://classless.de/ ]--- %>
<%# <link rel="stylesheet" href="https://classless.de/classless.css"> %>
<%# ---[ Concrete CSS: https://concrete.style/ ]--- %>
<%# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/concrete.css/3.0.0/concrete.min.css"> %>
<%# ---[ Almond CSS: https://alvaromontoro.github.io/almond.css/demo/ ]--- %>
<%# <link rel="stylesheet" href="https://unpkg.com/almond.css@latest/dist/almond.min.css" /> %>
<%# ---[ Vanilla CSS: https://vanillaframework.io/ ]--- %>
<%# <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-4.18.3.min.css" /> %>
<%# ---[ Picnic CSS: https://picnicss.com/ ]--- %>
<%# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic"> %>
<%# ---[ YACCK - Yet Another Classless CSS Kit: https://sphars.github.io/yacck/ ]--- %>
<%# <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sphars/yacck/yacck.min.css"> %>
<%# ---[ Sakura CSS: https://oxal.org/projects/sakura/ ]--- %>
<%# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css">
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" />
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" /> %>
<%# ---[ Bamboo CSS: https://rilwis.github.io/bamboo/demo/ ]--- %>
<%# <link rel="stylesheet" href="https://unpkg.com/bamboo.css"> %>
Normalize CSS e o Pico CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" /> e descomente a linha de outro estilo, por exemplo, a linha do Simple CSS.Ctrl + K + C.
Agora sim, um HTML com estilo 🤩
Após salvar as folhas de estilo acima e iniciar o servior do Rails você verá seu HTML estilizado com o frameworks css escolhido.
Modo dark
Alguns estilos possuem a opção para modo escuro (dark mode). Para confirmar, altere o tema do seu computador nas opções de personalização de cores. Procure no Windows por Ativar modo escuro para apps e alterne entre modo escuro ou claro. A página HTML deverá automaticamente muda após a alteração no sistema operacional, indicando que possui suporte para o modo light e dark.
Passos seguintes
[-] Organizar os estilos de acordo com sua preferência;
[-] Usar estilização a partir de arquivos CSS do projeto, sem usar CDN;
[-] Atualizar dinamicamente no navegador as alterações feitas no projeto usando Rails Live Reload;
[-] Se quiser gastar um pouco mais de tempo com o frontend, verifique as opções de customização do seu estilo favorito;
[-] Replicar a capacidade de um framework classless CSS usando Tailwind;
Referências
- https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98
- https://prismic.io/blog/best-css-frameworks
- https://saeedesmaili.com/notes/classless-css-libraries/
- https://dev.to/logrocket/comparing-classless-css-frameworks-3267
- https://github.com/dbohdan/classless-css
- https://github.com/troxler/awesome-css-frameworks
Top comments (0)