Bureaucrats, emailconfirmed, Administrators
5,373
edits
(Created page with "Related Links [http://www.w3schools.com/ W3Schools] [http://tympanus.net/codrops/category/tutorials/] [http://www.20thingsilearned.com/en-US 20 Things I learned about browsers ...") |
m (Miga moved page GMU:(In)visible Networks/First tutor class to GMU:(In)visible Networks 2016/First tutor class) |
||
(8 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
Related Links | ===Related Links=== | ||
[http://www.w3schools.com/ W3Schools] | [http://www.w3schools.com/ W3Schools] | ||
[http://tympanus.net/codrops/category/tutorials/] | |||
[http://tympanus.net/codrops/category/tutorials/ Codrops Tutorials] | |||
[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=== | |||
<pre> | |||
<!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> | |||
</pre> | |||
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. | |||
<pre> | |||
<!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> | |||
</pre> |