<!DOCTYPE>: This declaration defines the document type and version of HTML being used.
<!DOCTYPE html><html>: The root element that contains all other HTML elements on the page.
<html>
<!-- other HTML elements go here -->
</html><head>: Contains meta-information about the document, such as the title and links to external resources.
<head>
<!-- meta-information goes here -->
</head><title>: Sets the title of the web page, which is displayed in the browser's title bar or tab.
<title>Page Title</title><meta>: Provides metadata about the HTML document, such as character encoding and author information.
<meta charset="UTF-8">
<meta name="author" content="Your Name"><link>: Used to link external resources, like CSS stylesheets, to the HTML document.
<link rel="stylesheet" href="styles.css"><style>: Defines inline CSS styles for specific elements on the page.
<style>
/* CSS styles go here */
</style><script>: Used to include JavaScript code in the HTML document.
<script>
// JavaScript code goes here
</script><body>: Contains the visible content of the web page, including text, images, and other elements.
<body>
<!-- page content goes here -->
</body><h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings of decreasing importance, with<h1>being the most important and<h6>the least.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<!-- ... -->
<h6>Heading 6</h6><p>: Represents a paragraph of text.
<p>This is a paragraph of text.</p><a>: Creates hyperlinks to other web pages or resources.
<a href="https://example.com">Visit Example.com</a><img>: Embeds images in the web page.
<img src="image.jpg" alt="Description of the image"><ul>: Defines an unordered list, often used with<li>elements.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<!-- ... -->
</ul><ol>: Defines an ordered list, where list items are automatically numbered.
<ol>
<li>First item</li>
<li>Second item</li>
<!-- ... -->
</ol><li>: List item element, used within<ul>and<ol>to define individual list items.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul><div>: A generic container element often used for grouping and styling content.
<div>
<!-- content goes here -->
</div><span>: A generic inline container element for applying styles or scripting to a specific portion of text.
<span style="color: red;">This is red text.</span><br>: Inserts a line break, useful for breaking text onto the next line without starting a new paragraph.
<p>This is some text.<br>And this is on a new line.</p><hr>: Creates a horizontal rule or line to separate content.
<hr><table>: Defines a table, which can be populated with rows and cells.
<table>
<!-- table content goes here -->
</table><tr>: Represents a table row.
<tr>
<!-- table cells go here -->
</tr><th>: Defines a table header cell.
<th>Header Cell</th><td>: Represents a table data cell.
<td>Data Cell</td><form>: Used to create web forms for user input.
<form action="/submit" method="post">
<!-- form elements go here -->
</form><input>: An input field within a form, used for text, checkboxes, radio buttons, etc.
<input type="text" name="username"><button>: A clickable button often used in forms.
<button type="submit">Submit</button><textarea>: A multiline text input field within a form.
<textarea rows="4" cols="50">
Enter text here...
</textarea><label>: Describes the purpose of an input element in a form.
<label for="username">Username:</label>
<input type="text" id="username" name="username"><select>: Creates a dropdown list within a form.
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select><option>: Represents an option in a<select>dropdown.
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>- Size and Spacing:
width: Controls the width of an element.height: Controls the height of an element.margin: Sets the outer margin of an element.padding: Sets the inner padding of an element.
.example-element {
width: 200px;
height: 100px;
margin: 10px;
padding: 20px;
} - Text Styling:
font-size: Sets the size of the text.font-family: Defines the type of font.color: Specifies the color of the text.
.example-text {
font-size: 16px;
font-family: "Arial", sans-serif;
color: #333;
}- Layout:
display: Defines how an element is displayed (block, inline, etc.).float: Positions an element to the left or right within its container.
.layout-container {
display: flex;
float: right;
}- Positioning:
position: Sets the positioning method (static, relative, absolute, fixed).
.positioned-element {
position: relative;
top: 20px;
left: 30px;
}- Border and Box Model:
border: Sets the border of an element.box-sizing: Defines how the width and height of an element are calculated.
.bordered-element {
border: 1px solid #000;
box-sizing: border-box;
}- Background:
background-color: Sets the background color of an element.background-image: Sets the background image of an element.
.background-element {
background-color: #f0f0f0;
background-image: url('background.jpg');
}- Text Alignment:
text-align: Aligns text within its container.
.aligned-text {
text-align: center;
}- List Styling:
list-style-type: Sets the style of list items.
.styled-list {
list-style-type: square;
}- Link Styling:
text-decoration: Removes underlines from links (commonly set tonone).hover: Changes the style when the mouse hovers over a link.
.styled-link {
text-decoration: none;
}
.styled-link:hover {
color: #FF5733; /* Example color change on hover */
}- Visibility:
display: none: Hides an element.
.hidden-element {
display: none;
}-
pwd
- stands for: print working directory
- means: current location in Ubuntu
-
ls
- stands for: list
- means: print all the folders and files in this directory
-
clear
- means: clear screen
-
cd
- means: change directory
-
touch
- means: create a new file
-
mkdir
- means: create a new folder
-
explorer.exe
- means: open a file in the browser
-
tree
- means: shows the file structure