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
Write some HTML
Loading...
来自 University of London 的课程
响应式网站基础：HTML、CSS 与 JavaScript
2743 个评分
从本节课中
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
与讲师见面
Dr Matthew Yee-KingLecturer
Computing Department, Goldsmiths, University of London
Dr Marco GilliesSenior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate DevlinSenior Lecturer
Department of Computing, Goldsmiths
[MUSIC]
Right it's time to start editing some code.
And the first thing we're going to do is fire up our text editor.
And once we got the text editor running, we can start writing HTML.
So let's go in there now.
So I've started my Sublime Text editor in this case, and
remember you can use other ones such as Notepad++, or TextWrangler.
And so I've gone to the File menu and Create a New File.
And let's have a quick look at what's on the screen here.
So we've got this number one here.
That's telling me which line in the file I'm on.
So you see if I add extra lines in the file, it increases.
So that's not really part of the document.
That's just part of the interface, telling me about what I'm editing.
And then I've got this thing here which is a tab so I can have
lots files open at the same time, the same way you can have with a web browser.
You can have lots of tabs with different files open at the same time.
So let's write our first HTML tag.
I'm going to start with the H1 tag.
So I've got an open angle bracket there, and
then I type h1, and then I close it.
So that starts an HTML tag, and then you put the name of the tag and
then you finish it like that, and then we put the contents of the tag.
So I'm gonna set this to, this is my first webpage.
And then, once you've finished writing what's in,
going in the tag, you can then end the tag.
End, so we have the angle bracket again,
then this forward slash which means end of h1.
So we can interpret this as, starts h1, contents of h1, end h1.
And let's save that, so I do File, and Save,
and I've got a folder ready here, and
I'm going to call it index.html.
So, remember that Kate was saying that, HTML files
look normally end with an html extension or .htm extension.
And you'll need to make sure that you've configured to your operating system to
show you, your file extensions.
So for example in Windows you'll have to edit your settings in your Explorer.
I think in Linux, it probably shows them by default, and also on a Mac.
So, we're saving it as index.html,
which means that it's the first page in the website.
Okay, so I saved that, and then I go into my file browser, which is here,
and I browse to where that file is saved.
And I Right-click on the file, and now I get to choose how I open it.
So, I've already got it open in Sublime Text, so I'm not going to edit it there.
I actually want to view it in my web browser, so here it is.
Here's my web browser, Google Chrome.
So that's opened it and that's my first web page.
And you can see that its, the font that's used is quite large and bold.
I mean I can zoom in just to make it really clear.
So that's large and bold.
And if I just put some text in here without any HTML.
This is outside of a tag.
Okay, save that.
So File > Save.
Or once you get into editing this stuff,
you'll gonna have to learn the keyboard shortcuts.
So in this case I do Ctrl+S to save it.
Then, I go back up to my web browser.
If I want to see what the new file looks like,
I have to hit this little reload button here.
You see again, there's a keyboard shortcut for reloading which, it's Ctrl+R.
You'll end up doing your edits in your file.
Doing Ctrl + S then, popping up to the web browser then,
doing Ctrl+R to reload the page.
Right, so let's look in this web browser.
So we've got this big large font here,
and then we've got this kind of much smaller text here.
And so what's happened is, the web browser has seen this h1 tag.
And instead of just displaying an h1 tag, it's actually decided, oh, right,
I'm actually going to display this text with a special formatting,
because h1 actually means main heading.
So, the web browser knows our main heading needs to be big and large and bold.
So, it's choosing to add that formatting to that display.
And that's one of the sorts of things to know about HTML is that,
we just say what the different parts of the document mean.
So we're saying this bit of the document is the heading.
And we can define another bit of the document as being content or whatever.
And the browser then interprets that structure that we give it, and
it chooses how to format it.
When we get into the next module and we look at CSS we'll find out how we can
actually tell the browser, don't use this formatting, use a different formatting.
So we can control the way it displays the page, but for
now we're just letting the browser make decisions for
us, about how it should display in h1, or how it should display the other tags.
So let's add some more tags and see what they do.
That's our h1 tag, and we can normally,
you'd put your paragraphs of text in a p tag.
And you can see what I'm doing is I'm creating a structure here.
So, I actually indent that slightly so it's easier to read.
So, the first paragraph.
The second paragraph.
And while we're at it, we'll do one more type of heading tag.
We'll just call it h2, this is the second heading.
Or we could call it the subtitle.
So, Ctrl+S, back over to the web browser, Ctrl+R.
So let's just have a quick look at that.
So, we created an h1 tag for the main heading,
and that's the largest text we can see there.
And then we created an h2 tag, for
the sub-heading, and that's the slightly smaller but still bold.
And then we put two paragraphs in, and that's it.
So we've created our first example of a very simple webpage.
And so, as we go through this module,
we're gonna find out about more types of tags that we can use.
[MUSIC]
