(→Code) |
m (Miga moved page GMU:(In)visible Networks/First tutor class to GMU:(In)visible Networks 2016/First tutor class) |
||
(3 intermediate revisions by 2 users 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
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>