Come creare un sito personale

December 26

Non tutto su Internet deve essere di marketing e visibilità - a volte, si vuole solo avere il proprio spazio sul world wide web. Se sei pronto a creare il proprio sito web personale, avrete bisogno di un browser e un editor di testo. Durante la scrittura di un sito web di base non è necessariamente difficile, imparare tutto la sintassi e trucchi per farlo può essere in termini di tempo. Per le nozioni di base su HTML e CSS, guardare in W3Schools.com; per suggerimenti per l'uso di CSS e di design interessanti, visitare CSS-Tricks.com.

istruzione

1 Utilizzare un editor di testo per scrivere il codice HTML e CSS per il sito. L'editor di testo predefinito di Windows è Blocco note, ma molti altri editor di testo libero avere più funzionalità appositamente per l'editing HTML e CSS. Ad esempio, i liberi Notepad ++ editor di colori il codice HTML e CSS durante la digitazione, quindi è facile vedere i tag.

2 Scrivi la struttura di base del tuo sito web. Ogni sito è andare a un aspetto diverso, e come si codifica il vostro sito web dipende da ciò che si desidera assomigliare. La struttura di base di esso sarà simile a questa:

<! DOCTYPE html>
<Html>
<Head>
<Title> Titolo del tuo sito web </ title>
</ Head>

<Body>
Contenuto del tuo sito web.
</ Body>
</ Html>

Il doctype dice il browser del visitatore quale versione di HTML sei usando; la base <! DOCTYPE html> specifica HTML5.

3 Aggiungere un foglio di stile. Mentre un foglio di stile è necessaria solo se si desidera inserire alcuni elementi visivi sulla tua pagina, probabilmente finisce per utilizzare uno sul vostro sito alla fine. Posizionare il foglio di stile direttamente nell'intestazione del documento con l'aggiunta di questo testo, tra i tag <head> </ head> tag e:

<Tipo di foglio di stile = "text / css">

</ Style>

Mettere tutto il codice CSS tra i due tag di stile. Per CSS di base, utilizzare i tag HTML per lo stile specifico. Per esempio, se si vuole avere uno sfondo nero e testo bianco nella pagina, inserire le seguenti righe all'interno dei tag di stile:

body {
background: # 000000;
colore: #FFFFFF;
}

Per stile di testo come intestazione, inserire la seguente riga all'interno dei tag di stile. Questo influenzerà il testo posto tra i <h1> e </ h1> tag e imposta l'altezza del testo a 30 pixel:

p {font-size: 30px;}

Il Consorzio World Wide Web, o W3C, elenca le variabili per ogni tag HTML e CSS nel sito W3Schools.com.

4 elementi di blocco possono essere utilizzati per posizionare il contenuto del tuo sito. Mentre le tabelle sono il metodo tradizionale per la strutturazione dei contenuti, la codifica tavolo è goffo e generalmente non è raccomandato. elementi div creano blocchi di base di contenuti che possono essere completamente personalizzato tramite CSS. Ad esempio, per inserire una barra laterale a sinistra del contenuto principale del sito, è necessario utilizzare tre elementi div: "container", "sidebar" e "contenuto":

<Div id = "container">
<Div id = "sidebar">
Content Sidebar
</ Div>

<Div id = "content">
Contenuto principale
</ Div>
</ Div>

Gli ID sono gestiti in un foglio di stile attraverso il cancelletto:

contenitore {

In generale, si imposta questo tipo di layout di div da usare larghezze specifiche e galleggianti:

contenitore {

Larghezza: 1000px;}

sidebar {

width: 200px;
float: left;}

contenuto {

width: 800px;}

Per ulteriori informazioni su come creare e gestire questo tipo di configurazione, leggere l'articolo dello sviluppatore Web Jem Turner "creare un layout Tableless (CSS)." (Vedi Risorse)

5 Scrivi la tua contenuti utilizzando i tag HTML. Il contenuto della pagina deve essere collocato tra i tag <body> e </ body> tag. Per esempio, per creare l'intestazione "mio sito", utilizzare questa riga:

<Body>

<H1> Il mio sito web </ h1>

</ Body>

Ci sono sei livelli di intestazione: H1 a H6.

Per creare un paragrafo, racchiudere il testo nei tag <p> e </ p>:

<P> testo </ p>

Mettere i link e le immagini della tua pagina all'interno dei tag di paragrafo. Per includere i collegamenti all'interno delle pagine, utilizzare la <a> e tag </a>:

<a href="Link&lt;/a" rel="nofollow"> http: //www.url.com&quot;> Link & lt; / a>

Per includere le immagini, utilizzare il tag <img>:

<Img src = "http://www.url.com/image.jpg&quot; alt =" un'immagine ">

6 Dopo aver creato le basi del vostro sito, salvare il file con l'estensione ".html", ad esempio "index.html". Quindi aprire il file nel browser per vedere come la pagina appare. Sarà probabilmente necessari diversi tentativi prima che tu sia soddisfatto del tuo sito.

7 Utilizzare questo modello per creare il resto delle pagine del tuo sito. Per dare al vostro sito un senso di coesione, tutte le pagine devono avere gli stessi o simili layout.

8 Se non già li avete impostato, l'acquisto di un piano di sito-hosting e un nome di dominio. Utilizzare un programma di protocollo di trasporto di file (FTP) per caricare i file HTML del tuo sito nella cartella corretta sul server dell'host. Il vostro servizio di hosting fornirà i passi necessari per il caricamento dei file e comunque la gestione del sito.

Consigli e avvertenze

  • Se siete alla ricerca di un servizio web gratuito che gestisce il lavoro per voi, prendere in considerazione Weebly o Google Sites. servizi di blogging, come WordPress.com e Blogger possono essere usati per creare un sito web gratuito che è possibile aggiornare regolarmente.