Sections & HTML
Sections and 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.
When you look at a building, normally you see rooms. When you look at a classroom, you probably see desks and chairs lined up in rows or together in groups. When you look at your own body, you see various parts that serve different purposes. All of these things are familiar to us and they are known as sections.
In HTML5, information on a webpage can also be broken up into sections. And normally, a good website will have lots of different sections. For example, if you look at this web page, the drop down menus are in a different section than the lesson itself. And within the lesson, Part One is above Part Two. All of these sections can help to define the layout of a website or even a single web page. During this lesson, you will spend a good deal of time working with the teacher to get comfortable with section elements.
By now you should almost be an expert at writing simple web pages with HTML5. Now it’s time to learn how to write more complex web pages with HTML5.
DAILY SCHEDULE (85 MINUTES):
PART 1: CLASS DISCUSSION – Sections & HTML
Topic #1 – Another Message from TimBL
“My vision [for the Web] was a system in which sharing what you knew or thought should be as easy as learning what someone else knew.” (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 #2 – Upcoming Quarter Quiz
On Monday, March 5, Web Design I & II will be taking Quarter Quiz exams.
Topic #3 – Reviewing for the Quiz
On Monday, March 5, Quarter Quiz #2 will only include questions related to information you learned in Lessons 2.1-2.5. Almost all of the questions will relate to things that we have either reviewed at the beginning of each discussion or things we have talked about as a class quite a bit. The quiz will include the following:
Fill in the Blank (8 Questions + 1 Bonus Question)
Syntax Corrections (10 Errors to Fix/Correct)
Short Answer (2 Questions)
Essay (2 Questions)
A Few Review Questions
1. List the three most important parts of HTML and give an example of each.
2. List three self-closing tags and briefly explain what each one does.
3. Explain the difference between internal and inline styling.
4. List the three main image extensions.
If you have any other questions about the quiz, now would be a great time to ask.
Topic #4 – Building Sections
Have you ever gone to a hotel on the beach, walked out to the beach, and then looked back at your hotel? Did it look something like the image on the right? Each room is separated from the other rooms with a wall or a door. These rooms, including any kitchens, restaurants, or front desk areas are also called sections. And if buildings can be broken into sections, so can web pages.
Topic #5 – Slicing Web Pages Into Sections
Now that we’ve built several web pages, it should be pretty clear that most of them don’t actually look like real web pages. For example, your scinline.html or your sclinks.html might look really good, but let’s be honest, they don’t really seem like any web page you’ve ever gone to visit. Instead, your designs just look like random pages with random text and random images. Real web pages are broken into sections with text and images placed inside of those sections. Take the school website for example.
Topic #6 – HTML Sectional Elements
In HTML, the simplest elements are the ones we use to write information, create links, or add images (<p></p>, <h1></h1>, etc). But on real web pages, those simple elements would go inside of bigger section elements. In HTML5, the most common Sectional Elements look like these:
After our short discussion here, we will spend some time with each of these section elements building a web page that looks a lot more like a web page.
Topic #7 – HTML Span Tag
Imagine that you have a paragraph of information on your web page, but you want to make a single word or a single sentence look different from the rest. Imagine you want that single word to be red while the rest of the text is black. To do this, you would simply use the <span></span> tag. Let’s try it together.
Topic #8 – HTML Container Elements
Now imagine that you want to put a YouTube video on your web page. That video is a file being stored on another website (YouTube), so if you’re going to see that video on your page, it would have to be somehow contained. In HTML5, there are three container elements used for many of the same reasons, including videos, animations, and even adding someone else’s webpage onto your own page.
Topic #9 – Working with Screen Resolution
Screen resolution has to do with how many pixels a monitor can display horizontally (width) and vertically (height). A small monitor may have a resolution or 640 x 480, which means there are 640 pixels horizontally across the screen and 480 pixels vertically down the screen. Other common monitor resolutions are 800 x 600, 1,024 x 768, and 1,280 x 1,024. The higher the resolution, the more that can be displayed on the screen. See if your screen resolution matches the one your partner has on their screen.
One of the greatest challenges for a web designer is to construct pages that work well in any size screen and not just the main resolution of the screen where the pages were designed. One way to check this is with a program called ScreenFly. This allows designers to test their websites and pages with different resolutions and dimensions. Let’s test out the class website to see how well it does in different resolutions.
PART 2: DAILY DESIGN – Designing Sections with HTML5
Create a new Notepad Document called “sections.html”
The goal of today’s design is to get you comfortable with writing sections into a source code. In the end, we will create a more complex web page that has various pieces of content inside, but the template will look something the one below.