Web development, where to start? Right here with HTML!
First I'd like to explain the goal of this series of tutorials. The goal is to get people excited for web development and I want to do that as efficient as possible (hoping, like most teachers, to make it fun). This is why I'll try to apply the programming principle named KISS as much as possible. The basics should be enough to keep up with the series but I will provide links to resources if you want to know the ins and outs of the subject. So let's KISS and start already!
HTML is the basis of websites/apps. It is the language your browser translates to content on your screen. You can compare it with a text editor showing a stored document. The document contains the text and the editor shows it to you. In a webpage the content of the document is HTML and it is the browser that translates it to the content you read on your screen.
The source of an (almost) minimal webpage looks like this.
<!DOCTYPE html> <html> <head> <title>My webpage!</title> </head> <body> <h1>I'm writing html!</h1> <p> No idea what this all means </p> </body> </html>
So let's establish some terms by looking at the following example:
<!DOCTYPE html><!-- tell the browser it is going to read html --> <!-- This is a way to make comments in HTML --> <html><!-- html opening TAG --> <head><!-- head opening tag --> <title>My webpage!</title> </head><!-- head closing tag --> <body><!-- body opening tag --> <img src="https://fonts.gstatic.com/s/i/materialicons/done/v14/24px.svg" /> <!-- a self closing tag with an attribute --> </body><!-- body closing tag --> </html><!-- html closing tag -->
So a HTML document exists of html elements, these elements have a start tag(< elementName >) and closing tag (</ elementName >) or are selfclosing (< elementName />).
Every element between the opening tag and the closing tag of an element is considered a child of the element and is indented accordingly (for readability).
You may have noticed that the img tag in the above example had something extra (src="..."). This is called an attribute. Attributes tell something about the element and can be found in the opening tag of the element.
Let's create a HTML document and find out.
Create html file
Create a file with the html extension (filename.html)
If it doesn't work later on check if it is nog (filename.html.txt)
Fill it with html
Fill this file using a text editor (notepad e.g.) with one of the above examples
Open this file using a browser (Edge, Firefox, Chrome)
And there it is, your first html file, served by a browser! Good job.
Don't worry if this didn't work. For the next few posts of this series we are going to use codepen for the examples and for playing with the code. For the HTML basics you can use this pen:
In a pen all you'll need to do is write the HTML that goes in the body element of the HTML document and the preview will automatically be updated.
I found experimentation the fastest way to really learn something and make it stick so please experiment! Everything inside the body element of the document will be what you see in the browser.
Try to create some sort of story, maybe a list or two, and some headings, or anything else you like.
These are the basics of HTML. Sure there is more to making a web app than just html but this is the basis. The next post for the series is going to be about styling the HTML document with CSS, adding color, placing stuff where you want etc. Feel free to leave a comment if you run into any problems and I'll get back to you as soon as possible!