Modern HTML 5 Tutorial for Angular Devs

Originally published at techiediaries.com on 23 Aug 2019

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.

Note: You can actually create fully-working static sites following the JAMStack approach.

Originally published at techiediaries.com on 23 Aug 2019

==========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Angular 8 (formerly Angular 2) - The Complete Guide

☞ Learn and Understand AngularJS

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular Crash Course for Busy Developers

☞ Angular Essentials (Angular 2+ with TypeScript)

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

☞ Build Responsive Real World Websites with HTML5 and CSS3

☞ CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

☞ Beginner Full Stack Web Development: HTML, CSS, React & Node

☞ Modern HTML & CSS From The Beginning (Including Sass)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

☞ Angular & NodeJS - The MEAN Stack Guide

#angular #html5 #html #web-development

What is GEEK

Buddha Community

ashika eliza

1625652623

HTML - A Complete Guide to Master the Top Programming Language

In this era of technology, anything digital holds a prime significance in our day-to-day life. Hence, developers have submerged themselves to create a major impact using programming languages.According to Statista, HTML/CSS holds the second position (the first being Javascript), in the list of most widely-used programming languages globally (2020).Interested to learn this language? Then head on to this tutorial and get to know all about HTML! Plus we have added numerous examples such that you can learn better! So happy learning!
html for beginners

#html #html-for-beginners #html-tutorials #introduction-to-html #learn-html #tutorials-html

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

Installing Node.js and npm
Installing Angular CLI
Creating workspace
Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

Node.js
npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

npm -v

Installing Angular CLI

Open Terminal/Command Prompt
To install Angular CLI, run the below command:

npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

Using CLI
Using Visual Studio Code

1. Using CLI

To create a workspace:

Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

Ng new YourAppName

After running this command, it will prompt you to select from various options about the CSS and other functionalities.

To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Alisha Larkin

1617789060

HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates

Angela Dickens

1596090180

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, some content, and an ending tag. The web browser reads the HTML document from top to bottom, left to right. Each HTML tag defines a new property that helps in rendering the website.

HTML Tags

The ‘<>’ brackets contain an HTML tag. There are two types of HTML tags- empty tags or singleton tags and container tags. Singleton tags or empty tags do not contain any content such as an image or a paragraph and hence do not need to be closed, whereas container tags should be closed.

Syntax

Some Content

Examples of:

Empty tag:
,

,etc.

Container tags:

Paragraph

Link

<!DOCTYPE>
Paragraph
Heading
Bold
Italic
Underline

Output-

Head tags:

,<style>,<script>,<link>,<meta> and <base>. <p>Text-formatting tags:</p> <p><h>,<b>,<strong>,<small>,<pre>,<i>,<em>,<sub>,<sup>,<ins>,<dfn>,<del>,<div> and <span>.</p> <p>Link tags:</p> <p><a>, <base>.</p> <p>List tags:</p> <ul>, <ol>, <li>, <dl>, <dd> <p>Table tags:</p> <table> ,<tr> , <td>, <th>, <thead>, <tbody>, <tfoot>. <p>Form tags:</p> <form>, <input>, <select>, <option>, <button>, <label>, <fieldset>, <textarea>. <p>Scripting tags:</p> <script>, <noscript> Image and Object tags: <img>, <figure>, <figcaption>, <area>, <map>, <object>. Here is an alphabetical list of tags used in HTML.

#html tutorials #html image tags #html link tags #html list tags #html tags #html

Roberta Ward

1593184320

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 Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular