That's no ordinary web site!
But if you're trying to create a website that transports your users straight to the Dark Ages, what else would you expect?
Just like Gothic architecture arose from ancient cathedral construction, Gothic Web Design is a unique style that transports your users straight to the Medieval World Wide Web!
Web design is the art and discipline of composing, coding, and configuring websites. Each website is a unique combination of content, visuals, navigation, and functionality--a distinctive online presence that adds value to a business or organization.
Glitch is the friendly community where everyone codes together We will be writing code on Glitch. You do not need to make an account to get started! However, your project will expire after 5 days without an account.
1. Go to the Glitch website at:
https://glitch.com/
2. In the navigation bar, click on `Get Started`
3. In the App Templates menu, click on `hello-webpage`
This class requires ZERO prior experience. I will outline everything we do in this document. That way, you will have a reference to use during and after class!
I will be live-coding! If you miss something that I type on my screen, don't worry. It's all in this document!
It's okay if your code is "broken!"
Sometimes we make code and it doesn't do what we expect. That's called a "bug."
I will be available to help "debug" your code and to do so you will need to share your screen! We have limited time together and I will do my best to attend to the needs of the group.
This class is interactive so let's get to know each other! Participate in the Zoom chat:
-
Short Intro: Name, Pronouns, Location
-
What is code?
-
Have you wrote any code before?
-
Do you have a website?
My notes here are just meant as a starting point. My recommended resource for learning more about HTML and CSS is w3schools.com. They have an extensive reference, and we will be using it hand-in-hand with today's activities.
When you visit a page on the internet, you are actually viewing an HTML Document!
HTML - Hyper Text Markup Languages
HTML looks like a set of "tags" that wrap around content in a document.
<header>
<h1>Welcome to MySpace!</h1>
<p>A place for friends.</p>
</header>Think about anything you have ever seen on the internet! It's all wrapped up in HTML!
IN GLITCH: Open the file index.html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h3>How To Make A Burger</h3>
<ol>
<li>Bottom Bun</li>
<li>Patty</li>
<li>Cheese (Optional)</li>
<li>Veggies</li>
<li>Condiments</li>
<li>Top Bun</li>
</ol>- Bottom Bun
- Patty
- Cheese (Optional)
- Veggies
- Condiments
- Top Bun
<h3>What To Do After Waking Up</h3>
<ul>
<li>Snooze the alarm</li>
<li>Check phone</li>
<li>Shower (Optional)</li>
<li>Brush hair</li>
<li>Brush teeth</li>
</ul>- Snooze the alarm
- Check phone
- Shower (Optional)
- Brush hair
- Brush teeth
<div>
<div>
<h1>Recommended Gravedigging Depths</h1>
<p>How deep should you dig that grave?</p>
</div>
<div>
<h2>Six Feet Deep</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div>
<h2>Seven Feet Deep</h2>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div>
<h2>Eight Feet Deep</h2>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</p>
</div>
<div>
<h2>Nine Feet Deep</h2>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</p>
</div>
</div><main>
<header>
<h1>Recommended Gravedigging Depths</h1>
<p>How deep should you dig that grave?</p>
</header>
<article>
<h2>Six Feet Deep</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
<article>
<h2>Seven Feet Deep</h2>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</article>
<article>
<h2>Eight Feet Deep</h2>
<p>
Duis cillum dolore eu fugiat nulla pariaturaute irure dolor in
reprehenderit in voluptate velit esse.
</p>
</article>
<article>
<h2>Nine Feet Deep</h2>
<p>
Duis aute irure dolore eu fugiat nulla dolor in reprehenderit in voluptate
velit esse cillum pariatur.
</p>
</article>
</main>CSS stands for Cascading Style Sheets. It is used to add visual styling to HTML content.
It is a set of rules usually written in a document separate from the HTML. In the <head> element of index.html, this line "links" the two documents together:
<!-- index.html -->
<link rel="stylesheet" href="/style.css" />You may have noticed that some HTML elements have "extra stuff" in them. We call those attributes, and they provide additional context for our code to work "under the hood".
<main id="page">
<header id="page-title">
<h1>Recommended Gravedigging Depths</h1>
<p>How deep should you dig that grave?</p>
</header>
<article class="article">
<h2 class="article-title">Six Feet Deep</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
<article class="article">
<h2 class="article-title">Seven Feet Deep</h2>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</article>
<article class="article">
<h2 class="article-title">Eight Feet Deep</h2>
<p>
Duis cillum dolore eu fugiat nulla pariaturaute irure dolor in
reprehenderit in voluptate velit esse.
</p>
</article>
<article class="article">
<h2 class="article-title">Nine Feet Deep</h2>
<p>
Duis aute irure dolore eu fugiat nulla dolor in reprehenderit in voluptate
velit esse cillum pariatur.
</p>
</article>
</main>Here is the syntax for writing CSS:
#page {
background-color: cyan;
width: 600px;
}
#page-title {
background-color: yellow;
}
h1 {
text-decoration: underline;
}
.article {
background-color: blue
width: 50%;
}There are a LOT of styling rules. I will encourage you to look them up ;)
CSS Diner - Play this really fun game to learn more about CSS Syntax
Create a link to another web page by using an a "anchor" tag.
I know a cool blog called <a href="http://http://romancingthegothic.wordpress.com/">Romancing the Gothic</a>
I know a cool blog called Romancing the Gothic
Images are created with a self-closing tag:
<img src="baby_bat.jpg" alt="A cute, baby bat. It's fuzzy!" />The src attribute is usually a link to the image's location on the internet.
The alt attribute is really important! Every image should have one - this text will display if your image fails to load and it is also useful for people who are browsing your web content with screen-reader technology. Adding alt attributes to your images is very important for accessibility!