- Understand HTML structure
- Learn about markup
- Setup a development environment and write some code
January 30, 2020
Materials/Structure - HTML
Styling, Decoration, Appearance - CSS
Outside requests - backend
A content management systems (CMS) is software that allows a user to manage and edit a website without necessarily knowing how to code. Popular CMS's include Wordpress, Drupal, and Joomla.
In other words, if you're a web developer, you'll probably run into one at some point.
In this course, we will focus on HTML and CSS only, but it's important to understand how all of the components work together.
Below is a basic example of a webpage. Don't worry too much about what it means - we'll dive into it soon. The HTML code is in the reddish color and the text is in white.
<!doctype html> <html lang="en"> <head> <title>This is the title of the site!</title> </head> <body> <h1>This is the Main Heading</h1> <p>This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.<p> <h2>This is a Sub-Heading</h2> <p>Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).</p> <h2>Another Sub-Heading</h2> <p>Here you can see another sub-heading.</p> </body> </html>
HTML is composed of elements. The elements create the components of the page (the structure) and define the contents.
Most elements have a starting and ending tag like the
<p> element above. There are a few that don't, which we refer to as empty elements. For example,
<br/>. Empty elements can also be written like
<img src="image.jpg" width="500" height="600" />
Elements can also have attributes with values.
<!-- Elements can be nested: --> <p>I am a <em>paragraph!</em></p>
Elements can be nested. When they are, the nested element is said to be the child of the parent element. In the example below, the
em element is a child of the
p. There can be many levels of nested elements (grandchildren, siblings, etc). This relationship between elements is known as the hierarchy.
<html> element indicates that anything between it and the closing tag is HTML code. It contains everything except the doctype.
<!doctype html> <html> everything in here is html! </html>
The HTML Head is the contents of the
<head> element. It contains information (metadata) about the page and unlike the HTML body, does not display when the page is rendered in a browser.
Note - don't use any element in your page unless you know what it does and can explain it.
<!-- Example HTML Head --> <head> <meta charset="utf-8" /> <title>My Website</title> <meta name="description" content="A cool website" /> <meta name="author" content="Emily Kauffman" /> <meta name="keywords" content="emily, kauffman, web design, web development, cis 275, washjeff" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./styles.css" /> </head>
<title>- displays in the browser bar; auto-fills when bookmarking a page
link- links to external scripts and CSS files
Everything in this element will display in the browser.
<html> <body> All the displayed content goes here! </body> </html>
<h1>This is a main heading</h1> <h2>This is a level two heading</h2> <h3>This is a level three heading</h3> ... <h6>This is a level six heading</h6>
<p>I am a paragraph!</p>
CSS was created to help us separate our content from our styling. Don't use
<i>, even though they're in the book. Instead, use
The browser displays two or more spaces, as well as line breaks, as one space.
<p>I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element.</p>
I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element. I am a sentence in a paragraph element.
<ol> <li>One!</li> <li>Two!</li> <li>Three!</li> </ol>
<ul> <li>One!</li> <li>Two!</li> <li>Three!</li> </ul>
An HTML document is just a text document and you save it in the same way you'd save a Notepad text file.
<!-- Assuming current URL is emilykauffman.com/teaching/cis-275 --> <html> <body> <a href="https://emilykauffman.com/teaching/cis-275/syllabus"> <a href="/syllabus"> </body> </html>
Why indent your code?
<div><p>this is a test</p><div>hi</div></div>
<div> <p>this is a test</p> <div>hi</div> </div>
<div> <p>this is a test</p> <div>hi</div> </div>
Create a Workspace
Build out HEAD content
Markup the body
Make up (or find online) a simple food recipe. We're going to markup the recipe in HTML. Don't spend too much time on this step!
h1) where the text is the name of the recipe.
Try to do this without looking, but here's an example if you're stuck: Cookie Recipe
Due: Feb 4
By this point, we've covered the basic HTML structure, some new elements, naming conventions, and workspace setup. This exercise will be an indicator for whether you've learned the content.
Read this article on why website accessibility is important. Reflect on the reading and write a short response, about 250 words. Next, markup the response using HTML so that it renders correctly in the browser. You'll only need to generate one HTML file for this. In the browser, the line breaks, emphasis, and any other typographic formatting should be present.
All markup should be in accordance with the HTML5 specification.
Feel free to validate it using this tool: http://validator.w3.org/#validatebyinput