Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
学位
证书

浏览 Coursera 的全部课程

浏览
搜索
企业版
登录
免费加入

Properly structured documents

Loading...

响应式网站基础：HTML、CSS 与 JavaScript

4.5（3,253 个评分） | 93K 名学生已注册

课程 1（共 6 门，响应式网站开发与设计专项课程）

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.

查看授课大纲

您将学习的技能

Jquery, Html, JavaScript, Cascading Style Sheets (CCS)

审阅

4.5（3,253 个评分）

5 stars
2,171 ratings
4 stars
758 ratings
3 stars
224 ratings
2 stars
63 ratings
1 star
37 ratings

JF

Feb 14, 2016

Bright instructors delivering succinct and interesting content, with quick-paced videos and quizzes make a great learning experience. I am really impressed! Thank you, University of London people!

SS

Jan 03, 2016

It's very good for beginner who already have hands in programming. it gives very basic and important concepts about HTML, CSS and javascript. it also gives a brief history of internet and HTML.

从本节课中

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
Dr Marco Gillies
Senior Lecturer
Dr Kate Devlin
Senior Lecturer

脚本

[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 获取

Coursera
关于
管理团队
工作机会
目录
证书
MasterTrack™ 证书
学位
企业版
政府版

社区
Learners
Partners
Developers
Beta Testers
Translators

连接
博客
Facebook
领英
Twitter
Instagram
YouTube
技术博客

更多
条款
隐私
帮助
内容访问
媒体
联系我们
目录
附属公司