Consigli per la creazione di una pagina HTML

**marcothebest91** · 05-02-2013, 18:04

Salve a tutti, sono nuovo nel campo dell'html e vorrei creare una pagina iniziale per un amico, in HTML. Lui la vorrebbe così:

Ma io, ancora inesperto, ho dato il meglio di me creando questo codice per farlo somigliare il più possibile all'immagine che desiderava:

codice:

<html>
<body>
<div align=center>   <div align=center>

 <div> Benvenuti in questa pagina vasta,
 </div> ma essenziale; di contenuto. <div>
</div> <FONT color="red">  Essa costituisce la struttura del <div>
blog culturale campi</font>di<FONT color="red">terra</font>d<FONT color="red">otranto</font>,  </div>
<FONT color="red"> che ha nei nove pilastri a lato indicati,<div>
la sua portanza. </font> </div>
Essi fungeranno da capitoli-contenitori <div>
del blog, e tutti gli atrgomenti trattati </div>
troveranno collocazione in ordine <div>
temporale , nei pilastri pertinenti,</div>
formando la struttura del blog <div>
 <FONT color="red">campi</font>di<FONT color="red">terra</font>d<FONT color="red">otranto.</font>  </div>
<FONT color="red"> Il sito ha nel prof. Guido Pagliara <div>
il coordinatore del blog.</font> </div>
il tutto, oggi è in "costruzione". </BIG> </P> </font>
<body style="background-color:POWDERBLUE">
<div>
<div align=center>  

 







</div>


</body>
</html>

Il problama è che non riesco a mettere quegli ovali all'estrema destra, mi sballa tutto e non viene fluido. Cosa potrei fare? C'è qualche guida a riguardo? Se volete posso darvi il sito di prova dove c'è il risultato di quel codice, in modo da farvi avere un'idea. Non credo sia spam poiché non c'è nient'altro in quel sito, lo uso appunto come prova dei codici html

Questo è il link:

http://claudiobellanti.altervista.org/PerLink.html

come vedete non si riesce a capire più nulla, e vorrei risolvere questa situazione. Potete consigliarmi qualcosa?

P.s. ciascun ovale avrà un collegamento link per delle pagine di un blog, ecco perché le vorrei all'estrema destra, e in colonna

Grazie in anticipo!

**ratte** · 05-02-2013, 18:48

Ciao!

Ulllahhh... ci sono mille cose da fare... non possiamo mica dirti tutto noi

...costruisci, prima di tutto, 2 differenti colonne e poi mettici dentro tutti i pezzi... ti aiuterà anche in futuro con "i pezzi" che aggiungerai alla tua pagina.

o/ !

**Prill** · 05-02-2013, 19:27

Riparti da qui (modifica gli indirizzi delle immagini):

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>

<style type="text/css">
<!--
body {
	background-color:#b0e0e6;
}
#container {
	width:800px;
	margin:0 auto;
}
img {border:0}
#content {
	width:650px;
	float:left;
	font-size:24px;
	text-align:center;
}
#content span{
	color:#ff0000;
}
#menu {
	width:143px;
	float:right;
}
ul {
	margin:0;
	padding:0;
	list-style-type:none;
}
#footer {
	clear:both;
	text-align:center
}
-->
</style>
</head>
<body>
<div id="container">
	<div id="content">
	 <div>[img]PerLink_files/e6lkpsG.png[/img]</div>
		<div>Benvenuti in questa pagina vasta, 
 ma essenziale; di contenuto.  <span> Essa costituisce la struttura del</span>
		

		<span>blog culturale campi</span>di<span>terra</span>d<span>otranto</span>,[/b]  

<span> che ha nei nove pilastri a lato indicati,</span>

<span>la sua portanza. </span> 

Essi fungeranno da capitoli-contenitori 

del blog, e tutti gli atrgomenti trattati 

troveranno collocazione in ordine 

temporale , nei pilastri pertinenti,

formando la struttura del blog 

 <span>campi</span>di<span>terra</span>d<span>otranto.</span>  

<span> Il sito ha nel prof. Guido Pagliara </span>
<span>
il coordinatore del blog.</span> 

il tutto, oggi è in "costruzione".</div>
</div>
 <div id="menu">
	 <ul>[*][img]PerLink_files/LyzJXR0.png[/img]
	[*][img]PerLink_files/KYcguzT.png[/img][*][img]PerLink_files/K0i3UH6.png[/img][*][img]PerLink_files/3me3QqY.png[/img][*][img]PerLink_files/dSvxdoK.png[/img][*][img]PerLink_files/uN2F25S.png[/img][/list]
	</div>
 <div id="footer">[img]PerLink_files/3L0s6dh.png[/img]</div>
</div>
</body>
</html>

inserito un doctype, il tag title, create due colonne, le immagini ovali che rappresentano il tuo menu sono inserite in un elenco, tolti un po' di tag font. Studiati bene il codice

**marcothebest91** · 06-02-2013, 20:08

Originariamente inviato da ratte
Ciao!

Ulllahhh... ci sono mille cose da fare... non possiamo mica dirti tutto noi

...costruisci, prima di tutto, 2 differenti colonne e poi mettici dentro tutti i pezzi... ti aiuterà anche in futuro con "i pezzi" che aggiungerai alla tua pagina.

o/ !

Quello che mi avete detto in 2 può bastare e avanzare

Per conto mio, quando ancora Prill non aveva risposto, mi sono informato sui tag per costruire le due colonne e stavo facendo diverse prove, devo dire che esce tutto ordinato! L'unico problema è che quando alla colonna due cercavo di inserire una frase al centro, mettendo

codice:

<tb align="center" valign="top">PROVA</tb>

La parola "prova" è inserita al top, quindi in alto, ma non al centro! C'è per caso qualche errore? (Questo non riguarda la pagina HTML, visto che mi ha aiutato Prill, è giusto per conoscenza personale

)

Originariamente inviato da Prill
Riparti da qui (modifica gli indirizzi delle immagini):

inserito un doctype, il tag title, create due colonne, le immagini ovali che rappresentano il tuo menu sono inserite in un elenco, tolti un po' di tag font. Studiati bene il codice

Ti ringrazio tantissimo! Ho davvero tanto da imparare, mi conviene, prima di prendere un impegno, informarmi per bene ed imparare almeno le basi

Ho sostituito i link, come puoi vedere tu stesso:

http://cranberryforum.altervista.org/prova.html

Ed è venuto molto bene

Sto prendendo un po' confidenza, ho sostituito alcuni codici rendendo il testo a mio piacimento, andando a capo-rigo quando desideravo e ordinando il tutto...ho una domanda: come si vede dalla pagina, il logo che si trova nel footer, non è in linea con il resto del testo. C'è un modo per renderlo uniforme? Grazie

**ratte** · 07-02-2013, 12:46

ahhh... bene 8)

Nonono! Grazie a te Marco! Il fatto che tu ti "sprechi" a ringraziare è molto importante per me e credoa nche per tutti gli altri che danno suggerimenti su questo forum.
Ogni tanto penso "Ma chimmeloffaffà... arrangiatevi tutti...." poi, ogni tanto qualcuno posta dei ringraziamenti... questo è il motore che fa si che qui trovi consigli 8)

No! Non riseco ad aprire il tuo link... "pagina non trovata"... correggilo! Sono sicuro che poi sistemiamo anche l'immagine 8)

**marcothebest91** · 07-02-2013, 14:13

Originariamente inviato da ratte
ahhh... bene 8)

Nonono! Grazie a te Marco! Il fatto che tu ti "sprechi" a ringraziare è molto importante per me e credoa nche per tutti gli altri che danno suggerimenti su questo forum.
Ogni tanto penso "Ma chimmeloffaffà... arrangiatevi tutti...." poi, ogni tanto qualcuno posta dei ringraziamenti... questo è il motore che fa si che qui trovi consigli 8)

No! Non riseco ad aprire il tuo link... "pagina non trovata"... correggilo! Sono sicuro che poi sistemiamo anche l'immagine 8)

In realtà penso che un "grazie" non basti mai, ma a quanto vedo è il pensiero che conta

Purtroppo ho fatto una gaffe, perché ho praticamente invertito le richieste di quando si clicca su "Insert Hyperlink", inserendo al testo che uscirà, l'URL di reindirizzamento, e all'URL, il testo

Ora ho sistemato, ecco qui

Prova.html

**ratte** · 07-02-2013, 14:26

Ahhhh! Molto bene ancora!

Ho rivisto la tua pagina che ora è molto + ordinata e visto il problema 8)
Eh si eh! Ha sempre ragione il browser... la tua immagine è centrata rispetto alla pagina, non rispetto alla colonna di sx... abbiamo già risolto:
-> o dai lla tua immagine un "margin-right: [tot]px;" finchè non si centra
-> o la inserisci cosi come è nella stessa colonna di sx
-> o (sempre se vuoi mantenere il tuo footer) gli dai:

codice:

#footer {
clear: both;
text-align: center;
width: 650px;
padding-right:143px;
margin: 0 auto;
}

in questo modo si allinea a content e ti resta utile per altro che vorrai inserirci 8)

**marcothebest91** · 07-02-2013, 15:30

Originariamente inviato da ratte
Ahhhh! Molto bene ancora!

Ho rivisto la tua pagina che ora è molto + ordinata e visto il problema 8)
Eh si eh! Ha sempre ragione il browser... la tua immagine è centrata rispetto alla pagina, non rispetto alla colonna di sx... abbiamo già risolto:
-> o dai lla tua immagine un "margin-right: [tot]px;" finchè non si centra
-> o la inserisci cosi come è nella stessa colonna di sx
-> o (sempre se vuoi mantenere il tuo footer) gli dai:

codice:

#footer {
clear: both;
text-align: center;
width: 650px;
padding-right:143px;
margin: 0 auto;
}

in questo modo si allinea a content e ti resta utile per altro che vorrai inserirci 8)

Ho optato per l'ultima via, mi sembrava più semplice da realizzare! Ora è tutto perfetto (se vuoi puoi controllare tu stesso :P) ed è solo grazie al vostro aiuto! Purtroppo non intendendomi di HTML non potrò restituire il favore nel caso abbiate qualche problema, perciò credo che posso solo ringraziarvi

Per ora ho realizzato ciò che mi serviva, nel caso abbia altri problemi sono sicuro di poter contare sul vostro aiuto ^^

Discussione: Consigli per la creazione di una pagina HTML

Strumenti discussione

Ricerca discussione

Visualizza

Consigli per la creazione di una pagina HTML

Permessi di invio