Skip to content

Latest commit

 

History

History
97 lines (66 loc) · 3.87 KB

level-1.md

File metadata and controls

97 lines (66 loc) · 3.87 KB

Getting started with HTML 🚀

What is HTML?

HTML stands for HyperText Markup Language. It is a markup language used to create web pages. It is used to define the structure of a web page, including the content, layout, and style.

Markup languages use tags to define the structure and presentation of documents. They are essential for creating web pages, storing data, and ensuring accessibility. Examples include HTML, XML, and Markdown.

What is HTML5?

HTML5 is a version of HTML that is designed to be backwards compatible with older versions of HTML. It includes new features and improvements that make it easier to create and maintain web pages. In short, some new tags and attributes are added to HTML5 to make it more user-friendly and easier to use.

Text/code Editor vs Word processor

Text editors are used to write and edit text files. Specially code editros comes with features like syntax highlighting, auto-completion, and code formatting.

Word processors are used to create and edit documents. They are used to create documents like books, reports, and presentations.

You need a code editor to write HTML code.

Recommended text editors

Visual Studio Code

Recommended code editor extensions

  • HTML Snippets
  • Live Server

EMMET HTML

Emmet is a code snippets manager for VS Code. It is used to create HTML code faster. Emmet is a must-have tool for any web developer. In VS Code, Emmet is enabled by default. It works only after you have created a new HTML file.

Learn the shortcuts and just press the ! or tab or enter key to get the code you want.

Some common Emmet Shortcuts

  • ! - Inserts a <!DOCTYPE html> tag
  • h1 - Inserts a <h1> tag
  • h2 - Inserts a <h2> tag
  • p - Inserts a <p> tag
  • img - Inserts an <img> tag
  • a - Inserts an <a> tag
  • ul - Inserts an <ul> tag
  • ul>li - Inserts a <li> tag inside an <ul> tag
  • ul>li>a - Inserts an <a> tag inside a <li> tag inside an <ul> tag
  • ul>li*3 - Inserts 3 <li> tags inside an <ul> tag
  • div - Inserts a <div> tag
  • div>p - Inserts a <p> tag inside a <div> tag
  • div>p*3 - Inserts 3 <p> tags inside a <div> tag

First HTML File

Create a file named index.html and test out the following lessons.

It is the default name for a website's homepage

Basic HTML Page

Let's disect the HTML page to understand it better ! (shortcut)

You will learn more about tags in level-2.md

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title> 
  </head>
  <body>
    <p>hello world</p> 
  </body>
</html>
  • <!DOCTYPE html> - tells browser you are using HTML5
  • <html> - root of an html document
  • <head> - container for metadata
  • <title>My First Page</title> - page title
  • </head>
  • <body> - contains all data rendered by the browser
  • <p>hello world</p> - paragraph tag

Comments in HTML

This is part of code that should not be parsed. <!-- This is an HTML Comment -->

HTML is NOT case sensitive

HTML is generally case-insensitive, meaning tag and attribute names are usually interpreted regardless of their case, but lowercase is the recommended standard for better readability and maintainability.

<html> = <HTML>

<head> = <HEAD>

<body> = <BODY>

Conclusion

Emmit is a must-have tool for any web developer. BUT this does not mean you have to learn every single shortcut. You can use Emmit to create HTML code faster. NO ONE remembers all the shortcuts. We use then mostly by trial and error, and learning them as we go.