OVERVIEW:
Learning HTML can actually be super boring all by itself. That’s because HTML is just the skeleton of a web page. It creates a structure that only works in black and white. Of course, you need that skeleton to get started, but if we spent the next few weeks only looking at the skeleton, we’d all feel like the lessons were a waste of time. So instead of coding HTML all by itself, you’re going to learn two ways to style various elements on a web page.
There are three common methods for styling a webpage. First, you can go into an opening tag and place a style attribute. This is called inline stying. But second, you can also create a <style> element where you will keep all of your various styling instructions for the entire web page. This is called internal styling. And third, there is a way to style multiple pages by using a single style sheet called .CSS, but that’s for the next learning goal. For now, we’re just going to dabble in direct styling through the first two methods known as inline and internal styling.
LEARNING GOAL #2: The Basics of HTML
Students will be able to design multiple web pages with HTML through the use of simple Text Editors.
PART 1: Daily Design
Read More
WARNING
Today is the last day before your first major coding assignment. And even the best students often struggle to finish their codes. So as we go into the following Daily Design, you need to make sure that you’re comfortable with how to set up files with Notepad, how to put them in their correct folders, and how to get through the basics of coding simple pages. Because the pages you do after today will no longer be simple. And they will take you a lot of time.
Challenge #1: Setting Up a New Document (Individual)
During the last lesson, you started coding a few lines of HTML. You tried to get comfortable with a few of those basic elements. And now that you’ve created a couple of HTML files, let’s create another one. Open a new document with Notepad and save it as “2-3_gradient.html” in your “pgs” subfolder. Once you have this saved, type the words “I LOVE FSU” and go on to Challenge #2.
Challenge #2: Setting Up a New Document (Teams)
Find the members of your team who have not yet figured out how to save their Notepad documents and help them out. You can even show them how to change their settings (Word Wrap, Size, Font). But once ALL the members of your team have correctly saved this new Notepad document, ALL members of your team must raise their hands to earn permission to begin Challenge #3.
Challenge #3: Setting Up a New Document (Class)
If the teacher has given your team permission, begin moving around to other teams and helping other teams to finish setting up their Notepad documents. We will not begin coding until ALL students are ready.
Challenge #4: Following the Teacher
During this design, you will be creating a simple page with a little bit of styling and a gradient background to make it look more interesting. But in order to do this successfully, you will need to do three things: keep up with the teacher, assist those around you who fall behind, and reach out to your teammates if you are the one who falls behind.
PART 2: DAILY DISCUSSION
Read More
Topic #1 – A Message from Tim
“What matters is the connections.
It isn’t the letters, it’s the way they’re strung together into words.
It isn’t the words, it’s the way they’re strung together into phrases.
It isn’t the phrases, it’s the way they’re strung together into a document.”
(Tim Berners-Lee, Weaving the Web)
Topic #2 – Quick Review
Below is a list of questions that could show up on your first web design exam. The teacher will give you a few moments to look over the questions and prepare yourself for a quick review. Everyone should be ready to be called.
- What does HTML stand for and what does it do for a web page?
- The Internet is a connection of _____________________ around the world.
- Identify six important locations on a map that were discussed in class relating to World War II
(Soviet Union/Russia, United States, Germany, Japan, Great Britain, Pearl Harbor)
- ____________________ is the word used to describe “grammar” for coding.
- What are the three main parts of HTML?
- Explain what it meant for Japan to “Wake a Sleeping Giant” during World War II.
Topic #3 – Review of the Most Basic HTML Elements
Below is a list of the most basic HTML Elements that you should start to become very familiar. Each one comes with a link for discussion and practice, but each one of these were discussed in the practice code from lesson 2.2.
- < h1, h2, h3, h4, h5, or h6 >
Creates Large, Medium, and Small Headings
- < p >
Creates a New Paragraph
- < ol > < < /ol >, < ul > < /ul >, < li > < /li >
Creates an Ordered List, an Unordered List, and any Number of List Items Inside
Topic #4 – Self-Closing Tags
As you know by now, almost every tag in HTML has an opening and a closing. The opening is where it begins and the closing is where it ends. Below are a few of the exceptions in HTML. Tags that do NOT require a closing because they are SELF-closing.
- <br>
Line Break
- <hr>
Horizontal Rule Break
- <img src=”URL” />
Places an Image on a Page (More on this between Lesson 2.4 and 2.5)
Topic #5 – Leaving Comments in HTML
When you work inside of a code, regardless of the language that code is written in, coders like to leave themselves messages. Especially when a code gets really big or when a certain part of the code might seem confusing. But a comment means that whatever is written will not change the way the code works. The only people who will ever see a comment are people who can see the source code.
Here is a link that shows you how to leave a comment in HTML.
Topic #6 – Direct Styling (Review from Daily Design)
There are three common methods for styling a webpage and making it look nice. First, you can go into an opening tag and place a style attribute. This is called inline stying. But second, you can also create a <style> element where you will keep all of your various styling instructions for the entire web page. This is called internal styling. And lastly, there is actually a way to style multiple pages by using a single style sheet called .CSS, but we won’t get into that for a while. Right now, the only kinds of styling you have done with the teacher are known as inline and internal styling. Make sure you know the difference.