Hi! I’m known as FlammableSnowman, or Snowman - feel free to call me what you’d like. In this tutorial, I will be introducing the extreme basics of web development.
| Table of Contents |
|---|
| What is HTML? |
| More About Tags |
| Creating a Web Page |
What is HTML?
HTML is a programming language; it can be used to create web pages. A web page is commonly referred to as a website. Ideally, HTML and CSS are used to code web pages, although multiple other languages like Java can be used to code web pages.
HTML uses tags. A tag starts and ends with an angle bracket (</>).
Is HTML hard to learn?
Not at all - if you’re using the DevForum, you know the basics of HTML! The DevForum uses HTML, so using tags like <details>, </details>, <small>, </small>, <big>, </big>, <ins>, </ins>, <del>, </del> and many more! All these tags are part of HTML.
More About Tags
Tags always start with the following phrase:
<…>
And always end with the following phrase:
</…>
Forgetting the angle brackets, and the slash, can often mess up your code and make your current code defunct.
Creating a Web Page
This aspect is the main aspect of this tutorial, since HTML is a fairly easy language.
Start by preparing a software, the software I will be using is Adobe Dreamweaver 2019.
Make sure that you choose HTML, and set the Doc Type to HTML5. The title does not matter, call it ‘test’ for now. Ignore the ‘Attach CSS’ for now.
This is how the default web page will look on Adobe Dreamweaver 2019, no need to delete anything:
Inside the <body> tag, write headers/titles with the tags <h1>, </h1>, <h2>, </h2>, <h3>, </h3>, <h4>, </h4>, <h5>, </h5>, <h6>, </h6>†.
This animated GIF shows the correct way of typing a header:
https://giphy.com/gifs/Yq2jWrW6MllHWLvkxw
Which reveals:
The good thing about Adobe Dreamweaver 2019 is that once you write a starting tag, it will automatically type the ending tag for you.
To compose paragraphs, use the <p> and </p> tags:
To emphasize on text, use the <strong> and </strong>, as well as the <em> and </em> tag:
This is the basic code for adding images:
Choose any image link.
To change the size of an image, change the ‘width’.
There are other tags like <li>, </li>, and many more.
†Headers on the DevForum are with hashtags (#)
Helpful Resources
The Khan Academy course is amazing and gives a hands-on learning lesson. I recommend using it.