HyperText Markup Language oder HTML ist eine Sprache, die die Erstellung von Websites ermöglicht, die für jeden sichtbar sind, der mit dem Internet verbunden ist. Laut einer Umfrage gaben über 55 % der Befragten an, HTML zu verwenden.
Darüber hinaus ist das Erlernen von HTML normalerweise der erste Schritt auf dem Weg eines Webentwicklers. Ein durchschnittlicher Webentwickler verdient 61.718 US-Dollar pro Jahr, wobei Top-Entwickler die 103.000-Dollar-Marke überschreiten.
HyperText ist die Möglichkeit, online zu gehen, indem man auf einen Text namens Hyperlinks klickt, der zur nächsten Seite führt.
Wichtige Erkenntnisse
Der Basiscode besteht aus einer Doctype-Deklaration, einem HTML-Tag, einem Head-Tag, einem Title-Tag und einem Body-Tag.
Es kann auf jedem Betriebssystem wie Windows, Mac und Linux sowie in jedem Browser wie Google Chrome, Mozilla Firefox und Safari ausgeführt werden.
Es gibt auch verschiedene Anwendungen, wie zum Beispiel das Erstellen persönlicher Blogs, Detailtabellen, Registrierungsformulare, Landingpages, Newsletter und Online-Portfolios.
Die Vorteile sind, dass es ein offener Standard ist, leicht zu erlernen, anfängerfreundlich mit hervorragender Community-Unterstützung und suchmaschinenfreundlich.
Zu den Nachteilen gehören schlechte Sicherheit, mangelnde Designflexibilität, inkonsistente Ausgabe auf verschiedenen Browsern und eingeschränkte Funktionalität.
Teilmengen von HTML
1. XHTML (Extensible Hypertext Markup Language)
XHTML ist eine XML-basierte Auszeichnungssprache, was bedeutet, dass sie strengen Syntax- und Semantikregeln folgt.
XHTML war ein Nachfolger von HTML 4 mit dem Ziel, die Sprache modularer und erweiterbarer zu machen.
XHTML-Dokumente müssen wohlgeformt und gültig sein, wodurch sie schwieriger zu erstellen und konsistenter und für eine breitere Palette von Geräten zugänglich sind.
2. SGML (Standard Generalized Markup Language)
SGML ist eine Metasprache, die zum Definieren von Auszeichnungssprachen, einschließlich HTML, verwendet wird.
SGML bietet eine Standardsyntax zur Beschreibung der Struktur und des Inhalts eines Dokuments und ist somit nützlich für den Informationsaustausch zwischen verschiedenen Systemen.
SGML ist ein komplexes und leistungsstarkes System, aber aufgrund seiner Syntax und Komplexität ist es weniger verbreitet als einfachere Auszeichnungssprachen wie HTML.
3. DHTML (Dynamisches HTML)
DHTML bezieht sich auf die Verwendung von HTML, CSS und JavaScript zum Erstellen dynamischer, interaktiver Webseiten.
DHTML ermöglicht die Manipulation des Inhalts, des Layouts und des Verhaltens einer Webseite als Reaktion auf Benutzeraktionen, ohne dass eine Seitenaktualisierung erforderlich ist.
DHTML wird häufig zum Erstellen dynamischer Effekte wie Dropdown-Menüs, Tooltips und Diashows verwendet.
Es können auch einfache Animationen und Spiele erstellt werden.
4. TTML2 (Timed Text Markup Language 2)
TTML2 ist eine Auszeichnungssprache, die zur standardisierten Darstellung zeitgesteuerter Textinhalte wie Bildunterschriften und Untertitel verwendet wird.
TTML2 bietet einen umfassenden Satz an Funktionen zum Formatieren und Gestalten von zeitgesteuertem Text, einschließlich der Unterstützung mehrerer Sprachen und Schriftarten.
TTML2 ist ein wichtiges Tool, um die Zugänglichkeit von Multimedia-Inhalten für gehörlose und schwerhörige Benutzer sicherzustellen und die Benutzerfreundlichkeit von Videoinhalten für alle Benutzer zu verbessern.
HTML-Vorlage
Jede HTML-Seite verfügt über eine grundlegende Vorlage. Es besteht aus den folgenden Abschnitten:
Dokumenttyp-Deklaration: Die erste Zeile eines HTML-Dokuments ist der Doctype oder die Dokumenttyp-Deklaration, die die verwendete HTML-Version definiert.
Syntax:
<!DOCTYPE html>
Element: Das Element ist das Stammelement eines HTML-Dokuments, das alle anderen Elemente enthält.
Syntax:
<html>...</html>
Head-Element: Das Head-Element enthält Informationen über das Dokument, wie z. B. den Titel, Metadaten und Links zu externen Ressourcen wie Stylesheets.
Syntax:
<head>...</head>
Titelelement: Das Titelelement definiert den Titel des Dokuments, der in der Titelleiste des Browsers angezeigt wird.
Syntax:
<title>Name of Web Page</title>
Body-Element: Das Body-Element enthält den Hauptinhalt des Dokuments, einschließlich Text, Bildern und anderen Medien.
Syntax:
<body>...</body>
Abgesehen von diesen grundlegenden Tags können mehrere andere Elemente dabei helfen, Inhalte hinzuzufügen, um eine großartige Website zu erstellen. Das sind-
Überschriften: Überschriften (H1, H2, H3 usw.) helfen, den Inhalt zu strukturieren und eine Informationshierarchie bereitzustellen.
<a href="https://www.EDUCBA.com">Link to EDUCBA website</a>
Images: Images () can provide visual content in a document.
Syntax:
<img src="image.jpg" alt="Image Description">
Code:
<!DOCTYPE html>
EDUCBA’s Page
Hello World! This is EDUCBA’s first web page.
Output:
How to Create an HTML Table?
There are specific table tags to create a table – mainly,
,
,
, and
.
Pre-requisites for HTML Table
For an absolute beginner, it is essential to know what the different table tags do before writing a basic code.
: Defines a table
: Defines a table row
: Defines a table header cell
: Defines a table data cell
Student Details Table
John has to create a webpage showing the names of students in a class along with their marks in mathematics and science. He draws the following table.
Name
Mathematics
Science
Mary
78
92
Susan
98
84
Amy
63
79
Now, John wants to write the code to transform this table into an HTML table on a webpage. The steps-
Step #1: Open an HTML code editor. This tutorial demonstrates how to write code in Visual Studio Code. If the PC doesn’t have VS Code, one can download it here.
Step #2: Select File > New Text File.
Step #3: Click on “Select a language” and then type HTML in the text box. Choose the HTML option to create a new HTML file.
Step #4: Again, go to File > Save As and save the file with the filename.html format.
Step #5: Add the basic code, i.e., HTML template of doctype declaration, HTML tag, head tag, title tag, and body tag, as shown below. Set the title as Student Details.
Code:
<!DOCTYPE html>
Student Details
Output:
Opening the file should show the following blank web page. Note the title in the browser tab has changed to “Student Details.”
Step #6: Now, define the table using the
tag inside the body tag. Define the first row using the
tag, and add 3 headings cells – Name, Mathematics, and Science, using the
tag. Don’t forget to close the tags with a corresponding closing tag.
To create web pages, provide the structure and content for displaying information in a web browser.
E-commerce
To create online stores, product catalogs, and shopping carts, allowing customers to purchase products and services online.
Landing pages
To develop compelling landing pages for websites that capture a visitor’s attention and encourage them to take a specific action.
Newsletters
It allows the creation of interactive and visually appealing newsletters, such as corporate newsletters, that deliver to subscribers via email.
Online portfolios
To create online portfolios for artists, photographers, and other creatives, showcasing their work and skills to potential clients and employers.
Blogs
One can create blogs, which are personal websites that provide a platform for writing and publishing articles and other content.
Documentation
It helps to create documentation and help files, providing information and guidance to users of the software and other products.
Advertisements
It can help make advertisements embedded on websites and social media platforms, promoting products and services to a wide audience.
Forms
To create a form, one can use
Advantages and Disadvantages
Pros
Cons
Open Standard: It is free of cost and readily available.
Limited Functionality: It cannot perform complex tasks like calculations or data storage.
Easy to Learn: HTML tags are basic and in a readable format, enclosed in angle brackets. It’s easy to learn and use, even for non-programmers.
Poor Security: It is vulnerable to security threats such as cross-site scripting (XSS) and SQL injection.
Search Engine Friendly: Search engines can easily crawl and index the content of the pages.
Inconsistent Browsers: Different browsers render HTML differently, leading to an inconsistent display of web pages on different browsers.
Community Support: It has large community support and many online resources available for learning and troubleshooting.
Poor Design Flexibility: It provides limited design options and creates static websites, making it difficult to create visually appealing dynamic websites without integrating CSS and JavaScript.
Final Thoughts
In conclusion, Hypertext Markup Language is a cornerstone of the World Wide Web. It provides a standardized way of defining the structure and content of a web page using a combination of tags and attributes. With HTML, one can create simple text-based web pages or complex, multimedia-rich applications. It is easy to learn and widely used, making it an essential skill for anyone interested in web development.
FAQs
Q1. How to convert an HTML to PDF?
Answer: To convert, use a library or online service that supports HTML to PDF conversion.
Q2. How to add an image in HTML?
Answer: To add an image, use the tag with the src attribute pointing to the image file’s URL or local path. Example:
<img src="image.jpg" alt="Alt text">
Q3. Is HTML a programming language? What is the HTML used for?
Answer: Hypertext Markup Language is not a programming language, it is a markup language used for creating web pages and other information displayed in a web browser. HTML defines the structure and content of a web page using a set of markup tags.
Q4. How to add a video in HTML?
Answer: To add a video, use the
<video src="video.mp4"></video>
One can also add controls to play, pause, and adjust volume with the controls attribute:
<video src="video.mp4" controls></video>
Q5. Is HTML case-sensitive?
Answer: No, elements are not case-sensitive. However, as best practice, it’s good to follow the same casing in all tags or elements to improve code readability.
Q6. How many tags are in HTML?
Answer: There are over 140 tags specified in the HTML5 standard, but some of them have become obsolete and are not widely used. Commonly used tags include headings, paragraphs, links, images, lists, tables, forms, and multimedia elements like audio and video.
Q7. What is HTML doctype?
Answer: The first line of a document is the doctype or document type declaration, which defines the version of the HTML used. Example:
<!DOCTYPE html>
Q8. What is an HTML header?
Answer: The HTML tag defines a header section in a document. This section typically contains information such as the page title, logo, and navigation menu. The header section is usually displayed at the top of the page, and its content is typically shared across multiple pages of a website. The header tag helps to define the structure and hierarchy of a web page and makes it easier to create a consistent look and feel across multiple pages.
Das obige ist der detaillierte Inhalt vonWas ist HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
HTML5, CSS und JavaScript sollten effizient mit semantischen Tags, angemessenen Ladereihenfolge und Entkopplungsdesign kombiniert werden. 1. Verwenden Sie HTML5-Semantik-Tags, wie z. B. die Verbesserung der strukturellen Klarheit und Wartbarkeit, was dem SEO und barrierefreien Zugang förderlich ist. 2. CSS sollte eingerichtet werden, externe Dateien verwenden und nach dem Modul aufgeteilt werden, um Inline -Stile und verzögerte Ladeprobleme zu vermeiden. 3. JavaScript wird empfohlen, voran vorzugehen, und verwenden Sie Defer oder Async, um asynchron zu laden, um das Blockieren des Renders zu vermeiden. 4. Reduzieren Sie die starke Abhängigkeit zwischen den drei, führen Sie das Verhalten durch Datenattribute und den Status der Klassennamen und verbessern Sie die Zusammenarbeit Effizienz durch einheitliche Benennungsspezifikationen. Diese Methoden können die Seitenleistung effektiv optimieren und mit Teams zusammenarbeiten.
Um HTML -Schaltflächenelemente zu verwenden, um anklickbare Schaltflächen zu erreichen, müssen Sie zunächst die grundlegende Verwendung und gemeinsame Vorsichtsmaßnahmen beherrschen. 1. Erstellen Sie Schaltflächen mit Tags und definieren Sie Verhaltensweisen durch Typattribute (z. B. Schaltfläche, Senden, Zurücksetzen), die standardmäßig übermittelt werden. 2. Fügen Sie interaktive Funktionen über JavaScript hinzu, die über ID geschrieben werden können, um Ereignishörer zu verbinden, um die Wartung zu verbessern. 3.. Verwenden Sie CSS, um Stile anzupassen, einschließlich Hintergrundfarbe, Grenze, abgerundete Ecken und Schwebe-/aktive Statusffekte, um die Benutzererfahrung zu verbessern. 4. Achten Sie auf häufige Probleme: Stellen Sie sicher, dass das behinderte Attribut nicht aktiviert ist. Meistere das
Metadaten in HTMLhead sind entscheidend für das Verhalten von SEO-, Social Sharing und Browser. 1. Setzen Sie den Seitentitel und die Beschreibung, verwenden Sie es und halten Sie es präzise und einzigartig. 2. Fügen Sie OpenGraph- und Twitter -Karteninformationen hinzu, um die Auswirkungen auf die soziale Freigabe zu optimieren, auf die Bildgröße zu achten und Debugging -Tools zum Testen zu verwenden. 3. Definieren Sie die Einstellungen für den Zeichensatz und die Ansichtsfenster, um sicherzustellen, dass die Unterstützung mehrsprachiger Unterstützung an das mobile Terminal angepasst wird. 4. Optionale Tags wie das Urheberrecht des Autors, die Kontrolle der Roboter und die kanonische Verhindern doppelter Inhalte sollten auch vernünftig konfiguriert werden.
Es ist ein Element auf Blockebene, das zum Layout geeignet ist. Es ist ein Inline -Element, das zum Wickeln von Textinhalten geeignet ist. 1. Nehmen Sie ausschließlich eine Linie ein, Breite, Höhe und Ränder können festgelegt werden, die häufig im strukturellen Layout verwendet werden. 2. Keine Zeilenumbrüche, die Größe wird durch den Inhalt bestimmt und ist für lokale Textstile oder dynamische Operationen geeignet. 3. Bei der Auswahl sollte es beurteilt werden, ob der Inhalt unabhängiger Raum benötigt. 4. Es kann nicht verschachtelt werden und ist nicht zum Layout geeignet. 5. Priorität wird der Verwendung semantischer Etiketten zur Verbesserung der strukturellen Klarheit und Zugänglichkeit erteilt.
Es ist bequemer, Formulardaten mithilfe der FormData -API von HTML5 einzureichen. 1. Es kann automatisch Formularfelder mit Namensattribut erfassen oder manuell Daten hinzufügen. 2. Es unterstützt die Einreichung im Multipart/Form-Daten-Format über Fetch oder XMLHTTPrequest, das für das Datei-Upload geeignet ist. 3. Wenn Sie Dateien bearbeiten, müssen Sie die Datei nur an Formdata anhängen und eine Anfrage senden. V.
MSE (MediaSourceExtensions) ist Teil des W3C -Standards und ermöglicht es JavaScript, Medienströme dynamisch zu erstellen, wodurch erweiterte Video -Wiedergabefunktionen ermöglicht werden. Es verwaltet Medienquellen über MediaSource, speichert Daten von SourceBuffer und stellt den Pufferzeitbereich über Timerangen dar, sodass der Browser Videoclips dynamisch laden und dekodieren kann. Der Prozess der Verwendung von MSE umfasst: ① Erstellen einer MediaSource -Instanz; ② Binden Sie es an ein Element; ③ SourceBuffer hinzufügen, um Daten in einem bestimmten Format zu empfangen. ④ Segmentierte Daten über Fetch () abrufen und an den Puffer anhängen. Zu den gemeinsamen Vorsichtsmaßnahmen gehören: ① Formatkompatibilitätsprobleme; ② Zeitstempelpaar
Html5IntroducucuedNewinputTyphatenhanceFunctionFunctionality undUseRexperienceByimProvingValidation, UI und MobileKeyboardLayouts.1.EmailvalidateSeMailAddresSandSupportsmultiplegers.UrlchKKSForvalidwebedriggersandGergersandGhergeridwebedriggersandriggersurl-optimierungskks
HTML5 -Tags können Webseiten -Fortschrittsbalken direkt implementieren. 1. Die grundlegende Nutzung besteht darin, die Wert- und Maxattribute festzulegen, z. B. die Anzeige von 30% Fortschritt. 2. Wenn der Fortschritt unbekannt ist, kann der Wert weggelassen und nur max eingestellt werden, was einen ungewisse Zustand bedeutet; 3.. Sie können den Stil über CSS anpassen, und die Browserkompatibilität muss behandelt werden. 4. Es wird häufig in Szenarien wie Hochladen von Dateien, Formularfortschritt und Laden von Spielen verwendet. 5. Achten Sie darauf, dass Sie es vermeiden, wenn die Aufgabe zu schnell erledigt wird, und berücksichtigen Sie die Kompatibilitätsprobleme der alten Version des IE.
