m (Miga moved page GMU:(In)visible Networks/First tutor class to GMU:(In)visible Networks 2016/First tutor class) |
|||
| (2 intermediate revisions by one other user not shown) | |||
| Line 6: | Line 6: | ||
[http://www.20thingsilearned.com/en-US 20 Things I learned about browsers and the web] | [http://www.20thingsilearned.com/en-US 20 Things I learned about browsers and the web] | ||
===Code=== | ===Code=== | ||
Latest revision as of 22:19, 13 February 2017
Related Links
20 Things I learned about browsers and the web
Code
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title> My Website</title>
<style>
html, body { font-family:Verdana;
//background-color:green;
}
h1, h3{
font-family:Verdana;
background-color: #000;
//margin: top right bottom left;
margin: 50px;
padding: 10px 50px 100px 100px;
//margin-top:1000px;
//font-size: 14px;
color: #ccc;
}
p{ background-color: rgba(71, 88, 137, .5);
padding:50px;
color: #ccc;
font-size:20px;
}
nav{
font-size:30px;
color: yellow;
}
ul { text-decoration: none;
text-style:none;
}
li{
display: inline;
padding:50px;
}
a {
color:red;
text-decoration: none;
}
a:hover{
color:yellow;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href=“https://www.google.com.mx/?gws_rd=ssl”>About</a></li>
<li><a href=“http://www.uni-weimar.de/de/universitaet/start/”>Portfolio</a></li>
<li><a href=“http://www.w3schools.com/”>Contact</a></li>
</ul>
</nav>
<h1>TITLE</h1>
<p>Paragraph</p>
<h3>TITLE</h3>
</body>
</html>
If you guys are feeling curious but not so sure about going through a more complicated code you can check this one out. It's a bit more complicated but it is still easy to understand.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is a title</title>
<style>
h1, h3 {color:#ccc;
font-family: "Verdana";}
.myClass {
margin:20px;
background-color: #000;
color:#FFF;
padding: 10px;
}
.mySecondClass{
margin: 50px 10px;
padding: 10px 0 50px 100px;
background-color: rgba(255, 0, 0,.3);
}
nav {
font-family: "Verdana";
font-size: 14px;
margin: 50px;
width: 100%;
}
#menu ul{
list-style: none;
}
#menu li {
display: inline;
padding: 10px;
color: #000;
}
a {
color: #000;
text-decoration: none;
}
a:hover{
color: #ccc;
}
.active{
color: #f9f9f9;
}
</style>
</head>
<body>
<nav id= "menu">
<ul>
<li><a href="https://www.google.com.mx/?gws_rd=ssl" target="_blank">About</a></li>
<li><a href="https://www.google.com.mx/?gws_rd=ssl" target="_blank">Portfolio</a></li>
<li><a href="https://www.google.com.mx/?gws_rd=ssl" target="_blank">Contact</a></li>
</ul>
</nav>
<div class="myClass">
<h1>Title</h1>
<p>Some words that make sense for us humans</p>
</div>
<div class="mySecondClass">
<h3>Title Two</h3>
<p>These words are starting to get lost</p>
</div>
<img src="img/nombre.png">
</body>
</html>