ISTITUTO DI EDUCAZIONE APERTA DI MOSCA
DIPARTIMENTO DI TECNOLOGIE DEI MATERIALI E DELL'INFORMAZIONE

Materiali del corso a distanza
"Tecnologie dell'informazione e formazione"

Polilova Tatyana Alekseevna
[e-mail protetta]

Come creare una pagina web

Il modo più semplice per creare una pagina Web è utilizzare gli strumenti di Microsoft Office. Le ultime versioni di questo pacchetto offrono la possibilità di convertire un normale documento in formato HTML con una buona qualità del codice.

Caratteristiche delle parole

Un documento preparato nell'editor di testo Word può essere facilmente convertito in una pagina web. Tuttavia, non sembrerà attraente come vorresti se non vengono presi ulteriori passaggi. Diamo un'occhiata ad alcuni esempi.

Prendiamo del testo.

Convertiamo il documento in una pagina web utilizzando l'operazione Salva come pagina web... (richiamata dal menu principale - voce File). Quindi la rappresentazione html del documento sarà simile a:

La prima cosa che attira la tua attenzione è che il testo occupa l'intero spazio dello schermo. La lunghezza della stringa è troppo lunga. Per una lettura confortevole sullo schermo, il numero di caratteri per riga dovrebbe essere compreso tra 50 e 65.

Utilizzando una tabella

In questo caso, puoi farlo in modo molto semplice: crea una tabella nel documento sorgente e inserisci al suo interno il testo desiderato. È possibile impostare una cornice nella tabella. Quindi l'aspetto della pagina web sarà molto migliorato e la pagina apparirà più attraente nel browser.

Sfondo e stile

Si consiglia di scegliere uno sfondo non troppo luminoso in modo che il testo possa essere letto chiaramente su di esso. Uno di questi sfondi nell'elenco proposto è, ad esempio, la carta di riso. La visualizzazione della pagina è cambiata notevolmente:

Inserimento di un'immagine

Puoi aggiungere un'immagine a un documento, prelevandola, ad esempio, da una raccolta di clip.

È necessario fare clic con il pulsante destro del mouse sull'immagine, eseguire un'operazione di copia, quindi specificare la posizione dell'immagine nel documento ed eseguire l'operazione di incollatura dell'oggetto copiato.

Se inserisci un'immagine all'interno di un paragrafo, allora è meglio modificare le proprietà dell'immagine impostando il testo da avvolgere attorno all'immagine (è necessario selezionare la voce del menu principale Formato e poi Immagine):

Ciò non creerà alcuno spazio vuoto aggiuntivo nel documento.

Infine, puoi aggiungere una cornice e un'ombra all'immagine utilizzando i pulsanti nel pannello Disegno: Tipo linea e Stile ombra. Tali sfumature aggiungono significativamente espressività alla pagina.

Se il pannello Disegno non è presente nella pagina, è necessario installarlo selezionando la voce del menu principale Visualizza e poi Barre degli strumenti e Disegno.

Ticker

Word ti consente di aggiungere altri elementi di progettazione a una pagina web, come una "linea strisciante". Per utilizzare questa funzionalità, è necessario aprire il pannello dei componenti Web sullo schermo (dal menu principale - Visualizza, quindi Barre degli strumenti e Componenti Web). Facendo clic sul pulsante operativo Ticking Line si apre una finestra aggiuntiva per specificare il testo dei parametri della linea strisciante.

Come al solito, puoi modificare il carattere e gli attributi di una riga: dimensione del carattere e colore del carattere. La pagina web apparirà così sullo schermo:

Abbiamo fornito un esempio di un insieme molto modesto di tecniche di progettazione con le quali è possibile progettare una pagina Web basata su un documento esistente in formato Word.

Utilizzo di modelli di progettazione

Se stai iniziando a creare una pagina da zero, puoi utilizzare la Creazione guidata pagina Web, che ti aiuterà a creare un documento in una finestra di dialogo. Oppure puoi utilizzare un modello di progettazione di pagina già pronto, scegliendolo da un set abbastanza rappresentativo. A tale scopo, nell'operazione Crea, selezionare la modalità Crea utilizzando un modello e quindi Modelli generali. Sullo schermo apparirà un modulo in cui è necessario selezionare la scheda Pagine Web:

L'utente può scegliere il colore e lo stile in modo indipendente, ad esempio, utilizzando le impostazioni Formato - Tema.

Creazione di collegamenti ipertestuali e segnalibri

L'ultimo problema che intendiamo considerare in questa sezione è la creazione di collegamenti ipertestuali in un documento.

Se vogliamo fare riferimento in un documento a un altro documento o a un altro sito su Internet, allora un collegamento ipertestuale può essere creato in questo modo: seleziona una parte di testo (una parola) nel documento ed esegui l'operazione Inserisci - Collegamento ipertestuale... Sullo schermo verrà visualizzato un modulo in cui si specifica l'indirizzo del collegamento ipertestuale. L'indirizzo può essere inserito esplicitamente oppure il file può essere selezionato nella finestra.

Qui dovresti ricordare che l'indirizzo del file selezionato sul tuo computer potrebbe cambiare quando crei il tuo sito. Pertanto il metodo implicito di indicazione dell'indirizzo è adatto solo se la struttura della cartella sul computer e sul sito Internet è la stessa.

Se un collegamento ipertestuale deve rimandare ad un'altra parte dello stesso documento, è necessario prima inserire un segnalibro all'inizio del frammento desiderato. È necessario eseguire l'operazione Inserisci - Segnalibro e inserire il nome del segnalibro nel modulo visualizzato sullo schermo.

Presentazione Web in PowerPoint

PowerPoint è un programma progettato per creare presentazioni su un computer. Tuttavia, ha la funzione di convertire una presentazione preparata in un formato web.

È possibile aprire la presentazione preparata ed eseguire le operazioni (dal menu principale) File - Salva come pagina web. Come al solito, è necessario specificare il nome della presentazione web nella finestra che si apre. Come risultato della conversione della presentazione, verrà creato un file con il nome e l'estensione specificati .htm e una cartella con lo stesso nome con materiali aggiuntivi.

Se ora richiami la presentazione web dal browser, puoi vedere il risultato della conversione sullo schermo.

Viene creata una riga speciale nella parte inferiore dello schermo, dove si trovano i pulsanti per passare alle diapositive e i pulsanti per impostare vari parametri per la visualizzazione delle presentazioni.

La presentazione può essere visualizzata con la struttura delle diapositive mostrata. Se però queste informazioni non interessano, è possibile eliminare il campo sullo schermo riservato alla visualizzazione della struttura (operazione espandi/comprimi struttura nella riga inferiore).

Utilizzando il pulsante Mostra Negozi è possibile visualizzare le diapositive a schermo intero.

Creazione di collegamenti ipertestuali

In una presentazione è possibile creare collegamenti ipertestuali che collegano gli oggetti di una diapositiva, ad esempio, ad altre diapositive. In questo modo è possibile creare una struttura ipermediale che corrisponderà naturalmente all'ideologia di Internet. Spieghiamo questa tecnica con un esempio.

Disponiamo di diverse diapositive preparate sul tema della flora del Lago Baikal, compilate da una raccolta di fotografie. Creiamo una nuova diapositiva: un sommario per la raccolta.

Se la nuova diapositiva non è la prima nella sequenza, è necessario accedere alla modalità ordinamento diapositive (dal menu principale utilizzando le operazioni Visualizza - Ordine diapositive) e trascinare la nuova diapositiva all'inizio della raccolta.

Posiziona piccole copie di tutte le fotografie su una nuova diapositiva. Il modo più semplice per farlo è il più semplice: copiare in sequenza tutte le fotografie della raccolta su una diapositiva vuota, ridurne le dimensioni e posizionarle, ad esempio, su due righe. Le immagini possono essere ulteriormente decorate con cornici con ombre. Puoi aggiungere il titolo della presentazione alla diapositiva del sommario. La visualizzazione della presentazione in modalità Ordine diapositive è mostrata di seguito:

Passiamo alla modalità di visualizzazione normale delle diapositive (comandi Visualizza e poi Normale). Nella diapositiva del sommario, seleziona la foto ed esegui il comando Inserisci - Collegamento ipertestuale. Nella finestra che si apre, imposta la transizione tramite collegamento ipertestuale: il numero della diapositiva con una foto grande da cui è stato copiato il campione più piccolo per il sommario.

Allo stesso modo, collegheremo altre immagini nella diapositiva del sommario con le diapositive corrispondenti con le fotografie originali.

Se ora eseguiamo la nostra presentazione, funzionerà come una struttura ipermediale: quando si clicca su una foto piccola, si passerà a una diapositiva con una foto più grande.

Resta da migliorare un bel po' la nostra struttura. Aggiungiamo una freccia a ciascuna diapositiva con una foto nella parte in alto a sinistra (Forma sulla barra degli strumenti Disegno) e creiamo un collegamento ipertestuale da questa freccia che andrà alla diapositiva del sommario. Adesso il movimento attraverso la struttura ipermediale che abbiamo creato diventerà “bidirezionale”: dal sommario si potrà passare alle slide con fotografie, e da qualsiasi slide si potrà tornare al sommario.

Dopo aver convertito la presentazione in formato web, la nostra prima pagina sarà simile a questa:

Facendo clic su un'immagine dal menu verrai portato a una diapositiva con una foto di grandi dimensioni, mentre facendo clic sulla freccia (in alto a sinistra della diapositiva) verrai portato alla pagina del sommario della raccolta.

Ciao, cari lettori del blog. Con questo articolo inizieremo ad apprendere le basi del linguaggio HTML.

Probabilmente sai già che la lingua principale di Internet è linguaggio di markup ipertestuale HTML (HyperText Markup Language). In questo articolo impareremo i concetti base dell'HTML e impareremo a creare semplici pagine WEB.

Cominciamo con la cosa più importante, vediamo come funziona World Wide Web: Internet. Per produrre pagine web, crei file scritti in HTML e li inserisci su un server web. Successivamente, qualsiasi browser installato su un dispositivo con accesso a Internet, sia esso un computer, telefono o tablet, potrà trovare le tue pagine web.

server web- Questo è un normale computer con un software speciale che ha accesso a Internet. Ascolta continuamente le richieste dei browser per pagine web, immagini, file audio e video. Dopo aver ricevuto una richiesta per una di queste risorse, il server la cerca e la invia al browser.

Navigatoreè un programma speciale progettato per visualizzare siti Web, come Internet Explorer. Utilizzando un browser, navighi nei siti Web facendo clic sui collegamenti. Qualsiasi clic di questo tipo fa sì che il browser effettui una richiesta per la pagina HTML al server web, riceva una risposta e visualizzi la pagina nella sua finestra. È quando viene visualizzata la pagina che il linguaggio HTML inizia a funzionare; comunica al browser tutto sulla struttura e il contenuto della pagina web. Utilizzando i comandi - tag, HTML indica al browser dove iniziano i paragrafi di testo, quale parte del testo è un'intestazione e dove inserire tabelle e persino immagini. E i tag sono parole tra parentesi angolari, per esempio

,

, .

Hai urgentemente bisogno di un negozio online, ma non hai tempo per imparare HTML, CSS, PHP e altre tecnologie. Quindi puoi semplicemente affittare un negozio online con funzionalità e ottimizzazione completamente implementate per i motori di ricerca.

Linguaggio HTML e suoi tag

La prima versione del linguaggio HTML è apparsa nel 1992. Nel 2013 è in fase di sviluppo la specifica di una nuova versione di HTML, la numero 5. Lo sviluppo di questa specifica è portato avanti dal World Wide Web Consortium, in breve W3C. L'organizzazione W3C sviluppa altri standard Web. Puoi familiarizzare con questi standard sul loro sito web www.w3.org. A proposito, molti browser Web supportano già alcune funzionalità HTML 5.

Suggerisco di iniziare subito a imparare l'HTML con un esempio. Creiamo quindi la nostra prima pagina Web. Qualsiasi editor di testo è adatto per creare pagine WEB. Suggerisco prima di utilizzare Windows integrato Bloc notes(in generale, in futuro, consiglio di utilizzarlo per modificare il codice html). Lo puoi trovare: “Start->Tutti i programmi->Accessori->Blocco note”. Creiamo una pagina sulle auto. Quindi, apri Blocco note e digita il seguente testo:

Sito sulle automobili.

Benvenuti nel nostro sito web automobilistico. Qui troverai molti articoli interessanti e utili a riguardo automobili. Il sito contiene descrizioni di molte auto importate e nazionali.

Successivamente, salva la pagina Web creata in un file denominato index.html. In questo caso, nella finestra di dialogo di salvataggio del file, devi impostare la codifica su UTF-8 e racchiudere il nome del file tra virgolette, altrimenti Blocco note aggiungerà ad esso l'estensione txt e il nostro file si chiamerà index.htm.txt:

Ora non resta che aprire il file creato nel browser e guardare il risultato. Per fare ciò, puoi utilizzare il browser Microsoft Internet Explorer fornito con Windows, o qualsiasi altro browser installato sul tuo computer, facendo doppio clic sul file index.html o trascinando il file sull'icona del browser. Aprilo e vedi qualcosa del genere:

Pertanto, abbiamo creato una pagina Web nel Blocco note, anche se un po' anonima, ma contenente già una grande intestazione e un paragrafo di testo che viene automaticamente suddiviso in righe e contiene un frammento in grassetto.

Cos'è un'etichetta?

Ora parliamo più approfonditamente della struttura della pagina. Diamo un'occhiata al frammento:

Sito sulle automobili

. Qui vediamo il testo che appare sulla pagina come titolo, racchiuso tra tag

E

. Cos'è un tag in HTML?

Etichetta HTML sono parole e simboli comuni racchiusi tra parentesi angolari, ad esempio

,

, . Quindi tagga

è il tag di apertura, tag

tag di chiusura e il testo tra di loro viene chiamato contenuto del tag. Anche taggare

e etichetta

sono chiamati tag accoppiati. Insieme, il tag di apertura più il contenuto più il tag di chiusura formano un elemento del documento HTML. Ci sono anche elementi costituiti da un tag di apertura:

Tag quindi abbinato

definisce un elemento di intestazione di primo livello. Ci sono sei livelli di titoli in totale, questi sono gli elementi

—

.

Gli elementi possono essere bloccati o in linea (testo). Elementi di blocco effettuare la formattazione strutturale della pagina. Gli elementi del blocco vengono sempre visualizzati su una nuova riga nella pagina e sono rientrati rispetto agli elementi adiacenti. Elementi in linea eseguire la formattazione diretta del testo o la formattazione logica. Elemento

è un elemento di blocco.

Per me è tutto!!! Ci vediamo nei prossimi post!

Quindi, cosa sono un sito Web e una pagina Web? Per comprendere questo problema, pensiamo a quali informazioni possono effettivamente essere contenute in un sito Web? La risposta è ovvia: quasi qualsiasi. Il sito può contenere informazioni su giochi per computer, automobili, pesci d'acquario, creature mitiche, città e paesi del mondo, ecc. e così via. La lista potrebbe continuare all'infinito. Puoi anche pubblicare, ad esempio, opere di grandi classici russi sul sito. 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 che ti sono utili, sia informazioni che al momento non ti interessano affatto.

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

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

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

Ma come arrivare alle informazioni necessarie che si trovano su un sito Web, dal momento che non possiamo sfogliare le pagine elettroniche come quelle cartacee? In effetti, di solito usiamo un mouse.

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

Nel caso “classico” si utilizzano come collegamenti ipertestuali parte del testo (una o più parole) e immagini grafiche (disegni e fotografie).

Poiché nel primo caso viene utilizzato il testo per creare collegamenti ipertestuali, tale collegamento ipertestuale viene chiamato collegamento testuale. Molto spesso, un collegamento ipertestuale di testo è sottolineato in blu. Vedendo, ad esempio, sulla pagina principale del sito la scritta “Siti e pagine Web” disegnata in modo simile e cliccandoci sopra con il tasto sinistro del mouse, dovresti ritrovarti su una pagina Web dedicata a questo argomento. La pagina “Siti e Pagine Web” deve, a sua volta, contenere almeno un collegamento ipertestuale attraverso il quale si possa ritornare ai contenuti.

Se un'immagine grafica, ad esempio una fotografia, viene utilizzata come collegamento ipertestuale, sarà difficile indovinare che si tratta di un collegamento ipertestuale. Come si può, allora, determinare se un'immagine è un collegamento ipertestuale oppure no? In questo caso, ricorda la seguente regola: "Se, quando muovi il cursore del mouse su un elemento di una pagina Web, 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 passa sopra con il mouse, il cursore assume anche la forma di una mano. Oltre a cambiare l'aspetto del cursore, quando si passa sopra un collegamento ipertestuale, dovrebbe essere visualizzato anche l'URL (indirizzo univoco della risorsa), ma di questo parleremo nella lezione sulla creazione di collegamenti ipertestuali utilizzando FrontPage.

Domande di controllo:

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

9 voti

Benvenuti sulle pagine del blog Start-Luck. Oggi vorrei mostrarvi come utilizzare il codice. Scrivere siti web è un'attività interessante che a molti può sembrare incredibilmente difficile. 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 esamineremo i tag principali in modo più dettagliato. Sarebbe sbagliato definire una simile pubblicazione una lezione. Questo è piuttosto un seme progettato per mostrarti la semplicità del lavoro e darti il ​​desiderio di andare avanti, imparare di più, fare meglio.

Come creare una pagina

Ti suggerisco di creare la prima pagina in un blocco note. La più semplice, che si trova nel menu Start, è la cartella “Accessori”. Non è ancora necessario scaricare nulla. Prova a usare quello che hai.

Apri il 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/> <stile carattere="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 collegamento per collegare più pagine insieme.<br/> <ora > Ad esempio, ecco un collegamento al mio blog:<a href = "http://sito/" > Inizio-fortuna</a>- parla semplicemente di “cose complicate”.<br/> <br/> </corpo> </html>

Creare una pagina è più semplice di quanto pensi

Molti potrebbero pensare che creare siti web sia difficile, addirittura impossibile. Per fare questo è necessario studiare, imparare e fare molto. In effetti, ci sono circa 100 tag che non hai nemmeno bisogno di imparare. È importante solo capire cosa viene utilizzato e dove. Puoi cercare informazioni in vari foglietti illustrativi e col tempo inizierai a ricordare i tag automaticamente.



Un semplice codice ti consente di 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 ad inserire un link per collegare più pagine tra loro..

OK, è tutto finito adesso. La tua prima pagina è pronta

Il file deve essere nominato 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, fare clic con il pulsante destro del mouse e aprirlo utilizzando 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 parlerò dei tag più nel dettaglio, ma per ora togliamo solo “ dal titolo centro " e inserisci una riga contenente la parola " Colore" A proposito, ho già scritto. E' molto semplice, consiglio di leggerlo.

Salva nuovamente il documento, questa volta puoi semplicemente utilizzare la scorciatoia da tastiera Ctrl + S, quindi aggiornare la pagina nel browser utilizzando il pulsante F5

Ricorda, quasi tutti i tag devono aprirsi e chiudersi. Cioè, il codice con una barra deve trovarsi da qualche parte. In questo caso assomiglia a questo: .

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

Bene, tutto qui, l'esempio è pronto e dovresti essere orgoglioso di te stesso. Naturalmente non è ancora online, per questo deve essere pubblicata la pagina web messa a disposizione 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 un sito del genere non può che sorprendere una persona dell'età del ferro. Ma questo è il primo tentativo, rendiamolo ancora più efficace comprendendo i tag che abbiamo utilizzato. Questo ti aiuterà a imparare come creare i tuoi progetti senza l'aiuto di nessuno.

Tag

Con il tuo permesso, passerò al programma NotePad++. Presenta numerosi vantaggi rispetto a un normale blocco note. Ora avrò davvero bisogno dell'evidenziazione dei 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'unica e posso offrirtene qualcuna in più se qualcuno è interessato ad alternative. Passeremo alla parte teorica.

Di base

La pagina inizia e finisce con i tag . Mostrano al browser che si tratta di un documento Web creato utilizzando html.

Poi arriva o titolo. Contiene le informazioni più importanti sulla pagina, nel nostro caso - . Se non hai ancora trovato la frase “La mia prima pagina”, presente nel codice, presta attenzione alla scheda stessa, sopra la riga di ricerca.

Sono i 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 testo principale ed è evidenziato in grassetto. Se tu ed io ora scrivessimo non solo in html, ma creassimo anche un file CSS con cui si sovrapponesse il nostro file, potremmo controllare la dimensione, il carattere e persino il colore di tutti i titoli della pagina senza scrivere stile carattere , come abbiamo fatto nell'esempio. Anche se è troppo presto per parlare anche di questo.

A proposito, Titolo e H1 hanno la loro influenza nell'assegnare una posizione al tuo sito nei risultati di ricerca. Devi trattarli con grande attenzione e non scrivere nulla dentro solo per il gusto di farlo. Sono imparentati con. Oltre a h1 ci sono anche h2, h3, h4.

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

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

- uno dei pochi tag singoli. Cioè, funziona da solo. Grazie a questo, salti gli elementi da una riga all'altra. In poche parole, rientri. L'abbiamo scritto una volta, il che significa che ci siamo spostati verso il basso una, due volte, come ho fatto io, e il rientro si è rivelato un po' più grande.

Immagine

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

La prima cosa è alt , cioè una descrizione. Ciò è necessario anche per l'ottimizzazione. A volte viene anche aggiunto titolo . Quando passi il mouse sull'immagine, viene visualizzata una descrizione comando accanto al cursore quando la pagina è già aperta nel browser.

Era possibile caricare il disegno nella cartella del sito e scriverne il percorso, ma ho seguito la strada semplice. Ho trovato un'immagine su Pixabay, l'ho aperta in una nuova finestra e ho incollato il collegamento.

Nell'etichetta src viene specificato il percorso dell'immagine. È lui che dice al browser cosa spostare dopo per trovare l'immagine desiderata e in quale direzione guardare: lo scrivi tu stesso.

Formattazione del testo

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

aiuta a rendere il testo in grassetto.

---

disegna una linea orizzontale. E' singolo e si usa solo quando è chiuso. Se scrivi

---

più volte, quando apri la pagina nel browser otterrai esattamente lo stesso numero di strisce orizzontali.

Collegamenti

dice al browser che ci sarà un collegamento successivo. Vuoi reindirizzare il lettore a un indirizzo diverso. Questo tag viene fornito con un attributo obbligatorio href=”indirizzo” . Le virgolette contengono il percorso in cui il browser deve portare il visitatore della pagina. Dopo aver scritto questo tag, viene inserita una descrizione, una o più parole, che, se cliccata, porterà il lettore oltre. Una volta soddisfatte queste condizioni, puoi inserire un secondo tag di chiusura .

Dopo aver scritto la parte principale della pagina, chiudi il tag corpo , poiché il corpo è finito. E indica che smetti di usarlo per oggi html .

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

Vorrei consigliarti anche un videocorso che ti spiega come sono progettati i siti web. L'intero processo viene mostrato con esempi reali, il che è particolarmente positivo. Il corso è rivolto sia ai principianti che non conoscono ancora nemmeno l'HTML, sia a chi conosce già bene sia HTML che CSS, ma non sa impaginare bene i siti web. Puoi avere informazioni più complete seguendo il link: www.srs.myrusakov.ru/makeup

Inoltre, porta via Libro gratuito sulla creazione di siti web ! Questo libro è destinato ai principianti ed è qui che viene creato il sito web DA e A. Cioè, viene preparato un progetto, quindi vengono disposte le pagine, viene scritta la parte software e quindi il sito viene pubblicato su Internet. L'autore commenta attentamente tutto e il libro contiene molti screenshot e illustrazioni. Inoltre, la particolarità del libro è che non crea un sito astratto, ma uno completamente reale che esiste su Internet.

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

Iscriviti alla newsletter e Gruppo VKontakte , e impara anche: come e perché hai bisogno di un motore per siti web, cosa sono il layout a blocchi e la griglia modulare, come scrivere correttamente i siti web e molto altro ancora.

Ci vediamo di nuovo e buona fortuna!

Un sito web, spesso abbreviato in sito, non è altro che una raccolta di pagine web logicamente interconnesse, o semplicemente una pagina. Le pagine del sito sono accessibili su Internet utilizzando i protocolli HTTP o HTTPS. Un sito web ha una propria posizione su Internet, determinata da un indirizzo personale per ciascun sito, solitamente chiamato URL. Qualsiasi sito web ha un proprietario; il proprietario può essere una persona fisica o giuridica.

Il sito web è composto da pagine

Un sito web è costituito da pagine unite da un URL radice comune e, di regola, da una struttura logica, un tema, un layout (design) e un dispositivo tecnico comuni. A sua volta, il World Wide Web non è altro che una raccolta di tutti i siti web. Le pagine Web sono file di testo scritti nel linguaggio di markup ipertestuale HTML o XHTML.

Durante la visualizzazione di una pagina Web, in un programma speciale chiamato browser, i file HTML vengono scaricati sul computer dell'utente. Una volta caricato, il browser visualizza le pagine Web sullo schermo dell'utente. Vari dispositivi possono essere utilizzati come hardware per l'accesso a Internet per visualizzare il contenuto delle pagine web: un personal computer, un PDA, alcuni modelli di console di gioco e altri dispositivi, tutti questi dispositivi supportano gli standard del linguaggio e delle pagine web HTML / XHTML vengono visualizzati in modo identico su di essi.

Il linguaggio HTML/XHTML consente di formattare pagine, inserire testo, collegamenti ipertestuali, tabelle, immagini e altri oggetti. Un foglio di stile CSS che può essere utilizzato nei documenti HTML offre opzioni aggiuntive per creare l'aspetto delle pagine web.

JavaScript e alcuni altri linguaggi di scripting

Nelle pagine web puoi anche utilizzare JavaScript e alcuni altri linguaggi di scripting supportati dal browser e aggiungere interattività al documento web. I collegamenti ipertestuali, o collegamenti ipertestuali in breve, vengono utilizzati per collegare pagine Web all'interno di un sito e collegamenti tra diversi siti Web sul World Wide Web. Se un collegamento ipertestuale viene utilizzato per collegare pagine all'interno di un sito, viene chiamato collegamento interno, mentre se collega siti diversi viene chiamato collegamento esterno.

Pagine del sito

Le pagine di un sito web possono essere statiche, cioè memorizzate su un server web sotto forma di file immutabili, oppure possono essere dinamiche, cioè generate direttamente sul server da un programma speciale, chiamato anche sito motore. Il motore del sito può fornire un'ampia gamma di funzionalità per modificare il contenuto delle pagine web, aggiungere nuove pagine web ed eseguire altre azioni per configurare il sito web e modificare le informazioni su di esso attraverso un'interfaccia di amministrazione basata sul web, chiamata gestione dei contenuti sistema o CMS.

La creazione di un sito Web è un processo ad alta intensità di manodopera che combina il lavoro di vari specialisti: web designer, programmatori, progettisti di layout HTML, ottimizzatori, manager, giornalisti per riempire il sito di informazioni, ecc. Il tempo e il costo della creazione di un sito Web dipendono dal grado di complessità del progetto, dalla sua struttura e dalla qualità del design.

Un po' di storia dello sviluppo di siti web

Il primo sito web al mondo è stato creato il 6 agosto 1991. L'americano Tim Berners-Lee ha pubblicato sul sito web una pubblicazione sulla tecnologia World Wide Web. La base della tecnologia World Wide Web è il protocollo di trasferimento dati HTTP, il linguaggio di markup ipertestuale HTML e il sistema di indirizzamento URL. Il sito descriveva anche altri principi fondamentali di Internet, come il funzionamento di server, browser web, ecc. Il sito, creato da Tim Berners-Lee, è diventato anche il primo catalogo Internet al mondo, perché... in seguito conteneva collegamenti ad altre risorse dell'allora Internet.

Gli strumenti necessari per il funzionamento del sito furono preparati già prima; alla fine del 1990 apparve il primo browser, chiamato WorldWideWeb, che comprendeva inoltre la funzione di un editor ipertestuale. Tim Berners-Lee ha anche preparato il primo server web basato su NeXTcube.