Explore
For Enterprise
Join for Free
Log In

Kunst und Geisteswissenschaften
Wirtschaft
Informatik
Datenverarbeitung
Informationstechnologie
Gesundheit
Mathematik und Logik
Persönliche Entwicklung
Physik und Ingenieurwesen
Sozialwissenschaften
Sprachen lernen
Abschlüsse
Zertifikate

Alle Bereiche erkunden

Blättern
Suche
Für Unternehmen
Anmelden
Kostenlose Teilnahme

02.04 - Template Page

Loading...

Introduction to HTML5

University of Michigan

4.7 (8,413 Bewertungen) | 140K Teilnehmer angemeldet

Kurs 1 von 5 in Web Design for Everybody (Basics of Web Development and Coding) Spezialisierung

Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have a page, what do I do now?). Throughout the course there will be a strong emphasis on adhering to syntactic standards for validation and semantic standards to promote wide accessibility for users with disabilities. The textbook we use is available online, “The Missing Link: An Introduction to Web Development and Programming” by Michael Mendez from www.opensuny.org. This course will appeal to a wide variety of people, but specifically those who would like a step-by-step description of the basics. There are no prerequisites for this course and it is assumed that students have no prior programming skills or IT experience. The course will culminate in a small final project that will require the completion of a very simple page with links and images. The focus of this course is on the basics, not appearance. You can see a sample final page at http://intro-webdesign.com/html5-plain.html. This is the first course in the Web Design For Everybody specialization. Subsequent courses focus on the marketable skills of styling the page with CSS3, adding interactivity with JavaScript and enhancing the styling with responsive design. You can see a sample site for the capstone course at http://intro-webdesign.com/

Lehrplan anzeigen

Kompetenzen, die Sie erwerben

Web Design, Web Accessibility, Html, Html5

Bewertungen

4.7 (8,413 Bewertungen)

5 stars
6,394 ratings
4 stars
1,679 ratings
3 stars
268 ratings
2 stars
33 ratings
1 star
39 ratings

NJ

Apr 26, 2019

I didn't know about making my web pages accessible till this course. But now I know how important it is for my web pages to be accessible to all, for my html to validate and be semantically correct.

TB

Nov 11, 2017

Good introduction to web development. The teacher (Colleen van Lent) has great attitude and seems interested in getting students themselves interested... she explained the intro topics very clearly.

Aus der Unterrichtseinheit

Week Two

This week you will need to take a deep breath and jump into coding. I will cover a large number of HTML tags, but it is important that you do more than just listen to these video and read the text book material. You need to practice (and fail!) in order to learn. Believe it or not, once you master the basic idea of using tags and attributes you will know everything you need to use any HTML5 tag. The page may not look the way you want it to look yet, but you will be able to use text, links, images, tables, and even music and videos! If you want to refer to a textbook this week for reinforcement of concepts, we will be using the Shay Howe online textbook as a reference. I will include links after the lectures, but some students prefer to read before the videos. (My preferred approach is to read/watch/read again.)

02.02 - HTML5 Tags and Syntax12:10

02.03 - Semantic Tags6:04

02.04 - Template Page7:11

Unterrichtet von

Colleen van Lent, Ph.D.
Lecturer
Charles Russell Severance
Professor

Skript

Hi, everybody.

Every once in a while I like to stop what we've been doing, and

just do a quick check and make sure that we've all been following along, and

really getting a grasp of what we're doing.

So today, we're going to make a template page.

Today, I want you to create a page called index.html.

This page should utilize all those semantic tags that we've

been talking about.

The header, some sort of main, a footer.

And what I want you to do is I wanna make sure those elements are not empty.

Thirdly, I wanna make sure that your page validates.

So let's stop for a second, and think about all the things we've learned.

You've learned how to make elements.

You've learned how to validate them.

You've learned how to save your code.

So if you've only been listening and you haven't been coding,

now is the time to jump in with me and start coding.

So let's start with a shell.

If you remember, every webpage has three main parts.

It has your Doctype, which says hey browser, I'm gonna use HTML5.

It has your Meta-Data, which says, I'm gonna use this type of language and

this is what the title of my page should be.

And finally, you're gonna show your Displayable Content.

So, now's a time to stop, if you've been looking along on, on your phone or

whatever, I'd really love you to burst open an editor,

and start typing along with me.

So I've brought up Sublime, which is the editor I like to use.

And I'm gonna go ahead and start typing in my text.

The first thing I wanted to start with,was my doc type.

And for HTML5 it's super easy, because it's just doc type.

[SOUND] As long as I can type it correctly.

I've got that.

The next thing I said I wanted to put in, was the head or

the Meta-Data, and the tag for that, very simply enough is head.

Now if you've been following along as I code, you would know that

most of the time my code has this really nice kind of color signature to it, and

you can follow along with the different parts.

But right now all my text is just white.

The reason for this, is that even though I've begun an HTML file.

I haven't told my browser yet

that it's an HTML file, it's just any type of text to them.

So I am gonna go ahead and save.

And what I want to do is I want to call this, index.html.

The reason for using index.html, is that this is a convention known worldwide as,

this is the main page for my site.

So I'm gonna go ahead and hit save.

And as you can see, the colors have started showing up.

So let's go ahead and finish filling in my head element.

I'm gonna go ahead and put in my end tag right away,

because otherwise I tend to forget these things.

And the two things I want in here are the Meta-Data.

[SOUND] Oops, meta.

Eight.

And the all important title.

The title, again, is what shows up on the browser's little tab.

It doesn't show up on the page itself, it shows up in the tab.

[SOUND] I'm gonna say, My First Page.

Okay, I've gone in and put the head, and

now it's time to put in the body of my code.

Or my displayable content.

So I'm going to start with the body tag.

[SOUND] And I'm actually gonna go and

end my HTML tag while I'm thinking about it at the same time.

So this is an important step right here, where we decide,

whether we're gonna make accessible code, or just every day average code.

Accessible code is broken into parts.

You have your header, you have your main, you have your footer.

So at the very least, use a main and a footer here, letting our user know how you

can distinguish between the two types of content.

So when I put in main.

And I put in footer.

It may look like I have content, but really I don't have anything yet.

So I'm gonna save my file.

And I'm gonna use, open in browser.

And just take a look at what we've done so far.

As you can see, I do have that little part along the top that says my first page,

but what I'm missing is any type of real content.

It knows there's a main, and it knows there's a footer,

but there's nothing else really there.

So let's go ahead and put it in.

So I will put in a little paragraph tag that says,

this is my main code.

And down, oops, I shall leave it just like that.

And in my footer, I should put in some more information.

Think of a more interesting footer.

Okay. So I'm gonna go ahead and

save my page really quickly.

And let's go ahead and take a look and see if there's any, oops.

Wrong one.

And take a look and see if there's anything there.

Oh, there we go.

We have this is my man code, and think of a more interesting footer.

So it works.

My code works, and it's displaying the things I wanted it to display.

But as I mentioned, one of the things we wanna do every time we write code,

is we wanna validate it, and make sure we've written good, solid code.

So let's take a look.

I'm gonna open up a new tab, do a validator.

And I'm gonna do validate by direct input,

because I haven't actually posted my code anywhere.

So go back to my sublime.

[SOUND] Grab all of my code.

[SOUND] And put it in here.

I'm curious if you guys all noticed the error before I run it through

the validator, but let's check.

Well, at first you don't really see many messages.

But as we scroll our way down, you can see that right away it says,

the element footer must not appear as a descendant of the footer.

Well that's a kind of weird error for me, but let's take a look at it.

So, we wanna look somewhere along line ten.

And also, I'm gonna peek just a little bit at the next one, where it says end tag for

body seen, but there were Unclosed Elements.

So now I know there are two things going on.

There's something wrong with my footer, and something hasn't been closed.

Let's go to line ten.

Alright, here's my footer.

Well it's unhappy about my footer.

Oh here's another problem.

I have footer here, and footer here.

So even though I had multiple errors,

lets see what happens when I just make this one change right here.

[SOUND] All right.

I'm gonna go back here.

I kind of do this the long way, but I always prefer it that way.

Put in my code, And let's check it again.

Boom. Even though I had a bunch of errors

before, everything is gone.

So I really hope you've been following along with me.

I really hope you've gone in, you've written some code.

You've remembered to use those semantic tags such as main, such as footer.

And you went back in and

you fixed any of the errors that the validator found for you.

This is really important.

You can't really know HTML5, until you jump in and start coding.

So if you've just been following along with me, go ahead make two files,

three files, four files.

Have some fun and really play with the one tags that confused you the most.

Because that's how your gonna understand them, and

feel confident about your coding.

Durchsuchen Sie unseren Katalog

Melden Sie sich kostenlos an und erhalten Sie individuelle Empfehlungen, Aktualisierungen und Angebote.

Coursera arbeitet mit erstklassigen Universitäten und Organisationen zusammen, um Online-Kurse anzubieten und dadurch universellen Zugriff auf die weltweit beste Ausbildung zu ermöglichen.

© 2019 Coursera Inc. Alle Rechte vorbehalten.

Aus dem App Store herunterladen

Erhältlich bei Google Play

Coursera
Info
Leitung
Jobs
Katalog
Zertifikate
MasterTrack™-Zertifikate
Abschlüsse
Für Unternehmen
Für Regierungen

Community
Learners
Partners
Developers
Beta Testers
Translators

Verbinden
Blog
Facebook
LinkedIn
Twitter
Instagram
Youtube
Tech-Blog

Mehr
Nutzungsbedingungen/AGB
Datenschutz
Hilfe
Barrierefreiheit
Presse
Kontakt
Verzeichnis
Partnerunternehmen