-
Notifications
You must be signed in to change notification settings - Fork 0
HTML
HTML - HyperText Markup Language
It is a markup language used for creating and structuring content on the web
It provides a set of markup tags and attributes that can be used to define the layout and content of a web page.
HTML documents are structured as a tree of elements, where each element is enclosed by a start tag and an end tag, and can contain other elements and text content.
Some common HTML elements include headings, paragraphs, lists, images, links, and forms.
Web browsers use HTML to render web pages, interpreting the markup and displaying the content and layout as specified by the HTML document
HTML can also be combined with other web technologies like CSS (Cascading Style Sheets) and JavaScript to create dynamic and interactive web pages.
In HTML, elements are the building blocks of web pages, and they are used to define the structure and content of a web page.
Elements consist of a start tag, content, and an end tag. The start tag is enclosed in angle brackets, and the end tag is enclosed in angle brackets with a forward slash preceding the element name.
For example, the following code defines an HTML element that creates a paragraph:
<p>This is a paragraph.</p>In this code, the start tag is <p>, the content is "This is a paragraph.", and the end tag is </p>.
Here is a list of some common HTML elements:
- Headings:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Paragraphs:
<p> - Links:
<a> - Images:
<img> - Lists:
<ul>, <ol>, <li> - Tables:
<table>, <tr>, <th>, <td> - Forms:
<form>, <input>, <select>, <textarea>, <button> - Divisions:
<div> - Spans:
<span> - Sections:
<section> - Articles:
<article> - Headers:
<header> - Footers:
<footer> - Navigation menus:
<nav> - Multimedia:
<audio>, <video>
Attributes are properties used to provide additional information about an element or to modify its behavior.
Attributes are specified within the opening tag of an element, and they consist of a name and a value, separated by an equal sign and enclosed in quotes.
<img src="image.jpg" alt="An example image">In this example, the img element creates an image, and it has two attributes: src and alt. The src attribute specifies the URL of the image file, while the alt attribute provides alternative text that is displayed if the image cannot be loaded or if it is inaccessible to users.
Some common attributes used in HTML include:
-
id: A unique identifier for the element, which can be used for scripting or styling purposes. -
class: A space-separated list of classes that can be used to apply styles to the element. -
style: Inline styles that are applied to the element, using CSS syntax. -
href: The URL of a link. -
src: The URL of an image or other media file. -
alt: Alternative text for an image. -
title: A tooltip that is displayed when the user hovers over the element. -
height: Sets the height of the element. -
name: Specifies the name of the element, which can be used for --- scripting purposes. -
value: Specifies the value of the element, such as the value of a form input field. -
placeholder: Provides placeholder text for form input fields. -
checked: Sets the initial checked state of a checkbox or radio button. -
disabled: Disables the element, making it unselectable or unclickable. -
readonly: Specifies that the element is read-only and cannot be edited by the user.
HTML documents are plain text documents saved with an .html file extension
All HTML documents have a required structure that includes the following declaration and elements: , ,
The declaration is used to indicate that the document is written in HTML5, and it helps the browser to render the document correctly.
The element is used to enclose the entire HTML document, and it contains two child elements: and .
The element is used to provide metadata about the document, such as the title, description, and keywords. It can also contain links to external stylesheets and scripts, as well as other meta tags.
The element is used to enclose the main content of the document, including text, images, links, and other HTML elements. This is the part of the document that is visible in the browser window.
Here is a basic outline of the structure of an HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- page content goes here -->
</body>
</html>Self-closing elements in HTML are those elements that do not require a closing tag, and instead use a self-closing tag to indicate the end of the element. These elements are used to insert images, line breaks, input fields, and other types of content that do not require a closing tag.
-
<br>: Inserts a single line break -
<embed>: used to embed multimedia content, such as audio or video, into an HTML document. -
<hr>: Inserts a horizontal line -
<img>: used to insert images into an HTML document. -
<input>: Creates an input field for a form -
<link>: Links to an external stylesheet or script -
<meta>: Provides metadata about the document, such as the character encoding and keywords -
<param>: used in conjunction with the<object>element to provide parameters for embedded content -
<source>: used to specify alternative versions of media content, such as audio or video, for different browsers and devices. -
<wbr>: used to specify a word break opportunity in a block of text. It indicates a point at which a line break may be inserted if necessary to avoid breaking a word in an awkward or unreadable way.
The Document Object Model, or DOM for short, is a programming interface for web documents. It represents the web page so that programs can change the document structure, style, and content.
The DOM represents the document as nodes and objects, which can be easily modified with scripting languages such as JavaScript.
When a web page is loaded, the browser creates a Document Object Model of the page, which can be accessed and manipulated using scripting languages such as JavaScript.
The DOM is a tree-like structure of nodes, which represent the various parts of the document such as elements, text, and attributes.
Each element in an HTML document is represented by a node in the DOM. The node contains information about the element such as its tag name, attributes, and any child elements or text content. Nodes can be accessed and modified using JavaScript, allowing developers to create dynamic and interactive web pages.
When you type a web address or click a link to navigate to a webpage, the browser goes through several steps to load the page. Here's a general overview of the process:
- DNS lookup: The first step is for the browser to look up the IP address of the web server that hosts the webpage. The browser sends a request to the Domain Name System (DNS) to resolve the domain name to an IP address.
- HTTP request: Once the browser has the IP address, it sends an HTTP request to the web server for the webpage. The request contains information such as the requested URL, any cookies, and the type of request (e.g. GET, POST).
- Server response: The web server receives the request and generates a response. The response typically contains the HTML, CSS, and JavaScript files needed to render the webpage in the browser. The server also sends information such as the HTTP status code, which indicates whether the request was successful or not.
- Rendering the page: Once the browser receives the server's response, it begins rendering the page. The browser reads the HTML code and generates a Document Object Model (DOM) tree of the webpage. It then applies the CSS styles to the elements in the DOM, and finally executes any JavaScript code on the page. This process may involve multiple requests and responses to the server, as additional resources such as images and videos are loaded.
- Displaying the page: Once the browser has finished rendering the page, it displays the final result to the user. This may involve scrolling, zooming, and other interactions with the page.