Hope, you are here to know more about the structure of HTML and CSS ! 🤞
How does a webpage look like?
Even this blog is a webpage, you can view the title on the top, heading and body content here. Let me show you how to view as developer!
How simple it is? Yes, we are going to structure the same but in browser understandable language! Here we go...
This is the HTML code, which is used to communicate with browser
Important Points to Remember:
- Don't need to install any additional Software to use HTML/CSS
- Text Editor is enough to run HTML
- HTML files runs directly in browser, as they are built with the required feature to run HTML documents.
Now, we have seen the structure of HTML, let's have a look into why we structure it as above program :
The above picture, clearly explains the purpose of each and every tag or keywords used.
Wait...what is keyword here? I caught youuuu....
Yes, Keywords are reserved words, as we reserve tables in hotel and no one else can access it or use it for some other purpose, similarly, keywords are reserved words and cannot be used to any other purpose.
Detailed description :
Why Do We Use Them?
Comparing with my example 😁😄
HTML → Skeleton
HEAD → Brain/settings
BODY → Visible human body
TITLE → Name tag
META → Identity/details
Now, we have coded with basic structure but how to view the output?
As I said earlier, simple text editor is enough to run HTML files but we do have few drawbacks in using it. Let's discuss in detail along with the steps to overcome it.
Step 1 : Open a text editor, write the basic HTML code (you can use the above given code) or click here
Step 2 : Save the file as index.html by click on ctrl + S
Step 3 : go to the file location where index.html is saved, right click on it and open in browser.
Step 4 : Whatever given in the program will be displayed in the browser as output. As Shown below :
Drawback : You need to refresh browser each and everytime you make some changes in the HTML file. How to overcome it ?
Introducing our IDE here to overcome the drawback...isn't it cool?
Step 1 : Download Visual Studio Code - click here to download
Step 2 : Choose the respective OS to download the VS Code
Step 3 : Once after downloading, install it in your device and complete the setup configuration.
Step 4 : Create or Open folder, as per your requirement.
Step 5 : Go to extensions -> search "Live Server " -> choose and install
Step 6 : From now, once you write the code and save it, changes will reflect automatically in the browser.
Ufffff..... just done with basic setup and structure 😎 Lot more to gooo!
Let's take some CSS break 😜
Introduction to CSS
CSS is the language we use to style a Web page.
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
With the previous example of HTML and the CSS, If I am not wrong, you can feel some difference in the output screen.. Which one looks more colorful and attractive ? (not made a good output but still 😅)
The One with CSS, give complete look and here you go on the purpose of using CSS in webpages.
Three types of CSS : (Listed in the order of precedence)
- Inline CSS
- Styles given within the line/tag
- Internal CSS
- Styles given within the file using style tag
- External CSS
- separate document is created and linked to the html file
References :
https://www.w3schools.com/html/default.asp
https://developer.mozilla.org/en-US/docs/Web/HTML
https://www.w3schools.com/css/css_intro.asp
https://developer.mozilla.org/en-US/docs/Web/CSS