Need help? Chat now!

Hostwinds Blog

Cerca risultati per:


Tutorial di Hostwinds: come creare un sito Web di blog di base senza un'applicazione per la creazione di siti Pt. 2 Immagine in primo piano

Tutorial di Hostwinds: come creare un sito Web di blog di base senza un'applicazione per la creazione di siti Pt. 2

di: Hostwinds Team  /  dicembre 23, 2018


Bentornato al nostro sito web Blog Blog series!Nella parte 1, abbiamo creato la nostra homepage del nostro sito web di blog, e aggiungeremo tre pagine Web con tre diversi ipotetici post dei blog su di loro nella parte 2!Ecco l'intero documento HTML che abbiamo realizzato nella parte 1, oltre a un collegamento alla parte 1:

DOCUMENTO HTML:

Il mio sito di blog

Titolo del post sul blog 1

Qui è dove puoi inserire una breve sinossi del tuo post sul blog, se lo desideri

Leggi il post del blog

Grazie per aver visitato questo sito di blog!

NOTIFICA IMPORTANTE: Quando il pezzo di codice che inserisco in questi post del blog è troppo lungo per entrare nella finestra, una piccola barra di scorrimento apparirà nella parte inferiore di tale codice quando passi il mouse su quell'area. È possibile far scorrere la barra di scorrimento verso destra per visualizzare l'intera porzione di codice. Tienilo a mente in questo post del blog e nelle parti 3 di questa serie di blog.

PARTE 1 LINK:

Tutorial di Hostwinds: come creare un sito Web di blog di base senza un'applicazione per la creazione di siti Pt.1

Oh, e questo mi ricorda ... Ecco un altro link a un post del blog dedicato a spiegare i tag HTML che impiegheremo durante questa serie Blog:

Hostwinds HTML Hype Part 2: Tag Talk

Ora, ecco i tre documenti HTML che faremo nella parte 2 (notare che sono quasi identici):

Pagina web del post del blog 1:

Il mio sito di blog | Blog 1

Il mio sito di blog

Titolo del post sul blog 1

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Grazie per aver visitato questo sito di blog!

Pagina Web del post del blog 2:

Il mio sito di blog | Blog 2

Titolo post sul blog 2

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Leggi il prossimo post del blog

Grazie per aver visitato questo sito di blog!

Pagina Web del post del blog 3:

Il mio sito di blog | Blog 3

Titolo post sul blog 3

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Leggi il prossimo post del blog

Grazie per aver visitato questo sito di blog!

Si noti che il contenuto tra i tag di apertura e chiusura è "il mio sito web di blog | Blog 1", "il mio sito web di blog | Blog 2," e "il mio sito web di blogging | Blog 3," rispettivamente.Per la revisione, questi verranno visualizzati nella scheda della finestra che si apre quando gli utenti digitano il nome del dominio del tuo sito web nella barra di ricerca Internet.No tempo da perdere!Andiamo con il passaggio 8 (vedi parte 1 per i passaggi 1-7):

Passaggi 8 - 16 di configurazione del tuo sito web di blogging con HTML.

Passaggio 8: Creare un nuovo file all'interno della stessa cartella (AKA La cartella Il documento Index.html vive in) e Editor di testo in cui sei ora (aka L'editor di testo utilizzato per creare il documento Index.html).Nomina il file "BlogPost1.html".Quindi configurare il modello HTML che abbiamo impiegato nella parte 1 (il modello con cui si avvia generalmente ogni documento HTML):

<!DOCTYPE html><html> <head> <meta charset="UTF-8">

Passaggio 9: Aggiungi un titolo Blog Post (da non confondere con i tag, che denota il testo mostrato nella scheda sulla parte superiore della finestra. Il titolo del blog post verrà generalmente posizionato tra tag di intestazione), una semplice barra di navigazione, una serie di navigazioneImmagine per il post del blog, il testo che comprende il post del blog, una linea orizzontale per separare il contenuto del post del blog dal piè di pagina e un piè di pagina all'interno dei tag.La cosa bella di questo è possibile copiare e incollare un sacco di codice dal nostro documento Index.html.

Passaggio 10: Dai un'occhiata all'intero documento HTML e assicurati che abbia un aspetto amante:

Il mio sito di blog | Blog 1

Titolo del post sul blog 1

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Grazie per aver visitato questo sito di blog!

Passaggio 11: Creare un nuovo file all'interno della stessa cartella e Editor di testo in cui ti trovi ora.Nomina il file "BlogPost2.html".Quindi configurare il modello HTML che abbiamo impiegato nella parte 1 (il modello con cui si avvia generalmente ogni documento HTML)

Passaggio 12: Aggiungere un titolo Blog Post, una semplice barra di navigazione, un'immagine in primo piano per il Blog Posta, il testo che comprende il post del blog, una linea orizzontale per separare il contenuto del post del blog dal piè di pagina e un piè di pagina all'interno dei tag. Quindi darà un'occhiata all'intero documento HTML e assicurati che sembri tanto lover:

Il mio sito di blog | Blog 2

Titolo post sul blog 2

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Grazie per aver visitato questo sito di blog!

Passaggio 13: Creare un nuovo file all'interno della stessa cartella e Editor di testo in cui ti trovi ora.Nome del file "BlogPost3.html".Quindi configurare il modello HTML che abbiamo impiegato nella parte 1 (il modello con cui si avvia generalmente ogni documento HTML)

Passaggio 14: Aggiungere un titolo Blog Post, una semplice barra di navigazione, un'immagine in primo piano per il Blog Posta, il testo che comprende il post del blog, una linea orizzontale per separare il contenuto del post del blog dal piè di pagina e un piè di pagina all'interno dei tag. Quindi darà un'occhiata all'intero documento HTML e assicurati che sembri tanto lover:

Il mio sito di blog | Blog 3

Titolo post sul blog 3

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Grazie per aver visitato questo sito di blog!

Passaggio 15: Testare il tuo nuovo sito web di blogging (o il nucleo, almeno)!Vai al tuo file Explorer, fai clic con il pulsante destro del mouse su "Index.html" e fai clic su "Apri con".Quindi, seleziona il tuo browser Internet preferito (consiglio Google Chrome).Prova a fare clic sui pulsanti "Leggi Blog Post" e si prega di prenderti da dritto al loro post del blog corrispondente.

Homepage

Post del blog 1 pagina web

NOTA RAPIDA: Come affermato nella Parte 1 di questa serie di blog, se sei interessato a creare una barra di navigazione più complessa, segui i passaggi forniti da questa guida della Knowledge Base di Hostwinds:

Come aggiungere una barra di navigazione al tuo sito web

Web design reattivo

Passaggio 16: Aggiungi questa linea di codice all'interno dei tuoi tag di Tutti e quattro i documenti HTML (incluso il documento Index.html) per garantire che le tue pagine web siano tutte belle sia che vengano visualizzate da un enorme schermo di computer, un tablet, uno smartphone, ecc.

Ora, i documenti HTML che rappresentano la nostra homepage e tre pagine Web saranno così.

Il mio sito di blog

Titolo del post sul blog 1

Qui è dove puoi inserire una breve sinossi del tuo post sul blog, se lo desideri

Leggi il post del blog

Titolo post sul blog 2

Qui è dove puoi inserire una breve sinossi del tuo post sul blog, se lo desideri

Leggi il post del blog

Titolo post sul blog 3

Qui è dove puoi inserire una breve sinossi del tuo post sul blog, se lo desideri

Leggi il post del blog

Grazie per aver visitato questo sito di blog!

2. Blog Post 1 pagina web

Il mio sito di blog | Blog 1

Titolo del post sul blog 1

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Grazie per aver visitato questo sito di blog!

3. Pagina Web del post del blog 2

Il mio sito di blog | Blog 2

Titolo post sul blog 2

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Grazie per aver visitato questo sito di blog!

4. Blog Post 3 Pagina Web

Il mio sito di blog | Blog 3

Titolo post sul blog 3

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Grazie per aver visitato questo sito di blog!

Il web design reattivo sta codificando il proprio sito web per realizzare tutti i pezzi di tali siti nel modo giusto, indipendentemente dal dispositivo e / o sulla dimensione dello schermo che qualcuno li sta visualizzando.Anche se non abbiamo molto tempo per rivedere molti dei componenti che ammontano al web design reattivo, uno dei nostri esperti di prima linea, Abigail, ancora una volta è qui per salvarci con un altro dei suoi tutorial informativi.Clicca qui sotto per visualizzare la Guida di Abigail intitolata "Come rendere il tuo sito web per cellulare."

Come rendere il tuo sito web Mobile Friendly

Classi, IDS & Divs

Un'ultima cosa da aggiungere a un paio dei nostri documenti HTML è quella di comprendere lezioni, IDS e DIVS in HTML.Come si può ricordare dalla "HTML Hype Part 2: Tag Talk" Blog Post, Classi, IDS e DIVS Play Play I ruoli integrali nel codice HTML.Puoi anche ricordare la nostra discussione riguardo alla differenza tra ID e classi.Gli ID sono utilizzati per indirizzare i singoli elementi, mentre le classi vengono utilizzate per indirizzare più elementi.Il nostro sito Web è semplice, quindi le classi, gli ID e i div non sono necessari.Tuttavia, nel più complesso documenti HTML, tutti sono assolutamente vitale.

Ecco cosa faremo:

1. Daremo gli spettatori del nostro sito web la possibilità di fare clic su un collegamento "Leggi il post Blog successivo" nella parte inferiore delle pagine Web per Blog Post Due e Blog Post 3 (la pagina Web per Blog Post non avrà bisogno di un collegamento,Poiché è il post del blog più recente).Creiamo un tag di ancoraggio per i collegamenti "Leggi successivi post blog" tra i nostri tag di apertura e chiusura del footer.Diciamo che vorremmo come il link "Leggi il prossimo post blog" per avere più spazio tra le sue lettere che c'è spazio tra il "Grazie per aver visitato questo sito di blogging!"Lettere all'interno della nostra apertura e chiusura

Tag nel nostro piè di pagina.Diciamo anche che vorremmo il "Grazie per aver visitato questo sito di blog!"Testo da apparire accanto al post "Leggi il prossimo post del blog" piuttosto che sotto di esso.È qui che le lezioni vengono in soccorso!Invece di mirare il tutto

Tag nei nostri documenti BlogPost2.HTML e BlogPost3.html, possiamo dare ai tag nei piè di pagina dei documenti HTML una classe, quindi indirizzare la classe dei tag in CSS.Ciò farà molto più senso quando modifichiamo i nostri documenti HTML con CSS nella parte 3 di questa serie Blog.

Nota: è importante dare ai nostri tag per queste classi di documenti HTML per distinguerli dagli altri tag che abbiamo in tutti i nostri documenti HTML.Utilizzeremo lo stesso documento CSS per tutti i nostri documenti HTML, quindi le nostre classi informano il browser esattamente quali link vogliamo bersagliare.

Le pagine web per i post del blog 2 e 3, rispettivamente, ora appariranno così:

Il mio sito di blog | Blog 2

Titolo post sul blog 2

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Leggi il prossimo post del blog

Grazie per aver visitato questo sito di blog!

Il mio sito di blog | Blog 3

Titolo post sul blog 3

Ecco dove puoi posizionare tutto il testo che vuoi aggiungere al tuo post sul blog per il giorno.

Leggi il prossimo post del blog

Grazie per aver visitato questo sito di blog!

Avviso che abbiamo chiamato le classi di tag "Readnext".Ancora una volta, useremo questi valori di classe quando rivolgiamo al collegamento in CSS-spostando!

Per familiarizzare con IDS, aggiungeremo un documento ID al nostro documento Index.html.Richiama quel testo che mettiamo nel piè di pagina di ogni singola delle nostre pagine web che dicono: "Grazie per aver visitato questo sito di blogging!"Daremo un ID con un valore di "grazie" al tag nel footer del nostro solo documento index.html.Ciò consentirà di effettuare il testo in quel tag specifico nel nostro documento Index.html diverso dal tag nel piè di pagina del nostro documento BlogPost1.html, il tag nel piè di pagina del nostro documento BlogPost2.HTML e il tag nel piè di paginadel nostro documento BlogPost3.html (e tutti gli altri tag in ognuno dei nostri documenti HTML, per quella materia) quando accendiamo il nostro sito Web con CSS.L'ID differenzia il tag da tutti gli altri tag.

Notare la convenzione di denominazione per i valori "Grazie" e "readnext".La prima lettera della prima parola e seconda parola è capitalizzata.Questa convenzione di denominazione è chiamata carcassa di cammello.

Pagina Web del post del blog 2

Pagina Web del post del blog 3

Sul tag!Sosteneremo una certa porzione del codice nel nostro documento Index.html per aiutarci a capire i tag un po 'meglio.Se si desidera modificare un gruppo di codice in CSS, è molto utile nidificare tutto quel codice all'interno di un tag di apertura e chiusura.Vogliamo modificare l'intero pezzo di codice pari alla sezione del nostro post 1 del Blog.Per fare questo, ne nidiremo tutti in un tag di apertura e chiusura e quindi dare il tag di apertura.

Nota: in genere, i tag richiedono una classe o un ID in documenti HTML più complessi.Questo perché i documenti HTML sono generalmente riempiti con numerosi tag e si devono differenziare tra tali tag in qualche modo.Nel nostro caso, tuttavia, abbiamo solo un tag in tutti e quattro i nostri documenti HTML.Pertanto, possiamo indirizzare se stesso nel nostro documento CSS piuttosto che dargli un ID e di mirare l'ID.Di nuovo, questo farà molto più senso quando intendiamo questa intera sezione di codice in CSS.

Titolo del post sul blog 1

Qui è dove puoi inserire una breve sinossi del tuo post sul blog, se lo desideri

Leggi il post del blog

Il nostro intero documento Index.html:

Il mio sito di blog

Il mio sito di blog

Titolo del post sul blog 1

Qui è dove puoi inserire una breve sinossi del tuo post sul blog, se lo desideri

Leggi il post del blog

Titolo post sul blog 2

Qui è dove puoi inserire una breve sinossi del tuo post sul blog, se lo desideri

Leggi il post del blog

Titolo post sul blog 3

Qui è dove puoi inserire una breve sinossi del tuo post sul blog, se lo desideri

Leggi il post del blog

Grazie per aver visitato questo sito di blog!

C'è molto di più da discutere per quanto riguarda la costruzione del sito. Tuttavia, dobbiamo concludere come di adesso. Detto questo, è possibile utilizzare altre lingue del computer per aggiungere una sezione commenti al tuo sito web di blogging, configurare il tuo sito web per generare automaticamente la data e l'ora dei messaggi del tuo blog, e molto altro ancora.

Cuore di HTML

È stato intensamente fantastico!HTML è così bello e divertente.Così è CSS!CSS è un altro linguaggio informatico che rende il sito web che hai creato tramite HTML più carino.Parlando, unisciti a noi nella parte 3 quando aggiungiamo alcuni styling CSS ai nostri documenti HTML per personalizzare un po 'le nostre pagine Web.Sono entusiasta di riunire con te allora!

Scritto da Hostwinds Team  /  dicembre 23, 2018