Web Development 02 - Simple Webpage

Hello fellow Null-Byters! In this "tutorial" we will be going basics of HTML. In the next tutorial, we will be going over CSS and then apply JavaScript.

What Is HTML?

HTML stands for Hyper Text Markup Language. It is used to structure and is horrible with styling. HTML was created just to put web documents on a screen where people can read it. Not for styling.

Options

I suggest you use some sort of IDE or text editor. I will personally be using Atom and an extension (package) called Remote FTP. I will also be using another extension (package) named emmet. I highly suggest you do this as it is more efficient. Otherwise just edit the file on the system. The end result will be the same.

If you are using my method, you need to run the command: sudo chmod -R 777 /var/www

This just owns all the files in /var/www so the pi user can edit them remotely.

To use remote ftp, create a folder (which will be our project folder on the local system) and create a file named .ftpconfig (or use the command palette and type Remote FTP: Create sftp) and put

{

"protocol": "sftp",

"host": "{your linux ip here}",

"port": 22,

"user": "{user}",

"pass": "{password}",

"promptForPass": false,

"remote": "/var/www/html",

"agent": "",

"privatekey": "",

"passphrase": "",

"hosthash": "",

"ignorehost": true,

"connTimeout": 10000,

"keepalive": 10000,

"keyboardInteractive": false

}

if you are using Windows or Mac you don't need this as you can edit it directly with Atom and it will work.

Starting a Basic Page

When creating a website in HTML, you first need to tell the web browser what type document this is. At the top add to do this. Now, we need to create the tags that will hold everything together. It will be the parent. This tag is the HTML tag. If you have never made an HTML file before, you need to know that almost every tag will begin with <{tag}> and end with . This allows us to surround other elements and can make it easier in CSS. So now we want to add

Everything we will be doing afterwards will be inside these tags, except for CSS and JavaScript.

The Brain of the Operation

Now, we need to make a head tag. The head tag is required and we can put things in here for importing custom fonts to setting the title. For today, we will just be setting the title. So inside the HTML tags, add the head tag which is just the same format as the HTML tags.

Now, we can put so many things in here from meta to link which will be discussed later. We are going to just set a title. This will set the title of the page, the set of words that display on the tabs. Just like the previous two tags, it is so set it to what you want.

Previous SlideNext Slide

That is all we will be doing for now in the head tag,

No Guts No Glory

There are three parts of the body of the website. The body is where all the content goes.

1. Header
2. Content
3. Footer

We will get more into this later but here is a picture to show it.

Now, we are going to add a header and just a little piece of text. First we need to add the guts of the webpage. Just like the required header tag, we need to add a body tag. Just like every other tag we have encountered, it is

There are 6 different headings. h1 h2 h3 h4 h5 h6. h1 is the biggest and h6 is the smallest. Just like before, it is . We will be using h1. Fill it with what you want, I will use Hello, World

Previous SlideNext Slide

Finally, we want to add text, like in a paragraph. To do this, we want to use the 'p' tag.

Previous SlideNext Slide

This might be a bit to take in. Please leave some constructed criticism and if you have any questions please ask. Next tutorial we will be going over CSS.

-Smith

P.S. If anyone sees this who can change the topic, please do. I don't haver permission to do so.