Usually, the title “Material” positions a UI component library right at the top of the star-count and downloads count. Google’s Material-components-web library is the web-component version of the Material-UI library.
Welcome to Learn HTML, the easiest way to learn HTML & CSS online, interactively.
- VS Code (free, recommended) - https://code.visualstudio.com/
- Atom (Free) - https://atom.io/
- JetBrains WebStorm (Commercial) - https://www.jetbrains.com/webstorm/
- Sublime Text (Commercial) - https://www.sublimetext.com/
- Notepad++ (Windows only) - https://notepad-plus-plus.org/download/v7.html
In this tutorial you won't actually need an IDE, because all coding is done online.
HTML (HyperText Markup Language) is a standard developed over the years to convey information over the internet by using "hyperlinks" - or just links as we know them today. As opposed to a PDF, an HTML page is much more dynamic in nature, letting you browse the web by clicking on links and interacting with the page. Links could take you either to a different location within the current page, or to a different page over the internet.
- An HTML page is an HTML document that defines the content of the page by using a special markup similar to XML.
- A CSS stylesheet defines the style of the HTML elements in the page. It is either embeeded within an HTML page or loaded using the tag.
We will be using a CSS framework called Bootstrap by Twitter, the most common CSS library out there today. The basic principles of a CSS library is pretty much the same - they are all based on the "grid system", which is an easy way to define the layout of an HTML page - a methodology that was developed over the years in web development.
Your first HTML Page
Let's start by creating a simple HTML page. An HTML page has the following basic layout:
<!DOCTYPE html> <html> <head> <!-- head definitions go here --> </head> <body> <!-- the content goes here --> </body> </html>
Let's start by creating a simple page that contains the phrase "Hello, World!" in the body. The page will also have a title - that thing that shows up in the title of the tab in your browser. The
> element defines the title of the HTML page.
<!DOCTYPE html> tag defines the document type that the browser is going to render. This is used for legacy reasons. If you want to get to the latest version of HTML (HTML5) then it's recommended to use this tag.
> element defines a "paragraph", a block of text that has a small amount of spacing in between its top and bottom.
Notice how the tags have a start tag and an end tag denoted with a slash (
>). Everything in between is the content of the tag. The content of a tag can usually have additional HTML tags within them.
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <p>This is an example of a simple HTML page with one paragraph.</p> </body> </html>
You may also copy and paste this code into a new file in your text editor or IDE, and save the file as "index.html". The "index.html" file is the default file that a web server will look for when accessing a website. After saving the file, you can double click it to open it with your browser.
Now that we know the basic structure of an HTML page, let's try it out.
Do it Fourself
- Add an HTML
>tag with the text "Hello, World!"
- Add a paragraph (
>tag) to the body with the text "Hello, World!"