A text editor is software to write and modify plain text files. They are used to write code. As opposed to word processing software they do not normally allow formatting.
An IDE is an integrated development environment, software that provides a number of tools in combination with a text editor and usually a compiler. Processing is an example of a IDE. There are a number of free and open source IDEs available. For this course, you can use whatever text editor or IDE you would like. Some editors and IDEs have good standard defaults (with batteries) for particular languages or use cases. There are dozens (hundreds?) of options. Here’s what I’ll be teaching with, but you are welcome to use whatever you prefer:
There are so many html tags, but most of the time you will be using probably only a dozen or two at most.
html
head
title
body
h1
h2
h3
p
img
a
brOur website’s html page will always start with
<!DOCTYPE html> at the top. It tells a web browser to
interpret everything afterwards as HTML.
Indenting is optional. A web browser ignores spacing when it builds the webpage. But it helps us read and understand what we’re doing. We usually use indentation to indicate how elements are nested inside one another.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Add some text. Make sure you are inside the body section. Surround your text in paragraph tags. To make headers you can use h1, h2 (and getting smaller) down to h6, though I never use h4 and below.
Try adding more paragraphs. Make a second webpage. Add a link between
the two with anchor <a> tags like this:
Visit <a href='page2.html'>Page 2</a>.The earliest websites had no style. They were just text. Some people think we should still make websites this way! (See many articles bemoaning this).
There is a search engine just to find these kinds of websites. Check out: Wiby. Hint: Click surprise me… to see a random example.
Textfiles is a modern example of this kind of site.
Hundred Rabbits is a bit more stylish but mostly simple this way
Very little CSS style at all on Text-only NPR
Tim Berners-Lee is the inventor of the modern web.
Olia Lialina’s Top 10 Web Design Styles of 1993 ### A starter website with just HTML
<!DOCTYPE html>
<html>
<head>
<title>Our new website</title>
</head>
<body>
<h1>Welcome!</h1>
<p>Hi and welcome to my website!</p>
<h2>Section 2!</h2>
<p>Great info here.</p>
</body>
</html>We can images. Unlike most of our other tags, they don’t have a closing tag.
<img src="my-photo.jpg">Now we need to talk about CSS.
CSS stands for Cascading Style Sheet.
CSS is how we style our content. We can change colors, fonts, sizes of things, specify placement, etc.
Syntax:
selector {
attribute: value;
}Examples:
body {
width: 500px;
background-color: grey;
font-size: 12px;
}
p {
font-size: 14px;
color: blue;
}
You can specify colors with a web color name, or RGB values, or, most commonly, HTML color.
There is a very 90s-style website HTML Color Codes and hundreds of color pickers if you do a simple web search for CSS color picker or HTML color picker.
<i>This text will be italicized</i>
<em>This is another way to do italicization </em>My understanding is <em> and
<strong> are the more ‘proper’ way to write “semantic”
italicized and bolded html, which helps screen readers, accessibility
tools and cross-platform applications.
<b>Bolded text</b>
<strong>Will also be bold, and is the preferred way</strong>It’s considered best practices to place your CSS on a separate page
and link to it from your <head> section.
Put your css in a file that ends in .css, for example
style.css.
You link to it like this:
<head>
<title>My title</title>
<link rel="stylesheet" href="style.css">
</head>The style sheet linked above is located inside the same folder as our HTML file. If it was in a sub-folder, we’d have to specify it.
For example If we had a folder named css and the style.css was inside it, we would call it like this:
<link rel="stylesheet" href="css/style.css">What happens if our HTML is inside a sub-folder, and the CSS is
outside of the folder? We can access the parent directory by using
.. to look in the folder that encloses our current one.
Example: I have a folder WEBSITE holding style.css and another folder HOME. Inside HOME is index.html. Inside the head of my index.html I want to call the stylesheet inside home, like this:
<link rel="stylesheet" href="../style.css">And that’s how it’s done!
A <div> means a division, but we always just say
“div”. It’s a chunk of a website. It’s a section that we want to assign
some special CSS to. We surround that section in
<div> tags and give it a class name, like this:
<div class="bio">
<h1>All About me</h1>
<img src="headshot.jpg">
<p>I'm pretty great!</p>
</div>Now in my CSS stylesheet I can write CSS rules just for that div section. I decided to assign that section the class “bio”. You can come up with almost any name you’d like. On the stylesheet, you place a period before the class name.
.bio {
background-color: grey;
}And now everything in my bio section will have that grey background.
There is another special thing we can add, an id aka
I.D.
It’s like a class, but you can only use it on one section on your page. A class you can use over and over again.
To specify an ID on your stylesheet, you place a # before the name.
Example:
<div id="container">
<img src="great-photo.jpg">
<p>What a view!</p>
</div>stylesheet:
#container {
width: 50%;
}Don’t do this all at once. It could/should take a few hours. And you want to take time to practice and try things out.
The goal of this project is to get you quickly and fearlessly building for the web.
Create a single page site on one of the following themes:
Do you have another idea you’d rather make? Then do that.
You will be evaluated by:
Example sites that rely on good, simple, clear HTML + CSS sites are:
Make a single-page website that will serve as a landing page for the projects you create this semester. The site should be clear and easy to navigate. The code must work properly. The site should have your name or a pseudonym and a clear list of your webpages that you make for class.
The webpages you make for this class may be hosted on a single site, or you could have works at multiple locations and across many sites. This does not matter as long as your class website links to all of them.
Start by reading Olia Lialina’s Under Construction. Create an indicator on your class website that more content will be coming soon.
Your work will be evaluated based on the following. Those with previous HTML and CSS experience will be judged based on their experience and I expect more significant work!