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.1 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.1

di: Hostwinds Team  /  dicembre 21, 2018


Per cominciare, una confessione canida o qualcosa di professionale e di classe? Candida confessione è: sono così entusiasta di questa serie di blog. Mi sento come se avessi un intero estuario della farfalla nel mio stomaco! Adoro lo sviluppo e la codifica del software, ed è stato il mio sogno per un po 'di tempo per insegnare un incantevole pubblico come te come creare una base molto semplice (enfasi sul sito web "di base") da zero. Eccoci qui! Puoi essere tutti i miei piccoli porcellini cavia come apprendiamo passo dopo passo come generare documenti HTML di base e documenti CSS (e potenzialmente molto di più!), Quindi collegali tutti insieme, creando così il nostro sito web. Questo non sarà solo un sito web medio su Tumbling Kittens. No, non lo farà. In effetti, perché il blogging è, poiché i bambini dicono in questi giorni, "fantastico su tutti i livelli", creeremo insieme un sito di blog! Sarà, dato che quei bambini ancora una volta dicono, "Dope". Non c'è tempo come il presente per iniziare! I documenti HTML sono dove iniziare a creare un sito Web, poiché HTML costituisce la base del tuo sito web. È divertente! Prima di creare un documento e il codice HTML con il linguaggio di programmazione del computer HTML, ecco alcune cose per conoscere l'HTML stesso:

Cos'è l'HTML?

Hypertext Markup Language è la parte più semplice della composizione di un sito web da zero. La seguente citazione da un precedente post del blog su argomenti HTML spiega cosa significa ogni parte di "Hypertext Markup Language":

"La 'Ipertesto' in HTML si riferisce al testo che fa riferimento a testi diversi da se stesso.

Il "Markup" In HTML sta per Kinda cosa suona. HTML è una lingua che contrassegna una pagina Web con le indicazioni su ciò che il sito Web verrà visualizzato agli spettatori. Questa direzione si presenta sotto forma di cose come tag che compongono la lingua che è HTML. Il markup rappresenta anche il fatto che gli spettatori del sito Web non possono vedere il codice scritto in background per creare il sito web.

Il 'Linguaggio' In HTML spiega che HTML è un linguaggio del computer e ha sintassi e regole come il francese o lo spagnolo. "

Consiglio vivamente di dare un'occhiata a quel post del blog HTML prima di procedere con questo tutorial perché 1. Ti darà più contesto HTML per sentirti più fiducioso durante la creazione di un sito, e 2. Sono spudoratamente collegando il post perché è come uno dei miei mieiAltri bambini Blog, e sono prevenuto della sua perfezione.Il link qui sotto ti porterà a questo blog baby parlo di:

Hostwinds HTML Hype

AVVISO SPOILER: inserirò spudoratamente diversi post di blog pubblicati in precedenza nel corso di questo post perché 1. Sono pertinenti e possono fungere da cheat sheet per te mentre apprendiamo le complesse procedure coinvolte nella creazione di un sito web e 2. Loro sono tutti fantastici e vale la pena collegarli senza vergogna.

Le basi

Ok, ora che sentiamo tutto accogliente sapendo quale è l'HTML, il tempo di installare il documento HTML. Inizieremo con la homepage del tuo sito web, altrimenti noto come pagina di destinazione del sito web. Apriremo un file in qualsiasi editor di testo che preferisci. Raccomando Blocco Notepad ++ Se stai iniziando e il testo sublime se sei un po 'familiare con lo sviluppo / la codifica del software. Le migliori notizie su questi editor di testo sono che sono entrambi gratuiti!

cPanel file manager offre anche un editor di testo. A proposito di cPanel, sentiti libero di fare riferimento al seguente post del blog intitolato "Tutorial di Hostwinds: come impostare i file del sito web in cPanel File Manager". Esegue ogni fase della creazione o del caricamento di file di siti Web come i documenti HTML e CSS nel file manager cPanel:

Tutorial di Hostwinds: come impostare i file del sito web in cPanel File Manager

Inoltre, uno dei bei esperti di front-line dell'Hostwinds, Abigail, ha scritto una brillante guida di Knowledge Base sulla creazione di una homepage per il tuo sito web.All'interno di questa guida, spiega Abigail, "Se si utilizza un pannello di controllo come CPANEL, aggiungere questi file alla directory Public_HTML o alla root del documento per il tuo nome di dominio.Se non si utilizza un pannello di controllo, molto probabilmente aggiungere questi file a Your / Var / www / html, sebbene la posizione della root del documento del tuo dominio possa variare. "

Il file HTML che si crea all'interno del tuo editor di testo viene generalmente salvato come "index.html". Perché? La Guida Abigail si rivolge a questa domanda esatta: "A modo in cui Apache è impostato, nella cartella di dominio (o nella cartella di dominio (Public_html), legge il tuo DireadNex come indice.htm, index.html o index.php se questi file esistono e servono questo file come la homepage della tua cartella. Se non ci sono uno di questi file, mostrerà un elenco di indici. È possibile modificare l'indice della directory attraverso il tuo file .htaccess. " Non prescindere vergognosamente di più, ma consiglio vivamente di rivedere sia questa guida e il post del blog riguardante l'archiviazione dei file in cPanel prima di continuare ulteriormente perché ti fornirà le note di questo articolo del blog e alcune informazioni extra sull'HTML che non siamo in grado di toccare. Clicca sotto per dare un'occhiata:

Come creare una landing page personalizzata utilizzando HTML e CSS

Un'altra citazione dalla guida di Abigail prima di andare avanti:

"I tag sono come identifichiamo elementi diversi nel nostro documento HTML e generalmente arriveranno in coppia. La maggior parte dei tag avrà un avvio \ <> e una fine \, alcuni tag non avranno il secondo tag e terminerà con A /> Questo è chiamato "Elemento vuoto", visto principalmente su link e immagini. "

Tag

Permettimi di elaborare una parte vitale di HTML - tag. Dicono al browser come si desidera organizzare il tuo sito web. Come accentuato Abigail, generalmente, i tag sono completi con un tag di apertura e chiusura. Il tag di apertura indica al computer a cui si desidera organizzare il contenuto tra esso e il tag di chiusura in un certo modo. Ad esempio, il testo entro il seguente tag di paragrafo (o tag P) indica al computer in cui si desidera visualizzare un paragrafo di testo in qualche modo sul tuo sito web:

Qui è dove aggiungeresti paragrafi di testo al tuo sito web.

Alcuni tag sono auto-terminati.Ciò significa che non richiedono un tag di chiusura.Un esempio di tag auto-terminazione è il tag Break, che denota lo spazio tra due elementi sulla tua pagina web.

Per garantire che questo post del blog non è finché il Titanic, ho preparato un post del blog esclusivamente sui tag HTML. Se non sei sicuro dello scopo di ogni tag, utilizziamo per creare il nostro documento HTML, fare clic sul collegamento qui sotto per visualizzare il tuo foglio trucco tag HTML:

Hostwinds HTML Hype Part 2: Tag Talk

Soddisfare

"Contenuto" è ciò che si trova all'interno dei tag di apertura e chiusura. Il contenuto è ciò che vuoi che gli utenti vedano sul sito web.

Il contenuto all'interno dei tag di paragrafo sopra, ad esempio, è:

"Qui è dove aggiungeresti paragrafi di testo al tuo sito web."

Elemento

Un "elemento" è l'intera linea di codice, incluso il tag di apertura, il tag di chiusura (se il tag ha un tag di chiusura, che non tutti) e il contenuto. In altre parole, l'elemento è l'intero Shebang. Nel nostro esempio sopra, l'elemento è:

Qui è dove aggiungeresti paragrafi di testo al tuo sito web.

Dolce, punto uno per scrivere un documento HTML sta impostandolo i tag verticali.Ogni volta che si crea un documento HTML, ti consigliamo di configurarlo con un primo modello.

Questi sono i tag più importanti perché impostano il tuo documento.

Il tag denota la versione di HTML che stiamo utilizzando. È importante posizionarlo nella parte superiore di ogni documento HTML che crei.

Qualsiasi cosa tra i tag e i tag denota le informazioni pertinenti al sito web.

Qualsiasi cosa tra i tag è qualcosa che non vuoi essere visto sul sito, ma le informazioni devono essere comunicate al browser per il sito Web per funzionare correttamente. Ad esempio, questo è dove vorresti mettere la linea di codice che collega il documento HTML a un documento CSS. I tag che forniscono al browser informazioni importanti sulla struttura della pagina web sono chiamate "meta tag".

Un altro esempio di un meta tag è il tag. Questo tag indica il set specifico dei caratteri consentito per essere utilizzato per il tuo sito web. I caratteri che comprendono il set di caratteri UTF-8 copre quasi tutti i personaggi che si potevano pensare.

Qualsiasi cosa tra i tag è destinata ad essere vista sulla pagina del tuo sito web (o, in altre parole, il corpo del tuo sito web).

Qualsiasi cosa tra i tag è ciò che vuoi la scheda sulla parte superiore della finestra del tuo sito web da dire.

Commenti

I commenti forniscono descrizioni per determinati tag o elementi che aiutano te o gli altri a vedere o modificare il tuo codice in futuro. I commenti sono per gli sviluppatori del sito Web e chiariscono le cose per te quando si digita il codice pari al tuo sito web. Nella mia esperienza, è imperativo commentare il più possibile il più possibile in modo da ricordare ciò che ogni pezzo di codice è perché tu o qualcun altro torni indietro e modificare il tuo codice in seguito.

Esempi di commenti che potrebbero essere inseriti nel tuo documento HTML:

Preferenze personali: mi piace inserire commenti in ogni area della mia pagina web per rendere più facile identificare ogni sezione. Un esempio di ciò è mostrato di seguito:

Le mie foto il mio curriculum sulla homepage di me hostwinds '

Il pezzo di codice sopra mi ha solo ricordato di inserirlo molto IMPORTANTE NOTIFICA: Quando il pezzo del codice che inserisco in questi post del blog è troppo lungo per adattarsi alla finestra, una piccola barra di scorrimento apparirà nella parte inferiore di tale codice quando si guida il mouse su quella zona. È possibile far scorrere la barra di scorrimento a destra per visualizzare l'intero pezzo di codice. Tenere presente questo in mente durante questo post di blog e parti 2 e 3 di questa serie Blog.

Attributi

Gli attributi sono un po 'più complessi, ma ci stiamo tuffando! Come affermato nel post del blog "Hostwinds HTML Hype Part 2: Tag Talk", l'attributo specifica qualcosa su un elemento.

Di seguito sono riportati alcuni esempi di attributi diversi da ID e classi (vedere il post del blog sui tag HTML se non si è sicuri di cosa siano e / o facciano ID e classi):

1. Il "Href" parte dell'anchor tag è un attributo in quanto specifica a quale file si fa riferimento.

2. Il "Alt" Parte del tag immagine è un attributo in quanto specifica ciò che si desidera visualizzare il testo come segnaposto se, per qualche motivo, l'immagine non è caricato.

3. Un esempio sembra il modo migliore per insegnare ciò che il "bersaglio" Attributo lo fa.Diciamo che hai un tag di ancoraggio nel documento HTML che consente agli utenti del tuo sito di fare clic su un collegamento che li porta alla homepage di hostwinds.

È possibile aggiungere un attributo di destinazione al tag di apertura per informare il browser come si desidera reindirizzare gli utenti al sito di HostWinds. In altre parole, è possibile utilizzare l'attributo di destinazione per scegliere se si desidera aprire il sito nella stessa finestra che stanno visualizzando il tuo sito o in una finestra completamente nuova (scheda AKA).

Dare l'attributo bersaglio il nome (valore AKA) "_self" per indirizzare gli utenti al sito Web di Hostwinds nella stessa finestra che sono attualmente.

Dare l'attributo di destinazione Il nome (AKA Valore) "_Blank" come per così dire per indirizzare gli utenti al sito Web di HostWinds in una nuova finestra (scheda AKA).

Ci sono altri valori che puoi dare al tuo attributo di destinazione, ma hai un'idea!

L'intero documento HTML

Wow, c'erano così tante informazioni così velocemente! Ora che sai molto sull'HTML, impostiamo un semplice documento HTML che includa tutto ciò di cui abbiamo parlato.

Nota: istituiremo il nostro sito web di blogging per emulare il sito web di Blogging Hostawinds.Tuttavia, sarà un sito web di Blogging fondamentale mentre iniziamo e apprendiamo le basi dell'HTML.

Un'altra nota: la mia sorella molto saggia e intelligente è uno sviluppatore web di successo. Mi ha dato il seguente consiglio per quanto riguarda il sito web: ogni volta che vuoi creare un nuovo sito web da zero, prima prova a mappare come vuoi impostarlo / nel modo in cui desideri sembrare su carta. Una volta iniziato a seguire questo consiglio, ho notato che potrei sviluppare siti Web quasi il doppio del digiuno.

Passo 1: Aggiungi una semplice barra di navigazione nella parte superiore della pagina (Generalmente, le barre di navigazione hanno molti collegamenti, ma solo per ora, lo terremo a un collegamento nella barra di navigazione che facciamo):

Il mio sito di blog

Avviso Ho posizionato i tag della barra di navigazione all'interno dei tag del corpo.Come abbiamo discusso prima, ciò garantisce che la barra di navigazione sarà visibile sulla pagina web.Il tag di apertura della barra di navigazione è proprio sotto il tag del corpo di apertura.Ciò garantisce che la nostra barra di navigazione sarà in cima alla pagina.Il tag a destra prima del tag del corpo di chiusura.Come menzionato nel "Hostwinds HTML Hype Parte 2: tag Talk", il tag fa uno spazio tra due elementi.Considerando che vogliamo uno spazio tra la nostra barra di navigazione e il prossimo elemento, abbiamo soffocato un tag tra i due.

Passo 2: Aggiungere l'area in cui i tuoi spettatori possono cliccare per visualizzare il tuo primo post Blog (alias il post più recente post del blog) sotto il tag:

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

Avviso Abbiamo una voce con il nome del Blog Post proprio sopra un'immagine in primo piano per il post sul blog subito sopra la sinossi del post sul blog destra sopra un pulsante che ci porta alla pagina web che creeremo ora per il nostro primo post blog.Il nome del file HTML creeremo per il primo post Blog sarà "BlogPost1.html".Nella parte 2 di questa serie Blog, creeremo altri tre documenti HTML per effettuare tre pagine Web per tre post dei blog ipotetici.Noi chiameremo questi tre documenti HTML "BlogPost1.html", "BlogPost2.html" e "BlogPost3.html".Pertanto, possiamo rivolgerli all'interno dei nostri tag di ancoraggio che circondano i nostri tag dei pulsanti.

AVVISO I tag del pulsante di apertura e chiusura sono annidati tra i tag di ancoraggio di apertura e chiusura.Questo ci consente di fare clic sul pulsante e accedere alla pagina Web che vogliamo arrivare.

Si noti il tag della linea orizzontale nella parte inferiore di questo pezzo di codice.Avremo una linea orizzontale che separamo le tre aree in cui i tuoi spettatori possono fare clic per visualizzare i post del blog 1, 2 e 3. Avremo anche una linea orizzontale che separa il 3 ° post del blog dal piè di pagina.

Percorsi del file: relativo vs. assoluto

I percorsi dei file sono il modo in cui informa il tuo browser su quale file afferrare quando lo fai riferimento in un elemento. È possibile digitare l'intero percorso del file o è possibile abbreviarlo. Un percorso file assoluto è l'intero percorso del file e un percorso di file relativo è una versione abbreviata di questo stesso percorso del file (tuttavia indirizza ancora gli utenti del tuo sito web allo stesso file).

Esempio di un percorso file assoluto:

<img src= “https://www.hostwinds.com/images/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

Esempio di un percorso file relativo:

<img src= “/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

Un sistema fantastico in cui il browser interpreta il percorso del file relativo che si entra nel codice.Ci voleremo un po 'ora, ma non preoccuparti se questo è un po' difficile avvolgere la mente in giro, poiché probabilmente copremo il soggetto in modo più dettagliato in uno dei successivi post del blog.

Passaggio 3: Organizziamo rapidamente un po 'i nostri file. Accedi ai tuoi file dove risiede il tuo documento index.html. Crea una cartella denominata "immagini". Trascina tutte le immagini che desideri utilizzare per il tuo sito web di blog in questa cartella. L'immagine in primo piano per il blog 1, l'immagine in primo piano per il blog 2 e l'immagine in primo piano per il blog 3 ammontano a tre file immagine in totale. Sei libero di nominare i tuoi file di immagine come preferisci, ma per i nostri scopi li chiameremo "your_image_goes_here_1.png", "your_image_goes_here_2.png" e "your_image_goes_here_3.png". Inoltre, per questo tutorial, utilizzeremo varie immagini di Hostwinds per le nostre immagini in primo piano.

Utilizzeremo un percorso di file relativo per tutte le immagini dei nostri siti web.Ora, istruisci i browser di andare all'interno della cartella "Immagini" per afferrare ogni immagine.

Immagine in primo piano del post del blog 1

Il punto e la barra davanti al percorso del file indicano al browser di iniziare dove si trova il file index.html e di immergersi nella cartella "immagini". La barra dopo "immagini" indica al browser di trovare un file all'interno di quella cartella.

Passaggio 4: Aggiungere l'area in cui i tuoi spettatori possono cliccare per visualizzare il secondo post del blog sotto il tag semplicemente copiando il pezzo del codice che abbiamo appena creato per il primo post del blog e incollandolo di seguito.Una volta che è tutto incollato, tutto ciò che dobbiamo fare è cambiare tutto "1" a "2."

Passaggio 5: Aggiungere l'area in cui i tuoi spettatori possono cliccare per visualizzare il terzo post del blog sotto il tag copiando nuovamente il pezzo del codice che abbiamo appena creato per il primo post del blog e incollandolo di seguito.Una volta, incollato, tutto ciò che dobbiamo fare è cambiare tutto "1" a "3."

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

Passaggio 6: Ora siamo pronti ad aggiungere un piè di pagina sotto il tag.Lo renderà semplice per ora e lo doloremo più tardi.

Grazie per aver visitato questo sito di blog!

Passaggio 7: Ho accennato in precedenza che stiamo modellando questo sito web di blog dopo il sito web di blog di Hostwinds. Nota quando visiti https://www.hostwinds.com/blog/ E clicca su una delle immagini in primo piano, sei diretto al post del blog associato a tale immagine in primo piano. Vogliamo che i nostri spettatori del nostro sito web di blog siano in grado di fare la stessa cosa, e saresti sorpreso quanto sia semplice creare questo effetto. Semplicemente (nuovo termine di codifica in arrivo :) NIDO I tag per ogni immagine in primo piano tra un tag di ancoraggio di apertura e chiusura (come i tag di ancoraggio che abbiamo utilizzato per il nostro collegamento e pulsanti della barra di navigazione). Riferiremo i nostri documenti "BlogPost1.html" "BlogPost2.html" e "BlogPost2.html" e "BlogPost3.html" nei nostri tag di ancoraggio nello stesso modo in cui abbiamo fatto quando stavamo creando i nostri pulsanti.

Nota i tag di ancoraggio attorno a ciascun tag immagine nel documento dopo aver apportato questa modifica:

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!

Passaggio 8: Dare te stesso un round di applausi! Vai avanti e gioca con il tuo sito web un po '! 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. Quando controlli il tuo sito, fai clic sulle immagini e sui pulsanti per assicurarti che non ci fossero "bug" (tipi di errori o errori) nel tuo codice.

Homepage

La parte 1 di questa serie Blog è completa, gente. Continueremo ad aggiungere un po 'più HTML a questo sito web di blog nella parte 2 di questa serie, e sarà un vero piacere! Non voglio spoiler avviso il resto, quindi concluderemo ora.

Buon HTML

Resta sintonizzato per la parte 2 e mantenere questo foglio cheat perché ci riferiremo. Resta sintonizzato anche per parti 3! Oh, ci sarà, come dicono i bambini, "parti su parti su parti" per questa serie Blog! Prima di saperlo, avremo un sito web molto più complesso in cui possiamo postare blog su. Ci sentiamo presto!

Scritto da Hostwinds Team  /  dicembre 21, 2018