Header Tabella Stripes | 2nda colonna |
---|---|
1 | a |
2 | b |
3 | c |
4 | d |
5 | e |
6 | f |
7 | g |
8 | h |
9 | i |
10 | j |
Footer |
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
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:
<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 Holmes221B 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.
- Ordinata. Ordered list <ol>
- List element
- The dreams of yesterday are the hopes of today and the reality of tomorrow.
- 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: <progress>
- quotation (short):
You just gotta believe!
<q> - quotation within a quotation (short):
Yo dawg, I heard you like quotes so I put
<q>this quote
within this quote. - 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 Name795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890Full 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
Buttons
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 / Titolo h2
Titolo h3
Titolo h4
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.
Class boxgrigio / Titolo h2
Titolo h3
Titolo h4
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
Panel primary
Panel success
Panel warning
Panel danger
Panel info