FRONT END WEB DEVELOPMENT- PART 2.0

Businesses hire web developers to create websites for their organisations. They are now a critical component for any business to stay competitive. Take a look on how to create customized web pages using HTML, CSS and JavaScript and get an essence of Front End Development

June 25, 2020 Veena Chaddha

7 minute read

In this part, you would learn some important html tags which serve as building blocks for the html document, hence giving a website its structure. As you go further in the series, you would get to know more about CSS for styling your web pages.

ESSENTIAL HTML5 TAGS:

<title> Tag

Anything written within the title tags is shown on the tab at the top of the browser window.

<body> tag

Anything written within the body of the web page is displayed in the main browser window.

Refer the figure shown below which illustrates how the title and body tags appear on a browser.

HEADING:

There are six levels of html heading tags:

<h1>This is Level 1 heading <h1>
<h2>This is Level 2 heading <h2>
<h3>This is Level 3 heading <h3>
<h4>This is Level 4 heading <h4>
<h5>This is Level 5 heading <h5>
<h6>This is Level 6 heading <h6>

h1 element is used for main heading whereas rest of the heading tags are used for different subheadings.

PARAGRAPH <p>

There arises a need of a paragraph tag as browser ignores the extra space and change in line done using the enter key when written directly in the body tag.

<p> A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line. </p>

<p> Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more paragraphs.</p>

LISTS:

Unordered List- used to make a list of items which need not be in sequence. For example to prepare a To-do list.

Ordered List- used to determine a sequence of tasks or step-wise elaboration. For example to illustrate a recipe in your web page.

li element stands for the list item.

LINKS

To create a link between multiple pages i.e. to navigate from one web page to another.
- Creating a link by using ‘a’ element with href attribute.
- ‘a’ tag is both a block level and inline element. When ‘div’ tag which is block level is used within ‘a’, it behaves as a block level, otherwise inline.
- There are three types of links- Internal, External, Fragmented.

INTERNAL LINKS :

To link to a file in the same directory or any other directory in your computer.
<a href=“same-directory.html”> Internal link </a>

EXTERNAL LINKS :

It links to some other website on the internet.
<a href=“https://blurcode.in" target=”_blank”> External Link </a>
target=”_blank” attribute prevents opening the link in the same tab i.e on pressing the external link the user would be directed to the that web page on a new tab.

FRAGMENTED LINK :

It is useful in case of Single Page Applications.
Links from one part of a web page to another part of the same page
You can use the id attribute to target elements within a page that can be linked to
- Give an id attribute to the section which is to be visited from the other part of the page (id attribute is always unique for a specific elements)
- use #id-name in the href to refer to that section
- # is used before the id name as a link to the section with that id in the same web page

IMAGES

img tag is a self-closing tag (i.e no closing tag required)
use attribute src for linking with the picture location
To use the image from your device <img src=”picture-with-quote.jpg” width=”400” height=”235” * alt=”Picture with a quote”>
- To get image from the web <img src=”http://lorempixel.com/output/nature-q-c-640-480-1.jpg” width=”640” height=”480”> and

SOME ADDITIONAL HTML TAGS

Superscript <sup> and subscript <sub> tags:

Superscript:-
4<sup>th</sup> used to write 4^th
Subscript:-
CO<sub>2<sub/> used to write CO₂

<hr> and <br>:

<hr> - to draw a horizontal line
<br> - to give a single line space in between the text.
Both are self closing tags.

There is a very long list of tags in HTML. I have mentioned some essential ones here. Do refer to other tags too as and when required.

CASCADING STYLE SHEETS

Although content is king, how users absorb and relate to that content largely depends on our experience of consuming the presentation of it.
- The use of color, positioning, size, among other things, is all part of that.
- Cascading style sheets, or CSS, is an incredibly powerful technology that provides the styling capability.
- It can take the same HTML structure and present it in such drastically different ways that you would never even guess that the underlying structure of the content are exactly the same ones.

ANATOMY OF A CSS RULE:

A CSS rule consists of selector, in the above diagram it’s a p, the paragraph tag, which is basically saying that whatever rules I’m about to give should apply to the content of every single paragraph tag in the entire HTML page.
The selector is followed by open and close curly braces. Inside of those braces, we have CSS declaration.
Declaration consist of two parts, the property and the value.
Property name is something that’s predefined by CSS specification, and for every property there is a set number of pre-defined values. Or in the case of numerical values, set number of type of numerical values that is pre-defined.
- Now, every property in the value is separated by a colon, and is terminated by a semicolon.
- Although a semicolon is not a requirement, it’s a best practice, to always use it.
- Now property can be anything related to the content eg. font size, color, background color of a paragraph, width and height for a paragraph, text-alignment etc.
The collection of these CSS rules is called a style sheet.

NOTE :- Every browser comes with some default styles that it applies to different HTML elements. And h1, h2, and so on, and different other elements are very commonly styled by the browser itself.

TYPES OF CSS SELECTORS

CSS selectors are used to determine which HTML element, or set of elements, to apply the CSS declarations to. There are three types of selectors: * Element selectors * Class selectors * ID selectors

ELEMENT SELECTORS:

In this one you specify the html elements as selectors as shown in the previous figure.
For example, if we have specified div element to have color pink, that means every div in the HTML document will have its content’s text pink. Obviously, this really doesn’t affect any other elements that contain text in them.
For example, we can have a p element that contains text but that text will not be affected by this CSS rule unless specified that the paragraph tag should have content text colored pink.

CLASS SELECTORS

We assign the class attribute to some html elements with some class name, to use it for styling them.
Use a dot before class name as selector in the CSS rule.
Notice that a different paragraph that is not marked with attribute class=“blue” is completely unaffected by this.
There are differences between the way you define a class and the way you use it.
You define a class always with a dot in front of its name. There cannot be any space between the dot and the name of the class
However, when you use the class, you don’t use the dot in its name, you just use its name.

ID SELECTOR:

Assign an id attribute to an html element, it is unique for each one and cannot be assigned even to another block with same element.
Simply assign an id name to an html element and then use it as a selector with a pound sign.
For example the div element with id=“mainContent” would have its text color red.

About the author

Veena Chaddha is a student at SRM University, pursuing a btech degree in computer science engineering. She is an avid learner and a tech enthusiast. Her skills are HTML, CSS, Bootstrap, Nodejs , Flutter and is looking forward to be a software developer. She is well versed in English and has good communication skills.

Veena Chaddha

Reviews

If You find it interesting!! we would really like to hear from you.

Ping us at Instagram/@the.blur.code

If you want articles on Any topics dm us on insta.

Thanks for reading!! Happy Coding

Blur Code