Come configurare smartphone e PC. Portale informativo
  • casa
  • Windows Phone
  • Creazione di una pagina web html. Creazione di una pagina html nel blocco note: chiarimenti per i manichini

Creazione di una pagina web html. Creazione di una pagina html nel blocco note: chiarimenti per i manichini

Allora, cos'è un sito Web e una pagina Web? Per capire questo problema, pensiamo a che tipo di informazioni possono essere effettivamente contenute in un sito Web? La risposta è ovvia: quasi nessuna. Il sito può contenere informazioni su giochi per computer, automobili, pesci d'acquario, creature mitiche, città e paesi del mondo, ecc. eccetera. L'elenco è infinito. Sul sito puoi anche pubblicare, ad esempio, le opere dei grandi classici russi. Ti piace il sito "Guerra e Pace"? Si scopre che il sito è un libro, ma non semplice, ma elettronico? Sì, un sito Web, nella sua essenza, è davvero un e-book, una rivista o un libro di testo che può contenere sia informazioni utili per te, sia informazioni che non sono affatto interessanti per te al momento.

Come un normale libro, un sito Web è composto da pagine chiamate pagine Web.

E come troviamo, infatti, nello stesso manuale di informatica, le informazioni che ci interessano? Apriamo il contenuto che si trova all'inizio o alla fine del libro di testo, cerchiamo il paragrafo in cui si trovano le informazioni necessarie, di fronte al paragrafo guardiamo il numero di pagina, lo apriamo e studiamo il materiale. Tutto è abbastanza semplice e ordinario.

Dopo essere arrivati ​​alla pagina principale di un sito ben progettato, dovremmo anche vedere qualcosa di simile al contenuto del libro di testo per poter trovare rapidamente le informazioni di cui abbiamo bisogno.

Ma come arrivare alle informazioni necessarie che si trovano sul sito Web, perché non possiamo sfogliare le pagine elettroniche oltre a quelle cartacee ordinarie? Infatti, di solito usiamo il mouse.

In effetti, spostarsi tra le pagine del sito è persino più veloce che spostarsi tra le pagine quando si lavora con un normale libro di testo. Per spostarsi tra le pagine del sito vengono utilizzati elementi della pagina Web, quando si fa clic su di essi è possibile spostarsi in un'altra pagina del sito. Questi elementi della pagina sono chiamati collegamenti ipertestuali e sono presenti in tutte le pagine che compongono il sito.

Nel caso "classico", una parte del testo (una parola o più parole) e immagini grafiche (disegni e fotografie) vengono utilizzate come collegamenti ipertestuali.

Poiché nel primo caso il testo viene utilizzato per creare collegamenti ipertestuali, tale collegamento viene chiamato collegamento ipertestuale. Molto spesso, un collegamento ipertestuale di testo è un testo sottolineato in blu. Vedendo, ad esempio, nella pagina principale del sito la scritta "Siti Web e pagine Web" progettata in modo simile e cliccandoci sopra con il tasto sinistro del mouse, dovresti trovarti su una pagina Web dedicata a questo argomento. La pagina "Siti Web e Pagine Web" deve, a sua volta, contenere almeno un collegamento ipertestuale attraverso il quale è possibile tornare al contenuto.

Se un'immagine grafica, come una fotografia, viene utilizzata come collegamento ipertestuale, sarà difficile indovinare che si tratta di un collegamento ipertestuale. Come determinare, quindi, se l'immagine è un collegamento ipertestuale o meno? In questo caso, ricorda la seguente regola: "Se, quando muovi il cursore del mouse su un elemento di una pagina Web, questo assume la forma di una mano, allora questo elemento è un collegamento ipertestuale".

Nota: esiste un'eccezione a questa regola, ad esempio nel caso dei rollover, che potrebbero non essere collegamenti ipertestuali, ma quando si sposta il cursore del mouse su di essi, il cursore assume anche la forma di una mano. Oltre a modificare l'aspetto del cursore, quando si passa con il mouse su un collegamento ipertestuale, dovrebbe essere visualizzato anche l'URL (indirizzo univoco della risorsa), ma ne parleremo nella lezione sulla creazione di collegamenti ipertestuali utilizzando il programma FrontPage.

Domande di prova:

  • Che cos'è un sito Web?
  • Che cos'è una pagina Web?
  • Che cos'è un collegamento ipertestuale?
  • Quali elementi di una pagina Web possono essere utilizzati come collegamenti ipertestuali?
  • Come determinare se un elemento della pagina è un collegamento ipertestuale?
  • Le singole pagine Web di un sito non possono contenere collegamenti ipertestuali?
9 voti

Benvenuti nelle pagine del blog di Start-Luck. Oggi vorrei mostrarvi come utilizzare il codice. Scrivere siti web è un'attività interessante che può sembrare opprimente per molti. Infatti, una semplice pagina può essere creata in soli 5 minuti.

In questo articolo parlerò della creazione di una pagina html. Completeremo questa attività in meno di 10 minuti, quindi tratteremo i tag principali in modo più dettagliato. Sarebbe sbagliato chiamare una tale pubblicazione una lezione. È più un antipasto che ha lo scopo di mostrarti la semplicità del lavoro e darti la voglia di andare avanti, imparare di più, fare meglio.

Come creare una pagina

Ti suggerisco di fare la prima pagina in un blocco note. Il più semplice, che si trova nel menu Start, la cartella Accessori. Non è ancora necessario scaricare nulla. Cerca di sfruttare ciò che hai.

Apri un documento.

Incolla questo codice al suo interno.

<html > <testa > <titolo > La mia prima pagina</titolo> </testa> <corpo> <centro >

</h1> <br/>
<centro > "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"> <br/>
<fontstyle="colore:rosso"></carattere> <br/>
<b></b> <br/>
Abbiamo raggiunto il fondo<br/>
Ora sai qualcosa in più sui tag e puoi usarli. Proviamo a inserire un link per collegare tra loro più pagine.<br/>
<ora > Ad esempio, ecco un link al mio blog -<a href = "http://sito/" > Inizia fortuna</a>- parla semplicemente di "difficile".<br/>
<br/>
</corpo> </html>

La mia prima pagina

Creare una pagina è più facile di quanto pensi

A molti può sembrare che la creazione di siti Web sia un compito difficile, persino impossibile. Per fare questo, devi imparare molto, imparare, fare. In effetti, ci sono circa 100 tag che non devi nemmeno imparare. È solo importante capire cosa e dove viene applicato. Le informazioni possono essere sbirciate in vari cheat sheet e nel tempo inizierai a ricordare i tag sulla macchina.



Semplice codice per rendere il testo rosso

Non è molto più difficile scrivere in grassetto

Abbiamo raggiunto il fondo

Ora sai qualcosa in più sui tag e puoi usarli. Proviamo a inserire un link per collegare tra loro più pagine..

Bene, questo è tutto. La tua prima pagina è pronta

Il file deve essere denominato indice.html. Fine ".html" indica l'estensione del file. Se inserisci semplicemente il nome dell'indice, il documento verrà salvato come file di testo e non verrà aperto dal browser.

Ho salvato il documento sul desktop. Ora devi trovarlo, premere il tasto destro del mouse e aprirlo con qualsiasi browser. Sceglierò Google Chrome.

Ecco come appare la pagina che ho appena creato. Il tuo non sarà diverso. Tutto è esattamente lo stesso: con immagini e caratteri a colori.

Ora entrerò più nel dettaglio sui tag, ma per ora rimuoviamo semplicemente il " centro ” e inserire una riga che contenga la parola “ colore". A proposito, ho già scritto. È molto semplice, consiglio di leggerlo.

Salva di nuovo il documento, questa volta puoi semplicemente usare la scorciatoia da tastiera Ctrl + S, quindi aggiornare la pagina nel browser usando il pulsante F5

Ricorda, quasi tutti i tag devono essere aperti e chiusi. Cioè, il codice con una barra deve trovarsi da qualche parte. In questo caso, si presenta così: .

Vedi, il titolo è diventato rosso. Allo stesso modo, puoi dare la tonalità desiderata a qualsiasi parte del testo.

Bene, questo è tutto, l'esempio è pronto e dovresti essere orgoglioso di te stesso. Ovviamente non è ancora online, per questo deve essere predisposta la pagina web, fornita dall'hosting. Devi anche connettere il tuo dominio in modo che altre persone possano vedere la tua creazione.

Per ora solo tu puoi vedere la pagina. Ma devi ammettere che solo una persona dell'età del ferro può essere sorpresa da un sito del genere. Ma questa è la prima esperienza, rendiamola ancora più vincente comprendendo i tag che abbiamo utilizzato. Questo ti aiuterà a imparare a creare i tuoi progetti senza l'aiuto di nessuno.

tag

Con il tuo permesso, passerò a NotePad++. Ha una serie di vantaggi rispetto a un normale blocco note. Ora avrò davvero bisogno di evidenziare i tag per mostrarti gli elementi di cui parlerò. In generale, se hai intenzione di imparare l'html, ti consiglio vivamente di installare questo programma gratuito.

Non è l'unico e posso offrirti qualcun altro se qualcuno è interessato alle alternative. Passiamo alla parte teorica.

Principale

La pagina inizia e finisce con i tag . Mostrano al browser che questo è un documento web creato con html.

Il prossimo arriva o titolo. Contiene le informazioni più importanti sulla pagina, nel nostro caso - . Se non hai ancora trovato la frase "La mia prima pagina", che è presente nel codice, fai attenzione alla scheda stessa, sopra la riga di ricerca.

Vale a dire tag sono responsabili dell'inizio e della fine delle informazioni principali sulla pagina.

Etichetta

indica che la frase è un titolo. Per impostazione predefinita, è leggermente più grande del corpo del testo ed è in grassetto. Se ora tu ed io stessimo scrivendo non solo in html, ma anche creando un file CSS con cui il nostro file ha qualcosa in comune, potremmo controllare la dimensione, il carattere e persino il colore di tutte le intestazioni della pagina senza scrivere stile carattere come abbiamo fatto nell'esempio. È troppo presto per quello però.

A proposito, Title e H1 hanno la loro influenza quando assegnano al tuo sito un posto nei risultati di ricerca. Devi trattarli con grande attenzione e non scrivere dentro se solo quello. Sono legati a. Oltre a h1, ci sono anche h2, h3, h4.

Nella stessa linea c'è un'apertura e una chiusura

. Grazie a questo elemento, puoi allineare il testo al centro. Se questo tag viene rimosso, il testo sarà allineato a destra.


- uno dei pochi tag singoli. Cioè, funziona da solo. Grazie a questo, salti elementi da una riga all'altra. In altre parole, fare un passo indietro. L'hanno scritto una volta, il che significa che sono scesi una, due volte, come il mio, e il rientro si è rivelato essere un po' di più.

Foto

Poi arriva il tag img , cioè immagine, immagine. La parentesi quadra si apre, tutte le informazioni di base sull'immagine si adattano ad essa, solo dopo si chiude. Si dovrebbe notare che img è un tag e tutti gli altri elementi di codice che si adattano all'interno sono i suoi attributi.

Prima di tutto va alt , che è una descrizione. Ciò è necessario anche per l'ottimizzazione. A volte anche aggiunto titolo . Quando si passa con il mouse su un'immagine, viene visualizzato un suggerimento accanto al cursore quando la pagina è già aperta nel browser.

È stato possibile caricare l'immagine nella cartella del sito e impostarne il percorso, ma sono andato nel modo più semplice. Tra su Pixabay ho trovato una foto, l'ho aperta in una nuova finestra e ho incollato il link.

In etichetta src viene scritto il percorso dell'immagine. È lui che dice al browser che devi spostarti ulteriormente per trovare l'immagine desiderata e in quale direzione guardare: scrivi tu stesso.

Formattazione del testo

è responsabile di conferire a una parte del testo uno stile particolare, ad esempio, come nel nostro caso, un colore diverso. style="colore:rosso" indica che il colore sarà rosso. Se vuoi il giallo, scrivi giallo, verde - verde. Puoi usare i codici colore di Photoshop.

aiuta a rendere il testo in grassetto.


disegna una linea orizzontale. È singolo e si usa solo da chiuso. Se scrivi
più volte, otterrai esattamente lo stesso numero di strisce orizzontali quando apri la pagina nel browser.

Collegamenti

indica al browser che seguirà un collegamento. Vuoi reindirizzare il lettore a un indirizzo diverso. Questo tag viene fornito con un attributo obbligatorio href="indirizzo" . Il percorso in cui il browser dovrebbe trasferire il visitatore alla pagina viene inserito tra virgolette. Dopo che questo tag è stato scritto, viene inserita una descrizione, una o più parole, al clic su cui il lettore verrà trasferito ulteriormente. Dopo che queste condizioni sono soddisfatte, puoi inserire un secondo tag di chiusura .

Dopo aver scritto il corpo della pagina, chiudi il tag corpo poiché il corpo è finito. E indica che smetti di usare oggi html .

Se vuoi saperne di più sui tag html e imparare a inserire non solo immagini, ma anche video, creare pulsanti, moduli vari, elenchi, paragrafi, allora posso offrirti un corso gratuito di Evgeny Popov " nozioni di base sull'html ". Solo 33 lezioni ti aiuteranno a raggiungere un nuovo livello.


Voglio anche consigliarti un video corso che racconta come sono fatti i siti. L'intero processo è mostrato su esempi reali, il che è particolarmente positivo. Il corso è rivolto sia a principianti che ancora non conoscono nemmeno l'HTML, sia a coloro che già conoscono bene sia l'HTML che i CSS, tuttavia non sanno come impaginare bene i siti. Maggiori informazioni possono essere ottenute cliccando sul link: www.srs.myrusakov.ru/makeup


Inoltre, prendi Libro gratuito per la creazione di siti web ! Questo libro è rivolto ai principianti ed è qui che viene creato il sito Web FROM e TO. Cioè, viene preparato il design, quindi vengono create le pagine, viene scritta la parte del software e quindi il sito viene inserito su Internet. L'autore commenta attentamente tutto e il libro ha molti screenshot e illustrazioni. Inoltre, la particolarità del libro è che non viene creato un sito astratto, ma piuttosto reale ed esistente su Internet.

Oggi hai fatto molto, perché il primo passo è il più difficile.

Iscriviti alla newsletter e gruppo VKontakte , e scopri di più: come e perché hai bisogno di un motore di sito web, cosa sono il layout a blocchi e la griglia modulare, come scrivere siti web e molto altro.

Ci vediamo di nuovo e buona fortuna!

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

Che cos'è 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 devono essere scritti all'interno di un documento HTML e viceversa. Come regola generale, HTML rappresenterà sempre il contenuto e CSS ne definirà sempre lo stile.

Con questa comprensione della differenza tra HTML e CSS, immergiamoci nell'HTML in modo più dettagliato.

Termini HTML di base

Prima di iniziare a lavorare con HTML, è probabile che ti imbatti in termini nuovi e spesso strani. Li conoscerai tutti in modo più dettagliato nel 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 in una pagina. Alcuni degli elementi comunemente usati includono più livelli di intestazioni (definiti come elementi con

prima

) e paragrafi (definiti come

); elementi possono essere aggiunti all'elenco ,

, , e e molti altri.

Gli elementi sono identificati tramite 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 verificano 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 di fine è il contenuto di quell'elemento. Il collegamento, ad esempio, avrà un tag di apertura e tag di chiusura. Quello che c'è tra questi due tag sarà il contenuto del collegamento.

Quindi i tag di collegamento sarebbero simili a questo:

...

Attributi

Gli attributi sono proprietà utilizzate per fornire informazioni aggiuntive su un 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 l'origine 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 per 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, l'utente porterà a http://shayhowe.com. L'elemento link viene dichiarato con un tag di inizio e tag di chiusura testo di inclusione, 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 dello schema HTML 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 insieme. Se qualcosa sembra nuovo qui, non preoccuparti: lo decifreremo mentre procediamo.

Personalizzazione della struttura di un documento HTML

I documenti HTML sono documenti di testo normale salvati con l'estensione .html anziché .txt. Per iniziare a scrivere HTML, hai prima bisogno di un editor di testo che ti senti a tuo agio nell'usare. Sfortunatamente, questo non include Microsoft Word o Pages, poiché si tratta di editor complessi. I due editor di testo più popolari per la scrittura di HTML e CSS sono Dreamweaver e Sublime Text. Le alternative gratuite sono 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. Poiché utilizzeremo l'ultima versione di HTML, il nostro tipo di documento sarà semplicemente. Dopo di che viene l'elemento che denota 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 altri metadati utili.

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

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 tramite l'elemento . Elemento <body>include 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 aggiungere il riempimento per mantenere la struttura del documento ben organizzata e leggibile. Nel codice precedente, entrambi gli elementi <head>e <body>annidato e spostato all'interno dell'elemento <html>. La struttura dell'imbottitura 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 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 elementi tipici 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 del getto, 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 useremo frequentemente durante la creazione di nuovi documenti HTML.</p><h3>Convalida del codice</h3><p>Non importa quanto accuratamente scriviamo il nostro codice, gli errori sono inevitabili. Fortunatamente, quando scriviamo HTML e CSS, abbiamo dei validatori per controllare il nostro lavoro. Il W3C offre validatori HTML e CSS che scansionano il codice alla ricerca di errori. La convalida del nostro codice non solo ci aiuta a visualizzare 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, abbiamo il lusso di partecipare a una serie di grandi conferenze dedicate al nostro mestiere. Organizzeremo la nostra conferenza sugli stili e creeremo un sito web per essa durante le prossime lezioni. Come questo!</p><br><img src='https://i1.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, l'HTML definisce il contenuto e la struttura delle nostre pagine web, mentre i 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 diventano per te una seconda natura.</p><h3>Selettori</h3><p>Quando si aggiungono elementi a una pagina Web, è possibile utilizzarli in stile CSS. Un selettore determina quale elemento o elementi in HTML scegliere come target e applica loro stili (come colore, dimensione e posizione). I selettori possono includere una combinazione di diverse metriche per selezionare elementi unici, a seconda di quanto vogliamo essere specifici. 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>In CSS, i selettori sono accoppiati con parentesi graffe () che racchiudono gli stili applicati all'elemento selezionato. Questo selettore ha come target 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, tra parentesi graffe () e immediatamente prima dei due punti. Ci sono molte proprietà che possiamo usare come background , color , font-size , height e width 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>I valori</h3><p>Finora, abbiamo selezionato l'elemento solo tramite il selettore e determinato quale stile vorremmo applicare ad esso 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 testare, in 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 tra parentesi graffe. Come con l'HTML, l'indentazione aiuta a mantenere il nostro codice organizzato e chiaro.</p><p><img src='https://i1.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 CSS generale è un ottimo inizio, ma abbiamo alcuni punti in più da imparare prima di saltare nel profondo. In particolare, dobbiamo dare un'occhiata 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 è familiarizzare con i diversi tipi di selettori. Inizieremo con i selettori più elementari: selettori di tipo, classi e identificatori.</p><h3>Selettori di tipo</h3><p>I selettori di tipo scelgono gli elementi di destinazione in base al loro tipo. Ad esempio, se vogliamo indirizzare tutti gli elementi <div>dobbiamo usare il selettore div. Il codice seguente mostra il selettore di tipo per gli elementi <div>, così come l'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 consentono di applicare lo stesso stile a più elementi contemporaneamente utilizzando lo stesso valore di attributo di classe per più elementi.</p><p>In CSS, le classi sono indicate con un punto iniziale seguito dal valore dell'attributo class. Il selettore di classe in basso seleziona tutti gli elementi che contengono il valore dell'attributo di classe impressionante, inclusi gli elementi <div>e <span><p>Stupendo (...)</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 sono presenti ID, dovrebbero essere riservati per elementi importanti.</p><p>In 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 sopra descritti sono tra i più comuni che incontriamo. Questi selettori sono solo l'inizio. Ci sono molti selettori avanzati e sono prontamente 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 quegli elementi e modellarli con CSS. Ora colleghiamo i punti tra HTML e CSS in modo che i due linguaggi funzionino insieme.</p><h2>Collegamento CSS</h2><p>Per fare in modo 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 puntato 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 apportare rapidamente modifiche allo stesso.</p><h3>Altre opzioni per l'aggiunta di CSS</h3><p>Altre opzioni per includere CSS includono l'utilizzo di stili inline e inline. Puoi vedere queste opzioni nella vita reale, ma generalmente sono disapprovate in quanto rendono gli aggiornamenti del sito ingombranti e ingombranti.</p><p>Per creare il nostro foglio di stile esterno, vogliamo ancora utilizzare il nostro editor di testo preferito per creare un nuovo file di testo con estensione .css. Il nostro file CSS deve essere salvato nella stessa cartella o sottocartella del nostro file HTML.</p><p>Dentro un elemento <head>elemento applicato <link>, che definisce la relazione tra i file HTML e CSS. Poiché ci stiamo collegando a 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é CSS venga visualizzato correttamente, il valore del percorso dell'attributo href deve corrispondere direttamente al punto in cui è stato salvato il file CSS. Nell'esempio precedente, il file main.css è archiviato nella stessa posizione del file HTML, noto 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 è stato salvato in una sottocartella denominata stylesheets, il valore dell'attributo href sarebbe stylesheets/main.css . Qui, una barra (o barra) viene utilizzata per indicare uno spostamento in una sottocartella.</p><p>Al momento, le nostre pagine stanno iniziando a prendere vita, lentamente ma inesorabilmente. Non abbiamo ancora approfondito 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 a questi elementi. Fortunatamente, possiamo sovrascrivere questi stili abbastanza facilmente, cosa che faremo in seguito con un ripristino CSS.</p><h2>Utilizzo del ripristino CSS</h2><p>Ogni browser ha i propri stili predefiniti per i vari elementi. Il modo in cui Google Chrome visualizza intestazioni, paragrafi, elenchi e così via potrebbe differire da come lo fa Internet Explorer. Il ripristino CSS è diventato ampiamente utilizzato per garantire la compatibilità tra browser.</p><p>Reset CSS prende tutti gli elementi HTML di base con un determinato stile e fornisce uno stile coerente su tutti i browser. Queste reimpostazioni di solito includono la rimozione di dimensioni, spaziatura interna, margini o stili aggiuntivi per abbassare questi valori. Poiché il CSS a cascata funziona dall'alto verso il basso (ne parleremo presto), il nostro ripristino dovrebbe essere al massimo del nostro stile. Ciò garantisce che questi stili vengano letti prima e che tutti i diversi browser inizino a funzionare da un punto di riferimento comune.</p><p>Ci sono un sacco di diversi reset CSS disponibili da usare, ognuno dei quali ha i propri punti di forza. Uno dei più apprezzati da Eric Meyer, il suo ripristino 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 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 crossbrowser</h3><p>Come accennato in precedenza, browser diversi rendono 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 vicini. 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 scrive 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 siamo lasciati l'ultima volta sul sito della conferenza e vediamo come possiamo aggiungere alcuni CSS.</p><ol><li>All'interno della nostra cartella stili-conferenza, 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>Usando 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 unici intorno a loro. Utilizzando il ripristino di Eric Meyer, possiamo ammorbidire questi stili, consentendo a ciascuno 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: none (dominio pubblico) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, address, big, citare, code, del, dfn, em, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, modulo, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, a parte, tela, dettagli, incorporare, figura, figcaption, piè di pagina, intestazione, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset per browser meno recenti */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( virgolette: none; ) blockquote:before, blockquote:after, q:before, q:after ( contenuto: ""; contenuto: none; ) table ( bordo- collasso: c collasso; spaziatura del confine: 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>in <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 dei fogli di stile, che si trova all'interno della cartella delle risorse. 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 il nostro HTML e CSS combaciano. 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 Styles Conference con ripristino CSS

Demo e codice sorgente

Di seguito puoi visualizzare il sito di Styles Conference nel suo stato attuale, nonché scaricare il codice sorgente corrente per il sito.

Sommario

Allora, tutto bene! Abbiamo fatto dei grandi passi in questo tutorial.

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

Ricordiamo che abbiamo considerato quanto segue:

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

Ora diamo un'occhiata 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: ripristina CSS tramite Eric Meyer

Istruzione

Tutto ciò che il visitatore vede sul web viene ricreato dal browser dalle istruzioni inviate dal suo server. Queste istruzioni sono scritte in HTML (HyperText Markup Language - “hypertext markup language”) e htm e html sono evidenziati per i file in cui sono memorizzati. Puoi creare un file di questo tipo in un normale editor di testo: questo sarà il primo passo nella creazione pagine web. Apri, ad esempio, il Blocco note standard e crea un file vuoto chiamato index.html. Quando si digita l'indirizzo di un sito Web senza specificarne uno specifico pagina(ad esempio, ), prima di tutto cerca pagina con lo stesso nome - indice.

Le istruzioni in linguaggio HTML sono chiamate "tag" e ognuna di esse è racchiusa tra parentesi quadre -<>. Alcuni dei tag sono accoppiati, ovvero consistono in tag di apertura e chiusura e le informazioni vengono inserite tra di loro. Ad esempio, un tag che dice al browser che il codice seguente è in HTML, come questo: Il tag end, che ti dice che il codice HTML è terminato a questo punto, è scritto in questo modo: Come puoi vedere, il tag di chiusura differisce dal tag di apertura per avere una barra dopo la parentesi di apertura (

Tutto il codice che metti tra i tag e, dovrebbe essere diviso in due parti: intestazione e corpo del documento. I tag di intestazione di apertura e chiusura sono scritti in questo modo: Questa è la parte "servizio" della pagina: le informazioni per il titolo della finestra, le parole chiave e le descrizioni per i robot di ricerca, le descrizioni degli stili, gli script, ecc. sono posizionate qui. Inserisci il titolo della finestra della pagina al suo interno: È un titolo! Il testo completo della tua pagina html a questo punto dovrebbe assomigliare a questo:

È un titolo!

Dopo l'intestazione, è necessario posizionare i tag tra i quali verranno racchiuse le istruzioni del corpo del documento: Inserisci tra di loro, ad esempio, un tag che viene visualizzato pagina paragrafo di testo:

C'è un intero paragrafo di informazioni qui!

Non tutti i tag di lingua HTML sono accoppiati. Alcuni di loro hanno tutto ciò di cui hanno bisogno all'interno del tag di apertura. Questi tag hanno una barra di chiusura prima della parentesi graffa di chiusura. Ad esempio, il tag di fine riga e "ritorno a capo".
:

La prima riga del paragrafo.


La seconda riga del paragrafo.

Tutto questo è sufficiente affinché il browser visualizzi correttamente il tuo pagina. L'intero codice html dovrebbe assomigliare a questo:

È un titolo!


La prima riga del paragrafo.


La seconda riga del paragrafo.



Su questo

In questo articolo parleremo di vari concetti legati al Web: pagine Web, siti Web, server Web e motori di ricerca. Questi termini spesso confondono sia coloro che sono nuovi al Web sia coloro che utilizzano il Web di rado. Scopriamo cosa significano esattamente questi concetti!

In poche parole

Come ogni altro campo della conoscenza, il Web è pieno di termini specifici. Ma non preoccuparti, non vogliamo travolgerti proprio all'inizio del tuo viaggio (e se la curiosità prende ancora il sopravvento, allora abbiamo un dizionario). Tuttavia, per cominciare, devi ancora imparare alcuni termini di base, poiché li incontrerai abbastanza spesso nei nostri articoli. A volte è facile confondere questi termini poiché sono correlati ma hanno funzioni diverse. Probabilmente hai notato il loro uso improprio più di una volta nelle notizie o altrove.

Tratteremo questi concetti e tecnologie un po' più avanti, ma per ora le brevi definizioni di seguito saranno un ottimo inizio per te:

Pagina Web Un documento che può essere visualizzato da browser Web come Firefox, Google Chrome, Microsoft Internet Explorer/Edge o Safari di Apple. Il concetto stesso di "pagina web" per brevità sarà chiamato semplicemente "pagina". Sito Web Una raccolta di pagine Web collegate tra loro in qualche modo. Utilizzo del vocabolario: "sito web" o semplicemente "sito web". Server web Il computer che fornisce il computer e il software necessari per il funzionamento del sito web. Motore di ricerca Un sito web che ti aiuta a trovare altre pagine web come Google, Bing o Yahoo.

Apprendimento attivo

Finora, lo studio attivo non è disponibile. Se puoi fornire informazioni utili, allora, .

Immergersi più a fondo

Quindi, scaviamo un po' più a fondo e scopriamo come questi 4 termini sono correlati tra loro e perché questi concetti sono spesso confusi tra loro.

Pagina web

Pagina web- un semplice documento visualizzato sullo schermo di un computer tramite un browser. Tale documento è scritto in HTML (che vedremo più in dettaglio). Una pagina web può contenere molti materiali diversi, come ad esempio:

  • informazioni sullo stile- controllare la pagina per percezione e sentimento
  • script- che rendono la pagina più dinamica e user friendly
  • media- immagini, musica e video.

Nota: i browser possono spesso visualizzare alcuni documenti come file PDF o immagini, ma il termine pagina web più direttamente correlato ai documenti HTML. Fino alla fine dell'articolo, in questo caso, utilizzeremo il concetto documento.

Tutte le pagine web della rete hanno un proprio indirizzo univoco. Per accedere alla pagina desiderata è sufficiente digitarne l'indirizzo nella barra degli indirizzi del proprio browser:

Sito web- è una raccolta di pagine collegate tra loro in qualsiasi modo (compresi i loro collegamenti ad altre risorse) disponibili sotto un unico nome di dominio. Ogni pagina del sito contiene collegamenti diretti (quasi sempre evidenziate parti di testo su cui è possibile fare clic) che consentono all'utente di navigare velocemente da una pagina all'altra del sito.

Per accedere a un sito web, digita il suo nome di dominio nella barra degli indirizzi del tuo browser e il tuo browser visualizzerà la pagina principale del sito, o la home page in altre parole:

pagina web e Sito web particolarmente facile da confondere tra loro quando sito web ne contiene solo uno pagina. Questo sito è talvolta chiamato sito web a pagina singola.

server web

server webè un computer che ne fornisce uno o più siti web (hosting). Il termine "hosting" significa che tutto pagine e i file ad essi allegati sono contenuti su questo computer. Quelli. server web invierà qualsiasi pagina da posto su richiesta di qualsiasi utente, che ospiterà il browser dell'utente.

Non confondere i concetti sito web e server web. Ad esempio, se senti qualcuno dire "Il mio sito Web non risponde", ciò significa veramente server web non risponde alla richiesta, e quindi non è lui stesso disponibile sito web. Inoltre, poiché un server Web può ospitare più siti, il termine server Web non viene mai utilizzato per riferirsi a un sito Web, poiché ciò potrebbe creare molta confusione. Tornando all'esempio precedente, se dovessimo dire "Il mio server web non risponde", significherebbe che al momento non ci sono siti disponibili su questo server.

Sistema di ricerca

Motori di ricerca sono una causa comune di confusione nella rete. Sistema di ricercaè un tipo speciale di sito Web che aiuta gli utenti a trovare le pagine di cui hanno bisogno altri siti.

I motori di ricerca più popolari: Google, Bing , Yandex , DuckDuckGo e molti altri. Alcuni di loro sono universali e alcuni sono focalizzati su un'area specifica. Usa il motore di ricerca che fa per te.

Molti utenti web inesperti confondono un motore di ricerca e un browser. Spieghiamo: browser è un software che trova e visualizza le pagine web; sistema di ricerca - questo è un tipo speciale di sito che aiuta gli utenti a trovare le pagine di cui hanno bisogno altri siti. La confusione deriva dal fatto che quando qualcuno avvia per la prima volta un browser, viene visualizzata la home page del motore di ricerca. Questo è vero, perché la prima cosa che fai quando avvii un browser è trovare una pagina web e aprirla. Ma non confondere l'infrastruttura (es. browser) con il servizio (es. motore di ricerca). Questa differenza ti aiuterà un po', ma anche alcuni esperti usano questi termini in modo arbitrario, quindi non dovresti preoccupartene troppo.

Di seguito è riportato un esempio di come il browser Firerox predefinito visualizza la casella di ricerca di Google nella pagina iniziale (home):

Articoli correlati in alto