Este artigo é intencionalmente muito semelhante . Não esqueça de iniciar o servidor de desenvolvimento com
bin/devou o servidor rails padrão comrails serverdo 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.
Para que as alterações nestes arquivos sejam realizadas e visualizadas instantaneamente no navegador, é necessário instalar uma gema como a 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áginahtml_test_1
Exibir mais …
- Acesse o link e copie todo o conteúdo da tag
<form action="/">, conforme abaixo
CODE<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>
- Abra o arquivo
app/views/pages/html_test_2.html.erbe cole o conteúdo copiado acima
Insira o conteúdo da páginahtml_test_3
Exibir mais …
Acesse o link e copie todo o conteúdo de
<main id="main">, conforme abaixo, removendo tudo que estiver entre as tags<script> </script>. O HTML limpo pode ser visto a seguir
CODE<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>
- Abra o arquivo
app/views/pages/html_test_4.html.erbe cole o conteúdo copiado acima
Altere a Páginaapp/views/layouts/application.html.erbpara Incluir um Link para as Páginashtml_test_1, html_test_2, html_test_3 e html_test_4
Exibir mais …
- Altere o conteúdo dentro de
<body> </body>para que inclua um link para as páginas de teste do HTML, conforme copiado abaixo
CODE<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 …
- Inicie o servidor de desenvolvimento do Rails com
bin/devou o servidor padrão comrails servere abra o navegador no endereço127.0.0.1:3000
CODE$ 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
- Após abrir a página você verá no topo os quatro links que adicionamos para as páginas
html_test_1, html_test_2, html_test_3 e html_test_4que criamos anteriormente.
- Tanto trabalho até aqui. Abra cada uma delas e você notará que o HTML ainda não foi estilizado com nenhum CSS, o que faremos logo a seguir
Copie seus arquivos CSS para seu projeto colando emapp/assets/stylesheets/
Exibir mais …
Consultando a
Pico CSS:
Chota CSS:
Classless CSS:
Almond CSS:
YACCK CSS:
Bamboo CSS: . Cole o código a esquerda e pegue o arquivo formatado a direita. Renomeie o arquivo para
bamboo.css.
Convertendo o Vanilla SCSS em Vanilla CSS:
CODE# Acessa a pasta que criamos para os arquivos CSS
$ cd app/assets/stylesheets/classless/
# Clonar o repositório
$ git clone https://github.com/canonical/vanilla-framework.git
$ cd vanilla-framework
# Instalar dependências
$ yarn install
# Compilar SCSS para CSS
$ yarn build
- Copie o arquivo dentro da pasta
app/assets/stylesheets/classless/vanilla-framework/build/css/build.csse para deixar o código mais legível use o serviço do site
↗ Original-Artikel auf dev.to lesenVollständiger Original-BerichtAusführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
🔧 Programmierung 🕛 vor 1 Jahr 92 Min Lesezeit
Ruby on Rails 8 - Frontend Rápido Usando Tailwind como um Frameworks CSS Classless
📑 Inhaltsübersicht
- ↳ Veremos a seguir:
- ↳ Inicie um novo aplicativo Rails
- ↳ Abra o projeto com o VSCode ou seu editor preferido
- ↳ Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb.
- ↳ 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
- ↳ Abra o arquivo config/routes.rb pelo VSCode
- ↳ Exibindo as rotas do Rails
- ↳ Vamos criar quatro páginas com conteúdo HTML para testar os estilos CSS.
- ↳ Insira o conteúdo da página html_test_1
- ↳ Insira o conteúdo da página html_test_2
- ↳ Insira o conteúdo da página html_test_3
- ↳ Insira o conteúdo da página html_test_4
- ↳ 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
- ↳ Inicie o servidor do Rails e veja o feioso HTML puro 😟
- ↳ Copie seus arquivos CSS para seu projeto colando em app/assets/stylesheets/
- ↳ Abra novamente a página app/views/layouts/application.html.erb para referenciar os estilos CSS sem classe copiados para o projeto
- ↳ Agora sim, um HTML com estilo 🤩
- ↳ Modo dark
- ↳ Passos seguintes
- ▸ Referências
Wie bewertest du diesen Beitrag?
1 Klick Feedback Teilen mit Netzwerk & Team:
Hat Ihnen dieser Tipp / Anleitung geholfen?
Community-Analysen & Experten-Meinungen 0
Verfasse deine eigene Analyse, teile Workarounds oder diskutiere diesen Vorfall im Blog.
Noch keine Community-Analyse verfasst. Markiere einen Textabschnitt oder klicke oben auf „ Eigene Analyse verfassen“!
Community Pulse: Relevanz-Einschätzung
1 Klick Experten-Votum 🔴 Akute Relevanz 0%
🟡 In Evaluierung 0%
🟢 Keine Auswirkung 0%
Spannende Innovation 0%
SOCIAL SHARE CARD GENERATOR