November 14
La grande varietà di layout di pagina Web che si vede in una sessione informale navigazione sul Web è ampia prova della natura altamente configurabile di questi documenti. Due linguaggi di programmazione che consentono questo elevato livello di configurazione sono Hypertext Markup Language (HTML) e fogli di stile a cascata (CSS), che viene applicato all'interno di HTML. Gli sviluppatori Web utilizzano queste lingue per creare, tra gli altri layout di pagina, quello comune, aventi una superficie superiore e barra laterale. Il vantaggio di questa configurazione è il senso di familiarità che conferisce a chi la visualizzazione della pagina.
1 Fare clic su "File", poi "Nuovo" in qualsiasi word processor per creare un nuovo documento.
2 Incolla (o tipo) il seguente pagina Web vuota nel documento:
<Html>
<Body>
</ Body>
</ Html>
3 Digita il codice HTML alla fine di questa fase qualsiasi punto tra il "<body>" e "</ body>" tag. Questo codice crea un'area rettangolare (chiamato "divisione", "div" abbreviato) con testo nella parte superiore della pagina.
<Div style = "border-style: solido">
<P>
Questo è il top!
</ P>
</ Div>
4 Salvare il documento come tipo "Testo normale" e con qualsiasi nome che termina con ".htm", così Finestra apre il documento con il programma corretto (un browser Web).
5 Fare doppio clic su (in Windows Explorer) il file appena salvato. Il browser visualizzerà il testo delimitato ( "Questo è il top!").
6 Tipo, nel documento aperto nel word processor, la seguente riga al posto della linea che inizia con "<div style":
<Div style = "position: absolute; sinistra: 200px; top: 30px; border-style: solido">
Questa linea posiziona il rettangolo tenendo il testo in un luogo specifico sullo schermo del tuo browser. Con la creazione di altri due div e specificando le loro posizioni sullo schermo, è possibile creare un layout di pagina con una superficie superiore e una barra laterale di sinistra. Le istruzioni rimanenti mostrano come creare un tale layout.
7 Incollare il seguente codice HTML dopo il "</ div>" dichiarazione di cui sopra. Questo codice crea il rettangolo nel corpo del documento (vicino al centro dello schermo del browser).
<Div style = "position: absolute; sinistra: 200px; top: 300px; border-style: solido">
<P> Questo è il corpo principale!
</ P>
</ Div>
8 Incollare il seguente codice HTML, che costituisce la barra laterale sinistra, dopo il tag "</ div>" dal passaggio precedente.
<Div style = "position: absolute; sinistra: 20px; top: 300px; border-style: solido">
<P>
Questa è la barra laterale di sinistra!
</ P>
</ Div>
9 Salvare le modifiche al documento premendo "Controllo S", quindi premere "F5" nel browser per aggiornare la pagina Web con le modifiche. Il browser visualizzerà una pagina con una superficie superiore e barra laterale.