Scribd
Upload
7 views

HTML Document

The document provides instructions on how to create a basic HTML resume webpage including headings, paragraphs, lists, tables, links and images using HTML tags and CSS for formatting and styling.

Uploaded by

ayushthanthri2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML Document

The document provides instructions on how to create a basic HTML resume webpage including headings, paragraphs, lists, tables, links and images using HTML tags and CSS for formatting and styling.

Uploaded by

ayushthanthri2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Instructions

1 Open the web browser


2 Copy the URL “https://notepad-plus-plus.org/downloads/”
3 Paste in the browser tab
4 Download the latest version of notepad++
5 Install in your systems
6 Create a folder on the desktop with your name
7 Download the PDF file sent and save it in your folder

HTML SKELETON
<html>
<head>
<title>My Resume</title>
</head>
<body>
</body>
</html>

HEADINGS : HTML headings are titles or subtitles that you want to


display on a webpage.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

PARAGRAPH TAG : HTML paragraphs are defined with the <p> tag:
<p>
Name: Shruthi P
Address: Vidyavardhaka College of Engineering, Mysuru
Email ID: shruthi.p@vvce.ac.in
Phone No: 9538787767
</p>

HTML Line Breaks : To display text in new line


<br>

HORIZONTAL TAG : To draw a horizontal line


<hr>

HTML preserve tag : To preserve spaces


<pre>
Name: Shruthi P
Address: Vidyavardhaka College of Engineering, Mysuru
Email: shruthi.p@vvce.ac.in
Phone: 9538787767
</pre>

HTML Formatting Tags : To format text displayed


<p>
<b>Name</b>: <i><small>Shruthi P</i></small><br>
<b>Address</b>: <i><small>Vidyavarthaka College of
Engineering</i></small><br>
<b>Email</b>: <i><small>shruthi.p@vvce.ac.in</i></small><br>
<b>Phone</b>: <i><small>9538787767</i></small><br>
</p>

<h2><mark>Objective</mark></h2>
<p align = justify>To channelize my credentials towards teaching and
academic activities by contributing to the vision of the institution.
Diversify and up-skill for the positive development of the institution
and in-turn seeking a professional growth.
</p>
HTML Lists
<h2><mark>Summary</mark></h2>
<ul>
<li>M.Tech in Computer Engineering</li>
<li>BE in Computer Science and Engineering</li>
<li>Professional work experience of 3 years as Assistant Professor in
Department of Computer Science and Engineering.</li>
</ul>

<h2><mark>Summary</mark></h2>
<ol>
<li>M.Tech in Computer Engineering</li>
<li>BE in Computer Science and Engineering</li>
<li>Professional work experience of 3 years as Assistant Professor in
Department of Computer Science and Engineering.</li>
</ol>

CSS Introduction
 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.
 CSS is used to define styles for your web pages, including the
design, layout and variations in display for different devices and
screen sizes.
Types of CSS (Placement/Location of CSS)
1. Inline
2. Internal
3. External

Types of CSS selectors


1. id Selector
2. class Selector
3. Universal Selector
4. Grouping Selector

Color and Text Alignment


<h2 style = "color:red; text-align:center;">Resume</h2>

Background Color
<body style = "background-color: MistyRose;">

Id Selector
<style>
#heading
{
color: red;
text-align: center;
}
</style>

<h2 id="heading">Resume</h2>

Class Selector
<style>
.heading
{
color: red;
text-align: center;
}
</style>

<h2 class="heading">Resume</h2>

Universal Selector
<style>
*
{
color: red;
text-align: center;
}
</style>

Group Selectors
<style>
h2, h3
{
color: red;
text-align: center;
font-family: Impact;
}
</style>

Margins
h2, h3
{
color: red;
text-align: center;
font-family: Impact;
border: 1px solid black;
margin-top: 5%;
margin-bottom: 5%;
margin-right: 5%;
margin-left: 5%;
}

*{
margin-right: 5%;
margin-left: 5%;
}

Tables
<h3><mark>Education Details</mark></h3>
<table>
<tr>
<th>Education</th>
<th>Branch</th>
<th>College/University</th>
<th>Year of Passing</th>
</tr>
<tr>
<td>BE</td>
<td>Computer Science and Engineering</td>
<td>ATMECE</td>
<td>2014</td>
</tr>
<tr>
<td>M.Tech</td>
<td>Computer Engineering</td>
<td>PESCE</td>
<td>2016</td>
</tr>
</table>

table, th, td
{
border: 1px solid black;
text-align: center;
margin-left: auto;
margin-right: auto
}

Link
<h3><mark>Reference Links</mark></h3>
<ol>
<li><a href="http://www.vvce.ac.in/">Vist my current working
institution</a></li>
<li><a href="https://www.flipkart.com/">Take a look of my website
design</a></li>
</ol>

Images
<img src="Shruthi.jpg" alt="Shruthi.P">

<img src="Shruthi.jpg" alt="Shruthi.P" style="float:right; width:80px;


height:80px">

Scrolling text
<marquee behavior="scroll" direction="right"
scrollamount="10">Thank You for watching!!!</marquee>

Thank you for active participation!!!

You might also like