Introduction

Front-end development is developing visual and interactive elements in a website where users interact directly. It is developed with combination of HTML, CSS and JavaScript coding. HTML provides the structure for website, CSS helps in styling and Layout and JavaScript describes the dynamic behavior and interaction.

What does a Front-end Developer do?

A front-end developer is responsible for creating the user interface of a website. After developing, the website should look good and easy to use. To look good, the website should focus on adhering to design principles and user experience. So for developing a website, the designers, back-end developers and managers need to work closely to ensure the website meets the client’s requirements.

So the main things for front-end development are HTML, CSS, and JavaScript. In this blog, we are going to see the introduction to HTML.

HTML Basics

HTML stands for Hyper Text Markup Language. It gives the structure to the webpage. Inside the page, we can apply CSS styling and JavaScript to make the page interactive.

Anatomy of HTML:

The Opening Tag:
It consists name of the element wrapped in opening and closed angle brackets. The opening tag marks where the element begins or starts to take effect.

The Content:
It consists the content of the element.

The closing Tag:
It looks same as opening tag, except that it includes a forward slash before element name. It marks the end of the element.

Example:

<p> This is a paragraph tag.</p>

Here <p> is the opening tag. The content is “This is a paragraph tag.” and the closing tag is </p>

We can nest different elements, which means placing one element within another element. It will give a better look for the content.

Example:

<p> My cat is <strong>very</strong> grumpy.</p>

The output will be: “My cat is very grumpy.”

Void elements:

Not all elements follow the pattern of open tag, content and close tag. Some consists of single tag which is mainly used to insert something in the document. They are called as Void elements.

Example: <img src=”Image path” alt=”Alter text” /> If we mention the path of the image, the image will be fetched from that path and displayed here.

Attributes:

Elements can also have attributes. It contain extra information about the element that wont appear in the content.

Attribute should have:
1.Space between it and element name.
2.The attribute name, followed by an equal sign.

3.An attribute value,wrapped with opening and closing quote marks.

    For example, in the previous example of <img> tag, we have used two attributes. One is source “src” and other “alt”. The “src” is required attribute that specifies the location of image. The “alt” attribute specifies a text description of image.

    The attribute can also be:

    <p class=”class-name”>My Dog name is Puppy.</p>

    Here we have mentioned class attribute. This is mainly used for styling the particular tag. We can give styling for the element inside this class name. This is where CSS styling comes in place.

    Anatomy of an HTML document:

    <!doctype html>

    <html lang=”en-US”>

    <head>

    <meta charset=”utf-8″ />

    <title>My First Page</title>

    </head>

    <body> This is my Page</body>

    </html>

    Description of the anatomy:

    1. The doctype. At starting the doctypes were meant to act as links to a set of rules that HTML page had to follow to be considered as good HTML.
    2. <html>: It wraps the whole content of the page.
    3. <head>:This includes keywords and page description that would appear in search results. This will not be shown to viewers.
    4. <meta>: this element represents metadata that cannot be represented by other HTML meta-related elements like base,link,script,styles,etc..There is no reason not to set this.It can help avoid some problems later.
    5. <title>: This sets title of the page, which appears in browser.
    6. <body>: This includes the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.

    We can type this in any text editor and save the file as “.html”. The extension should be “.html”.

    If we double click on the file, we can view the content of the program in a browser.

    Conclusion:

    In this blog, we saw introduction to Front-end development and basics of HTML which helps to write the front-end program.

    Post Views: 28

    Leave a Reply