Summary

Application Development Overview

Getting Started

In this lesson, we'll begin building our application. Here's what you need to get started:

Text Editor: A place to type and save files. Recommended options include:
- Adam (used in this lesson)
- Other options: Visual Studio Code, Sublime Text, Notepad++, etc.
Web Browser: To open and view your HTML files. Popular choices include:
- Chromium (used in this lesson)
- Other options: Firefox, Safari, Edge, Opera, Brave, etc.
Directory: You need to create a directory in your file system for your project files.

Creating a Directory

You can create a folder using command-line tools (Linux/Mac terminal or Windows CMD/PowerShell), or your operating system's file manager.
For this project, I've created a directory named write-something.

Creating Your First HTML File

In the write-something folder, create a new file named index.html.
This file will define the structure of your application using HTML (Hypertext Markup Language).

Basic HTML Structure

The basic components of an HTML document include:

HTML Tag: Encapsulates the whole document:
```
<html>
</html>
```
Head Tag: Contains metadata, including the title of the page:
```
<head>
    <title>Your Title Here</title>
</head>
```
Body Tag: Contains the visible content:
```
<body>
    Content goes here.
</body>
```

DocType Declaration

Before the HTML tag, it's good practice to declare the document type:

<!DOCTYPE html>

This informs the browser that you're using HTML5.

Viewing Your HTML File

To see your work in the browser, you can:

Right-click the file and select "Open in Browser"
Drag and drop the file into an open browser window
Use your text editor's functionality if available.

Refreshing the Browser

After making changes, always save the file and refresh the browser to see updates. Typically, the refresh shortcut is:

Control + R on Windows/Linux
Command + R on Mac

Conclusion

We've set up a basic HTML document structure. This is just the beginning—let's take a break and continue developing our application next time.

Video Transcript

Welcome back. Let's start building our application. We got an overview now we need to know how to build this. What do we need? Well, we're gonna do two basic things. You can see here right-hand side versus a text editor because we need to somewhere to type and save the file. Then you're going to need a browser so you can open file, case HTML, browse and go to the application. There are many text editors out there, there are many browsers out there. It's up to you to choose. I really like. For this lesson I'll be using Adam, my text editor here. This one on the left hand side, right hand side. For the browser I will be using Chromium. There are other browsers out there such as Firefox, Safari, Edge, Home, Opera, Brave, so on. Choose the one of your like. Okay, so we're going to need a directory in our file system so we can start putting the files there. You can do that in many ways. I like doing things in the command line. Linux Max users can use the terminal you're liking and those users can use CMD or the PowerShell. We'll do a lot more stuff in the command line later on but for now you can get by if you just use the file manager of your operating system. In this case I'm using Ubuntu Linux. So I have the directory right here that I already created. I named my directory write-something. So I want you to create that folder so we're going to start writing files there. Now I already wrote this file here, readme.txt is just a file. You can see on the right hand side of the screen here. Anyway, let's create a new file in the directory. I'm going to call it index.html. This is where we're going to define the structure of the application. Okay, we're going to be using HTML. The .html format is for hypertext, markup, language, files. This will define the structure of our website, our web page application. Whatever. Initially it will be just a plain website and once the website becomes interactive that's when it becomes an actual application, web application. Now it will be just a web page. Anyway, let's get started. We're going to do HTML. So for HTML it's the syntax is like xml. We're going to use tags and inside those tags we're going to add more tags and inside those tags we can have some content like the tags somewhere or you can define metadata for the page. So let's get started. The most basic tags HTML tag, like it covers all the other tags. So when you write a tag you first open it using the angle brackets, surrounding, name of the tag. In this case you have less than, name of the tag, greater than. Now when you open a tag always remember to close it. I already did it here. To close it just place a slash type the same thing you've typed when you open except you have to type a slash right after the last thing. Last then, slash HTML, close with angle brackets. So we have a tag here. Now inside the tag you can add more tags. I can nest things. So typically you're always going to have this basic structure. HTML tag and then inside you have about two more tags. That's going to be the head. Then we have the body. Oops, I did close it early. Okay, head and the body. So I just like to use two space indentation for all my web development. That's what I'll be using. Whenever I open a tag, I'll add some indentation. When I close the tag I'll revert one level to the left. So in the head tag you typically put metadata related to your website. In this case we're just going to be interested one for now and that's going to be the title. So I'm going to use the title tag to define the title for this website. I'm going to write something here. So the title is what appears when you're writing the browser and you have the tabs. So this text in the tab like Mendian web docs, Laurie Impson. This is the text that comes from the title tag. Okay, we'll get back here. That's it. Now for the body, it's the actual content that the user will see. So the body, we're going to have something. Content goes here. This is to know to test it out. Now we have written the very basic HTML tag. Now there's one more tag that I would like to point out. That's a doc type, a special kind of tag so you can tell the browser, hey, I'm going to use a certain version of the HTML of HTML. So it's going to be less than exclamation doc type space HTML like this. This will tell the browser, hey, this document uses HTML version five. Because in the past there used to be other versions of HTML. So now we have this tag called doc type to tell the browser what version we're using HTML most recent version as time for writing recording this most popular one and the one to go for now. Anyway, that's a doc type. Now we have written the structure very simple website. Now how can we see what we wrote in the browser? Just open the file on the browser. So many ways to do that. I could maybe your text editor can right click and open in the browser or something. I have showing file manager, right shows the file here in the manager I can right click, HTML five open in the browser, that'll be a choice. Or again, drag and drop that works to see. So I dragged and drop it to work. Okay, so you can see the title of the pages here write something also in the tab and the content whatever we wrote in the body goes here. If you want to see the source code for what we wrote, you can right click. And you can see view page source. The browser will show you this is the source code for whatever was rendered on the screen. And that's exactly what we wrote. Nice. So every time you make a change to your source code here, you got to save the file. Then in the browser, go here and refresh. Might be hotkeys for that. For example, my case is control R using Mac might be command R. To reload or refresh the page. Okay, so we wrote our very basic structure. So let's take a break for now and continue.