Hostwinds Tutorial
Cerca risultati per:
Sommario
Come creare una landing page personalizzata utilizzando HTML e CSS
Tag: Web Site
Questa guida imparerà come creare la pagina di base di base 'in costruzione utilizzando HTML e CSS.
Per creare una pagina di destinazione, è necessario disporre di un editor di testo, sia quello fornito nel tuo file manager di CPANEL, il Blocco note ++ o qualsiasi editor di testo di tua scelta funzionerà bene per seguire questa guida.Se si utilizza un pannello di controllo come CPANEL, aggiungerai questi file alla tua 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.
Creazione del file del sito
Iniziamo creando un file index.html e aprilo nell'editor di testo.
Perché indice?
Il modo in cui Apache è configurato, nella cartella di dominio (o nella cartella di dominio (Public_html), legge il tuo Direadindex come indice.htm, index.html o index.php se questi file esistono e servono questo file come homepage della cartella.Se non ci sono uno di questi file, mostrerà un elenco di indici.È possibile modificare il tuo indice della directory attraverso il tuo file .htaccess.
Il tuo HTML è essenzialmente la struttura della pagina del tuo sito web, quindi è necessario assicurarsi che sia impostato correttamente.
Per questo esempio, è necessario identificare lo script, l'intestazione e il corpo HTML.Puoi farlo usando i seguenti "tag"
<html>
<head></head>
<body></body>
</html>
I tag sono come identifichiamo diversi elementi 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 un "elemento vuoto", visto principalmente su link e immagini.
La testa Tag
È qui che si memorizzano i dati che non sono contenuti, come i metadati del sito, il titolo del documento, il set di caratteri, gli stili in linea, i collegamenti di script e altre informazioni Meta.Useremo due tag diversi nella nostra sezione principale:
Tag del titolo: questo tag cambierà ciò che viene visualizzato nella scheda
Tag link: è qui che attaccheresti qualsiasi stile esterno o script.Useremo questo per aggiungere un foglio di stile al nostro sito web
Il tag del corpo
È qui che il contenuto del tuo sito andrà.Se volevamo, saremmo in grado di aggiungere test direttamente.Ad esempio, se aggiungiamo "Hello World!"Nel nostro HTML, sembrerà questo:
<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>
Ecco come apparirà la pagina web dopo aver aggiunto questo codice e aver visitato il tuo nome di dominio con il tuo browser:
Quindi, colleghiamo il foglio di stili nel tuo HTML.Come abbiamo detto sopra, puoi allegare un foglio di stile aggiungendo il collegamento del foglio di stile alla testa del documento HTML.Dopo aver finito, dovrebbe sembrare così:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
</body>
</html>
Aggiungi contenitori e contenuti
Per aiutare a organizzare meglio il tuo contenuto, è possibile utilizzare i tag per specificare oggetti diversi come contenitori, immagini, intestazioni, ecc. Chiamerai questi tag diversi più avanti nel tuo foglio di stile.
Per questo esempio, utilizzerò un contenitore div e il \
e \
tag.
<!DOCTYPE html>
<html>
<head>
<title>Coming Soon</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div>
<h1>This Site is Under Construction</h1>
<p>Content Coming December 2018</p>
</div>
</body>
</html>
Ecco come apparirà la pagina web prima di aggiungerla al foglio di stile:
Aggiungere stile al tuo sito
Crea e modifica il foglio di stili 'css.css'
Ora, creiamo un file .css.Questo dovrebbe corrispondere al nome del file sopra, quindi il nostro esempio è CSS.CSS.È possibile chiamare i diversi elementi che hai etichettato via tag nel documento HTML nel foglio di stile.
In questo esempio, abbiamo 4 elementi diversi: corpo, div, h1 e p. Di seguito, possiamo vedere come è possibile utilizzare questi tag per cambiare lo sfondo, centrarla e modificare il dimensionamento del testo. Dimostreremo anche come aggiungere un'ombra di testo per aiutare con chiarezza.
Ecco il nostro file CSS.css:
body {
background-image:url('background-background-image-blue-sky-1054218.jpg');
background-size: 100%, 100%;
}
div {
font-family: verdana;
color:black;
text-align: center;
margin-top:250px;
}
h1{
text-align:center;
font-size: 75px;
margin:0px;
padding:0px;
text-shadow: 2px 1px 1px grey;
}
p{
font-size: 40px;
text-shadow: 1px 1px 3px lightgrey;
}
Ci sono molti attributi diversi che puoi aggiungere al foglio di stile. In questo articolo, abbiamo appena coperto alcune opzioni di base.
Molte proprietà diverse richiedono una struttura leggermente diversa a seconda di ciò che sta cambiando.
Testa il tuo sito
Ora puoi controllare la tua nuova pagina di destinazione!Se non hai già indicato il tuo dominio al tuo hosting, puoi utilizzare un sito di prova come host.cx o il tuo indirizzo IP dedicato per visualizzare il tuo sito.
Scritto da Hostwinds Team / novembre 24, 2018