Casa / Lavora su Internet / Descrittori di base e loro sintassi HTML. La struttura del documento HTML. Abstract: Il linguaggio html: sistemi di programmazione html, caratteristiche del linguaggio e implementazione del sistema. Scopo, esempi di programmazione dell'applicazione Uno strumento software che riconosce de

Descrittori di base e loro sintassi HTML. La struttura del documento HTML. Abstract: Il linguaggio html: sistemi di programmazione html, caratteristiche del linguaggio e implementazione del sistema. Scopo, esempi di programmazione dell'applicazione Uno strumento software che riconosce de

Come accennato, l'HTML oggi è la base per scrivere qualsiasi pagina web sul World Wide Web. Usando Creazione CSS il codice nel linguaggio HTML sta cambiando radicalmente. Può dire addio al riutilizzo maldestro Tag HTML solo per ottenere l'uno o l'altro effetti visivi. Informazioni su alcuni tag o attributi HTML, come il tag deprecato...

casa

Ordina un sito web e fai affari!

Questa frase può essere ascoltata e vista su molti siti e non è vana!

Sito web è il volto dell'azienda. Ed è il canale di comunicazione più moderno ed efficace con un potenziale consumatore. Solo le funzionalità del sito Internet consentono di utilizzare completamente tutti i metodi di segnalazione messaggio informativo fino all'utente. Le informazioni di testo, audio e video possono essere inviate all'interno di un sito per familiarizzare il consumatore con esse.

Usando Software site, puoi accettare pagamenti, parlare al telefono, mantenere database, inviare e ricevere fax, scambiare Messaggi SMS e fare molte altre cose. Internet moderno un sito Web è un centro informazioni non solo per qualsiasi azienda, ma anche per qualsiasi utente di Internet.

E questo è un modo vincente per presentare in modo efficace e allo stesso tempo semplice e visivo le tue idee o sviluppi al pubblico più vasto. E oggi, i documenti Web scritti nel linguaggio di markup ipertestuale HTML continuano a essere la principale forma di rappresentazione dei dati nell'ambiente Web.

I principali vantaggi dell'HTML sono:

  • semplicità che permette di imparare l'HTML nel più breve tempo possibile.
  • la possibilità di crearne uno tuo pagine web
  • e l'HTML funziona esattamente allo stesso modo su tutte le piattaforme esistenti oggi, non è necessario acquistare hardware aggiuntivo. E usa semplicemente qualsiasi editor di testo disponibile, come Blocco note.

In questo sito ho cercato di descrivere in dettaglio l'intero processo di creazione del mio sito Web, ovvero la pubblicazione di un progetto finito su Internet per consentirne l'accesso a tutti gli utenti.

Spero che molti dei miei articoli siano molto utili, perché io stesso non sono un programmatore, ma sono molto ispirato da questo lavoro.

  • II. Principi di base e regole di condotta ufficiale dei dipendenti pubblici statali del Servizio fiscale federale
  • II. Gli obiettivi e gli obiettivi principali del programma, il periodo e le fasi della sua attuazione, gli indicatori e gli indicatori target
  • II. Le fasi principali dello sviluppo della fisica Formazione della fisica (prima del XVII secolo).
  • III.2.1) La nozione di reato, le sue principali caratteristiche.
  • HTML- linguaggio di marcatura ipertestuale del documento. Con esso puoi scrivere testi con collegamenti ad altre pagine, creare tabelle, elenchi, includere immagini e molto altro. Questa lingua è usata per scrivere siti web.

    »html per principianti

    » Pagina principale

    »html per principianti

    Tag di base (descrittori) del linguaggio html

    Nella tradizione di tutti i classici tutorial HTML, presentiamo il documento ipertestuale più semplice.

    Un esempio di un semplice documento HTML

    Ecco l'intestazione del primo livello

    Benvenuti in Internet!

    Primo e ultimo paragrafo.

    In questo esempio, abbiamo utilizzato i seguenti termini ipertestuali (i cosiddetti tag):

    - tag utilizzato per definire il titolo.</p> <p><H1>- tag di intestazione.</p> <p><P>Tag etichetta paragrafo.</p> <p>Nel linguaggio dell'iperdescrizione <a href="https://sushiandbox.ru/it/social-network/programma-dlya-prosmotra-tekstovyh-dokumentov-na-kompyutere-besplatnye.html">documenti di testo</a>- tutti i tag sono accoppiati. Il tag di fine ha una barra per dire al browser che è fatto. Ma! C'è un'eccezione a questa regola di abbinamento:</p> <p>Non c'è tag in natura</P>.</p> <p>Non tutti i tag sono compatibili con i browser. Se il browser non comprende il tag, lo salta semplicemente.</p> <p>Quindi il documento HTML è il titolo:</p> <p><head>intestazione</head></p> <p>con titolo:</p> <p><title>Nome

    Nome del documento

    Questa non è una regola, e nemmeno una legge, questo è un dato di fatto:

    Ogni documento HTML ha un titolo.

    Altri browser possono trovare informazioni in base al nome del tuo documento HTML. La posizione del titolo è sempre definita: si trova nella parte superiore dello schermo ed è separata dal contenuto del documento. La lunghezza massima del nome è di 40 caratteri.

    Formattazione

    La formattazione può essere diretta o dell'autore. Se stai usando il tag

    I seguenti tag sono specifici per la formattazione diretta:



    Paragrafo.


    - linea orizzontale.

    Interruzione di linea.

    Intestazioni e sottotitoli

    Il linguaggio HTML consente di lavorare con sei livelli di titoli. Il primo titolo è il più importante. È indirizzato Attenzione speciale. Altre intestazioni possono essere stilizzate, ad esempio, in grassetto o lettere maiuscole.

    In HTML, la prima intestazione è indicata come

    :

    Testo

    n si riferisce al livello dell'intestazione, ovvero ai numeri 1, 2, 3, 4, 5 o 6.

    In HTML, la prima intestazione può essere uguale al titolo del documento.

    Gli elenchi sono divisi in non numerati:

  • Voce di elenco

    numerato:

  • Voce di elenco

    con descrizioni:

    Cane (elemento)

    Amico dell'uomo (descrizione oggetto)

    e nidificato:

  • Primo

  • Un altro primus

    Selezione del testo

    Il testo in un documento HTML può essere evidenziato in uno dei seguenti modi:

    - citazione

    - codice programma



    - definizione

    - enfasi logica

    - input da tastiera

    - messaggi informatici

    - forte accento

    - variabili

    Un grande paragrafo

    L'interruzione di riga non è importante in HTML. Ciò significa che puoi interrompere le righe in qualsiasi punto del documento. Ciò è dovuto al fatto che in un documento ipertestuale le spaziature consecutive si trasformano in una. Ma! Se lo spazio è dopo il tag

    Questo è preso in considerazione. Se qualsiasi tag viene ignorato, allora viene presa in considerazione anche la spaziatura. In altri casi, il browser salterà la spaziatura.

    L'HTML consente di collegare un testo o un'immagine ad altri documenti ipertestuali. Il testo è solitamente evidenziato a colori o sottolineato.

    Il tag viene utilizzato per questo. . Ricorda che ci deve essere uno spazio dopo la lettera A.

    ¦ comporre

    ¦ digitare HREF=”nomefile”>

    ¦ etichetta di tipo

    Bob

    Qui, la parola Bob si riferisce al documento BobAnapa.html, formando un collegamento ipertestuale.

    Bob

    Se si desidera specificare un nome file completo, è necessario utilizzare la sintassi UNIX.

    protocollo: //hostport/percorso

    Preformattazione del testo

    Etichetta

    Consente di generare testo in un carattere a spaziatura fissa.

    Usa questo tag per progettare elenchi di programmi.

    Citazioni estese

    Etichetta

    permette di inserire una citazione in un oggetto solitario.

    Etichetta

    consente di generare informazioni sull'autore del documento HTML.

    Avanzamento riga forzato

    Etichetta
    traduce solo una riga, cioè senza lo spazio aggiuntivo.

    Divisori orizzontali

    Etichetta


    forma una linea orizzontale lungo l'intera larghezza della finestra.

    Immagini incorporate

    Puoi incorporare immagini nel tuo documento. La sintassi per un'immagine in linea è la seguente:

    Qui image_URL è un puntatore a un file immagine, la cui sintassi è la stessa di un collegamento HTML.

    L'articolo di oggi tocca un argomento molto rilevante tra programmatori alle prime armi e web designer, vale a dire l'argomento della scelta di un editor HTML. Avendo presentato l'intero elenco di software specializzati, è difficile fare la scelta migliore sul posto: ogni programma è esclusivo e presenta una serie di caratteristiche, vantaggi e svantaggi. Fortunatamente, tra un gran numero di persone delle suddette professioni, negli anni del loro fruttuoso lavoro, si è formata una "lista di lavoro" dei programmi più ottimali per creare e modificare documenti HTML e, in particolare, siti Internet. Questo materiale è dedicato alla considerazione di sei editor HTML. Considerando il grande volume dell'articolo risultante, non tarderemo con l'introduzione e ci metteremo subito al lavoro.

    Quindi, il primo editor HTML su cui i nostri occhi sono caduti è stato Macromedia HomeSite.

    Macromedia HomeSite è forse uno degli strumenti di modifica dei documenti HTML più popolari tra gli utenti che preferiscono codificare manualmente le pagine. Allo stesso tempo, HomeSite consente di velocizzare notevolmente il processo di creazione stesso e facilitare il lavoro dello sviluppatore.

    Ingrandisci immagine

    L'area di lavoro del programma può essere suddivisa condizionatamente in tre parti: la prima, la più grande - la finestra vera e propria con il contenuto del documento, la seconda parte, situata a sinistra, contiene per impostazione predefinita un elenco di documenti disponibili sul disco. E infine, in alto, oltre al menù tradizionale, ci sono diversi pannelli con le funzioni più utilizzate, il cui aspetto però può essere personalizzato secondo i propri gusti.

    Macromedia HomeSite fornisce una comoda evidenziazione della sintassi non solo per le pagine HTML, ma anche per PHP, Perl, ASP, MySQL e altri popolari strumenti di sviluppo. Questo fatto attirerà gli utenti esperti che non sono limitati ai mezzi del linguaggio di markup ipertestuale e utilizzano linguaggi di programmazione web più complessi. Se non sei soddisfatto dell'attuale combinazione di colori di evidenziazione della sintassi, questo non è un problema: puoi modificare quello esistente o persino creare il tuo schema di progettazione del documento. HomeSite ha un potente sistema di aiuto che contiene, oltre a descrivere le funzionalità del programma di specifica del linguaggio HTML, un riferimento ai tag e include comodi suggerimenti per il descrittore corrente: per chiamarli, basta premere F2 e all'utente vengono mostrati tutti i possibili attributi per questo tag.

    Per velocizzare l'accesso ai gruppi di tag utilizzati di frequente, sono presenti diversi pannelli nell'angolo in alto a destra, il cui aspetto e posizione possono anche essere modificati.

    Il pannello è suddiviso in diverse schede, ognuna delle quali contiene tag appartenenti a un gruppo. Ad esempio, la scheda Caratteri contiene pulsanti per aumentare rapidamente la dimensione del carattere, modificarne lo stile, la posizione rispetto alla riga e inserire tre livelli di intestazioni.

    Un modo alternativo per inserire manualmente tutti gli attributi di un tag è il cosiddetto Tag Editor, un editor di tag che può facilitare notevolmente il processo di assegnazione dei valori ai vari attributi.

    Separatamente, vale la pena notare gli strumenti per la creazione e la configurazione di tabelle e frame: Table Wizard e Frame Wizard, che consentono di facilitare notevolmente la vita di uno sviluppatore durante la creazione di tabelle e frame di una struttura complessa.

    Immagina quanto tempo ci vorrebbe per creare a mano un tavolo del genere!

    Va notato che Homesite contiene un correttore ortografico integrato che controlla non solo la correttezza dei descrittori utilizzati, ma anche la correttezza del testo stesso, nonché un editor per i file CSS - fogli di stile a cascata chiamati TopStyle.

    Per accelerare la creazione di documenti, puoi utilizzare le scorciatoie da tastiera: HomeSite offre un vasto campo di attività per gli amanti della tastiera. Ad esempio, etichetta
    corrisponde alla combinazione di tasti Ctrl+Break. Tuttavia, l'utente è libero di assegnare una comoda scorciatoia da tastiera a quasi tutti i comandi.

    Professionisti. I vantaggi del programma includono funzionalità, versatilità, supporto per vari linguaggi di programmazione, un'interfaccia chiara, ampie opportunità e un potente sistema di aiuto. Svantaggi. Mancanza di supporto per la lingua russa, prezzo elevato, è necessaria almeno una conoscenza superficiale del linguaggio HTML per creare pagine, prezzo elevato del programma.

    È possibile scaricare l'ultima versione di Macromedia HomeSite da qui.

    Il programma SiteEdit è stato creato dalla società russa EdgeStile ed è posizionato dagli sviluppatori come un sistema di gestione dei contenuti. A differenza di HomeSite, SiteEdit appartiene ai cosiddetti strumenti di sviluppo visivo - editor WYSIWYG (da lettere maiuscole espressioni Ciò che vedi è ciò che ottieni - "ciò che vedi è ciò che ottieni").

    Dopo il primo avvio del programma appare modello pronto sito web.

    La struttura dell'intero nodo è rappresentata come varie pagine contenente diverse sezioni. Una sezione, a sua volta, può contenere più voci o oggetti. Passando alla modalità di modifica (predefinito F9), abbiamo la possibilità di modificare sezioni esistenti e aggiungerne di nuove, modificare il testo di una voce esistente o aggiungere una nuova voce.

    Dopo aver cliccato sul pulsante "Cambia sezione", compare una nuova finestra, nella quale è possibile effettuare questa semplice operazione:

    Oltre alla modifica diretta del testo, l'utente ha accesso ai pulsanti per modificare lo stile del carattere, inserire un'immagine, data odierna, aggiungendo una tabella, inserendo un collegamento ipertestuale, creando un elenco puntato o numerato, tutto con un semplice clic del mouse. Coloro che hanno familiarità con il linguaggio HTML non possono limitarsi alle funzioni di cui sopra, ma semplicemente scrivere manualmente il codice necessario. Poiché non ci sono fronzoli come l'evidenziazione della sintassi nella finestra di modifica, puoi chiamare un editor esterno facendo clic sul pulsante HTML, in cui puoi apportare tutte le modifiche necessarie.

    Il programma offre diversi modelli di design: book, galeon, kafe, palm_skin, stroitel, grazie ai quali è possibile modificare in modo significativo l'aspetto dell'intero sito nel suo insieme.

    Tutti gli elementi della pagina sono modificabili. Per un cambio di design più radicale, c'è un editor di design che offre le più ampie possibilità di modificare tutti gli elementi presenti nella pagina.



    ingrandire l'immagine

    Sul lato sinistro c'è un elenco di elementi, sulla destra - il loro aspetto sulla pagina, dal basso ci sono finestre per modificare i valori degli attributi di un particolare descrittore. Ad esempio, per il tag Font sono disponibili i seguenti attributi: colore, dimensione, spessore, stile, sottolineatura obliqua, spaziatura. I principianti apprezzeranno il modo di compilare le caselle: non è necessario inserire manualmente nulla, basta selezionare l'elemento desiderato dall'elenco a discesa. Anche la scelta del colore non è difficile: una tavolozza è a disposizione dell'utente, devi solo decidere la tonalità che ti piace e, voilà, il suo codice esadecimale è già indicato nel campo corrispondente.

    Il programma include un modello già pronto che imita il sito società di costruzioni che può essere personalizzato per soddisfare le vostre esigenze.

    È curioso che sia impossibile salvare direttamente il codice della pagina dal programma, per questo è necessario selezionare la voce "Visualizza pagina nel browser", e solo dal browser è possibile salvare la pagina come file html. Questo approccio, a quanto pare, è dovuto al fatto che nelle versioni Standard e Business del programma SiteEdit è possibile caricare immediatamente l'intero progetto sull'hosting, ma in versione gratuita inizio questa opportunità purtroppo mancante. Da qui le incongruenze.

    Professionisti. Interfaccia semplice: praticamente non è richiesta alcuna conoscenza dell'HTML, funzionalità, peso ridotto del kit di distribuzione, lingua dell'interfaccia russa, versione iniziale gratuita.

    Svantaggi. Impossibilità di salvare i file direttamente dal programma, errori di ortografia.

    SiteEdit è perfetto per creare pagine personali e semplici progetti web per i principianti e anche per coloro che non hanno familiarità con l'HTML.

    SiteEdit è disponibile in tre versioni principali: Start, Standard, Business e due aggiuntive: Partner. Puoi scaricare la versione iniziale di SiteEdit da qui .

    Un altro programma Freeware che è arrivato alla nostra recensione è HTML Source. La prima cosa che ha attirato la mia attenzione è stata la piccola dimensione del pacchetto di distribuzione del programma: solo 1,5 MB! Ciò ha portato ad alcuni pensieri scettici sulla funzionalità del programma e sulle sue capacità. Tuttavia, siamo rimasti piacevolmente sorpresi.



    ingrandire l'immagine

    L'interfaccia del programma ricorda quella di HomeSite, ma, ovviamente, ci sono molti meno strumenti e funzionalità. Sul lato sinistro c'è una finestra di Explorer in cui puoi selezionare i file che devi aprire. Al centro - direttamente la finestra per la modifica dei documenti web. Sul lato destro c'è una tavolozza e funziona in una modalità molto comoda. Quando passi il cursore del mouse su una o l'altra parte della tavolozza, viene immediatamente mostrato il componente di ciascun colore nella tavolozza RGB e, leggermente più in basso, il colore stesso. Inoltre, quando si fa clic sull'area desiderata, viene immediatamente inserito nel documento un codice colore esadecimale. Molto conveniente.

    Nella parte superiore dell'area di lavoro del programma è presente una normale barra degli strumenti che contiene pulsanti per la creazione di un nuovo documento, l'apertura di file esistenti, la stampa di un file, il controllo ortografico e altre azioni comuni. Tutte le icone sono realizzate in un buon stile, ma l'unica cosa deludente è la mancanza di suggerimenti quando si passa con il mouse su una particolare icona di azione. È interessante notare che il programma stesso determina quali browser sono installati nel sistema e la barra degli strumenti ha icone per visualizzare il documento nei browser disponibili per l'utente. Nel mio caso, a parte lo standard Internet Explorer, Opera e Mozilla Firefox, come dimostra il programma.

    Passiamo ora direttamente alla descrizione delle capacità del programma. HTML Source, come suggerisce il nome, ha lo scopo solo di facilitare il lavoro del programmatore e non di sostituirlo completamente. Il programma non ha la capacità di sviluppare visivamente le pagine, ad es. per coloro che non hanno familiarità con le basi del linguaggio di markup ipertestuale, questo prodotto non funzionerà. Tuttavia, per coloro che preferiscono sviluppare manualmente i documenti web, HTML Source ha un bel set di strumenti per velocizzare il processo di codifica.

    HTML Source offre l'evidenziazione della sintassi per i file HTML, tuttavia, a mio avviso, l'implementazione di questa funzione nel programma è leggermente inferiore a quella di HomeSite. In primo luogo, la parte del codice relativa alla definizione degli stili non è stata affatto evidenziata. E in secondo luogo, non c'è possibilità autoimpostazione combinazione di colori, che era presente nello stesso HomeSite.

    Nel menu "Inserisci", l'utente ha la possibilità di inserire date, speciali Caratteri HTML, immagini e una vasta gamma di emoticon. Una decisione molto originale degli sviluppatori che hanno incluso una funzionalità così insolita nel loro programma. Ai fan della comunicazione virtuale dovrebbe piacere questo.

    Il menu "Tag" contiene i principali gruppi di descrittori HTML.

    Di grande interesse è il contenuto del menu "Strumenti", che contiene tutti gli strumenti di questo strumento software. Diamo un'occhiata più da vicino al suo contenuto.

    La voce "Converti maiuscole" consente di modificare le maiuscole delle lettere, ad es. o invertirlo o portarlo a uno specifico. L'elemento successivo "Converti CodePage" consente di modificare rapidamente la codifica dell'intera pagina. Tra i restanti punti, è necessario notare il correttore ortografico integrato e lo strumento per l'ottimizzazione del codice HTML chiamato Tidy, che porta l'aspetto del documento in conformità con i requisiti dell'organizzazione W3C, che sviluppa gli standard del linguaggio di markup ipertestuale .

    Va notato il sistema di guida avanzato del programma HTML Source, che include Descrizione completa caratteristiche del programma, nonché le specifiche del linguaggio HTML, inclusi i CSS.

    Pro: dimensioni di distribuzione compatte, caratteristiche originali, avanzate sistema di riferimento.

    Contro: Mancanza di opportunità per lo sviluppo visivo dei documenti, modeste possibilità di impostazione del programma, mancanza di russificazione.

    Pertanto, HTML Source si rivolge a sviluppatori esperti, non solo come strumento di sviluppo, ma anche come strumento di riferimento. Puoi scaricare il sorgente HTML qui

    Il prossimo programma che è arrivato alla nostra recensione è stato Magic HTML Studio, sviluppato da AG FreeSoft. Dopo aver avviato il programma, ai nostri occhi è apparsa un'immagine insolita: il design di Magic HTML Studio era dolorosamente insolito.

    A qualcuno potrebbe piacere questa interfaccia, ma, secondo me, non è una soluzione molto buona per un programma di questo tipo. Sono stato anche deluso dal fatto che non ci fosse l'evidenziazione della sintassi del documento. Bene, ok, lasciamo perdere tutte le affermazioni sul design e vediamo come sta andando Magic HTML Studio con il componente funzionale.

    E qui tutto è solo per il livello più alto! Quanto valgono strumenti come Java Constructor e CQI QuickBuilder? Ma prima le cose principali.

    Sul lato sinistro ci sono i pulsanti per formattazione veloce testo, cambiando il tipo di scrittura e la posizione del testo sulla pagina. Sono inoltre previste icone per l'inserimento di diversi livelli di intestazioni nel documento. Sul lato destro, l'utente ha accesso ai pulsanti per inserire il testo di un determinato colore, ma lo spazio è utilizzato in modo molto irrazionale: per ogni colore viene assegnato un pulsante separato, sebbene sarebbe più conveniente utilizzare una normale tavolozza, ad esempio , come in Programma Html fonte.

    Passiamo ora agli strumenti e agli strumenti esclusivi di Magic HTML Studio. Java Constructor è uno strumento potente e allo stesso tempo semplice per creare script JavaScript, e per questo l'utente non ha bisogno di alcuna conoscenza data lingua programmazione. Utilizzando il costruttore, puoi inserire un calendario o un orologio sulla tua pagina, creare un menu dinamico oa discesa, creare un semplice banner composto da diverse immagini e altri utili elementi dinamici.



    ingrandire l'immagine

    Il designer crea automaticamente lo script necessario e devi solo incollarlo nel posto giusto nel documento.

    Il programma include anche un generatore Script CGI, con cui puoi creare una conferenza, libro degli ospiti o chattare con un solo clic, dopo aver impostato i parametri dello script.

    Sfortunatamente, non abbiamo avuto l'opportunità di testare questo strumento in pratica: per questo è stato necessario caricare i file su un server con supporto per gli script CGI. Passiamo ad altre funzionalità del programma. Quindi, utilizzando il menu Opzioni, puoi eseguire le operazioni di aggiunta di uno script di caricamento Flash, richiamare l'editor di elementi, nonché modificare il carattere e aggiungere un modulo.

    È inoltre necessario notare un buon sistema di aiuto in russo, contenente una descrizione di tutte le principali funzionalità del programma.

    Pro: builder avanzati di script JavaScript e CGI, ampie possibilità di aggiungere elementi dinamici, sistema di aiuto in russo.

    Contro: design non proprio buono, mancanza di evidenziazione della sintassi, mancanza di strumenti di sviluppo visivo.

    Microsoft FrontPage incluso con Pacchetto Microsoft Office è un classico editor WYSIWYG, che però ha la possibilità di modificare manualmente il codice.

    L'interfaccia del programma è molto simile a quella di Microsoft Word, il che non sorprende affatto: l'unificazione dell'aspetto aiuterà i principianti a padroneggiare rapidamente le funzionalità principali di FrontPage.

    Il programma ha tre modalità di lavoro con un documento: Normale, HTML e Anteprima. In modalità Normale, la pagina Web è normale file di testo con la possibilità di modificare tutti gli elementi, dal testo alle immagini.



    ingrandire l'immagine

    La modalità HTML consente di visualizzare il codice della pagina e, di conseguenza, modificarlo. In questa modalità, FrontPage fornisce l'evidenziazione della sintassi, ma piuttosto mediocre: i descrittori sono evidenziati in blu, tutto il resto è nero.

    Infine, in modalità Anteprima, puoi vedere come apparirà la tua pagina nella finestra del browser.

    FrontPage, grazie alla stretta integrazione con altri prodotti Microsoft, permette di inserire in un documento web Vari tipi oggetti: da immagini e diagrammi a fogli di Microsoft Excel.

    Naturalmente, FrontPage ha un generatore di tabelle che rende la creazione di tabelle molto più semplice.

    Uno dei principali vantaggi del programma è un gran numero di modelli disponibili che consentono all'utente di non scervellarsi sul design del proprio progetto.

    Dopo aver scelto il modello necessario, puoi procedere direttamente al riempimento della pagina con il contenuto. È qui che entra in gioco la bellezza di FrontPage: il processo di creazione di una pagina HTML non è diverso dalla creazione di un normale documento di testo in Microsoft Word. Gli stessi strumenti sono a disposizione dell'utente per modificare il testo, cambiarne la formattazione, creare e modificare tabelle, inserire vari oggetti e immagini. Il programma ti consente di creare facilmente elenchi puntati, numerati e multilivello - e tutto questo senza la conoscenza del linguaggio HTML!

    FrontPage divide l'area di lavoro in diversi blocchi contenenti determinati elementi della pagina: immagini, testo, intestazioni e così via. Per ogni blocco, puoi assegnare le tue opzioni di formattazione e la sua posizione rispetto alla pagina.

    C'è anche un rovescio della medaglia: la complessità e l'ingombro del codice risultante, che naturalmente influisce sulla dimensione finale del documento. Sarà anche molto difficile apportare modifiche a tale documento in futuro. Ma questo è piuttosto uno svantaggio non di un prodotto specifico, ma di quasi tutti gli editor WYSIWYG.

    Pro: un'interfaccia familiare per i prodotti MS Office, un buon set di modelli, integrazione con altri programmi del pacchetto MS Office.

    Contro: un piccolo set di strumenti di sviluppo, l'impossibilità di un acquisto separato del programma. Microsoft FrontPage è una buona scelta come editor HTML per la prima volta, ma man mano che le esigenze dell'utente crescono, le sue capacità potrebbero non essere sufficienti.

    E infine ultimo programma nella nostra recensione di Macromedia Dreamweaver MX 2004. La dimensione del kit di distribuzione (62 MB) ci permette di aspettarci molto da questo editor HTML. In effetti, le capacità di Macromedia Dreamweaver MX 2004 sono impressionanti. Dopo l'installazione, all'utente viene chiesto di selezionare aspetto programma, che differisce a seconda dell'approccio alla creazione di documenti web. Quando si sceglie "Codice" l'interfaccia del programma verrà adattata alle esigenze dell'encoder e quando si sceglie "Progettazione" - di conseguenza, il progettista. Tuttavia, è sempre possibile passare da una modalità all'altra ed è disponibile anche una terza modalità combinata: l'area di lavoro del programma è divisa in due parti.



    ingrandire l'immagine

    Sul lato destro c'è un altro menù multilivello, che, in particolare, contiene elementi per visualizzare la guida sul descrittore corrente, un elenco di immagini utilizzate, un esploratore e alcuni altri elementi.

    Fornire ulteriore assistenza allo sviluppatore menu contestuali, che duplicano le funzioni principali richiamate dal menu principale. Ad esempio, lavorando in modalità visuale cliccando con il tasto destro su un elemento, possiamo cambiare il font utilizzato, il suo stile, colore e altri attributi, ed è anche possibile cambiare gli attributi del tag utilizzato.

    Le caratteristiche principali del programma risiedono proprio nell'utilizzo della modalità visuale. Le icone sulla barra degli strumenti sono responsabili delle azioni più comuni: aggiungere un collegamento ipertestuale, inserire un'immagine, costruire una tabella, aggiungere la data corrente, ecc.

    Per gli utenti che hanno familiarità con le funzionalità del linguaggio HTML, possiamo consigliare di utilizzare uno strumento chiamato Tag Chooser, con il quale è possibile inserire non solo qualsiasi tag HTML, ma anche le espressioni e gli operatori di base dei linguaggi di programmazione come JavaScript, ASP. Net, PHP, WML e Coldfusion. Tutto ciò apre nuovi orizzonti per l'utilizzo dello strumento software nello sviluppo di vari progetti complessi utilizzando linguaggi di programmazione lato server.

    La comodità della modalità combinata sta nel fatto che tutte le modifiche apportate vengono visualizzate immediatamente in entrambe le finestre. Cioè, quando si apportano modifiche al codice del documento, si vede immediatamente il risultato nella finestra adiacente, e viceversa, quando si seleziona un elemento, viene visualizzato il codice corrispondente.

    Quando si lavora in modalità "Codice", l'area di lavoro del programma ricorda quella di HomeSite: si ritiene che i prodotti abbiano un creatore, ma la funzionalità di Dreamweaver è ancora superiore. Ciò che vale solo un progettista di tabelle, che offre allo sviluppatore una flessibilità senza precedenti durante la creazione di tabelle. Inoltre, durante la creazione di una tabella, il programma offre di utilizzare uno dei modelli di progettazione, di cui ce ne sono diverse dozzine, e quando si seleziona un modello specifico, è possibile personalizzarlo immediatamente in base alle proprie esigenze regolando alcuni dei suoi attributi. Dopo aver creato una tabella e averla riempita di contenuto, diventa disponibile per ordinare la tabella in base a qualsiasi colonna. E tutto questo - in modalità visiva, il codice stesso, ovviamente, cambia automaticamente.

    Macromedia Dreamweaver MX 2004 può essere utilizzato insieme ad altri prodotti dell'azienda: Macromedia Fireworks, Flash, ecc.

    Se la scelta di un utente che preferisce creare documenti in modalità visiva è quasi ovvia, allora il "codificatore" deve affrontare un compito difficile nella scelta tra due prodotti Macromedia: HomeSite o Dreamweaver MX 2004? Si può notare che le capacità di Dreamweaver MX 2004 saranno superflue per il codificatore, tuttavia, se grande volume lavoro di routine, puoi utilizzare completamente la modalità visiva: se il programma lo offre, perché non provarlo? Gli utenti di HomeSite sono privati ​​\u200b\u200bdi tale opportunità, ma il programma offre loro tutto il set di strumenti necessario per il comodo sviluppo di documenti web di varia complessità.

    Pertanto, ognuno è libero di scegliere autonomamente il prodotto di cui ha bisogno, tenendo conto degli obiettivi e delle conoscenze disponibili. Naturalmente, anche il prezzo è un problema: entrambi i prodotti Macromedia sono distribuiti come Shareware, ma possono essere utilizzati gratuitamente per un periodo di prova di 30 giorni. Questa volta è sufficiente per fare una scelta.

    Pro: un enorme set di strumenti per lo sviluppo visivo dei documenti, un'interfaccia chiara, la possibilità di lavorare in modalità codificatore, un set di modelli già pronti.

    Contro: grande volume di distribuzione, prezzo elevato del prodotto.

    E lingua HTML, la definizione più importante è " etichetta"(dall'inglese "tag", talvolta si scrive anche "tag"). Etichetta- questa è un'espressione simbolica o testuale (per chiarezza, concediamoci un'analogia non del tutto corretta con i termini "comando" o "operatore" dei linguaggi di programmazione), che istruisce a compiere un'azione specifica direttamente su marcatura E formattazione presentazione sullo schermo pagine web.

    Cioè, questo non è affatto un operatore o un comando, ma solo un'indicazione (ad esempio, rientro a sinistra, posiziona un'illustrazione di una dimensione specifica a destra e sotto di essa - collegamento ipertestuale).

    Oltre ai tag effettivi, nel file language ipertesto marcatura vengono utilizzati i loro attributi.

    Arredamento etichetta nell'array del documento viene eseguito utilizzando parentesi angolari, che consente all'interprete di distinguere tra testo (contenuto tematico) e direttamente HTML-code, visualizzando correttamente le informazioni sulla pagina web.

    I tag possono essere accoppiati (ovvero utilizzati in un fascio inestricabile l'uno con l'altro). In questo caso i termini apertura E chiusura tag. La sintassi per i tag accoppiati è invariabilmente:

    Frammento di documento...,

    Inoltre, le istruzioni prescritte dal tag si applicano all'intero frammento del documento indicato tra di loro. I tag possono essere singoli, ovvero il tag di chiusura è standard HTML non fornito.

    Elementi del linguaggio HTML

    Senza eccezioni, tutti gli elementi del linguaggio HTML sono tag o loro attributi; nessun comando, nessuna condizione in lingua il markup ipertestuale semplicemente non esiste (vedi sotto per i tag META di classe speciale). Elementi attivi ed effetti dinamici su pagina web sono realizzati da moduli indipendenti e completi incorporati nel codice ipertestuale, già implementati in uno qualsiasi dei linguaggi di programmazione classici (ad esempio, JavaScrypt è molto popolare sui siti Web), o da metodi di programmazione server.

    Simbolismo META

    HTML. Etichetta

    Argomenti di supporto:

    web design. HTML. Etichetta

    Nel progetto di laurea, il linguaggio di markup ipertestuale HTML è stato utilizzato come strumento software per riempire il contenuto statico.

    HTML (Hyper Text Markup Language - Hypertext Markup Language) è un linguaggio di programmazione per computer progettato per sviluppare pagine Web o, in altre parole, documenti HTML. Il linguaggio HTML è una raccolta di caratteri di controllo - descrittori con i quali è possibile aggiungere e formattare elementi di un documento. Per personalizzare l'aspetto e il funzionamento di un elemento della pagina, vengono impostati i suoi attributi.

    I browser riconoscono i tag del linguaggio HTML e convertono il codice del documento in una pagina Web che viene visualizzata nella finestra del browser. Le applicazioni browser sono sviluppate utilizzando gli standard globali del linguaggio HTML, che assicurano che le pagine Web abbiano lo stesso aspetto indipendentemente dalla finestra del browser in cui vengono visualizzate.

    L'HTML è stato standardizzato dal World Wide Web Consortium (W3C). Nonostante la necessità di garantire la completa indipendenza dal software e dall'hardware delle pagine Web, è abbastanza difficile implementare pienamente questi principi. Uno dei problemi è che il lavoro sulla lingua continua. Esistono nuove versioni di HTML che forniscono opzioni aggiuntive per gli sviluppatori di pagine Web.

    Esistono molti editor HTML specializzati che possono essere suddivisi approssimativamente in due tipi:

      editor HTML visivi, ovvero editor di tipo WYSIWIG (ad esempio, Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold, ecc.). Quando si lavora in questi programmi, l'utente si occupa di immagini grafiche Elementi HTML, non con l'ID del documento. A proposito, ci sono convertitori per documenti di testo preparati in Word e Word Perfect in file HTML;

      editor di veri e propri testi HTML che consentono di automatizzare la digitazione e la modifica del codice (ad esempio, HomeSite, HotDog, Ken Nesbitt Web Editor e molti altri). Questi programmi consentono all'utente di inserire rapidamente e facilmente elementi HTML nei documenti, controllare la sintassi dei comandi, eseguire ed eseguire il debug della pagina senza uscire dalla finestra dell'editor. In generale, lavorare in tali editor è come lavorare in un ambiente di programmazione interattivo come Delphi o Visual Basic.

    Oltre alle due categorie precedenti, ci sono programmi che combinano le funzionalità di editor di testo e HTML visivi, tali programmi includono HotMetal sviluppato da SoftQuad Sofware.

    Le funzioni dei moderni editor HTML sono molto diverse: alcuni di essi, ad esempio, assicurano la formazione di sole singole pagine, altri, al contrario, vengono utilizzati per progettare interi siti Web con il loro successivo caricamento su server remoti su Internet. Oggi è difficile tracciare il confine tra gli editor HTML professionali e quelli destinati alla creazione Web amatoriale.

    Quando si utilizza ciascun elemento, è importante sapere quali elementi possono essere inseriti al suo interno e quali elementi può essere all'interno. Pertanto, la posizione relativa degli elementi HTML, HEAD, TITLE e BODY dovrebbe essere standard su qualsiasi pagina, tuttavia, nei casi in cui non vengono utilizzati frame. Se la pagina è un documento di layout frame (maggiori informazioni su questo argomento nella sezione Frame del Capitolo 3), viene utilizzato l'elemento FRAMESET invece dell'elemento BODY.

    Ci sono gruppi di elementi che vengono utilizzati insieme. Questi includono elementi per la creazione di tabelle, elenchi, frame. In questo caso, l'ordine di nidificazione degli elementi è determinato dalla logica di creazione dell'uno o dell'altro oggetto sulla pagina: qui è necessario ricordare semplici regole di progettazione. Le tabelle e le cornici vengono spesso utilizzate per organizzare i dettagli della pagina (immagini, testo, ecc.) in un ordine specifico. Ad esempio, inserendo un'immagine all'interno di una cella della tabella, è possibile ottenere una determinata posizione. In tali casi, l'annidamento degli elementi è determinato dallo sviluppatore della pagina Web e molto dipende dalla sua immaginazione e abilità.

    Un gran numero di elementi utilizzati per formattare il testo consente un'ampia varietà di opzioni di nidificazione. E loro stessi devono trovarsi all'interno determinati elementi. Qui dobbiamo essere guidati dal buon senso: ogni elemento svolge una determinata funzione e ha un certo scopo.

    L'esempio seguente ha due paragrafi (il primo in un riquadro verde) e una tabella:

    <Р style="border: Зрх solid дгееп">Testo paragrafo 1

    . . .

    <Р>Testo paragrafo 2

    La tabella in questo caso è un elemento indipendente. Può, ad esempio, essere allineato indipendentemente dal resto del testo.

    Puoi usare altro codice:

    <Р style="border: Зрх solid дгееп">Testo paragrafo 1

    . . .

    <Р>Testo paragrafo 2

    Il tag di fine del primo paragrafo è scomparso. La tabella ora fa parte del primo paragrafo e la cornice verde racchiuderà la tabella e il testo.

    Al contrario, un elemento P può trovarsi all'interno di una tabella: ad esempio, un singolo elemento di cella TD può contenere più paragrafi P.

    La violazione delle regole di nidificazione è uno degli errori più comuni nella creazione di pagine Web. Per evitare tali errori, è necessario utilizzare editor di ipertesto che controllano automaticamente l'implementazione delle regole di sintassi. Di seguito è riportata una riga contenente un tipico errore di elemento nidificato:

    <Н1>Titolo 1<Н2>Titolo 2

  • Titolo 3

    Se la pagina può essere visualizzata, viene visualizzata senza alcun messaggio di avviso. Il programma interpreta i tag posizionati erroneamente in un certo modo e genera un'immagine seguendo la logica stabilita dai suoi sviluppatori. In questo caso, l'aspetto della pagina potrebbe non corrispondere all'intenzione dell'autore. E solo in caso di errori molto gravi o evidenti contraddizioni, il browser visualizza un messaggio sull'impossibilità di visualizzare la pagina. Un segno indiretto di un errore di markup può essere la comparsa di frammenti di codice HTML sulla pagina. Gli utenti che lavorano molto con Internet, a quanto pare, hanno riscontrato questa situazione. Le regole di sintassi si applicano anche all'uso di tag di inizio e fine, attributi e contenuto dell'elemento. Non confondere i concetti di "elemento" e "tag". Un elemento è un contenitore contenente attributi all'interno del tag iniziale per informazioni utili tra i tag iniziale e finale. Un tag è un costrutto racchiuso tra parentesi angolari e utilizzato per indicare l'ambito di un elemento.

    Alcuni elementi non hanno tag di chiusura. Ovviamente, l'elemento BR, che segna la fine di una riga, non ha bisogno di un tag di chiusura. Alcuni elementi possono essere utilizzati con o senza tag di chiusura. L'esempio più notevole è l'elemento paragrafo P. Può avere un tag di fine, ma se tale tag non è impostato, il terminatore dell'elemento è il seguente elemento, che può definire logicamente la fine del paragrafo corrente: un altro elemento P, un Elemento di disegno IMG, elemento di elenco UL, elemento di tabella TABLE, ecc. Pertanto, informazioni utili di un elemento deve trovarsi tra i tag di inizio e di fine di questo elemento o tra il tag di inizio di questo elemento e il tag di inizio dell'elemento successivo. Qualsiasi testo arbitrario inserito nella pagina viene percepito dal browser come da visualizzare e quindi formattato secondo gli elementi che circondano questo testo. Ciò non tiene conto della divisione del testo in righe ottenuta in un editor di testo. Teoricamente, un'intera pagina Web può stare in una lunga riga. I caratteri di fine riga, come quelli inseriti in Blocco note, possono aiutare a leggere il codice HTML, ma non vengono visualizzati dal browser. Quest'ultimo, durante la visualizzazione della pagina sullo schermo, può interrompere la riga in base alla disposizione degli elementi Hn, P o BR, e in altri casi formatta i paragrafi in modo arbitrario, a seconda della quantità di testo, della dimensione del carattere e della finestra corrente misurare. Pertanto, le pagine Web devono essere disposte in modo tale che il loro aspetto non cambi drasticamente a seconda delle diverse risoluzioni del monitor, delle dimensioni dello schermo, delle dimensioni della finestra del browser e per le modalità a schermo intero oa finestra. Una regola molto importante che non ha eccezioni è il posizionamento degli attributi degli elementi all'interno del tag iniziale.

    I caratteri racchiusi tra parentesi angolari sono comandi HTML mediante i quali il "browser" sa come convertire le parti di testo racchiuse tra questi comandi.

    Il documento nel suo insieme deve essere contrassegnato come documento HTML. Per fare ciò, deve iniziare con un comando e terminare con un comando.

    Il documento si compone di 2 parti:

      intestazione (testa).

      documento (Corpo).

    Quando si scrivono comandi HTML, non importa se si scrivono comandi in lettere minuscole o maiuscole.

    Il titolo contiene informazioni sul documento, come il titolo e le informazioni metodologiche che ne descrivono il contenuto. Il corpo contiene il contenuto del documento stesso (ciò che viene visualizzato nella finestra del browser).

    Ogni tag è costituito da un nome, eventualmente seguito da un elenco di attributi opzionali, tutti all'interno di parentesi angolari< >.

    Il contenuto delle parentesi non viene mai visualizzato nella finestra del browser. Il nome di un tag è solitamente un'abbreviazione della sua funzione, che lo rende più facile da ricordare. Gli attributi sono proprietà che estendono o perfezionano la funzione di un tag. Come regola generale, il nome e gli attributi all'interno di un tag non fanno distinzione tra maiuscole e minuscole. Etichetta funzionerà proprio come . Tuttavia, i valori di alcuni attributi possono essere sensibili alle maiuscole. Ciò vale in particolare per nomi di file e URL. Lo schema generale del documento è mostrato in Figura 1.1.

    Figura 1.1. Schema generale documento HTML

    I tag hanno un tag di inizio (apertura o inizio) e un tag di fine (chiusura). Il testo tra i tag seguirà le istruzioni che contengono. Per esempio:

    Mio Primo pagina web

    Risultato: mio Primo Pagina web.

    Il tag di fine ha lo stesso nome del tag di inizio ma è preceduto da una barra (/). Può essere pensato come un tag "switch". Il tag di chiusura non contiene mai attributi.

    il testo inizia con tag . Richiede un tag di chiusura A che segna la fine del documento. Successivamente nella nidificazione ci sono il titolo del documento e i tag del contenuto. All'interno del tag di intestazione vengono scritte informazioni sul documento (titolo, descrizione, tabella di codifica, ecc.). Il tag del titolo stesso è scritto come . Richiede un tag di chiusura. Il tag del contenuto del documento definisce parte informativa descrizioni delle pagine. Contiene testo, immagini e altri elementi. Il tag di descrizione (corpo della pagina) ha questo aspetto: ....

    Scriviamo un esempio di un semplice documento:

    <ТIТLЕ>Esempio di pagina HTML

    <ВОDY>Questa è una semplice pagina che illustra la struttura di una descrizione in HTML.

    Etichetta , situato nel titolo della pagina, specifica il titolo della pagina, che la maggior parte dei browser visualizza nel titolo della finestra. Definendo il nome della pagina, semplificherai il lavoro con il sito (l'utente capirà dove è arrivato, anche prima della fine del download del documento). La figura 1.2 mostra la pagina sopra descritta, aperta nel browser Internet Explorer.</p><p><img src='https://i1.wp.com/studfiles.net/html/2706/1150/html_9phP5XeW90.EBoA/img-j7Tmqy.png' height="122" width="321" loading=lazy loading=lazy></p><p>Figura 1.2. Esempio di pagina HTML</p><p>L'elemento BODY deve comparire al massimo una volta in un documento.</p><p>Attributi:</p><ul><p>MARGINHEIGHT - specifica la larghezza (in pixel) dei margini superiore e inferiore del documento. Funziona solo con i browser Netscape;</p><p>TOPMARGIN Specifica la larghezza (in pixel) dei margini superiore e inferiore del documento. Funziona solo nei browser Internet Explorer;</p><p>MARGINWIDTH - specifica la larghezza (in pixel) dei margini sinistro e destro del documento. Funziona solo con i browser Netscape;</p><p>LEFTMARGIN - specifica la larghezza (in pixel) dei margini sinistro e destro del documento. Funziona solo nei browser Internet Explorer;</p><p>BACKGROUND - definisce l'immagine per "riempire" lo sfondo. Il valore è specificato come URL completo o nome file con un'immagine all'interno <a href="https://sushiandbox.ru/it/lessons-on-windows/chto-takoe-format-jpg-gif-ili-png-formaty-graficheskih-failov.html">Formato GIF</a> o JPG;</p><p>BGCOLOR - definisce il colore di sfondo del documento;</p><p>TESTO - determina il colore del testo nel documento;</p><p>LINK - definisce il colore dei collegamenti ipertestuali nel documento;</p><p>ALINK - definisce il colore di evidenziazione dei collegamenti ipertestuali al momento del clic;</p><p>VLINK: determina il colore dei collegamenti ipertestuali ai documenti che hai già visualizzato.</p> </ul><p><BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050" MARGINHEIGHT="30" TOPMARGIN="30" LEFTMARGIN="40" MARGINWIDTH="40"></p><p>Testo del documento.</p><p>Il risultato dell'esempio è mostrato in figura 1.3.</p><p><img src='https://i2.wp.com/studfiles.net/html/2706/1150/html_9phP5XeW90.EBoA/img-Y77Rh5.png' height="118" width="270" loading=lazy loading=lazy></p><p>Figura 1.3. Esempio di modifica del colore di sfondo e del colore del testo</p><p>I valori degli attributi BGCOLOR, TEXT, LINK, ALINK e VLINK sono specificati come valore RGB esadecimale o come uno dei 16 colori di base.</p><p>Le aree principali delle pagine WEB sono occupate, di regola, dal testo. I blocchi di testo sono costituiti da singole righe combinate in paragrafi. I paragrafi iniziano con <a href="https://sushiandbox.ru/it/internet/otsekaet-stroku-do-simvola-1s-novye-funkcii-raboty-so-strokami-funkciya-raboty.html">nuova linea</a> e i gruppi di paragrafi sono separati l'uno dall'altro da intestazioni.</p><p>Nella progettazione di documenti di testo ordinari, i pensieri completi sono presentati sotto forma di paragrafi. Questa regola viene seguita nel processo di creazione dei documenti per il WEB. Inoltre, nel caso di pagine WEB, è obbligatoria una netta suddivisione del testo in paragrafi, in quanto i testi devono essere concisi e consentire una lettura scorrevole.</p><p>Ci sono diverse opzioni per creare un paragrafo in HTML. Il più semplice di questi è l'uso dei tag <p>E <p>Tra i quali è posto il testo del paragrafo.</p><p>Il codice di una pagina contenente paragrafi può essere simile a:</p><p><TITLE>Rompere in paragrafi

    Riccardo Bach

    l'unica

    Abbiamo fatto molta strada, vero?

    Ci siamo conosciuti venticinque anni fa. Allora ero un pilota, affascinato dal volo, e cercavo di trovare il senso della vita nelle letture degli strumenti. Vent'anni fa, il nostro viaggio ci ha portato in un nuovo mondo insolito, spalancato per noi dalle ali del Gabbiano.

    La finestra del browser verrà visualizzata come mostrato nella Figura 1.4.

    Figura 1.4. Rompere in paragrafi.