HTML FAST

Tags HTML as TEXT

• <h1> GERALDO </h> <h1> GERALDO </h>
• { HTML Entity } { HTML Entity }
• ❴ ThemeContext ❵ ❴ ThemeContext ❵

Replace quickly: Usar o recurso search and replace de qualquer editor de texto

XMP

renders text between the start and end tags without interpreting the HTML in between and using a monospaced font.

Para consultar todas as tags TAGS/default.asp

p

<p> - Default margin-top & bottom: 16px, <br> adiciona quebra de linhas, e.g with break row

Style:

Style 2:

<p style="text-align:center;"><a href="index2323.html"> Exemplo href Center with P </a></p>

p custom class HTML:

p custom class CSS:

    p.gerab {
        text-align: center;
        color: mediumseagreen;
        font-size: 20px;
    }
 

ul ol

default padding-left: 40px

        <div style="font-size:20px;color:green;background-color:pink;text-align:center;"><a href="http://speedtest-nyc3.digitalocean.com/" /> http://speedtest-nyc3.digitalocean.com/</a></div>
        

abbr

<abbr> for Abbr

HTML Formating

•   - non-breaking-      Space
• <br> - break row
• <mark> - Marked text
• <del> - Deleted text Eu moro na cidade de Palmeira
• <hr> - defines a thematic break in a HTMl Page <hr>
• <ins> inserted text | Rio GERALDO
• <u> - Underline
• 📌 Italic and Bold

  Decrecated:

  <b> - Bold text

  <i> - Italic

  New:
  <strong> - Important text
  <em> - Italic
  <center> - center
• See more REF in => w3schools

https://metatags.io

[check website MetaTags] https://www.heymeta.com/url/dev.geraldox.com

Twitter Post about it

The source (src), alternative text (alt), width and height are provided as attibutes:

width and height

IMG with links

<a href="http://blog.com"target="_blank"> 
            <img src="https:///2018/01/images.png" 
            alt="ChalkArtes logo" /></a>

Evitar images quebradas

Placeholder generador

                https://placehold.jp/350x160.jpg
                https://via.placeholder.com/280x650
              

picture

<picture> for specifying image resources. picture_source_media_imagem_flexivel

Alguns exemplos:

main
header
nav
section
article
aside
footer

                <main>
                  main
                </main>
            <header>
                <strong>Header</strong> - Geraldo Website
            </header>
            <section class="welcome">              
                <p><strong>Section</strong> WELCOME TO MY WEBSITE! </p>                
            </section>
            <article>
                <strong>Article</strong>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Itaque quantum adiit periculum! ad honestatem enim illum omnem conatum suum referebat, non ad voluptatem. Ergo id est convenienter naturae vivere, a natura discedere. Esse enim quam vellet iniquus iustus poterat inpune. Tu enim ista lenius, hic Stoicorum more nos vexat. Duo Reges: constructio interrete.
                </p>
                <p>
                    Quam ob rem tandem, inquit, non satisfacit? Haec quo modo conveniant, non sane intellego. Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P. Quem ad modum quis ambulet, sedeat, qui ductus oris, qui vultus in quoque sit? Miserum hominem! Si dolor summum malum est, dici aliter non potest. Quo tandem modo? Ex rebus enim timiditas, non ex vocabulis nascitur. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Quod eo liquidius faciet, si perspexerit rerum inter eas verborumne sit controversia.
                </p>                
            </article>
        
            <!-- sidebar -->
            <aside>
                <strong>Sidebar</strong>              
                    <p>
                        aaLorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Itaque quantum adiit periculum!
                    </p>
            </aside>
            <footer>
                <strong>Footer </strong>               
                <p>
                    Esse enim quam vellet iniquus iustus poterat inpune. Tu enim ista lenius, hic Stoicorum more nos vexat. Duo Reges: constructio interrete.
                </p>
            </footer>
      
            

                *{
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                }
                html {
                font-size: 100%;
                }
                
                aside,footer,header,main,section,article{
                    display:block;
                    margin:0;
                    padding:1.25rem;
                    border:1px solid #000;
                    color:#fff
                }
                main {
                    background: #000000;
                }
                
                header {
                    background: #03a9f4;
                }
                
                .welcome {
                    background: #d22b1f;
                }
                article {
                    background: #129a22;
                }
                aside{
                    border: 1px solid #000000;
                    background: #673ab7;
                }
                footer {
                    border: 1px solid #000000;
                    background: #616161;
                }
             

Direct Link

<video controls src="https://s3.eu-central-1.amazonaws.com/pipe.public.content/short.mp4" class="video" poster="https://s3.eu-central-1.amazonaws.com/pipe.public.content/poster.png" preload="none"> </video>

Youtube Video

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>

Youtube auto play muted height 0

<iframe width="560" height="0" src="https://www.youtube.com/embed/Qxjxba2wge0?&autoplay=1&mute=0"       frameborder="0" allow="autoplay" ></iframe>

Youtube auto play 2 mini player

<iframe   width="20%"
          height="50" src="https://www.youtube.com/embed/Qxjxba2wge0?&autoplay=1"       frameborder="0" allow="autoplay" ></iframe>

http-equiv - refresh

            <head>
            <title>dl.smartdicas.com</title>
            <meta http-equiv="refresh" content="5;URL=http://www.smartdicas.com">
            </head>
            

Refresh in 15 seconds, add in headtag

                <meta http-equiv="refresh" content="15">
            

Force download file

                <a> href="./Old_Nike_logo.jpg" download>img</a>
            

REF: https://www.w3schools.com/tags/tag_style.asp

                    <!DOCTYPE html>
                    <html>
                     <head>
                        <style>
                    h1 {
                    color: red;
                    text-align: center;
                     }
                    p {
                    color: blue;
                    }
                    g {
                    color: green;
                    font-size: 20px
                    }
                        </style>
                    </head>
                    <body>
                    <h1>This is a heading</h1>
                    <p>This is a paragraph.</p>
                    <g>TEstetet</g>
                    </body>
                    </html>

Exemplo

Adicionar ao CSS:

                p {
                    background-color: #f44336;
                    display: inline-block;
                    padding: 14px 25px;
                    /* tamanho da borda  */
                    font-size: 20px;
                    font-weight: bold;

                }
                a:link,
                a:visited {
                    background-color: #f44336;
                    color: white;
                    padding: 14px 25px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                }
                a:hover,
                a:active {
                    background-color: green;
                }
            

Adicionar ao HTML:

                <body>
                <h2>Novidade:</h2>
                <p>Ganhe até 40% de Cashback</p>
                <a href="default.asp" target="_blank">SAIBA MAIS</a>
                            
                </body>                            
                </html>
            

Links:

• Form Estacio [codepen]
• [Estacio] Lista e Tabelas
• button submit inside and outside form tags

HTML

<form action="#">
                <label for="lang">Language</label>
                <select name="languages" id="lang">
                <option value="javascript">JavaScript</option>
                <option value="php">PHP</option>
                <option value="java">Java</option>
                <option value="golang">Golang</option>
                <option value="python">Python</option>
                <option value="c#">C#</option>
                <option value="C++">C++</option>
                <option value="erlang">Erlang</option>
                </select>
                <input type="submit" value="Submit" />
                </form>

CSS

                    body {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 0 auto;
                        height: 100vh;
                        background-color: #f1f1f1;
                        }
                
                        input {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 0 auto;
                        }
                

Menu suspenso click and go

                    <form>
                    <select
                      onchange="top.location.href=this.form.links.options [this.form.links.selectedIndex].value"
                      name="links"
                    >
                      <option />
                      Selecione um servidor
                      <option selected />
                      Selecionar 2
                      <option value="http://google.com">Google</option>
                      <option value="http://javascript.net">Link Dois</option>
                    </select>
                  </form>
                

Propriedades

• Caption
• TR - Table Row Element
• TH - Table Row
• TD - Table Data

                <table>
                <caption>Titulo</caption>
                <tr>
                <th>BANK</th>
                <th>VALOR</th>
                </tr>
                <tr>
                <td>SANTANDER</td>
                <td>R$ 100</td>
                </tr>
                <tr>
                <td>BB</td>
                <td>R$ 50</td>
                </tr>
                </table>
            

Table com border inline(em desuso) variar o número:

               <table border="4">
               <tr>
               <th>NOME</th>
               <th>NOME</th>
               </tr>
               <tr>
                 <td>GERALDO</td>
                 <td>FILHO</td>
               </tr>
             </table>
            

Lista de descrição

                <dl>
                <dt>MG:</dt>
                <dd>MAGIC GLADIATOR</dd>
        
                <dt>SM:</dt>
                <dd>SOUL MASTER</dd>
        
                <dt>BK:</dt>
                <dd>BLACK KNIGHT</dd>
            </dl>
            

Com Bootstrap o alinhamento padrão não funciona, caso queira definir uma margin-left

Set a DIV #id tag in content

Callback ID

Existem vários tipos de inputs W3 Schools input type + attributes

Modo correto

Contudo um truque para alinhamento vertical, englobe tudo dentro da label, não é precisa adicionar o atributo for, no CSS apenas definir que label tem display: block e o alinhamento vai acontecer!

            label {
                display: block;
                margin: 10px 0;
                background: royalblue;
            }  
        

Caso não queira englobar as labels, pode englobar cada input em um elemento que seja display: block como p ou usar o ul lique por padrão tem display: list-item

Boas práticas

Uma boa pratica seja fazer o input dentro da label, dispensando o uso de for e evitando grosh clicks entre os elementos

            <label>
                <input type="checkbox">
                option
            </label>
        

Boas práticas input

disabled Attribute

users cannot click, focus, or modify the value, Not included in form submission (won’t send data to the server).

readonly Attribute

The input field is readable but non-editable—users can focus on the field and copy its content but cannot change it. Form Submission: Included in form submission.