Termini

Ecco alcuni dei termini che incontrerai in seguito.

1. Www- la nota abbreviazione di World Wide Web, sinonimo di Internet.
2. ragnatelaè il nome abbreviato per il World Wide Web.
3. Pagina web- un documento separato (file di testo preparato in modo speciale) archiviato su Internet.
4. programma di navigazione in rete- software necessario per visualizzare una pagina web.
5. Luogo- un insieme di pagine web di proprietà di un unico proprietario.
6. Pagina iniziale- la pagina principale (titolo) del sito.
7. URL- Uniform Resource Locator, utilizzato per indicare l'indirizzo di una pagina nel WWW.
8. server web- un computer con un software speciale su cui devono essere posizionate le pagine web per poterle vedere su Internet.

Che cos'è l'ipertesto?

Il vantaggio principale del WWW è la creazione di documenti ipertestuali e, se sei interessato a qualsiasi elemento in tale documento, è sufficiente "colpirlo" con il cursore per ottenere le informazioni necessarie. Inoltre in un documento è possibile creare collegamenti ad altri scritti da altri autori o anche localizzati su un altro server. Uno dei principali vantaggi del WWW rispetto ad altri mezzi di ricerca e trasmissione di informazioni è il "multimediale". Sul WWW, puoi vedere testo e immagini, suoni e animazioni su una pagina contemporaneamente. Puoi leggere molto brevemente sulla storia dell'ipertesto sul sito web di Artemy Lebedev.

Che cos'è l'HTML?

HTML sta per h yper T ext m arkup l lingua, cioè Hyper Text Markup Language. È lo standard con cui i documenti web vengono visualizzati dai browser. Come suggerisce il nome, HTML è un metodo per contrassegnare il testo normale in modo che il browser visualizzi le informazioni nel formato di cui ha bisogno. I file contenenti testo con markup html devono avere l'estensione htm o html.

I comandi HTML sono chiamati tag, indicano quale operazione eseguire, come visualizzare il testo, disegnare una linea o utilizzare la grafica. I tag contenuti nel testo possono cambiare font, stili e creare effetti speciali. Ciò consente un'interfaccia grafica interessante durante la visualizzazione di un file di testo standard. Oltre a modificare lo stile del testo, l'HTML indica anche al browser quando parte del testo nella pagina deve essere considerato un collegamento ipertestuale, dove inserire elementi grafici ed elementi speciali, inviare comandi di posta e altre funzionalità di accessibilità.

HTML non è un linguaggio di programmazione nel vero senso della parola. Ha un formato specifico che è lo standard mondiale. Questo standard si chiama Definizione del tipo di documento(determinazione del tipo di documento), o DTD. Il primo standard HTML DTD introdotto su Internet è stata la versione 1.0. Quindi è stata creata la versione 2.0 per il WWW, più premurosa. Lo standard è ora la versione HTML 4.0.

Struttura dei comandi HTML

I comandi HTML (tag) sono racchiusi tra parentesi angolari:

<название_команды>- comando start

campo azione comando

- fine del comando

Lo standard HTML richiede la presenza del tag "end of command", se non diversamente specificato.

Il primissimo comando del documento html è il comando , rispettivamente, l'ultimo comando sarà -(pronunciato "Non HTML").

In generale, la struttura del documento html si presenta così:

quelli. due sezioni sono chiaramente distinte: ("Testa") e ("corpo").

COMMENTO. L'HTML non fa distinzione tra maiuscole e minuscole. I comandi della lingua possono essere digitati sia in lettere maiuscole che minuscole, ad es. squadra equivalente al comando o .
Se il browser non supporta il comando, lo ignora semplicemente.

La primissima riga del documento html è un comando di servizio che consente al browser di identificare il tipo di documento (DOCTYPE) come documento nello standard HTML 4.0 definito dall'Internet Engineering Task Force (IETF). Questa riga indica anche il DTD (Document Type Declaration - descrizione del tipo di documento) corrispondente: il documento è PUBLIC (ovvero non dipende dalle impostazioni di sistema) e la lingua del documento è il russo (RU).

All'inizio del documento html c'è un comando che mostra il titolo della pagina nell'intestazione della finestra del browser (barra blu nella parte superiore della finestra):

Il testo effettivo che dovrebbe essere nel documento html è posto tra i comandi e, Per esempio:

Benvenuto in HTML!

Per vedere come apparirà questo esempio in un browser, devi copiare tutto su Blocco note, salvare il file con il nome primer.htm, quindi in Explorer, fai clic sul nome del file - di conseguenza, questo documento html si aprirà automaticamente nella finestra di Internet Explorer:

attributi

I comandi possono avere parametri chiamati attributi... Gli attributi modificano l'esecuzione di un comando, sono posti immediatamente dopo il nome del comando, all'interno di parentesi angolari, e hanno il seguente formato:

ATTRIBUTO = "valore_attributo"

Se valore_attributo è costituito da una parola, le virgolette sono facoltative. Se valore_attributo contiene spazi o caratteri non alfabetici, le virgolette sono obbligatorie.

Se un comando ha più attributi, questi sono separati da spazi:

<название_команды

attributo1 = "attributo_valore1"

attributo2 = "attributo_valore2">

Come esempio di attributi, considera il comando , che imposta la codifica di Windows per le lettere dell'alfabeto russo e si trova rigorosamente dentro sezione :

Se il comando skip, allora sono possibili situazioni in cui "krakozyabry" apparirà sullo schermo del browser invece delle lettere russe. Questo non accadrà con questo comando!

Editor HTML

Tutti i documenti html sono scritti come testo normale, quindi possono essere creati e modificati in qualsiasi editor di testo, ad esempio nel Blocco note. Ma è molto più comodo usare editor html specializzati, ad esempio UltraModifica(licenza) o Smart Web Builder(libero).

Questi editor visualizzano tutti i comandi HTML in un colore e gli attributi dei comandi in un altro. Mentre solo il testo sarà nero. Per questo motivo, se viene commesso un errore nel nome di un comando (o attributo), verrà visualizzato in nero, come un normale testo.

Colore nel documento html

Squadra ha diversi attributi.

L'attributo bgcolor = permette di impostare il colore di sfondo della pagina:

Questa pagina ha uno sfondo giallo.

L'impostazione del colore può essere eseguita in due modi:

• Specificando un nome per il colore selezionato.
• Specificando il numero del colore come rapporto tra le sfumature di rosso, verde e blu (Red-Green-Blue = RGB).

Il numero del colore RGB è specificato da tre numeri esadecimali (HEX) a due cifre (il numero deve essere preceduto dal segno #) o utilizzando la funzione incorporata rgb(), ognuno dei quali può variare da Da 0 a 255, ad esempio: rgb (153,102,255). Ciascun numero dell'intervallo () definisce l'intensità del colore corrispondente.

Ad esempio, il numero di colore "#FF0000" = rgb (255,0,0) corrisponde al colore rosso (Red), poiché ha la massima intensità per la componente rossa, e le componenti verde e blu hanno valori uguali a zero. Allo stesso modo, il numero "# 00FF00" = rgb (0,255,0) corrisponde al verde (verde) e il numero "# 0000FF" = rgb (0,0,255) corrisponde al blu (blu).

Ci sono 16 nomi di colori standard supportati da Windows:

	Nero = "# 000000"		Verde = "# 008000"
	Argento = "# C0C0C0"		Lime = "# 00FF00"
	Grigio = "# 808080"		Oliva = "#808000"
	Bianco = "#FFFFFF"		Giallo = "#FFFF00"
	Marrone = "# 800000"		Marina = "# 000080"
	Rosso = "#FF0000"		Blu = "#0000FF"
	Viola = "#800080"		Verde acqua = "# 008080"
	Fucsia = "#FF00FF"		Acqua = "# 00FFFF"

Oltre a questi 16 nomi di colori, c'è anche una tabella dei colori estesa. È possibile utilizzare i nomi dei colori da questa tabella, ma è ancora più affidabile specificare il numero RGB. Il fatto è che mentre l'attività Rosso-Verde-Blu consente teoricamente di visualizzare "un milione" di colori, in realtà, tutto è determinato dalla scheda video e dal monitor che utilizza il client.

Quando si crea un'immagine per la pubblicazione su Internet, il problema principale è la corretta resa dei colori su diversi tipi di computer, monitor e browser. Quando il browser non è in grado di eseguire correttamente il rendering di un particolare colore, seleziona un colore diverso o mescola diversi colori adiacenti. A volte il colore può essere sostituito con qualcosa di completamente inappropriato. Pertanto, è stata sviluppata la cosiddetta tavolozza dei colori "sicura". Utilizzando i colori di questa tavolozza, puoi essere certo che ogni colore verrà riprodotto correttamente e senza distorsioni. Uno qualsiasi dei 216 colori "sicuri" può essere utilizzato per grafica, testo e sfondi. La palette è composta da 32 combinazioni di 6 tonalità di rosso, verde e blu.

intestazioni

L'HTML ha sei livelli di intestazione, numerati da 1 a 6 (l'intestazione di primo livello è la dimensione dell'intestazione più grande). Rispetto al testo normale, i titoli sono automaticamente in grassetto.

Sintassi dell'intestazione:

Titolo più grande, centrato

Titolo di medie dimensioni, posizionato come?

Titolo più piccolo

qui h è il comando effettivo per impostare l'intestazione ( Intestazione), e un numero da 1 a 6 determina la dimensione dell'intestazione,
align = è un attributo che specifica la posizione del titolo sullo schermo:
align = left - posiziona a sinistra (accettato per impostazione predefinita, ovvero non puoi specificarlo)
allinea = centra - centra la finestra
align = right - posizionalo a destra nella finestra del browser.

paragrafi

Comando paragrafo

Ha anche un attributo align = che, oltre ai tre valori precedenti, può anche avere un valore giustificato:

impostare l'allineamento del bordo destro del testo sullo schermo (come si fa in questo testo).

A differenza dei documenti creati nell'editor di Word, le interruzioni di riga non sono essenziali nei documenti html. Un'interruzione di riga può verificarsi in qualsiasi spazio nel file di origine, questa interruzione verrà ignorata quando visualizzata. Ad esempio:

Capitolo 1

Benvenuto in HTML!

Ecco come e come non creare pagine web.

Non è così difficile.

Nel fascicolo originale, le due frasi del primo paragrafo sono su due righe separate. Il browser ignora questa interruzione di riga e inizia un nuovo paragrafo solo dopo il comando

Usando il comando
puoi passare a una nuova riga senza iniziare un nuovo paragrafo (nella maggior parte dei browser, i paragrafi sono evidenziati con righe vuote aggiuntive). Ad esempio, la linea

Facoltà
dove impariamo

Spazio indistruttibile

Poiché il browser ignora le interruzioni di riga nel file html, dove una riga sullo schermo finisce e ne inizia un'altra, dipende dalla dimensione del carattere sullo schermo del client. Inoltre, il browser ignora anche qualsiasi quantità di spazi tra le parole - tutti gli spazi vengono sostituiti con uno... Pertanto, se è necessario inserire più spazi in una riga, il cosiddetto primitivo simbolico Spazio unificatore, che inizia con una e commerciale (&) e termina con un punto e virgola: (abbreviazione di Spazio senza interruzioni).

I caratteri primitivi fanno distinzione tra maiuscole e minuscole: NON possono essere usati invece.

Ad esempio, la linea

Facoltà dove studiamo

apparirà così sullo schermo:

Poiché il browser interrompe la riga nello spazio, è possibile una situazione in cui, ad esempio, le iniziali rimarranno su una riga e il cognome si "sposterà" su un'altra. Per evitare che ciò accada, assicurati di inserire uno spazio continuo tra le iniziali e il cognome.

Nella tipografia russa, ci sono regole rigorose per il posizionamento del carattere spazio unificatore.

Carattere di spazio unificatore(denotarlo come) è impostato nei seguenti casi.

1. Prima del trattino:
   Questo è un esempio
   quelli. Un trattino non può iniziare una riga a meno che non sia l'inizio di una frase vocale diretta.
2. Tra le due iniziali e le iniziali e il cognome:
   I. I. Ivanov
   quelli. una variante senza spazi: II Ivanov è assolutamente inaccettabile!
3. Tra il cancelletto (#) o il paragrafo (§) e i seguenti numeri:
   n. 7, § 3
   ed ecco l'opzione senza spazio: n. 7 - l'errore grossolano più tipico!
4. Tra un numero e la seguente unità di misura:
   XVIII sec., 10 kg, 2000
5. Tra l'abbreviazione e il cognome:
   il signor Petrov
6. Dopo le abbreviazioni geografiche:
   Novosibirsk, b. Ob

Sposta testo

Per visualizzare il testo con un leggero spostamento a destra (dal bordo sinistro dello schermo), ad esempio versi, utilizzare i comandi:

Facoltà
dove impariamo

apparirà così sullo schermo:

Elenchi

Oggi, gli elenchi possono essere visualizzati su quasi tutte le pagine web. Esistono diversi formati di elenco che consentono di evidenziare informazioni specifiche nel testo standard. In un paragrafo normale, il testo va a capo da una riga all'altra. Il testo negli elenchi ha un aspetto diverso. Gli elementi dell'elenco sono rientrati dai margini, separati da altri paragrafi di testo e, inoltre, sono puntati o numerati.

Se usati correttamente, gli elenchi rendono le grandi quantità di informazioni facili da leggere e altamente visibili. Gli elenchi possono essere annidati l'uno nell'altro, formando una struttura complessa. È possibile, ad esempio, utilizzare un elenco per organizzare i collegamenti.

Esistono tre tipi principali di elenchi: elenchi puntati (non numerati), numerati e di definizione. Sono simili in quanto posizionano tutti gli elementi su una nuova riga e puoi selezionare il testo che desideri. Le principali differenze tra i tipi elencati riguardano la numerazione e la struttura.

Elenco puntato

L'elenco puntato o puntato più comunemente usato. Ogni elemento di questo elenco inizia con un pittogramma in miniatura.

L'elenco non ordinato è impostato dai comandi (Lista non ordinata) e gli elementi dell'elenco tra i comandi sono impostati utilizzando il comando

(Voce di elenco).

Ad esempio, la lista

Sistemi di numerazione

• Non posizionale
  
• posizionale
  

sarà simile a questo:

Comando elenco

ha un tipo = attributo, che imposta il tipo di marcatore per gli elementi dell'elenco:
- cerchio nero (predefinito)

- cerchio di luce

- quadrato

Se un elenco è nidificato all'interno di un altro, il tipo di indicatore cambia automaticamente:

Sistemi di numerazione





• Non posizionale

• egiziano antico

• romano

• Slavo Ecclesiastico Antico

• posizionale

• babilonese

• indiano

  Appare così sullo schermo:

  Elenco numerato

  Un elenco numerato è molto simile a un elenco puntato. L'unica differenza è che i numeri o le lettere sequenziali vengono posizionati automaticamente davanti a ciascun elemento nell'elenco numerato invece dei contrassegni grafici. Ciò elimina la necessità di comporre manualmente ogni elemento dell'elenco.

  Un elenco numerato viene impostato utilizzando i comandi

  (Elenco ordinato) e
  ... Come nell'elenco puntato, ogni elemento è specificato dal comando
• , Per esempio:

  Sistemi di numerazione

  
  
  
  
  1. Non posizionale
     
  2. posizionale
     

  sarà simile a questo:

  Come puoi vedere, non ci sono numeri (1, 2) accanto agli elementi dell'elenco nel file originale.

  Per impostazione predefinita, gli elenchi HTML vengono numerati automaticamente utilizzando numeri arabi: 1, 2, 3 e così via. È possibile specificare un metodo di numerazione diverso, ad esempio lettere (maiuscole o minuscole) o numeri romani. Per modificare il tipo di numerazione predefinito, aggiungi al comando

  tipo = attributo.

  Di seguito sono riportati cinque possibili modi di numerazione:

  : numerazione digitale standard - 1, 2, 3, ...
  
  : lettere maiuscole - A, B, C, D, ...
  
  : lettere minuscole - a, b, c, d, ...
  
  : Numeri romani - I, II, III, IV, V, ...
  
  : numeri romani minuscoli - i, ii, iii, iv, v, ...

  Se vuoi che la numerazione dell'elenco inizi con un numero specifico, devi aggiungere al comando

  anche l'attributo start =, ad esempio,
  .

  Elenco annidato

  Sistemi di numerazione

  
  
  
  
  1. Non posizionale
     
     
     1. egiziano antico
        
     2. romano
        
     3. Slavo Ecclesiastico Antico
        

  2. posizionale
     
     
     4. babilonese
        
     5. indiano
        

     sullo schermo si presenta così:

     Lista delle definizioni

     Sebbene gli elenchi di definizioni non vengano utilizzati con la stessa frequenza degli elenchi puntati o numerati, in alcuni casi possono anche essere utili. L'elenco delle definizioni fornisce non una ma due righe per ogni elemento, il che può essere utile quando si forniscono informazioni aggiuntive.

     Gli elenchi di definizioni hanno un aspetto leggermente diverso dagli altri tipi di elenchi. Per impostare la lista stessa, usa i comandi

     (Lista delle definizioni) e

     ... In questo caso, vengono utilizzati due comandi per descrivere ogni elemento nell'elenco, non uno. Squadra
     (Termine di definizione) definisce un elemento separato, ovvero il termine in fase di definizione e il comando
     (Descrizione della definizione) - il resto delle informazioni visualizzate nella riga successiva rientrata. La seconda riga di informazioni è chiamata definizione.

     Un esempio di elenco di definizioni:

     
     

     mmf
     

     Facoltà di Meccanica e Matematica.
     

     IN FORMA
     

     Facoltà di Informatica.
     

     Ehi! Nell'articolo di oggi cercherò di scrivere le informazioni più basilari e utili per coloro che stanno cercando di comprendere il linguaggio di markup dell'ipertesto HTML. Scopriremo il suo scopo, la recensione descriverà i principali tag e comandi del linguaggio HTML e i principi del lavoro con esso. Dall'articolo imparerai cosa e come usare l'HTML in pratica quando lavori con un blog o un sito web.

     Principali obiettivi e obiettivi dell'HTML

     Non molto tempo fa ero sul mio blog. Da esso puoi imparare come usare i CSS per cambiare l'aspetto di una pagina del sito, il suo stile. Ora esaminiamo le basi del layout HTML per principianti.

     L'HTML è un linguaggio di markup ipertestuale per una pagina Web che consente di impostarne la struttura, designare i suoi elementi principali per il browser. Quindi, ad esempio, racchiudendo il testo della pagina in alcuni tag html, puoi dare uno stile a paragrafi, elenchi, tabelle. Quelli. con l'aiuto di html, lo chiariamo al browser e, di conseguenza, visualizzerà la struttura della pagina che abbiamo impostato per l'utente.

     HTML è un cosiddetto strumento di sviluppo di siti Web front-end. Cosa significa questo? Sicuramente hai già sentito più di una volta che esistono concetti nell'ambiente di creazione di siti Web come front-end e back-end. Quindi, lo sviluppo front-end (interfaccia esterna) include strumenti e linguaggi responsabili della visualizzazione del sito direttamente all'utente. Viene visualizzato utilizzando diversi browser (Internet Explorer, Opera, Mozilla, Chrome, ecc.). Leggi. I browser comprendono bene HTML e CSS e convertono le informazioni risultanti in una forma comprensibile per l'utente.

     Lo sviluppo del back-end si basa su linguaggi lato server come PHP. Utilizzando il codice PHP, i dati del sito vengono riconosciuti dal server e quindi trasmessi al browser dopo che il codice è stato convertito da un interprete speciale. Quelli. il browser riceve in qualche modo il sito sotto forma di markup HTML e stili CSS. Puoi visualizzare il codice sorgente del sito, ad esempio in. Non è sempre possibile determinare dal codice sorgente in quale linguaggio di programmazione è scritto il sito, ma vedrai i codici di stile CSS e i tag HTML indipendentemente da ciò.

     Da dove iniziare a imparare l'HTML?

     Se sei seriamente intenzionato a imparare questa lingua, allora ti consiglio di scaricare immediatamente qualche libro dettagliato con buone recensioni o corsi video. Per iniziare, puoi guardare questo video:

     La versione più recente del linguaggio HTML, le cui capacità vanno ben oltre il semplice markup della struttura del testo, è HTML5. Inoltre, rispetto a HTML4, l'ultima versione ha molti nuovi tag e la semantica è cambiata.

     Ma in questo articolo, esamineremo ancora la familiare quarta versione del linguaggio HTML e i suoi tag principali. Per fare ciò, diamo un'occhiata alla struttura di base della pagina HTML, nonché alla gerarchia dei tag. Se non sei sicuro di dove iniziare a imparare l'HTML, le informazioni di seguito ti forniranno una comprensione di base di come lavorare con Hypertext Markup Language.

     Per creare un documento html, utilizzeremo un comodo editor.

     La prima cosa da dichiarare è il tipo di documento con un collegamento alla sezione corrispondente:

     1 2	"https://www.w3.org/TR/html4/loose.dtd">

     Ora mettiamo insieme una semplice pagina index.html con i seguenti commenti:

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

     "https://www.w3.org/TR/html4/loose.dtd"> <html> <testa> <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /> <titolo> Titolo della pagina</ titolo> <tipo di stile = "testo / css"> </ stile> </ testa> <corpo> <h1> Intestazione n. 1 della pagina</ h1> <div class = "blocco1"> </ div> <h2> Sottotitolo 2</ h2> <div class = "blocco2"> Secondo blocco della pagina</ div> </ corpo> </ html>

     Intestazione n. 1 della pagina

     Il primo blocco di una pagina da un paragrafo. Seconda riga di un blocco da un paragrafo

     Sottotitolo 2

     Secondo blocco della pagina

     Di conseguenza, il browser visualizza la seguente pagina all'apertura di questo file index.html:

     Analizziamo più in dettaglio le sue parti costitutive.

     Lo scheletro del documento sono i tag: html, head, body. E tutti gli altri sono racchiusi nel tag html:

     1 2 3 4 5 6

     <html> <testa> </ testa> <corpo> </ corpo> </ html>

     Di conseguenza, il tag html annuncia l'apertura per la lettura e la chiusura di un documento html ( - etichetta di apertura,- cartellino di chiusura).

     Head è la "testa" del documento, include informazioni che non appariranno nel corpo del documento. Di conseguenza, body è il "corpo" del documento, o la sua parte visibile.

     In head indichiamo la codifica (charset = utf-8) e il titolo della pagina. Inoltre, per la variante data, colleghiamo gli stili usando il tag

     Nel nostro caso, stiamo scrivendo stili per i blocchi blok1 e blok2. Abbiamo creato questi blocchi all'interno dei tag body usando i tag

     , per cui è stata impostata la classe corrispondente (class = ”blok1”). Pertanto, abbiamo associato il nome della classe al suo stile.

     Come puoi vedere nello screenshot, il primo blocco blok1 ha un riempimento giallo e blok2 è incorniciato e il suo colore del testo è blu. Impostiamo tutto questo usando stili css, collegati usando il tag di stile html.

     Attenzione alla costruzione: