Questa sezione del sito è interamente dedicata ai due linguaggi per la realizzazione di un sito, ovvero HTML e CSS. Qui puoi imparare le lingue passo dopo passo, imparare tutto dalle basi fino ai momenti più difficili.

Questa sezione è costruita sul principio dello studio passo passo del materiale, pertanto, prima di ogni titolo di una lezione su HTML e CSS, c'è un numero corrispondente al numero seriale della lezione. Questo è naturale se vuoi imparare tutto dalle basi e non creare confusione nella tua testa. Se sai già qualcosa sui linguaggi HTML e CSS, allora puoi anche trovare qui le conoscenze che ti mancano, o approfondire ciò che hai già imparato.

IN questa sezione Sono state pubblicate rispettivamente lezioni sugli standard linguistici HTML5 e CSS3; se esistono versioni più recenti di questi linguaggi, si rifletteranno anche nelle nuove lezioni in questa sezione e lo scoprirai sicuramente.

Probabilmente ogni persona che ha incontrato la creazione di un sito Web almeno una volta nella vita ha sicuramente sentito parlare di una combinazione come html e css, posso dire con sicurezza che se vuoi creare siti Web da solo, non puoi fare a meno della conoscenza di questi due cose.

Dopo aver ricevuto concetti generali C'è chiaramente un'immagine ambigua nella tua testa su cosa sia html e penso che questo non sia sorprendente. È ora di passare direttamente alla pratica e creare il tuo primo documento HTML.

Come il linguaggio html, i CSS hanno le proprie caratteristiche, regole e struttura. In questa lezione ti parlerò dei concetti base del linguaggio CSS, della sua struttura, del design e faremo i primi tabella CSS stili e scopri come collegare un foglio di stile a un documento html.

I selettori nei CSS sono la base del linguaggio stesso e apprenderli e comprenderli è molto importante, quindi in questa lezione ti parlerò di molti altri tipi di selettori e descriverò le loro capacità.

Un punto molto importante nella creazione di un sito Web è lavorare con il testo e, come capisci, devi anche essere in grado di lavorare con il testo in HTML e sapere quali tag esistono e come possono essere utilizzati.

Dopo aver appreso tutti i tag HTML per lavorare con il testo, ora è il momento di passare direttamente ai CSS per lavorare con il testo, il che amplierà significativamente le tue conoscenze e capacità.

I CSS contengono un numero enorme di tutti i tipi di contenuti convenienti e qualitativamente mutevoli aspetto proprietà e continuiamo a studiare il lavoro dei CSS con il testo e in questa lezione approfondiremo l'argomento del lavoro con il testo e esamineremo le nuove proprietà del testo.

Lavorare con le immagini durante la creazione da un sito Web è uno dei punti chiave, sia quando si crea un design, sia quando si semplicemente impagina o si scrive materiale per il proprio sito Web.

I CSS ampliano notevolmente la capacità di lavorare con qualsiasi oggettiHTML, in questa lezione vorrei parlarvi nel dettaglio dei parametri che si possono applicare alle immagini.

Questo articolo non vuole essere una guida completa al linguaggio di markup dei documenti HTML. Descrive le basi dell'HTML: i principi di base, i concetti e le definizioni di questa tecnologia, dopo averla padroneggiata, puoi facilmente passare allo studio della codifica HTML.

Freddo

Balbettare

Per studiare la lezione, scarica l'archivio con i file necessari.

HTML è un linguaggio di markup dei documenti. La pronuncia corretta è HTT.

Probabilmente hai mai lavorato in un editor di documenti Word o simili. applicazioni per ufficio? Probabilmente lo sai questo tipo gli editor dispongono di ricche funzionalità per modificare testo, organizzare elementi, inserire immagini, ecc.

Perché, potresti chiedere, scrivere di elaboratori di testo in un articolo sull'HTML? Ma perché. Se lo capisci, cos'è un redattore d'ufficio? Questa è un'applicazione per la modifica e la visualizzazione di documenti.

La parola chiave qui è documento. Cioè, creiamo, modifichiamo e visualizziamo un documento in qualche programma, in questo caso - in redattore d'ufficio. Se apri un documento del genere in simple editor di testo, ad esempio, nel Blocco note vedremo molti simboli e segni strani. Questo caos di simboli è incomprensibile per l’umanità, ma comprensibile per i computer. Grazie a questo linguaggio interiore, Documento di parole acquisisce una certa struttura e aspetto nell'editor stesso e il documento appare davanti a noi in tutto il suo splendore con testo e immagini formattati al loro posto.

HTML è un linguaggio di markup dei documenti per il browser. La parola qui è il browser e il documento è la pagina HTML Questa è la base stessa della tecnologia HTML, la cui comprensione è necessaria per non confondere il linguaggio di markup dei documenti web con i linguaggi di programmazione. utilizzando HTML noi marcatura, dove verrà mostrato l'elemento, l'immagine o il testo sulla pagina e in quale ordine appariranno uno accanto all'altro.

Sì, la semplice digitazione e formattazione del testo nelle applicazioni per ufficio non ha nulla a che fare con la programmazione. Ma il lettore attento noterà un dettaglio importante: in elaboratore di testi Digitiamo, modifichiamo e formattiamo testo e immagini utilizzando pulsanti e menu visivi, ma perché il codice HTML è scritto a mano? Perché apprendere così tanti dettagli tecnici sulla scrittura del markup per un documento?

In effetti, ci sono molti editor con cui puoi creare e modificare pagine HTML, simili a Word. Cioè, il codice HTML sorgente è nascosto per noi e non entriamo in esso.

Una sorta di Word per HTML. Come redattori visivi sono chiamati:

WYSIWYG editori - Ciò che vedi è ciò che ottieni. Cioè, se lo traduciamo in russo: ciò che vediamo è ciò che otteniamo.

Io li chiamo "wuzivoogies". Sebbene ciò sia foneticamente errato, dimostra chiaramente l'insensatezza di questa invenzione. I principianti utilizzano molto spesso tali editor per creare i loro primi siti web. Naturalmente, questo è conveniente: non è necessario approfondire lo studio di tag, stili di design e altre cose, a prima vista, spiacevoli e complesse. L'editor stesso converte automaticamente le nostre azioni in codice HTML.

Ma, come si suol dire, non succede nulla e basta. Più specificamente, questo approccio presenta inconvenienti molto gravi. Cosa impedisce a tutti di utilizzare editor visivi per progettare pagine HTML? Il fatto è che le pagine formate in questo modo di solito contengono molto codice non necessario e molti errori dal punto di vista semantico. Ora, ovviamente, non ci sono problemi Internet ad alta velocità connessione e la differenza nella dimensione della pagina di 400 kb e 100 kb non è significativa per la velocità, tuttavia, il codice HTML ottimizzato e scritto correttamente elimina molti problemi e offre molti vantaggi, vale a dire:

• Il codice HTML competente ha un effetto positivo su ottimizzazione dei motori di ricerca, velocità di scansione di un sito da parte di un robot di ricerca. I kilobyte di codice generati dal vuzivuga non sono accettabili e addirittura dannosi;
• Il codice HTML generato dall'editor WYSIWYG presenta molti errori semantici. Cioè, i tag generati da tale editor vengono utilizzati per altri scopi, dove devono essere utilizzati, ad esempio negli elenchi
  , l'editor genererà un altro tag di cui non abbiamo bisogno. Dipende, ovviamente, dall'editor, ma qui non intendiamo soluzioni complesse per la creazione di siti web modifica facile testo in un'area di testo utilizzando WYSIWYG.
  • Vengono generati molti tag non necessari e la struttura del documento diventa gonfia. Supponiamo che tu sposti un elemento in un programma del genere, prima a destra, poi a sinistra, poi al centro: ogni azione lascia una traccia in HTML originale codice. Un editor è un programma e non può sapere esattamente cosa vuoi ottenere come risultato; genera tonnellate di codice tenendo conto di tutto; possibili opzioni documentare il comportamento nel browser.
  • Di norma, gli editor per la progettazione visiva del codice HTML diventano rapidamente obsoleti. E a causa della mancanza di interesse da parte dei professionisti, generalmente vengono privati ​​del sostegno e smettono di svilupparsi. E l'HTML si sta evolvendo. Tutto si sviluppa tranne il wuzivoogi. Di conseguenza, non possono generare un codice corretto e moderno che utilizzi nuove funzionalità e soluzioni.
  • Sostenere e sviluppare tali progetti è una punizione celeste. Informazioni sull'utilizzo di modelli e riutilizzo Non può esistere alcun codice di discorso.

  Quindi scriveremo HTML solo con le penne. Non sono ancora stati inventati strumenti adeguati per l'editing visivo dell'HTML ed è improbabile che vengano visualizzati. Il linguaggio di markup HTML è facile da apprendere e comprendere e sono disponibili molti strumenti per automatizzare la scrittura del codice HTML, ma ne parleremo più approfonditamente in altre lezioni.

  Dopo aver armeggiato un po' con l'editor WYSIWYG, i giovani guru dell'HTML abbandonano questo compito futile e vanno avanti.

  Struttura Documento HTML

  Per le lezioni, consiglio di scaricare e installare l'editor di testo Sublime. Consiglio vivamente di non utilizzare il Blocco note di Windows integrato per il layout HTML se non vuoi rompere la tua psiche nelle prime fasi dell'apprendimento dell'HTML.

  Abbiamo deciso di scrivere manualmente il codice del documento HTML, ovvero di digitarlo. Layout HTML - processo Creazione HTML documento. Nella gente comune e negli ambienti informati è solo layout. Qualsiasi documento ha una struttura e determinate regole di costruzione. Da quali elementi è composto il codice, qual è la struttura dell'HTML?

  Creiamo un modello iniziale sul computer: il file index.html, apriamolo utilizzando un editor e incolliamo al suo interno il seguente codice:

  Intestazione Corpo del documento Tieni presente che i documenti HTML hanno l'estensione .html.

  Quindi, in ordine dall'esempio.

  - tipo di documento (doctype)

  Questa costruzione è sempre indicata all'inizio del documento in modo che il browser “capisca” correttamente quale versione di HTML viene utilizzata durante la costruzione del documento.

  Dato che l'HTML è in continua evoluzione, ha diverse versioni, come qualsiasi altro prodotto software. La versione corrente di HTML è la quinta e il doctype fornito nell'esempio è attuale.

  In linea di principio, non ha senso approfondire lo studio dei tipi di documenti, perché con il rilascio di HTML5 questo disegnoè diventato lo standard. Basta inserirlo all'inizio del documento ogni volta che inizi a creare il layout di un sito web.

  - inizio del documento

  Il primo tag che vediamo dopo il doctype è .

  Tag HTML - unità strutturale Markup del documento HTML. Il codice HTML è costituito da elementi costitutivi chiamati tag. Ogni tag ha la propria funzione e imparare il linguaggio di markup HTML significa in definitiva apprendere i tag e le loro proprietà in un documento.

  Vorrei sottolineare che imparare l'HTML non è così difficile come potrebbe sembrare a prima vista. Imparare i tag utilizzati nel markup dei documenti non è così facile. carico pesante sul cervello.

  Pertanto, il markup del documento inizia con un tag e termina con un tag di chiusura. Ogni tag che contiene altri tag o elementi deve essere chiuso con un tag di chiusura. Ad esempio, , , , ecc.

  Il tag è obbligatorio perché contiene l'intera struttura del documento e funge da wrapper per altri elementi.

  Etichetta

  Successivamente vediamo il tag, che contiene altri elementi che non ci sono ancora chiari. Contiene altri elementi: ciò significa che gli elementi o i tag si trovano tra i tag di apertura e chiusura del costrutto:

  contenuto o altri tag

  Lo scopo del tag è memorizzare le metainformazioni di un documento HTML, ovvero informazioni che non vengono visualizzate nel documento stesso, ma sono importanti e determinano in gran parte l'aspetto e il comportamento del documento.
  Questo tag è obbligatorio nel documento.

  Tag: titolo del documento Titolo

  Il titolo è un tag obbligatorio che contiene metainformazioni testuali visualizzate nel titolo del browser o della scheda. Il tag deve essere nel formato . Inoltre, viene utilizzato il contenuto di questo tag motori di ricerca per visualizzare il documento nei risultati della ricerca.

  Metaetichetta

  Il meta tag è un tag specializzato progettato per fornire dati strutturati su una pagina. I meta tag vengono spesso utilizzati nei file . I meta tag non sono richiesti nella struttura di un documento HTML.

  Favicon

  Allega un file con un'immagine favicon al documento. Favicon è un'icona in miniatura visualizzata accanto al titolo del documento in una scheda del browser. Favicon lo è file grafico, di dimensione 16 x 16 (o 32 x 32) pixel, che può avere vari formati, come png, jpg, ico, gif. Usato tradizionalmente formato ico. Le favicon animate lo sono file gif contenente animazione. Puoi vedere una favicon animata, ad esempio, su VKontakte, quando arriva un nuovo messaggio.

  Stili dei documenti CSS

  Si connette a Documento CSS File di stile HTML.

  CSS- a cascata Stili dei documenti HTML. Ogni tag che si trova nel tag ha una serie di proprietà, come colore, larghezza, altezza, posizione rispetto ad altri elementi. Tutte queste proprietà sono stili CSS che possono essere esportati in un file esterno. Il design collega file esterni al documento HTML, inclusi gli stili CSS.

  Nota: la proprietà href di un costrutto specifica la posizione del file esterno. Nel nostro esempio, il file style.css E favicon.ico, si trovano nella stessa cartella del file indice.html.

  Etichetta

  non ha un tag di chiusura.

  Il tag contiene codice o un collegamento a un file javaScript e viene spesso utilizzato all'interno di un tag, sebbene lo strumento Page Speed ​​​​Optimization di Google consiglia di utilizzare questo tag alla fine di un documento, prima del tag di chiusura. Nel nostro esempio è collegato un file esterno script.js

  , che si trova nella stessa cartella del file index.html principale.

  Quindi, amici, abbiamo esaminato gli elementi principali che vengono utilizzati più spesso nel tag. Oltre a questi elementi, ce ne sono altri più specifici e facoltativi.

  Corpo ovvero corpo

  È qui che iniziano tutte le cose divertenti e visivamente tangibili nel layout HTML di un documento. indice.html Passiamo direttamente al layout della parte visibile della pagina. Tutto ciò che scriviamo e layout all'interno del tag verrà visualizzato nel browser. Apriamo il nostro file

  nel browser per vedere chiaramente cosa stiamo facendo nell'editor. Il tag può contenere qualsiasi Tag HTML

  necessario per predisporre il documento e garantirne la funzionalità (form). Fornirò una tabella dei tag più utilizzati e descriverò brevemente ciascuno di essi. Puoi eseguire immediatamente gli esempi forniti nell'editor.	Etichetta
  	Descrizione Un tag per creare collegamenti in un documento.
  ,	Esempio: testo del collegamento L'attributo href specifica il documento a cui condurrà il collegamento. Crea testo corsivo o grassetto (enfatizzato).
  , , , , ,	Esempio: testo in corsivo testo in grassetto (enfatizzato). Intestazioni dei documenti. Esistono 6 livelli di titoli in totale, ma in pratica vengono utilizzati solo da h1 a h4. Dovrebbe esserci una sola intestazione nel documento, evidenziata con il tag h1, come intestazione principale del documento.
  ,	Elenchi di documenti. Si tratta di un elenco numerato o puntato. L'elemento di tale elenco è il tag Esempi: Elemento elenco puntato 1 Punto elenco 2 Voce dell'elenco numerato 1 Voce dell'elenco numerato 2
  	Paragrafo. Questo tag definisce un paragrafo di testo separato da altri paragrafi. È altamente consigliabile chiudere questo tag. Esempio: L'aspetto del markup HTML è in gran parte determinato dagli stili CSS. Tuttavia, alcuni webmaster scelgono di non utilizzare gli stili nelle prime fasi di un progetto.
  	Immagine. Usando questo tag, puoi inserire un'immagine nel markup HTML. Assicurati di includere un testo alternativo per tutte le immagini: l'attributo "alt". Questo tag si chiude automaticamente. Esempio:
  + +	Moduli ed elementi di input. I moduli sono progettati per inserire informazioni nel sistema sul server. Più o meno feedback utente e sito. Ad esempio, i moduli vengono utilizzati quando è necessario inviare un messaggio al server. Inoltre, i moduli possono svolgere altre funzioni, ma il compito principale è inviare dati al server. Un esempio è un semplice modulo per l'invio di un messaggio, in cui l'utente del sito indica il suo nome, la sua e-mail e del testo: Testo del messaggio
  	Definisce una sottostringa all'interno di una stringa. Utilizzato per definire lo stile di parte di una linea utilizzando i CSS. Uno dei tag più utilizzati. Senza design, non si manifesta in alcun modo nel browser. Esempio: Imparare l'HTML, nella maggior parte dei casi, non causa alcuna difficoltà ai principianti.
  ,	I tag sono progettati per inserire video e audio in un documento. Il tag di chiusura è obbligatorio. Esempi: il parametro controlli ci dice che la pagina dovrebbe visualizzare i controlli del contenuto multimediale, proprio come un normale lettore audio/video.
  	Davvero un tag reale. Più usato e etichetta popolare V Markup HTML pagine. Questo è un elemento di blocco progettato per gestire i blocchi sul sito. Viene spesso utilizzato il concetto di layout "meraviglioso": ciò significa che tutti i blocchi del sito sono disposti utilizzando questi tag. Può contenere altri tag. Esempio: testo in un blocco nidificato Tutti gli elementi, nella maggior parte dei casi, sono formattati Proprietà CSS stili. Il tag di chiusura è obbligatorio.
  	Questo tag carica una pagina esterna nel documento. Esempio:

  Non abbiamo considerato tutti i tag e questo non è necessario. in questa fase. La cosa principale è comprendere l'idea di base dell'HTML, imparare come utilizzare i tag presentati sopra e poi andare avanti.

  Tieni presente che tutti i nomi nei file inclusi devono essere scritti Caratteri latini, senza spazi.

  Ad esempio, non:

  Ciò è necessario per una maggiore compatibilità del contenuto della pagina. Inoltre, dettano gli standard per la scrittura del codice HTML.

  Quindi, ora conosciamo alcune nozioni di base dell'HTML: quale struttura dovrebbe avere un tipico documento HTML, conosciamo alcuni dei tag più popolari, è ora di passare alla parte più deliziosa, vale a dire i cookie.

  Compito pratico sul layout HTML

  Se non hai ancora scaricato l'archivio con gli esempi, fallo. Ad esempio, puoi guardare il file example.html, anch'esso presente nell'archivio.

• Decomprimere l'archivio e creare un file index.html nella cartella con i file decompressi. Apri il file creato utilizzando un editor di testo Testo sublime;
• Creare una struttura iniziale del documento con un doctype, un tag contenente e e procedere alla modifica del contenuto del tag;
• Apri il file readme.txt e completa le attività appropriate nel file index.html che hai creato. Per verificare il risultato, apri index.html nel tuo browser preferito.

Questo conclude la lezione sulle basi dell'HTML, nella prossima lezione “CSS Basics” impareremo come gestire gli stili degli elementi del documento, conoscere i fogli di stile a cascata, imparare a usare le classi di stile e rendere il nostro layout bello e colorato .

Benvenuti nelle pagine del mio blog. HTML è un semplice linguaggio di markup utilizzato per creare pagine web. Ho detto che era semplice, quindi non saresti stato intimidito dall'impararlo. Il linguaggio html è semplicemente l'ideale per i principianti: è molto più difficile padroneggiare immediatamente un linguaggio di programmazione da zero, ma html in realtà è molto più semplice.

In questo articolo voglio raccontarti come imparare questa lingua nel modo più rapido ed efficace, così che entro un mese o due la conoscerai perfettamente. Pensi che sia impossibile? Ho iniziato imparare l'HTML alla fine di marzo. A fine maggio conoscevo già senza problemi il 90% dei tag necessari per lavorare.

Come imparare una lingua gratuitamente?

Naturalmente, per un apprendimento più rapido, dovresti trovare diversi siti utili. In primo luogo, avrai bisogno riferimento html. Anche i programmatori esperti lo usano, perché è semplicemente impossibile tenere in testa dozzine di tag e i loro attributi.

Dai libri di riferimento che posso consigliarti: htmlbook. Questo è un sito davvero interessante che raccoglie tutti i tag e mostra il risultato del loro lavoro descrizione dettagliata. Ma il libro di consultazione è solo uno strumento aggiuntivo; l’effetto maggiore può essere ottenuto con la pratica reale.

Corsi interattivi

E qui sto parlando di corsi interattivi. Questa è la capacità di scrivere codice e vedere immediatamente come viene visualizzato. Durante i corsi ti verranno assegnati dei compiti. Innanzitutto quelli semplici, ad esempio trasformare il testo in un titolo o creare una tabella. Allora è più difficile. Alla fine acquisirai una comprensione di cosa puoi fare con l'HTML. Se pensi di dover pagare per questo, ti sbagli.

è un sito meraviglioso con corsi su html e css. I primi 16-18 corsi sono gratuiti! Se vuoi continuare i tuoi studi e accedere a quelli a pagamento, dovrai pagare 300 rubli al mese o 1800 all'anno. Personalmente ho pagato 300 rubli, ho completato tutti i corsi a pagamento in un mese e ne ho tratto molti benefici.

Importanza dei record

Un altro consiglio da parte mia: scrivilo! Annota tutte le informazioni che sono nuove e importanti per te. Senza scriverlo, rischi di non conservare nella memoria le conoscenze necessarie. Personalmente ho tre quaderni generali sul mio scaffale, quasi completamente pieni di scritti, e di tanto in tanto li guardo quando dimentico questa o quella proprietà.

Studio parallelo di html e css

L'HTML è solo una tecnologia web che aiuta a creare la struttura e il layout di una pagina web. CSS è interamente responsabile della progettazione nello sviluppo del sito web. Queste lingue devono essere apprese contemporaneamente perché interagiscono tra loro.

Pratica indipendente

Una volta acquisita una certa conoscenza, puoi esercitarti da solo. Come farlo? Prova a strutturare un articolo con immagini, una tabella, un elenco nidificato, un semplice layout di pagina a due colonne o qualcos'altro. Devi esercitarti perché è l'unico modo per radicare rapidamente nel tuo cervello una comprensione di come funzionano le cose. La cosa migliore, ovviamente, è trovarti un insegnante in questa materia, ma molto probabilmente dovrai pagare per questo.

Lezioni dal team webformyself

Webformyself è un meraviglioso portale Internet che fornisce moltissime informazioni sulla creazione di siti Web. Sul loro sito web puoi trovare molti articoli gratuiti su HTML, CSS e layout del sito web, ma hanno anche rilasciato video tutorial a pagamento, il cui scopo è trasmetterti conoscenze utili il più rapidamente possibile.

Alla fine, dovresti avere una ragione per cui stai imparando queste tecnologie web. Questo di solito viene fatto per imparare a creare da soli i layout del sito web. Se anche tu hai questo obiettivo, un'ottima opzione per te sarebbe acquistare l'accesso alle lezioni premium su webformyself.com. Di conseguenza, puoi accedere non solo alle lezioni su HTML e CSS, ma anche a molte altre. Ad esempio, JavaScript e WordPress.

Ecco un collegamento alla descrizione della sezione premium. Ci sono lezioni utili lì, inclusa l'opportunità di creare il tuo primo layout utilizzando le lezioni. Questo è molto importante, perché farai una buona pratica, dopodiché potrai migliorare le tue capacità da solo, provando a realizzare altri layout per i siti che trovi su Internet.

Quanto tempo ci vuole per imparare le lingue?

In media, HTML e CSS possono essere appresi molto rapidamente, con il giusto approccio. Ad esempio, mi ci sono voluti diversi mesi. Se sai dove acquisire conoscenze, il processo di apprendimento può essere accelerato più volte.

Ti ho dato buoni siti con materiali utili, poi dipende da te. In linea di principio, le risorse di cui sopra sono le migliori su Internet. Ad esempio, più di centomila persone hanno completato i corsi di Htmlacademy e più di 87mila persone si sono iscritte agli aggiornamenti di Webformyself.

HTML sta per Hyper T ext M arkup Language, cioè L'Hypertext Markup Language è l'elemento base delle pagine web, utilizzato per creare e presentare visivamente le pagine web.

L'HTML aggiunge markup al testo semplice. L'ipertesto contiene vari collegamenti attraverso i quali le pagine web sono collegate tra loro. Con HTML chiunque può creare siti Web sia statici che dinamici. L'HTML è un linguaggio che descrive la struttura e la semantica del contenuto di un documento web. Il contenuto di una pagina web viene contrassegnato utilizzando tag, che rappresentano elementi HTML. Esempi di tali elementi sono, , e così via. Questi elementi costituiscono gli elementi costitutivi di qualsiasi sito web.

L'HTML è stato inventato nel 1991 dallo scienziato Tim Berners-Lee ed era originariamente destinato allo scambio di documenti tra scienziati di diverse università. Con la sua invenzione, Tim Burns-Lee ha gettato le basi rete moderna Internet.

Esistono diverse versioni di HTML. Lo standard linguistico viene continuamente aggiornato e integrato, per cui viene pubblicato quasi ogni anno nuova versione HTML. La versione "HTML 2.0" è stata la prima specifica HTML standard, pubblicata nel 1995. HTML 4.01 è la versione principale di HTML pubblicata alla fine del 1999 ed è ampiamente utilizzata oggi. Oggi la versione più popolare è HTML-5, che è estensione HTML 4.01 e pubblicato nel 2012.

Un documento HTML o una pagina web è un semplice documento di testo contenenti tag (che a loro volta sono in testo semplice, racchiuso tra parentesi angolari). Una pagina web può essere digitata in un normale editor di testo (Notepad, WordPad, Word, ecc.) o in uno specializzato con evidenziazione del codice (Notepad++, Sublime Text, ecc.). I documenti HTML vengono archiviati come file con estensione .htm o .html.

Esempi online in ogni lezione

Man mano che presentiamo il materiale, ogni lezione fornirà esempi che ti aiuteranno a comprendere ciascun codice in dettaglio e, attraverso la pratica, a divertirti imparando. Con il nostro editor HTML online, puoi modificare un documento HTML e quindi fare clic sul pulsante arancione "Esegui" nell'editor, che si trova sopra la finestra dell'editor a sinistra per vedere il risultato. Se utilizzi un editor HTML specializzato, puoi copiare l'esempio e visualizzare i risultati del tuo lavoro nel browser installato sul tuo computer.

Esempio HTML: Provalo tu stesso


Titolo della pagina

Questo è il titolo


Questo è un paragrafo.



Esempi HTML in linea

Il tutorial HTML ti fornisce più di 100 esempi online che ti aiuteranno a padroneggiare facilmente il linguaggio di markup. È meglio vedere una volta che sentire cento volte! La teoria e la pratica sono la chiave del tuo successo nella padronanza dell'HTML.

Con questa serie voglio aprire un ciclo di lezioni dedicate all'HTML. Ho preso questa decisione perché vorrei provare a insegnare agli utenti come creare siti web da zero. Questo pensiero è nella mia testa da un bel po' di tempo. L'unica domanda che si poneva era da dove iniziare, con HTML o procedere direttamente all'installazione del motore e alla sua ulteriore configurazione.

Ma se inizi imparando il motore, alcuni utenti che non conoscono l'HTML rimarranno fuori. Quindi ho deciso di iniziare dalle basi e di farlo in modo tale che anche qualsiasi principiante potesse capire cosa e come.

Allora cos'è l'HTML?

L'abbreviazione stessa sta per Hypertext Markup Language (HyperText Markup Language).

Per dirla semplicemente, HTML è uno speciale linguaggio di markup che indica al browser come visualizzare una particolare pagina web. Cioè, in quale carattere deve essere visualizzato il testo, in quale ordine devono essere disposti gli elementi, quali elementi devono essere visualizzati sottolineati, ecc. E a seconda di quale elemento incontra il browser, in conformità con le regole stabilite nel browser stesso , questo elemento apparirà così visualizzato. Tuttavia queste regole possono poi essere modificate, ma di questo parlerò nelle mie prossime lezioni, che saranno dedicate ai CSS.

Propongo di iniziare guardando un esempio della pagina web più semplice che possa essere. Ora non dovresti concentrare la tua attenzione sul significato di questi o quei tag. C'è un tempo per tutto, per cominciare, basta prestare attenzione a dove si trova tutto nel codice e a come tutto si collega a ciò che viene visualizzato nel browser. Considera un documento HTML di esempio:

Titolo della pagina Un giorno della mia vita Preparazione per un concerto

Oggi mi sono svegliato presto perché mi aspettava una giornata dura. Dopotutto oggi devo esibirmi in un concerto davanti a un centinaio di spettatori. E per essere sicuro che tutto vada bene, devo ripetere il programma delle prove

Prova

Tutto è andato liscio. Nessuno del nostro team ha perso il ritmo e, alla fine, tutti si sono preoccupati invano.

Concerto

Tutti si sono esibiti bene, anche se penso che ci sia stato un momento in cui il nostro batterista ha perso il ritmo. Ma siamo usciti abilmente dalla situazione.

Innanzitutto, dovrai digitare questo testo in un editor di testo (trovo che il più conveniente sia Notepad ++) e salvare il file con il nome indice .html da qualche parte sul tuo disco. A fare doppio clic Nel file salvato vedrai una pagina simile a questa.

Tieni presente che i tag stessi non vengono visualizzati, ma viene visualizzato il contenuto stesso che si trova tra di essi. E da qui puoi concludere che i tag agiscono come un elemento di design in HTML.

Guardare codice sorgente. Come avrai già notato, c'è un piccolo trattino prima della parola "Uno". Tuttavia il browser non ne ha tenuto conto; lo ha semplicemente inghiottito silenziosamente, come se non fosse mai esistito. Inoltre, se provi a inserire molti spazi tra le parole, verranno tutti percepiti dal browser come uno spazio: l'HTML ha questa caratteristica.

Ed ecco un altro consiglio: quando scrivi codice HTML, allenati a far rientrare i tag che sono annidati all’interno di altri. Ad esempio, i tag title e body sono nidificati all'interno del tag html. Ciò significa che quando scrivi questi tag, non dimenticare di rientrarli di conseguenza. Di solito vengono eseguiti utilizzando due spazi o tabulazioni: è una questione di gusti. Perché è necessario? Ora, in quel piccolo pezzo di documento che ho citato sopra come esempio, non ci sono molte informazioni, quindi è abbastanza problematico confondersi lì. Tuttavia, se nella pagina sono presenti molti elementi nidificati, nulla sarà più facile che perdersi in questo enorme codice e avere difficoltà a capire in quale parte del documento ci si trova in questo momento. Quindi è meglio abituarsi subito a un buon stile, poi lo capirai da solo e ti servirà bene in futuro.

Vale anche la pena indicare il numero minimo di tag che dovrebbero essere presenti nel documento HTML. Sto parlando di questa parte:

Ma anche se questa parte manca, la maggior parte dei browser chiuderà un occhio su tutto ciò e visualizzerà comunque la tua pagina. Tuttavia, uno stile di scrittura del codice così frivolo in cui una persona manca gran numero I tag sono scritti male, quindi è consigliabile avere in ogni caso tutti questi elementi sulla tua pagina. In caso contrario, ciò potrebbe comportare un problema di compatibilità con altri browser, che potrebbe in definitiva influenzare l'aspetto del tuo sito e, di conseguenza, il traffico.

Inoltre, puoi scrivere commenti in un documento HTML: si tratta di informazioni puramente di servizio destinate esclusivamente a te. Di solito si tratta di alcune note importanti che servono come promemoria o semplicemente qualcosa a cui vale la pena prestare attenzione. I commenti non vengono elaborati dal browser, il che significa che l'utente non li vedrà. Di solito sono scritti così:

Ora proviamo a capire da soli quale tag nel nostro esempio sopra è responsabile di cosa.

Il tag html significa che inizia l'output del codice html.

head – sezione informazioni sul servizio. Tra le altre cose c'è title , responsabile del testo nel titolo della finestra del browser. Questa sezione può anche essere trattata come informazioni che vogliamo comunicare al browser su questa pagina.

corpo: inizia la parte principale del documento.

h 1 – intestazione.

h 2 – sottotitolo.

p – paragrafo.

Probabilmente è tutto! Se questo era il tuo primo documento HTML, allora congratulazioni! Sì, non ha un bell'aspetto come vorremmo. Tuttavia abbiamo materiale su cui possiamo già lavorare. E nelle prossime lezioni tutto sarà ancora più interessante e toccheremo lentamente il lavoro con i fogli di stile a cascata (CSS).

• < Назад

Per commentare è necessario registrarsi.