Original subtitles

1 1

In this video, we'll create a new project 2

2

in Brackets and talk about 3

3

the common structure of any HTML document. 4

4

Let's start by creating an empty folder 5

5

where we will put our first HTML file. 6

6

I'll create this folder right here on my desktop. 7

7

But you can create your working folder wherever you like. 8

8

We'll call this one "blog post," 9

9

because as I showed you before, we will start 10

10

by building a simple blog post web page. 11

11

I'll leave it empty and just leave it here. 12

12

And now let's finally open up Brackets, just our coding. 13

13

Now by clicking on this button here, 14

14

we can open the folder we just created. 15

15

So it's this blog post folder right here. 16

16

Brackets now uses this folder as our project folder. 17

17

So all files contained in this folder 18

18

will be part of our project. 19

19

Now we are able to create an empty file. 20

20

And for that, just hit the File menu and then New. 21

21

And that's it. 22

22

Very simple. 23

23

Now let's save it, and give it a name. 24

24

File, Save. 25

25

And we're going to call it index.html. 26

26

So that the computer recognizes it as an HTML document. 27

27

Index.html is a standard name for 28

28

the main HTML file of any project. 29

29

So as I mentioned before, HTML documents 30

30

are described by elements. 31

31

Now all HTML documents have a common structure 32

32

where the HTML element is the first one, always. 33

33

So we'll start with this one, HTML, and close it. 34

34

And now, you see Brackets helps us here 35

35

and closes the tag automatically for us. 36

36

Pretty useful. 37

37

Now inside the HTML element, 38

38

there are always two key elements in every structure. 39

39

It's the head and the body. 40

40

These are the main components of any web page. 41

41

So let's just put them into the HTML element. 42

42

So head, and Brackets also helps us with this. 43

43

It automatically recognized what we want to write. 44

44

So now I just hit Return and close the tag. 45

45

And like magic, the other closing tag appears. 46

46

So the head and the same thing for the body tag. 47

47

And save it. 48

48

You can also hit Command S or Control S 49

49

in a Windows machine. 50

50

The head element can include a title for your web site. 51

51

CSS styles, some information for the browser 52

52

or for search engines and more. 53

53

We'll work on all of that later. 54

54

The body element is where all the visible stuff 55

55

of your web page goes, like all the content 56

56

such as text, links, images, lists, and many more elements. 57

57

So just a very basic structure of an HTML document, 58

58

but actually, there is one thing missing here, 59

59

and that's the so-called doctype. 60

60

The doctype declaration must be the very first thing 61

61

in your HTML document, even before the HTML tag. 62

62

So let's just put it here. 63

63

It goes like this. 64

64

Doctype... 65

65

Sorry. 66

66

Doctype then HTML. 67

67

This is technically not an HTML element, 68

68

but an instruction to the browser about what version 69

69

of HTML the page is written in. 70

70

So with this declaration, I just told the browser 71

71

that this file will be an HTML5. 72

72

And save our document again. 73

73

And speaking of saving, 74

74

let's install our very first Brackets extension. 75

75

I will just hit this button here like I showed you before. 76

76

And here clicking on the Available tag 77

77

and we'll write "Autosave." 78

78

This little extension takes care of saving 79

79

all our files whenever we leave 80

80

the Brackets up, which is very useful. 81

81

So I already have it installed 82

82

but you can just click here on this install button. 83

83

Now we know how to create 84

84

the basic structure of an HTML element. 85

85

In the next video, we finally start to code 86

86

some visible stuff for our first web page.