Media and Web Development
ICOM-101-01 / MTEC-617-01
Week 5 ● Leaving Glitch!
Offline vs Online development
Installing a text editor
doctype, html, head, and body tags
File Structure, links, and assets
devtools
TEXT EDITORS
Once we are out of Glitch, we need a text editing program to write our code.This program doesn't have to be anything fancy, anything that can write a html file will do, but things are much easier with a programming specific editor.
VISUAL STUDIO CODE
Please download and install VS CODE.
If you are more comfortable with another text editor feel free to use that. Some good options are Sublime Text and Atom.
If you are more comfortable with another text editor feel free to use that. Some good options are Sublime Text and Atom.
STUFF GLITCH GAVE US FOR FREE...
DOCTYPE
Doctype is not a HTML tag. The doctype declaration is a special instruction to the browser specifying the version of HTML to use when rendering the page.
The doctype tag should never change and should always be the first line of your html document
Doctype is not a HTML tag. The doctype declaration is a special instruction to the browser specifying the version of HTML to use when rendering the page.
The doctype tag should never change and should always be the first line of your html document
STUFF GLITCH GAVE US FOR FREE...
HTML
The html element represents the root of element of your page. Every other element in your code is a child of the html element.
The lang specifies the langauge this documentis written in ( en meaning english ) and the dir attribute specifies the text direction ( ltr stands ffor left to right
The html element represents the root of element of your page. Every other element in your code is a child of the html element.
The lang specifies the langauge this documentis written in ( en meaning english ) and the dir attribute specifies the text direction ( ltr stands ffor left to right
STUFF GLITCH GAVE US FOR FREE...
HEAD
The head tag all the non-visible content on your webpage. This is where we can load stylesheets, set the tab title and icon, and supply any metadata about our site ( more on that later ).
The head tag all the non-visible content on your webpage. This is where we can load stylesheets, set the tab title and icon, and supply any metadata about our site ( more on that later ).
STUFF GLITCH GAVE US FOR FREE...
BODY
The body tag is where all of our visible content goes. Everything we have written in the HTML pane on codepen has been inserted into the body tag.
The body tag is where all of our visible content goes. Everything we have written in the HTML pane on codepen has been inserted into the body tag.
STUFF GLITCH GAVE US FOR FREE...
EVERYTHING IN CONTEXT
FILE STRUCTURE, LINKS, AND ASSETS.
LINK
We can link a stylesheet ( css file ) with a html document with the link tag. The link tag goes in the head of the html document
The link tag has 2 required attributes. href which specifies the path of the file to load, and rel which specifies the relationship between the loading document and the loaded document. In our case rel will always equal "stylesheet"
LOADING LOCAL IMAGES
We can load local images exactly like we loaded images in glitch. Only now, the src attribute of our img tag can point to files stored relative to the html file.
Assignment #5
Migrate one of the last two assignments ( something with both HTML and CSS ) out of
glitch.
● Create an index.html file and a style.css file
● Link your style.css file to the index.html with a style tag inside the head element of your html
● Submit your work as a .zip file containing both your html and css files