Session Date: Wednesday Sep 13, 2017
Read the tutorial for setting up a a simple HTML website on the Carolina CouldApps platform. However, do not plan on uploading all of your files to the server through the drag and drop interface. You can only do that one file at a time, and that is not going to work! We will use the git workflow that we learned when we uploaded our screen shots.
Atom is an open source cross platform text editor that works on Macs and Windows. That is my tool of choice when I am developing. You can get Atom here.
Dreamweaver is also a very good text editor for working with git files: it has git built into the interface. You should consider getting access to the Adobe Creative Suite so you can try this out: https://software.sites.unc.edu/software/adobe-creative-cloud/ I will demo this early on in the sessions, so go ahead and try to get it as soon as you can if you want to use Dreamweaver for your text editor.
If you have a Windows laptop, you might want to download Notepad ++. It is both useful and free.
Read over the class notes and do your best to memorize the bare minimum code for an HTML page.
The fundamental structure of html is the two-part model of <head> and <body> . Every valid HTML page must include a head and a body.
The head and body can be thought of as "markup" content containers:
The browser display ignores white space and comments, so the block below will render the same as the block above:
<head> <!-- Head CONTENT goes here.--> </head> <body> <!-- Body CONTENT goes here.--> </body>
Note the definite article "the". There are various html tags all of which can be an html tag. But we are specifically talking about the master every-thing-goes-in-here primary HTML tag.
The head and body tag must be wrapped in the primary html tag container:
<html> <head></head> <body></body> </html>
A Doctype Declaration must be placed at the very beginning. It is one of those exceptions that does not require an end tag. The entire tag is contained in two brackets.
<!DOCTYPE html> <html> <head></head> <body></body> </html>
The Doctype is necessary for legacy reasons and because there are other types of documents, XML for example, which we will talk about in a later class. The curent html doctype is HTML5. The HTML5 doctype is implied. You do not need to put the 5 in the doctype declaration.
There are just a few more requirements to make this a valid web page. We need to put a title in the head and we should put at least an h1 tag and an p tag in the body.
<!DOCTYPE html> <html> <head> <title>Demo Web Page</title> </head> <body> <h1>Demo Web Page</h1> <p> This is a demo web page. It represents the bare minimum layout for a simple web page. </p> </body> </html>
last page update: Monday Sep 11, 2017