Struttura del documento HTML: impara la struttura di base dell'HTML

Pubblicato: 2020-12-14

L'HTML è stato utilizzato come linguaggio di marcatura standard per i documenti accessibili su Internet tramite i dati del browser. L'HTML è costituito da una serie di brevi elementi, tag e codici che, se compilati insieme in un formato strutturato, creano una pagina Web che chiunque può visualizzare con un corretto accesso a Internet.

Ha cambiato il modo di lavorare delle persone. HTML e CSS vengono utilizzati per creare e manipolare elementi su una pagina web insieme a javascript, HTML consente ai creatori di definire ruoli diversi per ogni elemento dando piena libertà di personalizzazione nel processo di creazione.

HTML sta per Hyper Text Markup Language e viene utilizzato per progettare pagine Web visualizzate sui siti Web.

Ci sono tre aspetti principali che, se messi insieme, aiutano a costruire una pagina web.

Struttura HTML : supporta gli elementi strutturali
Stile CSS : aiuta la progettazione e dà uno stile a quegli elementi strutturali
Interazione JS : abilita l'interazione tra questi elementi

Nella struttura HTML, gli elementi e i tag sono accoppiati l'uno contro l'altro per contrassegnare il contenuto.

Ogni pagina disponibile su Internet include tag HTML. Questi tag aiutano a visualizzare i contenuti online con una prospettiva chiara e aperta, che può sempre essere moderata e modificata. Per spiegare le cose in modo più semplicistico, descriviamo come vengono utilizzati elementi e tag nel programma.

Gli elementi di apertura e chiusura cambiano, ma i tag rimangono gli stessi. I tag vengono inseriti prima e alla fine delle frasi, consentendone la formattazione nella pagina. Una pagina web ideale è composta da tre sezioni principali ed essenziali:

Titolo
Testa
Corpo

L'elemento Testa viene utilizzato per evidenziare l'inizio/l'intestazione della sezione di testa. La sezione principale aiuta sempre come descrizione della pagina. Il contenuto all'interno dei tag head, cioè l'intestazione, è ciò che viene utilizzato come fonte per identificare il contenuto della pagina.

Di seguito sono elencati tutti i tag che possono essere utilizzati nell'elemento head:

<base>
<link>
<meta>
<no script>
<script>
<stile>
<titolo>

Per esempio:

<TESTA>

<TITLE> Un esempio Hello world in HTML<TITLE>

</HEAD>

Gli elementi a livello di blocco vengono utilizzati per identificare sezioni specifiche di una pagina Web, che si tratti di un paragrafo, di sottotitoli o di alcuni elenchi da creare.

Paragrafo: <P>e </P>

Intestazione, livello uno:<H1>Intestazione, livello due:<H2>e </H2>

Regola orizzontale:<HR> Centratura:<CENTRO>

Piè di pagina : non ci sono tag speciali per denotarlo, ma si consiglia comunque di avere un piè di pagina nella pagina web per aiutare a identificare le sezioni che richiedono un contatto con l'autore. Possono includere una sezione FAQ o un'e-mail per iscriversi a una newsletter.

<HTML>

<TESTA>

<TITLE>Un'azienda di scarpe <TITLE>

</HEAD>

<CORPO>

<H1>Benvenuto in Amazing Shoes! </H1>: </H2>

<CENTRO> Perché non visitare <A HREF =..http://www.example1.com/..>Sito web di esempio

</A>

</CENTRO>

</CORPO>

</HTML>

La sezione precedente ha spiegato gli elementi principali in una pagina web di una struttura HTML.

Ora, ci spostiamo verso il sorgente HTML e cerchiamo di capire come si può usarlo per comprendere la struttura del programma ei suoi elementi.

Come principiante, questo aiuta molto a capire come vengono sviluppate le altre pagine e possono essere utilizzate come riferimento per creare una versione personalizzata per la tua pagina web.

Fai clic con il pulsante destro in un punto qualsiasi della pagina Web, quindi seleziona "visualizza sorgente pagina". Si aprirà una finestra che contiene il codice sorgente della pagina.

Per ispezionare una pagina

Fare clic con il pulsante destro in un punto qualsiasi della pagina Web, quindi selezionare "Ispeziona" per visualizzare l'elenco e i tipi di elementi utilizzati per creare quella specifica pagina Web. Includerebbe sia HTML che CSS, che possono essere modificati tramite il pannello di stile.

Con la spiegazione della struttura di base dell'HTML e dei suoi tag, passiamo ora alla comprensione degli elementi di base richiesti per scrivere il contenuto in HTML.

<p> Questo tag viene utilizzato in una pagina Web quando è necessario un paragrafo e per terminarlo viene utilizzato il tag </p>.

<br> Questo tag viene utilizzato per interrompere le righe ed è utilizzato principalmente per scrivere singole righe, siano esse contatti o indirizzi.

<hr> Questo tag viene utilizzato per separare i contenuti della pagina web in due sezioni.

Tutti i tag qui sono implementati in un codice di una pagina web di esempio

Impara: 21 idee per progetti di sviluppo web

INGRESSO

<html>

<testa>

</testa>

<corpo>

<h1>Struttura dell'HTML</h1>

<p>

Da upGrad Education<br>

<h>

Impara le basi <br>

<h>

Da upGrad Education<br>

</p>

</corpo>

</html>

Attributi

Per tutti i tag citati, viene utilizzato un attributo quando sono necessarie informazioni aggiuntive. Gli attributi sono definiti con due parametri, ovvero 'valore' e 'nome'.

Qui, il parametro 'name' ha una funzione per prendere il nome della proprietà che si ritiene assegnata. E il parametro 'value' ha una funzione simile per prendere il valore dei nomi delle proprietà allineati con l'elemento.

<img> Questo attributo viene utilizzato per aggiungere/incorporare un'immagine nella pagina web. Questo tag aiuterà a specificare il percorso dell'immagine. E <height> e <width> indicano rispettivamente l'altezza e la larghezza dell'immagine.

<alt> Questo attributo viene applicato quando l'immagine non può essere caricata a causa di un errore di connessione o per qualche altro motivo. Il tag alt funge da sottotitolo per l'immagine.

Iscriviti ai corsi di ingegneria del software dalle migliori università del mondo. Guadagna programmi Executive PG, programmi di certificazione avanzati o programmi di master per accelerare la tua carriera.

Leggi: 8 Idee e argomenti entusiasmanti per progetti Full Stack

Esempio

<html>

<corpo>

<h2>L'attributo src</h2>

<p>Le immagini HTML sono definite con il tag img e il nome del file dell'origine dell'immagine è specificato nell'attributo src:</p>

</corpo>

</html>

Per modificare lo stile del testo, la dimensione, il carattere e qualsiasi altra funzione relativa al testo, viene utilizzato il tag <style>

Esempio

<html>

<corpo>

<h2>L'attributo di stile</h2>

<p>L'attributo viene utilizzato per modificare gli stili, come il colore:</p>

<p style="color:red;">Questo è un paragrafo rosso.</p>

</corpo>

</html>

Con le applicazioni di modifica del testo, HTML fornisce anche tag per modificare il testo in richieste personalizzate utilizzando questi tag.

<b> – testo in grassetto
<strong> – Testo importante
<i> – Testo in corsivo
<em> – Testo enfatizzato
<mark> – Testo contrassegnato
<piccolo> – Testo più piccolo
<canc> – Testo eliminato
<ins> – Testo inserito
<sub> – Testo in pedice
<sup> – Testo in apice

Per riassumere l'articolo, abbiamo appreso le seguenti caratteristiche e nozioni di base dell'HTML:

Struttura HTML
Tag, elementi e loro tipi
Tag di base e loro applicazioni

Tutte queste caratteristiche, tag e attributi aiutano a comprendere la necessità dell'HTML.

Se sei interessato a saperne di più sullo sviluppo di software full-stack, dai un'occhiata al programma Executive PG di upGrad & IIIT-B in Full-stack Software Development, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa, oltre 9 progetti, e incarichi, status di Alumni IIIT-B, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.

Prepararsi per una carriera del futuro

Candidati ora per un Master in Ingegneria del Software