To create an html file to implement the concept of margin, padding using cascading style sheets.

HTML Source Code:

<!DOCTYPE html>
<html>
<head>
<title>Information Technology</title>
<style >
body
{
background-color:rgb(212,231,242);
text-align: justify;color:#1F1F97;
margin-right:10%;
padding:100px; 
}
#cen
{
text-align:center;font-weight: bolder;font-size:25px;
}
ol 
{
    padding: 20px;
}
ol li 
{
    background: #ffe5e5;
    margin: 5px;
}
span
{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;
}
span.indent
           { 
            padding-left: 1em 
           }
</style>
</head>
<body>

<div style="margin:auto;display:block;width:40%;">
<img src="dptit.PNG"  height="100px";position:">
</div>
<hr> 

<h3 style="text-align:center;font-size:70px;">Vision and Mission</h3> 

<span id="cen">Department Vision</span> 

<p style="text-align: justify;font-style: italic;">

The department of Information Technology envisions to create groomed, technically competent and skilled intellectual IT professionals specifically from the rural area of Punjab to meet the current challenges of the modern computing industry.</p> 

<span id="cen">Department Mission</span> 
<ol type="a"> 
<li>To uplift rural students of the Punjab region through advanced quality education in Information Technology.</li> 
<li>To provide technical solutions in the field of Information Technology to the local society.</li> 
<li>To provide need based quality training in the field of Information Technology.</li> 
<li>To maintain state-of-the-art facilities and laboratories where students and faculty can enhance their understanding of technology.</li> 
<li>To provide students with the tools to become productive, participating global citizens and life-long learners.</li> 
<li>To provide an atmosphere for students and faculty for continuous learning to investigate,apply and transfer knowledge.</li> 
</ol>
  <span id="cen">Programme Education Objectives (PEO) B.Tech. (Information Technology)</span>

<ol>
<li>The graduates of Information Technology Engineering Program will be prepared to gain employment as an IT professional.</li> 
<li>The graduates of Information Technology Engineering Program will function effectively as individuals and team members in the workplace, growing into highly technical or project management and leadership roles.</li> 
<li>The graduates of Information Technology Engineering Program, if they are inclined, will be able to continue their formal education and be accepted to relevant post- graduate degree programs and succeed in these studies.</li>
</ol>

<hr> <hr> 
<span>
<a  id="name" href="mailto:sanjam531@gmail.com" style="font-size:40px;font-weight:bold;">Sanjampreet Singh</a>
<br>
    <a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">Department Of Information Technology</a>
    <br>
    <a href="E:\documents\IM LAB\html\CSS 1\CSS1.html" style="text-align:left;"><-Last Practical
    </a>
    <span class="indent"></span>
    <a href="E:\documents\IM LAB\html\css3\css3.html" style="text-align:right;">Next Practical-></a>
    <br>
  <a href="http://it.gndec.ac.in/?page_id=2">Attmpted Replica</a> 
</span>
</body>
</html>

CSS Code:

p
{
font-style:serif;
font-size:40px;
text-align: justify;
}
span
{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;
}

Output:



Include the following source Code in Document Environment in your LaTeX File

LaTeX Source:

\documentclass[12pt]{article}
\usepackage{graphicx}
\usepackage{wrapfig}
\usepackage{multicol}
\usepackage{caption}
\usepackage{subcaption}
\usepackage{transparent}
\usepackage{multirow}
\usepackage{eso-pic}
\usepackage[utf8]{inputenc}
\usepackage{color}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newcommand\BackgroundIm{
\put(0,0){
\parbox[b][\paperheight]{\paperwidth}{
\vfill
\centering
{\transparent{0.05} \includegraphics[height=\paperheight,width=\paperwidth,
keepaspectratio]{gne}
\vfill
}}}}
\begin{document}
\AddToShipoutPicture{\BackgroundIm}
\newpage
\pagenumbering{gobble}
\section{\emph{To create an html file to implement the concept of margin, padding using cascading style sheets.}}
\subsection{\emph{Code}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Information Technology</title>
<style >
body
{
background-color:rgb(212,231,242);
text-align: justify;color:#1F1F97;
margin-right:10%;
padding:100px;
}
#cen
{
text-align:center;font-weight: bolder;font-size:25px;
}
ol
{
padding: 20px;
}
ol li
{
background: #ffe5e5;
margin: 5px;
}
span
{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;
}
span.indent
{
padding-left: 1em
}
</style>
</head>
<body>

<div style="margin:auto;display:block;width:40%;">
<img src="dptit.PNG" height="100px";position:">
</div>
<hr>
<h3 style="text-align:center;font-size:70px;">
Vision and Mission</h3>

<span id="cen">Department Vision</span>

<p style="text-align: justify;font-style: italic;">

The department of Information Technology envisions to create groomed,
technically competent and skilled intellectual IT professionals specifically
from the rural area of Punjab to meet the current challenges of the modern
computing industry.</p>

<span id="cen">Department Mission</span>

<ol type="a">
<li>To uplift rural students of the Punjab region through advanced
quality education in Information Technology.</li>
<li>To provide technical solutions in the field of Information
Technology to the local society.</li>
<li>To provide need based quality training in the field of Information
Technology.</li>
<li>To maintain state-of-the-art facilities and laboratories where
students and faculty can enhance their understanding of technology.</li>
<li>To provide students with the tools to become productive, participating
global citizens and life-long learners.</li>
<li>To provide an atmosphere for students and faculty for continuous learning
to investigate,apply and transfer knowledge.</li>
</ol>
<span id="cen">Programme Education Objectives (PEO)
B.Tech. (Information Technology)</span>

<ol>
<li>The graduates of Information Technology Engineering Program
will be prepared to gain employment as an IT professional.</li>
<li>The graduates of Information Technology Engineering Program will
function effectively as individuals and team members in the workplace,
growing into highly technical or project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering Program,
if they are inclined, will be able to continue their formal education and be
accepted to relevant post- graduate degree programs and succeed in these studies.</li>
</ol>

<hr> <hr>
<span>
<a id="name" href="mailto:sanjam531@gmail.com"
style="font-size:40px;font-weight:bold;">Sanjampreet Singh</a>
<br>
<a href="http://sanjamhelping.blogspot.in/p/
it-14304-it-methodologies-lab.html">Department Of Information Technology</a>
<br>
<a href="E:\documents\IM LAB\html\CSS 1\CSS1.html"
style="text-align:left;"><-Last Practical
</a>
<span class="indent"></span>
<a href="E:\documents\IM LAB\html\css3\css3.html"
style="text-align:right;">Next Practical-></a>
<br>
<a href="http://it.gndec.ac.in/?page_id=2">Attmpted Replica</a>
</span>
</body>
</html>
------------------------------------------------------------------------
CSS Code:
p
{
font-style:serif;
font-size:40px;
text-align: justify;
}
span
{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;
}
\end{verbatim}
\subsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{P5css}
\caption{Output of HTML and CSS}
\end{figure}
\end{document}

Output:




Comments

Post a Comment

Popular posts from this blog

To create an html page with frames and frameset

Image
Layout Of HTML Frame HTML Source Code: <!DOCTYPE html> <html> <frameset rows="50%,*" > <frameset cols="50%,*"> <frame src="E:\documents\IM LAB\html\HTML1.html">   HTML Page 1 <frame src="E:\documents\IM LAB\html\HTML2.html">   HTML Page 2 </frameset> <frameset cols="25%,37.5%,37.5%">   <frame src="E:/documents/IM%20LAB/html/sanjam.jpg">   YOUR PICTURE   <frame src="E:\documents\IM LAB\html\HTML3.html">    HTML Page 3 <frame src="E:\documents\IM LAB\html\LinkToHtml.html">   HTML Page 4     </frameset> </html> Output: Include the following source Code in Document Environment in your LaTeX File LaTeX Source: \documentclass[12pt]{article} \usepackage{graphicx} \usepackage{wrapfig} \usepackage{multicol} \usepackage{caption} \usepackage{subcaption}...
Read More »

1. Write a program to insert a new element at end as well as at a given position in an array in Java

Image
import java.util.Scanner; class DSPM1 { public static void main(String args[]) { Scanner mi = new Scanner(System.in); int arr[]=new int[10]; int i; System.out.println("Enter the no. of elements to be enter:"); int n =mi.nextInt(); System.out.println("Enter the elements:"); for(i=0;i<n;i++) { arr[i]=mi.nextInt(); } System.out.println("Enter The element to be inserted"); int insert=mi.nextInt(); System.out.println("At which position(Enter the index number)"); int pos=mi.nextInt(); for(i=n;i>pos;i--) { arr[i]=arr[i-1]; } arr[pos]=insert; System.out.println("Inserted Successfully!!\nNow the new array"); for(i=0;i<n+1;i++) { System.out.println(arr[i]); } System.out.println("/*\nName-Sanjampreet Singh\nRoll Number-1507967\n*/"); } } OUTPUT:
Read More »

1. To familiarize with network devices like switch, hub, routers and bridges in LaTex

\documentclass[12pt]{article} \usepackage{graphicx} \usepackage{wrapfig} \usepackage{multicol} \usepackage{caption} \usepackage{subcaption} \usepackage{transparent} \usepackage{multirow} \usepackage{eso-pic} \usepackage[utf8]{inputenc} \usepackage{color} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \newcommand\BackgroundIm{ \put(0,0){ \parbox[b][\paperheight]{\paperwidth}{ \vfill \centering {\transparent{0.05} \includegraphics[height=\paperheight,width=\paperwidth, keepaspectratio]{gne} \vfill }}}} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% \begin{document} \begin{titlepage} \newcommand{\HRule}{\rule{\linewidth}{1mm}} \begin{minipage}[height=\paperheight]{0.8\textwidth} \centering { \textcolor{blue} { \textsc{\Large Guru Nanak Dev Engg College }\\[0.5cm] \textsc{\large Practical File}\\[0.3cm] \HRule \\[0.2cm] { \huge \bfseries Internet Methodologies}\\[0.1cm] \HRule \\[2cm]} \includegraphics[width=60mm,scale=0.7]{gne}\\[2cm] \textcolor{blue} ...
Read More »