diff --git a/docs/dsa/arrays/2d-arrays.md b/docs/dsa/arrays/2d-arrays.md deleted file mode 100644 index dfd07acfa..000000000 --- a/docs/dsa/arrays/2d-arrays.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: two-dimensional-arrays-DSA -title: Two-Dimensional Arrays -sidebar_label: Two-Dimensional Arrays -sidebar_position: 5 -description: "In this blog post, we'll delve into the world of two-dimensional arrays, a vital data structure in programming. You'll learn what 2D arrays are, how to initialize and traverse them, and their common uses in real-world applications like matrix operations, image processing, and game boards. We'll also tackle classic algorithmic challenges involving 2D arrays, such as rotating a matrix and finding the largest sum subgrid. By the end, you'll have a solid understanding of how to effectively use 2D arrays to solve complex problems in your programming projects." -tags: [dsa, arrays, 2d arrays] ---- - -Welcome, curious coder! Today, we embark on an exciting journey through the world of two-dimensional arrays. These versatile data structures are the backbone of numerous algorithmic problems and are a staple in the toolkit of any proficient programmer. Whether you're working on games, simulations, or complex data analysis, understanding 2D arrays is crucial. Let's dive in and explore their structure, uses, and how to manipulate them efficiently. - -## What is a Two-Dimensional Array? - -Imagine a spreadsheet, a grid of rows and columns where each cell can hold a piece of data. This is essentially what a two-dimensional (2D) array is: a collection of data organized in a tabular format. Instead of having a single index like a one-dimensional array, a 2D array uses two indices to access its elements, typically represented as `array[row][column]`. - -In pseudo-code, we define a 2D array as follows: - -``` -DECLARE array[rowCount][columnCount] -``` - -In C++, this can be represented as: - -```cpp -int array[rowCount][columnCount]; -``` - -## Initializing a 2D Array - -Initialization of a 2D array can be done in multiple ways. Here’s a simple example in pseudo-code: - -``` -DECLARE array[3][3] -array[0][0] = 1 -array[0][1] = 2 -array[0][2] = 3 -array[1][0] = 4 -array[1][1] = 5 -array[1][2] = 6 -array[2][0] = 7 -array[2][1] = 8 -array[2][2] = 9 -``` - -And here’s how it looks in C++: - -```cpp -int array[3][3] = { - {1, 2, 3}, - {4, 5, 6}, - {7, 8, 9} -}; -``` - -## Traversing a 2D Array - -One of the fundamental operations is traversing a 2D array. This is often done using nested loops. Here’s a pseudo-code example to print all elements of a 3x3 array: - -``` -FOR row FROM 0 TO 2 - FOR column FROM 0 TO 2 - PRINT array[row][column] -``` - -And in C++: - -```cpp -for (int row = 0; row < 3; ++row) { - for (int column = 0; column < 3; ++column) { - std::cout << array[row][column] << " "; - } - std::cout << std::endl; -} -``` - -## Common Uses of 2D Arrays - -Two-dimensional arrays shine in various algorithmic problems and real-world applications. Here are a few common scenarios where 2D arrays are indispensable: - -### 1. Matrix Operations - -Matrices are a classic use case for 2D arrays. Operations like addition, subtraction, and multiplication of matrices are performed using nested loops to iterate over the elements. - -Matrix Addition Pseudo-Code: - -``` -DECLARE matrixA[rowCount][columnCount] -DECLARE matrixB[rowCount][columnCount] -DECLARE matrixSum[rowCount][columnCount] - -FOR row FROM 0 TO rowCount - 1 - FOR column FROM 0 TO columnCount - 1 - matrixSum[row][column] = matrixA[row][column] + matrixB[row][column] -``` - -Matrix Addition in C++: - -```cpp -int matrixA[2][2] = {{1, 2}, {3, 4}}; -int matrixB[2][2] = {{5, 6}, {7, 8}}; -int matrixSum[2][2]; - -for (int row = 0; row < 2; ++row) { - for (int column = 0; column < 2; ++column) { - matrixSum[row][column] = matrixA[row][column] + matrixB[row][column]; - } -} -``` - -### 2. Image Processing - -Images can be represented as 2D arrays where each element corresponds to a pixel value. Manipulating images, applying filters, or detecting edges often involves traversing and modifying 2D arrays. - -### 3. Game Boards - -Games like chess, tic-tac-toe, and Sudoku use 2D arrays to represent the game board. Each element in the array represents a cell on the board, storing the state of the game. - -Example: Tic-Tac-Toe Board in Pseudo-Code - -``` -DECLARE board[3][3] -board[0][0] = 'X' -board[0][1] = 'O' -board[0][2] = 'X' -board[1][0] = 'O' -board[1][1] = 'X' -board[1][2] = 'O' -board[2][0] = 'X' -board[2][1] = 'X' -board[2][2] = 'O' -``` - -## Algorithmic Challenges Involving 2D Arrays - -2D arrays often appear in algorithmic challenges and coding interviews. Here are a couple of classic problems: - -### 1. Rotating a Matrix - -Given an `N x N` matrix, rotate it 90 degrees clockwise. This involves first transposing the matrix and then reversing the rows. - -Rotation Pseudo-Code: - -``` -DECLARE matrix[N][N] - -// Transpose the matrix -FOR row FROM 0 TO N - 1 - FOR column FROM row TO N - 1 - SWAP matrix[row][column] WITH matrix[column][row] - -// Reverse each row -FOR row FROM 0 TO N - 1 - REVERSE matrix[row] -``` - -Rotation in C++: - -```cpp -int matrix[N][N]; // Assume this is initialized - -// Transpose the matrix -for (int row = 0; row < N; ++row) { - for (int column = row; column < N; ++column) { - std::swap(matrix[row][column], matrix[column][row]); - } -} - -// Reverse each row -for (int row = 0; row < N; ++row) { - std::reverse(matrix[row], matrix[row] + N); -} -``` - -### 2. Finding the Largest Sum Subgrid - -Given a `M x N` matrix, find the subgrid with the largest sum. This problem can be solved using dynamic programming and is a 2D extension of the 1D maximum subarray problem (Kadane's algorithm). - -Largest Sum Subgrid Pseudo-Code: - -``` -DECLARE maxSum = -INFINITY -FOR startRow FROM 0 TO M - 1 - DECLARE temp[columnCount] - FOR endRow FROM startRow TO M - 1 - FOR column FROM 0 TO N - 1 - temp[column] = temp[column] + matrix[endRow][column] - DECLARE currentMax = Kadane(temp) - maxSum = MAX(maxSum, currentMax) -``` - -## Tips for Working with 2D Arrays - -1. **Boundary Checks**: Always ensure your indices are within the bounds of the array to avoid runtime errors. -2. **Memory Considerations**: Be mindful of the memory usage, especially for large 2D arrays, as they can consume a significant amount of memory. -3. **Initialization**: Properly initialize your arrays to avoid unexpected behavior due to garbage values. - -## In Conclusion - -Two-dimensional arrays are a fundamental data structure that every programmer should master. They are used in a wide variety of applications, from simple data storage to complex algorithmic challenges. By understanding how to manipulate and use 2D arrays effectively, you'll be well-equipped to tackle a broad range of programming problems.
- -So, next time you encounter a grid-based problem or need to perform operations on tabular data, you'll have the confidence and knowledge to use 2D arrays to their full potential. Happy coding! \ No newline at end of file diff --git a/docs/html/html-basics/attributes-and-values.md b/docs/html/html-basics/attributes-and-values.md new file mode 100644 index 000000000..757e320fa --- /dev/null +++ b/docs/html/html-basics/attributes-and-values.md @@ -0,0 +1,107 @@ +--- +id: attributes-and-values +title: HTML Attributes and Values +sidebar_label: Attributes and Values +sidebar_position: 3 +tags: [html, web-development, attributes, values] +description: In this tutorial, you will learn about HTML attributes and values. HTML attributes provide additional information about elements, and values define the specific settings or properties of the attributes. +keywords: [html, web development, attributes, values, html attributes, html values, html tutorial, html basics, web design, web pages, websites, html structure, html attributes tutorial, html values tutorial, html in 2024] +--- + +HTML Attributes and Values are used to provide additional information about HTML elements and define specific settings or properties for those elements. In this tutorial, you will learn about HTML attributes and values and how they are used in web development. + + + +## HTML Attributes + +HTML attributes are used to provide additional information about HTML elements. They are added to the opening tag of an element and consist of a name and a value. Attributes can be used to specify various settings or properties for elements, such as the source of an image, the target of a link, or the style of an element. + +Here is an example of an HTML element with attributes: + +```html title="index.html" +Visit Example +``` + +In this example, the `` element is an anchor element used to create hyperlinks. It has two attributes: `href` and `target`. The `href` attribute specifies the URL of the link destination, and the `target` attribute specifies how the link should be opened (in a new tab or window). + +HTML attributes can be added to various elements to customize their behavior or appearance. Some common attributes used in HTML include: + +| Attribute | Description | +| --------- | ----------- | +| `src` | Specifies the source URL of an image, audio, or video element. | +| `href` | Specifies the URL of the link destination for anchor elements. | +| `alt` | Specifies alternative text for images if the image cannot be displayed. | +| `class` | Specifies one or more class names for an element to apply CSS styles. | +| `id` | Specifies a unique identifier for an element to reference it in CSS or JavaScript. | +| `style` | Specifies inline CSS styles for an element to customize its appearance. | + +## HTML Attribute Values + +HTML attribute values define specific settings or properties for attributes. They are assigned to attributes using the `=` sign and enclosed in quotes (`"` or `'`). The value of an attribute can be a string, number, URL, color, or other data types depending on the attribute. + +Here is an example of an HTML element with attribute values: + +```html title="index.html" +Image Description +``` + +In this example, the `` element is an image element with attributes such as `src`, `alt`, `width`, and `height`. The attribute values specify the image source URL, alternative text, width, and height of the image, respectively. + +HTML attribute values can be used to customize the behavior, appearance, or functionality of elements on a web page. By using attributes and values effectively, you can create interactive and visually appealing web pages for users. + +:::tip +### Best Practices for Using HTML Attributes and Values + +- Use attributes to provide additional information about elements and improve accessibility. +- Use attribute values that are relevant and descriptive to enhance the user experience. +- Avoid using inline styles (`style` attribute) for complex styling and prefer external CSS for better maintainability. +- Validate attribute values to ensure they are correct and follow the HTML specification. +- Keep attribute values consistent across similar elements for a cohesive design. +- Use attributes and values that are supported by all major browsers for better compatibility. +- Test your web pages across different devices and browsers to ensure attributes and values work as expected. +- Follow best practices for SEO by using attributes like `alt` for images and `title` for links. +- Keep attribute values short and concise to improve readability and maintainability of the code. + +By following these best practices, you can create well-structured and user-friendly web pages that adhere to web standards and provide a positive experience for visitors. + +::: + +## For Example + +Let's consider an example where we use HTML attributes and values to create a simple web page with an image and a link: + +```html title="index.html" + + + + + + My Web Page + + +

Welcome to My Web Page

+ An image +

This is a simple web page with an image and a link.

+ Visit My Portfolio + + +``` + +Now, let's visualize the web page created using the above HTML code: + + +<> +

Welcome to My Web Page

+ An image +

This is a simple web page with an image and a link.

+ Visit My Portfolio + + + +In this example, we have used HTML attributes like `src`, `alt`, `width`, `height`, `title`, `href`, and `target` to create a web page with an image and a link. The attribute values define the source URL, alternative text, dimensions, title, link URL, and link target for the elements. + +By using attributes and values effectively, you can create engaging and informative web pages that provide a rich user experience. + +## Conclusion + +HTML attributes and values play a crucial role in web development by providing additional information about elements and customizing their behavior or appearance. By using attributes effectively and assigning appropriate values, you can create interactive and visually appealing web pages that meet the needs of users. Understanding how attributes and values work is essential for building accessible, responsive, and user-friendly websites. In the next sections, we will explore more advanced topics related to HTML attributes and values to enhance your web development skills. \ No newline at end of file diff --git a/docs/html/html-basics/document-structure.md b/docs/html/html-basics/document-structure.md index f33d21fc8..d62403849 100644 --- a/docs/html/html-basics/document-structure.md +++ b/docs/html/html-basics/document-structure.md @@ -1,5 +1,5 @@ --- -id: document-structure.md +id: document-structure title: HTML Document Structure sidebar_label: Document Structure sidebar_position: 4 diff --git a/static/bg-img.gif b/static/bg-img.gif deleted file mode 100644 index 26679d60c..000000000 Binary files a/static/bg-img.gif and /dev/null differ diff --git a/static/bg.gif b/static/bg.gif deleted file mode 100644 index 26679d60c..000000000 Binary files a/static/bg.gif and /dev/null differ