Basics of HTML- Learn web dev online

Learn Web development online (Beginner's Guide)

What is HTML?

  • HTML stands for Hyper Text Markup Language.
  • HTML is the standard markup language for creating web pages.
  • HTML describes the structure of a web page.
  • HTML consists of a series of elements.
  • HTML elements tell the browser how to display the content.
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

 Basics of HTML language 

Learning HTML (HyperText Markup Language) is a great first step into web development. Here’s a guide to the most basic concepts and elements you need to start.




1. Install Vs code editor, customize it according to your will.

          2.  learn the basics of HTML

          3. Always be practical with learning don't stick with the tutorials only

4. Dont invest too much time in learning HTML, understand the basics and proceed to next language. Dont wait for perfection, this is project base learnings.

Before diving into the structure and syntax (rule) of HTML let's talk about some of the most important basics where every fresher got stuck.

What is an HTML Element, Tag, and Attribute?


Element, Tag, and attributes are the most common and repetitive terms of HTML, you will always hear these terms continuously throughout this course, so you need to know about these terms before diving into the course blindly.

What is a Tag in HTML?

Tags are words enclosed within `<` and `>` angle brackets.

They serve as keywords that tell the web browser how to format and display the content.
Many of the tags have pairs or opening and starting ends, both tags are the same but the end tag ends with a a forward slash (/) before the tag name.

if you have an opening tag like <p>, the corresponding closing tag would be </p>.

Consider these examples:

  • <!DOCTYPE html>
  • <h1></h1>
  • <html></html>
  • <body></body>         

These are commonly used tags in HTML, you will learn many more 


What is an Element of HTML?

An HTML element is defined by a start tag and some content in between that helps the browser display the information correctly on a web page, which ends with a closing tag:

<tagname> Content goes here... </tagname>

This whole is an HTML element from the starting to the closing tag:





Check out some of the examples below

1. <h1>My first website</h1> (HTML element)
2. <p>My first website.</p> (HTML element)

 

What is an HTML Attribute? 

HTML attributes provide extra information about an element. They are added within the opening tag and consist of a name and a value. Attributes help control how an element behaves or appears on the page.

Attribute format:

<tag name attribute> </tag name>

For example:

1. "href" is an Attribute in this Links

The "href" attribute specifies the URL of the page the link goes to.





Now we will discuss the basic document structure of HTML language.


HTML Basic Document Structure






 








Let's understand this example through the points below:

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta-information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> the element defines a large heading
  • The <p> the element defines a paragraph

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>, its considered the root element because it covers all the content found in a web page.

The visible part of the HTML document is between <body> and </body>.

First HTML exercise:












This is how your page looks like after this exercise














This is all about today we will discuss other concepts later in this course.


Comments

Post a Comment

Popular posts from this blog

Block and Inline Elements of HTML

Image
Block and Inline elements Here are the two unique elements of HTML that are widely used. Block Elements Block elements start from a new line and occupy enough space compared to the normal text. The browser automatically recognizes these elements and adds spaces. Think of a block element as a building block on a page. It always takes up the full width it can, spreading out as far as possible. Two common types of block elements are: Paragraph <p>: This is for regular text. Each <p> tag starts a new line and goes all the way across the page. Division <div>: This is a more general container. You can use it to group other elements together and style them as a unit. So, basically, block elements stack vertically on a page and fill the entire width available. Here is a list of all the Block Elements of HTML:    2. Inline elements The elements that take up the required space and don't start with a new line are the Inline Elements. It only takes the necessary width....
Read more

CSS - Introduction

Image
What is CSS? CSS or Style.css is called Cascading Style sheets, a constructive language to style a colorless HTML web page. Mainly, it has three main types: Inline CSS Internal CSS External CSS let's briefly talk about each type in the remaining part of the article. 1. Inline CSS Inline CSS is used to apply a unique style to a single HTML element directly within the element's tag. It's done using the " style" attribute inside an HTML tag. Inline CSS is typically used for small or specific changes. Example: 2. Internal CSS Internal CSS is used when you want to define styles for a single HTML page. The CSS rules are defined within a <style> tag in the <head> section of the HTML document. Internal CSS is ideal when you have a unique style for a specific page. Example: 3. External CSS External CSS is used to apply styles to multiple web pages. The CSS rules are defined in a separate .css file , and this file is linked to the HTML documents. This method...
Read more