Properly structured documents

Loading...

来自 University of London 的课程

Responsive Website Basics: Code with HTML, CSS, and JavaScript

3097 个评分

浏览相关视频

您将在 Coursera 发现全球最优质的课程。以下是为我们为您提供的部分个性化建议

University of London

Responsive Website Basics: Code with HTML, CSS, and JavaScript

3097 个评分

课程 1（共 6 门，Specialization Responsive Website Development and Design）

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity. At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

从本节课中

HTML

We start the course by looking at how to set up a dev environment, build a HTML navbar and how to embed images and create lists using HTML.<p>Also we'll create properly structured HTML documents and have a look at the world's first web page. <p> Looking forward to working with you this week! <p> Matthew, Marco and Kate

Properly structured documents6:56

与讲师见面

Dr Matthew Yee-King
Lecturer
Computing Department, Goldsmiths, University of London
Dr Marco Gillies
Senior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate Devlin
Senior Lecturer
Department of Computing, Goldsmiths

[MUSIC]

Now we're gonna learn a couple more HTML tags, which are really useful if you want

to make yourself a properly structured document.

And you'll see why that's important as you work through.

So let's go back to one of our pages and start editing the code.

I'm gonna start with the index page.

Now, the proper structure for an HTML document is actually not just

to start putting your content tags in straight away.

What we normally start with is the top level tag.

So remember we've seen that you can put one tag inside another tag.

Well that's exactly what you're meant to do, so

all of the tags in the document are supposed to appear inside an html thing.

And then we have, inside that, we have a body tag.

So we'd normally tab that one out, and I'm gonna select all

the rest of the content like that, and then tab that out twice.

So what have I done there?

Well, I've created an html tag and inside that I've created a body tag.

And then I'd put all the rest of that content inside that.

And so, because we have to start and end tags, so

I now end the body tag, [ and then end the html tag.

Right, now everybody needs a head, so we can actually add one of those as well.

And so that's at the same level as the body tag, so we start with html, wraps

the whole thing, then we have a head at the top, and then we have a body below it.

And all of that content goes into the body, and unlike people.

But in the head, what we do is we put special extra information

about the document, which we might refer to as metadata.

So metadata is data about data, which might sound a bit strange,

but think of it like this.

Imagine you're listening to some music on your music playing device,

and it pops up on the screen the title of the track, and

it pops up the name of the person who maybe recorded that track.

But that doesn't actually tell you what the track sounds like.

It's not the real sound that you're listening to,

it's just some sort of information about the track.

And that's metadata, so the title and the composer of the track, that's metadata.

And in the same way, with an HTML document,

we have the body which contains the actual information, the proper information.

Like the heading, and the paragraphs, and the lists, and all that stuff.

And then we have a head, which contains the metadata,

which tells you information about this HTML page.

For example, we might define which language it is in, and

we might define other sort of information about the document.

So we can actually set a title, that's the sort of simplest thing.

And normally you'd set the title to probably

the same as whatever you put in your H1 tag there, so let's do that.

If I then reload that in the browser you'll see,

That the title, if I could actually spell the word title,

you'd see that the title appears up there.

So, this is my first web page, is now there.

And, if you like, you can see that's not the main content,

the main content is here.

But then that's just appearing on the tab in Chrome there,

just showing us that's the title, and so I can put whatever I like in there.

You can also add a description into that head region just describing what the page

is about.

And this information helps for search engines, so

if the search engine is trying to index your sites, and you've got a nice

kind of title and description, it makes for a better indexing and so on.

So that's kind of the basics of how to structure your documents properly.

So I'm gonna sort of apply that structuring back across to the other two

pages on our website.

So we just go up to the top of the document, drop that in there,

and I'll set the title up later.

Then we just put a placeholder in and then, And there.

And remember, just so that it makes the document readable, we tab that out twice.

So that shows you that that tag is of a higher level in the tree,

if you like, than that one.

And we do the same over here, Right?

So that's now dropped that out.

And then we need to add the closing tags,

end of body, End of html.

And drag that one back in, so, and I'll drag that back over there.

Okay, now you'll notice that before we added all that stuff,

the web browser was still able to display our pages just fine.

And the thing is, web browsers are actually very robust,

they're very good at dealing with badly written HTML.

I just wanted to show you one more example

of sort of badly written HTML before the end of the lesson.

So let's go to that list, and imagine that we did something like this.

Okay, so what I've done is I've started a list element inside the ul,

which is what I should be doing.

So remember the unordered list sort of wraps all of the elements.

But then the unordered list ends and then my list element ends.

So, if you like, the list element is overlapping the tag that it's inside of.

See again, the web browser doesn't crash or anything, but

it's not the correct way to write HTML.

You shouldn't have tags that can overlap other tags,

tags are either inside another tag or they're outside another tag.

They can't kind of overlap it like this, so

we should never sort of end up with a structure like that.

So the correct structure is, of course, to put it back in there.

Okay.

All right, so we've learned how to kind of wrap our HTML documents up with

an html tag, and head and body.

And we've also learned how we can sort of avoid overlapping tags in HTML,

which can cause a lot of confusion in the rendering the document later on.

[MUSIC]

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取