Toggle sidebar
  • Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Una piccola introduzione al HTML

Matt€oStupido

Matt€oStupido

Utente Attivo
Autore del topic
23 Marzo 2009
451
56
Miglior risposta
0
Ciao a tutti, questo topic lo aggiornerò spesso,specie quando farò lezione di informatica.
Premetto che sono appunti di lezioni che adesso riscrivo qua. una sorta di Guida per principianti.
Va beh dai, meno ciance e più lavoro :3

Occorente
Buona Volontà
Pazienza
Blocco Note
Capacità Basilari del Sistema Operativo
Quello che dovete sapere su questo sconosciuto "HTML"
Cos'è HTML?
HTML è un linguaggio di programmazione per creare SitiWeb/Pagine Web facilmente, il più facile da usare perciò molto spesso usato da principianti.
Cosa vuol dire "HTML" ?
HTML vuol dire Hyper Text Mark-Up Language che in italiano (tradotto letteralmente Linguaggio di marcatura per ipertesti).
Cosa devo imparare?
HTML ha più o meno su per giù 100 Tag (che spiegheremo mano a mano nella guida cosa sono queste famigerate "TAG") però noi affronteremo la metà delle Tag nel tempo

Parte 1. Sistema Operativo
Create una cartella sul Desktop [Premete destro sul desktop-> nuovo -> cartella] e la rinominate "SitoWeb" (ovviamente è a piacere il nome). Fatto? Benissimo! ora aprite la cartella che avete appena creato e cliccateci nuovamente destro dentro la cartella e fate lo stesso procedimento, ma al posto di creare la cartella , create un documento di testo (blocco note) e lo rinominate "Index". Ora aprite il documento di testo appena creato e la parte uno del sistema operativo abbiamo fatto.
Parte 2. HTML
Iniziamo a scrivere le prime informazioni del HTML (Le più importanti). Nel Documento di testo creato in precedenza scrivete questo codice qua
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Ora mi direte che cosa vuol dire questo? iniziamo a spiegare:
Cosa vuol dire "<" e ">"?
Il simbolo "<" è il simbolo di Apertura Tag e il simbolo ">" è il simbolo di chiusura Tag.
Cosa è un Tag?
Un tag è il codice/funzione scritta dentro i simboli "<" ">" infatti molto spesso vengono chiamati anche essi "Tag"
Perché hai scritto "<HTML></HTML>"?
<HTML> <- è la cosa fondamentale di tutto il codice se non lo scrivi fai prima a buttare il lavoro svolto, viene chiamato TAG e la funziona </HTML> è per chiudere definitivamente la funzione. lo / <- (slash) è la seconda cosa più importante da sapere nel html! Essa chiude una funzione infatti ogni fine funzione troverete sempre /
Parte 3. HEAD
Ora che abbiamo scritto una delle parti più fondamentali del HTML
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
iniziamo a scrivere un altra cosa fondamentale, la funzione "HEAD"
Cos'è la funzione Head?
La funzione head è la terza parte più fondamentale di tutto html, dove andrà scritto in alto il titolo della pagina, favicon e altre cose che vedremmo più in la.
Dentro il nostro codice che abbiamo scritto poco fa scriviamoci anche il nostro head
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Apriamo funzione e la chiudiamo, che cosa abbiamo fatto per ora? Stiamo costruendo la parte sopra del sito (in questa guida sarà " Guida: Una piccola" bla bla bla).
Adesso vogliamo inserire il nome a questa brutta pagina? perché per ora il nome della pagina (se non avete cambiato nome e avete lasciato index) sarà "Index" ed è brutto da vedersi. allora andiamo a modificare (direttamente dall'interno) scrivete questo codice qua DENTRO HEAD!
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
e con questo la parte essenziale del Head l'abbiamo finita.
Parte 4. BODY
Questa parte direi che è un'altra parte fondamentale, senza questa parte è un sito vuoto senza niente.. cioé una cacca! (esatto!!!) bando alle ciance, cosa è il body? Il body è "il corpo del sito" dove viene scritto quello che scrivi, cioé il sito vero e proprio!
Andiamo a vederlo
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Perfetto ora, avrete creato un sito web semplice semplice (anche brutto) con scritto "Ciao" e il titolo in alto.
Andiamo ad abbellire quel "Ciao" Dai, ah una cosa importante tutti i codici che volete inserire vanno TUTTI dentro il body tranne quelli per la head e in rari casi (tipo la musica di sottofondo) fuori dal body. Torniamo ad abbellire quel nostro "ciao" Diamogli un bel Grassetto, Sottolineato e il corsivo !
Il Grassetto ( GRASSETTO ) si scrive così
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Il Sottolineato ( Sottolineato ) si scrive così
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Il corsivo ( Corsivo ) si scrive così
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Quindi andiamo a scrivere così nel nostro bellissimo sito
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Adesso avremmo quel bel ciao scritto in modo figoso.
Perfetto allora ora vogliamo scrivere un'altra frase ma stavolta più articolata e più bella andiamo a scrivere il codice
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
senza chiudere la funzione (o almeno io non la chiudo mai per comodità) questa è una delle rare funzioni che puoi anche non chiudere perciò andiamo a scrivere
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
adesso avremmo creato due frasi una sotto e una sopra (il ciao sopra e forza sciax2!forum sotto.) Perfetto però mi piacerebbe mettere un po di colore su Sciax2, beh allora come devo fare?
Andiamo a mettere la
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
la stringa sopra detta è necessaria per scrivere il colore, al posto di Colore mettiamoci un colore (scritto in inglese è importante) Per esempio
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
perciò nel codice che stiamo costruendo inseriamo il colore rosso
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Peretto ora è rosso!! non siete felici? ahah.
Altre 4 cose importanti e le cose necessarie le abbiamo finite (sotto vi elencherò un po di comandi + quelli elencati sopra per fare il punto della situazione)
adesso vogliamo centrare la nostra immagine
scriviamo
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Questo center (centro) decidiamo dove vogliamo metterlo, normalmente io lo metto su tutto il testo perciò lo metto subito dopo il body così
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Adesso dovrebbe essere centrato il testo.
Creiamo un secondo titolo però stavolta al interno della pagina!
Scriviamo questo codice qua
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
che cosa vuol dire?
H è la grandezza del titolo per più è piccolo il numero e più sarà abnorme (perciò 1 è gigantesco) i numeri vanno da 1 a 7 (il 7 è una cosa minuscola)
noi mettiamola normale, perciò il testo sarà
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Perfetto! ora abbiamo quasi finito! altri due codici imporanti e indovinate quali sono?
1. Inseriamo immagini.
Inseriamo un immagine con questo codice qua
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Esempio:
se vogliamo mettere su un sito online l'immagine presa su un altro sito online, bisogna inserire il percorso di immagine per esempio inseriamo tipo così
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Se invece vogliamo hostare la nostra immagine direttamente sul sito il percorso file deve essere così
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
quel "1.jpg" a dire il vero l'ho messo a caso, è il nome della immagine e l'estenzione Jpeg (ma può essere qualunque altra estenzione) noi per comodità (e pigrizia) mettiamo 1.
Scaricamo dal web (o facciamo) un immagine e la mettiamo direttamente in cartella, cliccate destro su di essa e mettete -> Rinomina e scrivete 1 .
perfetto quindi se non avete sbagliato inserite nel codice che abbiamo fatto fino ad adesso l'immagine
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
e infine mettiamo il collegamento ipertestuale cioé praticamente
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
andiamo a vederlo " <a href=""> " allora A href detto sinceramente non mi ricordo quello che vuol dire però è essenziale se volete fare un collegamento.
dentro alle virgolette dove c'è percorso file potete fare la stessa cosa che avete fatto in immagine, o scrivere un altro sito voi, oppure collegarlo a un sito esterno,esempio:
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
oppure
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
nel secondo caso dovete creare voi un altra pagina e scriverla tipo questa.
e che dire andiamo ad inserirla nel codice.
A me piace personalmente metterla dopo il titolo
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Perfetto con questo abbiamo finito le cose più importanti!
Ora andiamo a vedere varie funzioni
Parte 5. Funzioni extra body.
Le prime funzioni che abbiamo sono le funzioni che abbiamo già visto le riscrivo così velocemente
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
ora gochiamo un po con il font. Altre funzioni di font
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Animiamo un po il testo per animare il testo cioè (farlo scorrere verso destra/salire o altre cazzate.
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
se non volete farlo scorrere verso destra ma in alto
scrivete
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Coloriamo i link dentro body scriviamo questo
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Vlink è come compare prima di cliccarci sopra mentre alink è come comparirà quando hai cliccato sopra.
Perfetto ora sarete in grado di fare una cosa del genere (è un mio sito che sto creando per informazioni sulle droghe con queste poche cose dette sopra per la mia prof di informatica che ho il compito lunedì)
Tengo a dire che questa guida la aggiornerò ogni volta che farò informatica in HTML e quando passeremo al PHP farò le guide in PHP.
Ci sentiamo :emoji_smiley: alla prossima

HTML:
Perfavore, Entra oppure Registrati per vedere i codici!

(qui ho messo anche <img src="" width="224" height="69" /></img> che è la grandezza della immagine (tipo se un immagine è larga un intero desktop così è un quadratino e <hr> è una linea spazzatrice.)

-------->Aggiornamenti<-------
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Questo codice è per mettere immagine di sfondo alla pagina :emoji_smiley:
Spero di essermi reso utile.
Prossimo Aggiornamento -> (Mercoledì)
​
 
Ultima modifica:
Riferimento: Una piccola introduzione al HTML

guida bella e facile per chi non sa creare pagine web,grazie mille per aver postato codesta guida.
finalmente ho capito come creare una pagina web normale,e non schifosa dal mio stile xD :ahah:
 
Riferimento: Una piccola introduzione al HTML

Mah, ok che è per chi è alle prime armi, ma inserite sempre codici deprecati.

Se volete fare una guida decente, togliete quelle schifezze di <font>, in più <b> è diventato <strong>, <i> è diventato <em>.
 
Riferimento: Una piccola introduzione al HTML

Bella guida totalmente utile.
Ti ricordo che ci sono dei tag da aggiornare.
 
Riferimento: Una piccola introduzione al HTML

0-c00l ha detto:
Mah, ok che è per chi è alle prime armi, ma inserite sempre codici deprecati.
Questo dice tutto.
Ormai questi tag sono inutili, ti costringono a scrivere molte righe di codice, quando te ne basterebbe una di CSS.

Matt€oStupido ha detto:
<font face="ariel"></font>
Clicca per espandere...
Non dovrebbe essere "Arial"? :look:

In un giudizio imparziale, sei stato meticoloso, ma anche troppo. Hai ripetuto troppe volte gli stessi codici aggiungendo solo un paio di Tag... A questo punto potevi direttamente postare una pagina intera e poi analizzarla pezzo per pezzo.
Ultima cosa, ma non meno importante: Le !DOCTYPE? :facepalm:
Clicca per espandere...
Clicca per espandere...
 
Riferimento: Una piccola introduzione al HTML

Ottima guida,una sola domanda,ci può essere una fonte di guadagno creando un sito web?
 
Riferimento: Una piccola introduzione al HTML

Ottima guida, dettagliata e facile da seguire!
Bravo, hai spiegato anche le nozioni basilari per i novellini!
Complimenti ancora!
 
Riferimento: Una piccola introduzione al HTML

Zanzo ha detto:
0-c00l ha detto:
Mah, ok che è per chi è alle prime armi, ma inserite sempre codici deprecati.
Questo dice tutto.
Ormai questi tag sono inutili, ti costringono a scrivere molte righe di codice, quando te ne basterebbe una di CSS.


Non dovrebbe essere "Arial"? :look:

In un giudizio imparziale, sei stato meticoloso, ma anche troppo. Hai ripetuto troppe volte gli stessi codici aggiungendo solo un paio di Tag... A questo punto potevi direttamente postare una pagina intera e poi analizzarla pezzo per pezzo.
Ultima cosa, ma non meno importante: Le !DOCTYPE? :facepalm:
Clicca per espandere...

LOOL Piccolo errore di digitazione ora lo vado a correggere, comunque sta guida è stata fatta apposta per quelli più inesperti non per quelli che ormai sanno la roba, poi piano piano con il tempo e andando avanti (dato che sono le prime lezioni) metterò cose più impegnative.. Non credo che una professoressa possa iniziare subito a spiegare css subito

HabboGio ha detto:
Ottima guida,una sola domanda,ci può essere una fonte di guadagno creando un sito web?
Clicca per espandere...

Se costruisci un buon sito web ovviamente fatto bene con css e tutto, può diventare anche una fonte di guadagno se magari è su .IT puoi mettere le donazioni oppure semplicemente fai un Sito-Market.
Clicca per espandere...
Clicca per espandere...
 
Riferimento: Una piccola introduzione al HTML

Matt€oStupido ha detto:
Zanzo ha detto:
0-c00l ha detto:
Mah, ok che è per chi è alle prime armi, ma inserite sempre codici deprecati.

LOOL Piccolo errore di digitazione ora lo vado a correggere, comunque sta guida è stata fatta apposta per quelli più inesperti non per quelli che ormai sanno la roba, poi piano piano con il tempo e andando avanti (dato che sono le prime lezioni) metterò cose più impegnative.. Non credo che una professoressa possa iniziare subito a spiegare css subito



Se costruisci un buon sito web ovviamente fatto bene con css e tutto, può diventare anche una fonte di guadagno se magari è su .IT puoi mettere le donazioni oppure semplicemente fai un Sito-Market.
Clicca per espandere...

Cosa c'entra il .it? O_O Sei alle prime armi e crei una guida per la gente alle prime armi? Non ha molto senso, tanto valeva linkare le guide che segui tu lol
Clicca per espandere...
Clicca per espandere...
 
Riferimento: Una piccola introduzione al HTML

AGGIORNATA CON UN EXTRA NEL BODY.

0-c00l ha detto:
Matt€oStupido ha detto:
Zanzo ha detto:
Cosa c'entra il .it? O_O Sei alle prime armi e crei una guida per la gente alle prime armi? Non ha molto senso, tanto valeva linkare le guide che segui tu lol
Clicca per espandere...


Era un esempio il .it.
Comunque essendo alla prime armi creo una guida per la gente alle prime armi. io non seguo guide, io seguo la prof lol e quello che mi segno (appunti) le trascrivo qua, così in primis mi imparo, in secundo aiuto altre persone D:
Clicca per espandere...
Clicca per espandere...
 
Riferimento: Una piccola introduzione al HTML

Matt€oStupido ha detto:
Era un esempio il .it.
Clicca per espandere...

Indipendentemente dal tipo di dominio, uno dei modi più efficaci per guadagnare con il proprio sito web è inserire delle pubblicità in esso. Comunque molto utile la guida, magari potresti integrarla inserendo i tag dei contenitori.
 
Devi accedere o registrarti per rispondere qui.
 
 
Top
Indietro