introduzione
Nozioni di base sul linguaggio di programmazione
1 Informazioni sul linguaggio html
2 Creazione di un sito web
3 Disposizioni fondamentali
4 Struttura del documento
5 Tag del corpo del documento
Descrizione della creazione del sito
2 Grafica all'interno di un documento
3 Aggiungere stili a un documento
4 Ottimizzazione della grafica per il web
Algoritmo per il lavoro pratico
1 Preparazione
2 Realizzazione del sito web “Maestro in Elaborazione Digitale dell'Informazione”
Conclusione
Elenco della letteratura usata
Applicazione
introduzioneNell'era della tecnologia digitale e dell'informatizzazione di massa, Internet è diventata parte integrante della nostra vita e la programmazione e il design web sono una professione prestigiosa e ricercata. Dopotutto, Internet non può esistere da sola e qualcuno deve creare pagine Internet, aggiornare i siti ogni giorno e anche ogni ora in modo che l'utente abbia sempre accesso a informazioni aggiornate e verificate in una forma a lui comprensibile. Pertanto, la questione della programmazione e del design web è molto rilevante. Pertanto, l'argomento del mio lavoro è legato alla creazione di un sito web nel linguaggio di programmazione HTML e ai programmi con cui è possibile scrivere pagine web. Allego un sito web al mio lavoro come esempio di cosa si può creare se si conosce il linguaggio di programmazione HTML.
Oggetto - sito web. Oggetto: programmazione di siti Web in HTML.
Lo scopo del lavoro è studiare il linguaggio di programmazione HTML.
Rivelare le informazioni di base sulla lingua;
Considera il processo di creazione di un sito web;
Crea un sito web basato sull'algoritmo sviluppato.
Struttura: l'opera si compone di un'introduzione, tre capitoli, una conclusione e un elenco di riferimenti bibliografici.
1. Informazioni di base sul linguaggio di programmazione.1 Informazioni sul linguaggio htmlText Markup Language (HTML) è un linguaggio standard progettato per la creazione di documenti ipertestuali nell'ambiente WEB. I documenti HTML possono essere visualizzati da diversi tipi di browser WEB. Quando un documento viene creato utilizzando HTML, un browser WEB può interpretare l'HTML per evidenziare i vari elementi del documento ed elaborarli prima. L'utilizzo di HTML consente di formattare i documenti da presentare utilizzando caratteri, linee e altri elementi grafici su qualsiasi software di visualizzazione WEB.
La maggior parte dei documenti presenta elementi standard come intestazioni, paragrafi o elenchi. Utilizzando i tag HTML, è possibile designare questi elementi, fornendo ai browser WEB le informazioni minime per visualizzare questi elementi, pur mantenendo la struttura generale e la completezza informativa dei documenti. Tutto ciò che serve per leggere un documento HTML è un browser WEB, che interpreta i tag HTML e visualizza il documento sullo schermo nella forma fornita dall'autore.
Nella maggior parte dei casi, l'autore del documento determina rigorosamente l'aspetto del documento. Nel caso dell'HTML, il lettore, in base alle capacità del browser WEB, può, in una certa misura, controllare l'aspetto del documento (ma non il suo contenuto). L'HTML consente di contrassegnare dove deve apparire un'intestazione o un paragrafo in un documento utilizzando un tag HTML e quindi consente al browser WEB di interpretare tali tag. Ad esempio, un browser WEB può riconoscere l'inizio di un tag di paragrafo e presentare il documento nella forma desiderata, mentre un altro non ha questa capacità e presenta il documento su una riga. Gli utenti di alcuni browser WEB hanno anche la possibilità di personalizzare la dimensione e il tipo di carattere, il colore e altri parametri che influenzano la visualizzazione del documento. I tag possono essere suddivisi in due categorie:
Tag che determinano come il corpo del documento nel suo insieme verrà visualizzato dal browser WEB.
Tag che descrivono le proprietà generali del documento, come il titolo o l'autore del documento.
Il vantaggio principale dell'HTML è che il documento può essere visualizzato su vari tipi di browser WEB e su varie piattaforme.
i documenti possono essere creati utilizzando qualsiasi editor di testo o editor e convertitori HTML specializzati. La scelta dell'editor che verrà utilizzato per creare documenti HTML dipende esclusivamente dalla comodità e dalle preferenze personali di ciascun autore.
Ad esempio, gli editor HTML, come Netscape Navigator Gold di Netscape, consentono di creare documenti graficamente utilizzando la tecnologia WYSIWYG (What You See Is What You Get). D'altra parte, la maggior parte degli strumenti tradizionali per la creazione di documenti dispongono di convertitori che consentono di convertire i documenti in formato HTML.
Tutti i tag HTML iniziano con "" (parentesi angolare chiusa). In genere, c'è un tag di inizio e un tag di fine. Ad esempio, ecco i tag del titolo che definiscono il testo situato all'interno dei tag di inizio e fine e descrivono il titolo del documento; le maiuscole e minuscole non sono importanti quando si inserisce il testo:
Titolo del documento o Titolo del documento.
Il tag di fine ha lo stesso aspetto del tag di inizio e differisce da esso per una barra prima del testo tra parentesi angolari. In questo esempio, il tag indica al browser WEB di utilizzare il formato del titolo e il tag indica la fine del testo dell'intestazione.
Alcuni tag come
(tag che definisce un paragrafo) non richiedono un tag di fine, ma il suo utilizzo conferisce al testo sorgente del documento una migliore leggibilità e struttura.
Attenzione! Spazi aggiuntivi, tabulazioni e ritorni a capo aggiunti al testo sorgente di un documento HTML per una migliore leggibilità verranno ignorati dal browser WEB durante l'interpretazione del documento. Un documento HTML può includere gli elementi sopra indicati solo se inseriti all'interno di tag.
Quando un browser WEB riceve un documento, determina come il documento deve essere interpretato. Il primo tag che appare nel documento deve essere . Questo tag indica al browser WEB che il tuo documento è scritto utilizzando HTML. Un documento HTML minimo sarebbe simile a questo:
Corpo del documento...
La parte di intestazione del documento. Il tag document head dovrebbe essere utilizzato immediatamente dopo il tag e in nessun altro punto del corpo del documento. Questo tag rappresenta una descrizione generale del documento. Evitare di inserire testo all'interno del file . Il tag di inizio viene posizionato immediatamente prima del tag e degli altri tag che descrivono il documento, mentre il tag di fine viene posizionato immediatamente dopo la fine della descrizione del documento. Per esempio:
Un elenco di dipendenti
Titolo del documento. La maggior parte dei browser WEB visualizza il contenuto del tag nella barra del titolo della finestra contenente il documento e nel file dei segnalibri, se supportato dal browser WEB. Il titolo, delimitato dai tag e, viene inserito all'interno dei tag -, come mostrato nell'esempio sopra. Il titolo del documento non viene visualizzato quando il documento stesso viene visualizzato nella finestra.
I tag del corpo del documento identificano i componenti del documento HTML visualizzato nella finestra. Il corpo del documento può contenere collegamenti ad altri documenti, testo e altre informazioni formattate.
Corpo del documento. Il corpo del documento deve trovarsi tra i tag e . Questa è la parte del documento che viene visualizzata come testo e informazioni grafiche (semantiche) del documento.
Livelli di intestazione. Quando viene scritto un documento HTML, il testo viene strutturalmente suddiviso in solo testo, intestazioni di parti di testo, intestazioni di livello superiore, ecc. Il primo livello di titoli (il più grande) è indicato dal numero 1, il successivo - 2, ecc. La maggior parte dei browser supporta l'interpretazione di sei livelli di intestazioni, assegnando a ciascuno il proprio stile. Le intestazioni superiori al livello sei non sono standard e potrebbero non essere supportate dal browser. L'intestazione di livello superiore ha l'attributo "1". La sintassi dell'intestazione di livello 1 è la seguente:
Intestazione di primo livello
Le intestazioni di un altro livello possono generalmente essere rappresentate come segue:
Intestazione di livello X, x è un numero da 1 a 6 che determina il livello dell'intestazione.
Etichetta di paragrafo
A differenza della maggior parte degli elaboratori di testi, i ritorni a capo vengono generalmente ignorati in un documento HTML. Un'interruzione di paragrafo fisica può essere posizionata ovunque nel testo di origine del documento (per facilitarne la lettura). Tuttavia, il browser separa i paragrafi solo se è presente un tag
Se non separi i paragrafi con il tag
Il tuo documento apparirà come un unico grande paragrafo.
Parametri tag aggiuntivi
Consente di allineare un paragrafo rispettivamente a sinistra, al centro e a destra.
Centratura degli elementi del documento. Puoi centrare tutti gli elementi del documento nella finestra del browser. Puoi usare il tag per questo.
Tutti gli elementi tra i tag saranno al centro della finestra. Tag di riformattazione Tag di riformattazione Consente di presentare il testo con una formattazione specifica sullo schermo. Il testo preformattato termina con un tag di fine. All'interno del testo preformattato è consentito utilizzare:
a) avanzamento riga
b) caratteri di tabulazione (sposta di 8 caratteri a destra)
c) carattere sproporzionato installato dal browser.
L'uso dei tag di formattazione dei paragrafi, come o , verrà ignorato dal browser se inserito tra i tag
Elenco dei gruppi
Elenco del gruppo 6-M-11
Questo elenco contiene cognomi, nomi e patronimici.
L'elenco può essere utilizzato solo per scopi ufficiali.
Questo è ciò che vedrai sullo schermo del tuo browser:
Attenzione! L'intestazione "Elenco gruppi" non viene visualizzata dal browser come parte del documento. Apparirà nella barra del titolo della finestra del browser.
Interruzione di linea
. Etichetta
notifica al browser un'interruzione di riga. Il miglior esempio di utilizzo di questo tag è in un indirizzo formattato o in qualsiasi altra sequenza di righe in cui il browser deve visualizzarle una sotto l'altra. Per esempio:
Alexey Yartsev
Autostrada Dmitrov,
9B, ufficio 326
Un parametro aggiuntivo consente di espandere le funzionalità del tag
.
Questa opzione consente non solo di eseguire un avanzamento riga, ma di posizionare la riga successiva a partire dal bordo sinistro (sinistra), destro (destra) o da entrambi (tutti) della finestra del browser. Ad esempio, se accanto al testo a sinistra è presente un'immagine, puoi utilizzare il tag
per spostare il testo sotto l'immagine:
Come puoi vedere, questo diagramma mostra la connessione
Collegamenti a punti all'interno di un documento. Puoi collegarti a diverse aree o sezioni dello stesso documento utilizzando uno speciale marcatore nascosto per quelle sezioni. Ciò ti consente di spostarti rapidamente da una sezione all'altra all'interno di un documento senza scorrere lo schermo. Non appena si fa clic su un collegamento, il browser ti porterà alla sezione specificata del documento e la riga contenente l'indicatore di sezione (solitamente la prima riga della sezione o l'intestazione della sezione) verrà posizionata sulla prima riga di la finestra del browser (se questa riga non è già presente sulla schermata del browser).
Crea un indicatore di sezione. La sintassi per questo marcatore è la seguente:
Testo che apparirà sulla prima riga
Testo
Per esempio:
Elenco delle sezioni
- Sezione 1
- Sezione 2
Sezione 1
Testo della sezione 1
Sezione 2
Testo della sezione 2
Il simbolo "#ex1" indica al tuo browser di cercare un marcatore chiamato "ex1" in questo documento HTML.
Quando l'utente clicca sulla riga "Sezione 1", il browser andrà direttamente alla Sezione 1.
Una delle caratteristiche più interessanti del Web è la possibilità di includere collegamenti a grafici e altri tipi di dati in un documento HTML. Questo viene fatto utilizzando un tag . L'utilizzo di questo tag può migliorare significativamente l'aspetto e la funzionalità dei documenti.
Esistono due modi per utilizzare la grafica nei documenti HTML. Il primo è l'incorporamento di immagini grafiche nel documento, che consente all'utente di vedere le immagini direttamente nel contesto di altri elementi del documento. Questa è la tecnica più utilizzata nella progettazione dei documenti, a volte chiamata "immagine in linea". Sintassi dei tag:
Descriviamo gli elementi della sintassi del tag::
Un parametro obbligatorio che ha la stessa sintassi di un URL standard. Questo URL indica al browser dove si trova l'immagine. Il disegno deve essere memorizzato in un formato grafico supportato dal browser. Oggi i formati GIF e JPG sono supportati dalla maggior parte dei browser.="text":
Questo elemento facoltativo specifica il testo che verrà visualizzato in un browser che non supporta la visualizzazione grafica o con lo scambio di immagini disabilitato. In genere, si tratta di una breve descrizione dell'immagine che l'utente potrebbe o sarà in grado di vedere sullo schermo. Se questo parametro è assente, al posto dell'immagine, la maggior parte dei browser visualizza un pittogramma (icona) che, quando attivato, l'utente può vedere l'immagine. Il tag ALT è consigliato se gli utenti utilizzano un browser che non supporta la modalità grafica, come Lynx.=n1:
Questo parametro facoltativo viene utilizzato per specificare l'altezza dell'immagine in pixel. Se questo parametro non è specificato, viene utilizzata l'altezza originale dell'immagine. Questa opzione ti consente di ridurre o allungare le immagini verticalmente, permettendoti di definire più chiaramente l'aspetto del tuo documento. Alcuni browser, tuttavia, non supportano questa opzione. D'altra parte, la risoluzione dello schermo del tuo client potrebbe essere diversa dalla tua, quindi fai attenzione quando imposti il valore assoluto di un oggetto grafico.=n2:
Anche il parametro è facoltativo, come il precedente. Permette di impostare la larghezza assoluta dell'immagine in pixel.: Questo parametro viene utilizzato per indicare al browser dove posizionare il successivo blocco di testo. Ciò consente di definire più rigorosamente la disposizione degli elementi sullo schermo. Se questa opzione non viene utilizzata, la maggior parte dei browser posiziona l'immagine sul lato sinistro dello schermo e il testo a destra:
Questo parametro indica al browser che questa immagine consente all'utente di eseguire alcune azioni facendo clic su una posizione specifica nell'immagine. Questa funzionalità è un'estensione HTML.
Ecco un esempio di utilizzo di questo tag:
A partire dall'HTML 2.0, il tag sono comparsi parametri aggiuntivi:
Nuove opzioni::
Permette di impostare la dimensione in pixel dello spazio vuoto sopra e sotto l'immagine in modo che il testo non si sovrapponga all'immagine. Ciò è particolarmente importante per le immagini generate dinamicamente, quando è impossibile vedere il documento in anticipo:
Come VSPACE, ma solo in orizzontale.
Immagini di sfondo. La maggior parte dei browser ti consente di includere un'immagine di sfondo nel documento, che verrà matrice e visualizzata sullo sfondo dell'intero documento. Ad alcuni utenti piace la grafica di sfondo, ad altri no. Un motivo discreto e traslucido (carta da parati) di solito è adatto come sfondo per la maggior parte dei documenti.
La descrizione dell'immagine di sfondo è inclusa nel tag BODY e assomiglia a questa:
.
Ciascuno dei parametri determina il colore di un particolare elemento. Descriviamo questi parametri:
Colore di sfondo del documento:
Colore del testo semplice del documento:
Colore del collegamento. Il colore viene specificato come numero a sei cifre in formato esadecimale utilizzando lo schema RGB (Rosso, Verde, Blu). Il colore #000000 è nero e il colore #FFFFFF è bianco. Per esempio:
Questa riga specifica che il colore di sfondo del documento deve essere bianco, il testo deve essere nero e i collegamenti devono essere argento.
Linea orizzontale. Usando il tag, puoi separare il testo con una linea orizzontale.
Formato dell'etichetta:
Parametri dell'etichetta::
Spessore della linea in pixel:
Larghezza della linea in pixel o percentuale della larghezza della finestra del browser.: Posizione sullo schermo (sinistra | centro | destra).: Per impostazione predefinita, la linea viene presentata nella vista 3D con un'ombra. NOSHADE ti consente di presentare una linea semplicemente come una striscia scura monocromatica.
ti consente di utilizzare diversi stili di carattere per evidenziare le informazioni di testo nei tuoi documenti. Ecco un breve elenco di stili supportati dalla maggior parte dei browser: (grassetto) (corsivo) spaziato (scrittore di caratteri - utilizzando caratteri fissi)
Puoi combinare diversi tipi di stili, ad esempio audace e inclinato.
Tabella n. 1: stili di testo di base
La combinazione di stili consente di visualizzare più elementi in una riga con stili diversi, ad esempio:
Vita - è una canzone!
La vita è una canzone!
Attenzione! L'aggiunta di un gran numero di stili e le loro combinazioni rendono il testo difficile da leggere!
Stili aggiuntivi:
grande
· piccolo piccolo)
· sub (interlineare)
· sup (apice)
Tabella n. 2: stili di testo aggiuntivi
Dimensione del font . Puoi modificare la dimensione del carattere utilizzando il tag:
La dimensione del carattere può essere compresa tra 1 e 7. È possibile specificare direttamente la dimensione del carattere con un numero o specificare un offset relativo al valore base (predefinito - 3) in direzione positiva o negativa. Il valore base può essere modificato utilizzando il tag:
Per esempio:
modifica
Cambia il colore del carattere. Puoi cambiare il colore del carattere usando il tag:
