RAJESWARI DAS's blog
Let's learn HTML </> for newcomers :)

Let's learn HTML </> for newcomers :)

HTML is a easy, simple and user-friendly language..

RAJESWARI DAS's photo
RAJESWARI DAS
·

3 min read

Table of contents

Why you learn Html?

->Before going to HTML you should ask One question Why you learn it what is the need of it ?1st let me solve this question -

->We use HTML not only for making a webpage or website ,but also used in many professional documents stored in your computer.

->The native apps for Samsung’s Smart TV platform are built in HTML/CSS/JS. Even the apps for Google Chromecast are built in HTML/CSS/JS.

->Basically, Html is the Structure of a webpage ,it's the Foundation .

What is HTML?

We all know HTML stands for Hyper Text Markup Language ,but practically we don't know what is Hyper Text Markup Language ,soo let's discuss it 1st

What is Hyper Text???

Hyper means beyond. Hyper text resembles the text that contain contents beyond what we see.

What is Markup Language??

Markup is derived from a common computer terminology where "marking up" is the process of process of preparing for presentation. so, Markup language is a presentation language.

Tools you need for HTML :-

1. Code Editor(VS code):-

We also need to install Extensions like Live server and Prettier in vs code.

2. Also need a web browser

For example Google chrome, Microsoft edge, Firefox, Opera, Internet explorer ....etc

Basic Structure of an HTML Document :-

To get started with Html, It is essential to understand the basic structure of an HTML document. To get the document you just need to type (!+Enter) it will give the basic structure of HTML. Like the (!+Enter)or(htmi:5 Enter) shortcut. we will use many shortcuts in future , these are called Emmets . Which makes HTML user-friendly.

<!DOCTYPE html><!--DOCTYPE html represents the following document is html type-->
<html lang="en"><!--Language is defined by using the attribute “lang”-->

<head>
    <meta charset="UTF-8"><!--This is a data about Character set-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--Viewport decides how much width you want initially-->
    <title>Document</title><!--title will be shown in thw tab bar-->
</head>
<body>
<!--Actual content of the website-->
</body>
</html>

->Note: Comments in HTML are written with in “<!-- your comment-->”

Section in HTML Document --

-> Every HTML document scope comprises of 2 major sections

1)Head Section

2) Body Section

Head Section :-Head section comprises of content, which is intended to load into memory when page is requested by client.

->Typically head section is defined with<head></head>

->It comprises of contents like

1.Title 2. Link 4. Meta 5. Script 6. Style

Link Element: - It is used to link external files to your web page. External files include short cut icons, stylesheets etc.

What is Element and Tag??

-> An HTML element is defined by a start tag, some content, and an end tag.

->The <html\> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag). Elements are built by using Tags.

Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element.

Basic HTML tags:-

  • <html> … </html> — The root element.

  • <head> … </head> — The document head.

  • <title> … </title> — The page title.

  • <body> … </body> — The page’s content.

  • <h1> … </h1> — A section heading.

  • <p> … </p> — A paragraph.

  • <a> … </a> — A link.

  • <div> … </div> — A block-level container for content.

  • <span> … </span> — An inline container for content.

HTMLcodingWeb Design