Crafting the Web
1. HTML Overview:
So, I am just going to brief-up about HTML
HTML: Hyper Text Markup Language [Tool we use to create websites]
The easiest way to understand HTML is by simply giving instructions to the computer on what to do step by step
A basic outline of an HTML document:
In HTML, both the <head> and <body> elements are essential parts of a web page, but they serve different purposes:
(I) <head>:
- The <head> element defines meta-information about the document, such as its title, character encoding, links to stylesheets, scripts, and other meta tags.
- It contains elements like <title>, <meta>, <link>, <style>, <script>, and <base>.
- Content within the <head> is not displayed on the web page itself; it is used to provide information about the document or to include external resources needed for the page.
(II) <body>:
- The <body> element contains the actual content of the web page that users see and interact with, such as text, images, links, forms, and multimedia elements.
- It is where you place elements like headings (`<h1>`, <h2>, etc.), paragraphs (`<p>`), lists (`<ul>`, <ol>), images (`<img>`), and other visible elements.
- Content within the <body> is rendered in the main area of the browser window.
In summary, the <head> element contains metadata and resources needed to render the web page correctly. In contrast, the <body> element contains the visible content of the web page that users interact with.
Added some attributes inside the head and body
Output:
1. HTML Tags:
(I) The <!DOCTYPE> declaration, short for Document Type Declaration, is an essential component at the beginning of an HTML document. It informs web browsers about the version of HTML or XHTML used in the document.
Inside the <html> tag, you typically find two main sections:
<head> section: Contains meta-information about the document, such as its title, character encoding, links to stylesheets, scripts, and other meta tags. This section is not displayed directly on the webpage.
<body> section: Contains the actual content of the webpage that users see and interact with, such as text, images, links, forms, and multimedia elements.
(II) The <html> tag is required in every HTML document. It specifies that the document is written in HTML and provides the overall structure for organizing content.
(III) The <title> element specifies the title of the HTML document, which appears in the title bar or tab of the web browser.
(IV) The <h1> element signifies the primary heading within the document, typically denoting the most significant title or heading.
(V) The <p> element is frequently employed to organize textual content into paragraphs on web pages, enhancing readability and organization by visually delineating distinct blocks of text.
Button:
The 1st Instruction anyone should know is Button
Now how do we write this?
Below is the format for creating a button on our website
<button>Button name</button>
<button>: This part is the opening tag of the button element.
Button name: This is the content of the button, which in this case is the text "Button name".
</button>: / is used to close the opened tag of the button element
So, every element consists of 2 tags
One is an opening tag and another is a closing tag
If anything is missing other than button name, the button element will not be created.
So, make sure to add all the symbols at the right place.
P(Paragraph):
This is how a paragraph can be written
<p>This is the space to write your paragraph</p>
All the components that are visible on a webpage are referred to as HTML elements.
So, here Button and P are 2 different types of HTML Elements
So, Element is just a term which we use to describe anything that we can display on the webpage
Now all the <,>, / all these symbols will be coming under Syntax
Syntax are the rules which we will be following to write a code in a language like HTML, CSS
If you don't follow the code correctly the computer cannot Understand.
How to give a link to another website:
<a href="https://www.google.com/" target=”_blank”>Link to another Website</a>
So "a" represents the anchor element
href=”…..” is an attribute. An attribute that modifies how the element behaves
Target=”_blank”: this is used if we want the given link to open in the new window
Target=””: then the link will be opened on the current page
href and Target attribute only work on the link element
Google has been linked. So, Google Chrome has appeared
