Resume Code & Homework

Watch Web Development Foundations: Web Technologies

Goal for resume homework:

Create one resume.html file, that contains some info about yourself. In that file have one example of an element with inline style:

<p style="color:blue;">blue text </p>

Also add an embedded style sheet:

<style>

body {

background:aquamarine;

}

p {

   color:gray;

}

</style>

Also add a link to an external style sheet in the head of the document:

<head>
<title>linked style sheet</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="style.css">
</head>

Don’t forget that for this to work you will need also create a style.css file.


Resume example starter code from class:

 

<!DOCTYPE html>

<html>
<head>

    <title>Your Name Resume</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
</head>
<body>

<h1>Your name</h1>

<p class="bio">Write Something about yourself </p>

<div>
	<h2>section heading</h2>
		<ul>
			<li>Item one</li>
			<li>Item one</li>
			<li>Item one</li>
			<li>Item one</li>
			<li>Item one</li>
		</ul>
	</div>
<div>

<h3>Section heading</h3>
	<ol>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
	</ol>

</div>


</body>

</html>


HTML page with inline CSS style

 

<!DOCTYPE html>
<html>
<head>
<title>Inline</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">

</head>
<body style="background:blue;">

<div style="background:orange" class="one">
<h1 style="color: white;" >hellllloooo world</h1>
<p>some text</p> 
</div>

<h1>hellllloooo world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi orci, bibendum ac justo sed, ultrices sodales eros. Sed nec augue placerat, bibendum quam ut, tempor nulla. Aliquam porttitor dolor tempus lectus lacinia ultrices. Sed augue mauris, fermentum sit amet purus non, convallis pretium ex. Curabitur non magna eget libero pretium ornare in eget libero. Quisque interdum dignissim mauris, eu interdum ipsum.</p>


</body>
</html>

HTML Page with embedded style sheet

 

<!DOCTYPE html>
<html>
<head>
    <title>Embeded Style</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">

<style>

    body {

        background: red;

padding: 50px;

    }

    h1 {

        color: white;

    }

div {

   background: blue;
   padding: 20px;
   font-family: sans-serif;

}

.one {

  color: aquamarine;

}

</style>

</head>

<body>

   <div class="one">
     <h1 class="one" id="one" >hellllloooo world</h1>
     <p>some text</p> 
  </div>

  
  <div>
     <h1>hellllloooo world</h1>
     <p class="one">some text</p>
  </div>     

</body>
</html>

HTML page with linked external style sheet

 

<!DOCTYPE html>
<html>
<head>
    <title>linked style sheet</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<h1>Page with linked style sheet</h1>
<h2>Another Heading</h2>
<h3>A ordered List</h3>

<ol>
<li>January</li>
<li>Febuary</li>
<li>March</li>
</ol>

<h3>A Unordered list</h3> 

<ol>
<li>Pizza</li>
<li>Ice cream</li>
<li>Hot Dog</li>
</ol>

</body>

</html>

style.css

body {
font-family:sans-serif;
}

h1 {
color: #a70000;
}

 

Leave a Reply