Original subtitles

1

Hello and welcome back to a very exciting section.

2

Why is it exciting?

3

Well, we finally get to code, and we're going to start off by learning HTML, and then finally building

4

our very first website. In order for us to get started,

5

we need to set up our environment, and we do that by -

6

let's open up Google Chrome and we're going to search for 'Sublime Text 3'.

7

This is a text editor that a lot of developers use.

8

I myself have used it for years.

9

I absolutely love it.

10

In your day to day job you'll use something like this.

11

I highly recommend Sublime Text.

12

If you have a Mac version over here if you have a PC running Windows, you'll have the download link for

13

Windows.

14

So for me I'm going to download for the Mac and you can see here it's downloaded and I can drag it to

15

my applications folder if I want and you can double click. And if this is your first time downloading Sublime

16

Text, you get something like this to give it permission to load.

17

And there you go, we have Sublime Text.

18

Now what is a text editor? A text editor is a program that allows us to write code.

19

You can see over here on the right hand side of Sublime Text that it just says 'Plain Text' so I can

20

type anything that I want and there's nothing much different than if you wrote this in Word or a text

21

file. But the part with a text editor, especially with something like Sublime, that's geared towards coding.

22

If you click on 'Plain Text' here, you'll have a whole bunch of options of what type of code you're writing.

23

So in our case we're doing HTML,

24

so if I click on 'HTML', nothing changes except for the bottom part over here.

25

But now if I type something, well everything looks the same, but if I start typing HTML, It'll

26

actually recognize it and help with syntax.

27

So here now if I write HTML, look at that you get a nice little color completion.

28

So for us, for now, we're going to be writing HTML, you can see over here that there's different options

29

there is - where is it...

30

There's CSS, Javascript - which we'll learn later, so we're going to be using Sublime Text for this. For

31

now,

32

click on HTML, and let's write our very first web-page. In order for us to have a web page,

33

we write 'HTML' which stands for HyperText Markup Language.

34

So bear with me here,

35

This is going to be new.

36

But keep in mind that this is exactly what every single HTML page has.

37

These are the set of rules that all HTML files must follow.

38

And it goes like this.

39

We define a doctype, and don't worry I'll get into what that means in the next video

40

Then we have 'html' and we close the tags: '/html'

41

The second part, we have a 'head' and a closing '/head'.

42

You can see over here, some patterns forming.

43

Don't worry, I'll get back to these tags and explaining what they do, in a bit. And then we also have a 'body'

44

and then closing tags, '/body'.

45

And finally here in the 'head' we have something called a 'title', that so this over here, is the rule that

46

every single HTML file must follow. So, just looking at this right now, without knowing any HTML,

47

you can get an idea of what everything means.

48

So 'html', we're defining that this is an HTML.

49

We're saying that this is the 'head' of the HTML, with the title, and we're saying that this is the

50

'body' of the HTML.

51

So let's try something here.

52

Let's save this file, and we're going to save it - let's do 'Desktop', and we're going to call it,

53

'index.html' - you can see that it's already completed the ‘html’ syntax for us. Save and we have

54

an index.html

55

file here.

56

Let's drag this all the way down to our Google Chrome and open it up and, well, nothing happens.

57

But, lets, add a bit of text to it.

58

So in the title, I'm going to say, "My first website!".

59

And then in the body I'm just going to put "Hellooooooooo there.".

60

OK.

61

So if I save this,

62

and just to show you, from now on I'm going to be doing 'CMD-S' to save, just to go faster.

63

And now if I refresh this page I have, "Hellooooooooo there." and you can see the power over here, of what we just

64

did.

65

We have "Hellooooooooo there." as the text, which is in the body, and then we also have "My first website!" as the

66

title.

67

And you can see over here in the file, that we're referencing 'index.html' on my Desktop.

68

You can see here that we have 'html'.

69

We have the 'head', which we haven't really talked about yet but, we see that the title is in the head, kind

70

of like a header. And then we have the body which, by looking at this, we can assume that it's whatever

71

shows up onto the web page. Before we expand on this and make it, a little bit prettier,

72

because now it's just simple text.

73

I want to reiterate the fact that what we've just done is very similar to what a server does.

74

If we go back to our mock ups here, you remember that when we entered 'google.com' the servers send us

75

an HTML file, that when we moved the 'index.html' file all the way down to Google Chrome, that's

76

what we just did.

77

We mimicked a server and we gave it to the browser to load up the HTML file and because browsers are

78

built to know what HTML files are, it can read the syntax and say OK this is HTML.

79

OK.

80

You want my 'title' to be' "My first website!", and you want my 'body' to say "Hellooooooooo there."

81

That's perfect.

82

These are the default HTML rules.

83

That you'll see all the time.

84

It is a little bit confusing at first but this is it.

85

You just have to remember that there is a tag.

86

So, an 'html’ tag, a 'head' tag, a 'title' tag, a 'body' tag, and these tags usually have an opening and closing.

87

There's some exceptions to this rule, and we'll get into that a little bit later on in the videos.

88

But just remember this for now.

89

So I wanted to try creating your very first web site and seeing how it works, and once you're done with

90

that

91

I want to show you that Sublime Text actually has a nice shortcut so you don't have to keep writing

92

those tags over and over.

93

So, the way you do that is you type in, 'html' now, and then press the 'Tab' key and it loads all this up for

94

you.

95

OK, so now that we've done this, I want you to go off and create your very first website.

96

Now, I know it's very, very simple.

97

You can put whatever you want in the title and you can put whatever you want

98

in the body. And in the next video we're going to start expanding on our first website.

99

I'll see you in the next one. Bye-bye