syllabus
|
resources
|
IRL Chicago
|
Web Editor



THE WORLD WIDE WEB && “HYPERMEDIA”








directory structure


all websites start with a folder.
remember that your folder / file names should always be one word and lower case

 
this folder ( aka the root ) should contain all of the files ( html, css, jpg, gif, mp3, etc. ) that make up your website


the first page of your website ( in your root directory ) needs a very specific name: index.html, the rest of your html files can be called whatever you want
when someone visits coolband.com the broswer displays the index.html page by default. if your page has no index.html then it will show the viewer the list of files in your folder or throw an error.
its good practice to create sub-directories ( folders ) to hold specific media or other files. these can be called whatever you want ( keeping in mind, one word and lower case )




file paths


folder/folder/file.html


a path is the unique location of a particular file. a path points to a specific file by following its "directory tree" ( the folder within a folder within a folder etc. )
there are two kinds of paths, the first is an absolute path, which lists the exact location of a file, starting from the root directory on that specific computer ( phone, laptop, server, etc. ) and ending with that file.
the second way to write a path is known as a relative path, which lists the location of a particular file "relative" to ( starting from ) the file we are writing the path in.


Absolute Paths


here we have an image file...





file:///Users/nbriz/Desktop/coolpage/images/rainbow.jpg


on the left we have your laptop, here the absolute path of your file is as noted below it. but once you upload your file onto a server ( right image ) it now has a new absolute path.


http://www.coolpage.com/images/rainbow.jpg



Relative Paths


when your linking to pages or files in your own website its better to use relative paths becaue the absolute path will change when you upload your website ( folder ) from you computer onto your server.
if all the files on your site where in the same folder than all you need to create a relative path is the file name: rainbow.jpg
if your website has different sub folders, than your relative path needs to tell the browser how to get from the page your are currently on, and over to the file being referenced. example: images/rianbow.jpg


say for example we're on the index.html page above, to go from that "index.html" page to the "logo.jpg" file we would write a relative path like this: images/logo.jpg

say for example we're in the nick.html page, we now need to go up and out of the "profiles" folder before we can enter into the "images" folder. to do this we use ../ so a path from "nick.html" to "logo.jpg" would look like this: ../images/logo.jpg





Intro to HTMl




rather than simply writing plain text into our html page ( as we have been ), we use html elements in order to give our html page structure and organize our content
an element usually consists of a pair of tags, an opening tag has a < followed by characters that specify which tag it is, and then a >. the closing tag is the same except with / before the characters.
between the opening <tag> and the closing </tag> is where we place our content.



a list of all the html elements can be found here



inside the opening tag ( between the <tag and the > ) you can include attributes. attributes are used to add extra information about that particular element.
the first part of an attribute is the attribute name. it indicates what kind of extra information your going to add to that element. these names are specific, always lower case and followed by a =
the second part of an attribute is the attribute value, this is the info or setting for this attribute, different elements can have different values, but they should always follow the = and be surrounded in " "



a list of all the attributes ( and their corresponding elements ) can be found here



when we're ready to create a new html page there are a few basic tags and structure that we should always start with ( this can be considered a basic html template )





first, the <!DOCTYPE html> , this is a declaration that tells your browser that the code that follows conforms to the standards of a particular version of HTML, these used to be long and complicated... but its short and sweet now

after that we've got our first official element, <html> the opening tag indicates that everything inbetween it and the closing </html> is going to be html code

inside of the html element there are two major elements, the <head> ... </head> which contains information about the page, and the <body> ... </body> which contains everything that will show up inside the browser window.

the only thing we absolutely need inside of our head element is a <title> Page Title </title> . you won't see this inside your browser window ( because its not in the body ) but will show up in lots of other places for example on your browser tab, and also in google search results.

inside the body you include all of the elements that will create the structure of your content, for example you can create headers with <h1> ... </h1> and smaller headers with <h2> ... </h2> and you can create paragraph containers with <p> ... </p>




relative paths in links && images





note that the <img> element doesn't have a closing tag. not all html elements come in pairs, some ( like the image element ) stand alone.





.




HOMEWORK



create a hypertext poem. This should be a folder, within which are all of your files ( html pages, image files, etc. ). Then use fetch to upload the entire folder onto your server. Check to make sure the url works ( http://www.artic.edu/~username/foldername ). then submit that url below. refresh the page and make sure your link appears below and is working.



submit your URL here:


if you have any trouble submitting send me an email: nbriz@saic.edu