Blog

Import a web project to Eclipse

To make you feel easy to work around building your web project. I put my project in the sever as a war package. What you have to do is download this package and save it in your local folder (you have to remember where you stored) The package can be found in the following link:

MyWeb War

https://drive.google.com/open?id=0B1CnZXqaISXmLWpFc2Y4eFpQVXc

After you stored the package into your local folder, we can follow the steps below to import the web project into your eclipse.

  1. File–>Import ….
    FileImport
  2. Select–>Web–>WAR file
    SelectWar
  3. Choose the package file you stored in your local folder for WAR file, fill a web project name (MyWebExample as what I used)
    WARImport
  4. We don’t have any extra lib used in our project, so leave it as an empty
    leaveItAsEmpty
  5. Finish everything, then we have a new web project, using all the existing my code
    finish

You are free to change anything in the project to play and learn HTML 5 and web.xml and servlets, or run this project on your personal Tomcat Server.

 

 

Deploy Java Web Apps to Azure using Eclipse

Refer to the article written by Senior Program Manger, Cloud and Enterprise

https://azure.microsoft.com/en-us/blog/deploy-java-web-apps-to-azure-using-eclipse/

Today at EclipseCon 2016 Microsoft announced it joined the Eclipse foundation. This is an important next step for Microsoft to continue a meaningful conversation with the Java community, and especially the people who make tools based on Eclipse.

One of the first accomplishments as a new member of the foundation is the latest update to our Azure Toolkit for Eclipse. We’ve added Azure Web App support for Java applications and a few other enhancements based on feedback from the community.

Java Web Apps are fully managed so you can focus on building, deploying and scaling enterprise-grade apps in seconds.  Java Web apps run on either Tomcat or Jetty by default, but can be configured for other app servers as well. Here’s a tutorial on getting started with Java Web Apps.

Deploying to a Java Web App from Eclipse

You now have an option to deploy to a Java Web app running Tomcat or Jetty directly from Eclipse and unlike the more traditional Cloud Service deployments, the deployment takes seconds, not minutes. This is especially great when you want to deploy your Java code to a fully managed, scalable platform on  Azure with minimal configuration hassle.

Here’s an example showing deployment to a Java Web App using a JDK and web container provided by Azure.

In Eclipse, select the project you want to deploy to Azure and right-click to bring up the context menu.

In the context menu, select Azure, then click Publish to Azure Web App.

Next, you will be presented with options to choose: a name for the App Service, location, pricing tier and instance size.  Once those options are set, you can deploy your app. A few seconds later, your app is published, as shown here:

If you click on the Published link you will be taken to your running Java Web App.

You can explore installed apps via the built-in Azure explorer, also included when you install the Azure Toolkit for Eclipse:

This is a very simple example of a quick deployment using default options provide by Azure.  There are many more configuration and deployment options outlined in this tutorial.

Installing the Azure Toolkit for Eclipse

Refer to: https://docs.microsoft.com/en-us/azure/azure-toolkit-for-eclipse-installation

The Azure Toolkit for Eclipse provides templates and functionality that allow you to easily create, develop, test, and deploy Azure applications using the Eclipse development environment. The Azure Toolkit for Eclipse is an Open Source project, whose source code is available under the MIT License from the project’s site on GitHub at the following URL:

https://github.com/microsoft/azure-tools-for-java

The following steps show you how to install the Azure Toolkit for Eclipse.

Prerequisites

The Azure Toolkit for Eclipse requires the following software components:

  • Eclipse IDE for Java EE Developers, Mars, or later. You can download it at http://www.eclipse.org/downloads/.
  • A Java Developer Kit (JDK), version 1.8 or later.
  • An operating system. The Azure Toolkit for Eclipse has been tested on the following operating systems:
    • Windows 10, Windows 8 and 8.1, Windows 7
    • Windows Server 2012 and 2012 R2, Windows Server 2008 and 2008 R2
    • Mac OS X version “Yosemite” and later
    • Ubuntu Linux version 14, 15, and 16

For more information, see the Azure Toolkit for Eclipse page at the Eclipse Marketplace.

[!IMPORTANT]
> If you are using the Azure Toolkit for Eclipse on Windows, the toolkit requires installing the Azure SDK 2.9.6 or later in order to use the Azure emulator. You have two options for installing the Azure SDK:
>
> * You can download and install the Azure SDK by using the [Web Platform Installer (WebPI)](http://go.microsoft.com/fwlink/?LinkID=252838).
> * If you do not have the Azure SDK installed when you create your first Azure deployment project, you will be prompted to automatically download install the requisite version of the Azure SDK.
>
> Note that the Azure SDK is required on Windows only.
>
>
–>

To install the Azure Toolkit for Eclipse

  1. Start Eclipse.
  2. When Eclipse opens, click the Help menu, and then click Install New Software, as shown in the following illustration.

    Installing the Azure Toolkit for Eclipse

  3. In the Available Software dialog, within the Work with text box, type http://dl.microsoft.com/eclipse followed by the Enter key.
  4. In the Name pane, check Azure Toolkit for Eclipse, and uncheck Contact all update sites during install to find required software. Your screen should appear similar to the following:

    Installing the Azure Toolkit for Eclipse

  5. If you expand the Azure Toolkit for Eclipse, you will see the following items:
    • Application Insights Plugin for Java: This component allows you to use Azure’s telemetry logging and analysis services for your applications and server instances.
    • Azure Access Control Services Filter: This component provides support for authenticating application users with Azure ACS, enabling single sign-on scenarios and externalizing identity logic from the application.
    • Azure Common Plugin: This component provides the common functionality needed by other toolkit components.
    • Azure Explorer for Eclipse: This component provides the common functionality needed by other toolkit components.
    • Azure Plugin for Eclipse with Java: This component provides support for developing projects that help build, test and deploy Java applications for the Microsoft Azure cloud in Eclipse and via command line.
    • Azure Web Apps Plugin with Java: This component provides support for deploying Java web applications to Microsoft Azure Web App containers.
    • Microsoft JDBC Driver 4.2 for SQL Server: This component provides JDBC API for SQL Server and Microsoft Azure SQL Database for Java Platform Enterprise Edition 8.
    • Package for Apache Qpid Client Libraries for JMS: This component provides the JMS client component from the Apache Qpid project to enable your application to use AMQP messaging in Microsoft Azure.
    • Package for Microsoft Azure Libraries for Java: This component provides APIs for accessing Microsoft Azure services, such as storage, service bus, service runtime, etc.
  6. Click Next. (If you experience unusual delays when installing the toolkit, ensure that Contact all update sites during install to find required software is unchecked.)
  7. In the Install Details dialog, click Next.

    Review Installation Details

  8. In the Review Licenses dialog, review the terms of the license agreements. If you accept the terms of the license agreements, click I accept the terms of the license agreements and then click Finish. (The remaining steps assume you do accept the terms of the license agreements. If you do not accept the terms of the license agreements, exit the installation process.)

    Review Licenses

    Eclipse will download and install the requisite packages.

    Installation Progress

  9. If prompted to restart Eclipse to complete installation, click Yes.

    Restart Prompt

Eclipse Web Development II: HTML 5

In this session, we are going to use Eclipse to create an HTML 5 website.  Please thanks for Robert Mening’s good article (HTML Beginner’s Tutorial).

Before you start developing a HTML website, keep this handy HTML5 Cheat Sheet next to you..

Let’s Start With the Basics: What is HTML?

HTML stands for Hypertext MarkUp Language. If that doesn’t really tell you much, don’t worry. All you need to know is that it is one of the main ingredients of any website and one of the so-called frontend languages.

The frontend is the part of the website that you see in your browser when visiting any website. In modern websites, it is mostly made up of HTML, CSS and JavaScript. These three markup/programming languages control the appearance, structure and function of an website.

The classic role of HTML is to provide the basic skeleton of the website, it’s structural elements and building block. CSS, on the other hand, adds styling in form of colors, shapes, fonts and other design elements while JavaScript can be used to make things more interactive and influence how elements behave.

With the ascent of HTML5 (which came out in 2014), things are not as clear cut anymore. HTML has become more powerful and the three languages more integrated with one another. As a consequence, you can do more complex things with HTML alone that used to require backend technologies like PHP, Perl or Ruby on Rails.

Another benefit of HTML5 is that many things have been simplified. A number of HTML tags have been removed or merged into a single, more obvious versions (like <video>) that make them easier to use and remember. You will see examples of that in the tutorial below.

The Benefits of Writing HTML Websites

Yet, with great technology like WordPress, Drupal and other content management systems around, why would anyone go back to writing websites from scratch? Isn’t that redundant knowledge in today’s web?

Far from it. Being able to build a web page from the ground up remains a useful skill, even if you have no plans of ever becoming a professional developer.

First of all, it’ll allow you to quickly (in minutes as opposed to hours) throw up a page to present basic information and capture visitor information. That’s a great skill if you need to build a page with basic contact information, a placeholder, presentation or something similarly simple.

Secondly, basic coding knowledge transfers to other areas. If you have a WordPress website, knowing how an HTML document is structured and which tags do what allows you to quickly make tweaks or changes without hiring a developer. Or, at the very least, you’ll be able to speak to others intelligently about what’s going on and what you’re looking for instead of a lot of vague back-and-forth communication.

Apart from that, a pure HTML website makes you less vulnerable to security concerns and independent from outside updates or support. In addition, HTML is one of the basics of the modern web and knowing it can never be a bad thing. Being able to understand it lets you look into the source code of other websites and figure out how they work so you can use this knowledge for your own web presence.

Sounds convincing? Then let me tell you a little more about the website we will be building in this tutorial.

Requirement: A California Rock Band Needs a Simple Web Page

In order to have something concrete to work with, we will use a concrete example: The fictional indie rock band Charlie and the Roundheads from Huntington Beach, California was recently signed to a record label and needs a website up ASAP. You just so happen to be the lucky individual tasked with this assignment.

Here’s what the site needs:

  • Blog posts for tour information
  • Some method to catch fan email addresses
  • Music streaming abilities
  • A place to display music videos

Step #1: Create a Basic HTML Template

As a first step, we will create a basic HTML template. So let’s go over how to do that.

Create the File

First, we need to create an HTML file. That is quite easy. Just set up a folder on your hard drive in which you will place all files for the website. After that, open up your your freshly installed text editor and create a new file. Save it as index.html inside the folder you’ve set up. The .html extension automatically turns it into an HTML file. See, wasn’t so hard now, was it?

Add Basic Code Structure

Once we are done with that, we are ready to add this piece of code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

Say what?! Ok, did I lose you already? Don’t worry, I’ll explain what all this means right away.

What you’re looking at here is a boilerplate starting point for virtually all websites (which also means you get to copy and paste, hooray!). The <html> and </html> tags surrounding everything else are HTML brackets that open and close the document.

Everything inside <head> is the head of the document. Here we store things like meta tags, the title of your page, any external CSS and Javascript files to reference as well as additional information to help get your site noticed in search engines.

(If you’re familiar with older versions of HTML, you’ll notice some elements like ‘charset’ have now been simplified and are included in meta tags too.)

Finally, <body> is where the main content of your page goes and most of this guide is dedicated to explain how to get it there.

The HTML tags that dictate all of these common page elements give you a way to logically organize your code and make it easy to understand and follow. The structure you see above is very typical for web pages and you see it all around the Internet, including on the websites of news organisation like The Guardian, The BBC, CNN or Fox News.

The diagram below explains how the HTML elements correspond to what you see on the finished website. This should make things even clearer.

[add HTML layout structure image]

Besides the ones mentioned above, there are a couple more.

Other Structural HTML Tags

When looking at HTML tags, you will notice that their names also describe their function:

  • <header> – The top part of a website. It’s typically where you would place a logo and it usually precedes the website navigation.
  • <nav> – Stands for navigation. This mostly describes the primary website menu where you’ll place links to the main pages of your website.
  • <article> – Contains standalone pieces of content, like individual blog posts, news items, videos, or images.
  • <section> – The main content on a page is typically located between <section> tags. Think of these like a chapter in a book, where each contains a group of information like multiple articles, diagrams, images, etc.
  • <aside> – A useful tag for including related information that helps explain (but isn’t required for) the context around your page topic. It’s typically used to create a sidebar for related text or links.
  • <footer> – Bottom part of the website. The footer is where you store contact information, copyright claims and sometimes additional links like Terms of Service or Privacy Policy.

Still with us? Cool. As you can see, these are pretty easy to remember. For more info, check the HTML5 cheat sheet. Also, now that we have our basic HTML document we can start adding content to our page.

Step #2: Fill in Some Content

The most basic element of any web page is content. This can mean anything from simple text-based information over images to multimedia files like audio and video.

For our example, the Charlie and the Roundheads website needs to display their latest tour information so that their fans know exactly where to find them. You can easily create this in the form of a simple blog post, so let’s do that now.

(Btw, if you want to create a blog without messing around with HTML, check this step-by-step guide to creating a blog.)

In our index.html file, we will now add a new <section> and <article> element nested inside one another within the <body> tags.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <section>
      <article>
      </article>
    </section>
  </body>
</html>

As we’ve just learned, <article> is created specifically for blog posts and news items. Inside of that, we’ll create several separate paragraphs using the <p> tag. (Get it? ‘P’ stands for paragraph.)

Since we don’t have any real content to add yet, we will use Lorem Ipsum, which is a bunch of pseudo-Latin that is used as a placeholder in web development. It ends up looking like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=style.css>
  </head>
  <body>
    <section>
      <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna quam, hendrerit sodales volutpat consectetur, convallis ac tortor. Integer vel turpis nec orci semper vestibulum id a risus. Suspendisse potenti. Nulla rhoncus odio quis gravida imperdiet. Pellentesque non pellentesque nulla. Etiam sollicitudin tellus sem, nec ornare ligula malesuada ac. Mauris sed erat convallis, elementum eros eu, aliquet eros. Suspendisse potenti. Aliquam eu condimentum odio. Praesent hendrerit congue facilisis. Nullam justo nunc, porttitor vel ligula in, pulvinar blandit elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna quam, hendrerit sodales volutpat consectetur, convallis ac tortor. Integer vel turpis nec orci semper vestibulum id a risus. Suspendisse potenti. Nulla rhoncus odio quis gravida imperdiet. Pellentesque non pellentesque nulla. Etiam sollicitudin tellus sem, nec ornare ligula malesuada ac. Mauris sed erat convallis, elementum eros eu, aliquet eros. Suspendisse potenti. Aliquam eu condimentum odio. Praesent hendrerit congue facilisis. Nullam justo nunc, porttitor vel ligula in, pulvinar blandit elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna quam, hendrerit sodales volutpat consectetur, convallis ac tortor. Integer vel turpis nec orci semper vestibulum id a risus. Suspendisse potenti. Nulla rhoncus odio quis gravida imperdiet. Pellentesque non pellentesque nulla. Etiam sollicitudin tellus sem, nec ornare ligula malesuada ac. Mauris sed erat convallis, elementum eros eu, aliquet eros. Suspendisse potenti. Aliquam eu condimentum odio. Praesent hendrerit congue facilisis. Nullam justo nunc, porttitor vel ligula in, pulvinar blandit elit.</p>
      </article>
    </section>
  </body>
</html>

Now, if you save that file and then view it in your favorite browser, you will already be able to see something. To do so, right click the file, choose Open with and then pick the browser of your choice.

paragraphs without css

Functional but not very pretty yet. For that reason, our next step is to make it look better with some styling.

Step #3. Add Typography to Your Website Content

To make the text look better, we first want to change the font. Right now, it looks the way it does because our computer and web browser come stocked with their own fonts. You’ve probably already seen and used many of them when creating a document in Word or Pages and there are a number of standard web fonts that are present on pretty much any computer.

However, it’s also possible to use custom fonts. The good news: Many of them are available for free from places like Google Fonts. This service offers a ton of free, elegant font styles for your website.

In this case, we want to use one of my favourite fonts, Droid Sans, to give our first blog post some personality. This happens via CSS, which, as mentioned earlier, is responsible for adding styling to websites. Here’s how to do it.

Load the Font

To change the font, we first need to load it. Otherwise, we can tell the browser a million times to use it, if it’s not present, there’s nothing it can do.

We mentioned earlier that additional resource are loaded inside the <head> section. That is also true for fonts. So, as the first step, copy and paste the following line of code in between the two <head> brackets (in case you are wondering, we got this piece of code from the Google Fonts website):

<link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css‘>

This will tell the browser to load the font from Google’s website. After that, we need to assign it to our content for it to change.

Add CSS to Apply the Font

To add CSS to our document, you will now create a new file (inside your text editor) and name it style.css. This is the so-called stylesheet where all of our page’s styling is saved. Save it in the same folder as the rest of the documents.

Before we can use the stylesheet, we first need to tell the browser to load it for our document. This happens by adding this line of code to the <head> section of index.html:

<link rel="stylesheet" type="text/css" href=style.css>

From now on, everything that is added in style.css will be applied to our document. Time to truy it out. We will now tell the browser to use the font we loaded earlier for our paragraphs like this:

section {
  font-family: 'Droid Sans', sans-serif;
}

That’s it. This piece of code basically tells the browser to apply the font family Droid Sans to all text inside <section> tags. The sans-serif part is the fallback font. If the browser can not find the first font (maybe because we forgot to load it in the header) it will use the second one instead, which is one of the standard fonts mentioned earlier.

Now save the file and go back to your browser. If you reload the newly created web page, it should now look a little something like this:

html paragraphs after applying font

Somewhat better, isn’t it? However, still pretty bland, so let’s add some more things.

Step #4: Create a Linked Navigation Bar

By now, the website is slowly starting to come together. However, beyond the first blog post, we will want to add a few more pages in the future. In order for our visitors to reach those, we need a navigation bar.

If you have ever used a website before, I probably don’t have to explain to you what that is. Creating a navigation bar might seem a bit complicated at first but if you have followed along so far, I am sure you can get your head around it.

Here’s how to do it step by step:

  1. Create a <nav> tag between the <body> and <section> tag (don’t forget to close it with </nav>)
  2. Inside of that, create an unordered list. Unordered lists show up as bullet points (as opposed to ordered or numbered lists, which is what you are looking at right now). The tag for them lists is <ul>.
  3. Inside the new <ul></ul> tags, we have to place <li> tags for each line item or bullet point (in this case, signifying new pages). For our website, we will need three.
  4. Inside of that, we will place the links to the other pages. The format for that is: <a href=”yourpageurl.html”>Your Page Name</a>. The <a> tag signifies a link. Everything after href= is the address the link is pointing to. “Your Page Name” is the text that appears on the website.

When all is said and done, the markup for your navigation bar should look like this:

<nav>
  <ul>
    <li><a href="media.html">Media</a></li>
    <li><a href="index.html">Homepage</a></li>
    <li><a href="signup.html">Signup</a></li>
  </ul>
</nav>

As you will notice, the menu items are aligned vertically in the HTML document (as are all elements) and without additional styling, they will merely appear like this:

unformatted html menu

However, on websites the navigation is most often aligned horizontally. This, again, is achieved with some CSS. In your style.css file, add the following:

li {
  display: inline;
  list-style-type: none;
  padding: 5px;
}

The display: inline property makes the links appear next to one another instead of on top of each other. The rest is to make the menu look a little better. For example, list-style-type is to remove the dots that are usually in front of bullet points and we have also added some space around each item.

formatted html menu

Looks much better, doesn’t it? Now let’s add some more styling to the rest of the page.

PS: Right now we only have one page. To use the navigation on all pages, we would have to copy its code to all other pages as well.

Step #5. Apply Colors, Borders and Other CSS Basics

While we’re already in the CSS file, let’s make the rest of the page look better as well. Specifically, we want to give the text area a fixed width of 640 pixels, a thick, shaded border, and some background color.

We can achieve this by adding the following lines to our style sheet:

article {
  border-style: solid;
  border-width: medium;
  background-color: #CCFFFF;
  width: 640px;
}

Most of these should be relatively self-explanatory. If you are confused about #CCFFFF, that’s a hex color code that tells the browser which shade of color to use.

Last but not least, we want to add a uniform background color to all of our pages. Because we want this to appear on all pages, we’re going to create a CSS selector for the <body> section.

In addition to that, instead of just assigning a color, let’s add a textured backgrounds. We can get one of those at CSSMatic. Play around with the settings until you’re happy and then click Download Noise Texture to get the file. Place it in the same folder as the rest of the website files.

After that, to apply it as the page background, we use the following CSS:

body {
  background-image:url('texture.png');
}

This applies the file as a background. Here is the result:

formatted html paragraphs

While it won’t win any beauty pageants at the moment, it’s more important that you understand the principles behind the design process. If you do that, there is very little you can’t do with some research. (If you want to build a site using WordPress, head over to my homepage.)

Step #6: Create a Form

Next up, we will add a form to our sample website. That way, Charlie and the Roundheads can start collecting email addresses from their fans.

Be aware that in this tutorial we are only dealing with the frontend part of the form. To do anything useful with the data submitted, we would also have to set up some backend technology. Unfortunately this is outside the scope of this article. If you want to look further into this, I recommend starting with PHP. It’s relatively easy to get into and is used by millions of developers worldwide.

What data do we want to collect from the fans who come to the website? Email, of course.

However, it also makes sense to collect zip codes to figure out where to go on tour next. Finally, fans might want to leave a message for the band, so we will take this into account as well.

With this in mind, let’s start work on our first HTML5 form.

Set up the Email Field

First, we will open a new section as we did before. This is where the form goes. Forms themselves consist of labels, inputs and buttons that are surrounded by <form> tags so that’s the first thing we will add to our new section.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=style.css>
  </head>
  <body>
    <section>
      <form action="">
      </form>
    </section>
  </body>
</html>

After that, it’s time to create the first input. Inputs are fields where others can fill in their data (like an email address) that then gets submitted via the form.

The first input we’re going to accept is for an email address. To do that, we add a tag of <input> and do not close it. We’re also going to preface it with Email :. Then we give the input tag a type, which is also email. That way, it will only accept email addresses in the right format.

Email <input type="email" >

Before HTML5, this field you would have accepted any old input and you would have had to write some extra code to make sure that the information you received from the user was a legitimate email address. With HTML5 that is no longer necessary.

Aside from that, we also want to make this a required field. To do so we’re going to give it another attribute, that of required. Should a user attempt to submit this form with the email field blank, it will respond with an error message saying “Please enter an email address”. The same will happen if the user tries to submit something that isn’t a valid email.

Finally, we also provide a name to identify the field, should we end up writing some back-end code. We do this by adding an attribute of name with a value of email. Here’s what it ends up looking like:

Email <input type="email" name="email" required>

Add Other Fields

Now, let’s go ahead and add fields for the zip code and the message. It basically works the same, except that the type of field is different. After all, it doesn’t make sense to use an email field for a zip code, does it? So, for the zip code we use a ‘number’ field instead, give it a name and make it required.

Zip Code <input type="number" name="number" required>

Finally, the field to accept messages somewhat breaks with the tradition since it doesn’t use the <input> tag, but rather <textarea>. This tag is used for inputs that are likely to span multiple lines, which is appropriate for fan messages yet less so for things like emails, passwords and names.

<textarea> can take a whole bunch of attributes. We’re interested in four of them. Firstly, we want to give it a name. We also want to define some rows and columns to specify how large the text area is going to be. Finally, we will define whether it is a required field or not. All of this happens like this:

<textarea rows="4" columns="50">

</textarea>

Now all that’s left is to add a submit button. This is as simple as creating another input type, this time of the type submit and the same value. The value defines the text on the button.

<input type="submit" value="submit">

All put together in our document, it comes out like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=style.css>
  </head>
  <body>
    <section>
      <form action="">
        Email <input type="email" name="email" required>
        Zip Code <input type="number" name="number" required>
        <textarea rows="4" columns="50">
        </textarea>
        <input type="submit" value="Submit">
      </form>
    </section>
  </body>
</html>

And here is what it looks like inside the browser:

unformatted html form

Not exactly pretty, is it? However, don’t worry. We can spruce it up with additional CSS:

input {
  display: block;
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 10px 5px;
}

Now it appears like this:

formatted html form

Much better, right? Cool, then let’s move on to the final chapter: How to add rich media to our website.

Step #7: Include Music and Videos

In former days, if you wanted to add music or movies to a web page, you’d have to rely upon slow, bulky frameworks like Flash or Silverlight. HTML5 has effectively thrown these out and replaced them with something much better.

For the next bit, we’re going to create a place to publish and share music and videos. Might sound complicated, but it’s actually really easy (as everything else).

But First, Let’s Talk About Codecs

To deal with media, we first need to deal with codecs. Codecs are compression/decompression algorithms that help make large files smaller for storage and transfer and then larger again when someone wants to view it.

As I’m sure you know, there are a huge number of web browsers on the market right now and each of these handle playing music and videos slightly differently. Therefore, codec support among web browsers is far from universal as you can see below.

available video codecs

For that reason we have to encode our music and movies in a whole bunch of different ways for the best possible result.

Start With Video

To get started we create a new file with the same HTML5 boilerplate we used before and also add a section tag.

At this point we are already ready to add some music and videos. Fortunately the HTML5 tag for adding videos is exactly what you would expect, which is <video>.

But before we can use it, we first need to add our video files. So far, all we’ve done is add a container for them. Given what we learned about codecs, we’re going to add both H.264 MOV and WebM8 media to our folder named video.mp4 and video.webm.

After that, adding a video is easy. You just include a <source> tag for each video you wish to embed. As an added bonus, we will add a placeholder that tells visitors with old web browsers that they ought to upgrade to something more contemporary. This goes outside the tag. Here’s what it looks like:

<video>
  <source src="video.mp4"></source>
  <source src="video.webm"></source>
  Sorry, your browser doesn't seem to support HTML5 video
</video>

Add Audio

Now we move on to audio files. Unlike videos, there are only two codecs to care about:

available audio codecs

As you’d expect, the tag for audio is <audio> and you can add your sources in the same way as videos.

<audio>
  <source src="song.mp3"></source>
  <source src="song.ogg"></source>
  Sorry, your browser doesn't seem to support HTML5 audio
</audio>

After that, the entire document comes out like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Media</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=style.css>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="media.html">Media</a></li>
        <li><a href="index.html">Homepage</a></li>
        <li><a href="signup.html">Signup</a></li>
      </ul>
    </nav>
    <section>
      <video>
        <source src="video.mp4"></source>
        <source src="video.webm"></source>
        Sorry, your browser doesn't seem to support HTML5 video
      </video>
      <audio>
        <source src="song.mp3"></source>
        <source src="song.ogg"></source>
        Sorry, your browser doesn't seem to support HTML5 audio
      </audio>
    </section>
  </body>
</html>

And that’s it. The basic requirements of the site have been fulfilled. All it took was a text editor, a handful of files and a few lines of code. Pretty cool, right? Told you you would be able to follow along.

Summing Up

In this article, you have learned the basics of writing web pages in pure HTML. We have talked about what HTML is exactly and why it makes sense to learn to use it in the real world.

Besides that, you have learned how to create a basic HTML template, fill it with content and enhance that with CSS. We have also dipped our toes in adding linked navigation, forms and rich media.

With the basics covered, you are now ready to start exploring further on your own. By adding more HTML and CSS knowledge to your repertoire you will be able to do more complex maneuvers in the future and build more powerful websites.

Reference:

https://websitesetup.org/html-beginners-guide/

https://www.w3schools.com/html/default.asp