Category Archives: HTML

Playing with HTML

We’re playing with HTML in The Internet Course this week as a part of looking at how the internet works. I like doing this because it gets our hands dirty with what goes on in the background. It also ties in to last weeks topic, the history of the internet, in that early web pages were largely coded this way. Nowadays many web pages are dynamically generated from backend databases through scripts, which is the way the Internet Timeline the class did last week works.

James, being totally on the ball, put together a page covering software that makes the web work. It’s nicely organized and consistent throughout. The way my browser displays it, the text runs right up to the edge of my monitor. As someone who used to work with typography, that bothers me. So I went and looked for a way to give it a margin. W3Schools is a great resource, but it wasn’t telling me exactly what I needed to know. I figured we would have to add <head></head> tags and put something between them. There’s also a <div> tag that could be used to define the column width, but I couldn’t get a left margin set. But the page from Stack Overflow gave me an idea. They used a tiny bit of CSS styling to give a margin to paragraph elements. What if instead of specifying the margin for p, we did it for body? So following the example they gave, I saved James’ page to my desktop, opened it in Notepad, and put this between the <html> and <body> tags:

<head>
<title>Software</title>
  <style type="text/css">
    body { margin-left:5em; margin-right:5em;}
  </style>
</head>

Then I opened the document with Firefox and it had a good margin on both sides, like this:
screenshotThat’s basically how I learned most of what I know about coding: copying and pasting bits from Q&As and tutorials and seeing what it does. Looking at source code helps too sometimes, although these days there’s usually a lot more than just HTML.

HTML is beautiful

We’ve been moving right along in the Internet Course, and it’s starting to find a nice rhythm. Last week the panelists led a lively, engaged discussion on the topic of consumption and creation on the internet. This week we’re talking about intellectual property and fair use, and that discussion has been excellent thus far. Looking forward to more from the panelists tomorrow.

In the mean time, the class has been working on is creating a HTML page. I didn’t teach them any HTML, they were instructed to go out and find a tutorial and then compose their own HTML page in a subdomain. I figured we’d spent a lot of time last week talking about creation and consumption on the internet, so this would be an opportunity for them to actually do it. I wanted them to create a page in html from scratch with the idea of demonstrating how a few tags and the hyperlink remain the foundation of what connects the various, distributed resources on the web. I also wanted it to be something other than an application. Over the last eight or nine years I’ve been application heacy, and for good reason, but stripping away is good too. A return, if only temporary, to the basic building blocks of the web: text, embedded media, and hyperlinks.

Looking through these projects I realized I’m going through a bit of nostalgia for mid-90s web design. I’m totally loving the HTML aesthetic right now. Below are a few examples that were volunteered during class yesterday, and I’m totally grooving on them.

Amber May shared the following choose your adventure site she created for another Computer Science course she took last year. I’m gonna steal the basic code for this because I now want to create a choose your adventure site about this course :) If you have a moment click through and go on a fantastic adventure.

Screen Shot 2014-02-26 at 3.09.53 PM

Alison Litvin brought back the full beauty of the HTML page with a pink background, purple text, and an animated, 8-bit GIF of a kitten. I’m in love.
Screen Shot 2014-02-26 at 3.41.37 PM

I included the animated, 8-bit GIF of the kitten separately because it’s that good.

tumblr_mrzhsydp3X1sau89xo1_500

I love how Lauren Brumfield updated the HTML aesthetic with a selfie—this is the New Aesthetic people!
Screen Shot 2014-02-26 at 4.09.40 PM

Jack Hylan goes retro contemporary with animated GIFs of The Lego Movie.
Screen Shot 2014-02-26 at 4.12.03 PM

Three out of the four students above used Code Academy for learning HTML (thanks to Jack Hylan sharing it on his blog early on), and they seemed fairly happy with the process. What’s intersting to me is ten or fifteen years ago we would have had entire sections of a course (or a workshop) dedicated to showing students (or faculty) how to compose HTML. Now it seems relatively normal to offload this process to a web-based learning resource like Code Academy. It’s a simple, yet important, acknowledgement that the resources the above students used to learn HTML were not those I was pointing to directly or writing as a custom tutorial, but resources they were sharing with each other as a matter of course. That’s pretty cool, and it expands the course that much more rather than shutting it down or making it obselete.

My html

I made a html subdomain for thejota.com

html.thejota.com

below is the html code I made

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Subdomian of TheJota.com</h1></div>

<p><b>Hi, My name is Jack Eaton and I have no idea what im doing :)</b></p>

<a href="http://www.thejota.com/">Go to my website right meow</a> 

<p style="color:rgb(215,30,255)">
Steps I used to make this html subdomain for Thejota.com
</p>

<p style="background-color:rgb(255,255,0)">
1. Read Jim's e-mail in its entirety and very carefully.<br>
2. Go to the link he provided us to get started. <a href="http://www.w3schools.com/">W3Schools</a><br>
3. Open up TextEdit on my Macbook<br>
4. Study W3Schools helpful advice<br>
5. Complain to your roommate that you're not a Computer science Major and you still have to do this.<br>
6. Eat some fresh baked cookies that the hot girl 3 doors down made you with an ice cold glass of milk.<br>
7. Do some motivational push ups.<br>
8. Play around with the code on W3Schools and have fun with it.
</p>

</body>
</html>

My HTML – Writing Code

Pretty cool writing in CODE !!!! I haven’t wote much with code but I think when I say it it makes it sound that much cooler. But making the html subdomain, was very easy. I made the subdomain just like I made my “The Internet” subdomain. It did get a little tricky when I had to make it a html, but Groom helped me with that, and now I’m writing in CODE!!!

HTML

an HTML adventure

oh my goodness was that an experience!!I created my html page which can be viewed here. This was my first time ever coding with HTML and learned everything from codecademy so hooray for them!! I basically just went through their tutorials and filled in my own stuff, testing it out with their editor to see if it looked alright. I tried putting in an image as a background but ran into trouble where it just wasn’t showing up? Decided to just stick with a single color (pink is obviously the best)

coding is not my forte and maybe we should leave it at that. It was definitely a cool experience though and I enjoyed learning about the coding basics!!

Lexs HTML Page of Peace

mz

 

Todays a big bad in Lex’s, were pleased to announce the latest extension of our network html.lexinho.com, sadly you guys are just going to have to copy and paste the link because blog algorithms cant detect when an android device highlighting. But the site is currently under construction, I found w3schools to be incredibly helpful at refreshing my mind, im no stranger to coding I just like it. Overall I didnt find any hardships regarding the building process, html 5 has made coding a lot easier. Coding used to be a dark art of alchemy, but now its something for the masses. What I did was, went to w3schools , found the strings that I needed, hit the try me button, modified them in there html practice doc  and made sure they work, and finally I put them all together in the cpanel html editor. DONE

html