HTML è la lingua di markup ampiamente utilizzata per creare una struttura della pagina web. Fornisce tag diversi che vengono utilizzati per aggiungere diversi elementi alla pagina Web come , ,
, E . Questi tag sono definiti nell'editor di testo e visibili sul browser. Questo articolo discuterà:
Prerequisiti per creare un sito Web Come creare una pagina HTML? Come creare il sito Web HTML con codice? Come modellare elementi HTML tramite CSS? Prerequisiti per creare un sito Web
I prerequisiti per creare un sito Web sono:
Un editor di testo Programma di navigazione in rete Cos'è un editor di testo?
Un editor di testo è un programma di software per computer che consente agli utenti di modificare, archiviare e stampare il testo. Questi redattori sono spesso noti come software Notepad. Esistono diversi redattori di testo, come:
Bloc notes Codice Visual Studio Testo sublime Nota: Useremo l'editor di codice Visual Studio per la dimostrazione. Gli utenti possono installare uno qualsiasi dei redattori di testo in base alle loro preferenze.
Come creare una pagina HTML?
Di seguito è spiegata la procedura passo-passo per la creazione di un sito Web nel codice Visual Studio.
Passaggio 1: crea una cartella del progetto
Innanzitutto, crea una cartella e chiamalo come vuoi. Ad esempio, abbiamo specificato il nome del file come "Html ". All'interno di questa cartella, creeremo sotto-conduttori e file per il nostro progetto:
Passaggio 2: aprire la cartella
Apri la cartella del progetto, fai clic con il tasto destro, quindi seleziona “Apri con il codice "Opzione dal menu contestuale:
Di conseguenza, verrà visualizzata la seguente finestra:
Passaggio 3: crea un nuovo ".file html "
Crea un nuovo file facendo clic sull'icona del nuovo file come mostrato nell'immagine seguente:
Salva il file con ".html "Estensione.
Passaggio 4: aggiungi il codice HTML
Aggiungi il codice HTML richiesto nel file:
Esegui un esempio per vedere come esegue il codice HTML e visualizza il sito Web sul browser.
Come costruire un sito Web in HTML?
Per creare un sito Web da zero, controlla i passaggi di seguito.
Passaggio 1: crea un contenitore "div"
In HTML, crea un div chiamato "contenitore ". All'interno di questo Div, aggiungeremo elementi per creare un sito Web:
Passaggio 2: aggiungi elementi "intestazione" e "nav"
All'interno del contenitore Div, posizionare un ""Tag. L'elemento di intestazione include un'immagine e una barra di navigazione. Più specificamente, la barra di navigazione visualizza un elenco di collegamenti a diverse sezioni del nostro sito Web:
Passaggio 3: aggiungi "Banner sezione"
Aggiungere un "" tag con nome di classe "Banner ". Questa sezione contiene un file
Tag per l'intestazione:
Passaggio 4: crea la sezione "Aboutus"
Quindi, crea un "chi siamo "Sezione che conterrà informazioni sul nostro sito Web. Creiamolo prima aggiungendo un'intestazione con "
Chi siamo
Linuxhint è il miglior sito di tutorial online. Da qui puoi imparare diversi
Per saperne di più Andiamo avanti verso il prossimo passo.
Passaggio 5: crea la sezione "Ourservices"
Successivamente, aggiungi una sezione per "I nostri servizi ". Questa sezione conterrà le informazioni sul servizio sul nostro sito Web.
Creiamolo aggiungendo due div all'interno di un div chiamato "I nostri servizi ". Il primo div "Servizi "Conterrà Div Tree con il nome"servizio "Ognuno con informazioni diverse. Ogni "servizio "Div contiene i valori di attributo diversi,
e tag pulsanti:
Forniamo istruzione di qualità al mondo.
Visualizza il servizio Forniamo al mondo la conoscenza delle tecnologie emergenti.
Visualizza il servizio Felice di aiutare il mondo.
Visualizza il servizio Passaggio 6: definire l'elemento "piè di pagina"
Per creare un piè di pagina del sito Web, usa il ""Tag. Questo elemento contiene un tag per mostrare il contenuto con testo più piccolo:
(c) Copyright - Tutti i diritti riservati La struttura del nostro sito Web è Don. Ora, passiamo al CSS per lo styling.
Come modellare elementi HTML tramite CSS?
Ora, dai un'occhiata a come modelleremo il nostro sito Web utilizzando CSS Properties.
Stile All Elements (*)
* L'asterisco " * "Viene utilizzato in CSS per selezionare uno o tutti i tipi di elementi e applicare le seguenti proprietà:
"margine "La proprietà viene utilizzata per dare spazio attorno all'elemento. "imbottitura "Viene utilizzato per dare spazio attorno al contenuto dell'elemento. "dimensionamento della scatola "Determina il metodo per calcolare l'altezza e l'ampiezza complessive dell'elemento. "famiglia di font "Definisce lo stile del carattere. Tag Style "H2"
H2 IL " "dimensione del font "Viene utilizzato per impostare le dimensioni del carattere. "Font-peso "Specifica lo spessore del carattere. Elemento "Sezione" di stile
sezione Allo stile "sezione ", Applica le proprietà di seguito:
"imbottitura "È utilizzato per dare spazio in cima al contenuto. "imbottitura "Applicherà lo spazio nella parte inferiore del contenuto. Elemento "pulsante" di stile
Button Ogni pulsante del nostro sito Web conterrà le seguenti proprietà:
"colore di sfondo "Applica il colore sullo sfondo del pulsante. "colore "La proprietà definisce un colore per la didascalia del pulsante. "confine "La proprietà applica un bordo al pulsante specificando la larghezza, il tipo e il colore. "imbottitura "La proprietà viene utilizzata per dare spazio attorno al contenuto del testo. "dimensione del font "Imposta le dimensioni del carattere. "cursore "Specifica il puntatore del mouse su Hover. Stile "Container" Div
.Container Qui:
"larghezza massima "La proprietà definisce la larghezza massima dell'elemento. "margine "La proprietà viene utilizzata per dare spazio attorno all'elemento. Tag "header" di stile
intestazione Secondo lo snippet di codice dato:
"imbottitura "Viene utilizzato per dare spazio nella parte superiore del contenuto. "imbottitura "È impostato sullo spazio nella parte inferiore del contenuto. "colore di sfondo "È impostato per applicare il colore sullo sfondo dell'elemento. "Schermo "Specifica il comportamento del display. Il valore Flex viene utilizzato per creare un layout flessibile. "giustificare il contenuto "Collocherà elementi flessibili in base al valore dato. "allineare "Imposta l'allineamento dell'articolo all'interno di un contenitore flessibile. Stile “Intestazione
header ul L'elenco non ordinato del tag di intestazione è associato alle seguenti proprietà:
"stile elenco "Viene utilizzato per dare stile all'elenco. Nell'esempio, abbiamo impostato il suo valore come "nessuno "Per rimuovere la sottolineatura dall'elenco. "Schermo "La proprietà viene utilizzata per specificare il comportamento di visualizzazione dei tag. Il valore Flex viene utilizzato per creare un layout flessibile. Tag stile "A"
header ul li a Gli elementi di ancoraggio del tag di intestazione sono forniti con i seguenti stili:
"decorazione del testo "La proprietà viene utilizzata per decorare il testo con diversi stili di linea. "imbottitura "Viene utilizzato per dare spazio attorno a ogni tag di ancoraggio. "colore "La proprietà è impostata per applicare il colore al testo del tag di ancoraggio. Stile "banner" di stile
.banner Il div con nome "Banner "È disegnato come segue:
"immagine di sfondo "A questa proprietà è assegnato l'URL dell'immagine di sfondo. "posizione in background "È la posizione dell'immagine come centro. "Ripeat di sfondo "La proprietà imposta l'immagine come nessuna ripetizione. "Size di sfondo "È impostato come copertina, il che significa che l'immagine si adatta al div. "imbottitura "Dà spazio alla parte superiore del contenuto. "imbottitura "Dà spazio nella parte inferiore del contenuto. Tag di stile "H2" di Banner Div
.banner h2 IL
Il tag del banner div viene applicato con queste proprietà:
"colore "La proprietà imposta il colore del testo. "allineamento "Con il Value Center imposterà il testo come allineato al centro. "dimensione del font "La proprietà imposta la dimensione del carattere dell'elemento. Stile "Aboutus" Div
.chi siamo IL ".chi siamo "Viene utilizzato per accedere alla classe Aboutus. IL "allineamento "La proprietà è impostata il testo dell'elemento al centro.
Stile "H2" e tag "P" di "Aboutus" Div
.Aboutus H2,Quindi, imposta il "imbottitura "Proprietà come"20px "A entrambi i
E
tag.
Stile "Ourservices" Div
.I nostri servizi Il div "nostro servizio" è dotato di "colore di sfondo " COME "#fefef ".
Stile "Servizi" Div
.I nostri servizi .Servizi Il bambino div "Servizi "Del genitore div"i nostri semi "È disegnato con le proprietà descritte di seguito:
"Schermo "La proprietà viene utilizzata per impostare il comportamento di visualizzazione. Il valore flessibile crea un layout flessibile. "giustificare il contenuto "La proprietà allinea orizzontalmente gli elementi dell'elemento flessibile. Stile "Servizio" Div
.I nostri servizi .servizio IL ".I nostri servizi .servizio "Si riferisce al bambino div"servizio ”Di Parent Div"I nostri servizi "Div. Ogni servizio è definito con il testo della proprietà allineato con il Centro Value.
Elemento "pulsante" di stile
.Pulsante dei nostri servizi La proprietà "margine-top "È utilizzato per impostare lo spazio sopra l'elemento pulsante.
Elemento "footer" di stile
Footer Il tag del piè di pagina è disegnato come segue:
"imbottitura "È impostato per dare spazio sulla parte superiore del contenuto del piè di pagina. "imbottitura "È impostato per dare spazio nella parte inferiore del contenuto del piè di pagina. "colore di sfondo "È impostato per applicare il colore sul retro del piè di pagina. "colore "Specifica il colore del carattere. "allineamento "È impostato come centro. Passaggio 5: salva il file HTML e aprilo nel browser
Salva il file HTML utilizzando la combinazione chiave "Ctrl+s "O salva selezionando il"Salva "Opzione dal menu File nell'angolo in alto a sinistra dell'editor. Quindi, fai clic con il pulsante destro del mouse nella finestra di lavoro del codice Visual Studio e fai clic su "Apri con il server live "Opzione dal menu a discesa come mostrato di seguito:
Nota: Se non hai installato l'estensione del server live, segui il nostro altro post dedicato.
Come puoi vedere, abbiamo creato e disegnato con successo il nostro sito Web:
Si trattava di costruire un sito Web con codice HTML e CSS.
Conclusione
La lingua di markup ipertestuale è lo standard per creare pagine Web. Ci sono centinaia di elementi che vengono utilizzati nei file HTML. Ogni elemento viene utilizzato per alcune attività specifiche per l'applicazione Web. Per scrivere il codice HTML, è essenziale utilizzare un editor di testo come il testo sublime, il codice Visual Studio, il blocco note ++ o altro ancora. Questo articolo ha spiegato con successo la procedura passo-passo per creare un sito Web HTML nel codice Visual Studio.
