› › 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 le lezioni sulla creazione di siti Web 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 contenuti come intestazioni, paragrafi o immagini. CSS (Cascading Style Sheets) è un linguaggio di presentazione creato per modellare l'aspetto dei contenuti, 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 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, probabilmente ti imbatterai in termini nuovi e spesso strani. Col tempo acquisirai maggiore familiarità con tutti loro, 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 includere elementi nell'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 all'elemento. I tag si presentano più spesso in coppie di tag di apertura e chiusura.

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

.

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

.

Il contenuto che appare tra i tag di apertura e di chiusura è 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 saranno 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 un attributo href, che specifica un collegamento alla risorsa associata.

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 uguale, seguito dal valore dell'attributo tra virgolette. Ad esempio, elemento con l'attributo href sarà 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 viene dichiarato utilizzando un tag di apertura e cartellino di chiusura che copre il testo, nonché l'attributo e il valore dell'indirizzo del collegamento dichiarato tramite href="http://shayhowe.com" nel tag di apertura.

Riso. 1.01. La sintassi HTML in forma schematica include elemento, attributo e tag

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

Personalizzazione della struttura del documento HTML

I documenti HTML sono semplici documenti di testo 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 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 viene utilizzata. Dal momento che useremo ultima versione HTML, il nostro tipo di documento sarà semplicemente. Dopo questo arriva l'elemento che indica l'inizio di un 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. Potrebbe invece includere il titolo del documento (che appare nella barra del titolo della finestra del browser), collegamenti a file esterni o altri metadati utili.

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

Ciao mondo!

Ciao mondo!

Questa è una pagina web.



Dimostrazione della struttura del documento HTML

Questo codice mostra il documento, iniziando con la dichiarazione del tipo di documento,, poi arriva immediatamente l'elemento . Dentro gli elementi stanno arrivando E . Elemento contiene la codifica della pagina tramite il tag e il titolo del documento attraverso l'elemento . Elemento <body>include il titolo attraverso l'elemento <h1>e un paragrafo di testo attraverso<р>. Perché sia ​​il titolo 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 nidificato, è una buona idea rientrarlo 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 del rientro per gli 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 intenzionalmente. Non tutti gli elementi sono costituiti da tag di apertura e chiusura. Alcuni elementi ricevono semplicemente contenuto o comportamento tramite attributi all'interno di un singolo tag. <meta>è uno di questi elementi. Contenuto dell'elemento <meta>nell'esempio viene assegnato utilizzando l'attributo charset e un valore. 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>Struttura ridotta realizzata utilizzando una dichiarazione del tipo di documento<!DOCTYPE html>ed elementi <html> , <head>E <body>, è abbastanza comune. Vogliamo mantenere comoda questa struttura del documento perché la utilizzeremo spesso 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 revisione del nostro codice non solo aiuta a visualizzarlo correttamente in tutti i browser, ma aiuta anche a insegnare 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 nel corso delle 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 argomento 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. Proprio come con la terminologia HTML, più lavori con i CSS, più questi termini diventano una seconda natura.</p><h3>Selettori</h3><p>Quando aggiungi elementi a una pagina web, è possibile stilizzarli utilizzando i CSS. Un selettore determina quale elemento o elementi in HTML targetizzare e a cui applicare 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 specifico.</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 combinati con 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 sfondo, colore, dimensione del carattere, 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 un elemento tramite un selettore e determinato quale stile vorremmo applicargli tramite le proprietà. Ora possiamo impostare il comportamento di questa proprietà tramite 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 testarlo, nei CSS il nostro set di regole inizia con un selettore, seguito immediatamente da parentesi graffe. Queste parentesi graffe contengono 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 è quella di spostare coppie di proprietà e valori all'interno delle 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 trattare prima di immergerci nel profondo. 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, classe e identificatore.</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 perché selezionano un gruppo specifico di elementi anziché tutti gli elementi dello stesso tipo.</p><p>Le classi consentono di applicare gli stessi stili a diversi elementi contemporaneamente utilizzando lo stesso valore dell'attributo di classe per più elementi.</p><p>Nei CSS, le classi sono rappresentate da un punto iniziale seguito dal valore dell'attributo class. Il selettore di classe sotto seleziona tutti gli elementi contenenti il ​​valore dell'attributo di classe fantastico, 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 visualizzato, il valore dell'attributo id può essere utilizzato solo una volta su una pagina. Se sono presenti ID, dovrebbero essere riservati a elementi importanti.</p><p>Nei CSS, gli identificatori sono rappresentati da un simbolo hash davanti, seguito dal valore dell'attributo id. Qui l'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 cose estremamente potenti e quelli descritti sopra sono tra i selettori più comuni che incontriamo. Questi selettori sono solo l'inizio. Sono disponibili molti selettori avanzati e sono facilmente reperibili. Una volta che ti senti a tuo agio con loro, non aver paura di dare un'occhiata ad 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 utilizzando i CSS. Ora colleghiamo i punti tra HTML e CSS per far funzionare insieme i due linguaggi.</p><h2>Collegamento dei CSS</h2><p>Per far sì che il nostro CSS comunichi con il nostro HTML dobbiamo puntare al file CSS dall'HTML. Una buona pratica è includere tutti i nostri stili in un file esterno, a cui fa riferimento l'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 modifiche rapidamente.</p><h3>Altre opzioni per aggiungere CSS</h3><p>Altre opzioni per incorporare i CSS includono l'utilizzo di stili interni e in linea. Potresti incontrare queste opzioni nella realtà, ma generalmente sono disapprovate perché rendono complicato e macchinoso l'aggiornamento dei siti.</p><p>Per creare il nostro foglio di stile esterno, vogliamo nuovamente utilizzare l'editor di testo scelto 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 dovrebbe 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 un 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 è archiviato 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 deve corrispondere corrispondentemente 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 lo 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 riscrivere questi stili abbastanza facilmente, che è ciò che faremo successivamente utilizzando un ripristino CSS.</p><h2>Utilizzando il 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>. Per garantire la compatibilità tra browser, il ripristino CSS è diventato ampiamente utilizzato.</p><p>Un ripristino CSS prende tutti gli elementi HTML di base con un determinato stile e fornisce uno stile coerente in tutti i browser. Questi ripristini in genere comportano la rimozione di dimensioni, spaziatura interna, margini o stili aggiuntivi che riducono questi valori. Dato che il CSS a cascata funziona dall'alto verso il basso (lo imparerai 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> inizierà a lavorare partendo 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 creato da Nicholas Gallagher. Normalize.css non si concentra sull'utilizzo di un hard reset per tutti gli elementi principali, ma piuttosto sull'impostazione di stili comuni per tali elementi. Ciò richiede una comprensione più profonda dei CSS, nonché la conoscenza di ciò che vorresti ottenere dagli stili.</p><h3>Compatibilità e test tra browser diversi</h3><p>Come accennato in precedenza, browser diversi visualizzano gli elementi in modo diverso. È importante riconoscere l'importanza della compatibilità e dei test tra browser. I siti non dovrebbero apparire esattamente uguali 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 diverse cose a cui prestare attenzione quando si scrive CSS. La buona notizia è che puoi fare tutto e ci vuole solo 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, creiamo un nuovo file chiamato main.css e salviamolo nella cartella dei fogli di stile che abbiamo appena creato.</li><p>Guardando 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. Usando il reset di Eric Meyer possiamo ammorbidire questi stili, permettendo a ciascuno di essi di partire 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 colleghiamolo al 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>Poiché stiamo indicando gli stili attraverso l'elemento <link>aggiungi un attributo rel con il valore 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 controllare il nostro lavoro e vedere come funzionano insieme i nostri HTML e CSS. 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 della Styles Conference con ripristino CSS

Demo e codice sorgente

Di seguito è possibile visualizzare il sito Web di Styles Conference nel suo stato attuale e anche 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.

Per ricapitolare, abbiamo trattato quanto segue:

  • Differenza tra HTML e CSS.
  • Introduzione agli elementi, ai tag e agli 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.
  • L'importanza del ripristino CSS.

Ora diamo uno sguardo più da vicino all'HTML e acquisiamo un po' di familiarità con 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 presentati su Internet sono pagine web. Questo è storicamente il primo tipo di documento destinato a essere inserito in uno spazio di rete virtuale, ma rimane comunque rilevante e non ha praticamente formati concorrenti. Qual è la struttura delle pagine web? Quali strumenti di sviluppo web vengono utilizzati per creare?

Cos'è una pagina Web?

“Elencare gli elementi principali di una pagina Web”, ci dice l'esaminatore in una lezione di informatica. Cosa possiamo dirgli in risposta? Prima di tutto, parleremo di cosa sia in linea di principio una pagina web.

Secondo la definizione generalmente accettata tra gli specialisti IT, si tratta di un documento destinato ad essere aperto in un programma specializzato - un browser, e che contiene dati da visualizzare sullo schermo del computer utilizzando il tipo appropriato di software di vari contenuti utili - testi , collegamenti, grafica, video, musica, ecc. Una pagina Web è un documento di testo. I dati corrispondenti 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.

Il posto e il 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 può contenere collegamenti ad essi nella sua struttura. Pertanto, la pagina web può essere definita il componente principale del sito in termini del suo ruolo dominante nella visualizzazione dei contenuti virtuali davanti 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 web - quando apparvero per la prima volta i linguaggi di markup delle pagine Web - non includevano contenuti rilevanti. Davanti agli occhi dell'utente c'erano solo testo e collegamenti.

Il principio dell'uso dell'ipertesto

Quindi, una pagina Web è un documento compilato 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. Questo è impossibile in un libro normale: c'è un "testo semplice". Per accedere alla pagina desiderata, il lettore deve compiere diversi giri, leggendo prima l'indice o le note a piè di pagina. Nella modalità ipertesto, la maggior parte del lavoro viene svolto dal computer, utilizzando le 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 prima cosa, 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 di questa lingua- questi 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 esclusivamente parentesi angolari. I secondi sono simili, ma prima della seconda parentesi c'è 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 in minuscolo. Questo è uno standard che si è affermato tra gli specialisti IT. Il browser, ovviamente, riconoscerà il comando HTML in qualsiasi lettera, ma si consiglia comunque agli sviluppatori web di aderire allo schema di scrittura dei tag contrassegnati. In questo modo sarà più semplice, ad esempio, per altri specialisti migliorare la pagina web.

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 si trova il successivo componente chiave di una pagina web: il contenuto. Questo è, infatti, proprio il contenuto che dovrebbe essere visualizzato davanti all'utente sullo schermo. Potrebbe trattarsi di testo, un collegamento, un'immagine, un video o un altro elemento multimediale.

Elementi della pagina Web

“Quindi elenca finalmente gli elementi principali di una pagina Web!” - ripete l'insegnante. “Con piacere”, gli rispondiamo. Cosa è incluso nella struttura del tipo di documento 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, potrebbero essere diversi. E questa è una caratteristica del linguaggio HTML: è possibile visualizzare l'immagine desiderata su una pagina Web diversi modi. Allo stesso tempo, possono essere equivalenti in termini di costi di manodopera del creatore della pagina web o richiedere una diversa quantità di impegno e tempo per la loro implementazione.

Elementi della pagina Web: intestazione

Gli elementi standard di una pagina Web, per quanto sorprendente possa sembrare, sono presentati in quantità molto ridotte. In realtà ce ne sono solo due: il titolo e il corpo principale del documento. Allo stesso tempo, ognuno di essi può avere una struttura piuttosto complessa.

Quali sono le specificità del titolo? Si trova nella parte superiore della pagina web. Il codice HTML che costituisce l'intestazione ha solitamente lo scopo di “crittografare” solo il testo, ma se necessario è possibile inserire anche piccoli inserti grafici nell'elemento corrispondente. E questo, in effetti, è tutto ciò che si può dire sul titolo. Sembrerebbe che il suo ruolo nella struttura del documento corrispondente sia insignificante. Ma non è vero. I titoli delle pagine Web sono molto significativi dal punto di vista dell'indicizzazione del sito nei motori di ricerca: Yandex, Google. Questo elemento deve essere completamente 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. Per prima cosa viene scritto il tag di apertura, che assomiglia sempre a HEAD con parentesi angolari, poi il contenuto dell'intestazione, quindi 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 specifica. Come puoi assicurarti che il tuo documento web soddisfi questo criterio? Molto semplice. Gli algoritmi HTML devono essere inseriti nella struttura dell'intestazione del documento, indicando 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.

Parte principale della pagina web

La parte principale del documento web si apre con il tag BODY e si chiude con l'elemento corrispondente, barra inclusa. Inoltre, 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 tipi di contenuto corrispondenti ha i propri tag. La struttura della parte principale di un documento web può contenere comandi HTML, che vengono utilizzati anche per formattare il testo, ad esempio dando al carattere un determinato colore, dimensione e altre proprietà.

Diamo un'occhiata alle specifiche di alcuni tag HTML comunemente utilizzati. Infatti, costituiscono gli elementi principali di una 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 l'aiuto dei quali il browser legge le intestazioni delle pagine web e determina dove si trova la parte 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, questo viene fatto utilizzando un tag aggiuntivo: FONT. In questo caso, verrà posizionato all'interno di quello che delimita i confini del paragrafo: ciò impedirà che il comando HTML che riflette il tipo di carattere preferito venga distribuito 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, i bordi specifici, 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 e la sua posizione sulla pagina.

I collegamenti ad altri documenti o file Web sono indicati utilizzando il tag A. Di norma, al suo interno sono presenti attributi che indicano il fatto che è presente un collegamento ipertestuale nella struttura della pagina Web. In questo caso viene indicato il documento, file o sito a cui rimanda.

Un tag comune è FRAMESET. Con il suo aiuto, puoi dividere lo spazio di una pagina web in diverse aree: frame. In ognuno di essi è possibile utilizzare documenti Web separati. Cioè, i frame ti consentono di posizionare correttamente due o più pagine contemporaneamente su uno schermo.

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

Specifiche degli strumenti di sviluppo web

Oltre a quanto detto, possiamo spiegare che esiste un numero enorme di tag e attributi forniti dagli standard HTML. Oltre all'HTML, gli sviluppatori web possono utilizzare strumenti di formattazione aggiuntivi per i documenti ipertestuali. Ad esempio, con utilizzando 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. Le sfide che devono affrontare gli sviluppatori moderni possono essere piuttosto complesse. Ad esempio, a volte è necessario tradurre pagine Web scritte in russo in inglese. In questo caso, gli strumenti dello sviluppatore saranno molto diversi.

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

Nelle lezioni di laboratorio utilizzeremo l'editor di testo Blocco note per preparare file HTML e il browser Internet Explorer come strumento per monitorare quanto svolto.

Informazioni teoriche

Concetti basilari

Ipertesto- una struttura informativa che consente di stabilire connessioni semantiche tra elementi di testo sullo schermo di un computer in modo tale da poter passare facilmente 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 una connessione tra questa parola e un documento in cui l'argomento associato alla parola evidenziata viene discusso in modo più dettagliato. Un documento separato, scritto in formato HTML, è chiamato:

documento HTML;

Documento Web;

Pagina web.

Tali pagine sono solitamente in formato NTM o HTML.

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

Telaio (Telaio) - un termine che ha due significati. Il primo valore è l'area del documento con le proprie barre di scorrimento. La seconda è un'immagine 0DNN0H in un file grafico animato (frame).

Applet (Applet) - un programma 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 espanderne le capacità. In alcune situazioni, il browser Internet Explorer visualizza il messaggio: "Consentire l'esecuzione dello script nella pagina?" In questo caso intendiamo script.

CGI (Comune Porta Interfaccia) - un nome generale per programmi che, lavorando su un 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- Progettazione 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 possibilità di annidare elementi. Per esempio:

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

Etichetta(in inglese tag - etichetta, descrittore, etichetta) - il marcatore iniziale o finale di un elemento. I tag definiscono i confini dell'azione degli elementi e separano gli elementi l'uno dall'altro. 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 compreso tra queste parentesi (< >), è completamente visibile se visualizzato in un browser. Per esempio:

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

formatta un elemento

<Р>Questo testo sarà collocato 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à di un 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 specificare la dimensione dell'immagine, la presenza e la dimensione di una cornice attorno all'immagine, ecc.

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

Anche questo esempio utilizza un tag che definisce l'inizio e la fine di un paragrafo. Tuttavia, il tag iniziale contiene un attributo di allineamento, che imposta l'allineamento del testo al centro dello schermo.

Nota:

Qualsiasi informazione utile deve apparire tra i tag di inizio e fine indicandone il formato;

Tutti gli attributi si trovano nel tag iniziale;

Per facilità d'uso, 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. Rientra gli elementi nidificati (tabulazione). Anche questo non è necessario, 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 un tema, un design e dei collegamenti comuni e che solitamente risiedono sullo stesso server Web, formano un sito Web.

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

Tutti i siti insieme costituisconoWorld Wide Web, dove la comunicazione (web) unisce segmenti di informazioni dalla comunità mondiale in un unico insieme: un database e comunicazioni su scala planetaria. È stato sviluppato appositamente un protocollo per l'accesso diretto dei client alle pagine sui server HTTP .

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

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

I siti Web vengono creati utilizzando il linguaggio di markup dei documenti ipertestuali HTML. La tecnologia HTML consiste nell'inserire caratteri di controllo (tag) in un normale documento di testo 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 ti consente di:

· formattare il testo;

· includere immagini e contenuti multimediali nel documento;

· Utilizzando questo linguaggio vengono creati collegamenti ipertestuali ad altre pagine Web.

L'HTML viene utilizzato per creare contenuti informativi sui 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 creato. Come tale editor in Windows puoi usare applicazione standard"Taccuino".

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

Inoltre, esistono molte tecnologie in cui i passaggi fondamentali per la creazione di siti Web sono già automatizzati; non resta che 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- questo è un sito normale su pagina iniziale che contiene collegamenti ad altri siti, suddivisi per categorie (“Sport”, “Business”, “Informatica”, ecc.). Inoltre, il motore di ricerca consente all'utente di inserire diverse parole chiave e restituisce collegamenti a pagine contenenti tali parole chiave.

Sito web

Un sito web (sito web inglese, da web - web e sito - "luogo") è una raccolta di documenti di una persona o organizzazione privata riuniti sotto un unico indirizzo su una rete di computer. 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 sviluppato appositamente per consentire ai client di accedere direttamente ai siti Web sui server. I siti web sono altrimenti chiamati 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: già 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.

Nella maggior parte dei casi su Internet, un sito web corrisponde a un nome di dominio. Esattamente 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. In genere, diversi domini vengono utilizzati da siti di grandi dimensioni (portali web) per separare logicamente i diversi tipi di servizi forniti (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Ci sono anche casi in cui vengono assegnati domini separati paesi diversi o lingue. Ad esempio, google.ru e google.fr sono logicamente siti 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, l'indirizzo contiene una tilde e il nome del sito dopo l'host: 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 il gioco è necessaria l'app Origin, ma non è installata. FIFA 16 richiede Origin.
Per giocare è necessaria l'app Origin, ma FIFA non è installata...
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...
Leggere
Disattivazione della pubblicità nel browser Yandex Dove...
Leggere
Risoluzione dei problemi di connessione Wi-Fi su...
Leggere
Cambia 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 il programma PDFMaster
Leggere
Superiore