› › La pagina Web HTML è. Creazione di pagine Web. Imparare il linguaggio HTML. Elementi della pagina Web: intestazione

La pagina Web HTML è. Creazione di pagine Web. Imparare il linguaggio HTML. Elementi della pagina Web: intestazione

Prima di iniziare il nostro viaggio attraverso i tutorial sulla creazione di siti Web con HTML e CSS, è importante comprendere le differenze tra i due linguaggi, la sintassi di ciascun linguaggio e alcuni termini di base.

Cosa sono HTML e CSS?

HTML (HyperText Markup Language) definisce la struttura del contenuto e il suo significato definendo tale contenuto come, ad esempio, intestazioni, paragrafi o immagini. CSS (Cascading Style Sheets) o Cascading Style Sheets è un linguaggio di presentazione progettato per progettare l'aspetto del contenuto utilizzando, ad esempio, caratteri o colori.

Questi due linguaggi, HTML e CSS, sono indipendenti l'uno dall'altro e dovrebbero rimanere tali. I CSS non dovrebbero essere scritti all'interno di un documento HTML e viceversa. Come regola generale, l'HTML rappresenterà sempre il contenuto e i CSS ne definiranno sempre lo stile.

Una volta compresa la differenza tra HTML e CSS, entriamo nell'HTML in modo più dettagliato.

Termini HTML di base

Prima di iniziare a lavorare con l'HTML, è probabile che ti imbatti in termini nuovi e spesso strani. Li conoscerai tutti più dettagliatamente nel corso del tempo, ma per ora dovresti iniziare con i tre termini HTML di base: elementi, tag e attributi.

Elementi

Gli elementi specificano come definire la struttura e il contenuto degli oggetti su una pagina. Alcuni degli elementi comunemente utilizzati includono più livelli di intestazioni (definiti come elementi con

Prima

) e paragrafi (definiti come

); è possibile aggiungere elementi all'elenco ,

, , E e molti altri.

Gli elementi sono identificati utilizzando parentesi angolari<>, che circonda il nome dell'elemento. Quindi l'elemento sarà simile a questo:

tag

Aggiunta di parentesi angolari< и >crea ciò che è noto come tag attorno a un elemento. I tag si presentano più spesso in coppie di tag di apertura e chiusura.

Il tag di inizio segna l'inizio di un elemento. È costituito dal simbolo<, затем идёт имя элемента и завершается символом >; Per esempio,

.

Il tag end segna la fine di un elemento. È costituito dal simbolo< с последующей косой чертой и именем элемента и завершается символом >; Per esempio,

.

Il contenuto tra i tag di inizio e fine è il contenuto di quell'elemento. Il collegamento, ad esempio, avrà un tag di apertura e cartellino di chiusura. Ciò che si trova tra questi due tag sarà il contenuto del collegamento.

Quindi i tag dei collegamenti sarebbero simili a questi:

...

Attributi

Gli attributi sono proprietà utilizzate per fornire Informazioni aggiuntive sull'elemento. Gli attributi più comuni includono l'attributo id, che identifica l'elemento; l'attributo class, che classifica l'elemento; l'attributo src, che specifica la fonte del contenuto incorporato; e l'attributo href, che specifica un collegamento alla risorsa correlata.

Gli attributi sono definiti nel tag di apertura dopo il nome dell'elemento. In generale, gli attributi includono un nome e un valore. Il formato di questi attributi è costituito dal nome dell'attributo seguito da un segno di uguale, seguito dal valore dell'attributo tra virgolette. Ad esempio, elemento con l'attributo href sarebbe simile a questo:

Shay Howe

Dimostrazione dei termini HTML di base

Questo codice visualizzerà il testo "Shay Howe" su una pagina web e quando si fa clic su questo testo, porterà l'utente a http://shayhowe.com. L'elemento link è dichiarato con un tag di inizio e cartellino di chiusura il testo che racchiude, nonché l'attributo e il valore dell'indirizzo del collegamento dichiarato con href="http://shayhowe.com" nel tag di apertura.

Riso. 1.01. La sintassi HTML dello schema include elemento, attributo e tag

Ora che sai cosa sono gli elementi, i tag e gli attributi HTML, diamo un'occhiata insieme alla nostra prima pagina web. Se qualcosa sembra nuovo qui, non preoccuparti: lo decifreremo man mano che procediamo.

Personalizzare la struttura di un documento HTML

I documenti HTML sono documenti di testo semplice salvati con l'estensione .html anziché .txt. Per iniziare a scrivere HTML, devi prima editor di testo che è comodo da usare. Sfortunatamente, questo non include Microsoft Word o Pages, poiché si tratta di editor complessi. I due editor di testo più popolari per scrivere HTML e CSS sono Dreamweaver e Sublime Text. Alternative gratuite Vedi anche Notepad++ per Windows e TextWrangler per Mac.

Tutti i documenti HTML contengono una struttura obbligatoria che include le seguenti dichiarazioni ed elementi: , , E .

Dichiarazione del tipo di documento osi trova all'inizio di un documento HTML e dice ai browser quale versione di HTML è in uso. Dal momento che useremo ultima versione HTML, il nostro tipo di documento sarà semplicemente. Poi arriva l'elemento che indica l'inizio del documento.

Dentro elemento definisce la parte superiore del documento, inclusi vari metadati (informazioni di accompagnamento sulla pagina). Contenuto all'interno di un elemento non appare sulla pagina web stessa. Può invece includere il titolo del documento (che appare nella barra del titolo della finestra del browser), collegamenti a eventuali file esterni o qualsiasi altro metadato utile.

Tutto il contenuto visibile della pagina web sarà nell'elemento . La struttura di un tipico documento HTML è simile alla seguente:

Ciao mondo!

Ciao mondo!

Questa è una pagina web.



Dimostrazione della struttura di un documento HTML

Questo codice mostra il documento, a partire dalla dichiarazione del tipo di documento,, seguito immediatamente dall'elemento . Dentro vai elementi E . Elemento contiene la codifica della pagina tramite il tag e il titolo del documento attraverso l'elemento . Elemento <body>include l'intestazione tramite elemento <h1>e un paragrafo di testo attraverso<р>. Perché sia ​​l'intestazione che il paragrafo sono nidificati all'interno dell'elemento <body>, sono visibili sulla pagina web.</p><p>Quando un elemento si trova all'interno di un altro elemento, noto anche come elemento nidificato, è una buona idea aggiungervi del riempimento per mantenere la struttura del documento ben organizzata e leggibile. Nel codice precedente, entrambi gli elementi <head>E <body>nidificati e spostati all'interno dell'elemento <html>. La struttura di imbottitura degli elementi continua con nuovi elementi aggiunti all'interno <head>E <body> .</p><h3>Elementi a chiusura automatica</h3><p>Nell'esempio precedente, l'elemento <meta>era l'unico tag che non includeva un tag di chiusura. Non preoccuparti, è stato fatto apposta. Non tutti gli elementi sono costituiti da tag di apertura e chiusura. Alcuni elementi ricevono semplicemente contenuto o comportamento tramite attributi all'interno dello stesso tag. <meta>è uno di quegli elementi. Contenuto dell'elemento <meta>nell'esempio viene assegnato utilizzando l'attributo e il valore charset. Altri tipici elementi a chiusura automatica includono:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>La struttura cast, realizzata con una dichiarazione del tipo di documento<!DOCTYPE html>ed elementi <html> , <head>E <body>, è abbastanza comune. Vogliamo mantenere questa struttura del documento a portata di mano poiché la utilizzeremo frequentemente durante la creazione di nuovi documenti HTML.</p><h3>Convalida del codice</h3><p>Non importa con quanta attenzione scriviamo il nostro codice, gli errori sono inevitabili. Fortunatamente, quando scriviamo HTML e CSS, disponiamo di validatori per verificare il nostro lavoro. Il W3C offre validatori HTML e CSS che scansionano il codice per individuare eventuali errori. La convalida del nostro codice non solo ci aiuta a eseguire il rendering correttamente in tutti i browser, ma ci aiuta anche ad apprendere le migliori pratiche durante la scrittura del codice.</p><h2>In pratica</h2><p>Come web designer e sviluppatori front-end, possiamo permetterci il lusso di partecipare a numerose conferenze dedicate al nostro mestiere. Organizzeremo la nostra Conferenza sugli stili e creeremo un sito web durante le prossime lezioni. Come questo!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Cambiamo un po', allontaniamoci dall'HTML e diamo un'occhiata ai CSS. Ricorda, HTML definisce il contenuto e la struttura delle nostre pagine web, mentre CSS ne definisce lo stile visivo e l'aspetto.</p><h2>Termini CSS di base</h2><p>Oltre ai termini HTML, ci sono alcuni termini CSS di base con cui dovrai acquisire familiarità. Questi termini includono selettori, proprietà e valori. Come con la terminologia HTML, più lavori con i CSS, più questi termini diventeranno una seconda natura per te.</p><h3>Selettori</h3><p>Quando si aggiungono elementi a una pagina Web, è possibile stilizzarli con CSS. Un selettore determina quale elemento o elementi in HTML targetizzare e applicare loro gli stili (come colore, dimensione e posizione). I selettori possono includere una combinazione di metriche diverse per selezionare elementi unici, a seconda di quanto specifici vogliamo essere. Ad esempio, vogliamo selezionare ogni paragrafo di una pagina o selezionare solo un paragrafo particolare.</p><p>I selettori sono in genere associati a un valore di attributo, come un ID o un valore di classe, o un nome di elemento, come <h1>O<р> .</p><p>Nei CSS, i selettori sono abbinati a parentesi graffe () che racchiudono gli stili applicati all'elemento selezionato. Questo selettore prende di mira tutti gli elementi <span><p>P(...)</p><h3>Proprietà</h3><p>Una volta selezionato un elemento, la proprietà determina gli stili che gli verranno applicati. I nomi delle proprietà vengono dopo il selettore, all'interno <a href="https://5visa.ru/it/installation-and-configuration/kvadratnye-skobki-v-vorde-kak-ubrat-kvadratnye-i-figurnye.html">parentesi graffe</a>() e immediatamente prima dei due punti. Esistono molte proprietà che possiamo utilizzare come background , color , font-size , altezza e larghezza e altre proprietà comunemente aggiunte. Nel codice seguente definiamo le proprietà del colore e della dimensione del carattere che si applicano a tutti gli elementi <span><p>P ( colore: ...; dimensione carattere: ...; )</p><h3>Valori</h3><p>Finora abbiamo solo selezionato l'elemento tramite il selettore e determinato quale stile vorremmo applicargli tramite le proprietà. Ora possiamo impostare il comportamento di questa proprietà attraverso un valore. I valori possono essere specificati come testo tra due punti e punto e virgola. Di seguito selezioniamo tutti gli elementi <p >E imposta il valore della proprietà color su arancione e il valore della proprietà font-size su 16 pixel.</p><p>P (colore: arancione; dimensione carattere: 16px;)</p><p>Per testare, nei CSS il nostro insieme di regole inizia con un selettore, seguito immediatamente da parentesi graffe. All'interno di queste parentesi graffe ci sono dichiarazioni costituite da coppie di proprietà e valori. Ogni dichiarazione inizia con una proprietà, seguita da due punti, il valore della proprietà e infine un punto e virgola.</p><p>Una pratica comune è spostare una coppia di proprietà e valori all'interno di parentesi graffe. Come con l'HTML, il rientro aiuta a mantenere il nostro codice organizzato e chiaro.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Riso. 1.03. La struttura della sintassi CSS include selettore, proprietà e valori</p><p>Conoscere alcuni termini di base e la sintassi generale dei CSS è un ottimo inizio, ma abbiamo ancora qualche punto da imparare prima di addentrarci nel merito. In particolare, dobbiamo dare uno sguardo più da vicino a come funzionano i selettori nei CSS.</p><h2>Lavorare con i selettori</h2><p>I selettori, come accennato in precedenza, indicano a quali elementi HTML verrà applicato lo stile. È importante comprendere appieno come utilizzare i selettori e come funzionano. Il primo passo dovrebbe essere quello di conoscersi <a href="https://5visa.ru/it/education/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">vari tipi</a> selettori. Inizieremo con i selettori più basilari: selettori di tipo, classi e identificatori.</p><h3>Selettori di tipo</h3><p>I selettori di tipo selezionano gli elementi in base al loro tipo. Ad esempio, se vogliamo scegliere come target tutti gli elementi <div>dobbiamo usare il selettore div. Il codice seguente mostra il selettore del tipo per gli elementi <div>, così come il codice HTML corrispondente.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Classi</h3><p>Le classi consentono di selezionare un elemento in base al valore dell'attributo class. I selettori di classe sono un po' più specifici dei selettori di tipo in quanto selezionano un gruppo specifico di elementi anziché tutti gli elementi dello stesso tipo.</p><p>Le classi ti consentono di applicare lo stesso stile a più elementi contemporaneamente utilizzando lo stesso valore dell'attributo di classe per più elementi.</p><p>Nei CSS, le classi sono indicate con un punto iniziale seguito dal valore dell'attributo class. Il selettore di classe qui sotto seleziona tutti gli elementi che contengono il fantastico valore dell'attributo di classe, inclusi gli elementi <div>E <span><p>Eccezionale (...)</p><p> <div class="awesome">...</div> </p><h3>Identificatori</h3><p>Gli identificatori sono ancora più precisi delle classi perché prendono di mira solo un elemento univoco alla volta. Proprio come i selettori di classe utilizzano il valore dell'attributo class, gli identificatori utilizzano il valore dell'attributo id come selettore.</p><p>Indipendentemente dal tipo di elemento sottoposto a rendering, il valore dell'attributo id può essere utilizzato solo una volta per pagina. Se gli ID sono presenti, dovrebbero essere riservati a elementi importanti.</p><p>Nei CSS, gli identificatori sono indicati con un simbolo hash davanti, seguito dal valore dell'attributo id. Qui id selezionerà solo l'elemento contenente l'attributo id con il valore shayhowe .</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>Selettori aggiuntivi</h3><p>I selettori sono estremamente potenti e quelli descritti sopra sono tra i selettori più comuni che incontriamo. Questi selettori sono solo l'inizio. Esistono molti selettori avanzati e sono facilmente disponibili. Una volta che ti senti a tuo agio con loro, non aver paura di guardare anche alcuni di quelli più avanzati.</p><p>Ok, iniziamo a mettere tutto insieme. Aggiungiamo elementi alla pagina all'interno del nostro HTML, quindi possiamo selezionare tali elementi e modellarli con CSS. Ora colleghiamo i punti tra HTML e CSS in modo che i due linguaggi funzionino insieme.</p><h2>Connessione CSS</h2><p>Per far sì che il nostro CSS parli con il nostro HTML, dobbiamo puntare al file CSS dall'HTML. È buona norma includere tutti i nostri stili in un file esterno indirizzato all'interno dell'elemento. <head>il nostro documento HTML. L'utilizzo di un CSS esterno ci consente di applicare gli stessi stili in tutto il sito e di apportarvi rapidamente modifiche.</p><h3>Altre opzioni per aggiungere CSS</h3><p>Altre opzioni per includere CSS includono l'uso di stili in linea e in linea. Puoi vedere queste opzioni nella vita reale, ma generalmente sono disapprovate poiché rendono gli aggiornamenti del sito macchinosi e macchinosi.</p><p>Per creare il nostro foglio di stile esterno, vogliamo utilizzare nuovamente l'editor di testo selezionato per crearne uno nuovo. <a href="https://5visa.ru/it/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">file di testo</a> con estensione .css. Il nostro file CSS deve essere salvato nella stessa cartella o sottocartella del nostro file HTML.</p><p>All'interno di un elemento <head>elemento applicato <link>, che definisce la relazione tra file HTML e CSS. Poiché ci stiamo collegando ai CSS, utilizziamo l'attributo rel con il valore del foglio di stile per indicare la loro relazione. Inoltre, l'attributo href viene utilizzato per indicare la posizione o il percorso del file CSS.</p><p>Nel seguente documento HTML di esempio, l'elemento <head>punta a un file di stile esterno.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Affinché i CSS vengano visualizzati correttamente, il valore del percorso dell'attributo href deve corrispondere direttamente a dove viene salvato il file CSS. Nell'esempio precedente, il file main.css è archiviato nella stessa posizione del file HTML, nota anche come cartella principale.</p><p>Se il file CSS si trova in una sottocartella, il valore dell'attributo href dovrebbe corrispondere di conseguenza a quel percorso. Ad esempio, se il nostro file main.css fosse salvato in una sottocartella denominata stylesheets, il valore dell'attributo href sarebbe stylesheets/main.css . Utilizza una barra (o barra) per indicare uno spostamento in una sottocartella.</p><p>SU <a href="https://5visa.ru/it/firmware/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">questo momento</a> le nostre pagine stanno iniziando a prendere vita, lentamente ma inesorabilmente. Non abbiamo ancora approfondito troppo i CSS, ma potresti aver notato che alcuni elementi hanno stili che non abbiamo dichiarato nel nostro CSS. È il browser che impone i propri stili preferiti su questi elementi. Fortunatamente, possiamo sovrascrivere questi stili abbastanza facilmente, cosa che faremo successivamente con un ripristino CSS.</p><h2>Utilizzo del ripristino CSS</h2><p>Ogni browser ha i propri stili predefiniti per <a href="https://5visa.ru/it/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">vari elementi</a>. Come <a href="https://5visa.ru/it/navigation/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Google Chrome</a> visualizza intestazioni, paragrafi, elenchi e così via, potrebbe differire da come viene visualizzato <a href="https://5visa.ru/it/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">Internet Explorer</a>. Il ripristino CSS è diventato ampiamente utilizzato per garantire la compatibilità tra browser.</p><p>Reimposta CSS prende tutti gli elementi HTML di base con un determinato stile e fornisce uno stile coerente su tutti i browser. Queste reimpostazioni in genere includono la rimozione di dimensioni, spaziatura interna, margini o stili aggiuntivi per ridurre questi valori. Dato che il CSS a cascata funziona dall'alto verso il basso (ne parleremo presto), il nostro ripristino dovrebbe essere al top del nostro stile. Ciò garantisce che questi stili vengano letti per primi e il gioco è fatto. <a href="https://5visa.ru/it/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">browser diversi</a> lavorerà da un punto di riferimento comune.</p><p>Sono disponibili numerosi ripristini CSS diversi da applicare, tutti hanno il proprio <a href="https://5visa.ru/it/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">punti di forza</a>. Uno dei più popolari di Eric Meyer, il suo reset CSS è adattato per includere nuovi elementi HTML5.</p><p>Se ti senti un po' avventuroso, c'è anche Normalize.css di Nicholas Gallagher. Normalize.css non si concentra sull'utilizzo di un hard reset su tutti gli elementi principali, ma piuttosto sull'impostazione di stili comuni per tali elementi. Ciò richiede una comprensione più profonda dei CSS, oltre a sapere cosa vuoi dagli stili.</p><h3>Compatibilità e test tra browser</h3><p>Come accennato in precedenza, browser diversi visualizzano gli elementi in modo diverso. È importante riconoscere il valore della compatibilità e dei test tra browser. I siti non devono avere lo stesso aspetto in tutti i browser, ma dovrebbero essere simili. Quali browser desideri supportare e in che misura è una decisione che dovrai prendere in base a ciò che è meglio per il tuo sito.</p><p>Ci sono alcune cose da tenere a mente quando si scrivono CSS. La buona notizia è che è fattibile e richiede un po' di pazienza per padroneggiarlo.</p><h2>In pratica</h2><p>Torniamo al punto in cui ci eravamo interrotti l'ultima volta sul nostro sito della conferenza e vediamo come possiamo aggiungere alcuni CSS.</p><ol><li>All'interno della nostra cartella della conferenza di stili, creiamo una nuova cartella chiamata asset. Qui è dove memorizzeremo tutte le risorse per il nostro sito Web come stili, immagini, video, ecc. Per i nostri stili, andiamo avanti e aggiungiamo un'altra cartella di fogli di stile all'interno della cartella delle risorse.</li><li>Utilizzando un editor di testo, crea un nuovo file chiamato main.css e salvalo nella cartella dei fogli di stile che abbiamo appena creato.</li><p>Osservando il file index.html nel browser, possiamo vedere che gli elementi <h1>E <p>Contengono già lo stile predefinito. In particolare, hanno una dimensione del carattere e uno spazio attorno a loro unici. Utilizzando il ripristino di Eric Meyer, possiamo ammorbidire questi stili, consentendo a ciascuno di essi di iniziare dalla stessa base. Per fare ciò, dai un'occhiata al suo sito Web, copia il codice e incollalo nella parte superiore del nostro file main.css.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licenza: nessuna (dominio pubblico) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, del, dfn, em, img, ins, kbd, q, s, samp, piccolo, strike, strong, sub, sup, tt, var, b, u, i, centro, dl, dt, gg, ol, ul, li, fieldset, modulo, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, parte, tela, dettagli, incorpora, figura, figcaption, piè di pagina, intestazione, hgroup, menu, navigazione, output, ruby, sezione, riepilogo, ora, contrassegno, audio, video (margine: 0; riempimento: 0; bordo: 0; dimensione carattere: 100%; carattere: eredita; allineamento verticale: linea di base ; ) /* Reimpostazione del ruolo di visualizzazione HTML5 per i browser meno recenti */ articolo, parte, dettagli, figcaption, figura, piè di pagina, intestazione, hgroup, menu, nav, sezione ( display: block; ) corpo ( line-height: 1; ) ol, ul ( stile elenco: none; ) blockquote, q ( virgolette: none; ) blockquote:prima, blockquote:dopo, q:prima, q:dopo ( contenuto: ""; contenuto: none; ) tabella ( border- crollo: crollo; spaziatura dei bordi: 0; )</p><li>Il nostro file main.css sta iniziando a prendere forma, quindi includiamolo nel nostro file index.html. Apri index.html in un editor di testo e aggiungi un elemento <link>V <head>, subito dopo l'elemento <title> .</li><li>Perché stiamo indicando gli stili attraverso l'elemento <link>aggiungi un attributo rel con un valore di stylesheet .</li><p>Includeremo anche un collegamento al nostro file main.css utilizzando l'attributo href. Ricorda, il nostro file main.css viene salvato nella cartella stylesheets, che si trova all'interno della cartella asset. Quindi il valore dell'attributo href, che è il percorso del nostro file main.css, dovrebbe essere asset/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Conferenza sugli stili

È ora di testare il nostro lavoro e vedere come i nostri HTML e CSS si incastrano. L'apertura del file index.html (o l'aggiornamento della pagina se è già aperta) nel browser dovrebbe mostrare un risultato leggermente diverso rispetto a prima.

Riso. 1.04. Il nostro sito Web della Styles Conference con ripristino CSS

Demo e codice sorgente

Di seguito è possibile visualizzare il sito web della Styles Conference nel suo stato attuale, nonché scaricarlo fonte sito in questo momento.

Riepilogo

Quindi, va tutto bene! Abbiamo fatto alcuni grandi passi in questo tutorial.

Pensa, ora conosci le basi di HTML e CSS. Man mano che continuiamo e passerai più tempo a scrivere HTML e CSS, ti sentirai molto più a tuo agio nel lavorare con questi due linguaggi.

Ricordiamo che abbiamo considerato quanto segue:

  • La differenza tra HTML e CSS.
  • Introduzione agli elementi, tag e attributi HTML.
  • Impostazione della struttura della tua prima pagina web.
  • Introduzione ai selettori, alle proprietà e ai valori CSS.
  • Lavorare con i selettori CSS
  • Puntatore a CSS da HTML.
  • Importanza del ripristino CSS.

Ora diamo uno sguardo più da vicino all'HTML e conosciamo un po' la semantica.

Risorse e collegamenti

  • Termini HTML comuni tramite Scripting Master
  • Termini e definizioni CSS tramite Web impressionanti
  • Strumenti CSS: reimposta CSS tramite Eric Meyer

La maggior parte dei contenuti su Internet sono pagine web. Questo è storicamente il primo tipo di documenti destinati al posizionamento nello spazio della rete virtuale, ma conserva ancora la sua rilevanza e non ha praticamente formati concorrenti. Qual è la struttura delle pagine web? Quali strumenti di sviluppo web vengono utilizzati per crearli?

Cos'è una pagina Web?

"Elencare gli elementi di base di una pagina Web", ci dice un esaminatore in una lezione di informatica. Cosa possiamo dirgli in risposta? Prima di tutto, parliamo di cosa sia in linea di principio una pagina web.

Secondo la definizione generalmente accettata tra gli specialisti IT, si tratta di un documento progettato per essere aperto in un programma specializzato - un browser, e che contiene dati per visualizzare vari contenuti utili sullo schermo di un computer utilizzando il tipo appropriato di software - testi, collegamenti, grafica, video, musica, ecc. Ecc. Una pagina Web è un documento di testo. I dati rilevanti per il browser sono lettere, numeri e Simboli speciali, utilizzati come elementi del linguaggio di markup - HTML. È con l'aiuto di esso che il creatore della pagina web “spiega” al browser come visualizzare questo o quel contenuto sullo schermo.

Luogo e ruolo delle pagine web nella struttura dei siti

Possiamo dire che una pagina Web è la componente principale di un sito web? Questo è in parte vero. Tuttavia, come abbiamo notato sopra, una pagina web è solo un documento di testo. Il sito contiene di norma anche immagini, video e altri elementi multimediali. Una pagina web non può contenerli, ma nella sua struttura può contenere collegamenti ad essi. Pertanto, una pagina Web può essere definita il componente principale del sito in termini di ruolo principale nella visualizzazione di contenuti virtuali agli utenti.

In rari casi, ovviamente, il documento in questione sarà l'unico componente del sito, se per qualche motivo non prevede la visualizzazione di grafica, video e altri elementi multimediali. In particolare, i primissimi siti - quando apparvero per la prima volta i linguaggi di markup delle pagine Web - non includevano il contenuto corrispondente. Davanti agli occhi dell'utente c'erano solo testo e collegamenti.

Il principio dell'uso dell'ipertesto

Quindi, una pagina web è un documento redatto in Linguaggio HTML, che viene utilizzato per contrassegnare l'ipertesto. Ma cos'è questo fenomeno? Cos'è l'ipertesto? Senza addentrarci troppo nella teoria, notiamo che si tratta di un testo che in un modo o nell'altro permette di arrivare accesso veloce a un altro tramite collegamenti. In un libro normale questo è impossibile: c'è "testo semplice". Per accedere alla pagina desiderata, il lettore deve effettuare diversi salti mortali, dopo aver letto il contenuto o le note a piè di pagina. Nella modalità "ipertesto", la maggior parte del lavoro viene svolta dal computer, grazie alle informazioni riflesse negli elementi HTML della pagina.

Se un insegnante di informatica ci dice: "Elenca gli elementi principali di una pagina Web", allora possiamo iniziare correttamente a parlare dei componenti del documento corrispondente, che vengono creati utilizzando il linguaggio di markup HTML. Pertanto, per cominciare, diamo un'occhiata ad alcuni punti teorici riguardanti l'HTML.

Struttura del linguaggio HTML: tag

Come fa un browser a leggere i dati necessari su una pagina web da un documento HTML? Molto semplice.

Elementi essenziali data lingua sono tag. Nella maggior parte dei casi, sono accoppiati: ce n'è uno di apertura e ce n'è uno di chiusura. I primi sono indicati utilizzando solo parentesi angolari. Le seconde sono simili, ma la seconda parentesi è preceduta da una barra: il simbolo /. Il browser è in grado di riconoscerli e quindi visualizza il contenuto delle pagine web senza problemi secondo gli algoritmi creati dallo sviluppatore del documento.

Il tag di apertura è solitamente scritto in maiuscolo, il tag di chiusura è scritto in minuscolo. Questo è uno standard che si è affermato tra i professionisti IT. Il browser riconoscerà sicuramente il comando HTML in qualsiasi lettera, ma si consiglia comunque agli sviluppatori web di attenersi allo schema di scrittura dei tag contrassegnati. Ciò faciliterà, ad esempio, il completamento di una pagina web da parte di altri specialisti.

Attributi

Altri elementi importanti del linguaggio HTML sono gli attributi. Con il loro aiuto, il creatore di una pagina web può impostare le proprietà del contenuto, ad esempio l'altezza del carattere, il suo colore, la posizione rispetto alla pagina. Lo stesso vale per immagini, video e altri componenti multimediali. Gli attributi sono scritti all'interno del tag di apertura.

Contenuto

Tra i tag di apertura e di chiusura c'è il successivo componente chiave di una pagina web, il contenuto. Questo è, infatti, proprio il contenuto che dovrebbe essere visualizzato davanti all'utente sullo schermo. Può essere testo, collegamento, immagine, video o altro elemento multimediale.

Elementi della pagina Web

"Quindi elenca finalmente gli elementi di base di una pagina Web!" - ripete l'insegnante. "Con piacere", gli rispondiamo. Cosa è incluso nella struttura del tipo di documenti in esame? Concordiamo di considerare questo aspetto nel contesto degli elementi HTML della pagina web. Cioè, la loro visualizzazione nel browser - ciò che l'utente vede sullo schermo - ci interesserà in misura minore. Il fatto è che gli algoritmi HTML corrispondenti, in base ai quali il programma visualizza i contenuti allo stesso modo, possono essere diversi. E questa è la particolarità del linguaggio HTML: è possibile visualizzare l'immagine desiderata sulla pagina Web diversi modi. Allo stesso tempo, possono essere equivalenti in termini di costo del lavoro del creatore della pagina web, oppure possono implicare una diversa quantità di sforzi e tempo per la loro implementazione.

Elementi della pagina Web: intestazione

Gli elementi standard di una pagina Web, per quanto sorprendente possa sembrare, sono presenti in numero molto ridotto. In realtà ce ne sono solo due: l'intestazione e il corpo del documento. Tuttavia, ognuno di essi può avere una struttura piuttosto complessa.

Quali sono le specifiche dell'intestazione? Si trova nella parte superiore della pagina web. L'HTML che genera l'intestazione presuppone solitamente che solo il testo sia "criptato", ma se necessario è possibile inserire anche piccoli inserti grafici nell'elemento corrispondente. E questo, in effetti, è tutto ciò che si può dire del titolo. Sembrerebbe che il suo ruolo nella struttura del documento corrispondente sia insignificante. Ma non lo è. I titoli delle pagine Web sono molto importanti in termini di indicizzazione dei siti nei motori di ricerca: Yandex, Google. Questo elemento deve essere pienamente pertinente al contenuto della pagina web, nonché alle specificità tematiche del sito.

Come viene acquisito il titolo di una pagina Web utilizzando HTML? Molto semplice. Innanzitutto viene scritto il tag di apertura, che assomiglia sempre a HEAD con parentesi angolari, quindi il contenuto dell'intestazione e infine il tag di chiusura. Sono scritti, ovviamente, nella parte superiore del documento web.

Il titolo di un documento web può includere una serie di elementi aggiuntivi. A volte il formato di una pagina Web può richiedere la visualizzazione del testo in una codifica particolare. Come garantire che il documento web soddisfi questo criterio? Molto semplice. La struttura dell'intestazione del documento dovrebbe contenere algoritmi HTML che indicano al browser di utilizzare una codifica della lingua specifica, ad esempio il cirillico. I comandi corrispondenti sono posti all'interno del META tag, che, come gli altri, può essere di apertura e chiusura.

Corpo principale della pagina web

Il corpo principale di un documento web si apre con il tag BODY e si chiude con l'elemento corrispondente, che include una barra. Allo stesso tempo, tra i tag di apertura e chiusura può esserci un numero enorme di comandi aggiuntivi del linguaggio di markup ipertestuale. Ciò è dovuto al fatto che la parte principale della pagina web contiene contenuti utili: testi, collegamenti, grafica, video, vari moduli da compilare.

Ciascuno dei rispettivi tipi di contenuto ha i propri tag. La struttura della parte principale di un documento web può contenere comandi HTML che possono essere utilizzati anche per formattare il testo, ad esempio dando al carattere un colore, una dimensione e altre proprietà specifici.

Diamo un'occhiata alle specifiche di alcuni tag HTML comunemente utilizzati. In realtà costituiscono anche gli elementi principali della pagina web.

Tag HTML di base

Quindi, per studiare in dettaglio quali sono gli elementi di una pagina Web, studiamo più in dettaglio l'essenza dei tag HTML di base. Alcuni di essi li abbiamo già indicati sopra, in particolare quelli con cui il browser legge le intestazioni delle pagine web e determina dove si trova il corpo principale del documento.

Abbastanza comune è il tag P. Esso, come altri elementi simili del linguaggio di markup ipertestuale, può aprire e chiudere. Questo tag ti consente di formattare un singolo paragrafo di un documento. Puoi, ad esempio, impostare un tipo di carattere o un colore specifico. Tuttavia, ciò avviene con l'aiuto di un tag aggiuntivo: FONT. Allo stesso tempo, verrà posizionato all'interno di quello che indica i limiti del paragrafo: questo ti consentirà di non distribuire il comando HTML che riflette il tipo di carattere preferito ad altri elementi della pagina web.

Le tabelle vengono create utilizzando il tag TABLE. Utilizzando gli attributi corrispondenti, puoi determinare il numero richiesto di colonne e righe, impostarne la larghezza, le specifiche dei bordi, la dimensione e il colore del carattere del testo nella tabella.

Responsabile dell'elaborazione delle immagini da parte del browser. Puoi anche inserire vari attributi che regolano la dimensione dell'immagine, la sua posizione sulla pagina.

I collegamenti ad altri documenti o file Web vengono indicati utilizzando il tag A. Di norma, al suo interno si trovano attributi che indicano il fatto che la struttura della pagina Web è un collegamento ipertestuale. Indica il documento, file o sito a cui conduce.

Un tag comune è FRAMESET. Con esso, puoi dividere lo spazio di una pagina web in più aree: frame. In ognuno di essi è possibile separare documenti web. Cioè, i frame consentono di posizionare correttamente due o più pagine contemporaneamente sullo stesso schermo.

La storia sugli elementi chiave delle pagine web e la successiva storia sui mezzi per formattarle utilizzando il linguaggio HTML: qualcosa del genere sarà l'algoritmo della nostra risposta alla domanda posta dall'esaminatore. Se ci ha contattato dicendo "elenca gli elementi principali della pagina Web", allora noi, utilizzando la metodologia appropriata, avremo tutte le possibilità di rivelare l'argomento. Cioè, con il termine "elementi" possiamo intendere i componenti chiave della struttura di un documento web, o tipi di contenuto - testo, immagini, tabelle, frame, collegamenti che il webmaster forma utilizzando uno strumento come il linguaggio HTML.

Specifiche degli strumenti di sviluppo web

In aggiunta a quanto detto possiamo chiarire che esistono un gran numero di tag e attributi previsti dagli standard HTML. Oltre all'HTML, gli sviluppatori web possono utilizzare strumenti di formattazione aggiuntivi per i documenti ipertestuali. Ad esempio, con JavaScriptè possibile creare pagine Web dinamiche, ovvero quelle in cui il contenuto viene costantemente aggiornato (sia per le azioni dell'utente stesso, sia secondo algoritmi pre-scritti negli script).

Sarebbe utile aggiungere che uno sviluppatore web può utilizzare linguaggi di programmazione a tutti gli effetti nel suo lavoro, come, ad esempio, Perl, PHP, Java, Python, con l'aiuto dei quali diventano le possibilità di lavorare con documenti ipertestuali ancora più ampio. La necessità di ciò potrebbe essere dovuta al fatto che gli ambiti di applicazione delle tecnologie web oggi sono molto diversi. I compiti che devono affrontare gli sviluppatori moderni possono essere piuttosto complessi. Ad esempio, a volte è necessario tradurre pagine Web scritte in russo in inglese. In questo caso, il toolkit dello sviluppatore sarà il più vario.

Obiettivo del lavoro: familiarizzazione degli studenti con i concetti di base del linguaggio HTML, la struttura di un documento HTML, tag obbligatori, commenti, metodi di formattazione del testo, stili fisici e logici e acquisizione di competenze nella creazione di semplici documenti Web statici.

In laboratorio utilizzeremo l'editor di testo Blocco note per preparare i file HTML e il browser Internet Explorer come strumento per monitorare ciò che è stato fatto.

Informazioni teoriche

Concetti basilari

Ipertesto- una struttura informativa che consente di stabilire relazioni semantiche tra elementi di testo sullo schermo di un computer in modo tale da poter effettuare facilmente transizioni da un elemento all'altro. In pratica, negli ipertesti, alcune parole vengono evidenziate sottolineandole o colorandole di un colore diverso (hyperlink). L'evidenziazione di una parola indica la presenza di una connessione di questa parola con qualche documento in cui l'argomento associato alla parola evidenziata è considerato più in dettaglio. Un singolo documento HTML è chiamato:

documento HTML;

Documento web

Pagina web.

Tali pagine sono solitamente in formato HTM o HTML.

Un gruppo di pagine Web appartenenti a un autore o a un IEDI e interconnesse da collegamenti ipertestuali comuni forma una struttura chiamata sito Web o sito Web. Ogni pagina HTML ha il proprio URL univoco: UNDPeC su internet.

Telaio (telaio) è un termine con due significati. Il primo valore è l'area del documento con le sue barre di scorrimento. La seconda è un'immagine 0DNN0H nel file grafico dell'animazione (frame).

Applet (applet) - un programma che viene trasferito sul computer client come file separato e avviato durante la visualizzazione di una pagina Web.

Copione (Copione) , o script, è un programma incluso in una pagina Web per migliorarne le capacità. Il browser Internet Explorer in determinate situazioni visualizza il messaggio: "Consentire script nella pagina?". In questo caso si intendono gli script.

CGI (Comune Porta Interfaccia) - il nome generale dei programmi che, lavorando sul server, consentono di espandere le capacità delle pagine Web. Senza tali programmi è impossibile creare pagine Web interattive.

Navigatore (Navigatore) - un programma per visualizzare pagine Web.

Elemento- la costruzione del linguaggio HTML. Puoi pensarlo come un contenitore che contiene dati e ti consente di formattarli in un certo modo. Qualsiasi pagina Web è un insieme di elementi. Una delle idee principali dell'ipertesto è la capacità di annidare gli elementi. Per esempio:

<Начало элемента>Il contenuto dell'elemento, i dati formattati dall'elemento

Etichetta(in inglese tag - etichetta, descrittore, etichetta) - il marcatore di inizio o fine di un elemento. I tag definiscono l'ambito degli elementi e separano gli elementi gli uni dagli altri. Nel testo di una pagina Web, i tag sono racchiusi tra parentesi angolari.< >e il tag di fine è sempre seguito da una barra. Testo non racchiuso tra queste parentesi (< >) è visibile nella sua interezza se visualizzato in un browser. Per esempio:

<Начальный тег>Il contenuto dell'elemento, i dati che

formatta l'elemento

<Р>Questo testo sarà in un paragrafo separato

Qualsiasi pagina Web è un insieme di elementi. Uno dei principi di base dell'HTML è la capacità di annidare un elemento all'interno di un altro.

Attributo- parametro o proprietà dell'elemento. Gli attributi si trovano all'interno del tag iniziale e sono separati tra loro da spazi. Se il cemento contiene testo, gli attributi possono impostare il colore, la dimensione e l'allineamento del carattere paragrafo di testo e così via. Se l'elemento contiene un'immagine, gli attributi possono impostare la dimensione dell'immagine, la presenza e la dimensione della cornice attorno all'immagine, ecc.

<Р align="center">Questo testo sarà allineato al centro dello schermo

In questo esempio, ancora una volta c'è un tag che definisce l'inizio e la fine di un paragrafo. Tuttavia, il tag iniziale contiene l'attributo align, che imposta l'allineamento del testo al centro dello schermo.

Nota:

Qualsiasi informazione utile deve trovarsi tra i tag di inizio e fine che ne indicano il formato;

Tutti gli attributi si trovano nel tag iniziale;

Per comodità, puoi scrivere il tag iniziale con una lettera maiuscola (maiuscola) (P) e il tag finale con una lettera minuscola (minuscola) (/p), sebbene ciò non sia necessario;

Non tutti gli elementi richiedono un tag di fine (chiusura);

Inizia a scrivere ogni nuovo elemento su una nuova riga. Gli elementi nidificati sono rientrati (tabulazione). Ancora una volta, questo non è obbligatorio, ma renderà il tuo lavoro molto più semplice.

Una pagina Web è un documento con formattazione speciale che può includere testo, grafica, collegamenti ipertestuali, audio, animazioni e video.

Diverse pagine Web che condividono temi, design e collegamenti comuni e che di solito si trovano sullo stesso server Web, formano un sito Web.

Sito web ait (dall'inglese. sito web: ragnatela- "web, rete" e luogo- "luogo", letteralmente "luogo, segmento, parte della rete") - un insieme documenti elettronici(file) di un individuo o organizzazione in rete di computer, combinati sotto un unico indirizzo (nome di dominio o indirizzo IP).

Tutti i siti insieme compongonola rete mondiale, dove la comunicazione (web) unisce segmenti di informazioni della comunità mondiale in un unico insieme: un database e comunicazioni su scala planetaria. Per l'accesso diretto dei client ai siti sui server è stato sviluppato un protocollo appositamente http .

Un sito web è strutturato come una rivista che contiene informazioni su un argomento o una questione. Proprio come una rivista è composta da pagine stampate, un sito Web è costituito da pagine Web generate dal computer.

Il programma che visualizza una pagina web è chiamato browser web.

La creazione di siti Web viene implementata utilizzando il linguaggio di markup dei documenti ipertestuali HTML. La tecnologia HTML prevede che i caratteri di controllo (tag) vengano inseriti in un documento di testo semplice e di conseguenza otteniamo una pagina Web. Il browser, quando carica una pagina Web, la presenta sullo schermo nella forma specificata dai tag.

L'HTML consente:

Formattazione del testo

includere immagini, contenuti multimediali nel documento;

Questo linguaggio crea collegamenti ipertestuali ad altre pagine Web.

L'HTML viene utilizzato per creare il contenuto informativo di un file e per definire la struttura e il formato delle pagine Web. Poiché i file HTML sono file di semplice testo, tali file possono essere inviati praticamente a qualsiasi computer.

Per creare pagine Web vengono utilizzati semplici editor di testo che non includono caratteri di controllo della formattazione del testo nel documento in fase di creazione. Come tale editor in Windows, puoi usare applicazione standard"Taccuino".

In genere, un file di pagina Web ha l'estensione .html o .htm.

Inoltre, ci sono molte tecnologie in cui i passaggi principali per la creazione di siti sono già automatizzati, resta solo da apportare modifiche in base all'argomento.

Per visualizzare una pagina HTML, inserisci semplicemente il suo URL nella barra degli indirizzi del tuo browser Web e quindi segui i collegamenti ipertestuali. Ma proprio questo è il problema principale: come scoprire l'indirizzo della pagina? Molto spesso capita che tu sappia cosa devi trovare, ma non sai esattamente dove cercare. Per risolvere questo problema, esistono motori di ricerca speciali. Dal punto di vista dell'utente, sistema di ricercaè un sito normale pagina iniziale che contiene collegamenti ad altri siti suddivisi per rubriche (“Sport”, “Business”, “Informatica”, ecc.). Inoltre, il motore di ricerca consente all'utente di inserire più parole chiave e restituisce collegamenti a pagine contenenti tali parole chiave.

Sito web

Sito web (ing. Sito web, da web - web e sito - "luogo") - in una rete di computer, un insieme di documenti di una persona o organizzazione privata riuniti sotto un unico indirizzo. Per impostazione predefinita, si presuppone che il sito si trovi su Internet. Tutti i siti Internet costituiscono collettivamente il World Wide Web. Il protocollo HTTP è stato appositamente progettato per l'accesso client diretto ai siti web sui server. I siti web sono altrimenti noti come la rappresentazione su Internet di una persona o organizzazione. Quando dicono "la tua pagina su Internet", significa un intero sito web o una pagina personale come parte del sito di qualcun altro. Oltre ai siti Web in Internet sono disponibili anche siti WAP per telefoni cellulari.

Inizialmente, i siti Web erano raccolte di documenti statici. Attualmente, la maggior parte di essi sono caratterizzati da dinamismo e interattività. Per questi casi, gli esperti usano il termine applicazione web pronta pacchetto software per risolvere i problemi del sito web. Un'applicazione web è parte di un sito web, ma un'applicazione web senza dati è solo tecnicamente un sito web.

Nella maggior parte dei casi su Internet, un sito web corrisponde a un nome di dominio. Proprio secondo nomi di dominio i siti sono identificati in rete globale. Sono possibili altre opzioni: un sito su più domini o più siti sotto un dominio. Di solito diversi domini utilizzano siti di grandi dimensioni (portali web) per separare logicamente i diversi tipi di servizi forniti (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Sono frequenti anche i casi di assegnazione di domini separati per paesi diversi o lingue. Ad esempio, google.ru e google.fr sono logicamente un sito Google in lingue diverse, ma tecnicamente sono siti diversi. La combinazione di più siti sotto un unico dominio è tipica di hosting gratuito. Per identificare i siti nell'indirizzo, dopo aver specificato l'host, è presente una tilde e il nome del sito: esempio.com/~nome-mio-sito/.



Popolare nella categoria:
Come creare una clip karaoke su un computer?
Come creare una clip karaoke su un computer?
Leggere
Per giocare è necessaria l'app Origin, ma non è installata. Fifa 16 richiede Origin
Per giocare è necessaria l'app Origin, ma non è installata da Fifa...
Leggere
Registrazione di una pagina personale sul social network Facebook
Registrazione di una pagina personale sul social network Facebook
Leggere
Come eseguire una semplice scansione Nmap Nmap
Come eseguire una semplice scansione Nmap Nmap
Leggere

Articoli Recenti
Come ruotare un'immagine di qualche grado in...
Leggere
Disabilitazione degli annunci nel browser Yandex Dove ...
Leggere
Risolvere i problemi di connessione Wi-Fi su...
Leggere
cambiare password sul profilo Windows 10
Leggere
Istruzioni per la configurazione dei router wireless...
Leggere
Come scegliere un disco rigido e quale è meglio acquistare...
Leggere
Meizu per i manichini. Chiamate e rubrica....
Leggere
Scarica PDFMaster
Leggere
Superiore