INDUSTRIAL TRAINING

ON
“WEBSITE DEVELOPMENT USING
HTML, CSS”.
 Under the guidance of

MR. MD NAJIULLAH

Department of web development

Office: E-85, Gali No. 6, Jagjeet Nagar, Usmanpur, Delhi
CONTENTS:
 ABOUT PROJECT
 TECHNOLOGY
 SOFTWARE USED
 COMPONENT REQUIRED FOR ONLINE
 DARBI INSTITUTE OF SKILLS

ABOUT institue
The Darbi Institute Of Skills is the best Institute for Certification Courses, was
established in 2021 with a vision to contribute to indian education by focusing
on education and innovation. It made a very humble beginning with a limited
number of students, staff and infrastructural facilities in a urban area.

SESSION: 2021-22
TECHONOLOGY
Front-end Development By MD ZEESHAN
HTML
CSS
 HTML
What is HTML?

HTML stands for Hyper Text Markup Language

HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
Example
HTML elements label pieces of content such as
"this is a heading", "this is a paragraph", "this is a link", etc.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.
Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Links – Hyperlinks

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

HTML Links – Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple
An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another
target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Example

Use target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
 CSS

What is CSS?

CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

A CSS rule consists of a selector and a declaration block.

CSS Syntax
CSS Selectors

A CSS selector selects the HTML element(s) you want to style.

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into three categories:

•Element Selector
•Class Selector
•Id Selector

CSS Grid Layout Module

Grid Columns

The vertical lines of grid items are called columns.

Grid Rows

The horizontal lines of grid items are called rows.

 Grid Gaps
The spaces between each column/row are called gaps.

You can adjust the gap size by using one of the following properties:
grid-column-gap
grid-row-gap
grid-gap
CONCLUSION

The Project entitled “Institute course Management System ” is developed using HTML CSS as Front-end.
This project covers only the basic features required.
SOFTWARE USED

 XAMPP SERVER
 https://www.apachefriends.org
 https:// Download XAMPP - Apache Friends

 EDITOR : VS CODE
https://code.visuaStudio lstudio.com ›
Download Visual Code - Mac, Linux, Windows

 For Run

 Google Chrome
 Mozilla Firefox
 Internet Explorer
SKILLS & COMPONENET NEEDED FOR ONLINE

 Domain Name
https://Location.org

Web Hosting
https://Location.org

Laptop

Internet
HOME PAGE:
 MANAGE COURSES
Manage Courses With Multiple Course Section
 MANAGE PROGRAMMING LANGUAGE
Manage Multiple Programming Languages Course In This Section
 click on a course
Click a Particular Course And Show Course Details.

i.e. - Click On This Course Then Show Course Details.

Course details
What We Learn Of A Student.
Related Courses
Some Related Course
 MANAGE DEVELOPMENT COURSES

Manage Development Courses In This Section.

 MANAGE GALLERY
Manage gallery with Images and Videos
MANAGE GALLERY IMAGES
In This Section Manage Gallery Images.
 MANAGE GALLERY VIDEOS
Manage In This Section Gallery Videos With Videos Controls.

Video Control Section

Click On Download Button To

Download Video
 MANAGE CONTACT
Manage Contact Details In This Section

Contact Details in below.

MANAGE INSTITUTE ABOUT
Manage Intstitute about With Extra Courses In This Section
 MANAGE LATEST UPDATE SECTION
In This Section Manage Latest Updates Using Marquee Tags.
MANAGE GOOGLE MAP
Institute Address On Google Map.
MANAGE FOOTER
Manage Footer With Copy Right
THANK
YOU