Modern HTML 5 Tutorial for Angular Developers

Modern HTML 5 Tutorial for Angular Developers

In this tutorial, we’ll teach you HTML which is used as the template language for Angular. We’ll build a simple HTML “app” before tackling any Angular concepts since it’s a prerequisite in any web development and one of the three pillars of the web along with JavaScript and CSS

Originally published at https://www.techiediaries.com

HTML stands for HyperText Markup Language is an artificial markup language that can be used by programmers to create the structure of web document. It’s one of the three pillars pillars of the web along with JavaScript and CSS. It can be interpreted by a web browser which transforms the an HTML source code comprised of HTML tags to actual web page with text, tables, forms and links etc.

Note: A web browser can only understand plain HTML, JavaScript and CSS. While Angular uses HTML for creating views, it adds some template structures such as loops and conditional directives along with other syntax symbols for variable interpolation and data binding which are not part of HTML thus they are compiled ahead of time and transformed to plain HTML.

An HTML document is simply a plain text document with the .html extension instead of .txt

Most tags have opening and closing parts. Each tag begins with < symbol and ends with > symbol. For example:

  • The topmost tag that defines and HTML document is <html></html>. All the content should be contained between the opening and closing tags.
  • The body tag that defines the body of the web page is <body></body>.
  • The tag to add a title of the page is <title> … </title>. etc.

Tags can have attributes that provide extra information to the browser for how to display the element.

Web servers serve only plain HTML to web browsers without any server-side programming constructs.

HTML is an essential requirement if you want to create websites. Most developers start their journey in web development by learning HTML, this is the case for both frontend developers that use JavaScript to create client-side apps and backend developers that use server-side languages like PHP or Python to create web apps.

Notes: You can also use JavaScript frameworks like Angular or libraries like React or Vue to create apps with JS and HTML. All these tools, make use of components that use HTML as the template language for creating views.
You can extend HTML by creating new tags using custom elements and web components which are standard browser technologies that don’t require a third-party tool, framework or library to be interpreted by the browser. 

Prerequisites

You don’t need a fully-fledged development environment with a lot of tools installed to start learning HTML. You only need a text editor (that optionally has syntax highlighting for HTML) and a web browser like Chrome or Firefox or even IE.

You also need some basic knowledge to work with your operating system, Windows, Linux or macOS, particularly how to create and open files.

You can also use online development environments such as CodePen, JSBin or JSFiddle for trying HTML without creating files in your computer. Actually, these online environments are most useful if you are unable to create files in your system or you are using devices like phones and tablets while you are learning HTML, JavaScript or CSS.

In this tutorial, I’ll assume you are working with a Unix-based terminal (present in macOS or Linux) and can be installed on Windows. Don’t worry though, the command we’ll use is for navigating to a working folder and creating a file, you can do this in your preferred way.

HTML is not a programming language but instead a markup language that you can use to apply tags on some text to give it a semantic or meaning, create a structure for a page like header, footer, columns, sections and navigation menus. It can be also used to add images and videos to your pages from local or external sources.

Note: A programming language has advanced constructs and features like loops for iterating over arrays of data and conditional statements for making decisions etc. HTML doesn't have these constructs so It can’t be considered as a programming language since It just displays and formats visual elements on a web page.
Many template languages are built on top of HTML to provide these constructs. For instance, Angular provides a template syntax that includes data binding like interpolation for easily updating the page with data from the parent component, and directives such as *ngFor and *ngIf for iterating over data and displaying HTML elements conditionally.

Creating the very basic HTML document

Go ahead and open a terminal and run the following commands:

$ cd ~
$ mkdir my-first-webpage
$ cd my-first-webpage
$ touch index.html

We simply navigate to the home folder. Next, we create a folder called my-first-webpage. Next, we navigate inside it and create an index.html file.

Now, use a text editor (like Vim or whatever you prefer) and open the index.html file. Next, simply add the following code:

<!DOCTYPE html>
<html>
 <head>
   <title>My first HTML page</title>
  </head>
 <body>
   <p>This is my first web page</p>
 </body>
</html>    

We first add a doctype which must be present. Nowadays in modern browsers that understand HTML5 it’s mostly useless, but required. In the old days, it was used to link to some type definition documents that contain syntax rules of the language.

According to Wikipedia, this is the definition of a doctype:

A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML (for example, a webpage) with a document type definition(DTD) (for example, the formal definition of a particular version of HTML 2.0 - 4.0) or XML document. In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

Next, we add an opening <html> tag with its closing </html> tag which mark the start and end of the HTML code. Between these two tags, you can add the necessary code for creating your web page.

Next, we add the head section of the document using the <head> and </head> tags: The [<head>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) element is sort of a container for all the tags that represent some information about your document such as the title which is added using a <title> element. Inline CSS styles or links to external CSS files or meta tags.

Next, we add the <body></body> section which contains the content of your web page.

Inside the body, we add This is my first web page paragraph wrapped by the <p> and </p> tags.

Now, go ahead and open the index.html file with your web browser (Make sure to save its content in the text editor). You should not see the tags but a rendered blank page with This is my first web page just like in the following screenshot:

Escaping Special HTML Characters

HTML has a set of special characters such as < and > which are used to surround the tag names also characters like " and ' used for the values of tag attributes and &. So, how can you display these characters in your HTML page? i.e tell the browser not to interpret them but simply display them like regular content. You can do this by escaping these characters using their codes:

Each code begins with & and ends with ;.

HTML Comments

When you are writing HTML code, you may need to comment your code but you don’t want these comments to appear in the web page since they are only intended for your or other developers that read the source code of your web page.

To write a comment, HTML provides <-- and --> tags. You should surround you comment with them. For example!

<!-- This is a comment --> 
Note: In web browsers, you can read the source code of any web page that is currently displayed without any restrictions using View page source from a contextual menu or pressing CTRL + U in your keyboard. These instructions are valid for Chrome but you should find similar instructions for other browsers.

HTML Links and Navigation

HTML provides hypertext links using the <a> tag which works by surrounding a text that becomes the link. The target page is specified using the href attribute. For example:

<a href="https://www.techiediaries.com">Go to Techiediaries</a>

The href value can reference a local HTML document using its relative path or an external document using its URL (Uniform Resource Locator).

HTML Headers

HTML Paragraphs

HTML Sections

HTML Tables

HTML Forms

Let’s create a simple HTML website which has pages like home, about and contact page.

In the contact page, we’ll add an HTML form and thanks to cloud services users can submit their information without needing to add a backend for our app, we’ll use a cloud service FormSpree which allows us to get what usesr submit using our form via emails.

Can you build something useful with HTML alone?

Yes, you can! Not fully-fledged apps but you can create a static HTML website which you can use to share information with your visitors. You’ll be able to create multiple pages and add navigation between them and you can add content, paragraphs, divisions, sections, headlines and horizontal lines which are enough to present a document or article with a basic appearance.  

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

How to build a CRUD Web App with Angular 8.0

React vs Angular: An In-depth Comparison

React vs Angular vs Vue.js by Example

Build Responsive Real World Websites with HTML5 and CSS3

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Web Design for Beginners: Real World Coding in HTML & CSS


html5 angular html

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

Commonly Used HTML Tags with Examples

HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Modern HTML 5 Tutorial for Angular Devs

In this tutorial, we’ll teach you HTML which is used as the template language for Angular. We’ll build a simple HTML “app” before tackling any Angular concepts since it’s a prerequisite in any web development and one of the three pillars of the web along with JavaScript and CSS.