Styling with HTML
Styling with HTML
LEARNING GOAL: The Basics of HTML
Students will be able to design multiple web pages with HTML through the use of simple Text Editors.
Once you understand the basics of HTML (tags, elements, and attributes), a lot of it can seem pretty easy and boring. That doesn’t mean we shouldn’t learn it, but it does mean we have to learn some other things at the same time. That’s why you’re going to learn a little bit about styling with HTML.
There are three common ways of styling a webpage. You can go into an opening tag and place a style attribute. This is called inline stying. You can also go into the <head> of an HTML document and create a <style> element. This is called internal styling. There is even a way to style multiple pages by using a single style sheet called .CSS, but that’s for the next learning goal. As for this lesson, we’re just going to dabble in styling.
During this lesson, you will create a logo, consider another quote from TimBL, review some basic ideas from Lesson 2.1, and then dig deeper into styling a page with HTML. Everything from today forward will be coding, coding, and more coding. It will be your responsibility to keep up and not let yourself fall too far behind.
DAILY SCHEDULE (85 MINUTES):
PART 1: GETTING STARTED (10-15 Minutes) – Logo Designs
Today, you will be building a home page with images and links. But since it will be YOUR home page, why not have a logo with your name in it? Follow the directions below.
Step #1 – During the last class, you created an “images” folder inside of your “pages” folder. Go to that folder and create a new subfolder called “logos” (just like the “abs” subfolder you created in the last lesson).
Step #2 – Open CoolText and create a logo with your name in it. You can pick any font or style you wish.
Step #3 – Save your logo to your “logos” subfolder (but change the file name to something simple like “logo1.png”), then go back and create another one.
After about 10 minutes, or after all students have successfully created a logo, we will move on together.
PART 2: CLASS DISCUSSION (45 Minutes) – Internal and Inline Styling
Topic #1 – Guideline Review
1. The Restroom Guideline
2. Food, Drink, Gum
3. Chair Handles
4. Phone Garage
5. Mutual Respect
Topic #2 – A Message from TimBL
“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)
What does he mean? Using 30-30-60, consider how this quote applies to what we’re learning.
Topic #3 – HTML Review Questions (Lesson 2.1)
1. What is the advantage of learning to code?
2. HTML stands for what?
3. Syntax is basically just _______________ for coding.
4. What are the three main parts of HTML?
5. What are the two main elements of an HTML document?
Topic #4 – Assorted HTML Elements
So far, you’ve had a chance to see some really basic elements in HTML, but here are a few more assorted elements to learn, including some of the ones you already know:
<a></a> – Creates a hyperlink
<h1></h1> through <h6></h6> – Large, medium, and small headings
<em></em> – Puts any text in italics (Short Preview of Deprecated Tags)
<ol></ol>, <ul></ul>, <li></li> – Creates an ordered or an unordered list
<p></p> – A paragraph that begins on a new line
<strong></strong> – Puts any text in bold
Topic #5 – Self Closing HTML Tags
Most HTML elements need an opening and a closing. Others are self-closing. In other words, a self-closing tag means all you have to do is write a single tag and it will do what it was created to do. The three self-closing tags below are the most common.
<br> – Line Break
<hr> – Horizontal Rule Break
<img src=”URL” /> – Places an Image on a Page
Topic #6 – Styling a Page
At this point, when you see a bunch of tags and elements and attributes, you should know that it’s just a skeleton holding all the other stuff inside. There’s nothing fancy about HTML other than some angle brackets and some letters and some words. But we can’t fully enjoy the process of learning HTML unless we go ahead and learn a little about style at the same time. Just remember that style is NOT HTML. Style just uses HTML (the skeleton) to make a page look a certain way.
Topic #7 – Internal & Inline Styling
Almost all of the styling that we’ve done in class up to this point has been called internal styling. This is when you go up to the <head> of your document and create a new <style> element, then put all of your style commands. It’s an easy way to organize style and keep it separate from the rest of the page. Here is an example of Internal Styling.
However, there is a way to override the internal styling and tell each individual element exactly how you want them to look. This is called Inline Styling because it means you go INTO the opening tag of an element and use a style attribute. Here is an example of Inline Stying.
Do you see the difference? Are you ready to get started?
Topic #8 – Graded Coding Begins Now
Between Lesson 2.2 and Lesson 2.5, you are responsible for getting 4 out of 6 source codes completed for an A (3/6 = B, 2/6 = C, 1/6 = D, 0/6 = F). However, if you finish any of them early, just keep going because the more pages you build, the more prepared you’ll be for the Learning Goal #2 Project. Source Codes will be due by the end of Lesson 2.6.
If you complete a code, please raise your hand to check with the teacher. But if your page doesn’t match up with the example, then you haven’t really completed the code. That means you’ll need to go back and solve your errors. Be patient because this is where the class starts getting busy. Don’t waste any time because the codes below are just the beginning.
You have about 25 minutes to get started.
SOURCE CODE :: HTML SAVE TITLE :: FOLDER :: LOOKS LIKE
PART 3: DAILY DESIGN (20 Minutes) – Designing a Home Page
The goal of this Daily Design is to let you experiment with building your first real home page by using a pre-written template and just changing a few things around. You’ll even have a chance to add your logo to a page. Here is an example of the kind of page you will be creating. Follow the simple directions below to get started.
Step #1 – Open a new Notepad Document and save it as “index.html” in your Web Design folder. But for this one, DO NOT put it in your pages folder. Keep it at the top of your folders (also known as the “root directory”) so that it looks something like this.
Step #2 – In your Notepad Document, copy/paste this code, then save it and open it with a browser to see what it looks like before you make any changes.
Step #3 – Now try to add a background, a logo, some colors, and another image. Spend this time trying to make this look like a page that could really be your own personal home page.