TESTATA GIORNALISTICA ONLINE DEL CREA, ISCRIZIONE N. 76/2020 AL REGISTRO STAMPA DEL TRIBUNALE DI ROMA DEL 29/7/2020

26.5 C
Roma
lunedì, 29 Aprile 2024

Typography

Esempi di HTML e CSS

CSS

Questo stile evidenziato in giallo si può fare utilizzando il CSS con <span style="background-color: #ffff00;"> e poi si chiude il TAG span </span>

Html

Oppure si può fare semplicemente utilizzando il TAG <mark>:
Prima si inserisce il TAG <mark>, poi si mette la frase da sottolineare e poi si chiude il TAG così:</mark>


Heading 1 <h1> Titolo 1

Heading 2 <h2> Titolo 2

Heading 3 <h3> Titolo 3

Heading 4 <h4> Titolo 4

Heading 5 <h5> Titolo 5
Heading 6 <h6> Titolo 6

Ma se metto i Titoli in bold con il tag <b> o con il tag <strong>viene uguale!


Heading 1 <h1> Titolo 1

Questo è un testo inserito come paragrafo. Il TAG da utilizzare è <p>
Alla fine di ogni TAG dovrà essere inserito il FINE TAG, in questo caso </p>

Tutti i tag h1 -> h6, così come il tag p hanno incorporato un margine superiore e inferiore che si può modificare utilizzando il CSS.
Ad esempio il titolo che segue ha i margini modificati:<h2 style="margin-top: 10px; margin-bottom: 5px;">

Heading 2 <h2>

TAG p di paragrafo etc etc etc eIt suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn”t feel like a giant. I felt very, very small.

Heading 3 <h3>

Heading 4 <h4>

Heading 5 <h5>

What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.

Heading 6 <h6>

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.


Questa linea qui sopra è stata inserita utilizzando il TAG <hr>. Questo TAG non ha bisogno di essere chiuso.

Paragrafo

Questo è un paragrafo <p> e questo che segue in verde è un link che collega a Space Ipsum. Per creare un testo che linka si utilizza il TAG <a> in questo modo:

<a href="url del link">Parola da Linkare</a>

DIV

il tag <div> non lo usiamo perché se mal utilizzato potrebbe fare danni

Questo è un esempio di citazione

Per fare quello che segue si inserisce il tag <blockquote>.

Let’s light this fire one more time, Mike, and witness this great nation at its best.


Altro esempio di Citazione (blockquote con inserimento di figure e figcaption)

Per fare quello che segue si inserisce il tag <figure>, <blockquote>, e <figcaption>. Come segue:

Words can be like X-rays, if you use them properly
— they’ll go through anything. You read and you’re pierced.

— Aldous Huxley, Brave New World
 
<figure>
<blockquote>
<p>Words can be like X-rays, if you use them properly
— they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<figcaption>— Aldous Huxley, <cite>Brave New World</cite>
</figcaption>
</figure>

Possiamo inserire all’interno del testo del codice CSS per cambiare la font.
Qui sotto c’è un esempio: da vedere prima e dopo il CSS

<p style="font-family: 'Comic Sans MS'; color:#F00; font-size:24px;">
Possiamo inserire all'interno del testo del codice CSS per cambiare la font.
qui sotto c'è un esempio: da vedere prima e dopo il CSS</p>

Risultato:

Possiamo anche inserire all’interno del testo del codice CSS,
qui sotto c’è un esempio: da vedere prima e dopo il CSS


Indirizzo: TAG Address

Sherlock Holmes
221B Baker Street
London, United Kingdom <address>

Lists <li>

Le liste possono essere non-ordinate (con i pallini> oppure ordinate (con i numeri)

  • NON ordinata. Unordered list <ul>
  • List element
  • Across the sea of space, the stars are other suns.
  • Science cuts two ways, of course; its products can be used for both good and evil. But there’s no turning back from science. The early warnings about technological dangers also come from science.

It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn”t feel like a giant. I felt very, very small.

  1. Ordinata. Ordered list <ol>
  2. List element
  3. The dreams of yesterday are the hopes of today and the reality of tomorrow.
  4. Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.

Riassunto finale – Text-level elements

  • anchor link <a>
  • abbreviation: SASS <abbr>
  • citation: A Study in Scarlet <cite>
  • Here’s the <code> element
  • deleted text: Episodes I, II, III <del>
  • definition: The definition element is the element being defined inline. <dfn>
  • emphasis <em>
  • inserted text <ins>
  • keyboard input: control + space <kbd>
  • mark element <mark>
  • meter: awesomeness <meter>
  • progress: 70 % <progress>
  • quotation (short): You just gotta believe! <q>
  • quotation within a quotation (short): Yo dawg, I heard you like quotes so I put this quote within this quote. <q>
  • strikethough: Lance Armstrong remains steroid-free. <s>
  • sample text: Error <samp>
  • small: Hydrogen <small>
  • small within small: Hydrogen Hydrogen <small>
  • strong: The Hammer <strong>
  • subscript: Lower 0123 <sub>
  • superscript: I need a good superman joke to go here. 0123 <sup>
  • time: <time>
  • underline: Never underline anything. <u>
  • variable: cat + dog = catdog <var>




Heading Text

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text
h6. Heading Secondary text

TIPS: Per creare il testo più piccolo bisogna inserire il tag <small> all’interno del titolo. TAG <h1>h6>.

Address

Company Name
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
P: (123) 456-7890

Emphasis classes

This is a .mute paragraph.

This is a .text-primary paragraph.

This is a .text-warning paragraph.

This is a .text-danger paragraph.

This is a .text-success paragraph.

This is a .text-info paragraph.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote’s author in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote’s author in Source Title

 


Indicators

Alerts and Box

div class=’box’

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

div class=’boxgrigio’

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

alert alert-danger

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

alert alert-success

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

alert alert-info

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

alert alert-warning

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Class boxverde

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus, issim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.
Issim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Panels

Panel heading

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Panel primary

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Panel success

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Panel warning

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Panel danger

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Panel info

Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Accordion https://getbootstrap.com/docs/4.3/components/collapse/

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Gli ultimi articoli