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 > <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> |
Creare una pagina è più facile di quanto pensi
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
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
- 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, cos'è il layout a blocchi e la griglia modulare, come scrivere siti web e molto altro.
Ci vediamo di nuovo e buona fortuna!
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: